绑定换热站接口更新后第一次提交

src/api/scheduling.js

@@ -77,7 +77,7 @@ export const alterWeatherMagData = params => { // 添加或修改气象干预数
   return http.post(`/api/cusweather/SaveAll`, params)
 }
 
-export const getTransfer = param => { // 获取换热站列表
+export const getTransferInterface = param => { // 获取换热站列表
   return http.post("/api/cusweather/getTransferIds",param)
 }
 

src/views/SchedulingPage/weatherManageSub/BindWindow.vue

 <script setup>
-import {ref, defineProps, defineEmits, watchEffect, onMounted, reactive, computed, onBeforeMount} from "vue";
-import {getTransfer, getWeatherMagData} from "@/api/scheduling.js"
-import { ElLoading } from 'element-plus'
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  watchEffect, watch,
+} from "vue";
+import {getTransferInterface, getWeatherMagData} from "@/api/scheduling.js"
+import {ElLoading} from 'element-plus'
 import store from "@/store/index.js";
 import cloneDeep from 'lodash/cloneDeep'
 import http from "@/api/http.js";
@@ -40,61 +45,35 @@ const emit = defineEmits({
     return true
   }
 })
-const bindData = ref({})
+const bindData = ref({}) // 要绑定的数据
 const supplyData = ref([]) // 供热站数据
+const transferData = ref([]) // 换热站数据
+const selectedTransfer = ref([]) // 被本气象干预方案选中的换热站
+let optional = '' // 可以选换热站的供热站
+let isAlreadyBind = false
 let loadingInstance = null
-const transferData = ref([]) // 换热站结构数据，每个供热站和一定数量的换热站对应
-const weatherMagData = ref([])
-let supplyByIndex = 0 // 监听供热站变化的索引
-let preSupplyName = '' // 上一选中的供热站
-let alreadyBindTransfer = ref([])  // 已绑定的换热站数据（和供热站一一对应）
 const inputStyle = {
   color: 'black',
   height: '24px'
 }
-const BindTransferData = ref([]) // 绑定换热站数据
-const checkboxGroup = ref([]) // checkboxGroup上绑定的数据，是根据自定义Id获取到的换热站数据
-const checkBoxTransferList = ref([]) // 根据供热站变化展示的不同的transfer
-onMounted(() => {
 
-})
+
+/**
+ * 监听Props的变化，传入依赖
+ */
 watchEffect(() => {
   bindData.value = cloneDeep(props.data) // 深拷贝数据
   supplyData.value = cloneDeep(props.supply)
-  transferData.value = cloneDeep(props.transfer)
-  weatherMagData.value = cloneDeep(props.allWeatherMagData)
-})  // 监听props的变化，传入依赖
-watchEffect(() => {
-  if (bindData.value.supplyName !== preSupplyName) {
-    checkboxGroup.value.length = 0
-    preSupplyName = bindData.value.supplyName
-  }
-})
-watchEffect(() => {
-  // 监听绑定的bindData.supplyName的变换，返回对应的换热站数据
-  checkBoxTransferList.value.length = 0 // 每次供热站的值变化后，清空当前展示的数据，重新赋值
-  transferData.value.forEach(item => {
-    if (item.supplyName === bindData.value.supplyName){
-      item.transferList.forEach(transferObj => {
-          checkBoxTransferList.value.push({
-            unitId: transferObj.unitId,
-            unitName: transferObj.unitName,
-            isUsed: transferObj.isUsed,
-            customizeId: transferObj.customizeId
-          })
-      })
-    }
-  })
-  // console.log("根据供热站变化的换热站数据计算属性",selTransferCheckBoxLs.value)
 })
 
