update: 新增文案

src/components/tip/index.vue

+<template>
+  <el-tooltip placement="top">
+    <template slot="content">
+      <p class="tip-popover">{{ text }}</p>
+    </template>
+    <i class="el-icon-info"></i>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    text: String
+  }
+};
+</script>
+
+<style scoped>
+i {
+  margin-left: 5px;
+  font-size: 13px;
+  color: #909399;
+}
+.tip-popover {
+  max-width: 400px;
+  color: #ffffff;
+}
+</style>

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

@@ -2,19 +2,22 @@
   <div class="content">
     <el-form ref="form" :model="form" :rules="rules" label-width="140px">
       <el-form-item label="短信签名ID" prop="smsSignId">
-        <el-input v-model="form.smsSignId" class="w180" disabled />
+        <el-input v-model="form.smsSignId" class="w180" :disabled="disabledSmsSignId" />
+        <p class="mt10 tip">保存后不可编辑，请谨慎填写；如需变更，请提交数据工单处理</p>
       </el-form-item>
       <el-form-item label="短信签名" prop="smsSignText">
-        <el-input v-model="form.smsSignText" class="w180" disabled />
+        <el-input v-model="form.smsSignText" class="w180" :disabled="disabledSignText" />
+        <p class="mt10 tip">保存后不可编辑，请谨慎填写；如需变更，请提交数据工单处理</p>
       </el-form-item>
       <el-form-item label="签名应用通道" prop="channelSignList">
         <el-checkbox-group v-model="form.channelSignList">
           <el-checkbox v-for="v in channelList" :key="v.channelId" :label="v.channelId" :disabled="disabledCheckBox.includes(v.channelId)">{{ v.channelName }}</el-checkbox>
         </el-checkbox-group>
+        <p class="mt10 tip">请完善短信通道的短信签名后再勾选</p>
       </el-form-item>
       <el-form-item label="短信模板数量" prop="maxTemplateCount">
         <el-input-number v-model="form.maxTemplateCount" controls-position="right" :min="form.useTemplateCount" class="w90" />
-        <span class="tips">该商户在商户后台看到的短信模板数量</span>
+         <p class="mt10 tip">该商户最多可创建的短信模板数量</p>
       </el-form-item>
       <el-form-item label="短信发送优先级" prop="sendSmsType">
         <el-radio-group v-model="form.sendSmsType">
@@ -29,9 +32,12 @@
             </el-radio-group>
           </el-radio>
         </el-radio-group>
+        <p class="mt10 tip">商户选择多通道后，系统会优先使用高优先级的通道进行发送，若短信提交失败，则换用低优先级的通道，直到所有通道都尝试过。（应用场景：短信营销，智能营销，观云台，会员小程序验证码）</p>
+        <p class="mt10 tip">商户选择指定通道后，只会通过该通道发送。</p>
       </el-form-item>
       <el-form-item label="短信AppID" prop="smsAppid">
-        {{ form.smsAppid }}
+        <span>{{ form.smsAppid }}</span>
+        <p class="mt10 tip">短信AppID由系统自动匹配</p>
       </el-form-item>
       <el-form-item label="">
         <el-button type="primary" style="margin-top: 30px" @click="submit">保存</el-button>
@@ -52,8 +58,11 @@ export default {
       cb();
     };
     return {
+      isEcho: false,
       channelList: [],
       disabledCheckBox: [],
+      disabledSignText: false,
+      disabledSmsSignId: false,
       form: {
         enterpriseSmsSettingId: '',
         enterpriseId: '',
@@ -105,6 +114,16 @@ export default {
           if (key == 'channelSort' && this.form[key]) {
             this.channelSortRes = this.channelSort(this.form[key]);
           }
+          if(key == 'smsSignId' && this.form[key]) {
+            this.disabledSmsSignId = true;
+          } else if(key == 'smsSignId' && !this.form[key]) {
+            this.disabledSmsSignId = false;
+          }
+          if(key == 'smsSignText' && this.form[key]) {
+            this.disabledSignText = true;
+          } else if(key == 'smsSignText' && !this.form[key]){
+            this.disabledSignText = false;
+          }
         }
       }
     },
@@ -138,7 +157,7 @@ export default {
         return res ? res.channelName : null;
       }).filter(el => !!el);
       return result.join(' > ');
-    }
+    },
   }
 };
 </script>
@@ -164,10 +183,13 @@ export default {
     line-height: 20px;
   }
 }
-.tips {
+.tips, .tip {
   margin-left: 14px;
   font-size: 12px;
   color: #909399;
   line-height: 17px;
+  &.tip {
+    margin-left: 0;
+  }
 }
 </style>

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

@@ -22,7 +22,7 @@
     </div>
     <div class="content mt20">
       <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">
+        <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" :render-header="onRender">
           <template slot-scope="scope">
             <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
             <span v-else>{{ scope.row[v.prop] || '--' }}</span>
@@ -63,9 +63,12 @@
 <script>
 import requestApi from '@/api/operation';
 import utils from '@/filters/index';
+import tip from '@/components/tip/index.vue';
 const { getTemplateDetailList, sendExamine, getAllChannel } = requestApi;
 const { getTime, getSeconds } = utils;
 export default {
+  // eslint-disable-next-line
+  components: { tip },
   props: {
     tableChannelType: Number || String
   },
@@ -163,7 +166,7 @@ export default {
           }
         },
         {
-          label: '商户后台状态',
+          label: { name: '商户后台状态', tip: '指GIC商户后台状态看到的模板审核结果 (1) 多通道商户：任一通道审核通过展示已通过 (2) 指定通道商户：指定通道审核通过展示已通过' },
           prop: 'auditStatus',
           formatter(row) {
             if (!row.auditStatus && row.auditStatus != 0) return '--';
@@ -171,7 +174,7 @@ export default {
           }
         },
         {
-          label: '通道审核状态',
+          label: { name: '通道审核状态', tip: '指短信模板在对应短信通道下的审核结果，可通过列表筛选，查看不同通道的审核结果。' },
           prop: 'auditResult',
           minWidth: 190,
           formatter: (row) => {
@@ -242,11 +245,18 @@ export default {
     showAllChannel(row) {
       this.dialogData.visible = true;
       this.dialogData.list = row.channelTemplate;
+    },
+    // 渲染表头icon
+    onRender(h, { column }) {
+      let isShowTip = column.label.name == '商户后台状态' || column.label.name == '通道审核状态';
+      return h('span', [
+        h('span', column.label.name || column.label),
+        h(isShowTip && tip, {
+          props: { text: column.label.tip }
+        })
+      ]);
     }
   },
-  computed: {
-    // do something
-  },
   watch: {
     // do something
     tableChannelType(val) {