feat: 客服许可续期任务

project/src/components/license/createTaskDrawer.vue

@@ -62,14 +62,16 @@
                 </div>
               </div>
               <div class="user-wrap" v-if="account.user_list && account.user_list.length">
-                <el-tag
-                  v-for="(user, userIdx) in account.user_list"
-                  class="user-item-wrap"
-                  :key="user.user_id"
-                  :closable="!isDetail"
-                  @close="onCloseUserTag(userIdx, accountIdx)">
-                  {{ user.name }}
-                </el-tag>
+                <span v-for="(user, userIdx) in account.user_list" class="user-item-wrap">
+                  <el-tag
+                    :key="user.user_id"
+                    :type="(isDetail && handleGetUserTagType(user.status).type) || ''"
+                    :closable="!isDetail"
+                    @close="onCloseUserTag(userIdx, accountIdx)">
+                    {{ user.name }}
+                    <span v-if="isDetail">({{ handleGetUserTagType(user.status).desc }})</span>
+                  </el-tag>
+                </span>
               </div>
             </div>
           </div>
@@ -179,12 +181,22 @@ export default {
           await this.$nextTick()
           this.onChangeUserIdRes(account_list[aIdx].user_id_res, a.corpid, aIdx)
         })
+        this.handleGetUserDetailByReslist(list)
       }
     },
+    async handleGetUserDetailByReslist(list) {
+      await this.$nextTick()
+      this.form.account_list.forEach(corp => {
+        corp.user_list.forEach(user => {
+          const crtUser = list.find(l => l.user_id === user.user_id)
+          this.$set(user, 'status', crtUser.status)
+        })
+      });
+    },
     async handleGetAllList () {
       const url = `${this.URL.BASEURL}${this.URL.warn_djuserList}`
       const params = {
-        is_active: 1,
+        is_active: this.isDetail ? '' : 1,
         sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
       }
       const { data: res = {} } = await this.$axios.get(url, { params })
@@ -220,17 +232,29 @@ export default {
       this.form.account_list[accountIdx].user_id_res = user_id_res
       this.form.account_list[accountIdx].user_list = this.handleGetUserListByUseridres(user_id_res, corpid)
     },
+    handleGetUserTagType(status) {
+      const statusTypeMap = new Map([
+        [-1, {type: 'danger', desc: '续期失败'}],
+        [0, {type: 'warning', desc: '待支付'}],
+        [1, {type: '', desc: '已支付'}],
+        [2, {type: 'info', desc: '已取消'}],
+      ])
+      return statusTypeMap.get(status) || { type: '', desc: '' }
+    },
     onCloseUserTag(userIdx, accountIdx) {
       this.form.account_list[accountIdx].user_list.splice(userIdx, 1)
       this.form.account_list[accountIdx].user_id_res = this.form.account_list[accountIdx].user_list.map(user => user.user_id)
     },
     async onClickDeleteCorp(idx) {
       try {
-        await this.$confirm('确定清空当前已选的客服账号吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
+        const isSelected = this.form.account_list[idx].user_id_res.length
+        if (isSelected) {
+          await this.$confirm('确定清空当前已选的客服账号吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+        }
         this.form.account_list.splice(idx, 1)
         this.handleInitCorpOptionsStatus()
       } catch (error) {
@@ -404,8 +428,20 @@ export default {
             background-color: rgb(247, 247, 247);
             margin-top: 10px;
             padding: 10px 10px 0 10px;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
             .user-item-wrap {
-              margin: 0 10px 10px 0;
+              position: relative;
+              margin: 0 14px 10px 0;
+              .err-icon {
+                position: absolute;
+                top: -5px;
+                right: -5px;
+                color: #c1c1c1;
+                font-size: 15px;
+                font-weight: 500;
+              }
             }
           }
         }

project/src/components/license/errListDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="errlist-dialog"
+    :title="title"
+    width="550px"
+    :close-on-click-modal="false"
+  >
+    <div class="content-wrap" v-loading="loading">
+      <el-table max-height="300" :data="list" tooltip-effect="dark" style="width: 100%;">
+        <el-table-column label="企微主体" prop="corp_name" min-width="150" align="center" show-overflow-tooltip fixed="left" />
+        <el-table-column label="关闭失败原因" prop="errmsg" min-width="300" align="center" show-overflow-tooltip />
+      </el-table>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" type="primary" @click="handleCancel">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    list: {
+      type: [],
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  computed: {
+    title() {
+      return ``
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // do sth.
+      }
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit('close')
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      // this.form.app_id = ''
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.errlist-dialog {
+  .content-wrap {
+    min-height: 150px;
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

project/src/components/license/index.vue

@@ -52,6 +52,14 @@
       @cancel="onCancelCreateTask"
     />
     <!-- E 创建续期任务 -->
+
+    <!-- S 取消失败信息 -->
+    <errListDialog
+      :dialogVisible="errListDialogVisible"
+      :list="currentErrList"
+      @close="onCloseErrList"
+    />
+    <!-- E 取消失败信息 -->
   </div>
 </template>
 
@@ -59,6 +67,7 @@
 import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
 import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
 import createTaskDrawer from './createTaskDrawer.vue'
+import errListDialog from './errListDialog.vue'
 import { licenseTaskStatusMap, licenseTaskStatusCode } from '@/assets/js/staticTypes'
 
 export default {
@@ -67,6 +76,7 @@ export default {
     selfChannelV2,
     selfInputV2,
     createTaskDrawer,
+    errListDialog,
   },
   data () {
     return {
@@ -88,6 +98,9 @@ export default {
 
       createTaskDrawerVisible: false,
       currentTaskId: '',
+
+      errListDialogVisible: false,
+      currentErrList: [],
     }
   },
   created () {
@@ -165,6 +178,8 @@ export default {
         const { data: res = {} } = await this.$axios.post(url, params)
         if (res && res.errno == 0) {
           this.$message.success('操作成功')
+        } else if (res.errno == 2708 && Array.isArray(res.rst) && res.rst.length) {
+          this.handleShowErrList(res.rst)
         } else if (res.errno != 4002) {
           this.$message.warning(res.err)
         }
@@ -179,6 +194,7 @@ export default {
       const allowedStatus = [licenseTaskStatusCode.NOT_EXECUTED, licenseTaskStatusCode.EXECUTED]
       return allowedStatus.includes(status)
     },
+
     // 监听点击“客服数量”
     onClickUserNum(row) {
       this.currentTaskId = row.rule_id
@@ -197,6 +213,15 @@ export default {
     onCancelCreateTask() {
       this.createTaskDrawerVisible = false
     },
+
+    handleShowErrList(list) {
+      this.currentErrList = [...list]
+      this.errListDialogVisible = true
+    },
+    onCloseErrList() {
+      this.errListDialogVisible = false
+      this.currentErrList = []
+    },
   },
 }
 </script>