update: 客户详情-营销记录添加AI营销记录

src/components/marketingRecord/components/ai-record.vue

+<template>
+  <div class="marketing-message">
+    <div class="search">
+      <el-input placeholder="请输入活动名称" type="text" prefix-icon="el-icon-search" class="w256" clearable v-model="search.key" @change="change"></el-input>
+      <el-date-picker :clearable="false" value-format="yyyy-MM-dd" class="w256 ml10" :pickerOptions="pickerOptions" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
+      <span class="search-tip ml10">同一客户同时外呼成功并发送短信营销次数算作两次</span>
+    </div>
+    <el-table v-loading="tableData.loading" :data="tableData.data" tooltip-effect="dark" style="width: 100%">
+      <el-table-column
+        v-for="(v, i) in tableData.tableHeader"
+        :key="i"
+        :prop="v.prop"
+        :min-width="v.minWidth"
+        :label="v.label"
+        :fixed="v.fixed"
+        show-overflow-tooltip>
+        <template slot-scope="{ row }">
+          <span v-if="v.formatter" v-html="v.formatter(row)"></span>
+          <span v-else>{{ row[v.prop] || "--" }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <dm-pagination
+      v-if="tableData.total > 0"
+      background
+      @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"></dm-pagination>
+  </div>
+</template>
+
+<script>
+import dickerPickMixin from './mixins/datePickRuleMixin';
+import paginationMixins from './mixins/paginationMixins';
+export default {
+  name: 'AiRecord',
+  props: {
+    tableData: Object
+  },
+  mixins: [ dickerPickMixin, paginationMixins ],
+  data() {
+    return {
+      search: {
+        key: '',
+        beginTime: '',
+        endTime: ''
+      }
+    }
+  },
+  methods: {
+    change() {
+      const { currentPage, pageSize } = this.tableData;
+      this.search.beginTime = this.time ? ( typeof this.time[0] == 'string ' ? this.time[0] : this.dateformat(new Date(this.time[0]), 'yyyy-MM-dd')) : null;
+      this.search.endTime = this.time ? ( typeof this.time[0] == 'string ' ? this.time[1] : this.dateformat(new Date(this.time[1]), 'yyyy-MM-dd')) : null;
+      this.$emit("changeSearch", Object.assign({ currentPage, pageSize }, this.search));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './css/all.scss';
+.search .search-tip {
+  vertical-align: middle;
+  font-size: 14px;
+  color: #909399;
+}
+</style>

src/components/marketingRecord/index.vue

@@ -14,17 +14,20 @@
         <el-tab-pane label="微信营销" name="4">
           <wechat-record :tableData="wechatTableData" @changeSearch="onChange" />
         </el-tab-pane>
+        <el-tab-pane label="AI营销" name="5">
+          <ai-record :tableData="aiTableData" @changeSearch="onChange"></ai-record>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
 </template>
 
 <script>
-import NavPath from "@/common/navbar/navbar.vue";
 import ecmRecord from "./components/ecm.vue";
 import cardRecord from "./components/card.vue";
 import wechatRecord from "./components/wechat.vue";
 import messageRecord from "./components/message.vue";
+import AiRecord from './components/ai-record.vue';
 import { doFetch, doFetchqs } from "@/components/axios/api";
 import { dateformat } from '@/utils/formatTime';
 import url from "@/components/axios/url";
@@ -32,20 +35,14 @@ const { ecmLogPage, cardLogPage, messageLogPage, wechatLogPage, cardChannelType
 export default {
   name: "marketing-record",
   components: {
-    NavPath,
     ecmRecord,
     cardRecord,
     wechatRecord,
-    messageRecord
+    messageRecord,
+    AiRecord
   },
   data() {
     return {
-      navpath: [
-        { name: "首页", path: "" },
-        { name: "客户列表", path: "/allCustomers" },
-        { name: "客户详情",  path: '/customerDetail?memberId=' + this.$route.query.memberId || '' },
-        { name: "营销记录", path: "" }
-      ],
       tabsIndex: "1",
       search: {
         msg: ""
@@ -87,6 +84,16 @@ export default {
         dictList: [],
         loading: false
       },
+      aiTableData: {
+        data: [],
+        currentPage: 1,
+        pageSizeList: [20, 40, 60, 80],
+        pageSize: 20,
+        total: 0,
+        tableHeader: [],
+        dictList: [],
+        loading: false
+      }
     };
   },
   created() {
@@ -120,6 +127,11 @@ export default {
           this[name].loading = true;
           res = await doFetchqs(wechatLogPage, params);
           break;
+        case '5':
+          name = 'aiTableData';
+          res = { data: { result: {} } }
+          this[name].loading = true;
+          break;
       }
       this.extendTable(this[name], res.data.result); // 赋值对应表格数据
       this[name].loading = false;
@@ -224,6 +236,19 @@ export default {
         }
        }
       ];
+      this.aiTableData.tableHeader = [
+        {
+          label: "触达时间",
+          prop: "",
+          minWidth: 80,
+          formatter(row) {
+            return `${row.createDate ? dateformat(new Date(row.createDate), 'yyyy-MM-dd hh-mm-ss') : '--'}`;
+          }
+        },
+        { label: "活动名称", prop: "", minWidth: 120 },
+        { label: "活动场景", prop: "", minWidth: 120 },
+        { label: "话术名称", prop: "", minWidth: 120 }
+      ];
     },
     // 设置表格数据
     extendTable(tableObj, remoteData) {