feat: 客服异常预警 - 预警规则 - 详情&编辑

project/src/assets/config/interface_api.js

@@ -364,6 +364,7 @@ var api = {
   customerAlerts_setConf: "/api/abnormalAccount/setConf", // 客服异常预警 - 设置预警规则
   customerAlerts_confList: "/api/abnormalAccount/confList", // 客服异常预警 - 列表
   customerAlerts_updateConfStatus: "/api/abnormalAccount/updateConfStatus", // 客服异常预警 - 启用/禁用
+  customerAlerts_confDetail: "/api/abnormalAccount/confDetail", // 客服异常预警 - 规则详情
 
 };
 

project/src/components/customerAlerts/dialog/warnDialog.vue

@@ -29,16 +29,16 @@
         </el-radio-group>
       </div>
       <!-- 预警人 -->
-      <div v-if="form.notice_type == noticeTypes.USER" class="form-item">
+      <div v-show="form.notice_type == noticeTypes.USER" class="form-item">
         <span class="lable"></span>
         <el-select v-model="form.warnUserList" size="small" placeholder="请选择预警人" clearable filterable multiple>
           <el-option v-for="item in warnUserOptions" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </div>
       <!-- 预警组 -->
-      <div v-if="form.notice_type == noticeTypes.GROUP" class="form-item">
+      <div v-show="form.notice_type == noticeTypes.GROUP" class="form-item">
         <span class="lable"></span>
-        <el-select v-model="form.warnGroupList" size="small" placeholder="请选择预警组" clearable filterable multiple>
+        <el-select v-model="form.warnGroup" size="small" placeholder="请选择预警组" clearable filterable>
           <el-option v-for="item in warnGroupOptions" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </div>
@@ -76,8 +76,8 @@
       </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>
+      <el-button size="mini" @click="handleCancel" :disabled="loading">取 消</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm" :disabled="loading">确 定</el-button>
     </div>
   </el-dialog>
 </template>
@@ -99,7 +99,7 @@ export default {
       default: () => false
     },
     // 规则ID
