update: 表单通道切换时取消表格联动

src/views/message/component/detail-form.vue

@@ -94,7 +94,10 @@ export default {
           if(key == 'sendSmsType' && this.form[key] != 0) {
             this.form['appointChannel'] = this.form[key];
             this.form[key] = 1;
-          };
+            this.$emit('getTableChannelType', this.form['appointChannel']); // 触发table组件修改通道类型
+          } else if(key == 'sendSmsType' && this.form[key] == 0) {
+            this.$emit('getTableChannelType', 0);  // 触发table组件修改通道类型
+          }
           if(key == 'smsAppid' && !this.form[key]) {
             const { result } = await getAppid();
             this.form[key] = result;
@@ -133,20 +136,6 @@ export default {
         });
       return res;
     }
-  },
-  watch: {
-    // 发送给table组件
-    'form.sendSmsType': {
-      handler(val) {
-        val == 0 && this.$emit('getTableChannelType', val);
-      },
-      immediate: true
-    },
-    'form.appointChannel': {
-      handler(val) {
-        this.$emit('getTableChannelType', val);
-      }
-    }
   }
 };
 </script>

src/views/message/component/detail-table.vue

@@ -2,17 +2,17 @@
   <div class="detail-table">
     <div class="top">
       <div class="left">
-        <el-input v-model="search.searchKey" @change="getTableData" placeholder="请输入GIC短信模板ID/模板名称/模板内容" prefix-icon="el-icon-search" style="width: 315px" />
-        <el-select v-model="search.smsType" @change="getTableData" placeholder="请选择模板类型" class="w148 ml10">
+        <el-input v-model="search.searchKey" @change="searchTypeChange" placeholder="请输入GIC短信模板ID/模板名称/模板内容" prefix-icon="el-icon-search" style="width: 315px" />
+        <el-select v-model="search.smsType" @change="searchTypeChange" placeholder="请选择模板类型" class="w148 ml10">
           <el-option v-for="item in smsList" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
-        <el-select v-model="search.auditStatus" @change="getTableData" placeholder="商户后台状态" class="w148 ml10">
+        <el-select v-model="search.auditStatus" @change="searchTypeChange" placeholder="商户后台状态" class="w148 ml10">
           <el-option v-for="item in auditStatusList" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
-        <el-select v-model="search.channelType"  @change="getTableData" placeholder="通道类型" class="w148 ml10">
+        <el-select v-model="search.channelType"  @change="searchTypeChange" placeholder="通道类型" class="w148 ml10">
           <el-option v-for="item in channelList" :key="item.channelId" :value="item.channelId" :label="item.channelName" />
         </el-select>
-        <el-select v-model="search.channelStatus"  @change="getTableData" placeholder="商户后台状态" class="w148 ml10">
+        <el-select v-model="search.channelStatus"  @change="searchTypeChange" placeholder="商户后台状态" class="w148 ml10">
           <el-option v-for="item in channelStatusList" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </div>
@@ -125,7 +125,6 @@ export default {
   created() {
     // create hook
     this.getTableHeader();
-    this.getTableData();
     this.getChannelList();
   },
   mounted() {
@@ -214,6 +213,10 @@ export default {
       this.tableData.currentPage = val;
       this.getTableData();
     },
+    searchTypeChange() {
+      this.tableData.currentPage = 1;
+      this.getTableData();
+    },
     // 提交审核
     async submitExamine(row) {
       try {
@@ -238,6 +241,8 @@ export default {
       } else {
         this.search.channelType = val;
       }
+      this.tableData.currentPage = 1;
+      this.getTableData();
     },
     // 查看所有通道
     showAllChannel(row) {