feat: 客服异常预警 - 新建&编辑预警 - 前端页面&交互逻辑

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

@@ -1,175 +0,0 @@
-<template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    :before-close="handleCancel"
-    class="bind-dialog"
-    :title="title"
-    width="450px"
-    :close-on-click-modal="false"
-  >
-    <div class="form-wrap" v-loading="loading">
-      <div class="form-item">
-        <span class="lable required">ADQ账号</span>
-        <el-select v-model="form.account_id" size="small" placeholder="请选择ADQ账号" clearable filterable multiple>
-          <el-option v-for="item in adqOptions" :key="item.account_id" :label="item.account_id" :value="item.account_id" />
-        </el-select>
-      </div>
-      <!-- <div class="form-tips">可传空，此时会将原来设置的投放账号置空</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>
-export default {
-  name: "bindAdqDialog",
-  props: {
-    // 控制弹框是否显示
-    dialogVisible: {
-      type: Boolean,
-      default: () => false
-    },
-    // 公众号信息
-    mpAccountInfo: {
-      type: Object,
-      default: () => ({})
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      adqOptions: [], // ADQ投放账号选项
-      form: {
-        app_id: '',
-        account_id: [],
-      }
-    }
-  },
-  computed: {
-    title() {
-      return `${this.mpAccountInfo.account_name ? this.mpAccountInfo.account_name + '-' : ''}绑定ADQ账号`
-    },
-  },
-  watch: {
-    dialogVisible(isShow) {
-      if (isShow) {
-        // 获取ADQ账号选项列表
-        this.handleGetAdqOptions()
-        // 获取表单数据
-        this.handleGetFormData()
-      }
-    },
-  },
-  methods: {
-    // 获取ADQ账号选项列表
-    async handleGetAdqOptions() {
-      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.dataBoardHS_adqAccountList, {
-        params: {
-          is_select: 1
-        }
-      })
-      if (res && res.errno == 0) {
-        this.adqOptions = res.rst
-      } else if (res.errno != 4002) {
-        this.$message.warning(res.err)
-      }
-    },
-    async handleConfirm() {
-      try {
-        // 表单校验
-        await this.handleFormValidate()
-        const url = `${this.URL.BASEURL}${this.URL.dataBoardHS_bindAdq}`
-        const params = {
-          app_id: this.form.app_id,
-          account_id: this.form.account_id.join(','),
-        }
-        this.loading = true
-        const { data: res = {} } = await this.$axios.post(url, 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.account_id || !this.form.account_id.length) {
-          this.$message.warning('请选择ADQ账号')
-          reject('表单校验未通过')
-        } else {
-          resolve('表单校验通过')
-        }
-      })
-    },
-    // 获取表单数据
-    handleGetFormData() {
-      const { wechat_account_id = '', account_id = '' } = this.mpAccountInfo
-      this.form.app_id = wechat_account_id || ''
-      this.form.account_id = (account_id && Array.isArray(account_id)) ? account_id : []
-    },
-    // 清空弹框表单数据
-    handleClearFormData() {
-      this.form.app_id = ''
-      this.form.account_id = []
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.bind-dialog {
-  .form-wrap {
-    padding: 0 10px;
-    .form-item {
-      display: flex;
-      align-items: center;
-      margin-top: 16px;
-      &:first-child {
-        margin-top: 0;
-      }
-      .lable {
-        width: 80px;
-        font-weight: 500;
-        flex-shrink: 0;
-
-        &.required {
-          position: relative;
-          &::before {
-            position: absolute;
-            left: -8px;
-            top: 0;
-            content: "*";
-            color: #f56c6c;
-          }
-        }
-      }
-      .el-select {
-        width: 100%;
-      }
-    }
-    .form-tips {
-      margin: 5px 0 0 80px;
-      font-size: 13px;
-      color: #999;
-    }
-  }
-  .dialog-footer {
-    text-align: center;
-  }
-}
-</style>

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

@@ -0,0 +1,358 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="warn-dialog"
+    :title="title"
+    width="560px"
+    :close-on-click-modal="false"
+  >
+    <div class="form-wrap" v-loading="loading">
+      <!-- 预警客服 -->
+      <div class="form-item">
+        <span class="lable required">预警客服:</span>
+          <customerServiceCorp
+            title=""
+            :icon_arrow_bg="false"
+            width="410px"
+            style="margin:0;"
+            :afferent_users="form.afferent_djuser_list"
+            @customerDefine="onChangeDjuserList"
+          />
+      </div>
+      <!-- 预警人员类型 -->
+      <div class="form-item">
+        <span class="lable required">预警人员:</span>
+        <el-radio-group v-model="form.type" style="margin-top: 3px;">
+          <el-radio :label="1">预警人</el-radio>
+          <el-radio :label="2">预警组</el-radio>
+        </el-radio-group>
+      </div>
+      <!-- 预警人 (渲染条件 form.type == 1) -->
+      <div v-if="form.type == 1" 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>
+      <!-- 预警组 (渲染条件 form.type === 2) -->
+      <div v-if="form.type == 2" class="form-item">
+        <span class="lable"></span>
+        <el-select v-model="form.warnGroupList" size="small" placeholder="请选择预警组" clearable filterable multiple>
+          <el-option v-for="item in warnGroupOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+      <!-- 预警规则 -->
+      <div class="form-item flex-align-start">
+        <span class="lable required">预警规则:</span>
+        <div class="rules-wrap">
+          <div v-for="(item, idx) in form.rules" :key="idx" class="rules-item">
+            <el-input v-model.trim="item.minute" size="mini" placeholder="请输入" maxlength="3" clearable />
+            <span class="text">分钟内，添加人数</span>
+            <el-select v-model="item.contrast" size="mini">
+              <el-option v-for="contrast in contrastOptions" :key="contrast.value" :label="contrast.label" :value="contrast.value" />
+            </el-select>
+            <el-input v-model.trim="item.personCount" size="mini" placeholder="请输入" maxlength="5" clearable />
+            <span class="text">人</span>
+            <i v-if="idx > 0" class="el-icon-error" @click="onClickDelRules(idx)" />
+          </div>
+          <div class="add-wrap" @click="onClickAddRules">
+            <i class="el-icon-plus" />
+            <span>添加规则</span>
+          </div>
+        </div>
+      </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 customerServiceCorp from '@/components/assembly/screen/customerServiceCorp.vue'
+
+const contrastOptions = [
+  { label: '低于', value: 1 },
+  { label: '高于', value: 2 },
+]
+
+export default {
+  name: "warnDialog",
+  components: {
+    customerServiceCorp,
+  },
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    // 规则ID
+    ruleId: {
+      type: [String, Number],
+      default: () => ''
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      contrastOptions: Object.freeze(contrastOptions),
+      warnUserOptions: [], // 预警人选项
+      warnGroupOptions: [], // 预警组选项
+      form: {
+        afferent_djuser_list: [], // 预警客服 [{ user_id: 888, corpid: 666 }]
+        djuser_list: [], // 预警客服
+        type: 1, // 预警人员类型 1预警人 2预警组
+        warnUserList: [], // 预警人
+        warnGroupList: [], // 预警组
+        rules: [ // 预警规则
+          {
+            minute: '',
+            contrast: 1,
+            personCount: '',
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.ruleId
+    },
+    title() {
+      return `${this.isEdit ? '编辑' : '新建'}预警`
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // 获取"预警人"选项
+        this.handleGetWarnUserOptions()
+        // 获取"预警组"选项
+        this.handleGetWarnGroupOptions()
+        // 获取表单数据
+        this.handleGetFormData()
+      }
+    },
+  },
+  methods: {
+    // 获取"预警人"选项列表
+    async handleGetWarnUserOptions () {
+      try {
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.warn_userList, {
+          params: {
+            sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+            page: 1,
+            page_size: 500
+          }
+        })
+        if (res && res.errno == 0) {
+          this.warnUserOptions = res.rst.data
+        } else if (res.errno != 4002) {
+          this.warnUserOptions = []
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        this.warnUserOptions = []
+        console.log('error => ', error)
+      }
+    },
+    // 获取"预警组"选项列表
+    async handleGetWarnGroupOptions () {
+      try {
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.warn_userList, {
+          params: {
+            sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+            page: 1,
+            page_size: 500
+          }
+        })
+        if (res && res.errno == 0) {
+          this.warnGroupOptions = res.rst.data
+        } else if (res.errno != 4002) {
+          this.warnGroupOptions = []
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        this.warnGroupOptions = []
+        console.log('error => ', error)
+      }
+    },
+    async handleConfirm() {
+      try {
+        // 表单校验
+        await this.handleFormValidate()
+        const url = `${this.URL.BASEURL}${this.URL.dataBoardHS_bindAdq}`
+        const params = {}
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(url, 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) => {
+        // mock
+        console.log('form => ', JSON.parse(JSON.stringify(this.form)))
+        reject('表单校验未通过')
+        return
+        // mock
+
+        if (!this.form.xxxList || !this.form.xxxList.length) {
+          this.$message.warning('请选择ADQ账号')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+    // 获取表单数据
+    handleGetFormData() {
+      this.handleClearFormData()
+      if (this.isEdit) { // 编辑 => 获取规则详情 => 回显表单数据
+        this.handleGetRuleDetail()
+      }
+    },
+    // 获取规则详情
+    handleGetRuleDetail() {
+      console.log('handleGetRuleDetail => ruleId ', this.ruleId)
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      this.form.afferent_djuser_list = []
+      this.form.djuser_list = []
+      this.form.type = 1
+      this.form.warnUserList = []
+      this.form.warnGroupList = []
+      this.form.rules = [
+        {
+          minute: '',
+          contrast: 1,
+          personCount: '',
+        }
+      ]
+    },
+    // 监听点击“添加规则”
+    onClickAddRules() {
+      this.form.rules.push({
+        minute: '',
+        contrast: 1,
+        personCount: '',
+      })
+    },
+    // 监听点击“删除规则”
+    onClickDelRules(idx) {
+      this.form.rules.splice(idx, 1)
+    },
+    // 监听“客服”
+    onChangeDjuserList(val) {
+      console.log('onChangeDjuserList => val ', val)
+      this.form.djuser_list = val
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.warn-dialog {
+  /deep/ .el-dialog__body {
+    max-height: 380px;
+    overflow-y: auto;
+  }
+  .form-wrap {
+    padding-right: 20px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      &.flex-align-start {
+        align-items: flex-start;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 80px;
+        font-weight: 500;
+        flex-shrink: 0;
+        text-align: right;
+        margin-right: 10px;
+
+        &.required {
+          &::before {
+            position: relative;
+            right: 2px;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      .el-select {
+        width: 100%;
+      }
+      .rules-wrap {
+        background-color: #F2F2F2;
+        padding: 14px;
+        flex: 1;
+        .rules-item {
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          margin-bottom: 10px;
+          .el-input {
+            width: 70px;
+            margin-right: 6px;
+            /deep/ .el-input__inner {
+              padding: 0 24px 0 8px;
+            }
+          }
+          .el-select {
+            width: 70px;
+            margin-right: 6px;
+          }
+          .text {
+            margin-right: 6px;
+            font-size: 13px;
+          }
+          .el-icon-error {
+            color: #F56C6C;
+            font-size: 14px;
+            cursor: pointer;
+          }
+        }
+        .add-wrap {
+          margin-top: 16px;
+          display: flex;
+          align-items: center;
+          color: #00B38A;
+          font-size: 13px;
+          cursor: pointer;
+          i {
+            font-weight: 600;
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

project/src/components/customerAlerts/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-loading="loading" class="customerAlerts-wrap">
     <div class="screenBox">
-      <el-button type="primary" size="mini">新建预警</el-button>
+      <el-button type="primary" size="mini" @click="onClickCreateWarnBtn">新建预警</el-button>
     </div>
     <el-table :height="height" :data="list" tooltip-effect="dark" style="width: 100%;margin-top:10px">
       <el-table-column label="预警客服" prop="name" min-width="200" align="center" fixed="left" />
@@ -14,7 +14,7 @@
             <span v-if="true" class="btn c-FF604D">禁用</span>
             <span v-else class="btn c-007AFF">启用</span>
           </template>
-          <span class="btn c-00b38a">编辑</span>
+          <span class="btn c-00b38a" @click="onClickEditWarnBtn(row.group_id)">编辑</span>
         </template>
       </el-table-column>
     </el-table>
@@ -22,12 +22,26 @@
       <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)">
       </el-pagination>
     </div>
+
+    <!-- S 新建预警/编辑预警 -->
+    <warnDialog
+      :dialogVisible="warnDialogVisible"
+      :ruleId="currentWarnRuleId"
+      @confirm="onConfirmWarnDialog"
+      @cancel="onCancelWarnDialog"
+    />
+    <!-- E 新建预警/编辑预警 -->
   </div>
 </template>
+
 <script>
+import warnDialog from './dialog/warnDialog.vue'
+
 export default {
   name: 'customerAlerts',
-  components: {},
+  components: {
+    warnDialog,
+  },
   data () {
     return {
       height: '',
@@ -42,6 +56,9 @@ export default {
         keyword: '',
       },
       list: [],
+
+      warnDialogVisible: false, // 控制是否显示“新建预警”、“编辑预警”弹框
+      currentWarnRuleId: '', // 当前预警规则id
     }
   },
   created () {
@@ -83,9 +100,32 @@ export default {
       this.pagination.page = currentPage
       this.handleGetList()
     },
-  }
+
+    // S 新建预警、编辑预警
+    // 监听点击“新建预警”
+    onClickCreateWarnBtn() {
+      this.currentWarnRuleId = ''
+      this.warnDialogVisible = true
+    },
+    // 监听点击“编辑预警”
+    onClickEditWarnBtn(id) {
+      this.currentWarnRuleId = id
+      this.warnDialogVisible = true
+    },
+    // 监听新建预警 => 确定
+    onConfirmWarnDialog() {
+      this.warnDialogVisible = false
+      this.handleGetList()
+    },
+    // 监听新建预警 => 取消
+    onCancelWarnDialog() {
+      this.warnDialogVisible = false
+    },
+    // E 新建预警、编辑预警
+  },
 }
 </script>
+
 <style lang="scss" scoped>
 .customerAlerts-wrap {
   .screenBox {
@@ -100,4 +140,4 @@ export default {
     }
   }
 }
-</style>
+</style>