-    ruleId: {
+    confId: {
       type: [String, Number],
       default: () => ''
     },
@@ -117,7 +117,7 @@ export default {
         monitor_user_list: [], // 预警客服
         notice_type: noticeTypes.USER, // 预警人员类型 1预警人 2预警组
         warnUserList: [], // 预警人
-        warnGroupList: [], // 预警组
+        warnGroup: '', // 预警组
         rules: [ // 预警规则
           {
             minute: '',
@@ -130,7 +130,7 @@ export default {
   },
   computed: {
     isEdit() {
-      return !!this.ruleId
+      return !!this.confId
     },
     title() {
       return `${this.isEdit ? '编辑' : '新建'}预警`
@@ -190,31 +190,13 @@ export default {
         console.log('error => ', error)
       }
     },
-    handleGetParams() {
-      const params = {
-        monitor_user_list: JSON.stringify(this.form.monitor_user_list),
-        notice_type: this.form.notice_type,
-        sys_group_id: this.sys_group_id,
-        content: JSON.stringify(this.form.rules),
-        conf_id: this.isEdit ? this.ruleId : '',
-      }
-
-      if (this.form.notice_type == noticeTypes.USER) { // 收集“预警人”参数
-        params.notice_list = this.form.warnUserList.join(',')
-      } else if (this.form.notice_type == noticeTypes.GROUP) { // 收集“预警组”参数
-        params.notice_list = this.form.warnGroupList.join(',')
-      }
-
-      return {...params}
-    },
+    // 确定
     async handleConfirm() {
       try {
-        console.log('form => ', JSON.parse(JSON.stringify(this.form)))
         // 表单校验
         await this.handleFormValidate()
         const url = `${this.URL.BASEURL}${this.URL.customerAlerts_setConf}`
         const params = this.handleGetParams()
-        console.log('params => ', JSON.parse(JSON.stringify(params)))
         this.loading = true
         const { data: res = {} } = await this.$axios.post(url, params)
         if (res && res.errno == 0) {
@@ -230,6 +212,7 @@ export default {
         this.loading = false
       }
     },
+    // 取消
     handleCancel() {
       this.handleClearFormData()
       this.$emit('cancel')
@@ -237,7 +220,7 @@ export default {
     // 执行表单校验
     handleFormValidate() {
       return new Promise((resolve, reject) => {
-        const { monitor_user_list, notice_type, warnUserList, warnGroupList, rules } = this.form
+        const { monitor_user_list, notice_type, warnUserList, warnGroup, rules } = this.form
         const isHasNullRules = rules.some(rule => !rule.minute || !rule.num)
 
         if (!monitor_user_list || !monitor_user_list.length) {
@@ -246,7 +229,7 @@ export default {
         } else if ((notice_type == noticeTypes.USER) && !warnUserList.length) {
           this.$message.warning('请选择预警人')
           reject('表单校验未通过')
-        } else if ((notice_type == noticeTypes.GROUP) && !warnGroupList.length) {
+        } else if ((notice_type == noticeTypes.GROUP) && !warnGroup) {
           this.$message.warning('请选择预警组')
           reject('表单校验未通过')
         } else if (isHasNullRules) {
@@ -257,6 +240,24 @@ export default {
         }
       })
     },
+    // 整理请求参数
+    handleGetParams() {
+      const params = {
+        monitor_user_list: JSON.stringify(this.form.monitor_user_list),
+        notice_type: this.form.notice_type,
+        sys_group_id: this.sys_group_id,
+        content: JSON.stringify(this.form.rules),
+        conf_id: this.isEdit ? this.confId : '',
+      }
+
+      if (this.form.notice_type == noticeTypes.USER) { // 收集“预警人”参数
+        params.notice_list = this.form.warnUserList.join(',')
+      } else if (this.form.notice_type == noticeTypes.GROUP) { // 收集“预警组”参数
+        params.notice_list = String(this.form.warnGroup)
+      }
+
+      return {...params}
+    },
     // 获取表单数据
     handleGetFormData() {
       this.handleClearFormData()
@@ -265,8 +266,39 @@ export default {
       }
     },
     // 获取规则详情
-    handleGetRuleDetail() {
-      console.log('handleGetRuleDetail => ruleId ', this.ruleId)
+    async handleGetRuleDetail() {
+      try {
+        const url = `${this.URL.BASEURL}${this.URL.customerAlerts_confDetail}`
+        const params = {
+          sys_group_id: this.sys_group_id,
+          conf_id: this.confId,
+        }
+        this.loading = true
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0) {
+          const detailInfo = res.rst
+
+          if (detailInfo.monitor_user_list && detailInfo.monitor_user_list.length) {
+            this.form.afferent_djuser_list = detailInfo.monitor_user_list.map(({ user_id, corpid }) => ({ user_id, corpid }))
+            this.form.monitor_user_list = [...this.form.afferent_djuser_list]
+          }
+
+          this.form.notice_type = Number(detailInfo.notice_type) // 预警人员类型
+          if (this.form.notice_type == noticeTypes.USER) { // 预警人回显 多选
+            this.form.warnUserList = detailInfo.notice_list.map(({ id }) => id)
+          } else if (this.form.notice_type == noticeTypes.GROUP) { // 预警组回显 单选 取第一项id
+            this.form.warnGroup = detailInfo.notice_list[0] ? detailInfo.notice_list[0].id : ''
+          }
+
+          this.form.rules = [...detailInfo.content]
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
     },
     // 清空弹框表单数据
     handleClearFormData() {
@@ -274,7 +306,7 @@ export default {
       this.form.monitor_user_list = []
       this.form.notice_type = noticeTypes.USER
       this.form.warnUserList = []
-      this.form.warnGroupList = []
+      this.form.warnGroup = ''
       this.form.rules = [
         {
           minute: '',

project/src/components/customerAlerts/index.vue

@@ -48,7 +48,7 @@
             <span v-if="row.status == statusTypes.ENABLE" class="btn c-FF604D" @click="onClickSetStatus({ conf_id: row.conf_id, status: statusTypes.DISABLE })">禁用</span>
             <span v-else-if="row.status == statusTypes.DISABLE" class="btn c-007AFF" @click="onClickSetStatus({ conf_id: row.conf_id, status: statusTypes.ENABLE })">启用</span>
           </template>
-          <span class="btn c-00b38a" @click="onClickEditWarnBtn(row.group_id)">编辑</span>
+          <span class="btn c-00b38a" @click="onClickEditWarnBtn(row.conf_id)">编辑</span>
         </template>
       </el-table-column>
     </el-table>
@@ -60,7 +60,7 @@
     <!-- S 新建预警/编辑预警 -->
     <warnDialog
       :dialogVisible="warnDialogVisible"
-      :ruleId="currentWarnRuleId"
+      :confId="currentWarnConfId"
       @confirm="onConfirmWarnDialog"
       @cancel="onCancelWarnDialog"
     />
@@ -96,7 +96,7 @@ export default {
       list: [],
 
       warnDialogVisible: false, // 控制是否显示“新建预警”、“编辑预警”弹框
-      currentWarnRuleId: '', // 当前预警规则id
+      currentWarnConfId: '', // 当前预警规则id
     }
   },
   created () {
@@ -178,12 +178,12 @@ export default {
     // S 新建预警、编辑预警
     // 监听点击“新建预警”
     onClickCreateWarnBtn() {
-      this.currentWarnRuleId = ''
+      this.currentWarnConfId = ''
       this.warnDialogVisible = true
     },
     // 监听点击“编辑预警”
     onClickEditWarnBtn(id) {
-      this.currentWarnRuleId = id
+      this.currentWarnConfId = id
       this.warnDialogVisible = true
     },
     // 监听新建预警 => 确定