Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
f731d304 by lihua
Options

盘点新建表分类改为级联选择框

1 parent 268dca6e
Inline Side-by-side
Showing 2 changed files with 148 additions and 65 deletions
src/views/data_inventory/tableCreateExisting.vue
......@@ -282,7 +282,8 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [],
if (item.classifyDetailGuid === targetGuid) {
return {
path,
route
route,
item
}; // 找到目标节点，返回路径
}
if (item.children && item.children.length > 0) {
......@@ -295,34 +296,11 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [],
return null; // 未找到目标节点
};
// 存储分级数据
const gradeInfo = ref<any>();
const handleClassifyChange = (row, value) => {
console.log('row2', row, value)
const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
const handleCascaderChange = (row, value) => {
const pathInfo = findDDatabasePath(treeSelectOptions.value, value?.length ? value[value.length - 1] : '')
row.classifyDetailNameRoutes = pathInfo.path;
row.classifyDetailGuidRoutes = pathInfo.route;
// if (!row.classifyDetailGuid) {
// row.gradeGuid = null;
// row.gradeOptions = [];
// return;
// }
// if (gradeInfo.value) {
// refGradeGuid.value = findRefGradeGuid(treeSelectOptions.value, row.classifyDetailGuid);
// row.classifyDetailName = refGradeGuid.value.classifyName;
// getGradeList({ classifyGradeGuid: refGradeGuid.value.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
// if (res.code === proxy.$passCode) {
// row.gradeOptions = res.data.records || [];
// } else {
// ElMessage.error(res.msg);
// }
// });
// }
};
const handleNodeClick = (row, node, data) => {
console.log('row1', row, node, data)
// 在gradeInfo找到item.guid === row.gradeGuid
let node = pathInfo.item;
if (gradeInfo.value) {
const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
if (matchedItem) {
......@@ -342,8 +320,57 @@ const handleNodeClick = (row, node, data) => {
}
});
}
};
}
// 存储分级数据
const gradeInfo = ref<any>();
// const handleClassifyChange = (row, value) => {
// console.log('row2', row, value)
// const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
// row.classifyDetailNameRoutes = pathInfo.path;
// row.classifyDetailGuidRoutes = pathInfo.route;
// // if (!row.classifyDetailGuid) {
// // row.gradeGuid = null;
// // row.gradeOptions = [];
// // return;
// // }
// // if (gradeInfo.value) {
// // refGradeGuid.value = findRefGradeGuid(treeSelectOptions.value, row.classifyDetailGuid);
// // row.classifyDetailName = refGradeGuid.value.classifyName;
// // getGradeList({ classifyGradeGuid: refGradeGuid.value.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
// // if (res.code === proxy.$passCode) {
// // row.gradeOptions = res.data.records || [];
// // } else {
// // ElMessage.error(res.msg);
// // }
// // });
// // }
// };
// const handleNodeClick = (row, node, data) => {
// console.log('row1', row, node, data)
// // 在gradeInfo找到item.guid === row.gradeGuid
// if (gradeInfo.value) {
// const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
// if (matchedItem) {
// row.gradeDetailGuid = matchedItem.guid;
// row.gradeDetailName = matchedItem.name;
// }
// } else {
// getGradeList({ classifyGradeGuid: node.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
// if (res.code === proxy.$passCode) {
// gradeInfo.value = res.data.records || [];
// row.gradeOptions = res.data.records || [];
// const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
// row.gradeDetailGuid = matchedItem.guid;
// row.gradeDetailName = matchedItem.name;
// } else {
// ElMessage.error(res.msg);
// }
// });
// }
// }
const isPrevious = ref(false);
/** 上一步 */
......@@ -983,7 +1010,7 @@ onActivated(() => {
</el-table-column>
<!-- 数据库表列 -->
<el-table-column prop="tableChName" label="数据库表" width="280">
<el-table-column prop="tableChName" label="数据库表" width="200">
<template #header>
<span>主题表名称</span>
<span style="color:red;margin-left: 2px;">*</span>
......@@ -1165,15 +1192,25 @@ onActivated(() => {
<!-- 分类（不可编辑）classifyName -->
<el-table-column prop="classifyDetailNameRoutes" label="分类" width="150" show-overflow-tooltip>
<el-table-column prop="classifyDetailNameRoutes" label="分类" width="200" show-overflow-tooltip>
<template #default="scope">
<!-- 如果当前行是编辑状态，显示 tree-select -->
<div v-if="scope.row.isEdit">
<el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
<el-cascader
ref="cascaderRef" v-model="scope.row.classifyDetailGuid" :options="treeSelectOptions" :props="{
checkStrictly: false,
expandTrigger: 'hover',
label: 'classifyName',
value: 'classifyDetailGuid',
}"
:show-all-levels="true" :disabled="false"
:clearable="true"
@change="val => handleCascaderChange(scope.row, val)" />
<!-- <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
:props="treeSelectProps" placeholder="请选择分类" clearable filterable
@change="(value) => handleClassifyChange(scope.row, value)"
@node-click="(node, data) => handleNodeClick(scope.row, node, data)">
</el-tree-select>
</el-tree-select> -->
</div>
<!-- 否则直接显示分类名称 -->
<div v-else>
......@@ -1360,15 +1397,25 @@ onActivated(() => {
<!-- 分类（不可编辑）classifyName -->
<el-table-column prop="classifyDetailNameRoutes" label="分类" width="150" show-overflow-tooltip>
<el-table-column prop="classifyDetailNameRoutes" label="分类" width="200" show-overflow-tooltip>
<template #default="scope">
<!-- 如果当前行是编辑状态，显示 tree-select -->
<div v-if="scope.row.isEdit">
<el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
<el-cascader
ref="cascaderRef" v-model="scope.row.classifyDetailGuid" :options="treeSelectOptions" :props="{
checkStrictly: false,
expandTrigger: 'hover',
label: 'classifyName',
value: 'classifyDetailGuid',
}"
:show-all-levels="true" :disabled="false"
:clearable="true"
@change="val => handleCascaderChange(scope.row, val)" />
<!-- <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
:props="treeSelectProps" placeholder="请选择分类" clearable filterable
@change="(value) => handleClassifyChange(scope.row, value)"
@node-click="(node, data) => handleNodeClick(scope.row, node, data)">
</el-tree-select>
</el-tree-select> -->
</div>
<!-- 否则直接显示分类名称 -->
<div v-else>
......
src/views/data_inventory/tableCreateFile.vue
......@@ -219,27 +219,27 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [],
};
const gradeInfo = ref<any>();
const handleClassifyChange = (row, value) => {
const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
row.classifyDetailNameRoutes = pathInfo.path;
row.classifyDetailGuidRoutes = pathInfo.route;
// 查找选中的节点
// const selectedNode = getTreeNode(treeSelectOptions.value, value);
// if (selectedNode) {
// getGradeList({ classifyGradeGuid: selectedNode.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
// if (res.code === proxy.$passCode) {
// gradeInfo.value = res.data.records || [];
// row.gradeOptions = res.data.records || [];
// } else {
// ElMessage.error(res.msg);
// }
// });
// row.classifyDetailName = selectedNode.classifyName;
// } else {
// console.error("未找到对应的节点");
// row.classifyDetailName = ""; // 重置分类名
// }
};
// const handleClassifyChange = (row, value) => {
// const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
// row.classifyDetailNameRoutes = pathInfo.path;
// row.classifyDetailGuidRoutes = pathInfo.route;
// // 查找选中的节点
// // const selectedNode = getTreeNode(treeSelectOptions.value, value);
// // if (selectedNode) {
// // getGradeList({ classifyGradeGuid: selectedNode.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
// // if (res.code === proxy.$passCode) {
// // gradeInfo.value = res.data.records || [];
// // row.gradeOptions = res.data.records || [];
// // } else {
// // ElMessage.error(res.msg);
// // }
// // });
// // row.classifyDetailName = selectedNode.classifyName;
// // } else {
// // console.error("未找到对应的节点");
// // row.classifyDetailName = ""; // 重置分类名
// // }
// };
const gradeOptions = ref<any>()
// 获取分级
......@@ -253,17 +253,43 @@ const getGrade = async () => {
}
}
const handleNodeClick = (row, node, data) => {
setTimeout(() => {
// 在gradeInfo找到item.guid === row.gradeGuid
// const handleNodeClick = (row, node, data) => {
// setTimeout(() => {
// // 在gradeInfo找到item.guid === row.gradeGuid
// const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
// if (matchedItem) {
// row.gradeDetailGuid = matchedItem.guid;
// row.gradeDetailName = matchedItem.name;
// }
// }, 300);
// }
const handleCascaderChange = (row, value) => {
const pathInfo = findDDatabasePath(treeSelectOptions.value, value?.length ? value[value.length - 1] : '')
row.classifyDetailNameRoutes = pathInfo.path;
row.classifyDetailGuidRoutes = pathInfo.route;
let node = pathInfo.item;
if (gradeInfo.value) {
const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
if (matchedItem) {
row.gradeDetailGuid = matchedItem.guid;
row.gradeDetailName = matchedItem.name;
}
}, 300);
}
} else {
getGradeList({ classifyGradeGuid: node.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
if (res.code === proxy.$passCode) {
gradeInfo.value = res.data.records || [];
row.gradeOptions = res.data.records || [];
const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
row.gradeDetailGuid = matchedItem.guid;
row.gradeDetailName = matchedItem.name;
} else {
ElMessage.error(res.msg);
}
});
}
};
const getTreeNode = (tree, value) => {
for (const node of tree) {
......@@ -2054,15 +2080,25 @@ const tableSelectFields = computed(() => {
<div v-else>{{ scope.row.classifyDetailName || '--' }}</div>
</template>
</el-table-column> -->
<el-table-column prop="classifyDetailNameRoutes" label="分类" width="150" show-overflow-tooltip>
<el-table-column prop="classifyDetailNameRoutes" label="分类" width="200" show-overflow-tooltip>
<template #default="scope">
<!-- 如果当前行是编辑状态，显示 tree-select -->
<div v-if="scope.row.isEdit">
<el-tree-select v-if="scope.row['isEdit']" v-model="scope.row['classifyDetailGuid']"
<el-cascader
ref="cascaderRef" v-model="scope.row.classifyDetailGuid" :options="treeSelectOptions" :props="{
checkStrictly: false,
expandTrigger: 'hover',
label: 'classifyName',
value: 'classifyDetailGuid',
}"
:show-all-levels="true" :disabled="false"
:clearable="true"
@change="val => handleCascaderChange(scope.row, val)" />
<!-- <el-tree-select v-if="scope.row['isEdit']" v-model="scope.row['classifyDetailGuid']"
:data="treeSelectOptions" :props="treeSelectProps" placeholder="请选择分类" clearable filterable
@change="(value) => handleClassifyChange(scope.row, value)"
@node-click="(node, data) => handleNodeClick(scope.row, node, data)">
</el-tree-select>
</el-tree-select> -->
</div>
<!-- 否则直接显示分类名称 -->
<div v-else>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!