feat: 系统消息 - 交互逻辑&接口联调

project/src/assets/config/interface_api.js

@@ -412,6 +412,8 @@ var api = {
   media_changeGroup: '/api/media/changeGroup', // 批量移动素材到指定素材组
   media_delMedia: '/api/media/delMedia', // 批量删除素材
   media_mediaSel: '/api/media/mediaSel', // 群发/朋友圈/欢迎语 选择素材
+
+  system_sendNoticeList: '/api/massMsg/sendNoticeList', // 系统管理 - 系统消息
 };
 
 export { api };

project/src/components/Index/header.vue

@@ -67,16 +67,19 @@
       <div class="rightLogin" v-if="$cookie.getCookie('isLogin')">
         <!-- 系统消息 -->
         <div class="system-msg-wrap">
-          <el-popover placement="bottom" width="200" trigger="hover" @show="onShowSystemMsg">
-            <div class="system-msg-pop">
+          <el-popover placement="bottom" width="240" trigger="hover" @show="onShowSystemMsg">
+            <div class="system-msg-pop" v-loading="systemMsgLoading">
               <div class="system-msg-list">
-                <div class="system-msg-item" title="消息消息消息消息消息消息消息消息消息">消息消息消息消息消息消息消息消息消息</div>
-                <div class="system-msg-item" title="消息2">消息2</div>
-                <div class="system-msg-item" title="消息3">消息3</div>
-                <div class="system-msg-item" title="消息4">消息4</div>
-                <div class="system-msg-item" title="消息5">消息5</div>
+                <template v-if="systemMsgList && systemMsgList.length">
+                  <el-tooltip v-for="(msg, idx) in systemMsgList" :key="idx" effect="dark" :content="msg.notice" placement="left">
+                    <div class="system-msg-item">
+                      {{ msg.notice }}
+                    </div>
+                  </el-tooltip>
+                  <div class="system-more-btn" @click="onClickMsgMore">查看更多</div>
+                </template>
+                <div v-else class="system-msg-item none">暂无系统消息</div>
               </div>
-              <div class="system-more-btn" @click="onClickMsgMore">查看更多</div>
             </div>
             <i slot="reference" class="el-icon-message-solid msg-icon" />
           </el-popover>
@@ -135,6 +138,9 @@ export default {
       reversalAnimationFlag: false,
       pageDataBoard: this.$route.meta.isData,
       system_enterprise: [],//系统管理员
+
+      systemMsgLoading: false,
+      systemMsgList: [],
     }
   },
   watch: {
@@ -241,15 +247,56 @@ export default {
     },
 
     // 监听显示系统消息弹框
-    onShowSystemMsg() {
-      console.log('onShowSystemMsg => ')
+    async onShowSystemMsg() {
+      const sys_group_id = this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : ''
+      try {
+        this.systemMsgLoading = true
+        const params = {
+          sys_group_id,
+          corp_id: '',
+          page: 1,
+          page_size: 5,
+        }
+        const url = `${this.URL.BASEURL}${this.URL.system_sendNoticeList}`
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          this.systemMsgList = Array.isArray(res.rst.data) ? res.rst.data : []
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.systemMsgList = []
+        }
+      } catch (error) {
+        console.log(error)
+        this.systemMsgList = []
+      } finally {
+        this.systemMsgLoading = false
+      }
     },
     // 监听点击“系统消息 - 查看更多”
     onClickMsgMore() {
-      console.log('onClickMsgMore => ',)
-      this.$router.push({
-        path: '/systemMsg'
-      })
+      try {
+        // 当前用户菜单权限
+        const permissions = this.$store.state.helper_side_list
+        // 获取当前用户是否有“系统消息”菜单权限
+        const isAuthorized = permissions.some(menu => {
+          if (menu.route === 'systemMsg') {
+            return true
+          } else if (Array.isArray(menu.sub) && menu.sub.length) {
+            return menu.sub.some(s => s.route === 'systemMsg')
+          } else {
+            return false
+          }
+        })
+        if (isAuthorized) { // 有权限 => 跳转
+          this.$router.push({
+            path: '/systemMsg'
+          })
+        } else { // 无权限 => 提示
+          this.$message.warning('当前用户暂无“系统消息”菜单权限')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      }
     },
   },
 }
