feat: 客服许可 - 转移许可 - 前端页面

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

     <div :style="width?'width:'+width:''" :class="['common-screen-self-box','common-input-select',selectUser&&selectUser.user_id&&clearable?'common-input-select-hover':'']" @click="screenClick">
       <div :class="['common-screen-self-con',!selectUser||!selectUser.user_id||selectUser.user_id==''?'common-screen-self-placeholder':'']">
         <div class="common-screen-self-con-div">
-          <span v-if="!selectUser||!selectUser.user_id||selectUser.user_id==''">请选择</span>
+          <span v-if="!selectUser||!selectUser.user_id||selectUser.user_id==''">{{placeholder || '请选择'}}</span>
           <template v-else>
             <span>{{selectUser.name}}</span>
           </template>
       type: String,
       default: '所属客服'
     },
+    placeholder: {
+      type: String,
+      default: () => '请选择'
+    },
     clearable: {
       type: Boolean,
       default: true

project/src/components/manage/memberComp/transferDialog.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="assign-dialog"
+    title="转移许可"
+    width="450px"
+  >
+    <div class="form-wrap" v-loading="loading">
+      将成员【{{ userInfo.name }}】转移至
+      <div class="form-item">
+        <serviceSingle
+          ref="serviceSingle"
+          title="成员"
+          :placeholder="transferUserPl"
+          :reset="resetFlag"
+          style="margin-left: -65px;"
+          @customerDefine="onChangeTransferUser"
+        />
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancel">取 消</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import serviceSingle from '@/components/assembly/screen/serviceSingle.vue'
+
+export default {
+  name: "assignDialog",
+  components: { serviceSingle },
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    // 成员信息
+    userInfo: {
+      type: Object,
+      default: () => ({
+        user_id: '',
+        name: '',
+      })
+    },
+    // 待分配许可数
+    waitForAssignNum: {
+      type: Number,
+      default: () => 0
+    },
+  },
+  data() {
+    return {
+      resetFlag: false,
+      loading: false,
+      transferUserPl: '请选择要承接许可的成员',
+      form: {
+        transferUser: '', // 转移的目标成员
+        user_id: '', // 当前成员
+      }
+    }
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // 获取表单数据
+        this.handleGetFormData()
+      }
+    },
+  },
+  methods: {
+    // 获取弹框表单数据
+    handleGetFormData() {
+      const { user_id = '' } = this.userInfo
+      this.form.user_id = user_id
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      this.resetFlag = !this.resetFlag
+      this.$refs.serviceSingle.clear()
+      this.form.user_id = ''
+    },
+    onChangeTransferUser (val) {
+      console.log('onChangeTransferUser => ', val)
+      this.form.transferUser = val ? val.user_id : ''
+    },
+    async handleConfirm() {
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        this.$emit('confirm') // mock
+        return // mock
+        const params = { ...this.form }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(`${this.URL.BASEURL}${this.URL.manage_bindUserAdqAccountId}`, { ...params })
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.handleClearFormData()
+          this.$emit('confirm')
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.handleClearFormData()
+      this.$emit('cancel')
+    },
+    // 执行表单校验
+    handleFormValidate() {
+      return new Promise((resolve, reject) => {
+        if (!this.form.transferUser) {
+          this.$message.warning(this.transferUserPl)
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.assign-dialog {
+  .form-wrap {
+    padding: 0 10px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 6px;
+      .lable {
+        width: 60px;
+        font-weight: 500;
+        flex-shrink: 0;
+
+        &.required {
+          position: relative;
+          &::before {
+            position: absolute;
+            left: -8px;
+            top: 0;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      .el-select {
+        width: 70%;
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: right;
+  }
+}
+</style>

project/src/components/manage/memberManage.vue

       @confirm="handleAssignConfirm"
     />
     <!-- E 分配许可 - 弹框 -->
+
+    <!-- S 转移许可 - 弹框 -->
+    <transferDialog
+      :dialogVisible="transferDialogVisible"
+      :userInfo="currentTransferInfo"
+      @cancel="handleTransferCancel"
+      @confirm="handleTransferConfirm"
+    />
+    <!-- E 转移许可 - 弹框 -->
   </div>
 </template>
 
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
 import batchAssign from './memberComp/batchAssign.vue'
 import assignDialog from './memberComp/assignDialog.vue'
+import transferDialog from './memberComp/transferDialog.vue'
 import { orderTypeOptions } from '@/assets/js/staticTypes'
 
 const orderTypeDesc = new Map([
     selfCustomerservice,
     batchAssign,
     assignDialog,
+    transferDialog,
   },
   data () {
     return {
       waitForAssignNum: 0, // 待分配许可数
       assignDialogVisible: false, // 控制“分配许可”弹框显示
       currentAssignInfo: {}, // 当前需要分配许可的成员信息
+      transferDialogVisible: false, // 控制“转移许可”弹框显示
+      currentTransferInfo: {}, // 当前需要转移许可的成员信息
 
     }
   },
       this.init(undefined, this.keyword)
       this.handleGetWaitForAssignNum()
     },
+
     // 监听点击“转移许可”
     onClickTransfer(current) {
       console.log('onClickTransfer => ', JSON.parse(JSON.stringify(current)))
+      this.currentTransferInfo = {...current}
+      this.transferDialogVisible = true
+    },
+    // 执行转移许可 => 取消
+    handleTransferCancel() {
+      this.currentTransferInfo = {}
+      this.transferDialogVisible = false
     },
+    // 执行转移许可 => 确定
+    handleTransferConfirm() {
+      this.transferDialogVisible = false
+      this.init(undefined, this.keyword)
+    },
+
     // 监听“批量分配许可”变化
     onChangeBatchAssign(val) {
       console.log('onChangeBatchAssign => ', val)