Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
25daf871 by lihua
Options

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

1 parent 58536cbf
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[] = [], ...@@ -282,7 +282,8 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [],
282 if (item.classifyDetailGuid === targetGuid) { 282 if (item.classifyDetailGuid === targetGuid) {
283 return { 283 return {
284 path, 284 path,
285 route 285 route,
286 item
286 }; // 找到目标节点，返回路径 287 }; // 找到目标节点，返回路径
287 } 288 }
288 if (item.children && item.children.length > 0) { 289 if (item.children && item.children.length > 0) {
...@@ -295,34 +296,11 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [], ...@@ -295,34 +296,11 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [],
295 return null; // 未找到目标节点 296 return null; // 未找到目标节点
296 }; 297 };
297 298
298 // 存储分级数据 299 const handleCascaderChange = (row, value) => {
299 const gradeInfo = ref<any>(); 300 const pathInfo = findDDatabasePath(treeSelectOptions.value, value?.length ? value[value.length - 1] : '')
300 const handleClassifyChange = (row, value) => {
301 console.log('row2', row, value)
302 const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
303 row.classifyDetailNameRoutes = pathInfo.path; 301 row.classifyDetailNameRoutes = pathInfo.path;
304 row.classifyDetailGuidRoutes = pathInfo.route; 302 row.classifyDetailGuidRoutes = pathInfo.route;
305 // if (!row.classifyDetailGuid) { 303 let node = pathInfo.item;
306 // row.gradeGuid = null;
307 // row.gradeOptions = [];
308 // return;
309 // }
310 // if (gradeInfo.value) {
311 // refGradeGuid.value = findRefGradeGuid(treeSelectOptions.value, row.classifyDetailGuid);
312 // row.classifyDetailName = refGradeGuid.value.classifyName;
313 // getGradeList({ classifyGradeGuid: refGradeGuid.value.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
314 // if (res.code === proxy.$passCode) {
315 // row.gradeOptions = res.data.records || [];
316 // } else {
317 // ElMessage.error(res.msg);
318 // }
319 // });
320 // }
321 };
322
323 const handleNodeClick = (row, node, data) => {
324 console.log('row1', row, node, data)
325 // 在gradeInfo找到item.guid === row.gradeGuid
326 if (gradeInfo.value) { 304 if (gradeInfo.value) {
327 const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid); 305 const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
328 if (matchedItem) { 306 if (matchedItem) {
...@@ -342,8 +320,57 @@ const handleNodeClick = (row, node, data) => { ...@@ -342,8 +320,57 @@ const handleNodeClick = (row, node, data) => {
342 } 320 }
343 }); 321 });
344 } 322 }
323 };
345 324
346 } 325 // 存储分级数据
326 const gradeInfo = ref<any>();
327 // const handleClassifyChange = (row, value) => {
328 // console.log('row2', row, value)
329 // const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
330 // row.classifyDetailNameRoutes = pathInfo.path;
331 // row.classifyDetailGuidRoutes = pathInfo.route;
332 // // if (!row.classifyDetailGuid) {
333 // // row.gradeGuid = null;
334 // // row.gradeOptions = [];
335 // // return;
336 // // }
337 // // if (gradeInfo.value) {
338 // // refGradeGuid.value = findRefGradeGuid(treeSelectOptions.value, row.classifyDetailGuid);
339 // // row.classifyDetailName = refGradeGuid.value.classifyName;
340 // // getGradeList({ classifyGradeGuid: refGradeGuid.value.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
341 // // if (res.code === proxy.$passCode) {
342 // // row.gradeOptions = res.data.records || [];
343 // // } else {
344 // // ElMessage.error(res.msg);
345 // // }
346 // // });
347 // // }
348 // };
349
350 // const handleNodeClick = (row, node, data) => {
351 // console.log('row1', row, node, data)
352 // // 在gradeInfo找到item.guid === row.gradeGuid
353 // if (gradeInfo.value) {
354 // const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
355 // if (matchedItem) {
356 // row.gradeDetailGuid = matchedItem.guid;
357 // row.gradeDetailName = matchedItem.name;
358 // }
359 // } else {
360 // getGradeList({ classifyGradeGuid: node.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
361 // if (res.code === proxy.$passCode) {
362 // gradeInfo.value = res.data.records || [];
363 // row.gradeOptions = res.data.records || [];
364 // const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
365 // row.gradeDetailGuid = matchedItem.guid;
366 // row.gradeDetailName = matchedItem.name;
367 // } else {
368 // ElMessage.error(res.msg);
369 // }
370 // });
371 // }
372
373 // }
347 374
348 const isPrevious = ref(false); 375 const isPrevious = ref(false);
349 /** 上一步 */ 376 /** 上一步 */
...@@ -983,7 +1010,7 @@ onActivated(() => { ...@@ -983,7 +1010,7 @@ onActivated(() => {
983 </el-table-column> 1010 </el-table-column>
984 1011
985 <!-- 数据库表列 --> 1012 <!-- 数据库表列 -->
986 <el-table-column prop="tableChName" label="数据库表" width="280"> 1013 <el-table-column prop="tableChName" label="数据库表" width="200">
987 <template #header> 1014 <template #header>
988 <span>主题表名称</span> 1015 <span>主题表名称</span>
989 <span style="color:red;margin-left: 2px;">*</span> 1016 <span style="color:red;margin-left: 2px;">*</span>
...@@ -1165,15 +1192,25 @@ onActivated(() => { ...@@ -1165,15 +1192,25 @@ onActivated(() => {
1165 1192
1166 <!-- 分类（不可编辑）classifyName --> 1193 <!-- 分类（不可编辑）classifyName -->
1167 1194
1168 <el-table-column prop="classifyDetailNameRoutes" label="分类" width="150" show-overflow-tooltip> 1195 <el-table-column prop="classifyDetailNameRoutes" label="分类" width="200" show-overflow-tooltip>
1169 <template #default="scope"> 1196 <template #default="scope">
1170 <!-- 如果当前行是编辑状态，显示 tree-select --> 1197 <!-- 如果当前行是编辑状态，显示 tree-select -->
1171 <div v-if="scope.row.isEdit"> 1198 <div v-if="scope.row.isEdit">
1172 <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions" 1199 <el-cascader
1200 ref="cascaderRef" v-model="scope.row.classifyDetailGuid" :options="treeSelectOptions" :props="{
1201 checkStrictly: false,
1202 expandTrigger: 'hover',
1203 label: 'classifyName',
1204 value: 'classifyDetailGuid',
1205 }"
1206 :show-all-levels="true" :disabled="false"
1207 :clearable="true"
1208 @change="val => handleCascaderChange(scope.row, val)" />
1209 <!-- <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
1173 :props="treeSelectProps" placeholder="请选择分类" clearable filterable 1210 :props="treeSelectProps" placeholder="请选择分类" clearable filterable
1174 @change="(value) => handleClassifyChange(scope.row, value)" 1211 @change="(value) => handleClassifyChange(scope.row, value)"
1175 @node-click="(node, data) => handleNodeClick(scope.row, node, data)"> 1212 @node-click="(node, data) => handleNodeClick(scope.row, node, data)">
1176 </el-tree-select> 1213 </el-tree-select> -->
1177 </div> 1214 </div>
1178 <!-- 否则直接显示分类名称 --> 1215 <!-- 否则直接显示分类名称 -->
1179 <div v-else> 1216 <div v-else>
...@@ -1360,15 +1397,25 @@ onActivated(() => { ...@@ -1360,15 +1397,25 @@ onActivated(() => {
1360 1397
1361 <!-- 分类（不可编辑）classifyName --> 1398 <!-- 分类（不可编辑）classifyName -->
1362 1399
1363 <el-table-column prop="classifyDetailNameRoutes" label="分类" width="150" show-overflow-tooltip> 1400 <el-table-column prop="classifyDetailNameRoutes" label="分类" width="200" show-overflow-tooltip>
1364 <template #default="scope"> 1401 <template #default="scope">
1365 <!-- 如果当前行是编辑状态，显示 tree-select --> 1402 <!-- 如果当前行是编辑状态，显示 tree-select -->
1366 <div v-if="scope.row.isEdit"> 1403 <div v-if="scope.row.isEdit">
1367 <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions" 1404 <el-cascader
1405 ref="cascaderRef" v-model="scope.row.classifyDetailGuid" :options="treeSelectOptions" :props="{
1406 checkStrictly: false,
1407 expandTrigger: 'hover',
1408 label: 'classifyName',
1409 value: 'classifyDetailGuid',
1410 }"
1411 :show-all-levels="true" :disabled="false"
1412 :clearable="true"
1413 @change="val => handleCascaderChange(scope.row, val)" />
1414 <!-- <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
1368 :props="treeSelectProps" placeholder="请选择分类" clearable filterable 1415 :props="treeSelectProps" placeholder="请选择分类" clearable filterable
1369 @change="(value) => handleClassifyChange(scope.row, value)" 1416 @change="(value) => handleClassifyChange(scope.row, value)"
1370 @node-click="(node, data) => handleNodeClick(scope.row, node, data)"> 1417 @node-click="(node, data) => handleNodeClick(scope.row, node, data)">
1371 </el-tree-select> 1418 </el-tree-select> -->
1372 </div> 1419 </div>
1373 <!-- 否则直接显示分类名称 --> 1420 <!-- 否则直接显示分类名称 -->
1374 <div v-else> 1421 <div v-else>
......
src/views/data_inventory/tableCreateFile.vue
...@@ -219,27 +219,27 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [], ...@@ -219,27 +219,27 @@ const findDDatabasePath = (data: any[], targetGuid: string, path: string[] = [],
219 }; 219 };
220 220
221 const gradeInfo = ref<any>(); 221 const gradeInfo = ref<any>();
222 const handleClassifyChange = (row, value) => { 222 // const handleClassifyChange = (row, value) => {
223 const pathInfo = findDDatabasePath(treeSelectOptions.value, value) 223 // const pathInfo = findDDatabasePath(treeSelectOptions.value, value)
224 row.classifyDetailNameRoutes = pathInfo.path; 224 // row.classifyDetailNameRoutes = pathInfo.path;
225 row.classifyDetailGuidRoutes = pathInfo.route; 225 // row.classifyDetailGuidRoutes = pathInfo.route;
226 // 查找选中的节点 226 // // 查找选中的节点
227 // const selectedNode = getTreeNode(treeSelectOptions.value, value); 227 // // const selectedNode = getTreeNode(treeSelectOptions.value, value);
228 // if (selectedNode) { 228 // // if (selectedNode) {
229 // getGradeList({ classifyGradeGuid: selectedNode.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => { 229 // // getGradeList({ classifyGradeGuid: selectedNode.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
230 // if (res.code === proxy.$passCode) { 230 // // if (res.code === proxy.$passCode) {
231 // gradeInfo.value = res.data.records || []; 231 // // gradeInfo.value = res.data.records || [];
232 // row.gradeOptions = res.data.records || []; 232 // // row.gradeOptions = res.data.records || [];
233 // } else { 233 // // } else {
234 // ElMessage.error(res.msg); 234 // // ElMessage.error(res.msg);
235 // } 235 // // }
236 // }); 236 // // });
237 // row.classifyDetailName = selectedNode.classifyName; 237 // // row.classifyDetailName = selectedNode.classifyName;
238 // } else { 238 // // } else {
239 // console.error("未找到对应的节点"); 239 // // console.error("未找到对应的节点");
240 // row.classifyDetailName = ""; // 重置分类名 240 // // row.classifyDetailName = ""; // 重置分类名
241 // } 241 // // }
242 }; 242 // };
243 243
244 const gradeOptions = ref<any>() 244 const gradeOptions = ref<any>()
245 // 获取分级 245 // 获取分级
...@@ -253,17 +253,43 @@ const getGrade = async () => { ...@@ -253,17 +253,43 @@ const getGrade = async () => {
253 } 253 }
254 } 254 }
255 255
256 const handleNodeClick = (row, node, data) => { 256 // const handleNodeClick = (row, node, data) => {
257 setTimeout(() => { 257 // setTimeout(() => {
258 // 在gradeInfo找到item.guid === row.gradeGuid 258 // // 在gradeInfo找到item.guid === row.gradeGuid
259 // const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
260 // if (matchedItem) {
261 // row.gradeDetailGuid = matchedItem.guid;
262 // row.gradeDetailName = matchedItem.name;
263 // }
264 // }, 300);
265
266 // }
267
268 const handleCascaderChange = (row, value) => {
269 const pathInfo = findDDatabasePath(treeSelectOptions.value, value?.length ? value[value.length - 1] : '')
270 row.classifyDetailNameRoutes = pathInfo.path;
271 row.classifyDetailGuidRoutes = pathInfo.route;
272 let node = pathInfo.item;
273 if (gradeInfo.value) {
259 const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid); 274 const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
260 if (matchedItem) { 275 if (matchedItem) {
261 row.gradeDetailGuid = matchedItem.guid; 276 row.gradeDetailGuid = matchedItem.guid;
262 row.gradeDetailName = matchedItem.name; 277 row.gradeDetailName = matchedItem.name;
263 } 278 }
264 }, 300); 279 } else {
265 280 getGradeList({ classifyGradeGuid: node.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
266 } 281 if (res.code === proxy.$passCode) {
282 gradeInfo.value = res.data.records || [];
283 row.gradeOptions = res.data.records || [];
284 const matchedItem = gradeInfo.value.find((item) => item.guid === node.gradeGuid);
285 row.gradeDetailGuid = matchedItem.guid;
286 row.gradeDetailName = matchedItem.name;
287 } else {
288 ElMessage.error(res.msg);
289 }
290 });
291 }
292 };
267 293
268 const getTreeNode = (tree, value) => { 294 const getTreeNode = (tree, value) => {
269 for (const node of tree) { 295 for (const node of tree) {
...@@ -2054,15 +2080,25 @@ const tableSelectFields = computed(() => { ...@@ -2054,15 +2080,25 @@ const tableSelectFields = computed(() => {
2054 <div v-else>{{ scope.row.classifyDetailName || '--' }}</div> 2080 <div v-else>{{ scope.row.classifyDetailName || '--' }}</div>
2055 </template> 2081 </template>
2056 </el-table-column> --> 2082 </el-table-column> -->
2057 <el-table-column prop="classifyDetailNameRoutes" label="分类" width="150" show-overflow-tooltip> 2083 <el-table-column prop="classifyDetailNameRoutes" label="分类" width="200" show-overflow-tooltip>
2058 <template #default="scope"> 2084 <template #default="scope">
2059 <!-- 如果当前行是编辑状态，显示 tree-select --> 2085 <!-- 如果当前行是编辑状态，显示 tree-select -->
2060 <div v-if="scope.row.isEdit"> 2086 <div v-if="scope.row.isEdit">
2061 <el-tree-select v-if="scope.row['isEdit']" v-model="scope.row['classifyDetailGuid']" 2087 <el-cascader
2088 ref="cascaderRef" v-model="scope.row.classifyDetailGuid" :options="treeSelectOptions" :props="{
2089 checkStrictly: false,
2090 expandTrigger: 'hover',
2091 label: 'classifyName',
2092 value: 'classifyDetailGuid',
2093 }"
2094 :show-all-levels="true" :disabled="false"
2095 :clearable="true"
2096 @change="val => handleCascaderChange(scope.row, val)" />
2097 <!-- <el-tree-select v-if="scope.row['isEdit']" v-model="scope.row['classifyDetailGuid']"
2062 :data="treeSelectOptions" :props="treeSelectProps" placeholder="请选择分类" clearable filterable 2098 :data="treeSelectOptions" :props="treeSelectProps" placeholder="请选择分类" clearable filterable
2063 @change="(value) => handleClassifyChange(scope.row, value)" 2099 @change="(value) => handleClassifyChange(scope.row, value)"
2064 @node-click="(node, data) => handleNodeClick(scope.row, node, data)"> 2100 @node-click="(node, data) => handleNodeClick(scope.row, node, data)">
2065 </el-tree-select> 2101 </el-tree-select> -->
2066 </div> 2102 </div>
2067 <!-- 否则直接显示分类名称 --> 2103 <!-- 否则直接显示分类名称 -->
2068 <div v-else> 2104 <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!