From 7040bd5937f81ce2185e2dc98b918c241db7ad69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 18 Aug 2025 15:37:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A5=E8=A1=A8=E7=94=9F?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/boardGenerate/index1.vue            | 163 ++++++++++++++++++
 .../boardGenerate/nodes/form/tableNode.vue    |  22 ++-
 src/views/boardGenerate/tool.js               |   1 +
 3 files changed, 180 insertions(+), 6 deletions(-)

diff --git a/src/views/boardGenerate/index1.vue b/src/views/boardGenerate/index1.vue
index 58ab641..b11163e 100644
--- a/src/views/boardGenerate/index1.vue
+++ b/src/views/boardGenerate/index1.vue
@@ -806,6 +806,11 @@
                     配置表格
                   </el-button>
                 </el-form-item>
+                <el-form-item label="单元格设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
+                  <el-button class="optionsBtn" plain @click="tableCellOptionsVisible = true">
+                    配置表格
+                  </el-button>
+                </el-form-item>
                 <el-form-item label="表头是否显示" v-if="Object.keys(nodeAttrForm).includes('isThShow')">
                   <el-switch v-model="nodeAttrForm.isThShow" />
                 </el-form-item>
@@ -1264,6 +1269,80 @@
       <el-button size="small" :icon="Plus" style="width: 100%" @click="nodeAttrForm.tableOptions.push({})">添加
       </el-button>
     </el-dialog>