@@ -523,6 +570,11 @@ export default {
       &:first-child {
         padding-top: 0;
       }
+      &.none {
+        padding-top: 10px;
+        text-align: center;
+        border: none;
+      }
     }
   }
   .system-more-btn {

project/src/components/manage/systemMsg.vue

@@ -2,8 +2,10 @@
   <div class="customerStaff-wrap" v-loading="pageLoading">
     <!-- S 筛选区 -->
     <div class="screenBox" style="padding-right: 100px;">
+      <!-- 日期 -->
+      <datePicker :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
       <!-- 企微主体 -->
-      <div class="common-screen-item">
+      <div style="margin-right: 30px;" class="common-screen-item">
         <label class="common-screen-label">企微主体</label>
         <!-- 系统管理员 -->
         <el-cascader v-if="$cookie.getCookie('isSuperManage') == 1" v-model="system_enterprise" size="small" :options="enterpriseList" :props="{value:'self_id',label:'self_name',children:'manage_corp_list'}" @change="onChangeCorpidSystem" clearable filterable placeholder="请选择" class="select-cls cascader" />
@@ -13,21 +15,11 @@
         </el-select>
       </div>
       <!-- 成员 -->
-      <selfInputV2 v-model="filter.user_name" label_name="成员" placeholder="请输入" @change="onChangeUserName" />
-      <!-- 客服状态 -->
-      <selfChannel title="客服状态" type="customerStaffStatus" :reset="reset" placeholder="请选择" @channelDefine="onChangeStatus" />
-      <!-- 激活状态 -->
-      <selfChannel title="激活状态" type="isActive" :reset="reset" placeholder="请选择" @channelDefine="onChangeActiveStatus" />
-      <!-- 运营人员 -->
-      <selfChannel title="运营人员" type="circleCreate" :reset="reset" placeholder="请选择" @channelDefine="onChangeOperatorUid" />
+      <selfInputV2 style="margin-left: -20px;"  :labelWidth="true" v-model="filter.user_name" label_name="成员" placeholder="请输入" @change="onChangeUserName" />
 
       <div class="reset" @click="onClickReset">重置</div>
-      <el-button v-if="isCanExport" class="export-btn" type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
     </div>
     <!-- E 筛选区 -->
-    <!-- S 数据更新时间 -->
-    <!-- <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div> -->
-    <!-- E 数据更新时间 -->
     <!-- S 明细表 detailsTable -->
     <div v-loading="detailLoading">
       <ux-grid class="detailsTable" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini" :height="height">
@@ -38,27 +30,10 @@
               <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
                 <div><i class="el-icon-question" /></div>
               </el-tooltip>
-              <div v-if="item.enable_to_sort" class="sort-wrap">
-                <i class="el-icon-caret-top" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
-                <i class="el-icon-caret-bottom" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
-              </div>
             </div>
           </template>
           <template v-slot="{ row }">
-            <!-- 客服状态 -->
-            <span v-if="item.column === 'status'">{{ handleGetStatus(row['status']) }}</span>
-            <!-- 激活状态 -->
-            <span v-else-if="item.column === 'active_status'">{{ handleGetActiveStatus(row['active_status']) }}</span>
-            <!-- 激活状态 -->
-            <span v-else-if="item.column === 'operator_name'">{{ row['operator_name'] || '-' }}</span>
-            <!-- 其他字段 -->
-            <span v-else>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
-          </template>
-        </ux-table-column>
-
-        <ux-table-column v-if="detailsTableCol && detailsTableCol.length" :width="120" fixed="right" align="center" title="操作">
-          <template v-slot="{ row }">
-            <span class="c-00B38A pointer">客服状态</span>
+            <span>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
           </template>
         </ux-table-column>
       </ux-grid>
@@ -73,22 +48,28 @@
 <script>
 import selfChannel from '@/components/assembly/screen/channel.vue'
 import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
-import { customerStaffStatusMap, kfActiveStatusMap } from '@/assets/js/staticTypes'
+import datePicker from '@/components/assembly/screen/datePicker.vue'
 
 export default {
   components: {
     selfChannel,
     selfInputV2,
+    datePicker,
   },
   data() {
-    return{
+    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
+    return {
       reset: false,
+      default_time: DEFAULT_TIME,
       pageLoading: false,
       height: '',
-
       detailLoading: false,
-      detailsTableCol: [],
-
+      detailsTableCol: [
+        { column: 'create_time', name: '时间', 'min_width': 140, fixed: 'left', },
+        { column: 'corp_name', name: '企微主体', 'min_width': 200, fixed: '', },
+        { column: 'user_name', name: '成员', 'min_width': 140, fixed: '', },
+        { column: 'notice', name: '消息内容', 'min_width': 400, fixed: '', },
+      ],
       pagination: {
         page: 1,
         page_size: 20,
@@ -101,84 +82,38 @@ export default {
       enterprise: {}, // 当前选择的企微信息
 
       filter: {
-        sort_field: 'daily_new_contact_cnt', // 排序字段 - 默认值 daily_new_contact_cnt
-        sort_type: 'desc', // 升序/降序
+        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+        time: DEFAULT_TIME, // 自定义日期
         corpid: '', // 企微主体
         user_name: '', // 成员
-        status: '', // 客服状态
-        operator_uid: '', // 运营人员
-        active_status: '', // 激活状态
       },
-
-      updateTime: '', // 数据更新时间
     }
   },
-  computed: {
-    // 是否有“导出”权限
-    isCanExport() {
-      return !!this.$store.state.dataBoardAuth.can_export
-    },
-  },
   created() {
     this.initTableHeight()
     this.handleInitCorpOptions()
     this.handleGetData()
   },
   methods: {
-    handleGetStatus(status) {
-      return customerStaffStatusMap.get(status) || '-'
-    },
-    handleGetActiveStatus(active_status) {
-      return kfActiveStatusMap.get(active_status) || '-'
-    },
     handleGetData() {
       this.handleGetList()
-      // this.handleGetUpdateTime()
-    },
-    // 获取"数据更新时间"
-    async handleGetUpdateTime() {
-      try {
-        const params = { type: '' }
-        const { data: res = {} } = await this.$axios.get(`${this.URL.BASEURL}${this.URL.dataBoard_uptime}`, { params })
-        if (res && res.errno == 0) {
-          this.updateTime = res.rst.uptime
-        } else if (res.errno != 4002) {
-          this.$message.warning(res.err)
-          this.updateTime = ''
-        }
-      } catch (error) {
-        this.updateTime = ''
-      }
     },
     // 获取列表数据
     async handleGetList() {
       try {
         this.detailLoading = true
         const params = {
+          sys_group_id: this.filter.sys_group_id,
+          start_date: this.filter.time[0],
+          end_date: this.filter.time[1],
           corp_id: this.filter.corpid,
           user_name: this.filter.user_name,
-          status: this.filter.status,
-          operator_uid: this.filter.operator_uid,
-          active_status: this.filter.active_status,
-
-          sort_field: this.filter.sort_field,
-          sort_type: this.filter.sort_type,
           page: this.pagination.page,
           page_size: this.pagination.page_size,
         }
-        const url = `${this.URL.BASEURL}${this.URL.dataBoard_customerStaff_list}`
+        const url = `${this.URL.BASEURL}${this.URL.system_sendNoticeList}`
         const { data: res = {} } = await this.$axios.get(url, { params })
         if (res && res.errno == 0) {
-          res.rst.extra[0].fixed = 'left' // 前1列固定左侧
-          const detailsTableCol = []
-          res.rst.extra.forEach(item => {
-            if (item.name && item.name.length > 6) { // 长字符宽度
-              item['min_width'] = item.name.length * 25
-            }
-            detailsTableCol.push(item) // 收集普通表头
-          })
-          this.detailsTableCol = Object.freeze(detailsTableCol)
-          await this.$nextTick()
           const detailsTableList = Array.isArray(res.rst.data) ? res.rst.data : []
           this.$refs.detailsTable.reloadData(detailsTableList)
           this.pagination.total = res.rst.pageInfo.total
@@ -198,153 +133,40 @@ export default {
         this.detailLoading = false
       }
     },
-    // 监听排序变化
-    onClickSort(sort_field, sort_type) {
-      // sort_type：升序asc、降序desc
-      if (this.filter.sort_field === sort_field) {
-        if (this.filter.sort_type === sort_type) {
-          // 点击的是当前排序字段 && 是当前排序类型 => 重置 取消排序
-          this.filter.sort_field = 'daily_new_contact_cnt'
-          this.filter.sort_type = 'desc'
-        } else {
-          // 点击的是当前排序字段 && 非当前排序类型 => 设置排序类型
-          this.filter.sort_type = sort_type
-        }
-      } else {
-        // 点击的不是当前排序字段 => 设置排序字段和类型
-        this.filter.sort_field = sort_field
-        this.filter.sort_type = sort_type
-      }
-      // 后端排序 => 获取最新数据
-      this.pagination.page = 1
-      this.handleGetData()
-    },
     // 监听当前页变化
     handleCurrentChange(currentPage) {
       this.pagination.page = currentPage
       this.handleGetData()
     },
-    // 监听客服输入变化
-    onChangeUserName(val) {
-      this.filter.user_name = val
-      this.pagination.page = 1
-      this.handleGetData()
-    },
-    // 监听“客服状态”变化
-    onChangeStatus(val) {
-      this.filter.status = val
+    // 监听时间筛选变化
+    onChangeTime(time) {
+      this.filter.time = Array.isArray(time) ? time : []
       this.pagination.page = 1
       this.handleGetData()
     },
-    // 监听“运营人员”变化
-    onChangeOperatorUid(val) {
-      this.filter.operator_uid = val
-      this.pagination.page = 1
-      this.handleGetData()
-    },
-    // 监听“激活状态”变化
-    onChangeActiveStatus(val) {
-      this.filter.active_status = val
+    // 监听客服输入变化
+    onChangeUserName(val) {
+      this.filter.user_name = val
       this.pagination.page = 1
       this.handleGetData()
     },
     // 监听点击"重置"按钮
     onClickReset() {
       this.reset = !this.reset
-
+      this.filter.time = this.default_time
       this.system_enterprise = []
       this.enterprise = {}
       this.filter.corpid = ''
       this.filter.user_name = ''
-      this.filter.status = ''
-      this.filter.operator_uid = ''
-      this.filter.active_status = ''
-
-      this.filter.sort_field = 'daily_new_contact_cnt'
-      this.filter.sort_type = 'desc'
       this.pagination.page = 1
       this.handleGetData()
     },
-    // 监听点击"导出"按钮
-    async onClickExport() {
-      if (!this.pagination.total) return this.$message.warning('暂无数据可导出')
-      try {
-        this.pageLoading = true
-        const url = {
-          detail: `${this.URL.BASEURL}${this.URL.dataBoard_customerStaff_list}`,
-        }
-        const params = {
-          corp_id: this.filter.corpid,
-          user_name: this.filter.user_name,
-          status: this.filter.status,
-          operator_uid: this.filter.operator_uid,
-          active_status: this.filter.active_status,
-        }
-        const [{ data: detailRes = {} }] = await Promise.all([
-          this.$axios.get(url.detail, {
-            params: {
-              ...params,
-              sort_field: this.filter.sort_field,
-              sort_type: this.filter.sort_type,
-              page: 1,
-              page_size: this.$store.state.exportNumber,
-            }
-          })
-        ])
-        if (detailRes && detailRes.errno == 0) {
-          this.handleExport({
-            detailData: detailRes.rst,
-          })
-        } else if (detailRes.errno != 4002) {
-          this.$message.warning(detailRes.err)
-        }
-      } catch (error) {
-        console.log(error)
-        this.$message.warning('导出失败，请重试')
-      } finally {
-        this.pageLoading = false
-      }
-    },
-    // 执行导出逻辑
-    handleExport({ detailData = {} }) {
-      let tHeader = []
-      let filterVal = []
-      let tableDatas = []
-
-      detailData.data.forEach(item => {
-        item['status'] = this.handleGetStatus(item['status'])
-        item['active_status'] = this.handleGetActiveStatus(item['active_status'])
-      })
-
-      tHeader = [
-        ...detailData.extra.map(d => `${d.name}`),
-      ]
-
-      filterVal = [
-        ...detailData.extra.map(d => d.column),
-      ]
-
-      tableDatas = [
-        ...detailData.data,
-      ]
-
-      const excelDatas = [
-        {
-          tHeader, // sheet表一头部
-          filterVal, // 表一的数据字段
-          tableDatas, // 表一的整体json数据
-          sheetName: ''// 表一的sheet名字
-        }
-      ]
-      this.$exportOrder({ excelDatas, name: `客服数据统计（导出时间：${this.$getDay(0)}）` })
-    },
     getHeaderCellStyle() {
       return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
     },
     initTableHeight() {
       this.height = document.documentElement.clientHeight - 240 > 400 ? document.documentElement.clientHeight - 240 : 400
     },
-
     // S 企微主体数据
     onChangeCorpidSystem(val) {//二级联选择器
       if (val.length < 1) {
@@ -411,6 +233,9 @@ export default {
     // padding: 5px 20px 26px;
     padding: 5px 20px 10px;
     position: relative;
+    .common-screen-item {
+      width: auto;
+    }
     .export-btn {
       position: absolute;
       top: 17px;