feat: 客服数据统计

project/src/components/dataBoard/customerStaff.vue

@@ -1,78 +1,87 @@
 <template>
   <div class="customerStaff-wrap" v-loading="pageLoading">
-      <!-- S 筛选区 -->
-      <div class="screenBox" style="padding-right: 100px;">
-        <!-- 企微主体 -->
-        <div 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" />
-          <!-- 非系统管理员 -->
-          <el-select v-else v-model="filter.corpid" size="small" filterable placeholder="请选择" @change="onChangeCorpid" clearable class="select-cls">
-            <el-option v-for="(item, index) in enterpriseList" :key="index+'enterpriseList'" :label="item.corp_name?item.corp_name:item.corp_full_name?item.corp_full_name:item.corpid" :value="item.corpid" />
-          </el-select>
-        </div>
-        <!-- 成员 -->
-        <selfInputV2 v-model="filter.keyword" label_name="成员" placeholder="请输入" @change="onChangeKeyword" />
-        <!-- 客服状态 -->
-        <selfChannel title="客服状态" type="customerStaffStatus" :reset="reset" placeholder="请选择" @channelDefine="onChangeCuStStatus" />
-        <!-- 激活状态 -->
-        <selfChannel title="激活状态" type="isActive" :reset="reset" placeholder="请选择" @channelDefine="onChangeActiveStatus" />
-        <!-- 运营人员 -->
-        <selfChannel title="运营人员" type="circleCreate" :reset="reset" placeholder="请选择" @channelDefine="onChangeOperatorId" />
-
-        <div class="reset" @click="onClickReset">重置</div>
-        <el-button v-if="isCanExport" class="export-btn" type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
+    <!-- S 筛选区 -->
+    <div class="screenBox" style="padding-right: 100px;">
+      <!-- 企微主体 -->
+      <div 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" />
+        <!-- 非系统管理员 -->
+        <el-select v-else v-model="filter.corpid" size="small" filterable placeholder="请选择" @change="onChangeCorpid" clearable class="select-cls">
+          <el-option v-for="(item, index) in enterpriseList" :key="index+'enterpriseList'" :label="item.corp_name?item.corp_name:item.corp_full_name?item.corp_full_name:item.corpid" :value="item.corpid" />
+        </el-select>
       </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">
-          <ux-table-column v-for="(item, idx) in detailsTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 160" :fixed="item.fixed ? item.fixed : ''" align="center">
-            <template #header>
-              <div class="flex-align-jus-center">
-                {{ item.name }}
-                <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>
+      <!-- 成员 -->
+      <selfInputV2 v-model="filter.keyword" label_name="成员" placeholder="请输入" @change="onChangeKeyword" />
+      <!-- 客服状态 -->
+      <selfChannel title="客服状态" type="customerStaffStatus" :reset="reset" placeholder="请选择" @channelDefine="onChangeCuStStatus" />
+      <!-- 激活状态 -->
+      <selfChannel title="激活状态" type="isActive" :reset="reset" placeholder="请选择" @channelDefine="onChangeActiveStatus" />
+      <!-- 运营人员 -->
+      <selfChannel title="运营人员" type="circleCreate" :reset="reset" placeholder="请选择" @channelDefine="onChangeOperatorId" />
+
+      <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">
+        <ux-table-column v-for="(item, idx) in detailsTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 160" :fixed="item.fixed ? item.fixed : ''" align="center">
+          <template #header>
+            <div class="flex-align-jus-center">
+              {{ item.name }}
+              <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>
-            </template>
-            <template v-slot="{ row }">
-              <span>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
-            </template>
-          </ux-table-column>
+            </div>
+          </template>
+          <template v-slot="{ row }">
+            <span>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
+          </template>
+        </ux-table-column>
 
-          <ux-table-column :width="120" fixed="right" align="center" title="操作">
-            <template v-slot="{ row }">
-              <span class="c-00B38A pointer" @click="onClickStatus(row)">客服状态</span>
-            </template>
-          </ux-table-column>
-        </ux-grid>
-        <div class="pagination" v-show="pagination.total > 0">
-          <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pagination.pages)' />
-        </div>
+        <ux-table-column :width="120" fixed="right" align="center" title="操作">
+          <template v-slot="{ row }">
+            <span class="c-00B38A pointer" @click="onClickStatus(row)">客服状态</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="pagination.total > 0">
+        <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pagination.pages)' />
       </div>
-      <!-- E 明细表 detailsTable -->
+    </div>
+    <!-- E 明细表 detailsTable -->
+
+    <!-- S 设置客服状态 -->
+    <setStatusDialog
+      :dialogVisible="setStatusDialogVisible"
+      :currentCustomer="currentCustomer"
+      @confirm="handleSetStatusConfirm"
+      @cancel="handleSetStatusCancel"
+    />
+    <!-- E 设置客服状态 -->
   </div>
 </template>
 
 <script>
 import selfChannel from '@/components/assembly/screen/channel.vue'
 import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