+
 function onSubmit() {
   supplyData.value.forEach(item => {
-    if (item.supplyName === bindData.value.supplyName) {
-      bindData.value.supplyId = item.supplyId
+    if (item.supplyId === bindData.value.supplyId) {
+      bindData.value.supplyName = item.supplyName
     }
   })
-  checkboxGroup.value.forEach(item => {
+  selectedTransfer.value.forEach(item=>{
     bindData.value.transfers.push({
       customizeId: bindData.value.customizeId,
       unitId: item,
@@ -103,62 +82,78 @@ function onSubmit() {
   })
   emit('onConfirm', bindData.value)
 } // 点击保存按钮
-function getBindTransfer() { // 获取绑定换热站数据，若在onMounted中无法调用失败（id可能为空）,则在opOpen时操作
+/**
+ * 获取换热站数据
+ * @param supplyId 供热站Id
+ * @param isAvailable 是否可用，默认为true，表示可用
+ */
+async function getTransfer(supplyId, isAvailable = true) {
+  selectedTransfer.value.length = 0  // 置空，不然会重复添加
   let param = {
-    id: bindData.value.customizeId
+    customizeId: bindData.value.customizeId,
+    supplyId: supplyId
   }
-  getTransfer(param).then(res => {
-    BindTransferData.value = res.data
-    checkboxGroup.value.length = 0  // 每一次打开弹窗都会根据新的Id获取获取对应的换热站数据，并且清空原数组，重新赋值
-    BindTransferData.value.forEach(item => {
-      checkboxGroup.value.push(item.unitId)
-    })
-  })
-} // 获取当前绑定的换热站数据
-
-function onOpen() {
-  loadingInstance = ElLoading.service({target: '.el-dialog'})
-  getBindTransfer()
-  getAlreadyBindTransfer()
-}
-function checkBoxChange(val) {
-
-}
-
-
-// 获取所有已绑定换热站数据
-async function getAlreadyBindTransfer() {
-  alreadyBindTransfer.value = []
-  for (const supplyItem of supplyData.value) {
-    let tempObj = {supplyName: "", transfers: []}
-    tempObj.supplyName = supplyItem.supplyName
-    for (let weaItem of weatherMagData.value) {
-      if (supplyItem.supplyName === weaItem.supplyName) {
-        const res = await getTransfer({id: weaItem.customizeId})
-        if (res.data.length) {
-          res.data.forEach(item => {
-            tempObj.transfers.push({...item})
-          })
+  /**
+   * @param res {供热站Id,供热站名称，是否可用，是否被本方案选择}
+   */
+  const result = await getTransferInterface(param)
+  transferData.value = result.data
+  for (const item of transferData.value) {
+    if (!isAvailable) {
+      item.selected = item.selected.toLowerCase() === 'true' ? true : false
+      item.enabled = false
+      if (item.selected) {
+        selectedTransfer.value.push(item.transferId)
       }
+    } else {
+      item.selected = item.selected.toLowerCase() === 'true' ? true : false
+      item.enabled = item.enabled.toLowerCase() === 'true' ? true : false
+      if (item.selected) {
+        selectedTransfer.value.push(item.transferId)
       }
     }
-    alreadyBindTransfer.value.push(cloneDeep(tempObj))
-  } // 找到所有已绑定的换热站
-  for (const alreadyEle of alreadyBindTransfer.value) {
-    for (const alreadyTransItem of alreadyEle.transfers) {
-      for (const transferEle of transferData.value) {
-        for (const transferItem of transferEle.transferList) {
-          if(alreadyTransItem.unitId === transferItem.unitId){
-            transferItem.isUsed = true
-            transferItem.customizeId = alreadyTransItem.customizeId
-            break  // 找到一个相同的换热站，标记状态为以使用，跳出循环
   }
+  loadingInstance.close()
+}
+
+
+function onOpen() {
+  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
+      getTransfer(bindData.value.supplyId)
     }
   }
+  loadingInstance.close()
+}
+
+/**
+ * 根据供热站改变获取对应的换热站数据
+ * 触发时机：selectChange
+ * @param val  supplyId
+ */
+function selectChange(val) {
+  loadingInstance = ElLoading.service({target: '.el-dialog'})
+    if (selectedTransfer.value.length === 0) {
+      getTransfer(val)
+    } else if(bindData.value.supplyId === optional){
+      getTransfer(val)
+    }else {
+      getTransfer(val, false)
     }
-  } // 为以绑定的换热站标记为以使用，并加入绑定的气象干预数据
   loadingInstance.close()
 }
+
+/**
+ * 触发时机：checkboxGroupChange
+ * @param val
+ */
+function checkboxChange(val) {
+  console.log('checkboxChange====>>>===>>>', val)
+}
 </script>
 <template>
   <el-dialog
@@ -178,23 +173,30 @@ async function getAlreadyBindTransfer() {
         <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.supplyName" placeholder="" style="width: 210px;" class="custom-select"
+            <el-select
+                v-model="bindData.supplyId"
+                @change="selectChange"
+                placeholder="请选择供热站"
+                style="width: 210px;"
+                class="custom-select"
                 size="small">
               <el-option v-for="item in supplyData" :key="item.supplyId" :label="item.supplyName"
-                         :value="item.supplyName"/>  <!--此处还需考虑-->
+                         :value="item.supplyId"/>
             </el-select>
           </el-col>
         </el-row>
         <el-row class="select-row">
           <el-col :span="8" class="content-col-label">换热站：</el-col>
           <el-col :span="16" class="content-col-value">
-            <el-checkbox-group @change="checkBoxChange" v-model="checkboxGroup" style="width: 510px">
-              <el-checkbox v-for="item in checkBoxTransferList" :disabled="item.isUsed  && item.customizeId !== bindData.customizeId" :key="item.unitId"
-                           :label="item.unitName" :value="item.unitId"></el-checkbox>
+            <el-checkbox-group
+                v-model="selectedTransfer"
+                @change="checkboxChange">
+              <el-checkbox
+                  v-for="item in transferData"
+                  :disabled="!item.enabled"
+                  :key="item.transferId"
+                  :label="item.transferName" :value="item.transferId"></el-checkbox>
             </el-checkbox-group>
-            <!--            <el-checkbox-group v-model="bindData.heatExchangeList" style="width: 510px">-->
-            <!--              <el-checkbox v-for="item in heatExchangeList" :key="item" :label="item"/>-->
-            <!--            </el-checkbox-group>-->
           </el-col>
         </el-row>
       </div>