From 1d53c02d843b2a5299ed48d5e5ed376dfcc1836c Mon Sep 17 00:00:00 2001
From: dengbw <dengbw@shengshi.com.cn>
Date: Tue, 13 Jun 2023 10:17:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E9=BB=91=E5=90=8D=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sylive/blacklist/index.js             |  64 +++++
 .../components/activity-blacklist.vue         | 235 -----------------
 src/views/sylive/activity/index.vue           |  14 +-
 .../blacklist/components/blacklist-edit.vue   | 110 ++++++++
 .../blacklist/components/blacklist-import.vue | 102 ++++++++
 .../blacklist/components/blacklist-search.vue |  62 +++++
 src/views/sylive/blacklist/index.vue          | 239 ++++++++++++++++++
 7 files changed, 578 insertions(+), 248 deletions(-)
 create mode 100644 src/api/sylive/blacklist/index.js
 delete mode 100644 src/views/sylive/activity/components/activity-blacklist.vue
 create mode 100644 src/views/sylive/blacklist/components/blacklist-edit.vue
 create mode 100644 src/views/sylive/blacklist/components/blacklist-import.vue
 create mode 100644 src/views/sylive/blacklist/components/blacklist-search.vue
 create mode 100644 src/views/sylive/blacklist/index.vue

