From fd6509f13bf0d3a206fded4391eaff4dbb31c897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 23 May 2025 02:01:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E7=89=88=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/boardGenerate/api/boardList.js |  29 ++++
 src/views/boardGenerate/boardList.vue    | 203 ++++-------------------
 src/views/boardGenerate/index.vue        | 203 ++++++++++++++++++-----
 3 files changed, 224 insertions(+), 211 deletions(-)
 create mode 100644 src/views/boardGenerate/api/boardList.js

diff --git a/src/views/boardGenerate/api/boardList.js b/src/views/boardGenerate/api/boardList.js
new file mode 100644
index 0000000..cadc230
--- /dev/null
+++ b/src/views/boardGenerate/api/boardList.js
@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+
+// 获取数据源列表
+export const getBoardListApi = (data) => {
+  return request({
+    url: '/system/designPageConfig/list', method: 'get', params: data
+  });
+};
+
+// 删除数据源
+export const delBoardApi = (id) => {
+  return request({
+    url: '/system/designPageConfig/' + id, method: 'DELETE'
+  });
+};
+
+// 新增数据源
+export const addBoardApi = (data) => {
+  return request({
+    url: '/system/designPageConfig', method: 'POST', data
+  });
+};
+
+// 编辑数据源
+export const editBoardApi = (data) => {
+  return request({
+    url: '/system/designPageConfig', method: 'PUT', data
+  });
+};
diff --git a/src/views/boardGenerate/boardList.vue b/src/views/boardGenerate/boardList.vue
index b1a4e47..561d7e8 100644
--- a/src/views/boardGenerate/boardList.vue
+++ b/src/views/boardGenerate/boardList.vue
@@ -2,11 +2,8 @@
   <div>
     <el-card style="margin: 8px">
       <el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px">
-        <el-form-item label="数据源名称">
-          <el-input v-model="selectForm.dataSourceName" clearable />
-        </el-form-item>
-        <el-form-item label="请求地址">
-          <el-input v-model="selectForm.requestUrl" clearable />
+        <el-form-item label="页面名称">
+          <el-input v-model="selectForm.pageConfigName" clearable />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="queryList">查询</el-button>
@@ -14,17 +11,17 @@
       </el-form>
     </el-card>
     <el-card style="margin: 8px">
-      <el-button plain type="primary" icon="Plus" @click="constructionData">新增</el-button>
-      <!--      <el-button plain type="success" icon="Edit" @click="editData">修改</el-button>-->
-      <!--      <el-button plain type="danger" icon="Delete" @click="delData">删除</el-button>-->
+      <el-button plain type="primary" icon="Plus" @click="addBoard">新增</el-button>
     </el-card>
     <el-card style="margin: 8px">
       <el-table :data="tableData" style="width: 100%" v-loading="loading">
-        <el-table-column prop="dataSourceName" label="数据源名称" align="center" />
-        <el-table-column prop="requestMethod" label="请求方式" align="center" />
-        <el-table-column prop="requestUrl" label="请求地址" align="center" />
+        <el-table-column prop="pageConfigName" label="页面名称" align="center" />
         <el-table-column label="操作" width="300" align="center">
           <template #default="scope">
+            <el-button text type="primary" size="small" @click="compileBoard(scope.row)">编辑
+            </el-button>
+            <el-button text type="primary" size="small" @click="viewboard(scope.row)">查看
+            </el-button>
             <el-button text type="primary" size="small" @click="editDataSource(scope.row)">修改
             </el-button>
             <el-button
@@ -53,98 +50,19 @@
     <el-dialog v-model="constructionDataFormVisible" draggable width="800">
       <template #header>
         <div style="width: 100%">
-          <span>{{ constructionDataForm.dataSourceId ? '修改' : '构造' }}数据源</span>
-          <div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
-            <span>简易模式</span>
-            <el-switch v-model="isEasy" />
-          </div>
+          <span>{{ constructionDataForm.pageConfigId ? '修改' : '添加' }}看板</span>
         </div>
       </template>
       <el-form :model="constructionDataForm">
