613按钮加载，模拟数据

src/views/model/index.vue

@@ -170,7 +170,6 @@
               v-model="row.value"
               placeholder="请选择"
               class="full-width-select"
-              @change="(val) => handleShapeChange(row, val)"
             >
               <el-option
                 v-for="option in row.options"
@@ -187,7 +186,6 @@
             />
             <el-button
               v-else-if="row.valueType === 3"
-              @click="handleClick(row)"
             ></el-button>
             <div v-else>{{ row.valueDef }}</div>
           </template>
@@ -371,6 +369,7 @@ const btnfunc = (name) => {
   if (name === "run") {
     runProject()
   }else if(name === "SLdata"){
+    getSLData();
     SLdatadialog.value = true;
   }
 }
@@ -389,8 +388,90 @@ const runProject = () => {
     })
 }
 
+const getSLData =  async () => {
+  const params = {
+    transCode: "ES0012",
+    pid: pid.value
+  }
+
+  try {
+    const res = await request(params) // 使用 await 等待请求完成
+    tableSLData.value = res.rows.map((item) => ({
+      ...item,
+      isVisible: true // 默认所有行都可见
+    }))
+    console.log("tableSLData.value", tableSLData.value)
+
+    // 使用 for...of 循环以便使用 await
+    for (const item of tableSLData.value) {
+      if (!item.pcaId) continue
+
+      // 并行处理 value 和 unit 的初始化
+      const promises = []
+
+      if (item.valueType === 1) {
+        promises.push(getlistopt(item, "value"))
+      }
+
+      if (item.unitType !== "无") {
+        promises.push(getlistopt(item, "unit"))
+      } else {
+        item.unit = "无"
+      }
+
+      // 等待当前 item 的所有初始化完成
+      await Promise.all(promises)
+    }
+
+    console.log("所有数据初始化完成")
+
+  } catch (err) {
+    console.error("初始化失败:", err)
+    ElMessage.error("初始化失败")
+  }
+}
+
+const getlistopt = async (item, gettype) => {
+  let params = {}
+  if (gettype === "value") {
+    params = {
+      transCode: "BES001",
+      type: item.valueDef
+    }
+  } else {
+    params = {
+      transCode: "BES001",
+      type: item.unitType
+    }
+  }
+
+  try {
+    const res = await request(params)
+    // console.log("选项获取成功", res)
+
+    if (gettype === "value") {
+      if (
+        item.value === undefined ||
+        item.value === null ||
+        item.value === ""
+      ) {
+        item.value = res.rows?.[0]?.val ?? ""
+      }
+      item.options = res.rows || []
+    } else if (gettype === "unit") {
+      if (item.unit === undefined || item.unit === null || item.unit === "") {
+        item.unit = res.rows?.[0]?.val ?? ""
+      }
+      item.unitoptions = res.rows || []
+    }
+  } catch (err) {
+    console.error("err", err)
+    ElMessage.error("选项初始化失败")
+  }
+}
+
 const saveSLTabelDialog = () => {
-  
+  SLdatadialog.value = false
 }
 
 

src/views/model/vueflow/aside/asideData.vue

@@ -38,6 +38,7 @@
                     />
                     <el-button
                       v-else-if="row.valueType === 3"
+                      :loading="loadingStates[row.pcaId] || false"
                       @click="handleClick(row)"
                     ></el-button>
                     <div v-else>{{ row.valueDef }}</div>
@@ -69,6 +70,57 @@
             </Pane>
             <Pane min-size="20" size="50" max-size="80">
               <!-- <div>xia</div> -->