+    <el-dialog v-model="tableCellOptionsVisible" title="单元格设置" width="100%">
+      {{ (getInputData(nodeDataForm.id) || {}).tableData }}
+      <el-table
+        :data="(getInputData(nodeDataForm.id)||{}).tableData"
+        style="--el-table-border-color:#000"
+        :border="true"
+        :header-cell-style="{color:nodeAttrForm.thColor,backgroundColor:`${nodeAttrForm?.thBgColor} !important`}"
+        :header-row-style="{height:nodeAttrForm.thHeight }"
+        :show-header="nodeAttrForm.isThShow"
+        :style="{height: '100%'}"
+      >
+        <el-table-column v-for="(i,k) in nodeAttrForm.tableOptions" :key="k" :align="i.align" prop="date"
+                         :label="i.name"
+                         :width="i.width">
+          <template #default="scope">
+            <div @click.stop="cellClick(scope)">
+              <span
+                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
+                }}</span>
+              <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
+                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
+              </el-tag>
+              <el-image :preview-src-list="[scope.row[i.field]]"
+                        v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
+                        :style="{height:nodeAttrForm.tdHeight}"
+                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k + 1}`] || i.formula))"
+                        fit="contain" />
+              <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
+                           :stroke-width="26"
+                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)))" />
+              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
+                }}</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog v-model="cellOptionsVisible" title="单元格设置" width="500">
+      <el-form :model="cellOption" label-width="auto">
+        <el-form-item label="类型">
+          <el-select
+            @change="cellTypeChange"
+            v-model="cellOption.type"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option
+              label="文本"
+              value="文本"
+            />
+            <el-option
+              label="标签"
+              value="标签"
+            />
+            <el-option
+              label="进度条"
+              value="进度条"
+            />
+            <el-option
+              label="图片"
+              value="图片"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计算公式">
+          <el-input @change="cellFormulaChange" v-model="cellOption.formula" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cellOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
     <el-dialog v-model="tableClassOptionsVisible" title="动画设置" width="500">
       <el-form :model="nodeAttrForm.tableClassOption" label-width="auto">
         <el-form-item label="滚动速度">
@@ -1548,6 +1627,8 @@ const selectIconInput = ref('');
 const collapseActiveName = ref('1');
 const loading = ref(false);
 const pageSettingVisible = ref(false);
+const tableCellOptionsVisible = ref(false);
+const cellOptionsVisible = ref(false);
 const tableOptionsVisible = ref(false);
 const tableClassOptionsVisible = ref(false);
 const swiperOptionsVisible = ref(false);
@@ -1566,6 +1647,7 @@ const nodes = ref([{
 const edges = ref([]);
 const customData = ref([]);
 const customBoard = ref([]);
+const cellOption = ref({});
 const boardData = ref({});
 const pageData = ref({});
 const customDataForm = ref({});
@@ -1814,6 +1896,87 @@ const pitchOnNode = (e) => {
   nodeDataForm.value = e;
   customDataForm.value = e.data.customData;
 };
+
+const cellClick = (e) => {
+  cellOption.value = {
+    ...(nodeAttrForm.value.tableOptions?.[e.cellIndex] || {}),
+    $index: e.$index,
+    $cellIndex: e.cellIndex
+
+  };
+  console.log(e);
+  cellOptionsVisible.value = true;
+  console.log(cellOption.value);
+};
+
+const cellTypeChange = (value) => {
+  if (!nodeAttrForm.value.tableCellOptions) {
+    nodeAttrForm.value.tableCellOptions = [];
+  }
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
+  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
+  option.type = cellOption.value.type;
+  if (index === -1) {
+    nodeAttrForm.value.tableCellOptions.push({
+      index: cellOption.value.$index,
+      cellIndex: cellOption.value.$cellIndex,
+      type: value,
+      formula: cellOption.value.formula
+    });
+  } else {
+    nodeAttrForm.value.tableCellOptions[index].type = value;
+  }
+  console.log(nodeAttrForm.value);
+};
+
+const cellFormulaChange = (value) => {
+  console.log(value);
+  if (!nodeAttrForm.value.tableCellOptions) {
+    nodeAttrForm.value.tableCellOptions = [];
+  }
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
+  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
+  option.formula = cellOption.value.formula;
+  if (index === -1) {
+    nodeAttrForm.value.tableCellOptions.push({
+      index: cellOption.value.$index,
+      cellIndex: cellOption.value.$cellIndex,
+      type: cellOption.value.type,
+      formula: value
+    });
+  } else {
+    nodeAttrForm.value.tableCellOptions[index].formula = value;
+  }
+  console.log(nodeAttrForm.value);
+
+};
+
+const formulaFun = (row, formula) => {
+  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
+    if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
+      return row[key] || 0;
+    } else {
+      return `"${row[key]}"`;
+    }
+  });
+  let res = 0;
+  try {
+    res = eval(data);
+  } catch (err) {
+    res = 0;
+  }
+  if (`${res}`.trim() !== '' && !isNaN(res)) {
+    res = res.toFixed(2);
+  }
+  return res;
+};
+const setText = (value, row, formula) => {
+  if (!formula) {
+    return value;
+  } else {
+    return formulaFun(row, formula);
+  }
+};
 </script>
 <style scoped lang="less">
 
diff --git a/src/views/boardGenerate/nodes/form/tableNode.vue b/src/views/boardGenerate/nodes/form/tableNode.vue
index 4d033b5..fb8de0a 100644
--- a/src/views/boardGenerate/nodes/form/tableNode.vue
+++ b/src/views/boardGenerate/nodes/form/tableNode.vue
@@ -7,7 +7,7 @@
     <div class="custom-node"
          :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-table
-        :data="props.inputData.tableData"
+        :data="getData(props.inputData.tableData)"
         v-if="scrollShow"
         style="--el-table-border-color:#000"
         :border="true"
@@ -22,20 +22,20 @@
           <template #default="scope">
             <div>
               <span
-                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, i.formula)
+                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
                 }}</span>
               <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
-                {{ setText(scope.row[i.field], scope.row, i.formula) }}
+                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
               </el-tag>
               <el-image :preview-src-list="[scope.row[i.field]]"
                         v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
                         :style="{height:props.data.options.tdHeight}"
-                        :src="setText(scope.row[i.field],scope.row,i.formula)"
+                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k+1}`] || i.formula))"
                         fit="contain" />
               <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
                            :stroke-width="26"
-                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, i.formula))" />
-              <span v-else>{{ setText(scope.row[i.field], scope.row, i.formula)
+                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k+1}`] || i.formula)))" />
+              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
                 }}</span>
             </div>
           </template>
@@ -337,9 +337,19 @@ const setText = (value, row, formula) => {
   if (!formula) {
     return value;
   } else {
+    console.log(formula);
     return formulaFun(row, formula);
   }
 };
+const getData = (e) => {
+  let val = e;
+  (props.data.options.tableCellOptions || []).forEach(item => {
+    e[item.index][`cellType${item.cellIndex + 1}`] = item.type;
+    e[item.index][`cellFormula${item.cellIndex + 1}`] = item.formula;
+  });
+  console.log(e);
+  return e;
+};
 watch(() => JSON.parse(JSON.stringify([props.inputData?.tableData || '', props.data.options])), (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
     scrollShow.value = false;
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index f20f4ef..ce07480 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -319,6 +319,7 @@ const getOption = (e) => {
   } else if (e === 'scrollTable' || e === 'table') {
     return {
       tableOptions: [],
+      tableCellOptions: [],
       tableClassOption: {}, isThShow: true,
       thHeight: '32px',
       tdHeight: '28px',