-        <el-form-item label="数据名称" prop="dataSourceName">
-          <el-input v-model="constructionDataForm.dataSourceName" />
-        </el-form-item>
-        <el-form-item label="请求地址" prop="requestUrl">
-          <el-input v-model="constructionDataForm.requestUrl">
-            <template #prepend>
-              <el-select v-model="constructionDataForm.requestMethod" style="width: 100px">
-                <el-option label="get" value="get" />
-                <el-option label="post" value="post" />
-                <el-option label="socket" value="socket" />
-              </el-select>
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="请求数据" v-if="isEasy">
-          <el-table :data="paramsTableData" style="width: 100%">
-            <el-table-column label="字段名称" min-width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.name" style="width: 100%" />
-              </template>
-            </el-table-column>
-            <el-table-column label="备注" min-width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.remark" style="width: 100%" />
-              </template>
-            </el-table-column>
-            <el-table-column label="测试数据" min-width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.test" style="width: 100%" />
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" min-width="120">
-              <template #default="scope">
-                <el-button link size="small" type="primary"
-                           @click="paramsTableData.splice(scope.$index, 1)">
-                  删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-button style="width: 100%" @click="paramsTableData.push({})">
-            添加字段
-          </el-button>
-        </el-form-item>
-        <el-form-item label="输出数据">
-          <el-table :data="constructionDataForm.designDataFieldList" style="width: 100%">
-            <el-table-column label="字段名称" min-width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.name" style="width: 100%" />
-              </template>
-            </el-table-column>
-            <el-table-column v-if="!isEasy" label="字段层级" min-width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.tier" style="width: 100%" />
-              </template>
-            </el-table-column>
-            <el-table-column label="备注" min-width="120">
-              <template #default="scope">
-                <el-input v-model="scope.row.remark" style="width: 100%" />
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" min-width="120">
-              <template #default="scope">
-                <el-button link size="small" type="primary"
-                           @click="constructionDataForm.designDataFieldList.splice(scope.$index, 1)">
-                  删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-button style="width: 100%" @click="constructionDataForm.designDataFieldList.push({})">
-            添加字段
-          </el-button>
-          <el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
-                     @click="findTier">
-            查找
-          </el-button>
+        <el-form-item label="页面名称" prop="pageConfigName">
+          <el-input v-model="constructionDataForm.pageConfigName" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="constructionDataFormVisible = false">关闭</el-button>
           <el-button type="primary" @click="createData ">
-            {{ constructionDataForm.dataSourceId ? '确定' : '创建' }}
+            {{ constructionDataForm.pageConfigId ? '确定' : '创建' }}
           </el-button>
         </div>
       </template>
@@ -152,21 +70,17 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 import request from '@/utils/request';
 import { options } from './tool.js';
-import { addDataSourceApi, delDataSourceApi, editDataSourceApi, getDataSourceList } from './api/dataSource';
 import { ElMessage, ElMessageBox } from 'element-plus';
+import { addBoardApi, delBoardApi, editBoardApi, getBoardListApi } from '@/views/boardGenerate/api/boardList';
+
+const router = useRouter();
 
-const comparisonTable = {
-  starttime: '开始时间',
-  time: '时间',
-  value: '值'
-};
 
-const isEasy = ref(false);
 const loading = ref(false);
