增加表单检验规则及保存限制

src/views/SchedulingPage/AnnualParamPage.vue

 <script setup>
-import { computed, onBeforeMount, onMounted, reactive, ref } from "vue";
+import {computed, onBeforeMount, onMounted, reactive, ref, watchEffect} from "vue";
 import {
   getAnnualParam,
   alterAnnualParam,
@@ -7,8 +7,8 @@ import {
   deleteAnnualParam,
   getOrganizationStructureInterface
 } from '@/api/scheduling.js'
-import { ElMessage, ElMessageBox } from "element-plus";
-import { vFloatNumber } from "@/utils/directives.js";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {vFloatNumber} from "@/utils/directives.js";
 
 const data = ref()
 const dataBackup = ref([])
@@ -33,6 +33,45 @@ const addForm = ref({
   outdoorTemperature: '',
   backWaterTemperature: ''
 })
+const formRef = ref()
+const rules = reactive({
+  indoorTemperature: [
+    {
+      required: true,
+      message: '请输入正确的室内温度',
+      trigger: "blur"
+    },
+    {
+      pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/,
+      message: "请输入正确的室内温度",
+      trigger: "change"
+    }
+  ],
+  outdoorTemperature: [
+    {
+      required: true,
+      message: '请输入正确的室外温度',
+      trigger: "blur"
+    },
+    {
+      pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/,
+      message: "请输入正确的室外温度",
+      trigger: "change"
+    }
+  ],
+  backWaterTemperature: [
+    {
+      required: true,
+      message: '请输入正确的回水温度',
+      trigger: "blur"
+    },
+    {
+      pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/,
+      message: "请输入正确的回水温度",
+      trigger: "change"
+    }
+  ]
+})
 const energyTypeList = ref(['一步节能', '二步节能', '三步节能', '四步节能', '非节能']) // 节能等级列表
 const currentMonth = ref(0)
 const currentYear = ref(0)
@@ -49,8 +88,9 @@ const supplyData = ref([]) // 供热站数据
 function handleEdit(val) {
   currentYear.value = new Date().getFullYear()
   currentMonth.value = new Date().getMonth() + 1
-  reviseForm.value = { ...val }
+  reviseForm.value = {...val}
   reviseWindowOpen.value = true
+  formRef.value.resetFields()
 } // 处理修改
 function handleDelete(val) {
   ElMessageBox.confirm(
@@ -91,13 +131,14 @@ function handleAdd() {
   currentMonth.value = new Date().getMonth() + 1
   resetInput()
   addWindowOpen.value = true
+  formRef.value.resetFields()
 } // 处理新增
 function handleSearch() {
   if (!searchKey.value) {
     getData()
   } else {
     data.value = dataBackup.value.filter(item => {
-      if(typeof item.year === 'object'){
+      if (typeof item.year === 'object') {
         item.year = ''
       }
       return item.year.includes(searchKey.value)
@@ -105,16 +146,31 @@ function handleSearch() {
   }
 } // 处理查询
 function onReviseSubmit() {
+  formRef.value.validate(valid => {
+    if (valid) {
       if (reviseForm.value.hasOwnProperty('supplyName')) {
         delete reviseForm.value.supplyName
       }
-  if (reviseForm.value.year.length > 4) {
+      if (reviseForm.value.year.trim().length > 4) {
         reviseForm.value.year = reviseForm.value.year.slice(6, 10)
       }
+      if (reviseForm.value.supplyId === '') {
+        delete reviseForm.value.supplyId
+      }
+      for (let item of dataBackup.value) {
+        if (String(item.year).trim() === String(reviseForm.value.year).trim()) {
+          if (String(item.energyType).trim() === String(reviseForm.value.energyType).trim()) {
+            if (item.paramId !== reviseForm.value.paramId) {
+              ElMessage.error('该年该类型已存在.')
+              return
+            }
+          }
+        }
+      }
       alterAnnualParam(reviseForm.value).then(res => {
         if (res.success) {
-      getData()
           handleClose()
+          getData()
           ElMessage({
             message: res.message,
             type: 'success',
@@ -131,24 +187,27 @@ function onReviseSubmit() {
           type: 'error',
         })
       })
+    }
+  })
 } // 提交修改
 function onAddSubmit() { // 提交新增
+  formRef.value.validate(valid => {
+    if (valid) {
+      if (addForm.value.year.trim().length > 4) {
         addForm.value.year = addForm.value.year.slice(6, 10)
-  data.value.forEach((item, index, array) => {
-    if (item.energyType === addForm.energyType && item.year === addForm.year) {
-      alert("该类型年度已存在")
+      }
+      for (let item of dataBackup.value) {
+        if (String(item.year).trim() === String(addForm.value.year).trim()) {
+          if (String(item.energyType).trim() === String(addForm.value.energyType).trim()) {
+            ElMessage.error('该年该类型已存在.')
             return
           }
-  })
-<<<<<<< HEAD
-  console.log('>>>>>>>>==', addForm.value)
-  console.log('========>>>>', addForm.value.year)
-=======
->>>>>>> 8120e1a2dd4dd697b8b05c4827e818ba500b15a4
+        }
+      }
       addAnnualParam(addForm.value).then(res => {
         if (res.success) {
-      getData()
           handleClose()
+          getData()
           ElMessage({
             message: '新增成功',
             type: 'success',
@@ -165,29 +224,34 @@ function onAddSubmit() { // 提交新增
           type: 'error',
         })
       })
+    }
+  })
 } // 提交新增
 function handleClose() {
   reviseWindowOpen.value = false
   addWindowOpen.value = false
   resetInput()
 } // 关闭弹窗
-onBeforeMount(() => {
-  getData()
+onMounted(() => {
   getOrganizationStructure()
+  getData()
 })
-
-function getData() {
-  getAnnualParam().then(res => {
-    data.value = res.data
-    for (let item of data.value){
-      let flag = true
+watchEffect(()=>{
   for(let supply of supplyData.value){
-        if(item.supplyId === supply.supplyId){
-          flag = false
+    for(let item of data.value){
+      if(supply.supplyId === item.supplyId){
+        item.supplyName = supply.supplyName
       }
     }
-      if(flag){
-        item.supplyId = ''
+  }
+})
+function getData() {
+  getAnnualParam().then(res=>{
+    data.value = res.data
+    console.log(data.value)
+    for (let item of data.value) {
+      if(item.supplyId.includes('00000000-0000-0000-0000-000000000000')){
+        delete item.supplyId
       }
     }
     dataBackup.value = [...data.value]
@@ -205,10 +269,12 @@ function resetInput() {
     backWaterTemperature: ''
   }
 }
+
 function resetSearch() {
   searchKey.value = ''
   getData()
 }
+
 function customSort(a, b) {
   let valA;
   let valB;
@@ -240,6 +306,7 @@ function customSort(a, b) {
   }
   return valA - valB
 }
+
 function getSupply() {
   supplyData.value = []
   organizationStructure.value[0].serviceCenterList.forEach(fir_item => {
@@ -248,7 +315,7 @@ function getSupply() {
         supplyId: sec_item.supplyId,
         supplyName: sec_item.supplyName,
       }
-      supplyData.value.push({ ...temp })
+      supplyData.value.push({...temp})
     })
   })
 } // 根据组织结构获取供热站数据
@@ -260,15 +327,6 @@ function getOrganizationStructure() {
     ElMessage.error('接口异常，获取数据失败.')
   })
 } // 获取组织结构
-function showSupplyName(id) {
-  let supplyName = ""
-  supplyData.value.forEach(item => {
-    if (item.supplyId === id) {
-      supplyName = item.supplyName
-    }
-  })
-  return supplyName
-}
 </script>
 
 <template>
@@ -277,7 +335,7 @@ function showSupplyName(id) {
       <el-row>
         <el-col :span="8" label>年度：</el-col>
         <el-col :span="16">
-          <el-input clearable v-model="searchKey" />
+          <el-input clearable v-model="searchKey"/>
         </el-col>
       </el-row>
       <el-button type="primary" class="add-search-btn" @click="handleSearch">查询</el-button>
@@ -287,19 +345,15 @@ function showSupplyName(id) {
     <div class="table-wrapper">
       <el-table :data="data" border stripe ref="elTableRef" :default-sort="{ prop: 'year', order: 'descending' }"
                 :header-cell-class-name="tableHeaderClass" :row-class-name="tableBodyClass" style="width: 100%">
-        <el-table-column label="序号" type="index" align="center" width="60" />
-        <el-table-column label="节能类型" sortable :sort-method="customSort" prop="energyType" />
-        <el-table-column label="供热站名称">
-          <template #default="scope">
-            {{ showSupplyName(scope.row.supplyId) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="年度" sortable prop="year" />
-        <el-table-column label="热指标(W/m²)" prop="standard" />
-        <el-table-column label="度日数标定值" prop="degreeStandard" />
-        <el-table-column label="室内温度(℃)" prop="indoorTemperature" />
-        <el-table-column label="室外温度(℃)" prop="outdoorTemperature" />
-        <el-table-column label="回水温度(℃)" prop="backWaterTemperature" />
+        <el-table-column label="序号" type="index" align="center" width="60"/>
+        <el-table-column label="节能类型" sortable :sort-method="customSort" prop="energyType"/>
+        <el-table-column label="供热站名称" prop="supplyName" width="120"/>
+        <el-table-column label="年度" sortable prop="year"/>
+        <el-table-column label="热指标(W/m²)" prop="standard"/>
+        <el-table-column label="度日数标定值" prop="degreeStandard"/>
+        <el-table-column label="室内温度(℃)" prop="indoorTemperature"/>
+        <el-table-column label="室外温度(℃)" prop="outdoorTemperature"/>
+        <el-table-column label="回水温度(℃)" prop="backWaterTemperature"/>
         <el-table-column label="操作">
           <template #default="scope">
             <div class="table-operate-column">
@@ -313,11 +367,12 @@ function showSupplyName(id) {
     <div class="revise-window-dialog">
       <el-dialog title="年度参数修改" v-model="reviseWindowOpen" width="700px" :before-close="handleClose">
         <template #default>
+          <el-form ref="formRef" :rules="rules" :model="reviseForm" label-width="auto">
             <el-row first>
               <el-col :span="8" col-label class="energy-type-class">节能等级：</el-col>
               <el-col :span="16" col-value>
                 <el-select placeholder="" size="small" v-model="reviseForm.energyType" style="width: 370px">
-                <el-option v-for="item in energyTypeList" :key="item" :label="item" :value="item" />
+                  <el-option v-for="item in energyTypeList" :key="item" :label="item" :value="item"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -325,7 +380,7 @@ function showSupplyName(id) {
               <el-col :span="8" col-label>年度：</el-col>
               <el-col :span="16" col-value>
                 <el-select placeholder="" size="small" v-model="reviseForm.year" style="width: 370px">
-                <el-option :value="selectYearValue" :label="selectYearValue" />
+                  <el-option :value="selectYearValue" :label="selectYearValue"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -334,7 +389,7 @@ function showSupplyName(id) {
               <el-col :span="16" col-value>
                 <el-select placeholder="请选择供热站" size="small" v-model="reviseForm.supplyId" style="width: 370px">
                   <el-option v-for="item in supplyData" :key="item.supplyId" :value="item.supplyId"
-                  :label="item.supplyName" />
+                             :label="item.supplyName"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -342,33 +397,40 @@ function showSupplyName(id) {
               <el-col :span="8" col-label>热指标(W/m²)：</el-col>
               <el-col :span="16" col-value>
                 <el-input v-float-number maxlength="11" v-model="reviseForm.standard" placeholder=""
-                style="width: 370px" />
+                          style="width: 370px"/>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>度日数标定值：</el-col>
               <el-col :span="16" col-value>
-              <el-input v-float-number maxlength="11" v-model="reviseForm.degreeStandard" style="width: 370px" />
+                <el-input v-float-number maxlength="11" v-model="reviseForm.degreeStandard" style="width: 370px"/>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>室内温度：</el-col>
               <el-col :span="16" col-value>
-              <el-input maxlength="11" v-model="reviseForm.indoorTemperature" style="width: 370px" />
+                <el-form-item prop="indoorTemperature" style="margin: 0;padding: 0">
+                  <el-input maxlength="11" v-model="reviseForm.indoorTemperature" style="width: 370px"/>
+                </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>室外温度：</el-col>
               <el-col :span="16" col-value>
-              <el-input maxlength="11" v-model="reviseForm.outdoorTemperature" style="width: 370px" />
+                <el-form-item prop="outdoorTemperature" style="margin: 0;padding: 0">
+                  <el-input maxlength="11" v-model="reviseForm.outdoorTemperature" style="width: 370px"/>
+                </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>回水温度：</el-col>
               <el-col :span="16" col-value>
-              <el-input maxlength="11" v-model="reviseForm.backWaterTemperature" style="width: 370px" />
+                <el-form-item prop="backWaterTemperature" style="margin: 0;padding: 0">
+                  <el-input maxlength="11" v-model="reviseForm.backWaterTemperature" style="width: 370px"/>
+                </el-form-item>
               </el-col>
             </el-row>
+          </el-form>
         </template>
         <template #footer>
           <div class="dialog-footer">
@@ -379,11 +441,12 @@ function showSupplyName(id) {
       </el-dialog> <!-- 修改弹窗 -->
       <el-dialog title="年度参数新增" v-model="addWindowOpen" width="700px" :before-close="handleClose">
         <template #default>
+          <el-form ref="formRef" :rules="rules" :model="addForm" label-width="auto">
             <el-row first>
               <el-col :span="8" col-label class="energy-type-class">节能等级：</el-col>
               <el-col :span="16" col-value>
                 <el-select placeholder="" size="small" v-model="addForm.energyType" style="width: 370px">
-                <el-option v-for="item in energyTypeList" :key="item" :label="item" :value="item" />
+                  <el-option v-for="item in energyTypeList" :key="item" :label="item" :value="item"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -391,7 +454,7 @@ function showSupplyName(id) {
               <el-col :span="8" col-label>年度：</el-col>
               <el-col :span="16" col-value>
                 <el-select placeholder="" size="small" v-model="addForm.year" style="width: 370px">
-                <el-option :value="selectYearValue" :label="selectYearValue" />
+                  <el-option :value="selectYearValue" :label="selectYearValue"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -400,40 +463,47 @@ function showSupplyName(id) {
               <el-col :span="16" col-value>
                 <el-select placeholder="请选择供热站" size="small" v-model="addForm.supplyId" style="width: 370px">
                   <el-option v-for="item in supplyData" :key="item.supplyId" :value="item.supplyId"
-                  :label="item.supplyName" />
+                             :label="item.supplyName"/>
                 </el-select>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>热指标(W/m²)：</el-col>
               <el-col :span="16" col-value>
-              <el-input v-float-number maxlength="11" v-model="addForm.standard" placeholder="" style="width: 370px" />
+                <el-input v-float-number maxlength="11" v-model="addForm.standard" placeholder="" style="width: 370px"/>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>度日数标定值：</el-col>
               <el-col :span="16" col-value>
-              <el-input v-float-number maxlength="11" v-model="addForm.degreeStandard" style="width: 370px" />
+                <el-input v-float-number maxlength="11" v-model="addForm.degreeStandard" style="width: 370px"/>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>室内温度：</el-col>
               <el-col :span="16" col-value>
-              <el-input maxlength="11" v-model="addForm.indoorTemperature" style="width: 370px" />
+                <el-form-item prop="indoorTemperature" style="padding: 0;margin:0">
+                  <el-input maxlength="11" v-model="addForm.indoorTemperature" style="width: 370px"/>
+                </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>室外温度：</el-col>
               <el-col :span="16" col-value>
-              <el-input maxlength="11" v-model="addForm.outdoorTemperature" style="width: 370px" />
+                <el-form-item prop="outdoorTemperature" style="padding: 0;margin:0">
+                  <el-input maxlength="11" v-model="addForm.outdoorTemperature" style="width: 370px"/>
+                </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>回水温度：</el-col>
               <el-col :span="16" col-value>
-              <el-input maxlength="11" v-model="addForm.backWaterTemperature" style="width: 370px" />
+                <el-form-item prop="backWaterTemperature" style="padding: 0;margin:0">
+                  <el-input maxlength="11" v-model="addForm.backWaterTemperature" style="width: 370px"/>
+                </el-form-item>
               </el-col>
             </el-row>
+          </el-form>
         </template>
         <template #footer>
           <div class="dialog-footer">
@@ -498,7 +568,7 @@ function showSupplyName(id) {
   font-size: 12px;
 }
 
-::v-deep .el-table__body tr:hover>td {
+::v-deep .el-table__body tr:hover > td {
   background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
 }
 

src/views/SchedulingPage/PhenomenonPage.vue

 <script setup>
-import { onMounted, ref, reactive } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { getPhenomenon, addPhenomenon, alterPhenomenon, deletePhenomenon } from "@/api/scheduling.js"
-import { vFloatNumber } from "@/utils/directives.js";
+import {onMounted, ref, reactive} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getPhenomenon, addPhenomenon, alterPhenomenon, deletePhenomenon} from "@/api/scheduling.js"
+import {vFloatNumber} from "@/utils/directives.js";
 
 const data = ref()
 const dataBackup = ref([])
@@ -18,7 +18,8 @@ const formRef = ref()
 //校验规则
 const rules = reactive({
   phenomenonTemp: [
-    { pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的对应温度", trigger: "change" }
+    {required: true, message: '请输入正确的对应温度', trigger: 'blur'},
+    {pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的对应温度", trigger: "change"}
   ]
 });
 const tableHeaderClass = data => {  // 表头样式
@@ -30,10 +31,12 @@ const tableBodyClass = data => {   // 表体样式
 
 function add() {
   addWindowOpen.value = true
+  formRef.value.resetFields()
 }  // 新增按钮单击事件
 function revise(val) {
-  reviseForm.value = { ...val }
+  reviseForm.value = {...val}
   reviseWindowOpen.value = true
+  formRef.value.resetFields()
 } // 修改按钮单击事件
 function search() {
   if (!searchKey.value) {
@@ -42,6 +45,7 @@ function search() {
     data.value = dataBackup.value.filter(item => item.phenomenonName.includes(searchKey.value))
   }
 }
+
 function omit(val) {
   let param = {
     id: val.phenomenonId
@@ -82,6 +86,8 @@ function handleClose() {
   resetInput()
 } // 关闭弹窗
 function onReviseSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
       if (reviseForm.value.phenomenonName === '晴天') {
         reviseForm.value.phenomenonType = 1
       } else if (reviseForm.value.phenomenonName === '多云') {
@@ -90,7 +96,6 @@ function onReviseSubmit() {
         reviseForm.value.phenomenonType = 3
       }
       delete reviseForm.value.updateNullFields
-  console.log('=>>>>>>>>>>>', reviseForm.value)
       alterPhenomenon(reviseForm.value).then(res => {
         if (res.success) {
           getData()
@@ -112,8 +117,12 @@ function onReviseSubmit() {
           type: 'error',
         })
       })
+    }
+  })
 } // 修改表单提交
 function onAddSubmit() {
+  formRef.value.validate(valid => {
+    if (valid) {
       if (addForm.value.phenomenonName === '晴天') {
         addForm.value.phenomenonType = 1
       } else if (addForm.value.phenomenonName === '多云') {
@@ -141,6 +150,8 @@ function onAddSubmit() {
           type: 'error',
         })
       })
+    }
+  })
 } // 新增表单提交
 function resetInput() {
   addForm.value = {
@@ -165,6 +176,7 @@ function getData() {
     dataBackup.value = [...data.value]
   })
 }
+
 function customSort(a, b) {
   return b.phenomenonType - a.phenomenonType
 }
@@ -175,7 +187,7 @@ function customSort(a, b) {
       <el-row>
         <el-col :span="8" label>名称：</el-col>
         <el-col :span="16">
-          <el-input clearable v-model="searchKey" />
+          <el-input clearable v-model="searchKey"/>
         </el-col>
       </el-row>
       <el-button type="primary" @click="search" class="add-search-btn">查询</el-button>
@@ -184,12 +196,13 @@ function customSort(a, b) {
     </div>
     <div class="table-wrapper">
       <el-table :data="data" stripe border style="width: 100%"
-        :default-sort="{ prop: 'phenomenonName', order: 'descending' }" :header-cell-class-name="tableHeaderClass"
+                :default-sort="{ prop: 'phenomenonName', order: 'descending' }"
+                :header-cell-class-name="tableHeaderClass"
                 :row-class-name="tableBodyClass">
-        <el-table-column type="index" label="序号" align="center" width="100" />
-        <el-table-column prop="phenomenonName" sortable :sort-method="customSort" label="名称" />
-        <el-table-column prop="phenomenonTemp" label="对应温度" />
-        <el-table-column prop="phenomenonDesc" label="描述" />
+        <el-table-column type="index" label="序号" align="center" width="100"/>
+        <el-table-column prop="phenomenonName" sortable :sort-method="customSort" label="名称"/>
+        <el-table-column prop="phenomenonTemp" label="对应温度"/>
+        <el-table-column prop="phenomenonDesc" label="描述"/>
         <el-table-column label="操作" width="190">
           <template #default="scope">
             <div class="table-operate-column">
@@ -208,9 +221,9 @@ function customSort(a, b) {
               <el-col :span="8" col-label class="energy-type-class">名称：</el-col>
               <el-col :span="16" col-value>
                 <el-select placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px">
-                  <el-option value="晴天" label="晴天" />
-                  <el-option value="多云" label="多云" />
-                  <el-option value="阴天" label="阴天" />
+                  <el-option value="晴天" label="晴天"/>
+                  <el-option value="多云" label="多云"/>
+                  <el-option value="阴天" label="阴天"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -218,14 +231,14 @@ function customSort(a, b) {
               <el-col :span="8" col-label>对应温度：</el-col>
               <el-col :span="16" col-value>
                 <el-form-item prop="phenomenonTemp" style="padding: 0;margin: 0;">
-                  <el-input maxlength="11" v-model="reviseForm.phenomenonTemp" placeholder="" style="width: 370px" />
+                  <el-input maxlength="11" v-model="reviseForm.phenomenonTemp" placeholder="" style="width: 370px"/>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>描述：</el-col>
               <el-col :span="16" col-value>
-                <el-input maxlength="11" v-model="reviseForm.phenomenonDesc" placeholder="" style="width: 370px" />
+                <el-input maxlength="11" v-model="reviseForm.phenomenonDesc" placeholder="" style="width: 370px"/>
               </el-col>
             </el-row>
           </el-form>
@@ -240,20 +253,14 @@ function customSort(a, b) {
       </el-dialog> <!-- 修改弹窗 -->
       <el-dialog title="天气工况设置新增" v-model="addWindowOpen" width="700px" :before-close="handleClose">
         <template #default>
-          <!-- <el-row first>
-          <el-col :span="8" col-label class="energy-type-class">名称：</el-col>
-          <el-col :span="16" col-value>
-            <el-input placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px"/>
-          </el-col>
-        </el-row> -->
           <el-form ref="formRef" :model="addForm" :rules="rules" label-width="auto">
             <el-row first>
-              <el-col :span="8" col-label class="energy-type-class">名称: </el-col>
+              <el-col :span="8" col-label class="energy-type-class">名称:</el-col>
               <el-col :span="16" col-value>
                 <el-select placeholder="" size="small" v-model="addForm.phenomenonName" style="width: 370px">
-                  <el-option value="晴天" label="晴天" />
-                  <el-option value="多云" label="多云" />
-                  <el-option value="阴天" label="阴天" />
+                  <el-option value="晴天" label="晴天"/>
+                  <el-option value="多云" label="多云"/>
+                  <el-option value="阴天" label="阴天"/>
                 </el-select>
               </el-col>
             </el-row>
@@ -261,14 +268,14 @@ function customSort(a, b) {
               <el-col :span="8" col-label>对应温度：</el-col>
               <el-col :span="16" col-value>
                 <el-form-item prop="phenomenonTemp" style="padding: 0;margin: 0;">
-                  <el-input maxlength="11" v-model="addForm.phenomenonTemp" placeholder="" style="width: 370px" />
+                  <el-input maxlength="11" v-model="addForm.phenomenonTemp" placeholder="" style="width: 370px"/>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="8" col-label>描述：</el-col>
               <el-col :span="16" col-value>
-                <el-input maxlength="11" v-model="addForm.phenomenonDesc" placeholder="" style="width: 370px" />
+                <el-input maxlength="11" v-model="addForm.phenomenonDesc" placeholder="" style="width: 370px"/>
               </el-col>
             </el-row>
           </el-form>
@@ -336,7 +343,7 @@ function customSort(a, b) {
   font-size: 12px;
 }
 
-::v-deep .el-table__body tr:hover>td {
+::v-deep .el-table__body tr:hover > td {
   background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
 }
 
@@ -352,6 +359,7 @@ function customSort(a, b) {
   height: 35px;
   color: #124362;
 }
+
 .el-col[col-label] {
   display: flex;
   justify-content: end;

src/views/SchedulingPage/WeatherManagePage.vue

@@ -10,9 +10,7 @@ import {
 } from '@/api/scheduling.js'
 import AddWindow from "./weatherManageSub/AddWindow.vue";
 import {ElMessage, ElMessageBox} from "element-plus";
-import store from "@/store/index.js";
 import cloneDeep from 'lodash/cloneDeep'
-import {vFloatNumber} from "@/utils/directives.js";
 
 const data = ref()
 const dataBackup = ref([]);
@@ -30,7 +28,6 @@ const isAutoSearchKey = ref()  // 手自动模式查询
 const supplySearchKey = ref() // 供热站查询
 const organizationStructure = ref([]) // 组织结构数据
 const supplyData = ref([]) // 供热站数据
-const transferStructData = ref([]) // 换热站结构数据，每个供热站和一定数量的换热站对应
 
 function search() {
   if(!isAutoSearchKey.value && !supplySearchKey.value){
@@ -144,15 +141,14 @@ function handleAddWinOpenClose(){
   addWindowOpen.value = false
 }
 function handleAdd(val){
-  console.log("新增数据",val)
   alterWeatherMagData(val).then(res=>{
     if(res.success){
       ElMessage({
         message: res.message,
         type: 'success',
       })
-      getData()
       addWindowOpen.value = false
+      getData()
     }else {
       ElMessage({
         message: res.message,
@@ -190,31 +186,10 @@ function getSupply() {
     })
   })
 } // 根据组织结构获取供热站数据
-function getAllTransfer() {
-  organizationStructure.value[0].serviceCenterList.forEach(serviceCenter => { // 共有两个服务中心
-    let supplyList = serviceCenter.supplyList  // 供热站列表，每个服务中心对应一定的供热站
-    supplyList.forEach(supply => { // 供热站
-      transferStructData.value.push(
-          {
-            supplyId: supply.supplyId,
-            supplyName: supply.supplyName,
-            transferList: supply.transferList
-          }
-      )
-    })
-    transferStructData.value.forEach(item=>{
-      item.transferList.forEach((unit)=>{
-        unit.isUsed = false
-        unit.customizeId = ''
-      })
-    })
-  })
-} // 根据组织结构获取换热站结构数据
 function getOrganizationStructure() {
   getOrganizationStructureInterface().then(res => {
     organizationStructure.value = res.data
     getSupply()
-    getAllTransfer()
   }).catch(err => {
     ElMessage.error('接口异常，获取数据失败.')
   })
@@ -296,8 +271,6 @@ function resetSearch(){
           :open="bindWindowOpen"
           :data="dependentSub"
           :supply="supplyData"
-          :transfer="transferStructData"
-          :all-weather-mag-data="dataBackup"
           @onCancel="onCancelBind"
           @onConfirm="confirmBind"></BindWindow>
     </div>

src/views/SchedulingPage/WindManagePage.vue

@@ -36,6 +36,11 @@ const formRef = ref()
 //校验规则
 const rules = reactive({
   windTemp: [
+    {
+      required: true,
+      message: '请输入正确的对应温度',
+      trigger: "blur"
+    },
     {
       pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/,
       message: "请输入正确的对应温度",
@@ -46,11 +51,13 @@ const rules = reactive({
 
 function add() {
   addWindowOpen.value = true;
+  formRef.value.resetFields()
 } // 新增按钮单击事件
 function revise(val) {
   reviseForm.value = { ...val };
   reviseForm.value.windLevel = Number(reviseForm.value.windLevel);
   reviseWindowOpen.value = true;
+  formRef.value.resetFields()
 } // 修改按钮单击事件
 function omit(val) {
   let param = {
@@ -99,6 +106,8 @@ function handleClose() {
   resetInput();
 } // 关闭弹窗
 function onReviseSubmit() {
+  formRef.value.validate(valid=>{
+    if(valid){
       alterWind(reviseForm.value)
           .then((res) => {
             if (res.success) {
@@ -110,11 +119,10 @@ function onReviseSubmit() {
               });
             } else {
               ElMessage({
-          message: "修改失败.",
+                message: res.message,
                 type: "error",
               });
             }
-
           })
           .catch((err) => {
             ElMessage({
@@ -122,8 +130,12 @@ function onReviseSubmit() {
               type: "error",
             });
           });
+    }
+  })
 } // 修改表单提交
 function onAddSubmit() {
+  formRef.value.validate(valid=>{
+    if(valid){
       addWind(addForm.value)
           .then((res) => {
             if (res.success) {
@@ -135,7 +147,7 @@ function onAddSubmit() {
               });
             } else {
               ElMessage({
-          message: "新增失败.",
+                message: res.message,
                 type: "error",
               });
             }
@@ -147,6 +159,9 @@ function onAddSubmit() {
               type: "error",
             }),
           ]);
+    }
+  })
+
 } // 新增表单提交
 
 onMounted(() => {

src/views/SchedulingPage/weatherManageSub/AddWindow.vue

@@ -36,9 +36,13 @@ function handleClose() {
   emit('onCancel')
 }
 function handleConfirm() {
+  formRef.value.validate(valid=>{
+    if(valid){
       addData.value.operateTime = getCurrentDateTime()
       emit('onConfirm', addData.value)
       resetInput()
+    }
+  })
 }
 function getCurrentDateTime() {
   const now = new Date();
@@ -53,6 +57,7 @@ function getCurrentDateTime() {
 } // 生成时间
 function onOpen() {
   resetInput()
+  formRef.value.resetFields()
 }
 function resetInput() {
   addData.value = {
@@ -90,10 +95,11 @@ const rules = reactive({
     { pattern: /^(\d{1,11})$/, "message": "排序必须是1-11位正整数", trigger: "blur" }
   ],
   timeoutMin: [
-    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "判断时间必须是1-10位实数", trigger: "blur" }
+    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "判断时间必须是1-11位实数", trigger: "blur" }
   ],
   temperature: [
-    { pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的调节温度", trigger: "blur" }
+    {required: true, message: '请输入正确的温度'},
+    { pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的温度", trigger: "blur" }
   ]
 });
 </script>

src/views/SchedulingPage/weatherManageSub/BindWindow.vue

@@ -3,10 +3,10 @@ import {
   ref,
   defineProps,
   defineEmits,
-  watchEffect
+  watchEffect, reactive
 } from "vue";
 import {getTransferInterface, getWeatherMagData} from "@/api/scheduling.js"
-import {ElLoading} from 'element-plus'
+import {ElLoading, ElMessage} from 'element-plus'
 import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
@@ -24,7 +24,8 @@ const props = defineProps({
     type: Array,
     default: [],
     required: true
-  }})
+  }
+})
 const emit = defineEmits({
   onCancel: null,
   onConfirm: ({}) => {
@@ -53,12 +54,14 @@ watchEffect(() => {
 
 
 function onSubmit() {
+  if (bindData.value.hasOwnProperty('supplyId')) {
+    if (bindData.value.supplyId) {
       supplyData.value.forEach(item => {
         if (item.supplyId === bindData.value.supplyId) {
           bindData.value.supplyName = item.supplyName
         }
       })
-  selectedTransfer.value.forEach(item=>{
+      selectedTransfer.value.forEach(item => {
         bindData.value.transfers.push({
           customizeId: bindData.value.customizeId,
           unitId: item,
@@ -66,6 +69,10 @@ function onSubmit() {
         })
       })
       emit('onConfirm', bindData.value)
+    }else {
+      ElMessage.error('请选择供热站')
+    }
+  }
 } // 点击保存按钮
 /**
  * 获取换热站数据
@@ -103,9 +110,9 @@ async function getTransfer(supplyId, isAvailable = true) {
 
 
 function onOpen() {
+  loadingInstance = ElLoading.service({target: '#bind-dialog'})
   selectedTransfer.value.length = 0  // 清空已选择的换热站
   transferData.value.length = 0  // 清空显示的换热站
-  loadingInstance = ElLoading.service({target: '.el-dialog'})
   if (bindData.value.hasOwnProperty('supplyId')) {
     if (bindData.value.supplyId) {
       optional = bindData.value.supplyId
@@ -121,12 +128,12 @@ function onOpen() {
  * @param val  supplyId
  */
 function selectChange(val) {
-  loadingInstance = ElLoading.service({target: '.el-dialog'})
+  loadingInstance = ElLoading.service({target: '#bind-dialog'})
   if (selectedTransfer.value.length === 0) {
     getTransfer(val)
-    } else if(bindData.value.supplyId === optional){
+  } else if (bindData.value.supplyId === optional) {
     getTransfer(val)
-    }else {
+  } else {
     getTransfer(val, false)
   }
   loadingInstance.close()
@@ -142,6 +149,7 @@ function checkboxChange(val) {
 </script>
 <template>
   <el-dialog
+      id="bind-dialog"
       v-model="props.open"
       width="1000px"
       title="换热站绑定"
@@ -158,6 +166,7 @@ function checkboxChange(val) {
         <el-row class="not-select-row">
           <el-col :span="8" class="content-col-label">供热站：</el-col>
           <el-col :span="16" class="content-col-value">
+
             <el-select
                 v-model="bindData.supplyId"
                 @change="selectChange"
@@ -168,6 +177,7 @@ function checkboxChange(val) {
               <el-option v-for="item in supplyData" :key="item.supplyId" :label="item.supplyName"
                          :value="item.supplyId"/>
             </el-select>
+
           </el-col>
         </el-row>
         <el-row class="select-row">
@@ -185,6 +195,7 @@ function checkboxChange(val) {
           </el-col>
         </el-row>
       </div>
+
     </template>
     <template #footer>
       <div class="dialog-footer">

src/views/SchedulingPage/weatherManageSub/ReviseWindow.vue

 <script setup>
-import { ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect, reactive } from "vue";
+import {ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect, reactive} from "vue";
 import cloneDeep from 'lodash/cloneDeep'
-import { vFloatNumber } from "@/utils/directives.js";
-
+import {vFloatNumber} from "@/utils/directives.js";
+import {getTransferInterface} from "@/api/scheduling.js";
 
 
 const props = defineProps({
@@ -30,22 +30,23 @@ const formRef = ref()
 //校验规则
 const rules = reactive({
   diffPercentage: [
-    { pattern: /^([0-9]\d{0,1}|100$)(\.\d{1,4})?$/, "message": "请输入正确的百分比格式", trigger: "blur" }
+    {pattern: /^([0-9]\d{0,1}|100$)(\.\d{1,4})?$/, "message": "请输入正确的百分比格式", trigger: "blur"}
   ],
   wind: [
-    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "风速必须是1-11位实数", trigger: "blur" }
+    {pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "风速必须是1-11位实数", trigger: "blur"}
   ],
   illumination: [
-    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "光照必须是1-11位实数", trigger: "blur" }
+    {pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "光照必须是1-11位实数", trigger: "blur"}
   ],
   sort: [
-    { pattern: /^(\d{1,11})$/, "message": "排序必须是1-11位正整数", trigger: "blur" }
+    {pattern: /^(\d{1,11})$/, "message": "排序必须是1-11位正整数", trigger: "blur"}
   ],
   timeoutMin: [
-    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "判断时间必须是1-10位实数", trigger: "blur" }
+    {pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "判断时间必须是1-10位实数", trigger: "blur"}
   ],
   temperature: [
-    { pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的调节温度", trigger: "blur" }
+    {required: true, message: '请输入正确的温度', trigger: 'blur'},
+    {pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的温度", trigger: "blur"}
   ]
 });
 watchEffect(() => {
@@ -71,8 +72,29 @@ const switchingisAuto = computed({
   }
 })  // 可写计算属性,手动、自动模式切换
 function onOpen() {
-  // console.log('props.data数据',props.data)
-  // console.log('修改弹窗接收到的数据',reviseData.value)
+  formRef.value.resetFields()
+}
+
+async function handleConfirm() {
+  if (reviseData.value.hasOwnProperty('supplyId')) {
+    if (reviseData.value.supplyId) {
+      const result = await getTransferInterface(param)
+      for (let item of result.data) {
+        reviseData.value.transfers.push(
+            {
+              customizeId: reviseData.value.customizeId,
+              unitId: item.transferId,
+              updateNullFields: ''
+            }
+        )
+      }
+    }
+  }
+  formRef.value.validate(valid => {
+    if (valid) {
+      emit('onConfirm', reviseData.value)
+    }
+  })
 }
 </script>
 
@@ -85,7 +107,7 @@ function onOpen() {
             <el-col :span="8" class="content-col-label">自定义名称：</el-col>
             <el-col :span="16" class="content-col-value">
               <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.customizeName"
-                style="width: 510px" />
+                        style="width: 510px"/>
             </el-col>
           </el-row>
           <el-row>
@@ -102,7 +124,7 @@ function onOpen() {
             <el-col :span="16" class="content-col-value">
               <el-form-item prop="temperature" style="padding: 0;margin: 0;">
                 <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.temperature"
-                  style="width: 510px" />
+                          style="width: 510px"/>
               </el-form-item>
             </el-col>
           </el-row>
@@ -110,7 +132,7 @@ function onOpen() {
             <el-col :span="8" class="content-col-label">风速：</el-col>
             <el-col :span="16" class="content-col-value">
               <el-form-item prop="wind" style="padding: 0;margin: 0;">
-                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.wind" style="width: 510px" />
+                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.wind" style="width: 510px"/>
               </el-form-item>
             </el-col>
           </el-row>
@@ -119,7 +141,7 @@ function onOpen() {
             <el-col :span="16" class="content-col-value">
               <el-form-item prop="illumination" style="padding: 0;margin: 0;">
                 <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.illumination"
-                  style="width: 510px" />
+                          style="width: 510px"/>
               </el-form-item>
             </el-col>
           </el-row>
@@ -127,20 +149,20 @@ function onOpen() {
             <el-col :span="8" class="content-col-label">排序：</el-col>
             <el-col :span="16" class="content-col-value">
               <el-form-item prop="sort" style="padding: 0;margin: 0;">
-                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.sort" style="width: 510px" />
+                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.sort" style="width: 510px"/>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="5" class="content-col-label">切换自动模式：</el-col>
             <el-col :span="7" class="content-col-value">
-              <el-checkbox :style="{ marginLeft: '10px' }" v-model="switchingisAuto" label="自动模式" />
+              <el-checkbox :style="{ marginLeft: '10px' }" v-model="switchingisAuto" label="自动模式"/>
             </el-col>
             <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
             <el-col :span="7" class="content-col-value">
               <el-form-item prop="diffPercentage" style="padding: 0;margin: 0;">
                 <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.diffPercentage"
-                  style="width: 240px" />
+                          style="width: 240px"/>
               </el-form-item>
             </el-col>
           </el-row>
@@ -149,14 +171,14 @@ function onOpen() {
             <el-col :span="7" class="content-col-value">
               <el-form-item prop="timeoutMin" style="padding: 0;margin: 0;">
                 <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.timeoutMin"
-                  style="width: 240px" />
+                          style="width: 240px"/>
               </el-form-item>
             </el-col>
             <el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col>
             <el-col :span="7" class="content-col-value">
               <el-form-item prop="tempRegulation" style="padding: 0;margin: 0;">
                 <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.tempRegulation"
-                  style="width: 240px" />
+                          style="width: 240px"/>
               </el-form-item>
             </el-col>
           </el-row>
@@ -166,7 +188,7 @@ function onOpen() {
     </template>
     <template #footer>
       <div class="dialog-footer">
-        <el-button type="primary" @click="emit('onConfirm', reviseData)">保存</el-button>
+        <el-button type="primary" @click="handleConfirm">保存</el-button>
         <el-button type="primary" @click="emit('onCancel')">关闭</el-button>
       </div>
     </template>