-import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import setStatusDialog from './setStatusDialog.vue'
 
 export default {
   components: {
     selfChannel,
     selfInputV2,
-    selfCustomerservice,
+    setStatusDialog,
   },
   data() {
     const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
@@ -107,6 +116,9 @@ export default {
         is_active: '', // 激活状态
       },
       updateTime: '', // 数据更新时间
+
+      setStatusDialogVisible: false,
+      currentCustomer: {},
     }
   },
   computed: {
@@ -171,6 +183,10 @@ export default {
           })
           this.detailsTableCol = Object.freeze(detailsTableCol)
           await this.$nextTick()
+          // mock
+          res.rst.data[0].status = 2
+          res.rst.data[1].status = 1
+          // mock
           const detailsTableList = Array.isArray(res.rst.data) ? res.rst.data : []
           this.$refs.detailsTable.reloadData(detailsTableList)
           this.pagination.total = res.rst.pageInfo.total
@@ -389,6 +405,17 @@ export default {
 
     onClickStatus(row) {
       console.log('row => ', row)
+      this.currentCustomer = {...row}
+      this.setStatusDialogVisible = true
+    },
+    handleSetStatusConfirm() {
+      this.currentCustomer = {}
+      this.setStatusDialogVisible = false
+      this.handleGetData()
+    },
+    handleSetStatusCancel() {
+      this.currentCustomer = {}
+      this.setStatusDialogVisible = false
     },
   },
 }

project/src/components/dataBoard/customerStaff/setStatusDialog.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="setStatus-dialog"
+    :title="dialogTitle"
+    width="450px"
+  >
+    <div class="form-wrap" v-loading="loading">
+      <div class="form-item">
+        <span class="lable">请选择</span>
+        <selfChannel ref="statusEl" title="" type="customerStaffStatus" placeholder="状态" :labelWidth="true" width="240px" :afferent_value="form.status" @channelDefine="onChangeStatus" />
+
+
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancel">取 消</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm" :disabled="loading">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import selfChannel from '@/components/assembly/screen/channel.vue'
+
+export default {
+  name: "setStatusDialog",
+  components: {
+    selfChannel,
+  },
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    // 当前客服信息
+    currentCustomer: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        status: '',
+      }
+    }
+  },
+  computed: {
+    // 弹框标题
+    dialogTitle() {
+      return '客服状态'
+    }
+  },
+  watch: {
+    dialogVisible(isShow) {
+      // 弹框显示 => 初始化表单数据
+      if (isShow) {
+        this.handleInitData()
+      } else {
+        this.form.status = ''
+      }
+    },
+  },
+  methods: {
+    // 获取弹框表单数据
+    async handleInitData() {
+      this.loading = false
+      const { status } = this.currentCustomer
+      this.form.status = status || ''
+      console.log('this.form.status => ', this.form.status)
+      await this.$nextTick()
+      if (this.form.status) {
+        this.$refs.statusEl && this.$refs.statusEl.init_afferent()
+      } else {
+        this.$refs.statusEl && this.$refs.statusEl.clear()
+      }
+    },
+    async handleConfirm() {
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        const url = `${this.URL.BASEURL}${this.URL.miniProManage_addSmallApp}`
+        const params = { ...this.form }
+        console.log('url => ', url)
+        console.log('params => ', params)
+        return
+
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.$emit('confirm')
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.$emit('cancel')
+    },
+    // 执行表单校验
+    handleFormValidate() {
+      return new Promise((resolve, reject) => {
+        const { status } = this.form
+        if (!status) {
+          this.$message.warning('请选择客服状态')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+    onChangeStatus(val) {
+      this.form.status = val
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.setStatus-dialog {
+  .form-wrap {
+    padding: 0 10px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 82px;
+        margin-right: 16px;
+        font-weight: 500;
+        flex-shrink: 0;
+        text-align: right;
+        em {
+          color: red;
+        }
+      }
+      .el-select {
+        width: 100%;
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -78,7 +78,7 @@ const officialAccount = () => import(/* webpackChunkName: 'officialAccount' */ '
 // 数据看板 - 充值数据
 const recharge = () => import(/* webpackChunkName: 'recharge' */ '@/components/dataBoard/recharge.vue')
 // 数据看板 - 客服数据统计
-const customerStaff = () => import(/* webpackChunkName: 'customerStaff' */ '@/components/dataBoard/customerStaff.vue')
+const customerStaff = () => import(/* webpackChunkName: 'customerStaff' */ '@/components/dataBoard/customerStaff/index.vue')
 
 // 平台账号管理
 const accountManage = () => import(/* webpackChunkName: 'accountManage' */ '@/components/manage/accountManage/accountManage.vue')