es-web/src/views/model/vueflow/aside/asideData.vue

<template>
  <el-container style="height: 100%">
    <el-header class="panel-header">
      <p>{{ titlename }}</p>
      <el-button style="border: none" @click="closePanel">
        <el-icon><Close /></el-icon>
      </el-button>
    </el-header>
    <el-main>
      <el-tabs v-model="activename" style="height: 100%">
        <el-tab-pane label="数据" name="data" style="height: 100%">
          <Splitpanes horizontal>
            <Pane min-size="20" size="50" max-size="80">
              <el-table :data="comdata" 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"
                      @click="handleClick(row)"
                    ></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>
              <div class="footbtn">
                <el-button @click="savecomvalue">保存</el-button>
              </div>
            </Pane>
            <Pane min-size="20" size="50" max-size="80">
              <!-- <div>xia</div> -->
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <!-- <el-tab-pane label="模拟数据" name="simulatedata" style="height: 100%">
          <Splitpanes horizontal>
            <Pane min-size="20" size="50" max-size="80">
              <div>shang</div>
            </Pane>
            <Pane min-size="20" size="50" max-size="80">
              <div>xia</div>
            </Pane>
          </Splitpanes>
        </el-tab-pane> -->
      </el-tabs>
    </el-main>

    <!-- 用于数据按钮table -->
    <el-dialog
      v-model="paneTabledialog"
      align-center
      :append-to-body="true"
      width="700"
      class="dialog_class"
      draggable
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <!-- <el-image :src="icon" fit="contain"></el-image> -->
          <h4 :id="titleId" :class="titleClass">{{ dialogname }}</h4>
        </div>
      </template>
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="4"> </el-col>
        <el-col :span="5"> </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100" @click="handleAddRow">添加</el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100" @click="handleDeleteSelected"
            >删除</el-button
          >
        </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100" @click="handleInsertSelected"
            >插入</el-button
          >
        </el-col>
      </el-row>
      <!-- <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="4"> </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100" @click="handleAddRow">添加</el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100" @click="handleDeleteSelected"
            >删除</el-button
          >
        </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100" @click="handleInsertSelected"
            >插入</el-button
          >
        </el-col>
        <el-col :span="5">
          <el-button class="btnwidth100">修正</el-button>
        </el-col>
      </el-row> -->
      <el-table
        :data="tableData"
        border
        height="300"
        style="width: 100%"
        @row-click="handleRowClick"
        highlight-current-row
        ref="tableRef"
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column
          v-for="col in tableColumns"
          :key="col.code"
          :label="col.name"
          :min-width="200"
        >
          <template #header>
            <div class="unitheader">
              <div>{{ col.name }}</div>
              <div style="width: 50%; min-width: 100px">
                <el-select
                  v-if="col.unit !== '无'"
                  v-model="col.unit"
                  size="small"
                  @change="(val) => handleUnitChange(col, val)"
                >
                  <el-option
                    v-for="opt in col.unitoptions"
                    :key="opt.val"
                    :label="opt.tag"
                    :value="opt.val"
                  />
                </el-select>
              </div>
            </div>
          </template>

          <template #default="{ row }">
            <el-select
              v-if="col.valueType === 1"
              v-model="row[col.code].value"
              class="full-width-select"
            >
              <el-option
                v-for="option in row[col.code].options"
                :key="option.val"
                :label="option.tag"
                :value="option.val"
              >
              </el-option>
            </el-select>
            <el-input
              v-else-if="col.valueType === 2"
              v-model="row[col.code].value"
              class="full-width-input"
            />
            <el-button v-else-if="col.valueType === 3"></el-button>
            <div v-else>{{ col.valueDef }}</div>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <span class="lastbtn">
          <el-button @click="paneTabledialog = false">{{
            $t("dialog.cancel")
          }}</el-button>
          <el-button type="primary" @click="saveTabelDialog()">
            {{ $t("dialog.ok") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用于数据按钮键值对 -->
    <el-dialog
      v-model="paneKVdialog"
      align-center
      :append-to-body="true"
      width="500"
      class="dialog_class"
      draggable
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <!-- <el-image :src="icon" fit="contain"></el-image> -->
          <h4 :id="titleId" :class="titleClass">{{ dialogname }}</h4>
        </div>
      </template>
      <el-table
        :data="tableKVData"
        border
        height="300"
        style="width: 100%"
      >
        <el-table-column type="index" label="编号" width="60"></el-table-column>
        <el-table-column prop="property" label="属性"></el-table-column>
        <el-table-column prop="value" label="值">
          <template #default="{ row }">
            <el-input v-model="row.value" class="full-width-input"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <span class="lastbtn">
          <el-button @click="paneKVdialog = false">{{
            $t("dialog.cancel")
          }}</el-button>
          <el-button type="primary" @click="saveKVTabelDialog">
            {{ $t("dialog.ok") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>
<script setup>
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { Close } from "@element-plus/icons-vue"
import { request } from "@/utils/request"
import {
  ElMessage,
  ElButton,
  ElDialog,
  ElSelect,
  ElMessageBox
} from "element-plus"

const activename = ref("data")

const emit = defineEmits(["close"])

const titlename = ref()
const comdata = ref()
const paneTabledialog = ref(false)
const paneKVdialog = ref(false)
const dialogname = ref("")

// data表格按钮点击弹窗表格
const tableColumns = ref([])
const tableData = ref([])
let pcaId = ref("") //项目组件的属性id

const tableKVData = ref([])

const closePanel = () => {
  emit("close")
}

const getcomdata = async (pcId) => {
  // 改为 async 函数
  const params = {
    transCode: "ES0009",
    pcId: pcId
  }

  try {
    const res = await request(params) // 使用 await 等待请求完成
    titlename.value = `${res.name}${res.idCode}${res.ser}`
    comdata.value = res.rows
    console.log("comdata.value", comdata.value)

    // 使用 for...of 循环以便使用 await
    for (const item of comdata.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 getbtnvalue = (pcaId, dataType) => {
  const params = {
    transCode: "ES0010",
    pcaId: pcaId
  }

  request(params)
    .then(async (res) => {
      if (dataType === 1) {
        // 遍历 headers，初始化单位值
        for (const header of res.headers) {
          if (header.unitType !== "无") {
            // 调用 getlistopt 获取单位选项并设置默认值
            await getlistopt(header, "unit")
          } else {
            // 如果不需要单位，直接设置为"无"
            header.unit = "无"
            header.unitoptions = [] // 保持选项列表为空
          }
        }

        // 设置表格列
        tableColumns.value = res.headers || []

        // 将 datas 按行号（pcadgId）分组，每行是一个对象
        const rowMap = new Map()

        res.datas?.forEach(async (item) => {
          // 添加 async
          const rowId = item.pcadgId
          if (!rowMap.has(rowId)) {
            rowMap.set(rowId, { pcadgId: rowId })
          }

          const header = res.headers.find((h) => h.cdvId === item.cdvId)
          if (header) {
            const row = rowMap.get(rowId)

            // 如果是下拉类型，调用 getlistopt 获取选项
            if (header.valueType === 1) {
              await getlistopt(header, "value") // 获取选项并设置默认值
              // 使用从 getlistopt 获取的 value（如果 item.value 为空）
              row[header.code] = {
                value: item.value || header.value, // 优先使用 item.value
                unit: item.unit,
                options: header.options, // 添加 options 到行数据
                pcadgId: item.pcadgId,
                pcadId: item.pcadId,
                cdvId: item.cdvId
              }
            } else {
              // 非下拉类型保持原样
              row[header.code] = {
                value: item.value,
                unit: item.unit,
                pcadgId: item.pcadgId,
                pcadId: item.pcadId,
                cdvId: item.cdvId
              }
            }
          }
        })

        tableData.value = Array.from(rowMap.values())
        console.log("tableData.value", tableData.value)
      } else if (dataType === 2) {
        // 处理属性-值对形式
        const kvData = []
        // 记录行号
        let rowCount = 0;

        res.headers?.forEach((header) => {
          // 找到对应的数据项
          const dataItem = res.datas?.find(
            (item) => item.cdvId === header.cdvId
          )
          rowCount++;

          kvData.push({
            cdvId: header.cdvId,
            property: header.name, // 属性名称
            value: dataItem ? dataItem.value : "",
            pcadgId: dataItem ? dataItem.pcadgId : "",
            pcadId: rowCount,
            unit: dataItem ? dataItem.unit : "无"
          })
        })

        tableKVData.value = kvData
        // console.log("tableKVData.value", tableKVData.value)
      }
    })
    .catch((err) => {
      console.error('err',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 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 savecomvalue = () => {
  console.log("comdata:", comdata.value)
  // dataType 为 -1 的数据
  const validItems = comdata.value.filter((item) => item.dataType === -1)
  const pcavals = validItems
    .map((item) => {
      const pcaId = item.pcaId ?? ""
      const value = item.value ?? ""
      const unit = item.unit ?? ""
      return `${pcaId},${value},${unit}`
    })
    .join(";")
  const params = {
    transCode: "ES0008",
    pcavals: pcavals
  }
  request(params)
    .then((res) => {
      ElMessage.success("保存成功")
    })
    .catch((err) => {
      console.error("err", err)
      ElMessage.error("保存失败")
    })
}

//
// 关于表格弹窗的操作
//
const tableRef = ref(null) // 表格引用
const currentRow = ref(null) // 当前选中行

// 创建新行的辅助函数
const createNewRow = () => {
  const rowIndex = tableData.value.length + 1
  const newRow = {}
  tableColumns.value.forEach((col) => {
    newRow[col.code] = {
      value: col.valueType === 1 ? col.options?.[0]?.val || "" : "",
      unit: col.unit || "无",
      options: col.valueType === 1 ? col.options : [],
      pcadgId: rowIndex,
      pcadId: "",
      cdvId: col.cdvId
    }
  })
  return newRow
}

const handleAddRow = () => {
  const newRow = createNewRow()
  tableData.value.push(newRow)
  // 选中新添加的行
  nextTick(() => {
    currentRow.value = newRow
    tableRef.value?.setCurrentRow(newRow)
  })
}

// 处理行点击
const handleRowClick = (row) => {
  currentRow.value = row
  // 高亮显示选中行
  tableRef.value?.setCurrentRow(row)
}

// 删除选中行
const handleDeleteSelected = () => {
  if (!currentRow.value) {
    ElMessage.warning("请先点击选择要删除的行")
    return
  }

  const index = tableData.value.findIndex((row) => row === currentRow.value)
  if (index !== -1) {
    tableData.value.splice(index, 1)

    // 更新后续行的 pcadgId
    for (let i = index; i < tableData.value.length; i++) {
      const newPcadgId = i + 1 // 行号从1开始

      // 更新行中每个列的 pcadgId
      tableColumns.value.forEach((col) => {
        if (
          tableData.value[i][col.code] &&
          typeof tableData.value[i][col.code] === "object"
        ) {
          tableData.value[i][col.code].pcadgId = newPcadgId
        }
      })
    }

    // 删除后自动选中上一行或下一行（如果还有行）
    if (tableData.value.length > 0) {
      const newIndex = Math.min(index, tableData.value.length - 1)
      currentRow.value = tableData.value[newIndex]
      nextTick(() => {
        tableRef.value?.setCurrentRow(currentRow.value)
      })
    } else {
      currentRow.value = null
    }
  }
}

// 在选中行下方插入新行
const handleInsertSelected = () => {
  if (!currentRow.value && tableData.value.length > 0) {
    ElMessage.warning("请先点击选择要插入的位置")
    return
  }

  const index = currentRow.value
    ? tableData.value.findIndex((row) => row === currentRow.value)
    : -1

  // 创建新行时使用正确的行号（插入位置+1）
  const newRow = createNewRow()

  // 插入新行
  tableData.value.splice(index + 1, 0, newRow)

  // 更新所有后续行的行号，包括该行
  for (let i = index + 1; i < tableData.value.length; i++) {
    const currentRowPcadgId = i + 1

    // 更新行中每个列的 pcadgId
    tableColumns.value.forEach((col) => {
      if (tableData.value[i][col.code]) {
        tableData.value[i][col.code].pcadgId = currentRowPcadgId
      }
    })
  }

  // 选中新插入的行
  nextTick(() => {
    currentRow.value = newRow
    tableRef.value?.setCurrentRow(newRow)
  })
}

const handleUnitChange = (column, newUnit) => {
  // 更新表头的单位值
  column.unit = newUnit

  // 更新该列所有行的单位值
  tableData.value.forEach((row) => {
    if (row[column.code]) {
      row[column.code].unit = newUnit
    }
  })
}

// 保存
const saveTabelDialog = () => {
  // 检查表格数据是否为空
  if (!tableData.value || tableData.value.length === 0) {
    ElMessage.warning("请设置正确的数据");
    return;
  }
  console.log("表格数据：", tableData.value)
  // 收集所有行数据
  const formattedData = tableData.value.map((row) => {
    // 收集当前行的所有字段数据
    const rowFields = tableColumns.value.map((col) => {
      const cellData = row[col.code]
      if (!cellData) return ""

      // 组装 cdvId-pcadgId-pcadId-value-unit 格式
      return [
        cellData.cdvId || "", // cdvId
        cellData.pcadgId || "", // pcadgId (行号)
        cellData.pcadId || "", // pcadId
        cellData.value || "", // value
        cellData.unit || "" // unit
      ].join(",") // 字段间用逗号分隔
    })

    return rowFields.join(";") // 行内字段用分号分隔
  })

  // 最终数据用分号分隔各行
  const result = formattedData.join(";")

  // console.log("格式化后的表格数据：", result);

  const params = {
    transCode: "ES0011",
    pcaId: pcaId,
    pcadvals: result
  }
  request(params)
    .then((res) => {
      paneTabledialog.value = false
      ElMessage.success("保存成功")
    })
    .catch((err) => {
      console.error("err", err)
      ElMessage.error("保存失败")
    })
}


// 
// 关于KV表格弹窗的操作
//
const saveKVTabelDialog = () => {
  // 检查表格数据是否为空
  if (!tableKVData.value || tableKVData.value.length === 0) {
    ElMessage.warning("请设置正确的数据");
    return;
  }
  console.log('表格数据：',tableKVData.value)
  const result = tableKVData.value.map((item)=>{
    return [item.cdvId, item.pcadgId, item.pcadId, item.value, item.unit].join(',')
  }).join(";");
  // console.log('格式化后的字符串：', result);
  const params = {
    transCode: "ES0011",
    pcaId: pcaId,
    pcadvals: result
  }
  request(params)
    .then((res) => {
      paneKVdialog.value = false
      ElMessage.success("保存成功")
    })
    .catch((err) => {
      console.error("err", err)
      ElMessage.error("保存失败")
    })
}


defineExpose({
  getcomdata
})
</script>
<style scoped>
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.datatable {
  width: 100%;
  max-height: 300px;
  overflow: auto;
}

.footbtn {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 10px 20px;
}

.unitheader {
  width: 100%;
  display: flex;
  gap: 10px;
}

.unitheader :deep(.el-select__wrapper) {
  width: 100%;
}

.btnwidth100 {
  width: 100%;
}
</style>