feat(views): 优化“设置温湿度弹框”组件批量选择逻辑

src/views/env-monitor/SetTempHumidityModal.vue

@@ -22,6 +22,7 @@ interface Props {
 }
 
 const { handleRequest } = useRequest();
+
 const props = defineProps<Props>();
 const limitOpen = ref<boolean>(false);
 const warningOpen = ref<boolean>(false);
@@ -30,28 +31,30 @@ const formRef = ref<FormInstance>();
 const limitForm = ref<LimitForm>({
   id: undefined,
   regionId: undefined,
-  tempUpper: 0,
-  tempLower: 0,
-  tempPreset: 0,
-  humidityUpper: 0,
-  humidityLower: 0,
-  humidityPreset: 0,
+  tempUpper: undefined,
+  tempLower: undefined,
+  tempPreset: undefined,
+  humidityUpper: undefined,
+  humidityLower: undefined,
+  humidityPreset: undefined,
   batch: false,
+  batchPointIds: '',
+  batchIds: [],
 });
 const warningList = ref<WarningItem[]>([
   {
     pointId: props.monitoringId,
     enabled: false,
     type: 1,
-    val: 0,
-    duration: 0,
+    val: undefined,
+    duration: undefined,
   },
   {
     pointId: props.monitoringId,
     enabled: false,
     type: 2,
-    val: 0,
-    duration: 0,
+    val: undefined,
+    duration: undefined,
   },
 ]);
 
@@ -63,6 +66,7 @@ const rules: Record<string, Rule[]> = {
   humidityUpper: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
   humidityLower: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
   humidityPreset: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  batchIds: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
 };
 
 const addLimit = () => {
@@ -99,15 +103,15 @@ const getMonitorPointList = () => {
             pointId: props.monitoringId,
             enabled: false,
             type: 1,
-            val: 0,
-            duration: 0,
+            val: undefined,
+            duration: undefined,
           },
           {
             pointId: props.monitoringId,
             enabled: false,
             type: 2,
-            val: 0,
-            duration: 0,
+            val: undefined,
+            duration: undefined,
           },
         ];
       }
@@ -120,7 +124,35 @@ const getLimit = () => {
     ?.validate()
     .then(() => {
       handleRequest(async () => {
-        await updateLimits(limitForm.value);
+        if (limitForm.value.batch) {
+          if (limitForm.value.batchIds) {
+            limitForm.value.batchPointIds = limitForm.value.batchIds.join();
+          }
+        }
+        const {
+          id,
+          regionId,
+          tempUpper,
+          tempLower,
+          tempPreset,
+          humidityUpper,
+          humidityLower,
+          humidityPreset,
+          batch,
+          batchPointIds,
+        } = limitForm.value;
+        await updateLimits({
+          id,
+          regionId,
+          tempUpper,
+          tempLower,
+          tempPreset,
+          humidityUpper,
+          humidityLower,
+          humidityPreset,
+          batch,
+          batchPointIds,
+        });
         getMonitorPoint();
         limitOpen.value = false;
         emit('setClick');
@@ -161,6 +193,11 @@ const getWarning = () => {
   warningOpen.value = false;
 };
 
+const addBatch = () => {
+  limitForm.value.batchIds = [];
+  limitForm.value.id = undefined;
+};
+
 watch(
   () => props.monitoringId,
   (count) => {
@@ -198,7 +235,23 @@ onMounted(() => {
       :keyboard="false"
     >
       <AForm ref="formRef" :model="limitForm" layout="vertical" :rules="rules">
-        <AFormItem :label="$t('envMonitor.selectMonitoringPointNameCheck')" name="id">
+        <AFormItem v-if="limitForm.batch" :label="$t('envMonitor.selectMonitoringPointNameCheck')" name="batchIds">
+          <ASelect
+            class="select-width"
+            v-model:value="limitForm.batchIds"
+            mode="multiple"
+            :options="monitoringData"
+            :field-names="{ label: 'name', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+            :max-tag-count="limitForm.batchIds?.length === 1 ? 1 : 0"
+            allow-clear
+          >
+            <template #maxTagPlaceholder="omittedValues">
+              <span>+ {{ omittedValues.length }} ...</span>
+            </template>
+          </ASelect>
+        </AFormItem>
+        <AFormItem v-else :label="$t('envMonitor.selectMonitoringPointNameCheck')" name="id">
           <ASelect
             class="select-width"
             v-model:value="limitForm.id"
@@ -207,29 +260,30 @@ onMounted(() => {
             :placeholder="$t('common.plzSelect')"
           />
         </AFormItem>
+
         <AFlex justify="space-between">
           <AFormItem :label="$t('envMonitor.indoorTemperatureSettingValue')" name="tempPreset">
-            <AInputNumber class="select-width" v-model:value="limitForm.tempPreset" :min="0" :max="40" />
+            <AInputNumber class="select-width" v-model:value="limitForm.tempPreset" :min="0" :max="200" />
           </AFormItem>
           <AFormItem :label="$t('envMonitor.upperLimitValueIndoorTemperature')" name="tempUpper">
-            <AInputNumber class="select-width" v-model:value="limitForm.tempUpper" :min="0" :max="40" />
+            <AInputNumber class="select-width" v-model:value="limitForm.tempUpper" :min="0" :max="200" />
           </AFormItem>
           <AFormItem :label="$t('envMonitor.lowerLimitValueIndoorTemperature')" name="tempLower">
-            <AInputNumber class="select-width" v-model:value="limitForm.tempLower" :min="0" :max="40" />
+            <AInputNumber class="select-width" v-model:value="limitForm.tempLower" :min="0" :max="200" />
           </AFormItem>
         </AFlex>
         <AFlex justify="space-between">
           <AFormItem :label="$t('envMonitor.indoorHumiditySettingValue')" name="humidityPreset">
-            <AInputNumber class="select-width" v-model:value="limitForm.humidityPreset" :min="0" :max="100" />
+            <AInputNumber class="select-width" v-model:value="limitForm.humidityPreset" :min="0" :max="200" />
           </AFormItem>
           <AFormItem :label="$t('envMonitor.upperLimitValueIndoorHumidity')" name="humidityUpper">
-            <AInputNumber class="select-width" v-model:value="limitForm.humidityUpper" :min="0" :max="100" />
+            <AInputNumber class="select-width" v-model:value="limitForm.humidityUpper" :min="0" :max="200" />
           </AFormItem>
           <AFormItem :label="$t('envMonitor.minimumIndoorHumidityLevel')" name="humidityLower">
-            <AInputNumber class="select-width" v-model:value="limitForm.humidityLower" :min="0" :max="100" />
+            <AInputNumber class="select-width" v-model:value="limitForm.humidityLower" :min="0" :max="200" />
           </AFormItem>
         </AFlex>
-        <ACheckbox v-model:checked="limitForm.batch">{{ $t('common.batchSetting') }}</ACheckbox>
+        <ACheckbox v-model:checked="limitForm.batch" @click="addBatch">{{ $t('common.batchSetting') }}</ACheckbox>
       </AForm>
       <AFlex justify="flex-end" class="limit-top">
         <AButton class="limit-button default-button" @click="limitOpen = false">{{ $t('common.cancel') }}</AButton>