feat: 客服异常预警 - 表单校验逻辑

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

       <!-- 预警人员类型 -->
       <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 v-model="form.notice_type" style="margin-top: 3px;">
+          <el-radio :label="noticeTypes.USER">预警人</el-radio>
+          <el-radio :label="noticeTypes.GROUP">预警组</el-radio>
         </el-radio-group>
       </div>
-      <!-- 预警人 (渲染条件 form.type == 1) -->
-      <div v-if="form.type == 1" class="form-item">
+      <!-- 预警人 -->
+      <div v-if="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>
-      <!-- 预警组 (渲染条件 form.type === 2) -->
-      <div v-if="form.type == 2" class="form-item">
+      <!-- 预警组 -->
+      <div v-if="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-option v-for="item in warnGroupOptions" :key="item.id" :label="item.name" :value="item.id" />
         <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 />
+            <el-input v-model.trim="item.minute" size="mini" placeholder="请输入" maxlength="3" clearable @input="onInputMinute($event, idx)" @change="onChangeMinute($event, idx)" />
             <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 />
+            <el-input v-model.trim="item.personCount" size="mini" placeholder="请输入" maxlength="5" clearable @input="onInputPersonCount($event, idx)" @change="onChangePersonCount($event, idx)" />
             <span class="text">人</span>
             <i v-if="idx > 0" class="el-icon-error" @click="onClickDelRules(idx)" />
           </div>
 
 <script>
 import customerServiceCorp from '@/components/assembly/screen/customerServiceCorp.vue'
+import { getIntegerNumber } from '@/assets/js/common'
 
 const contrastOptions = [
   { label: '低于', value: 1 },
   { label: '高于', value: 2 },
 ]
 
+const noticeTypes = { // 预警类型
+  'USER': 1, // 预警人
+  'GROUP': 2, // 预警组
+}
+
 export default {
   name: "warnDialog",
   components: {
     return {
       loading: false,
       contrastOptions: Object.freeze(contrastOptions),
+      noticeTypes: Object.freeze(noticeTypes),
       warnUserOptions: [], // 预警人选项
       warnGroupOptions: [], // 预警组选项
       form: {
         afferent_djuser_list: [], // 预警客服 [{ user_id: 888, corpid: 666 }]
         djuser_list: [], // 预警客服
-        type: 1, // 预警人员类型 1预警人 2预警组
+        notice_type: noticeTypes.USER, // 预警人员类型 1预警人 2预警组
         warnUserList: [], // 预警人
         warnGroupList: [], // 预警组
         rules: [ // 预警规则
     },
     async handleConfirm() {
       try {
+        console.log('form => ', JSON.parse(JSON.stringify(this.form)))
         // 表单校验
         await this.handleFormValidate()
+        console.log('通过！')
+        return // mock
         const url = `${this.URL.BASEURL}${this.URL.dataBoardHS_bindAdq}`
         const params = {}
         this.loading = true
     // 执行表单校验
     handleFormValidate() {
       return new Promise((resolve, reject) => {
-        // mock
-        console.log('form => ', JSON.parse(JSON.stringify(this.form)))
-        reject('表单校验未通过')
-        return
-        // mock
+        const { noticeTypes, form: { djuser_list, notice_type, warnUserList, warnGroupList, rules } } = this
+        const isHasNullRules = rules.some(rule => !rule.minute || !rule.personCount)
 
-        if (!this.form.xxxList || !this.form.xxxList.length) {
-          this.$message.warning('请选择ADQ账号')
+        if (!djuser_list || !djuser_list.length) {
+          this.$message.warning('请选择预警客服')
+          reject('表单校验未通过')
+        } else if ((notice_type == noticeTypes.USER) && !warnUserList.length) {
+          this.$message.warning('请选择预警人')
+          reject('表单校验未通过')
+        } else if ((notice_type == noticeTypes.GROUP) && !warnGroupList.length) {
+          this.$message.warning('请选择预警组')
+          reject('表单校验未通过')
+        } else if (isHasNullRules) {
+          this.$message.warning('请完善"预警规则"')
           reject('表单校验未通过')
         } else {
           resolve('表单校验通过')
     handleClearFormData() {
       this.form.afferent_djuser_list = []
       this.form.djuser_list = []
-      this.form.type = 1
+      this.form.notice_type = noticeTypes.USER
       this.form.warnUserList = []
       this.form.warnGroupList = []
       this.form.rules = [
         }
       ]
     },
+    // 监听输入"规则 - 分钟"
+    onInputMinute(inputVal, idx) {
+      this.form.rules[idx].minute = getIntegerNumber(inputVal)
+    },
+    onChangeMinute(inputVal, idx) {
+      if (inputVal !== '' && Number(inputVal) === 0) {
+        this.form.rules[idx].minute = ''
+        this.$message.warning('分钟数不能为0')
+      }
+    },
+    // 监听输入"规则 - 人数"
+    onInputPersonCount(inputVal, idx) {
+      this.form.rules[idx].personCount = getIntegerNumber(inputVal)
+    },
+    onChangePersonCount(inputVal, idx) {
+      if (inputVal !== '' && Number(inputVal) === 0) {
+        this.form.rules[idx].personCount = ''
+        this.$message.warning('人数不能为0')
+      }
+    },
     // 监听点击“添加规则”
     onClickAddRules() {
       this.form.rules.push({