Browse Source

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

zhengxy 2 years ago
parent
commit
12f36aad82

+ 5 - 1
project/src/components/assembly/screen/serviceSingle.vue

@@ -4,7 +4,7 @@
4 4
     <div :style="width?'width:'+width:''" :class="['common-screen-self-box','common-input-select',selectUser&&selectUser.user_id&&clearable?'common-input-select-hover':'']" @click="screenClick">
5 5
       <div :class="['common-screen-self-con',!selectUser||!selectUser.user_id||selectUser.user_id==''?'common-screen-self-placeholder':'']">
6 6
         <div class="common-screen-self-con-div">
7
-          <span v-if="!selectUser||!selectUser.user_id||selectUser.user_id==''">请选择</span>
7
+          <span v-if="!selectUser||!selectUser.user_id||selectUser.user_id==''">{{placeholder || '请选择'}}</span>
8 8
           <template v-else>
9 9
             <span>{{selectUser.name}}</span>
10 10
           </template>
@@ -63,6 +63,10 @@ export default {
63 63
       type: String,
64 64
       default: '所属客服'
65 65
     },
66
+    placeholder: {
67
+      type: String,
68
+      default: () => '请选择'
69
+    },
66 70
     clearable: {
67 71
       type: Boolean,
68 72
       default: true

+ 164 - 0
project/src/components/manage/memberComp/transferDialog.vue

@@ -0,0 +1,164 @@
1
+<template>
2
+  <el-dialog
3
+    :visible.sync="dialogVisible"
4
+    :before-close="handleCancel"
5
+    class="assign-dialog"
6
+    title="转移许可"
7
+    width="450px"
8
+  >
9
+    <div class="form-wrap" v-loading="loading">
10
+      将成员【{{ userInfo.name }}】转移至
11
+      <div class="form-item">
12
+        <serviceSingle
13
+          ref="serviceSingle"
14
+          title="成员"
15
+          :placeholder="transferUserPl"
16
+          :reset="resetFlag"
17
+          style="margin-left: -65px;"
18
+          @customerDefine="onChangeTransferUser"
19
+        />
20
+      </div>
21
+    </div>
22
+    <div slot="footer" class="dialog-footer">
23
+      <el-button size="mini" @click="handleCancel">取 消</el-button>
24
+      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
25
+    </div>
26
+  </el-dialog>
27
+</template>
28
+
29
+<script>
30
+import serviceSingle from '@/components/assembly/screen/serviceSingle.vue'
31
+
32
+export default {
33
+  name: "assignDialog",
34
+  components: { serviceSingle },
35
+  props: {
36
+    // 控制弹框是否显示
37
+    dialogVisible: {
38
+      type: Boolean,
39
+      default: () => false
40
+    },
41
+    // 成员信息
42
+    userInfo: {
43
+      type: Object,
44
+      default: () => ({
45
+        user_id: '',
46
+        name: '',
47
+      })
48
+    },
49
+    // 待分配许可数
50
+    waitForAssignNum: {
51
+      type: Number,
52
+      default: () => 0
53
+    },
54
+  },
55
+  data() {
56
+    return {
57
+      resetFlag: false,
58
+      loading: false,
59
+      transferUserPl: '请选择要承接许可的成员',
60
+      form: {
61
+        transferUser: '', // 转移的目标成员
62
+        user_id: '', // 当前成员
63
+      }
64
+    }
65
+  },
66
+  watch: {
67
+    dialogVisible(isShow) {
68
+      if (isShow) {
69
+        // 获取表单数据
70
+        this.handleGetFormData()
71
+      }
72
+    },
73
+  },
74
+  methods: {
75
+    // 获取弹框表单数据
76
+    handleGetFormData() {
77
+      const { user_id = '' } = this.userInfo
78
+      this.form.user_id = user_id
79
+    },
80
+    // 清空弹框表单数据
81
+    handleClearFormData() {
82
+      this.resetFlag = !this.resetFlag
83
+      this.$refs.serviceSingle.clear()
84
+      this.form.user_id = ''
85
+    },
86
+    onChangeTransferUser (val) {
87
+      console.log('onChangeTransferUser => ', val)
88
+      this.form.transferUser = val ? val.user_id : ''
89
+    },
90
+    async handleConfirm() {
91
+      try {
92
+        // 表单校验
93
+        await this.handleFormValidate()
94
+        this.$emit('confirm') // mock
95
+        return // mock
96
+        const params = { ...this.form }
97
+        this.loading = true
98
+        const { data: res = {} } = await this.$axios.post(`${this.URL.BASEURL}${this.URL.manage_bindUserAdqAccountId}`, { ...params })
99
+        if (res && res.errno == 0) {
100
+          this.$message.success('操作成功')
101
+          this.handleClearFormData()
102
+          this.$emit('confirm')
103
+        } else if (res.errno != 4002) {
104
+          this.$message.warning(res.err || '操作失败')
105
+        }
106
+      } catch (error) {
107
+        console.log('error => ', error)
108
+      } finally {
109
+        this.loading = false
110
+      }
111
+    },
112
+    handleCancel() {
113
+      this.handleClearFormData()
114
+      this.$emit('cancel')
115
+    },
116
+    // 执行表单校验
117
+    handleFormValidate() {
118
+      return new Promise((resolve, reject) => {
119
+        if (!this.form.transferUser) {
120
+          this.$message.warning(this.transferUserPl)
121
+          reject('表单校验未通过')
122
+        } else {
123
+          resolve('表单校验通过')
124
+        }
125
+      })
126
+    },
127
+  },
128
+};
129
+</script>
130
+
131
+<style lang="scss" scoped>
132
+.assign-dialog {
133
+  .form-wrap {
134
+    padding: 0 10px;
135
+    .form-item {
136
+      display: flex;
137
+      align-items: center;
138
+      margin-top: 6px;
139
+      .lable {
140
+        width: 60px;
141
+        font-weight: 500;
142
+        flex-shrink: 0;
143
+
144
+        &.required {
145
+          position: relative;
146
+          &::before {
147
+            position: absolute;
148
+            left: -8px;
149
+            top: 0;
150
+            content: "*";
151
+            color: #f56c6c;
152
+          }
153
+        }
154
+      }
155
+      .el-select {
156
+        width: 70%;
157
+      }
158
+    }
159
+  }
160
+  .dialog-footer {
161
+    text-align: right;
162
+  }
163
+}
164
+</style>

+ 27 - 0
project/src/components/manage/memberManage.vue

@@ -206,6 +206,15 @@
206 206
       @confirm="handleAssignConfirm"
207 207
     />
208 208
     <!-- E 分配许可 - 弹框 -->
209
+
210
+    <!-- S 转移许可 - 弹框 -->
211
+    <transferDialog
212
+      :dialogVisible="transferDialogVisible"
213
+      :userInfo="currentTransferInfo"
214
+      @cancel="handleTransferCancel"
215
+      @confirm="handleTransferConfirm"
216
+    />
217
+    <!-- E 转移许可 - 弹框 -->
209 218
   </div>
210 219
 </template>
211 220
 
@@ -216,6 +225,7 @@ import memberInfoBind from './memberComp/memberInfoBind.vue'
216 225
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
217 226
 import batchAssign from './memberComp/batchAssign.vue'
218 227
 import assignDialog from './memberComp/assignDialog.vue'
228
+import transferDialog from './memberComp/transferDialog.vue'
219 229
 import { orderTypeOptions } from '@/assets/js/staticTypes'
220 230
 
221 231
 const orderTypeDesc = new Map([
@@ -238,6 +248,7 @@ export default {
238 248
     selfCustomerservice,
239 249
     batchAssign,
240 250
     assignDialog,
251
+    transferDialog,
241 252
   },
242 253
   data () {
243 254
     return {
@@ -274,6 +285,8 @@ export default {
274 285
       waitForAssignNum: 0, // 待分配许可数
275 286
       assignDialogVisible: false, // 控制“分配许可”弹框显示
276 287
       currentAssignInfo: {}, // 当前需要分配许可的成员信息
288
+      transferDialogVisible: false, // 控制“转移许可”弹框显示
289
+      currentTransferInfo: {}, // 当前需要转移许可的成员信息
277 290
 
278 291
     }
279 292
   },
@@ -481,10 +494,24 @@ export default {
481 494
       this.init(undefined, this.keyword)
482 495
       this.handleGetWaitForAssignNum()
483 496
     },
497
+
484 498
     // 监听点击“转移许可”
485 499
     onClickTransfer(current) {
486 500
       console.log('onClickTransfer => ', JSON.parse(JSON.stringify(current)))
501
+      this.currentTransferInfo = {...current}
502
+      this.transferDialogVisible = true
503
+    },
504
+    // 执行转移许可 => 取消
505
+    handleTransferCancel() {
506
+      this.currentTransferInfo = {}
507
+      this.transferDialogVisible = false
487 508
     },
509
+    // 执行转移许可 => 确定
510
+    handleTransferConfirm() {
511
+      this.transferDialogVisible = false
512
+      this.init(undefined, this.keyword)
513
+    },
514
+
488 515
     // 监听“批量分配许可”变化
489 516
     onChangeBatchAssign(val) {
490 517
       console.log('onChangeBatchAssign => ', val)