feat: 企微助手 - 智能推送 - 推动记录&前端页面

project/src/components/smartPush/pushRecords.vue

@@ -0,0 +1,190 @@
+<template>
+  <div v-loading="loading">
+    <div class="screenBox" style="align-items: center;padding-right:16px">
+      <div class="flex-align-center" style="flex:1">
+        <!-- S 返回 -->
+        <div @click="$router.go(-1)">
+          <i class="el-icon-back" />
+        </div>
+        <!-- E 返回 -->
+        <datePicker title="发送时间" :reset="resetFlag" @changeTime="onChangeTime" />
+      </div>
+    </div>
+    <div class="tableInfo">
+      <div>
+        <div class="flex">
+          <div class="totalCustom">共有<span>{{total}}</span>条群发内容</div>
+        </div>
+      </div>
+      <div class="flex">
+        <el-button type="primary" plain size="mini" @click="init(1,'export')">导出Excel</el-button>
+      </div>
+    </div>
+    <!-- table -->
+    <el-table ref="multipleTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%">
+      <el-table-column prop="name" label="标题" show-overflow-tooltip align="center" min-width="120" />
+      <el-table-column label="创建人" align="center" min-width="120">
+        <template slot-scope="scope">
+          <div class="customerServiceTagBox">
+            <div class="customerServiceTag"><i class="el-icon-user-solid"></i> {{ scope.row.creator }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="规则" align="center" min-width="200" />
+      <el-table-column label="发送时间" prop="created_at" min-width="120" show-overflow-tooltip align="center" />
+      <el-table-column prop="send_success" label="送达客户数" show-overflow-tooltip align="center" min-width="120" />
+      <el-table-column prop="send_fail" label="失败客户数" show-overflow-tooltip align="center" min-width="120" />
+      <el-table-column label="操作" align="center" fixed="right" width="120">
+        <template slot-scope="scope">
+          <div class="flex" style="justify-content:center">
+            <div class="c-00B38A pointer table_button" @click="onClickDetail(scope.row)">详情</div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+    <!-- S 详情 -->
+    <el-drawer size="1200px" :visible.sync="detialFlag" :with-header="false">
+      <massMsgDetail v-if="detialFlag" title="智能推送详情" :rule_id='detail_rule_id' @close="detailClose" />
+    </el-drawer>
+    <!-- E 详情 -->
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import massMsgDetail from './massMsgDetail/index.vue'
+export default {
+  components: { datePicker, massMsgDetail, },
+  data () {
+    return {
+      detialFlag: false,
+      loading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      tableData: [],
+      add_date_start: '',//添加日期 起始
+      add_date_end: '',//添加日期 截止
+      resetFlag: false,//重置
+      height: '',
+      detail_rule_id: '',
+      sort_field: 'send_time',
+
+      rule_id: '',
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 260 > 400 ? document.documentElement.clientHeight - 260 : 400
+    const { rule_id } = this.$route.query
+    this.rule_id = rule_id
+    this.init(1)
+  },
+  methods: {
+    detailClose (val) {
+      if (val == 'update') {//编辑
+        this.init(this.page)
+      } else if (val == 'update_new') {//复制或者新建
+        this.sort_field = 'created_at'
+        this.init(1)
+        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
+      }
+      this.detialFlag = false
+    },
+    // 监听点击"详情"
+    onClickDetail (data) {
+      this.detail_rule_id = data.rule_id;
+      this.detialFlag = true
+    },
+    //筛选时间变化
+    onChangeTime(time) {
+      if (!time || time && time.length == 0) {
+        this.add_date_start = '';
+        this.add_date_end = '';
+      } else {
+        this.add_date_start = time[0]
+        this.add_date_end = time[1]
+      }
+      this.init(1)
+    },
+    // 获取列表数据
+    init (page, type) {
+      if (type != 'export') {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: '暂无数据可导出',
+            type: "warning"
+          })
+          return
+        }
+      }
+      this.loading = true
+      const params = {
+        send_time_start: this.add_date_start ? this.add_date_start + ' 00:00:00' : '',
+        send_time_end: this.add_date_end ? this.$day_format(this.$date_compatible(this.add_date_end + ' 24:00:00')) : '',
+        page: type == 'export' ? 1 : this.page,
+        page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+        sort_column: this.sort_field,
+      }
+      this.$axios.get(this.URL.BASEURL + this.URL.massMsg_lists, {
+        params
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data)
+          } else {
+            this.tableData = res.rst.data;
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+    exportEvent (data) {
+      let list = data;
+      let tHeader = ['企业ID', '群发标题', '发送类型', '发送时间', '消息文本内容', '附件信息', '发送状态', '消息内容总数', '创建人', '消息送达数', '消息发送失败数', '总发送数']
+      let filterVal = ['corpid', 'name', 'send_type_name', 'send_time', 'content', 'attachments', 'enable_name', 'msg_count', 'creator', 'send_success', 'send_fail', 'send_total']
+      list.forEach((item) => {
+        item.send_type_name = item.send_type == 1 ? '立即发送' : item.send_type == 2 ? '定时发送' : '';
+        item.enable_name = item.enable == -2 ? '已删除' : item.enable == -1 ? '发送失败' : item.enable == 1 ? '待发送' : item.enable == 2 ? '正在发送中' : item.enable == 3 ? '发送完成' : ''
+      })
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: ''// 表一的sheet名字
+        }
+      ]
+      this.$exportOrder({ excelDatas, name: `员工群发消息（导出时间：${this.$getDay(0)}）` })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.tableInfo {
+  height: 50px;
+}
+.table_button {
+  margin: 0 4px;
+  min-width: 26px;
+}
+</style>

project/src/components/smartPush/ruleList.vue

@@ -38,7 +38,7 @@
         <template slot-scope="scope">
           <div class="flex" style="justify-content:center">
             <div class="c-00B38A pointer table_button" @click="onClickEditRule(scope.row)">编辑</div>
-            <div class="c-00B38A pointer table_button" @click="onClickEditRule(scope.row)">推送记录</div>
+            <div class="c-00B38A pointer table_button" @click="onClickPushRecords(scope.row)">推送记录</div>
           </div>
         </template>
       </el-table-column>
@@ -57,21 +57,16 @@
         @close="detailClose"
       />
     </el-drawer>
-    <el-drawer size="1200px" :visible.sync="detialFlag" :with-header="false">
-      <massMsgDetail v-if="detialFlag" title="群发详情" :rule_id='detail_rule_id' @close="detailClose"></massMsgDetail>
-    </el-drawer>
   </div>
 </template>
 <script>
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
 import createMassMsg from './createMassMsg.vue'
-import massMsgDetail from './massMsgDetail/index.vue'
 export default {
-  components: { datePicker, selfChannel, createMassMsg, massMsgDetail, },
+  components: { datePicker, selfChannel, createMassMsg, },
   data () {
     return {
-      detialFlag: false,
       massMsgFlag: false,
       loading: false,
       page: 1,
@@ -102,7 +97,6 @@ export default {
         this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
       }
       this.massMsgFlag = false
-      this.detialFlag = false
     },
     // 监听点击"新建智能推送"规则
     onClickCreatedRule () {
@@ -114,6 +108,13 @@ export default {
       this.detail_rule_id = data.rule_id;
       this.massMsgFlag = true
     },
+    // 监听点击"推送记录"
+    onClickPushRecords (data) {
+      this.$router.push({
+        path: '/pushRecords',
+        query: { rule_id: data.rule_id }
+      })
+    },
     // 开启状态
     welcomeMsg_del (item) {
       if (item.enable != 1 && item.enable != 0) {

project/src/router/allRouter.js

@@ -8,6 +8,7 @@ const homeData = () => import(/* webpackChunkName: 'homeData' */'@/components/Ho
 const customManage = () => import(/* webpackChunkName: 'customManage' */ '@/components/customManage/manage.vue')
 const employee_bulk_messaging_log = () => import(/* webpackChunkName: 'employee_bulk_messaging_log' */ '@/components/customOperate/employee_bulk_messaging_log.vue')
 const smartPush = () => import(/* webpackChunkName: 'smartPush' */ '@/components/smartPush/ruleList.vue')
+const pushRecords = () => import(/* webpackChunkName: 'pushRecords' */ '@/components/smartPush/pushRecords.vue')
 const sop = () => import(/* webpackChunkName: 'sop' */ '@/components/sop/index.vue')
 const createSop = () => import(/* webpackChunkName: 'createSop' */ '@/components/sop/createSop.vue')
 const chatGroup = () => import(/* webpackChunkName: 'chatGroup' */ '@/components/customOperate/chatGroup/index.vue')
@@ -305,6 +306,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'pushRecords',
+        name: 'smartPush',
+        component: pushRecords,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '推送记录'
+        }
+      },
+      {
         path: 'sop',
         name: 'sop',
         component: sop,