Merge branch 'feature/3月迭代' into dev

index.html

@@ -9,8 +9,8 @@
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css">
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css">
     <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2996579_93aeeozj35q.css"> -->
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_b36vgmw8y2d.css"> <!--GIC3.0营销-->
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_b36vgmw8y2d.js"> <!--GIC3.0营销-->
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_vfjtu9hqyrc.css"> <!--GIC3.0营销-->
+    <script src="//at.alicdn.com/t/font_3229694_vfjtu9hqyrc.js"></script> <!--GIC3.0营销-->
     <!-- <link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css"> -->
     <!-- element 皮肤 -->
     <!-- <link rel="stylesheet" type="text/css" href="http://web-1251519181.file.myqcloud.com/lib/elementUI/theme.1.0.1/index.css"> -->

src/router/modules/ai.js

@@ -12,10 +12,28 @@ export default {
       meta: {}
     },
     {
-      path: 'form',
-      name: '活动详情',
+      path: 'add/:scene',
+      name: '新增活动详情',
       component: () => import('../../views/ai/form.vue'),
-      meta: {}
+      meta: {
+        type: 'add'
+      }
+    },
+    {
+      path: 'edit/:id',
+      name: '编辑活动详情',
+      component: () => import('../../views/ai/form.vue'),
+      meta: {
+        type: 'edit'
+      }
+    },
+    {
+      path: 'info/:id',
+      name: '活动详情',
+      component: () => import('../../views/ai/info.vue'),
+      meta: {
+        type: 'info'
+      }
     }
   ]
 };

src/service/api/aiApi.js

