xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看版配置

Browse Source
master
夜笙歌 1 month ago
parent 85bb04eb4d
commit fd6509f13b
3 changed files with 224 additions and 211 deletions
Show Stats Download Patch File Download Diff File

29
src/views/boardGenerate/api/boardList.js
Unescape Escape View File

@ -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
});
};

203
src/views/boardGenerate/boardList.vue
Unescape Escape View File

@ -2,11 +2,8 @@
<div> <div>
<el-card style="margin: 8px"> <el-card style="margin: 8px">
<el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px"> <el-form :inline="true" :model="selectForm" class="demo-form-inline" label-width="120px">
<el-form-item label="数据源名称"> <el-form-item label="页面名称">
<el-input v-model="selectForm.dataSourceName" clearable /> <el-input v-model="selectForm.pageConfigName" clearable />
</el-form-item>
<el-form-item label="请求地址">
<el-input v-model="selectForm.requestUrl" clearable />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="queryList">查询</el-button> <el-button type="primary" @click="queryList">查询</el-button>
@ -14,17 +11,17 @@
</el-form> </el-form>
</el-card> </el-card>
<el-card style="margin: 8px"> <el-card style="margin: 8px">
<el-button plain type="primary" icon="Plus" @click="constructionData">新增</el-button> <el-button plain type="primary" icon="Plus" @click="addBoard">新增</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-card> </el-card>
<el-card style="margin: 8px"> <el-card style="margin: 8px">
<el-table :data="tableData" style="width: 100%" v-loading="loading"> <el-table :data="tableData" style="width: 100%" v-loading="loading">
<el-table-column prop="dataSourceName" label="数据源名称" align="center" /> <el-table-column prop="pageConfigName" label="页面名称" align="center" />
<el-table-column prop="requestMethod" label="请求方式" align="center" />
<el-table-column prop="requestUrl" label="请求地址" align="center" />
<el-table-column label="操作" width="300" align="center"> <el-table-column label="操作" width="300" align="center">
<template #default="scope"> <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 text type="primary" size="small" @click="editDataSource(scope.row)">修改
</el-button> </el-button>
<el-button <el-button
@ -53,98 +50,19 @@
<el-dialog v-model="constructionDataFormVisible" draggable width="800"> <el-dialog v-model="constructionDataFormVisible" draggable width="800">
<template #header> <template #header>
<div style="width: 100%"> <div style="width: 100%">
<span>{{ constructionDataForm.dataSourceId ? '修改' : '构造' }}数据源</span> <span>{{ constructionDataForm.pageConfigId ? '修改' : '添加' }}看板</span>
<div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
<span>简易模式</span>
<el-switch v-model="isEasy" />
</div>
</div> </div>
</template> </template>
<el-form :model="constructionDataForm"> <el-form :model="constructionDataForm">
<el-form-item label="数据名称" prop="dataSourceName"> <el-form-item label="页面名称" prop="pageConfigName">
<el-input v-model="constructionDataForm.dataSourceName" /> <el-input v-model="constructionDataForm.pageConfigName" />
</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> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="constructionDataFormVisible = false">关闭</el-button> <el-button @click="constructionDataFormVisible = false">关闭</el-button>
<el-button type="primary" @click="createData "> <el-button type="primary" @click="createData ">
{{ constructionDataForm.dataSourceId ? '确定' : '创建' }} {{ constructionDataForm.pageConfigId ? '确定' : '创建' }}
</el-button> </el-button>
</div> </div>
</template> </template>
@ -152,21 +70,17 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import request from '@/utils/request'; import request from '@/utils/request';
import { options } from './tool.js'; import { options } from './tool.js';
import { addDataSourceApi, delDataSourceApi, editDataSourceApi, getDataSourceList } from './api/dataSource';
import { ElMessage, ElMessageBox } from 'element-plus'; 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 loading = ref(false);
const paramsTableData = ref([]);
const selectForm = ref({ const selectForm = ref({
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
@ -177,7 +91,7 @@ const constructionDataForm = ref({ designDataFieldList: [] });
const constructionDataFormVisible = ref(false); const constructionDataFormVisible = ref(false);
const getList = async () => { const getList = async () => {
loading.value = true; loading.value = true;
getDataSourceList(selectForm.value) getBoardListApi(selectForm.value)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
tableData.value = res.rows; tableData.value = res.rows;
@ -194,24 +108,13 @@ const queryList = async () => {
const pageChange = () => { const pageChange = () => {
getList(); getList();
}; };
const constructionData = () => { const addBoard = () => {
paramsTableData.value = [];
constructionDataForm.value = { designDataFieldList: [] };
constructionDataFormVisible.value = true;
};
const editData = () => {
paramsTableData.value = [];
constructionDataForm.value = { designDataFieldList: [] };
constructionDataFormVisible.value = true;
};
const delData = () => {
paramsTableData.value = [];
constructionDataForm.value = { designDataFieldList: [] }; constructionDataForm.value = { designDataFieldList: [] };
constructionDataFormVisible.value = true; constructionDataFormVisible.value = true;
}; };
const editDataSource = (e) => { const editDataSource = (e) => {
constructionDataFormVisible.value = true;
constructionDataForm.value = e; constructionDataForm.value = e;
constructionDataFormVisible.value = true;
}; };
const delDataSource = (e) => { const delDataSource = (e) => {
ElMessageBox.confirm( ElMessageBox.confirm(
@ -224,7 +127,7 @@ const delDataSource = (e) => {
} }
) )
.then(() => { .then(() => {
delDataSourceApi(e.dataSourceId).then(() => { delBoardApi(e.pageConfigId).then(() => {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功' message: '删除成功'
@ -243,8 +146,12 @@ const createData = () => {
if (!constructionDataForm.value.designDataFieldList) { if (!constructionDataForm.value.designDataFieldList) {
constructionDataForm.value.designDataFieldList = []; constructionDataForm.value.designDataFieldList = [];
} }
if (constructionDataForm.value.dataSourceId) { if (constructionDataForm.value.pageConfigId) {
editDataSourceApi(constructionDataForm.value).then(() => { editBoardApi({
...constructionDataForm.value,
designPageEdgesList: constructionDataForm.value.designPageEdgesList || [],
designPagePointList: constructionDataForm.value.designPagePointList || []
}).then(() => {
constructionDataFormVisible.value = false; constructionDataFormVisible.value = false;
ElMessage({ ElMessage({
type: 'success', type: 'success',
@ -253,7 +160,7 @@ const createData = () => {
getList(); getList();
}); });
} else { } else {
addDataSourceApi(constructionDataForm.value).then(() => { addBoardApi({ ...constructionDataForm.value, designPageEdgesList: [], designPagePointList: [] }).then(() => {
constructionDataFormVisible.value = false; constructionDataFormVisible.value = false;
ElMessage({ ElMessage({
type: 'success', type: 'success',
@ -262,58 +169,12 @@ const createData = () => {
getList(); getList();
}); });
} }
// let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
// nowData.push(constructionDataForm.value);
// localStorage.setItem('DATANODE', JSON.stringify(nowData));
}; };
const findTier = () => { const compileBoard = (row) => {
constructionDataForm.value.designDataFieldList = []; router.push({ path: '/boardGenerate', query: { id: row.pageConfigId } });
let params = {}; };
(paramsTableData.value || []).forEach((item) => { const viewboard = (row) => {
params[item.name] = item.test; router.push({ path: '/boardView', query: { id: row.pageConfigId } });
});
(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}`
});
}
}
});
}
});
}; };
onMounted(async () => { onMounted(async () => {
await queryList(); await queryList();

167
src/views/boardGenerate/index.vue
Unescape Escape View File

@ -417,6 +417,7 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { Setting, Check, Close, Plus } from '@element-plus/icons-vue'; import { Setting, Check, Close, Plus } from '@element-plus/icons-vue';
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'; 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 ImgNode from './nodes/form/imgNode.vue';
import AreaNode from './nodes/other/areaNode.vue'; import AreaNode from './nodes/other/areaNode.vue';
import tool from './tool'; 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(); const { onDragStart, onDrop, onDragOver } = tool();
@ -469,12 +473,84 @@ const nodes = ref([{
const edges = ref([]); const edges = ref([]);
const customData = ref([]); const customData = ref([]);
const customBoard = ref([]); const customBoard = ref([]);
const boardData = ref({});
onMounted(async () => { 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') || '[]'); customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
await nextTick(); 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')); pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
}); });
const customDataForm = ref({}); const customDataForm = ref({});
@ -554,7 +630,10 @@ const pageSetting = () => {
pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA')); pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA'));
}; };
const save = () => { const save = () => {
localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
editBoardApi({
...boardData.value,
designPageEdgesList: nodes.value.map(e => {
let data = {}; let data = {};
let savaField = ['customData', 'options']; let savaField = ['customData', 'options'];
Object.keys(e.data).forEach((key) => { Object.keys(e.data).forEach((key) => {
@ -572,27 +651,71 @@ const save = () => {
} }
}); });
return { return {
id: e.id, pagePointId: e.id,
name: e.name, pagePointName: e.name,
dimensions: e.dimensions, width: e.dimensions.width,
position: e.position, height: e.dimensions.height,
type: e.type, posX: e.position.x,
data: data posY: e.position.y,
pointType: e.type,
dataContent: JSON.stringify(data)
}; };
}))); }),
localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => { designPagePointList: edges.value.map(e => {
return { return {
id: e.id, pageEdgesId: e.id,
source: e.source, sourceNodeId: e.source,
target: e.target, targetNodeId: e.target,
type: e.type, edgeType: e.type,
animated: e.animated, targetHandleId: e.targetHandle,
markerEnd: e.markerEnd, sourceHandleId: e.sourceHandle
targetHandle: e.targetHandle,
sourceHandle: e.sourceHandle,
style: e.style
}; };
}))); })
}).then(() => {
ElMessage({
type: 'success',
message: '保存成功'
});
});
// 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 = () => { const clear = () => {
nodes.value = [{ nodes.value = [{

Write Preview
Loading…
Cancel
Save