!1909 优化 添加行政区域 时，上级显示为层级名称

Merge pull request !1909 from 夜鹰/v2

Web/src/views/system/region/component/editRegion.vue

@@ -27,9 +27,13 @@
 						</el-form-item>
 					</el-col> -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="上级行政Id" prop="pid" :rules="[{ required: true, message: '上级行政Id不能为空', trigger: 'blur' }]">
+						<el-form-item label="上级行政Id" prop="pid" v-show="false" :rules="[{ required: true, message: '上级行政Id不能为空', trigger: 'blur' }]">
 							<el-input v-model="state.ruleForm.pid" placeholder="上级行政Id或上级行政代码或默认0" clearable />
 						</el-form-item>
+                        <el-form-item label="上级行政" v-if="!state.ruleForm.id">
+                            <!-- <span>{{state.parentNamePath}}</span> -->
+                            <el-input v-model="state.parentNamePath" disabled></el-input>
+                        </el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="行政名称" prop="name" :rules="[{ required: true, message: '行政名称不能为空', trigger: 'blur' }]">
@@ -83,12 +87,13 @@ const ruleFormRef = ref();
 const state = reactive({
 	isShowDialog: false,
 	ruleForm: {} as UpdateRegionInput,
+    parentNamePath: '顶级'
 });
-// 级联选择器配置选项
-//const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'name' };
 
 // 打开弹窗
-const openDialog = (row: any) => {
+const openDialog = (row: any, parentNamePath?: string) => {
+    if(parentNamePath) state.parentNamePath = parentNamePath;
+
 	state.ruleForm = JSON.parse(JSON.stringify(row));
 	state.isShowDialog = true;
 	ruleFormRef.value?.resetFields();

Web/src/views/system/region/component/regionTree.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto">
+	<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:calc(100% - 65px); overflow:auto">
 		<template #header>
 			<div class="card-header">
 				<div class="tree-h-flex">
@@ -26,7 +26,7 @@
 				</div>
 			</div>
 		</template>
-		<div style="margin-bottom: 45px" v-loading="state.loading">
+		<div v-loading="state.loading">
 			<el-tree
 				ref="treeRef"
 				class="filter-tree"
@@ -86,9 +86,52 @@ const loadNode = async (node: any, resolve: any) => {
 	resolve(data);
 };
 
-// 获取已经选择
+/**
+ * 获取选中节点的Keys
+ * @returns 选中节点的Key数组
+ */
 const getCheckedKeys = () => {
-	return treeRef.value!.getCheckedKeys();
+    return treeRef.value!.getCheckedKeys();
+};
+
+/**
+ * 获取当前选中节点
+ * @returns 当前选中节点
+ */
+const getCurrentNode = () => {
+    return treeRef.value!.getCurrentNode();
+};
+
+/**
+ * 获取当前选中节点的路径数组
+ * （从根节点到当前节点，按下标顺序排列）
+ * @returns {Array<{ id: number, name: string }>} 路径数组
+ */
+const getCurrentPath = () => {
+    const currentNode = getCurrentNode();
+    if(!currentNode) return null;
+
+    const cascaderData = getCascaderData(currentNode);
+    const path = [] as Array<{ id: number, name: string }>;
+    let node = cascaderData;
+    while(node) {
+        path.push({ id: node.id, name: node.name });
+        node = node.child;
+    }
+    return path;
+};
+
+// 递归获取当前选中级联数据
+const getCascaderData = (child: any) => {
+    const parent = treeRef.value!.getNode(child.pid)?.data as SysRegion & { child?: SysRegion };
+    if(!parent) return child;
+
+    parent.child = child;
+    if(parent.pid != 0) {
+        return getCascaderData(parent);
+    }
+
+    return parent;
 };
 
 const filterNode = (value: string, data: any) => {
@@ -119,7 +162,7 @@ const nodeClick = (node: any) => {
 };
 
 // 导出对象
-defineExpose({ initTreeData, getCheckedKeys });
+defineExpose({ initTreeData, getCheckedKeys, getCurrentNode, getCurrentPath });
 </script>
 
 <style lang="scss" scoped>

Web/src/views/system/region/index.vue

@@ -6,24 +6,26 @@
 			</el-splitter-panel>
 			<el-splitter-panel :min="200" style="overflow: auto; display: flex; flex-direction: column;">
 				<el-card class="full-table" shadow="hover">
-					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
-						<el-form-item label="行政名称">
-							<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable />
-						</el-form-item>
-						<el-form-item label="行政代码">
-							<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable />
-						</el-form-item>
-						<el-form-item>
-							<el-button-group>
-								<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRegion:page'"> 查询 </el-button>
-								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
-							</el-button-group>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" icon="ele-Plus" @click="openAddRegion" v-auth="'sysRegion:add'"> 新增 </el-button>
-							<el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:sync'"> 同步统计局 </el-button>
-						</el-form-item>
-					</el-form>
+                    <template #header>
+                        <el-form :model="state.queryParams" ref="queryForm" :inline="true">
+                            <el-form-item label="行政名称">
+                                <el-input v-model="state.queryParams.name" placeholder="行政名称" clearable />
+                            </el-form-item>
+                            <el-form-item label="行政代码">
+                                <el-input v-model="state.queryParams.code" placeholder="行政代码" clearable />
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button-group>
+                                    <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRegion:page'"> 查询 </el-button>
+                                    <el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+                                </el-button-group>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" icon="ele-Plus" @click="openAddRegion" v-auth="'sysRegion:add'"> 新增 </el-button>
+                                <el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:sync'"> 同步统计局 </el-button>
+                            </el-form-item>
+                        </el-form>
+                    </template>
 					<el-table :data="state.regionData" style="width: 100%" v-loading="state.loading" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
 						<el-table-column prop="name" label="行政名称" align="center" show-overflow-tooltip />
 						<el-table-column prop="code" label="行政代码" align="center" show-overflow-tooltip />
@@ -114,7 +116,9 @@ const resetQuery = async () => {
 // 打开新增页面
 const openAddRegion = () => {
 	state.editRegionTitle = '添加行政区域';
-	editRegionRef.value?.openDialog({ orderNo: 100 });
+    const parent = regionTreeRef.value?.getCurrentNode() ?? { id: 0, name: "顶级" };
+    const parentPath = regionTreeRef.value?.getCurrentPath() ?? null;
+	editRegionRef.value?.openDialog({ orderNo: 100, pid: parent.id }, parentPath ? parentPath.map(i => i.name).join(' / ') : '顶级');
 };
 
 // 打开编辑页面
@@ -179,3 +183,10 @@ const handleCurrentChange = async (val: number) => {
 	await handleQuery();
 };
 </script>
+<style lang="scss" scoped>
+.full-table {
+    :deep(.el-card__header) {
+        padding: 10px 20px;
+    }
+}
+</style>