-const paramsTableData = ref([]);
 const selectForm = ref({
   pageNum: 1,
   pageSize: 10
@@ -177,7 +91,7 @@ const constructionDataForm = ref({ designDataFieldList: [] });
 const constructionDataFormVisible = ref(false);
 const getList = async () => {
   loading.value = true;
-  getDataSourceList(selectForm.value)
+  getBoardListApi(selectForm.value)
     .then((res) => {
       console.log(res);
       tableData.value = res.rows;
@@ -194,24 +108,13 @@ const queryList = async () => {
 const pageChange = () => {
   getList();
 };
-const constructionData = () => {
-  paramsTableData.value = [];
-  constructionDataForm.value = { designDataFieldList: [] };
-  constructionDataFormVisible.value = true;
-};
-const editData = () => {
-  paramsTableData.value = [];
-  constructionDataForm.value = { designDataFieldList: [] };
-  constructionDataFormVisible.value = true;
-};
-const delData = () => {
-  paramsTableData.value = [];
+const addBoard = () => {
   constructionDataForm.value = { designDataFieldList: [] };
   constructionDataFormVisible.value = true;
 };
 const editDataSource = (e) => {
-  constructionDataFormVisible.value = true;
   constructionDataForm.value = e;
+  constructionDataFormVisible.value = true;
 };
 const delDataSource = (e) => {
   ElMessageBox.confirm(
@@ -224,7 +127,7 @@ const delDataSource = (e) => {
     }
   )
     .then(() => {
-      delDataSourceApi(e.dataSourceId).then(() => {
+      delBoardApi(e.pageConfigId).then(() => {
         ElMessage({
           type: 'success',
           message: '删除成功'
@@ -243,8 +146,12 @@ const createData = () => {
   if (!constructionDataForm.value.designDataFieldList) {
     constructionDataForm.value.designDataFieldList = [];
   }
-  if (constructionDataForm.value.dataSourceId) {
-    editDataSourceApi(constructionDataForm.value).then(() => {
+  if (constructionDataForm.value.pageConfigId) {
+    editBoardApi({
+      ...constructionDataForm.value,
+      designPageEdgesList: constructionDataForm.value.designPageEdgesList || [],
+      designPagePointList: constructionDataForm.value.designPagePointList || []
+    }).then(() => {
       constructionDataFormVisible.value = false;
       ElMessage({
         type: 'success',
@@ -253,7 +160,7 @@ const createData = () => {
       getList();
     });
   } else {
-    addDataSourceApi(constructionDataForm.value).then(() => {
+    addBoardApi({ ...constructionDataForm.value, designPageEdgesList: [], designPagePointList: [] }).then(() => {
       constructionDataFormVisible.value = false;
       ElMessage({
         type: 'success',
@@ -262,58 +169,12 @@ const createData = () => {
       getList();
     });
   }
-  // let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
-  // nowData.push(constructionDataForm.value);
-  // localStorage.setItem('DATANODE', JSON.stringify(nowData));
 };
-const findTier = () => {
-  constructionDataForm.value.designDataFieldList = [];
-  let params = {};
-  (paramsTableData.value || []).forEach((item) => {
-    params[item.name] = item.test;
-  });
-
-  (options.isD ? request : axios.request)({
-    method: constructionDataForm.value.requestMethod,
-    url: constructionDataForm.value.requestUrl,
-    params: constructionDataForm.value.requestMethod === 'get' ? params : '',
-    data: constructionDataForm.value.requestMethod === 'post' ? params : ''
-  }).then(res => {
-    let data = (options.isD ? res : res.data);
-    console.log(data);
-    if (data?.data) {
-      Object.keys(data.data?.[0]).forEach(key => {
-        constructionDataForm.value.designDataFieldList.push({
-          name: key,
-          remark: comparisonTable[key],
-          tier: `data,map%${key}`
-        });
-      });
-    } else if (data?.rows) {
-      console.log(data?.rows);
-      Object.keys(data.rows?.[0]).forEach(key => {
-        constructionDataForm.value.designDataFieldList.push({
-          name: key,
-          remark: comparisonTable[key],
-          tier: `rows,map%${key}`
-        });
-      });
-    } else {
-      let exclude = ['code'];
-      Object.keys(data).forEach(key => {
-        if (!exclude.includes(key.toLowerCase())) {
-          if (typeof data[key] === 'string' || typeof data[key] === 'string') {
-            constructionDataForm.value.designDataFieldList.push({
-              name: key,
-              remark: comparisonTable[key],
-              tier: `${key}`
-            });
-          }
-        }
-      });
-    }
-  });
-
+const compileBoard = (row) => {
+  router.push({ path: '/boardGenerate', query: { id: row.pageConfigId } });
+};
+const viewboard = (row) => {
+  router.push({ path: '/boardView', query: { id: row.pageConfigId } });
 };
 onMounted(async () => {
   await queryList();
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 5fc5980..e22c8c8 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -417,6 +417,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import { v4 as uuidv4 } from 'uuid';
 import { Setting, Check, Close, Plus } from '@element-plus/icons-vue';
 import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core';
@@ -440,7 +441,10 @@ import TextNode from './nodes/form/textNode.vue';
 import ImgNode from './nodes/form/imgNode.vue';
 import AreaNode from './nodes/other/areaNode.vue';
 import tool from './tool';
+import { getDataSourceList } from '@/views/boardGenerate/api/dataSource';
+import { editBoardApi, getBoardListApi } from '@/views/boardGenerate/api/boardList';
 
+const router = useRouter();
 // 获取自定义的方法
 const { onDragStart, onDrop, onDragOver } = tool();
 
@@ -469,12 +473,84 @@ const nodes = ref([{
 const edges = ref([]);
 const customData = ref([]);
 const customBoard = ref([]);
+const boardData = ref({});
 onMounted(async () => {
-  customData.value = JSON.parse(localStorage.getItem('DATANODE') || '[]');
+  getDataSourceList({
+    pageNum: 1,
+    pageSize: 9999999
+  })
+    .then((res) => {
+      customData.value = res.rows.map(e => {
+        return {
+          name: e.dataSourceName,
+          url: e.requestUrl,
+          method: e.requestMethod
+        };
+      });
+    });
   customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
   await nextTick();
-  nodes.value = reactive(JSON.parse(localStorage.getItem('NODES') || '[]'));
-  edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
+
+  getBoardListApi({
+    pageNum: 1,
+    pageSize: 9999999,
+    pageConfigId: router.currentRoute.value.query.id
+  })
+    .then((res) => {
+      let data = res.rows[0] || {};
+      boardData.value = data;
+      nodes.value = data.designPagePointList.map(e => {
+        let data = {};
+        let savaField = ['customData', 'options'];
+        Object.keys(e.data).forEach((key) => {
+          if (savaField.includes(key)) {
+            data[key] = e.data[key];
+          } else {
+            if (Array.isArray(e.data[key])) {
+              data[key] = [];
+            } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+              data[key] = {};
+            } else {
+              data[key] = null;
+            }
+
+          }
+        });
+        return {
+          id: e.pagePointId,
+          name: e.pagePointName,
+          dimensions: {
+            width: e.dimensions.width,
+            height: e.dimensions.height
+          },
+          position: {
+            x: e.position.x,
+            y: e.position.y
+          },
+          type: e.pointType,
+          data: JSON.parse(e.dataContent)
+        };
+      }) || [{
+        id: `area_${uuidv4().replaceAll('-', '_')}`,
+        name: 'area',
+        type: 'area',
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      }];
+      edges.value = data.designPageEdgesList.map(e => {
+        return {
+          id: e.pageEdgesId,
+          source: e.sourceNodeId,
+          target: e.targetNodeId,
+          type: e.edgeType,
+          targetHandle: e.targetHandleId,
+          sourceHandle: e.sourceHandleId
+        };
+      }) || [];
+    });
   pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
 });
 const customDataForm = ref({});
@@ -554,45 +630,92 @@ const pageSetting = () => {
   pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA'));
 };
 const save = () => {
-  localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
-    let data = {};
-    let savaField = ['customData', 'options'];
-    Object.keys(e.data).forEach((key) => {
-      if (savaField.includes(key)) {
-        data[key] = e.data[key];
-      } else {
-        if (Array.isArray(e.data[key])) {
-          data[key] = [];
-        } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
-          data[key] = {};
-        } else {
-          data[key] = null;
-        }
 
-      }
+  editBoardApi({
+    ...boardData.value,
+    designPageEdgesList: nodes.value.map(e => {
+      let data = {};
+      let savaField = ['customData', 'options'];
+      Object.keys(e.data).forEach((key) => {
+        if (savaField.includes(key)) {
+          data[key] = e.data[key];
+        } else {
+          if (Array.isArray(e.data[key])) {
+            data[key] = [];
+          } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+            data[key] = {};
+          } else {
+            data[key] = null;
+          }
+
+        }
+      });
+      return {
+        pagePointId: e.id,
+        pagePointName: e.name,
+        width: e.dimensions.width,
+        height: e.dimensions.height,
+        posX: e.position.x,
+        posY: e.position.y,
+        pointType: e.type,
+        dataContent: JSON.stringify(data)
+      };
+    }),
+    designPagePointList: edges.value.map(e => {
+      return {
+        pageEdgesId: e.id,
+        sourceNodeId: e.source,
+        targetNodeId: e.target,
+        edgeType: e.type,
+        targetHandleId: e.targetHandle,
+        sourceHandleId: e.sourceHandle
+      };
+    })
+  }).then(() => {
+    ElMessage({
+      type: 'success',
+      message: '保存成功'
     });
-    return {
-      id: e.id,
-      name: e.name,
-      dimensions: e.dimensions,
-      position: e.position,
-      type: e.type,
-      data: data
-    };
-  })));
-  localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => {
-    return {
-      id: e.id,
-      source: e.source,
-      target: e.target,
-      type: e.type,
-      animated: e.animated,
-      markerEnd: e.markerEnd,
-      targetHandle: e.targetHandle,
-      sourceHandle: e.sourceHandle,
-      style: e.style
-    };
-  })));
+  });
+  // localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
+  //   let data = {};
+  //   let savaField = ['customData', 'options'];
+  //   Object.keys(e.data).forEach((key) => {
+  //     if (savaField.includes(key)) {
+  //       data[key] = e.data[key];
+  //     } else {
+  //       if (Array.isArray(e.data[key])) {
+  //         data[key] = [];
+  //       } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+  //         data[key] = {};
+  //       } else {
+  //         data[key] = null;
+  //       }
+  //
+  //     }
+  //   });
+  //   return {
+  //     id: e.id,
+  //     name: e.name,
+  //     dimensions: e.dimensions,
+  //     position: e.position,
+  //     type: e.type,
+  //     data: data
+  //   };
+  // })));
+  // localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => {
+  //   return {
+  //     id: e.id,
+  //     source: e.source,
+  //     target: e.target,
+  //     type: e.type,
+  //     animated: e.animated,
+  //     markerEnd: e.markerEnd,
+  //     targetHandle: e.targetHandle,
+  //     sourceHandle: e.sourceHandle,
+  //     style: e.style
+  //   };
+  // })));
 };
 const clear = () => {
   nodes.value = [{