feat: 客户群数据报表&下拉选择组件交互逻辑

project/src/assets/config/interface_api.js

@@ -307,6 +307,8 @@ var api = {
   dataBoard_recharge_list: "/api/statistics/cumulativeRecoveryData", // 充值数据 - 列表
   dataBoard_customerStaff_list: "/api/statistics/customerServiceData", // 客服数据统计 - 列表
   dataBoard_customerStaff_setStatus: "/api/user/updateUserStatus", // 客服数据统计 - 更新客服状态
+  dataBoard_chatGroupData_list: "/api/chatGroup/chatGroupStatistic", // 客户群数据 - 列表
+  dataBoard_chatGroupData_summary: "/api/chatGroup/chatGroupCondition", // 客户群数据 - 汇总
 
   getPlatformOptions: "/api/intelligentMassSending/platformIndex", // 平台筛选选项
   accountManage_accountIndex: "/api/intelligentMassSending/accountIndex", // 平台账号管理 - 账号列表

project/src/assets/js/staticTypes.js

@@ -74,3 +74,13 @@ export const customerStaffStatusMap = new Map([
   [customerStaffStatusCode.STOPPED, '已停用'],
   [customerStaffStatusCode.BANNED, '已封禁'],
 ])
+
+// 客服状态
+export const chatGroupStatusCode = {
+  'NORMAL': 1,
+  'DISSOLVE': 2,
+}
+export const chatGroupStatusCodeMap = new Map([
+  [chatGroupStatusCode.NORMAL, { label: '正常', color: '#00B38A' }],
+  [chatGroupStatusCode.DISSOLVE, { label: '解散', color: '#EB4315' }],
+])

project/src/components/assembly/screen/channel.vue

@@ -29,6 +29,7 @@
       filterable
       :disabled="disabled"
       @change="change"
+      @visible-change="onVisibleChange"
     >
       <el-option v-for="item in options" :key="item.key" :label="item.val" :value="item.key" />
     </el-select>
@@ -247,12 +248,39 @@ export default {
         { key: 15, val: '15天' },
       ]
       this.placeholderVal = '请选择'
+    } else if (this.type == 'chatGroupOwner') { // 群主
+      this.getChatGroupOwner()
+      this.placeholderVal = '请选择群主'
     } else {
       this.init()
     }
 
   },
   methods: {
+    onVisibleChange(val) {
+      this.$emit('visible-change', val)
+    },
+    async getChatGroupOwner() {
+      const url = `${this.URL.BASEURL}${this.URL.chatGroup_chatGroupOwnerIndex}`
+      const params = {}
+
+      const { isSelectedCorp = false, corpid = '' } = this.afferent_params
+      if (isSelectedCorp && !corpid) { // 先选择企微主体 => 没选主体清空群主
+        this.options = []
+        return
+      } else if (isSelectedCorp && corpid) { // 先选择企微主体 => 根据已选主体获取群主
+        params.corpid = corpid
+      }
+
+      const { data: res = {} } = await this.$axios.get(url, { params })
+      if (res && res.errno == 0) {
+        this.options = Array.isArray(res.rst) ? res.rst : []
+        this.options.forEach(item => {
+          item.val = item.name;
+          item.key = item.user_id
+        })
+      }
+    },
     getPicturesGroup() { //图片组
       this.$axios.get(this.URL.BASEURL + this.URL.media_groupList, {
         params: {

project/src/components/assembly/screen/channelMultiple.vue

@@ -14,6 +14,7 @@
       multiple
       collapse-tags
       @change="change"
+      @visible-change="onVisibleChange"
     >
       <el-option v-for="item in options" :key="item.key" :label="item.val" :value="item.key" />
     </el-select>
@@ -227,12 +228,39 @@ export default {
         { key: 15, val: '15天' },
       ]
       this.placeholderVal = '请选择'
+    } else if (this.type == 'chatGroupOwner') { // 群主
+      this.getChatGroupOwner()
+      this.placeholderVal = '请选择群主'
     } else {
       this.init()
     }
 
   },
   methods: {
+    onVisibleChange(val) {
+      this.$emit('visible-change', val)
+    },
+    async getChatGroupOwner() {
+      const url = `${this.URL.BASEURL}${this.URL.chatGroup_chatGroupOwnerIndex}`
+      const params = {}
+
+      const { isSelectedCorp = false, corpid = '' } = this.afferent_params
+      if (isSelectedCorp && !corpid) { // 先选择企微主体 => 没选主体清空群主
+        this.options = []
+        return
+      } else if (isSelectedCorp && corpid) { // 先选择企微主体 => 根据已选主体获取群主
+        params.corpid = corpid
+      }
+
+      const { data: res = {} } = await this.$axios.get(url, { params })
+      if (res && res.errno == 0) {
+        this.options = Array.isArray(res.rst) ? res.rst : []
+        this.options.forEach(item => {
+          item.val = item.name;
+          item.key = item.user_id
+        })
+      }
+    },
     getOperatorGroup() { // 运营组
       this.$axios.get(this.URL.BASEURL + this.URL.operatorGroup_groupList, {
         params: {

project/src/components/assembly/screen/channelV2.vue

@@ -15,6 +15,7 @@
       :collapse-tags="collapseTags"
       :multiple-limit="multipleLimit"
       @change="onChangeResultVal"
+      @visible-change="onVisibleChange"
     >
       <el-option v-for="item in options" :key="item.key" :label="item.val" :value="item.key" />
     </el-select>
@@ -98,6 +99,9 @@ export default {
     this.handleGetOptions()
   },
   methods: {
+    onVisibleChange(val) {
+      this.$emit('visible-change', val)
+    },
     onChangeResultVal(val) {
       this.$emit('change', val)
     },
@@ -319,6 +323,27 @@ export default {
         });
       }
     },
+    async getChatGroupOwner() {
+      const url = `${this.URL.BASEURL}${this.URL.chatGroup_chatGroupOwnerIndex}`
+      const params = {}
+
+      const { isSelectedCorp = false, corpid = '' } = this.afferent_params
+      if (isSelectedCorp && !corpid) { // 先选择企微主体 => 没选主体清空群主
+        this.options = []
+        return
+      } else if (isSelectedCorp && corpid) { // 先选择企微主体 => 根据已选主体获取群主
+        params.corpid = corpid
+      }
+
+      const { data: res = {} } = await this.$axios.get(url, { params })
+      if (res && res.errno == 0) {
+        this.options = Array.isArray(res.rst) ? res.rst : []
+        this.options.forEach(item => {
+          item.val = item.name;
+          item.key = item.user_id
+        })
+      }
+    },
     handleGetOptions() {
       if (this.type == 'assignment_status') {
         this.options = [
@@ -466,6 +491,9 @@ export default {
           { key: 15, val: '15天' },
         ]
         this.placeholderVal = '请选择'
+      } else if (this.type == 'chatGroupOwner') { // 群主
+        this.getChatGroupOwner()
+        this.placeholderVal = '请选择群主'
       } else {
         this.init()
       }

project/src/components/dataBoard/chatGroupData.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <div class="screenBox">
+      <div class="flex-align-center" style="flex-wrap: wrap;margin-right: 60px;">
+        <!-- <datePicker title="" :quickFlag="true" :afferent_time="default_time" :clearFlag='false' :reset="resetFlag" @changeTime="onChangeTime" style="margin-right: 10px;" /> -->
+        <!-- 企微主体 -->
+        <selfSelectCorp style="margin-right: 30px;" v-model="filter.corpid" @change="onChangeCorpid" />
+        <!-- 群主 -->
+        <selfChannelV2 v-model="filter.owner" title="群主" type="chatGroupOwner" ref="selectOwnerEl" labelWidth :afferent_params="{ isSelectedCorp: true, corpid: filter.corpid }" @change="onChangeOwner" @visible-change="onSelectOwnerVisibleChange" />
+      </div>
+      <div class="reset" @click="resetEvent">重置</div>
+      <!-- <el-button v-if="isCanExport" class="export-btn" type="primary" size="mini" @click="onClickExport">导出Excel</el-button> -->
+    </div>
+    <div class="dataInfoBox" v-loading="dataLoading">
+      <div class="dataInfoItem" v-for="(item, index) in dataInfoArrs" :key="index">
+        <div class="dataItemTitle">
+          <img
+            v-if="item.img"
+            :src="item.img"
+            :style="{height: item.size ? item.size + 'px' : '13px', width: item.size ? item.size + 'px' : '13px',}"
+            class="titleIcon"
+          />
+          <span>{{ item.label }}</span>
+        </div>
+        <div class="dataItem-data">
+          {{ dataInfo && (dataInfo[item.prop] || dataInfo[item.prop] == 0) ? $formatNum(dataInfo[item.prop]) : '-' }}
+        </div>
+      </div>
+    </div>
+    <div v-loading="loading">
+      <ux-grid class="uxGridBox" ref="plxTable" :border="false" @row-click="() => { return }"
+        :header-cell-style="headerColor" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip"
+        size="mini">
+        <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop"
+          :title="item.label" :min-width="item.min_width ? item.min_width : 120" :fixed="item.fixed ? item.fixed : ''"
+          align="center">
+          <template #header>
+            <div class="flex-align-jus-center">{{ item.label }}
+              <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+            </div>
+          </template>
+          <template v-slot="{ row, $index }">
+            <span v-if="item.prop == 'status'" :style="{ color: getChatGroupStatusDesc(row['status']).color }">
+              {{ getChatGroupStatusDesc(row['status']).label || '-' }}
+            </span>
+            <span v-else>{{ row[item.prop] === 0 ? row[item.prop] : (row[item.prop] ? $formatNum(row[item.prop]) : '-') }}</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="total > 0">
+        <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)' />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
+import selfSelectCorp from '@/components/assembly/screen/selectCorp.vue'
+import { chatGroupStatusCodeMap } from '@/assets/js/staticTypes'
+
+export default {
+  name: 'orderData',
+  components: {
+    datePicker,
+    selfChannelV2,
+    selfSelectCorp,
+  },
+  data () {
+    return {
+      dataLoading: false,
+      loading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
+      height: '',
+      resetFlag: false,
+
+      dataInfo: {},
+      dataInfoArrs: [
+        {
+          prop: 'member_total',
+          label: '累计群人数',
+          img: require('@/assets/img/iconNew/充值人数@2x.png'),
+        },
+        {
+          prop: 'member_count',
+          label: '留存群人数',
+          img: require('@/assets/img/iconNew/充值人数@2x.png'),
+        },
+        {
+          prop: 'member_quit_count',
+          label: '流失群人数',
+          img: require('@/assets/img/iconNew/充值人数@2x.png'),
+        },
+        {
+          prop: 'group_count',
+          label: '群聊总数',
+          img: require('@/assets/img/iconNew/总充值人数@2x.png'),
+        },
+        {
+          prop: 'today_join_count',
+          label: '今日净增群人数',
+          img: require('@/assets/img/icon/今日@2x.png'),
+          size: '17',
+        },
+        {
+          prop: 'today_create_count',
+          label: '今日新增群聊数',
+          img: require('@/assets/img/icon/今日@2x.png'),
+          size: '17',
+        },
+      ],
+      desCol: [
+        { prop: "name", label: "群名称", min_width: 180, fixed: 'left' },
+        { prop: "owner_name", label: "群主", min_width: 160 },
+        { prop: "create_time", label: "创建时间", min_width: 160 },
+        { prop: "corp_name", label: "主体", min_width: 180 },
+        { prop: "member_count", label: "群人数", min_width: 160 },
+        { prop: "member_total", label: "累计群人数", min_width: 160 },
+        { prop: "member_quit_count", label: "流失群人数", min_width: 160 },
+        { prop: "status", label: "群状态", min_width: 160 },
+      ],
+      filter: {
+        time: [],
+        corpid: '', // 企微主体
+        owner: '', // 群主
+      },
+    }
+  },
+  computed: {
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export
+    },
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 280 > 400 ? document.documentElement.clientHeight - 280 : 400
+    this.filter.time = this.default_time
+    this.init(1)
+    this.init_predata()
+  },
+  methods: {
+    getChatGroupStatusDesc(code) {
+      return chatGroupStatusCodeMap.get(code) || {}
+    },
+    headerColor ({ row, column, rowIndex, columnIndex }) {
+      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
+    },
+    async init_predata () {
+      const url = this.URL.BASEURL + this.URL.dataBoard_chatGroupData_summary
+      const params = {
+        corpid: this.filter.corpid,
+        owner: this.filter.owner,
+      }
+      try {
+        this.dataLoading = true
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.dataInfo = {...res.rst}
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.dataLoading = false
+      }
+    },
+    async init (page, type) {
+      this.page = page ? page : this.page;
+      this.loading = true
+      const url = `${this.URL.BASEURL}${this.URL.dataBoard_chatGroupData_list}`
+      const params = {
+        corpid: this.filter.corpid,
+        owner: this.filter.owner,
+        page: this.page,
+        page_size: this.page_size,
+      }
+      try {
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.datas = res.rst.data // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
+          this.$refs.plxTable.reloadData(this.datas)
+          this.total = res.rst.pageInfo.total;
+          this.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    //筛选时间变化
+    onChangeTime(time) {
+      if (!time || time && time.length == 0) {
+        this.filter.time = []
+      } else {
+        this.filter.time = time
+      }
+      this.init_predata()
+      this.init(1)
+    },
+    async onChangeCorpid(corp) {
+      this.filter.corpid = corp ? corp.corpid : ''
+      this.filter.owner = ''
+      await this.$nextTick()
+      this.$refs.selectOwnerEl && this.$refs.selectOwnerEl.handleGetOptions()
+      this.init(1);
+      this.init_predata();
+    },
+    onSelectOwnerVisibleChange(isOpen) {
+      if (isOpen && !this.filter.corpid) {
+        this.$message.warning('请选择企微主体')
+      }
+    },
+    onChangeOwner(val) {
+      this.filter.owner = val;
+      this.init(1);
+      this.init_predata();
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+    async resetEvent () {//重置
+      this.resetFlag = !this.resetFlag
+      this.filter.time = [this.$getDay(-30, false), this.$getDay(0, false)]
+      this.filter.corpid = ''
+      this.filter.owner = ''
+      await this.$nextTick()
+      this.$refs.selectOwnerEl && this.$refs.selectOwnerEl.handleGetOptions()
+      this.init_predata()
+      this.init(1)
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.disabled {
+  cursor: not-allowed;
+}
+.screenBox {
+  background: #fff;
+  padding: 5px 20px 26px;
+  position: relative;
+  .export-btn {
+    position: absolute;
+    top: 17px;
+    right: 4px;
+  }
+
+  .reset {
+    width: 80px;
+    height: 30px;
+    background: #00b38a;
+    border-radius: 100px 3px 3px 3px;
+    border: 1px solid #d2d2d2;
+    color: #ffffff;
+    font-size: 14px;
+    line-height: 30px;
+    text-align: center;
+    letter-spacing: 2px;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.dataInfoBox {
+  display: flex;
+  margin-top: 10px;
+  // justify-content: space-between;
+  flex-wrap: wrap;
+
+  .dataInfoItem {
+    background: #ffffff;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    //padding: 15px 80px 19px 20px;
+    min-width: 200px;
+    //max-width: 240px;
+    height: 85px;
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+
+    .dataItemTitle {
+      display: flex;
+      align-items: center;
+      color: #6f6f6f;
+      font-size: 13px;
+      line-height: 17px;
+      font-weight: bold;
+
+      .titleIcon {
+        height: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    .dataItem-data {
+      color: #000000;
+      font-size: 19px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 2px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 50px;
+    }
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -46,6 +46,7 @@ const throwPerson = () => import(/* webpackChunkName: 'throwPerson' */ '@/compon
 const regRangeReport = () => import(/* webpackChunkName: 'regRangeReport' */ '@/components/dataBoard/regRangeReport.vue')
 const regRangeReportHS = () => import(/* webpackChunkName: 'regRangeReportHS' */ '@/components/dataBoard/regRangeReportHS.vue')
 const orderData = () => import(/* webpackChunkName: 'orderData' */ '@/components/dataBoard/orderData.vue')
+const chatGroupData = () => import(/* webpackChunkName: 'chatGroupData' */ '@/components/dataBoard/chatGroupData.vue')
 const dramaManage = () => import(/* webpackChunkName: 'dramaManage' */ '@/components/dataBoard/dramaManage.vue')
 const charge = () => import(/* webpackChunkName: 'charge' */ '@/components/orderManage/charge.vue')
 const wxAccountList = () => import(/* webpackChunkName: 'wxAccountList' */ '@/components/dataBoard/wxAccount/list.vue')
@@ -859,6 +860,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'chatGroupData',
+        name: 'chatGroupData',
+        component: chatGroupData,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '客户群数据',
+          isData: true
+        }
+      },
+      {
         path: 'dramaManage',
         name: 'dramaManage',
         component: dramaManage,