@@ -23,3 +23,8 @@ export const stopActivityPlan = params => requests(PREFIX + 'stop-activity-plan'
 
 //重新开启活动计划
 export const startActivityPlan = params => requests(PREFIX + 'start-activity-plan', params, true, false, 'get');
+
+//查看计划详情
+export const getActivityDetail = params => requests(PREFIX + 'get-activity-detail', params, true, false, 'get');
+export const tempPageStatistics = params => requests('/api-marketing/template/page-statistics', params, true, false, 'post');
+export const tempDetail = params => requests('/api-marketing/template/query', params, true, false, 'get');

src/service/api/index.js

@@ -51,10 +51,10 @@ function popRequest(config) {
  */
 function handlerErr(code, message = '请求错误', alertError = true) {
   switch (code) {
-    case 404:
-      message = '404,错误请求';
-      router.push('/404');
-      break;
+    // case 404:
+    //   message = '404,错误请求';
+    //   router.push('/404');
+    //   break;
     case 401:
       if (!_isDev) {
         window.location.href = config.api + 'gic-web/';
@@ -95,7 +95,6 @@ const pendingRequest = new Map();
  */
 const requests = (url, data = {}, contentTypeIsJSON = false, isSilence = false, method = 'POST', alertError = true) => {
   let _opts = { method, url };
-  const _query = {};
   let _timer = null;
   // 如果用户没有开启权限 从参数中删除showSelfFlag
   if (!store.state.marketing.openFlag) {
@@ -136,7 +135,6 @@ const requests = (url, data = {}, contentTypeIsJSON = false, isSilence = false,
         popRequest(_random);
         if (res.data.errorCode !== 0 && res.data.code != 0) {
           reject(res);
-          // handlerErr(res.data.errorCode, res.data.message, alertError);
           if (res.data.message.indexOf('抱歉') >= 0) {
             Vue.prototype.$alert(res.data.message, '提示');
           } else {

src/views/ai/activeTime.vue

+<template>
+  <el-form :model="form" ref="form" label-width="100px" :rules="rules">
+    <el-form-item label="外呼时段" required>
+      <el-radio v-model="form.callFlag" :label="0">默认时段</el-radio>
+      <el-radio v-model="form.callFlag" :label="1">自定义时段</el-radio>
+      <div v-show="form.callFlag == 0" style="line-height: 20px;">
+        每天 09:00-20:00
+      </div>
+      <defineTime v-show="form.callFlag == 1" ref="defineTime" :data="form.callTime" />
+    </el-form-item>
+    <el-form-item label="活动有效期" required>
+      <el-date-picker value-format="timestamp" format="MM-dd" v-model="form.activeTime" @change="handleDateChange" type="daterange" placeholder="请选择生日范围" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import defineTime from './defineTime.vue';
+import { formatDateTimeByType } from '@/utils/index';
+
+export default {
+  data() {
+    return {
+      formatDateTimeByType,
+      form: {
+        activeTime: '', //有效时间
+        callFlag: 0, //外呼时段 0 默认 1 自定义
+        callTime: [{}] // 自定义时段
+      },
+      rules: {}
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    data(val) {
+      if (val) {
+        this.form = JSON.parse(JSON.stringify(val));
+      }
+    }
+  },
+  computed: {
+    activeTime() {
+      let str = '';
+      return str;
+    }
+  },
+  components: {
+    defineTime
+  },
+  methods: {
+    submit() {
+      return new Promise(async resolve => {
+        const res = await this.$refs.defineTime.submit();
+        let arr = [];
+        if (!res) return;
+        res.timeRangeList.forEach(item => {
+          if (Object.keys(item).length) {
+            arr.push(`${item.startTime}-${item.endTime}`);
+          }
+        });
+        this.$refs.form.validate(val => {
+          if (val) {
+            const { callFlag, callTime, activeTime } = this.form;
+            const obj = {
+              startDate: activeTime[0],
+              endDate: activeTime[1],
+              callFlag,
+              callTime
+            };
+            if (arr.length) {
+              obj.callTime = arr;
+            }
+            resolve(obj);
+          } else {
+            resolve(false);
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

src/views/ai/birthSense.vue → src/views/ai/birthActiveTime.vue

 <template>
   <el-form :model="form" ref="form" label-width="100px" :rules="rules">
     <el-form-item label="外呼时间" required>
-      <el-radio v-model="form.birth_type" :label="1" @change="onChangeEffectType">生日当天</el-radio>
-      <el-radio v-model="form.birth_type" :label="2" @change="onChangeEffectType">生日当月</el-radio>
-      <el-radio v-model="form.birth_type" :label="3" @change="onChangeEffectType"
+      <el-radio v-model="form.birth_type" :label="1">生日当天</el-radio>
+      <el-radio v-model="form.birth_type" :label="2">生日当月</el-radio>
+      <el-radio v-model="form.birth_type" :label="3"
         >生日前
         <el-form-item prop="birth_days" style="display: inline-block;">
           <el-input-number class="w100" style="margin:0 5px;" v-model="form.birth_days" controls-position="right" :max="30" :min="1" size="small" />
@@ -18,12 +18,12 @@
       <el-date-picker type="monthrange" value-format="timestamp" format="MM月" v-model="form.birthDate2" @change="handleDateMonthChange" :picker-options="pickerOptionsMonth" placeholder="请选择生日范围" range-separator="~" start-placeholder="开始月份" end-placeholder="结束月份"> </el-date-picker>
     </el-form-item>
     <el-form-item label="外呼时段" required>
-      <el-radio v-model="form.call_flag" :label="0" @change="onChangeEffectType">默认时段</el-radio>
-      <el-radio v-model="form.call_flag" :label="1" @change="onChangeEffectType">自定义时段</el-radio>
-      <div v-show="form.call_flag == 0" style="line-height: 20px;">
+      <el-radio v-model="form.callFlag" :label="0">默认时段</el-radio>
+      <el-radio v-model="form.callFlag" :label="1">自定义时段</el-radio>
+      <div v-show="form.callFlag == 0" style="line-height: 20px;">
         每天 09:00-20:00
       </div>
-      <defineTime v-show="form.call_flag == 1" ref="defineTime" />
+      <defineTime v-show="form.callFlag == 1" ref="defineTime" :data="form.callTime" />
     </el-form-item>
     <el-form-item label="活动有效期" required>
       <span v-if="!activeTime" class="tips" style="font-size: 14px;margin:0">设置【生日范围】和【外呼时间】后自动生成</span>
@@ -62,7 +62,8 @@ export default {
         birthDate1: '', //生日范围 当天
         birthDate2: '', //生日范围 当月
         birth_type: 1, //外呼时间 1当天 2当月 3生日前
-        call_flag: 0 //外呼时段 0 默认 1 自定义
+        callFlag: 0, //外呼时段 0 默认 1 自定义
+        callTime: [{}] // 自定义时段
       },
       rules: {
         birthDate1: { validator: birthDateValidtor },
@@ -107,6 +108,19 @@ export default {
       }
     };
   },
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    data(val) {
+      if (val) {
+        this.form = JSON.parse(JSON.stringify(val));
+      }
+    }
+  },
   computed: {
     activeTime() {
       let str = '';
@@ -138,11 +152,11 @@ export default {
         });
         this.$refs.form.validate(val => {
           if (val) {
-            const { birth_type, call_flag, birthDate1, birthDate2, callTime, birth_days } = this.form;
+            const { birth_type, callFlag, birthDate1, birthDate2, callTime, birth_days } = this.form;
             const obj = {
               startDate: birth_type == 2 ? birthDate2[0] : birthDate1[0],
               endDate: birth_type == 2 ? birthDate2[1] : birthDate1[1],
-              call_flag,
+              callFlag,
               birth_type,
               callTime,
               birth_days

src/views/ai/defineTime.vue

@@ -54,6 +54,24 @@ export default {
       }
     };
   },
+  props: {
+    data: {
+      type: Array,
+      default: () => [{}]
+    }
+  },
+  watch: {
+    data(val) {
+      if (val.length) {
+        let data = typeof val == 'object' ? val : JSON.parse(val);
+        let arr = [];
+        data.forEach(item => {
+          arr.push({ startTime: item.split('-')[0], endTime: item.split('-')[1] });
+        });
+        this.form.timeRangeList = arr;
+      }
+    }
+  },
   methods: {
     // 删除兑换时段
     delTimeRange(index) {

src/views/ai/holidayActiveTime.vue

+<template>
+  <el-form :model="form" ref="form" label-width="100px" :rules="rules">
+    <el-form-item label="外呼时间" prop="holiday_day" required>
+      节日前
+      <el-input-number class="w100" style="margin:0 5px;" v-model="form.holiday_day" controls-position="right" :max="30" :min="1" size="small" />
+      天内外呼完成
+      <span class="tips">由于外呼线路有限，为保证外呼触达率，建议外呼时间周期不小于5</span>
+    </el-form-item>
+    <el-form-item label="外呼时段" required>
+      <el-radio v-model="form.callFlag" :label="0">默认时段</el-radio>
+      <el-radio v-model="form.callFlag" :label="1">自定义时段</el-radio>
+      <div v-show="form.callFlag == 0" style="line-height: 20px;">
+        每天 09:00-20:00
+      </div>
+      <defineTime v-show="form.callFlag == 1" ref="defineTime" :data="form.callTime" />
+    </el-form-item>
+    <el-form-item label="活动有效期" required>
+      <span v-if="!activeTime" class="tips" style="font-size: 14px;margin:0">设置【节日日期】和【外呼时间】后自动生成</span>
+      <span v-else>{{ activeTime }}</span>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import defineTime from './defineTime.vue';
+import { formatDateTimeByType } from '@/utils/index';
+
+export default {
+  data() {
+    return {
+      formatDateTimeByType,
+      form: {
+        holiday_day: '', // 节日时间
+        callFlag: 0, //外呼时段 0 默认 1 自定义
+        callTime: [{}] // 自定义时段
+      },
+      rules: {}
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    data(val) {
+      if (val) {
+        this.form = JSON.parse(JSON.stringify(val));
+      }
+    }
+  },
+  computed: {
+    activeTime() {
+      let str = '';
+      return str;
+    }
+  },
+  components: {
+    defineTime
+  },
+  methods: {
+    submit() {
+      return new Promise(async resolve => {
+        const res = await this.$refs.defineTime.submit();
+        let arr = [];
+        if (!res) return;
+        res.timeRangeList.forEach(item => {
+          if (Object.keys(item).length) {
+            arr.push(`${item.startTime}-${item.endTime}`);
+          }
+        });
+        this.$refs.form.validate(val => {
+          if (val) {
+            const { callFlag, callTime } = this.form;
+            const obj = {
+              callFlag,
+              callTime
+            };
+            if (arr.length) {
+              obj.callTime = arr;
+            }
+            resolve(obj);
+          } else {
+            resolve(false);
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

src/views/ai/info.vue

+<template>
+  <div class="detail">
+    <dm-sub-title line>基本信息</dm-sub-title>
+    <div class="section">
+      <el-descriptions>
+        <el-descriptions-item label="活动场景"> {{ form.scene | sceneFilter }}</el-descriptions-item>
+        <el-descriptions-item label="活动名称">{{ form.activityName }}</el-descriptions-item>
+        <el-descriptions-item label="话术">{{ form.aiTemplateId }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <dm-sub-title line>活动时间</dm-sub-title>
+    <div class="section">
+      <el-descriptions>
+        <el-descriptions-item label="外呼时间"> {{ activeTimeData.birth_type }}</el-descriptions-item>
+        <el-descriptions-item label="外呼时段">{{ activeTimeData.callTime }}</el-descriptions-item>
+        <el-descriptions-item label="生日有效期">{{ activeTimeData.birthDate1 }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <dm-sub-title line>人群规则</dm-sub-title>
+    <div class="section">
+      <el-descriptions-item label="参与人群"> {{ form.filterJson }}</el-descriptions-item>
+      <el-descriptions>
+        <el-descriptions-item label="预计覆盖人数">{{ form.planMemberCount }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <dm-sub-title line>外呼规则配置</dm-sub-title>
+    <div class="section">
+      <!--根据客户意向打标标签-->
+      <div class="card">
+        <div class="title">根据客户意向打标标签：开启</div>
+        <div class="content">
+          <table>
+            <thead>
+              <tr>
+                <th class="tableHead">意向等级</th>
+                <th class="tableHead">标签名称</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in tagMatchList" :key="index">
+                <td class="cell" style="width:50%;">
+                  {{ item.options }}
+                </td>
+                <td class="cell" style="width:50%;">
+                  <el-tag type="mini">{{ item.name }}</el-tag>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <!--根据客户意向发送挂机短信：-->
+      <div class="card">
+        <div class="title">根据客户意向发送挂机短信：开启</div>
+        <div class="content">
+          <table>
+            <thead>
+              <tr>
+                <th class="tableHead">意向等级</th>
+                <th class="tableHead">短信模板</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in smsList" :key="index">
+                <td class="cell" style="width:50%;">
+                  {{ item.options }}
+                </td>
+                <td class="cell" style="width:50%;">
+                  <el-tag type="mini">{{ item.title }}</el-tag> <el-button type="text">查看短信内容</el-button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <!--根据客户意向自动重拨：-->
+      <div class="card">
+        <div class="title">根据客户意向自动重拨：开启</div>
+        <div class="content">
+          <table>
+            <thead>
+              <tr>
+                <th class="tableHead">通话状态</th>
+                <th class="tableHead">重拨次数</th>
+                <th class="tableHead">重拨间隔</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in recallList" :key="index">
+                <td class="cell">
+                  {{ item.options }}
+                </td>
+                <td class="cell">
+                  {{ item.times }}
+                </td>
+                <td class="cell">
+                  {{ item.interval }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <dm-sub-title line>活动分析设置</dm-sub-title>
+    <div class="section">
+      <el-descriptions>
+        <el-descriptions-item label="活动分析"> {{ form.analyseFlag }}</el-descriptions-item>
+        <el-descriptions-item label="分析天数">{{ form.analyseDays }}</el-descriptions-item>
+        <el-descriptions-item label="活动目标">{{ form.analyseAmount }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </div>
+</template>
+
+<script>
+import filterAvater from '@/mixins/filterAvater.js';
+import { getActivityDetail } from '@/service/api/aiApi.js';
+export default {
+  mixins: [filterAvater],
+  data() {
+    return {
+      form: {
+        activityName: '', //活动名称
+        activityId: '', //活动id
+        scene: '', //活动场景 「1 客户生日」、「2 节日活动邀约」、「3 加企微好友」、「4 客户复购」、「5 其它场景」
+        aiTemplateId: '', //话术模板id
+        memberType: 0, // 会员类型（0：会员筛选，1：会员分组）
+        filterJson: '{"list":[{"type":"or","list":[{"type":"data","data":{"key":"city","compute":"in","value":"330100"}}]},{"type":"or","list":[{"type":"data","data":{"key":"mainStoreId","compute":"in","value":"e8fdc210a59411ecb9cb9f7ed8d63716","dealKey":"storeWidget"}}]}],"type":"and"}',
+        analyseFlag: 1, //活动分析
+        labelFlag: 0, //是否根据客户意向打标签
+        smsFlag: 0, //是否根据客户意向发送挂机短信
+        recallFlag: 0, //是否根据未接通状态设置重拨
+        planMemberCount: '23,098', //覆盖人数
+        analyseDays: '', //分析天数
+        analyseAmount: '' //销售额
+      },
+      activeTimeData: {
+        // 活动时间的回显
+        birth_days: ' ', // 生日前xx天
+        birthDate1: '', //生日范围 当天
+        birthDate2: '', //生日范围 当月
+        birth_type: 1, //外呼时间 1当天 2当月 3生日前
+        callFlag: 0, //外呼时段 0 默认 1 自定义
+        callTime: [{}] // 自定义时段
+      },
+      tagMatchList: [
+        // 打标签列表
+        {
+          options: 'A级(有明确意向)、B级(可能有意向)',
+          id: 'fd6b44967aa647bcadfad10706244c56',
+          name: '3.8活动邀约标签-高意向'
+        }
+      ],
+      smsList: [
+        {
+          options: 'A级(有明确意向)、B级(可能有意向)',
+          template: 'ff8080817f012035017f012193240000',
+          title: '虎年促销通知'
+        }
+      ],
+      recallList: [
+        // 重播列表
+        {
+          options: '关机、占线',
+          times: 2,
+          interval: 5
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.getActivityDetail(this.$route.params.id);
+  },
+  methods: {
+    async getActivityDetail(activityId) {
+      this.loading = true;
+      const { result } = await getActivityDetail({ activityId });
+      console.log(result);
+      if (result) {
+        const { activityId, activityName, activityPlanList, analyseAmount, analyseDays, analyseFlag, endDate, scene } = result;
+        const { activityEventList, beginDate, filterJson, memberType, planId, planMemberCount, planName, sceneJson } = activityPlanList[0];
+        const { aiEventId, aiTemplateId, callFlag, callTime, eventId, labelFlag, recallFlag, smsFlag } = activityEventList[0];
+        const { birth_type, birth_days } = JSON.parse(sceneJson);
+        this.form = {
+          activityName, //活动名称
+          activityId, //活动id
+          scene, //活动场景 「1 客户生日」、「2 节日活动邀约」、「3 加企微好友」、「4 客户复购」、「5 其它场景」
+          aiTemplateId, //话术模板id
+          memberType, // 会员类型（0：会员筛选，1：会员分组）
+          filterJson,
+          analyseFlag, //活动分析
+          labelFlag, //是否根据客户意向打标签
+          smsFlag, //是否根据客户意向发送挂机短信
+          recallFlag, //是否根据未接通状态设置重拨
+          planMemberCount, //覆盖人数
+          analyseDays, //分析天数
+          analyseAmount, //销售额
+          planId,
+          planName,
+          aiEventId,
+          eventId
+        };
+        this.activeTimeData = {
+          birth_days, // 生日前xx天
+          birthDate1: [beginDate, endDate], //生日范围 当天
+          birthDate2: [beginDate, endDate], //生日范围 当月
+          birth_type, //外呼时间 1当天 2当月 3生日前
+          callFlag, //外呼时段 0 默认 1 自定义
+          callTime: callFlag == 1 ? callTime : [] // 自定义时段
+        };
+      }
+      this.loading = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  margin: 10px 20px;
+}
+.section {
+  padding: 20px 0 40px 0;
+}
+.card {
+  margin-top: 20px;
+  &:first-child {
+    margin-top: 0;
+  }
+  .content {
+    width: 100%;
+    height: 114px;
+    background: #f7f8fa;
+    border-radius: 4px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    table {
+      width: 100%;
+    }
+    .tableHead {
+      text-align: left;
+      font-weight: bold;
+      line-height: 20px;
+      color: #303133;
+      font-size: 14px;
+      height: 52px;
+      line-height: 52px;
+    }
+    .cell {
+      padding: 0 30px 12px 0;
+    }
+  }
+}
+</style>

src/views/ai/manage.vue

 <template>
-  <div>
-    话术管理
+  <div class="message">
+    <div class="search-bar">
+      <el-input v-model="search.nameAndId" @change="onSearch" style="width: 260px" type="text" placeholder="请输入话术名称/ID" prefix-icon="el-icon-search" clearable></el-input>
+      <el-select v-model="search.status" @change="onSearch" style="margin-left: 10px;width: 160px" placeholder="全部状态" clearable>
+        <el-option v-for="el in statusList" :key="el.value" :value="el.value" :label="el.label"></el-option>
+      </el-select>
+      <el-alert title="若需要增加话术，请联系运营经理" style="margin-left: 10px; width: 264px" show-icon :closable="false"></el-alert>
+    </div>
+    <div class="temp-list">
+      <div class="temp-item" v-for="el in tempList" :key="el.aiTemplateId">
+        <div class="temp-title">{{ el.name }}</div>
+        <div class="temp-info">
+          <p class="temp-info-text">话术ID：{{ el.aiTemplateId }}</p>
+          <p class="temp-info-text">更新时间：{{ el.updateTime | formatDateTimeByType }}</p>
+          <el-button class="temp-check-btn" type="text" @click="showTempDetail(el)">查看</el-button>
+        </div>
+        <div :class="['temp-status', { publish: el.status == -1 || el.status == 0 || el.status == 1 || el.status == 2 || el.status == 3 }, { reject: el.status == 4 }, { published: el.status == 5 }]">
+          {{ el.status | formatStatus(statusList) }}
+        </div>
+      </div>
+    </div>
+    <dm-pagination v-if="total > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="search.pageNum" :page-size="search.pageSize" :page-sizes="[20, 40, 60, 80]" layout="total, sizes, prev, pager, next"></dm-pagination>
+    <div v-if="tempList.length == 0" class="no-data">
+      <svg aria-hidden="true" width="100" height="100">
+        <use xlink:href="#icon-zanwuhuashu"></use>
+      </svg>
+      <div class="no-data-text">还未创建话术，请联系运营经理创建话术</div>
+    </div>
+    <el-dialog :visible.sync="tempDetail.show" @closed="onClosed" width="760px" title="查看话术">
+      <div class="temp-detail-item" v-for="el in 3" :key="el">
+        <div class="temp-detail-content">
+          <div class="temp-detail-title">普通节点</div>
+          <div class="temp-detail-desc">您好，我是江南布衣集团的首席福利官Rocky（停顿1秒），看到本月是您的生日月，祝您生日快乐呀！（空白2s）您的生日福利包已经准备好咯，本月有专属的生日折扣券和生日礼品福利可以领取呢~我稍后把领取路径发您手机上，记得点击领取一下哦~您的生日礼需要到所属的服务门店凭券直接领取，本月什么时候方便领取一下呢？</div>
+        </div>
+        <el-button type="text">播放</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-export default {};
+import { tempPageStatistics, tempDetail } from '@/service/api/aiApi.js';
+import { formatDateTimeByType } from '@/utils/index.js';
+// TODO 渲染话术详情、播放话术录音
+// TODO 话术列表接口total字段异常
+// TODO 需求文档中话术列表无-1的状态，所以接口是否要过滤掉-1的状态
+export default {
+  name: 'Message',
+  data() {
+    return {
+      tempList: [],
+      total: 0,
+      search: {
+        nameAndId: '', //话术ID/话术名称
+        brandNames: '', //品牌名称
+        status: '', //话术状态 0：待发布 1：待审核 2：待录音 3：待上线 4：审核不通过 5：已上线
+        commonFlag: '', //通用话术 0否 1是 -1 未配置
+        pageNum: 1,
+        pageSize: 20
+      },
+      statusList: [
+        { label: '待发布', value: 0 },
+        { label: '待审核', value: 1 },
+        { label: '待录音', value: 2 },
+        { label: '待上线', value: 3 },
+        { label: '审核不通过', value: 4 },
+        { label: '已上线', value: 5 }
+      ],
+      tempDetail: {
+        show: false,
+        aiTemplateId: '',
+        tempData: []
+      }
+    };
+  },
+  filters: {
+    formatDateTimeByType,
+    formatStatus(status, statusList) {
+      const list = [{ label: '三方删除', value: -1 }, ...statusList];
+      const state = list.find(el => el.value == status);
+      return state ? state.label : '--';
+    }
+  },
+  created() {
+    this.getTempList();
+  },
+  methods: {
+    getTempList() {
+      tempPageStatistics(this.search).then(res => {
+        const { list, pageNum, total } = res.result;
+        this.tempList = list;
+        this.search.pageNum = pageNum;
+        this.total = total;
+      });
+    },
+    getTempDetail() {
+      tempDetail({ aiTemplateId: this.tempDetail.aiTemplateId }).then(res => {
+        console.log(res);
+      });
+    },
+    onSearch() {
+      this.handleCurrentChange(1);
+    },
+    handleSizeChange(pageSize) {
+      this.search.pageSize = pageSize;
+      this.handleCurrentChange(1);
+    },
+    handleCurrentChange(pageNum) {
+      this.search.pageNum = pageNum;
+      this.getTempList();
+    },
+    showTempDetail(temp) {
+      this.tempDetail.show = true;
+      this.tempDetail.aiTemplateId = temp.aiTemplateId;
+      this.getTempDetail();
+    },
+    onClosed() {
+      this.tempDetail.aiTemplateId = '';
+      this.tempDetail.tempData = [];
+    }
+  }
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.message {
+  padding: 5px 20px 20px;
+  .search-bar {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .no-data {
+    padding-top: 110px;
+    text-align: center;
+    .no-data-text {
+      margin-top: 32px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #606266;
+      line-height: 20px;
+    }
+  }
+  .temp-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    .temp-item {
+      position: relative;
+      margin-top: 20px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      width: 276px;
+      height: 150px;
+      background: #ebecf0;
+      border-radius: 4px;
+      .temp-title {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 48px;
+        padding: 0 16px;
+        background: rgba(47, 84, 235, 0.9);
+        border-radius: 4px 4px 0px 0px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #fff;
+        line-height: 22px;
+      }
+      .temp-info {
+        padding: 10px 16px 14px;
+        text-align: center;
+        .temp-info-text {
+          + .temp-info-text {
+            margin-top: 4px;
+          }
+          text-align: left;
+          font-size: 14px;
+          font-weight: 400;
+          color: #303133;
+          line-height: 20px;
+        }
+      }
+      .temp-check-btn {
+        margin-top: 14px;
+      }
+      .temp-status {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 0px 4px 0px 4px;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 17px;
+        &.publish {
+          color: #2f54eb;
+          background: #dee3fc;
+        }
+        &.published {
+          color: #33af4a;
+          background: #d6f4dc;
+        }
+        &.reject {
+          color: #f5222d;
+          background: #fddbdd;
+        }
+      }
+    }
+  }
+}
+.temp-detail-item {
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  + .temp-detail-item {
+    padding-top: 10px;
+    border-top: 1px solid #e4e7ed;
+  }
+  .temp-detail-content {
+    .temp-detail-title {
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+      line-height: 20px;
+    }
+    .temp-detail-desc {
+      width: 650px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #303133;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/views/ai/task.vue

@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { pageStatistics, page, rechargeCenter, stopActivityPlan, startActivityPlan } from '@/service/api/aiApi.js';
+import { page, rechargeCenter, stopActivityPlan, startActivityPlan } from '@/service/api/aiApi.js';
 import { formatDateTimeByType } from '@/utils/index.js';
 import filterAvater from '@/mixins/filterAvater.js';
 import dmDropdown from '@/components/dm-drop-down/dm-drop-down';
@@ -115,9 +115,7 @@ export default {
           props: {
             limitCode: ''
           },
-          handler: row => {
-            console.log('查看');
-          }
+          handler: row => this.$router.push('/ai/info/' + row.activityId)
         },
         {
           text: '编辑',
@@ -127,9 +125,7 @@ export default {
           visible: row => {
             return row.activityPlanStatus === 0 || row.activityPlanStatus == 1;
           },
-          handler: row => {
-            console.log('编辑');
-          }
+          handler: row => this.editPlan(row)
         },
         {
           text: '终止',
@@ -314,7 +310,7 @@ export default {
           this.recharge();
         });
       } else {
-        this.$router.push({ path: '/ai/form', query: { scene } });
+        this.$router.push('/ai/add/' + scene);
       }
     },
     recharge() {
@@ -324,7 +320,6 @@ export default {
     async getRechargeCenter() {
       const { result } = await rechargeCenter();
       this.money = result.account.balance;
-      console.log(result);
     },
     search() {
       this.form.pageNum = 1;
@@ -348,10 +343,6 @@ export default {
       this.total = result.total;
       console.log(this.tableData);
     },
-    async getStatistics(para) {
-      const { result } = await pageStatistics([1, 2, 3]).finally(() => (this.loading = false));
-      console.log(result);
-    },
     stopTask(row) {
       this.$confirm('任务终止后未外呼的客户将停止外呼任务，终止后不可重新启用任务，是否继续终止任务？', '提示', {
         confirmButtonText: '终止',
@@ -373,6 +364,9 @@ export default {
           this.getTableData();
         });
       });
+    },
+    editPlan(row) {
+      this.$router.push('/ai/edit/' + row.activityId);
     }
   }
 };