update: 11月迭代内容

src/api/operation.js

 import getFetch from './getFetch.js';
 
-let api1 = {
+let marketingApi = {
   /** 获取全部渠道 */
-  getAllChannel: {
-    url: '/sms/all-channel-list',
-    method: 'get'
-  }
+  getAllChannel: '/sms/all-channel-list',
+  // 获取模板管理列表
+  getTemplateList: {
+    method: 'post',
+    url: '/sms/page-sms-setting'
+  },
+  // 获取模板管理列表详情表格
+  getTemplateDetailList: {
+    method: 'post',
+    url: '/sms/page-template',
+  },
+  // 提审模板
+  sendExamine: {
+    method: 'post',
+    url: '/sms/audit-template',
+  },
+  // 获取通道详情
+  getSmsSetting: {
+    method: 'post',
+    url: '/sms/sms-setting-detail',
+    // useFormData: true
+  },
+  // 修改通道
+  updateSms: {
+    method: 'post',
+    url: '/sms/update-sms-setting',
+    // useFormData: true
+  },
+  // 生成appid
+  getAppid: '/sms/default-appid',
 };
 
-let api2 = {
+let authApi = {
   /**            登录信息              */
-  getUserInfo: '/gic-authcenter/loginuser'
+  getUserInfo: '/loginuser'
 };
 
-api1 = getFetch(api1, '/marketing-operation');
-api2 = getFetch(api2, '');
+marketingApi = getFetch(marketingApi, '/marketing-operation');
+authApi = getFetch(authApi, '/gic-authcenter');
 
-export default { ...api1, ...api2 };
+export default { ...marketingApi, ...authApi };

src/components/aside-menu.vue

@@ -4,7 +4,7 @@
       <template v-for="item in tabData">
         <li
           v-if="item.isShow == 1"
-          :class="['tab-left-list-cell p-l-14', {'active-tab': item.uri === activeTab}]"
+          :class="['tab-left-list-cell p-l-14', {'active-tab': (item.uri === activeTab) && !item.nodeChildren}]"
           :key="item.id"
           @click="selectTab(item)">
           <!-- <i class="my-icon" :class="['iconfont', item.icon, !!item.onlyIconActive ? 'iconActive' : '']"></i> -->
@@ -58,8 +58,9 @@ export default {
   methods: {
     selectTab(item) {
       console.log(item);
-      if (this.activeTab === item.uri) return;
+      if (this.activeTab === item.uri && !item.nodeChildren) return;
       if (Array.isArray(item.nodeChildren) && item.nodeChildren.length > 0)  {
+        console.log('11');
         return item.collapsFlag = !item.collapsFlag;
       } else {
         this.$router.push({ path: item.uri });
@@ -87,7 +88,7 @@ export default {
     menu: {
       immediate: true,
       handler(menu) {
-        let menuTree = menu.filter(item => item.code === 'goods_operation')[0] || {};
+        let menuTree = menu.filter(item => item.code === 'marketing_operation')[0] || {};
         console.log(menu, menuTree);
         this.tabData = (menuTree.nodeChildren || []).map(item => {
           this.$set(item, 'collapsFlag', false);

src/router/routes.js

@@ -9,13 +9,19 @@ export const routes = [
     component: Layout,
     children: [
       {
-        path: '/messageTemplate',
+        path: 'messageTemplate',
         name: '短信模板管理',
-        component: _import('message', 'index')
+        component: _import('message', 'template')
       },
       {
-        path: '/messagePass',
+        path: 'messageTemplateDetail',
+        name: '短信模板管理',
+        component: _import('message', 'template-detail')
+      },
+      {
+        path: 'messagePass',
         name: '短信通道管理',
+        component: _import('message', 'pass-manage')
       },
     ]
   }

src/styles/component.less

@@ -8,7 +8,7 @@
 }
 
 .right_content {
-  padding: 10px;
+  padding: 20px;
 }
 .mr10 {
   margin-right: 10px;

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

+<template>
+      <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" />
+          </el-form-item>
+          <el-form-item label="短信签名：" prop="smsSignText">
+            <el-input v-model="form.smsSignText" class="w180" />
+          </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">{{ v.channelName }}</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="短信模板数量：" prop="maxTemplateCount">
+            <el-input-number v-model="form.maxTemplateCount" controls-position="right" :min="form.limitTemplateCount" class="w90" />
+            <span class="tips">该商户在商户后台看到的短信模板数量</span>
+          </el-form-item>
+          <el-form-item label="短信发送优先级：" prop="sendSmsType">
+            <el-radio-group v-model="form.sendSmsType">
+              <p class="send_sms">
+                <el-radio :label="0">多通道</el-radio>
+                <span class="channels">{{ channelSort }}</span>
+              </p>
+              <el-radio :label="1">
+                指定通道
+                <el-radio-group v-model="form.appointChannel" class="ml20" v-if="form.sendSmsType" style="vertical-align: top">
+                  <el-radio v-for="item in channelList" :key="item.channelId" :label="item.channelId">{{ item.channelName }}</el-radio>
+                </el-radio-group>
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="短信AppID：" prop="smsAppid">
+            {{ form.smsAppid }}
+          </el-form-item>
+          <el-form-item label="">
+            <el-button type="primary" style="margin-top: 30px" @click="submit">保存</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+</template>
+
+<script>
+import requestApi from '@/api/operation';
+const { getAllChannel, getSmsSetting,  updateSms, getAppid } = requestApi;
+export default {
+  data() {
+    const sendSmsTypeValidate = (_, val, cb) => {
+      if(val === 1 && !this.form.appointChannel) {
+        cb(new Error('请选择指定通道'));
+      }
+      cb();
+    };
+    return {
+      channelList: [],
+      form: {
+        enterpriseSmsSettingId: '',
+        enterpriseId: '',
+        smsSignId: '',
+        smsSignText: '',
+        channelSignList: [],
+        maxTemplateCount: 0,
+        limitTemplateCount: 0,  // 输入限制模板数量
+        sendSmsType: 0,
+        appointChannel: null, // 指定通道时的类型
+        smsAppid: '',
+      },
+      rules: {
+        smsSignId: { required: true, message: '请输入签名Id', trigger: 'blur' },
+        smsSignText: { required: true, message: '请输入短信签名', trigger: 'blur' },
+        channelSignList: { required: true, message: '请选择签名应用通道', trigger: 'blur' },
+        maxTemplateCount: { required: true, message: '请输短信模板数量', trigger: 'blur' },
+        sendSmsType: { validator: sendSmsTypeValidate, trigger: 'change' }
+      }
+    };
+  },
+  created() {
+    this.getChannelList();
+    this.getDetail();
+  },
+  methods: {
+    async getDetail() {
+      let result = await getSmsSetting({ enterpriseId: this.$route.query.id });
+      result = result.result || {};
+      for(let key in result) {
+        if(this.form.hasOwnProperty(key)) {
+          this.form[key] = result[key] || this.form[key];
+          if(key == 'channelSignList' && this.form[key]) this.form[key] = this.form[key].split(',').map(el => +el);
+          if(key == 'maxTemplateCount') this.form['limitTemplateCount'] = this.form[key] || 0;
+          if(key == 'sendSmsType' && this.form[key] != 0) {
+            this.form['appointChannel'] = this.form[key];
+            this.form[key] = 1;
+          };
+          if(key == 'smsAppid' && !this.form[key]) {
+            const { result } = await getAppid();
+            this.form[key] = result;
+          };
+        }
+      }
+    },
+    async getChannelList() {
+      const { result } = await getAllChannel();
+      this.channelList = result || [];
+    },
+    // 表单提交
+    submit() {
+      this.$refs.form.validate(async val => {
+        if(val) {
+          const para = Object.assign({}, this.form);
+          if(para.sendSmsType == 1) para.sendSmsType = para.appointChannel;
+          para.channelSignList = para.channelSignList.toString();
+          delete para.appointChannel;
+          delete para.limitTemplateCount;
+          await updateSms(para);
+          this.$message.success('保存成功');
+        }
+      });
+    }
+  },
+  computed: {
+    channelSort() {
+      let res = '';
+      const arr = [ ...this.channelList ];
+      arr
+        .sort((a, b) => b - a)
+        .forEach((el, index, arr) => {
+          res += (index > 0 ? ' > ' : '') + el.channelName;
+        });
+      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>
+
+<style scoped lang="scss">
+.w180 {
+  width: 180px;
+}
+.w90 {
+  width: 90px;
+}
+  .content {
+    margin-top: 26px;
+    .send_sms {
+      height: 32px;
+      margin-bottom: 28px;
+      padding-top: 5px;
+      box-sizing: border-box;
+    }
+    .channels {
+      font-size: 14px;
+      color: #606266;
+      line-height: 20px;
+    }
+  }
+.tips {
+  margin-left: 14px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 17px;
+}
+</style>

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

+<template>
+  <div class="detail-table">
+    <div class="top">
+      <div class="left">
+        <el-input v-model="search.searchKey" placeholder="请输入GIC短信模板ID/模板名称/模板内容" prefix-icon="el-icon-search" style="width: 260px" />
+        <el-select v-model="search.smsType" 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" 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" 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" placeholder="商户后台状态" class="w148 ml10">
+          <el-option v-for="item in channelStatusList" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </div>
+      <div class="right">
+        <el-button type="primary" @click="submitExamine">全量提交审核</el-button>
+      </div>
+    </div>
+    <div class="content mt20">
+      <el-table :data="tableData.data" element-loading-text="拼命加载中">
+        <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>
+          <template slot-scope="scope">
+            <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
+            <span v-else>{{ scope.row[v.prop] || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <!-- <template slot-scope="{ row }">
+                <el-button type="text">操作</el-button>
+              </template> -->
+        </el-table-column>
+      </el-table>
+      <dm-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
+    </div>
+  </div>
+</template>
+
+<script>
+import requestApi from '@/api/operation';
+import utils from '@/filters/index';
+const { getTemplateDetailList, sendExamine, getAllChannel } = requestApi;
+const { getTime, getSeconds } = utils;
+export default {
+  components: {},
+  props: {
+    tableChannelType: Number || String
+  },
+  data() {
+    return {
+      smsList: [
+        { label: '普通短信', value: 0 },
+        { label: '营销短信', value: 1 }
+      ],
+      auditStatusList: [
+        { label: '已通过', value: 0 },
+        { label: '待审核', value: 1 },
+        { label: '已拒绝', value: 2 }
+      ],
+      channelList: [],
+      channelStatusList: [
+        { label: '已通过', value: 1 },
+        { label: '未通过', value: 2 },
+        { label: '审核中', value: 3 }
+      ],
+      search: {
+        searchKey: '',
+        smsType: null, // 0-普通短信 1-营销短信
+        auditStatus: null, // 状态：0：已通过；1：待审核；2：已拒绝
+        channelType: '',  // 前端自定义筛选
+        channelStatus: null // 前端自定义筛选
+      },
+      tableData: {
+        data: [],
+        currentPage: 1,
+        pageSizeList: [ 20, 40, 60, 80 ],
+        pageSize: 20,
+        header: [],
+        total: 0
+      }
+    };
+  },
+  created() {
+    // create hook
+    this.getTableHeader();
+    this.getTableData();
+    this.getChannelList();
+  },
+  mounted() {
+    // mounted hook
+  },
+  methods: {
+    // table-methods
+    async getTableData() {
+      const { currentPage, pageSize } = this.tableData;
+      const { searchKey, smsType, auditStatus } = this.search;
+      const para = {
+        enterpriseId: this.$route.query.id,
+        pageNum: currentPage,
+        pageSize,
+        searchKey,
+        smsType,
+        auditStatus
+      };
+      const result = await getTemplateDetailList(para);
+      console.log(result);
+    },
+    getTableHeader() {
+      this.tableData.header = [
+        { label: 'GIC短信模板ID', prop: 'gicSmsTemplateId' },
+        { label: '模板名称', prop: 'smsTitle' },
+        { label: '模板内容', prop: 'smsContent' },
+        {
+          label: '模板类型',
+          prop: 'smsType',
+          formatter(row) {
+            return row.smsType ? '营销短信' : '普通短信';
+          }
+        },
+        {
+          label: '创建时间',
+          prop: 'createTime',
+          formatter(row) {
+            return `${getTime(row.createTime)}<br />${getSeconds(row.createTime)}`;
+          }
+        },
+        {
+          label: '商户后台状态',
+          prop: 'auditStatus',
+          formatter(row) {
+            return row.auditResult == 0 ? '已通过' : row.auditStatus == 1 ? '待审核' : '已拒绝';
+          }
+        },
+        { label: '通道审核状态', prop: 'auditResult' }
+      ];
+    },
+    handleSizeChange(val) {
+      this.tableData.pageSize = val;
+      this.tableData.currentPage = 1;
+      this.getTableData();
+    },
+    handleCurrentChange(val) {
+      this.tableData.currentPage = val;
+      this.getTableData();
+    },
+    // 提交审核
+    async submitExamine(row) {
+      await sendExamine({ enterpriseId: this.$route.query.id });
+      this.$message.success('提交成功');
+    },
+    async getChannelList() {
+      const { result } = await getAllChannel();
+      this.channelList = result || [];
+      this.initChannelType(this.tableChannelType);
+    },
+    // 设置通道类型的初始化
+    initChannelType(val) {
+      if(val == 0) {
+        this.search.channelType = this.channelList.find(el => el.channelName == '腾讯云').channelId;
+      } else {
+        this.search.channelType = val;
+      }
+    }
+  },
+  computed: {
+    // do something
+  },
+  watch: {
+    // do something
+    tableChannelType(val) {
+      this.channelList.length && this.initChannelType(val);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.w148 {
+  width: 148px;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/views/message/pass-manage.vue

+<template>
+  <div class="container right_content">
+    <div class="mt20">
+      <el-table :data="tableData.data" element-loading-text="拼命加载中">
+        <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>
+            <span v-else>{{ scope.row[v.prop] || '--' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import requestApi from '@/api/operation';
+const { getAllChannel } = requestApi;
+export default {
+  data() {
+    return {
+      tableData: {
+        data: [],
+        tableHeader: []
+      }
+    };
+  },
+  created() {
+    this.getTableHeader();
+    this.getTableData();
+  },
+  methods: {
+    // table methods
+    getTableHeader() {
+      this.tableData.tableHeader = [
+        { label: '通道名称', prop: 'channelName' },
+        {
+          label: '发送优先级',
+          prop: 'enterpriseName',
+          formatter(row) {
+            return `P${row.sendSort}`;
+          }
+        }
+      ];
+    },
+    async getTableData() {
+      const result = await getAllChannel();
+      this.tableData.data = result.result || [];
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/message/template-detail.vue

+<template>
+  <div class="container right_content">
+    <div class="top">
+      <div class="title">
+        <h2>基本信息</h2>
+      </div>
+      <detail-form @getTableChannelType="(val) => tableChannelType = val" />
+    </div>
+    <div class="bottom">
+      <div class="title mb20">
+        <h2>短信模板列表</h2>
+      </div>
+      <detail-table :table-channel-type="tableChannelType" />
+    </div>
+  </div>
+</template>
+
+<script>
+import detailForm from './component/detail-form.vue';
+import detailTable from './component/detail-table.vue';
+export default {
+  components: {
+    detailForm,
+    detailTable
+  },
+  data() {
+    return {
+      tableChannelType: null
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.top,
+.bottom {
+  &.bottom {
+    margin-top: 30px;
+  }
+  .title {
+    background: #f7f8fa;
+    h2 {
+      padding-left: 22px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+      height: 40px;
+      line-height: 40px;
+      position: relative;
+      &::before {
+        content: '';
+        width: 3px;
+        height: 14px;
+        background: #1890ff;
+        position: absolute;
+        left: 11px;
+        top: 13px;
+      }
+    }
+  }
+}
+</style>

src/views/message/index.vue → src/views/message/template.vue

 <template>
   <div class="container right_content">
     <div class="search">
-      <el-input v-model="searchText" prefix-icon="el-icon-search" placeholder="请输入品牌名称/公司名称" style="width: 234px" />
-      <el-select v-model="mode" placeholder="选择发送通道" class="ml10">
-        <el-option v-for="(item, index) in passList" :key="index" :value="item.value">{{ item.label }}</el-option>
+      <el-input v-model="search.searchText" @change="getTableData" prefix-icon="el-icon-search" placeholder="请输入品牌名称/公司名称" style="width: 234px" />
+      <el-select v-model="search.channelId" @change="getTableData" placeholder="选择发送通道" class="ml10">
+        <el-option v-for="item in channelList" :key="item.channelId" :value="item.channelId" :label="item.channelName">{{ item.channelName }}</el-option>
       </el-select>
     </div>
     <div class="mt20">
@@ -19,35 +19,22 @@
             <el-button type="text" @click="toDetail(row)">详情</el-button>
           </template>
         </el-table-column>
-    </el-table>
-    <dm-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
+      </el-table>
+      <el-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
     </div>
   </div>
 </template>
 
 <script>
 import requestApi from '@/api/operation';
-const { getAllChannel } = requestApi;
+const { getAllChannel, getTemplateList } = requestApi;
 export default {
   data() {
     return {
-      passList: [
-        {
-          label: '多通道',
-          value: 1
-        },
-        {
-          label: '腾讯云',
-          value: 2
-        },
-        {
-          label: '大汉三通',
-          value: 3
-        }
-      ],
+      channelList: [],
       search: {
         searchText: '',
-        mode: 0
+        channelId: ''
       },
       tableData: {
         data: [],
@@ -62,29 +49,53 @@ export default {
   created() {
     this.getTableHeader();
     this.getChannelList();
+    this.getTableData();
   },
   methods: {
     // table methods
     getTableHeader() {
       this.tableData.tableHeader = [
-        { label: '手机号', prop: 'phoneNumber' },
-        { label: '黑名单原因', prop: 'reason' },
-        { label: '操作人', prop: 'creatorName' }
+        { label: '品牌名称', prop: 'brandName' },
+        { label: '公司名称', prop: 'enterpriseName' },
+        { label: '短信签名', prop: 'smsSignText' },
+        {
+          label: '发送通道',
+          prop: 'sendSmsType',
+          formatter(row) {
+            let text = '';
+            switch (row.sendSmsType) {
+              case 0:
+                text = '多通道';
+                break;
+              case 1:
+                text = '腾讯云';
+                break;
+              case 3:
+                text = '大汉三通';
+                break;
+              default:
+                text = '--';
+                break;
+            }
+            return text;
+          }
+        },
+        { label: '短信模板总数', prop: 'maxTemplateCount' },
+        { label: '已用短信模板数', prop: 'useTemplateCount' }
       ];
     },
     async getTableData() {
-      // const { currentPage, pageSize } = this.tableData;
-      // const { phone, time } = this.search;
-      // const para = {
-      //   currentPage,
-      //   pageSize,
-      //   phoneNumber: phone,
-      //   startTime: new Date(time[0]).getTime() || '',
-      //   endTime: new Date(time[1]).getTime() || ''
-      // };
-      // const result = await getBlackList(para);
-      // this.tableData.data = result.result.result || [];
-      // this.tableData.total = result.result.totalCount || 0;
+      const { currentPage, pageSize } = this.tableData;
+      const { searchText, channelId } = this.search;
+      const para = {
+        pageNum: currentPage,
+        pageSize,
+        channel: channelId,
+        search: searchText
+      };
+      const result = await getTemplateList(para);
+      this.tableData.data = result.result.result || [];
+      this.tableData.total = result.result.totalCount || 0;
     },
     handleSizeChange(val) {
       this.tableData.pageSize = val;
@@ -96,12 +107,12 @@ export default {
       this.getTableData();
     },
     toDetail(row) {
-      console.log(row);
+      this.$router.push(`/messageTemplateDetail?id=${row.enterpriseId}`);
     },
     // others
     async getChannelList() {
-      const res = await getAllChannel();
-      console.log(res);
+      const { result } = await getAllChannel();
+      this.channelList = result.concat({ channelId: 0, channelName: '多通道' }) || [];
     }
   }
 };