+               <el-table :data="resultData" border class="datatable">
+                <el-table-column type="index" width="40" label="" />
+                <el-table-column prop="name" label="属性"> </el-table-column>
+                <el-table-column prop="value" label="值">
+                  <template #default="{ row }">
+                    <el-select
+                      v-if="row.valueType === 1"
+                      v-model="row.value"
+                      placeholder="请选择"
+                      class="full-width-select"
+                    >
+                      <el-option
+                        v-for="option in row.options"
+                        :key="option.val"
+                        :label="option.tag"
+                        :value="option.val"
+                      >
+                      </el-option>
+                    </el-select>
+                    <el-input
+                      v-else-if="row.valueType === 2"
+                      v-model="row.value"
+                      class="full-width-input"
+                    />
+                    <el-button
+                      v-else-if="row.valueType === 3"
+                      :loading="loadingStates[row.pcaId] || false"
+                    ></el-button>
+                    <div v-else>{{ row.valueDef }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="unit" label="单位" width="100">
+                  <template #default="{ row }">
+                    <el-select
+                      v-if="row.unitType !== '无'"
+                      v-model="row.unit"
+                      placeholder="请选择"
+                      class="full-width-select"
+                    >
+                      <el-option
+                        v-for="option in row.unitoptions"
+                        :key="option.val"
+                        :label="option.tag"
+                        :value="option.val"
+                      >
+                      </el-option>
+                    </el-select>
+                    <div v-else>{{ row.unitType }}</div>
+                  </template>
+                </el-table-column>
+              </el-table>
             </Pane>
           </Splitpanes>
         </el-tab-pane>
@@ -260,6 +312,7 @@ import {
   ElSelect,
   ElMessageBox
 } from "element-plus"
+import { Loading } from '@element-plus/icons-vue'
 
 const activename = ref("data")
 
@@ -270,6 +323,8 @@ const comdata = ref()
 const paneTabledialog = ref(false)
 const paneKVdialog = ref(false)
 const dialogname = ref("")
+// 用于侧栏按钮打开弹窗加载
+const loadingStates = ref({})
 
 // data表格按钮点击弹窗表格
 const tableColumns = ref([])
@@ -286,6 +341,8 @@ const filteredData = computed(() => {
   return comdata.value ? comdata.value.filter((item) => item.isVisible) : []
 })
 
+const resultData = ref([])
+
 // 定义形状与隐藏字段的映射
 const SHAPE_HIDDEN_FIELDS = {
   0: [
@@ -437,6 +494,11 @@ const getbtnvalue = async (pcaId, dataType) => {
         if (!header) return
 
         const row = rowMap.get(rowId)
+
+        // 为表头的下拉框赋值
+        if(header.unitType !== "无"){
+          header.unit = item.unit;
+        }
         
         // 处理下拉类型
         if (header?.valueType === 1) {
@@ -535,18 +597,30 @@ const getlistopt = async (item, gettype) => {
   }
 }
 
-const handleClick = (row) => {
-  dialogname.value = row.name
-
-  pcaId = row.pcaId
-  const dataType = row.dataType
-  getbtnvalue(pcaId, dataType)
-
-  if (dataType === 1) {
-    paneTabledialog.value = true
-    // console.log("tableColumns:", tableColumns.value)
-  } else if (dataType === 2) {
-    paneKVdialog.value = true
+const handleClick = async (row) => {
+  try {
+    loadingStates.value = { ...loadingStates.value, [row.pcaId]: true };  // 开始加载
+    console.log("jiazaibiao",loadingStates.value)
+    dialogname.value = row.name;
+    pcaId = row.pcaId;
+    const dataType = row.dataType;
+
+    // 因为公用table，清除上次数据
+    tableData.value = []
+    
+    // 等待异步操作完成
+    await getbtnvalue(pcaId, dataType);
+    
+    // 确保数据准备好后再打开弹窗
+    if (dataType === 1) {
+      paneTabledialog.value = true;
+    } else if (dataType === 2) {
+      paneKVdialog.value = true;
+    }
+  } catch (error) {
+    console.error("处理点击时出错:", error);
+  } finally {
+    loadingStates.value = { ...loadingStates.value, [row.pcaId]: false };   // 无论成功失败都结束加载
   }
 }
 
@@ -804,7 +878,7 @@ defineExpose({
 
 .datatable {
   width: 100%;
-  max-height: 300px;
+  max-height: 290px;
   overflow: auto;
 }