修改监听预警字段防止第二次监听为空

src/views/flowPool/add.vue

@@ -160,7 +160,7 @@ onMounted(()=>{
 <template>
   <a-modal :render-to-body="false"
            :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
-           v-model:visible="modelValue" @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
+           v-model:visible="modelValue" @cancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
     <a-tabs v-model:active-key="activeKey">
       <a-tab-pane key="1" :title="$t('flowPool.infoTabs')">
         <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit"

src/views/flowPool/forewarning.vue

@@ -1,9 +1,9 @@
 <script setup>
-import {ref, onMounted, toRefs, toRef, watch} from 'vue';
-import {Message} from "@arco-design/web-vue";
-import {Getdictionary} from '@/mixins/index.js'
-import {createWarning, updateWarning} from '@/api/path/flowPool.api.js'
-import {value} from "lodash/seq.js";
+import { ref, onMounted, toRefs, toRef, watch, watchEffect } from 'vue';
+import { Message } from "@arco-design/web-vue";
+import { Getdictionary } from '@/mixins/index.js'
+import { createWarning, updateWarning } from '@/api/path/flowPool.api.js'
+import { value } from "lodash/seq.js";
 
 const props = defineProps({
   modelValue: {
@@ -46,19 +46,19 @@ const state = ref({
   earlyList: []
 })
 
-const {formWarning, formRef, earlyList} = toRefs(state.value)
+const { formWarning, formRef, earlyList } = toRefs(state.value)
 
 const rules = {
-  clientPooPc: [{required: true, trigger: 'change',}],
-  clientPooPcStop: [{required: true, trigger: 'change',}],
-  clientPooPcStopNetwork: [{required: true, trigger: 'change',}],
-  clientNotifyNumber: [{required: true, trigger: 'change',}],
-  clientSingleCardWarn: [{required: true, trigger: 'change',}],
-  clientSingleCardWarnStop: [{required: true, trigger: 'change',}],
-  clientSingleCardWarnStopNetwork: [{required: true, trigger: 'change',}],
-  manageWarn: [{required: true, trigger: 'change',}],
-  manageWarnSwitchStop: [{required: true, trigger: 'change',}],
-  manageWarnStopNetwork: [{required: true, trigger: 'change',}],
+  clientPooPc: [{ required: true, trigger: 'change', }],
+  clientPooPcStop: [{ required: true, trigger: 'change', }],
+  clientPooPcStopNetwork: [{ required: true, trigger: 'change', }],
+  clientNotifyNumber: [{ required: true, trigger: 'change', }],
+  clientSingleCardWarn: [{ required: true, trigger: 'change', }],
+  clientSingleCardWarnStop: [{ required: true, trigger: 'change', }],
+  clientSingleCardWarnStopNetwork: [{ required: true, trigger: 'change', }],
+  manageWarn: [{ required: true, trigger: 'change', }],
+  manageWarnSwitchStop: [{ required: true, trigger: 'change', }],
+  manageWarnStopNetwork: [{ required: true, trigger: 'change', }],
 };
 
 // 取消
@@ -86,9 +86,10 @@ const resetForm = () => {
     "manageWarnStopNetwork": "", // 管理端-预警设置:达量断网
     "manageWarnStopNetworkSwitch": false // 管理端-预警设置:达量断网开关
   }
+  FormDataList.value = {}
 }
 
-const handleSubmit = ({values, error}) => {
+const handleSubmit = ({ values, error }) => {
   formRef.value.validate(async (errors) => {
     if (!errors) {
       Object.keys(formWarning.value).forEach(key => {
@@ -96,7 +97,6 @@ const handleSubmit = ({values, error}) => {
           formWarning.value[key] = formWarning.value[key] ? "1" : "2";
         }
       });
-      console.log(formWarning.value)
       formWarning.value.clientPooPc = Number(formWarning.value.clientPooPc)
       formWarning.value.clientNotifyNumber = Number(formWarning.value.clientNotifyNumber)
       formWarning.value.manageWarn = Number(formWarning.value.manageWarn)
@@ -119,25 +119,25 @@ const handleDictValue = async () => {
   earlyList.value = await Getdictionary('forewarning')
 }
 
-watch(() => props.FormDataList, val => {
-  if (!val.id) return
-  formWarning.value.userId = val.userId
-  formWarning.value.poolId = val.id
-  if (val.alert.id !== '') {
-    delete formWarning.value.poolId
+watch(() => FormDataList.value, val => {
+  if (!val.id) return;
 
-    Object.keys(formWarning.value).forEach(key=>{
-      if(typeof formWarning.value[key] === 'boolean'){
-        formWarning.value[key] = val.alert[key]==1
-      }else{
-        formWarning.value[key] = val.alert[key]
+  formWarning.value.userId = val.userId;
+  formWarning.value.poolId = val.id;
+
+  if (val.alert && val.alert.id !== '') {
+    Object.keys(formWarning.value).forEach(key => {
+      if (typeof formWarning.value[key] === 'boolean') {
+        formWarning.value[key] = val.alert[key] == 1;
+      } else {
+        formWarning.value[key] = val.alert[key];
       }
-    })
-    formWarning.value.id = val.id
+    });
     formWarning.value.clientSingleCardWarn = Number(formWarning.value.clientSingleCardWarn)
   }
-  console.log(formWarning.value)
-}, {immediate: true})
+
+})
+
 
 onMounted(() => {
   handleDictValue()
@@ -145,8 +145,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal title="预警池"
-           v-model:visible="modelValue" @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
+  <a-modal title="预警池" v-model:visible="modelValue" @cancel="resetForm" centered :maskClosable="false" :footer="null"
+    width="55%">
     <a-tabs>
       <a-tab-pane key="1" :title="$t('flowPool.warnTabs')">
         <a-form :model="formWarning" direction="inline" ref="formRef" :rules="rules">
@@ -155,8 +155,8 @@ onMounted(() => {
             客户端·池预警设置
           </div>
           <a-form-item field="clientPooPc" tooltip="请输入" label="总用量占比">
-            <a-input-number v-model="formWarning.clientPooPc" :style="{ width: '320px' }"
-                            placeholder="请输入" allow-clear hide-button>
+            <a-input-number v-model="formWarning.clientPooPc" :style="{ width: '320px' }" placeholder="请输入" allow-clear
+              hide-button>
               <template #suffix>
                 %
               </template>
@@ -164,24 +164,21 @@ onMounted(() => {
             <a-checkbox v-model="formWarning.clientPooPcWarnSwitch">达量预警</a-checkbox>
           </a-form-item>
           <a-form-item field="clientPooPcStop" label="达量停机">
-            <a-select v-model="formWarning.clientPooPcStop" placeholder="请选择" :style="{ width: '320px' }"
-                      allow-clear>
-              <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
-                        :label="item.label"/>
+            <a-select v-model="formWarning.clientPooPcStop" placeholder="请选择" :style="{ width: '320px' }" allow-clear>
+              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
             </a-select>
             <a-checkbox v-model="formWarning.clientPooPcStopSwitch">达量停机</a-checkbox>
           </a-form-item>
           <a-form-item field="clientArriveStopNetwork" label="达量断网">
-            <a-select v-model="formWarning.clientPooPcStopNetwork" placeholder="请选择"
-                      :style="{ width: '320px' }" allow-clear>
-              <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
-                        :label="item.label"/>
+            <a-select v-model="formWarning.clientPooPcStopNetwork" placeholder="请选择" :style="{ width: '320px' }"
+              allow-clear>
+              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
             </a-select>
             <a-checkbox v-model="formWarning.clientPooPcStopNetworkSwitch">达量断网</a-checkbox>
           </a-form-item>
           <a-form-item field="clientNotifyNumber" label="提醒次数">
-            <a-input-number v-model="formWarning.clientNotifyNumber" :style="{ width: '320px' }"
-                            placeholder="请输入" allow-clear hide-button>
+            <a-input-number v-model="formWarning.clientNotifyNumber" :style="{ width: '320px' }" placeholder="请输入"
+              allow-clear hide-button>
               <template #suffix>
                 次/月
               </template>
@@ -192,24 +189,22 @@ onMounted(() => {
             客户端·单卡预警设置
           </div>
           <a-form-item field="clientSingleCardWarn" tooltip="请输入" label="单卡用量预警">
-            <a-input-number v-model="formWarning.clientSingleCardWarn" :style="{ width: '320px' }"
-                            placeholder="请输入" allow-clear hide-button>
+            <a-input-number v-model="formWarning.clientSingleCardWarn" :style="{ width: '320px' }" placeholder="请输入"
+              allow-clear hide-button>
             </a-input-number>
             <a-checkbox v-model="formWarning.clientSingleCardWarnSwitch">达量预警</a-checkbox>
           </a-form-item>
           <a-form-item field="clientSingleCardWarnStop" label="达量停机">
             <a-select v-model="formWarning.clientSingleCardWarnStop" placeholder="请选择" :style="{ width: '320px' }"
-                      allow-clear>
-              <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
-                        :label="item.label"/>
+              allow-clear>
+              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
             </a-select>
             <a-checkbox v-model="formWarning.clientSingleCardWarnStopSwitch">达量停机</a-checkbox>
           </a-form-item>
           <a-form-item field="clientSingleCardWarnStopNetwork" label="达量断网">
             <a-select v-model="formWarning.clientSingleCardWarnStopNetwork" placeholder="请选择"
-                      :style="{ width: '320px' }" allow-clear>
-              <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
-                        :label="item.label"/>
+              :style="{ width: '320px' }" allow-clear>
+              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
             </a-select>
             <a-checkbox v-model="formWarning.clientSingleCardWarnStopNetworkSwitch">达量断网</a-checkbox>
           </a-form-item>
@@ -218,8 +213,8 @@ onMounted(() => {
             管理端预警设置
           </div>
           <a-form-item field="manageWarn" tooltip="请输入" label="池已用量预警">
-            <a-input-number v-model="formWarning.manageWarn" :style="{ width: '320px' }"
-                            placeholder="请输入" allow-clear hide-button>
+            <a-input-number v-model="formWarning.manageWarn" :style="{ width: '320px' }" placeholder="请输入" allow-clear
+              hide-button>
               <template #suffix>
                 %
               </template>
@@ -227,26 +222,23 @@ onMounted(() => {
             <a-checkbox v-model="formWarning.manageWarnSwitch">达量预警</a-checkbox>
           </a-form-item>
           <a-form-item field="manageWarnSwitchstop" label="达量停机">
-            <a-select v-model="formWarning.manageWarnSwitchStop" placeholder="请选择"
-                      :style="{ width: '320px' }" allow-clear>
-              <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
-                        :label="item.label"/>
+            <a-select v-model="formWarning.manageWarnSwitchStop" placeholder="请选择" :style="{ width: '320px' }"
+              allow-clear>
+              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
             </a-select>
             <a-checkbox v-model="formWarning.manageWarnSwitchStopSwitch">达量停机</a-checkbox>
           </a-form-item>
           <a-form-item field="manageWarnStopNetwork" label="达量断网">
-            <a-select v-model="formWarning.manageWarnStopNetwork" placeholder="请选择"
-                      :style="{ width: '320px' }" allow-clear>
-              <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
-                        :label="item.label"/>
+            <a-select v-model="formWarning.manageWarnStopNetwork" placeholder="请选择" :style="{ width: '320px' }"
+              allow-clear>
+              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
             </a-select>
             <a-checkbox v-model="formWarning.manageWarnStopNetworkSwitch">达量断网</a-checkbox>
           </a-form-item>
           <a-form-item>
-            <a-button type="primary" @click="handleSubmit"
-                      style="margin-right: 10px;">{{
-                $t('form.Confirm')
-              }}
+            <a-button type="primary" @click="handleSubmit" style="margin-right: 10px;">{{
+              $t('form.Confirm')
+            }}
             </a-button>
             <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
           </a-form-item>