update: 筛选项顺序

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

@@ -3,15 +3,15 @@
     <div class="top">
       <div class="left">
         <el-input v-model="search.searchKey" @change="searchTypeChange" placeholder="请输入GIC短信模板ID/模板名称/模板内容" prefix-icon="el-icon-search" style="width: 315px" />
-         <label class="choose_tip">短信通道</label><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>
         <label class="choose_tip">模板类型</label><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>
         <label class="choose_tip">商户后台状态</label><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>
+         <label class="choose_tip">短信通道</label><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>
         <label class="choose_tip">通道审核状态</label><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>
@@ -21,7 +21,7 @@
       </div>
     </div>
     <div class="content mt20">
-      <el-table :data="tableData.data" element-loading-text="拼命加载中">
+      <el-table :data="tableData.data" element-loading-text="拼命加载中" v-loading="loading">
         <el-table-column v-for="(v, i) in tableData.header" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed" :show-overflow-tooltip="v.showTooltip">
           <template slot-scope="scope">
             <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
@@ -96,18 +96,19 @@ export default {
         channelType: '', // 前端自定义筛选
         channelStatus: null // 前端自定义筛选
       },
+      loading: false,
       tableData: {
         data: [],
         currentPage: 1,
         pageSizeList: [ 20, 40, 60, 80 ],
         pageSize: 20,
         header: [],
-        total: 0
+        total: 0,
       },
       dialogData: {
         visible: false,
         title: '查看所有通道',
-        list: []
+        list: [],
       },
       getTime,
       getSeconds
@@ -124,6 +125,7 @@ export default {
   methods: {
     // table-methods
     async getTableData() {
+      this.loading = true;
       const { currentPage, pageSize } = this.tableData;
       const { searchKey, smsType, auditStatus, channelType, channelStatus } = this.search;
       const para = {
@@ -137,6 +139,7 @@ export default {
         channelAuditStatus: channelStatus
       };
       const result = await getTemplateDetailList(para);
+      this.loading = false;
       this.tableData.data = result.result.result || [];
       this.tableData.total = result.result.totalCount;
     },

src/views/message/template.vue

@@ -7,7 +7,7 @@
       </el-select>
     </div>
     <div class="mt20">
-      <el-table :data="tableData.data" element-loading-text="拼命加载中">
+      <el-table :data="tableData.data" element-loading-text="拼命加载中" v-loading="loading">
         <el-table-column v-for="(v, i) in tableData.tableHeader" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
@@ -31,6 +31,7 @@ const { getAllChannel, getTemplateList } = requestApi;
 export default {
   data() {
     return {
+      loading: false,
       channelList: [],
       search: {
         searchText: '',
@@ -85,6 +86,7 @@ export default {
       ];
     },
     async getTableData() {
+      this.loading = true;
       const { currentPage, pageSize } = this.tableData;
       const { searchText, channelId } = this.search;
       const para = {
@@ -94,6 +96,7 @@ export default {
         search: searchText
       };
       const result = await getTemplateList(para);
+      this.loading = false;
       this.tableData.data = result.result.result || [];
       this.tableData.total = result.result.totalCount || 0;
     },