diff --git a/src/api/sylive/blacklist/index.js b/src/api/sylive/blacklist/index.js
new file mode 100644
index 00000000..37a1d981
--- /dev/null
+++ b/src/api/sylive/blacklist/index.js
@@ -0,0 +1,64 @@
+import request from '@/utils/request';
+
+/**
+ * 分页查询黑名单
+ * @param params 查询条件
+ */
+export async function pageBlacklist(params) {
+  const res = await request.get('/sylive/blacklist/page', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加黑名单
+ * @param data 黑名单信息
+ */
+export async function addBlacklist(data) {
+  const res = await request.post('/sylive/blacklist', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除黑名单
+ * @param id 黑名单id
+ */
+export async function removeBlacklist(id) {
+  return removeBlacklists([id]);
+}
+
+/**
+ * 批量删除黑名单
+ * @param ids 黑名单id集合
+ */
+export async function removeBlacklists(ids) {
+  const res = await request.delete('/sylive/blacklist/batch', {
+    data: { ids }
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 导入黑名单
+ * @param file excel文件
+ */
+export async function importBlacklist(file, activityId) {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('activityId', activityId);
+  const res = await request.post('/sylive/blacklist/import', formData);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/sylive/activity/components/activity-blacklist.vue b/src/views/sylive/activity/components/activity-blacklist.vue
deleted file mode 100644
index ecb5a4ee..00000000
--- a/src/views/sylive/activity/components/activity-blacklist.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<!-- 编辑弹窗 -->
-<template>
-  <ele-modal
-    width="930px"
-    :visible="visible"
-    :append-to-body="true"
-    :close-on-click-modal="true"
-    custom-class="ele-dialog-form"
-    title="修改黑名单"
-    @update:visible="updateVisible"
-  >
-    <el-form ref="form" :model="form" label-width="82px">
-      <el-form-item label="导入名单:">
-        <el-upload
-          drag
-          action=""
-          class="ele-block"
-          v-loading="loading"
-          accept=".xls,.xlsx"
-          :show-file-list="false"
-          :before-upload="doUpload"
-        >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">
-            将文件拖到此处, 或 <em>点击上传</em>
-          </div>
-          <template v-slot:tip>
-            <div class="el-upload__tip ele-text-center">
-              <span>只能上传xls、xlsx文件, </span>
-              <el-link
-                download
-                :href="url"
-                type="primary"
-                :underline="false"
-                style="vertical-align: baseline"
-              >
-                下载模板
-              </el-link>
-            </div>
-          </template>
-        </el-upload>
-        <el-button
-          icon="el-icon-plus"
-          style="width: 100%; margin-top: 15px"
-          @click="addMobile"
-        >
-          新增手机号
-        </el-button>
-      </el-form-item>
-      <el-form-item label="名单列表:">
-        <el-table :data="form.blacklist" :border="true" style="width: 100%">
-          <el-table-column label="手机号" align="center">
-            <template v-slot="{ row }">
-              <el-input
-                v-if="row.type == 'add'"
-                v-model="row.mobile"
-                placeholder="请输入手机号"
-              />
-              {{ row.type != 'add' ? row.mobile : '' }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            width="70px"
-            align="center"
-            :resizable="false"
-          >
-            <template v-slot="{ row, $index }">
-              <span class="ele-action" v-if="row.type != 'del'">
-                <el-popconfirm
-                  title="确定要删除此手机号?"
-                  @confirm="removeMobile($index)"
-                >
-                  <template v-slot:reference>
-                    <el-link
-                      icon="el-icon-delete"
-                      type="danger"
-                      :underline="false"
-                    >
-                      删除
-                    </el-link>
-                  </template>
-                </el-popconfirm>
-              </span>
-              <span class="ele-action" v-else>已删除</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form-item>
-    </el-form>
-    <template v-slot:footer>
-      <el-button @click="updateVisible(false)">取消</el-button>
-      <el-button type="primary" :loading="loading" @click="save">
-        保存
-      </el-button>
-    </template>
-  </ele-modal>
-</template>
-
-<script>
-  import {
-    updateActivityBlacklist,
-    importActivityBlacklist
-  } from '@/api/sylive/activity';
-
-  export default {
-    components: {},
-    props: {
-      // 弹窗是否打开
-      visible: Boolean,
-      // 修改回显的数据
-      data: Object
-    },
-    data() {
-      const defaultForm = {
-        activityId: null,
-        blacklist: []
-      };
-      return {
-        defaultForm,
-        // 表单数据
-        form: { ...defaultForm },
-        // 提交状态
-        loading: false,
-        // 是否是修改
-        isUpdate: false,
-        // 导入请求状态
-        // 导入模板下载地址
-        url: '/temp/blacklist.xlsx'
-      };
-    },
-    computed: {
-      // 是否开启响应式布局
-      styleResponsive() {
-        return this.$store.state.theme.styleResponsive;
-      }
-    },
-    methods: {
-      /* 上传 */
-      doUpload(file) {
-        if (
-          ![
-            'application/vnd.ms-excel',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-          ].includes(file.type)
-        ) {
-          this.$message.error('只能选择 excel 文件');
-          return false;
-        }
-        if (file.size / 1024 / 1024 > 5) {
-          this.$message.error('大小不能超过 5MB');
-          return false;
-        }
-        this.loading = true;
-        importActivityBlacklist(file, this.form.activityId)
-          .then((msg) => {
-            this.loading = false;
-            this.$message.success(msg);
-            this.updateVisible(false);
-            this.$emit('done');
-          })
-          .catch((e) => {
-            this.loading = false;
-            this.$message.error(e.message);
-          });
-        return false;
-      },
-      /* 保存编辑 */
-      save() {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            return false;
-          }
-          this.loading = true;
-          const data = {
-            ...this.form
-          };
-          updateActivityBlacklist(data)
-            .then((msg) => {
-              this.loading = false;
-              this.$message.success(msg);
-              this.updateVisible(false);
-              this.$emit('done');
-            })
-            .catch((e) => {
-              this.loading = false;
-              this.$message.error(e.message);
-            });
-        });
-      },
-      /* 添加手机 */
-      addMobile() {
-        this.form.blacklist.push({ mobile: '', type: 'add' });
-      },
-      /* 删除手机 */
-      removeMobile(index) {
-        if (!this.form.blacklist[index].id) {
-          this.form.blacklist.splice(index, 1);
-        } else {
-          this.form.blacklist[index].type = 'del';
-        }
-      },
-      /* 更新visible */
-      updateVisible(value) {
-        this.$emit('update:visible', value);
-      }
-    },
-    watch: {
-      visible(visible) {
-        if (visible) {
-          if (this.data) {
-            this.$util.assignObject(this.form, {
-              ...this.data
-            });
-            this.isUpdate = true;
-          } else {
-            this.form.blacklist = [];
-            this.isUpdate = false;
-          }
-        } else {
-          this.$refs.form.clearValidate();
-          this.form = { ...this.defaultForm };
-        }
-      }
-    }
-  };
-</script>
-<style lang="scss" scoped>
-  .ele-block {
-    :deep(.el-upload),
-    :deep(.el-upload-dragger) {
-      width: 100%;
-    }
-  }
-</style>
diff --git a/src/views/sylive/activity/index.vue b/src/views/sylive/activity/index.vue
index af6abda8..4744ac15 100644
--- a/src/views/sylive/activity/index.vue
+++ b/src/views/sylive/activity/index.vue
@@ -153,11 +153,6 @@
       :visible.sync="showEditVisitTag"
       @done="reload"
     />
-    <activity-blacklist
-      :data="current"
-      :visible.sync="showEditBlacklist"
-      @done="reload"
-    />
   </div>
 </template>
 
@@ -169,7 +164,6 @@
   import ActivityCoupon from './components/activity-coupon.vue';
   import ActivityDraw from './components/activity-draw.vue';
   import ActivityVisitTag from './components/activity-visit-tag';
-  import ActivityBlacklist from './components/activity-blacklist';
 
   import {
     pageActivity,
@@ -183,7 +177,6 @@
   export default {
     name: 'syliveActivity',
     components: {
-      ActivityBlacklist,
       ActivityVisitTag,
       QrCode,
       ActivitySearch,
@@ -277,7 +270,6 @@
         // 是否显示编辑券弹窗
         showEditDraw: false,
         showEditVisitTag: false,
-        showEditBlacklist: false,
         // 是否显示二维码弹窗
         showCode: false
       };
@@ -310,11 +302,7 @@
           };
           this.showEditVisitTag = true;
         } else if (command === 'blacklist') {
-          this.current = {
-            blacklist: row.showBlacklist,
-            activityId: row.activityId
-          };
-          this.showEditBlacklist = true;
+          this.$router.replace('/sylive/blacklist?id=' + row.activityId);
         } else if (command === 'goods') {
           this.$router.replace('/sylive/goods?id=' + row.activityId);
         } else if (command === 'groups') {
diff --git a/src/views/sylive/blacklist/components/blacklist-edit.vue b/src/views/sylive/blacklist/components/blacklist-edit.vue
new file mode 100644
index 00000000..d1553252
--- /dev/null
+++ b/src/views/sylive/blacklist/components/blacklist-edit.vue
@@ -0,0 +1,110 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="750px"
+    :visible="visible"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    title="添加黑名单"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
+      <el-form-item label="手机号:" prop="mobile">
+        <el-input
+          clearable
+          :maxlength="60"
+          v-model="form.mobile"
+          placeholder="请输入手机号"
+        />
+      </el-form-item>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { addBlacklist } from '@/api/sylive/blacklist';
+  export default {
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        blacklistId: null,
+        activityId: null,
+        mobile: ''
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        rules: {
+          mobile: [
+            {
+              required: true,
+              message: '请输入手机号',
+              trigger: 'blur'
+            }
+          ]
+        },
+        // 提交状态
+        loading: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          const data = {
+            ...this.form
+          };
+          addBlacklist(data)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          this.form.activityId = this.data.activityId;
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/blacklist/components/blacklist-import.vue b/src/views/sylive/blacklist/components/blacklist-import.vue
new file mode 100644
index 00000000..7c8984d0
--- /dev/null
+++ b/src/views/sylive/blacklist/components/blacklist-import.vue
@@ -0,0 +1,102 @@
+<!-- 导入弹窗 -->
+<template>
+  <ele-modal
+    width="520px"
+    title="导入黑名单"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <el-upload
+      drag
+      action=""
+      class="ele-block"
+      v-loading="loading"
+      accept=".xls,.xlsx"
+      :show-file-list="false"
+      :before-upload="doUpload"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处, 或 <em>点击上传</em></div>
+      <template v-slot:tip>
+        <div class="el-upload__tip ele-text-center">
+          <span>只能上传xls、xlsx文件, </span>
+          <el-link
+            download
+            :href="url"
+            type="primary"
+            :underline="false"
+            style="vertical-align: baseline"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+  </ele-modal>
+</template>
+
+<script>
+  import { importBlacklist } from '@/api/sylive/blacklist';
+
+  export default {
+    props: {
+      // 是否打开弹窗
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      return {
+        // 导入请求状态
+        loading: false,
+        // 导入模板下载地址
+        url: '/temp/blacklist.xlsx'
+      };
+    },
+    methods: {
+      /* 上传 */
+      doUpload(file) {
+        if (
+          ![
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          ].includes(file.type)
+        ) {
+          this.$message.error('只能选择 excel 文件');
+          return false;
+        }
+        if (file.size / 1024 / 1024 > 5) {
+          this.$message.error('大小不能超过 5MB');
+          return false;
+        }
+        this.loading = true;
+        let activityId = this.data.activityId;
+        importBlacklist(file, activityId)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success(msg);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+        return false;
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-block {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/views/sylive/blacklist/components/blacklist-search.vue b/src/views/sylive/blacklist/components/blacklist-search.vue
new file mode 100644
index 00000000..eb8ed472
--- /dev/null
+++ b/src/views/sylive/blacklist/components/blacklist-search.vue
@@ -0,0 +1,62 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 8, md: 16 } : { span: 8 }">
+        <el-form-item label="手机号:">
+          <el-input clearable v-model="where.mobile" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        mobile: ''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/blacklist/index.vue b/src/views/sylive/blacklist/index.vue
new file mode 100644
index 00000000..dd0f6233
--- /dev/null
+++ b/src/views/sylive/blacklist/index.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <blacklist-search @search="reload" />
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :selection.sync="selection"
+        cache-key="syliveActivityBlacklistTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="openEdit()"
+          >
+            新建
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            icon="el-icon-delete"
+            class="ele-btn-icon"
+            @click="removeBatch"
+          >
+            删除
+          </el-button>
+          <el-button
+            size="small"
+            icon="el-icon-upload2"
+            class="ele-btn-icon"
+            @click="openImport"
+          >
+            导入
+          </el-button>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此手机号吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!-- 编辑弹窗 -->
+    <blacklist-edit :data="current" :visible.sync="showEdit" @done="reload" />
+    <!-- 导入弹窗 -->
+    <blacklist-import
+      :data="current"
+      :visible.sync="showImport"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script>
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import BlacklistSearch from './components/blacklist-search.vue';
+  import BlacklistEdit from './components/blacklist-edit.vue';
+  import BlacklistImport from './components/blacklist-import';
+  import { getActivity } from '@/api/sylive/activity';
+  import {
+    pageBlacklist,
+    removeBlacklist,
+    removeBlacklists
+  } from '@/api/sylive/blacklist';
+  const ROUTE_PATH = '/sylive/blacklist';
+
+  export default {
+    name: 'syliveBlacklist',
+    components: { BlacklistSearch, BlacklistEdit, BlacklistImport },
+    data() {
+      return {
+        // 加载状态
+        title: '黑名单',
+        loading: true,
+        // 表格选中数据
+        selection: [],
+        // 当前编辑数据
+        current: null,
+        // 是否显示编辑弹窗
+        showEdit: false,
+        showImport: false,
+        activityId: null,
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'selection',
+            type: 'selection',
+            width: 45,
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            prop: 'blacklistId',
+            label: 'ID',
+            width: 80,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'mobile',
+            label: '手机号',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 150
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 120,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 200,
+            align: 'center',
+            resizable: false,
+            slot: 'action'
+          }
+        ]
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        const activityId = this.activityId;
+        return pageBlacklist({ ...where, ...order, page, limit, activityId });
+      },
+      query() {
+        this.activityId = Number(this.$route.query.id);
+        if (!this.activityId) {
+          return;
+        }
+        this.loading = true;
+        getActivity(this.activityId)
+          .then((data) => {
+            this.loading = false;
+            // 修改页签标题
+            if (this.$route.path === ROUTE_PATH) {
+              this.title = data.title + '-黑名单';
+              setPageTabTitle(this.title);
+            }
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      },
+      /* 打开导入弹窗 */
+      openImport() {
+        this.current = { activityId: this.activityId };
+        this.showImport = true;
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      /* 显示编辑 */
+      openEdit() {
+        this.current = { activityId: this.activityId };
+        this.showEdit = true;
+      },
+      /* 删除 */
+      remove(row) {
+        const loading = this.$loading({ lock: true });
+        removeBlacklist(row.blacklistId)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+            this.reload();
+          })
+          .catch((e) => {
+            loading.close();
+            this.$message.error(e.message);
+          });
+      },
+      /* 批量删除 */
+      removeBatch() {
+        if (!this.selection.length) {
+          this.$message.error('请至少选择一条数据');
+          return;
+        }
+        this.$confirm('确定要删除选中的黑名单吗?', '提示', {
+          type: 'warning'
+        })
+          .then(() => {
+            const loading = this.$loading({ lock: true });
+            removeBlacklists(this.selection.map((d) => d.blacklistId))
+              .then((msg) => {
+                loading.close();
+                this.$message.success(msg);
+                this.reload();
+              })
+              .catch((e) => {
+                loading.close();
+                this.$message.error(e.message);
+              });
+          })
+          .catch(() => {});
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          const { path } = route;
+          if (path !== ROUTE_PATH) {
+            return;
+          }
+          this.query();
+          if (this.$refs.table) {
+            this.$refs.table.reload({ page: 1 });
+          }
+        },
+        immediate: true
+      }
+    }
+  };
+</script>