!1382 调整布局，优化排版

😎 Merge pull request !1382 from 冰魄少年/next

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

@@ -1,11 +1,10 @@
 <template>
 	<div class="sys-org-container">
-		<el-row :gutter="5" style="width: 100%; flex: 1">
-			<el-col :span="4" :xs="24">
+		<splitpanes>
+			<pane size="20">
 				<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
-			</el-col>
-
-			<el-col :span="20" :xs="24" style="display: flex; flex-direction: column">
+			</pane>
+			<pane size="80">
 				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="机构名称">
@@ -57,8 +56,8 @@
 						</el-table-column>
 					</el-table>
 				</el-card>
-			</el-col>
-		</el-row>
+			</pane>
+		</splitpanes>
 
 		<EditOrg ref="editOrgRef" :title="state.editOrgTitle" :orgData="state.orgTreeData" @reload="handleQuery" />
 	</div>
@@ -75,6 +74,9 @@ import { getAPI } from '/@/utils/axios-utils';
 import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
 import { SysOrg } from '/@/api-services/models';
 
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+
 const editOrgRef = ref<InstanceType<typeof EditOrg>>();
 const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
 const state = reactive({

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

@@ -1,11 +1,10 @@
 <template>
 	<div class="sys-region-container">
-		<el-row :gutter="8" style="width: 100%; flex: 1">
-			<el-col :span="6" :xs="24">
+		<splitpanes>
+			<pane size="20">
 				<RegionTree ref="regionTreeRef" @node-click="nodeClick" />
-			</el-col>
-
-			<el-col :span="18" :xs="24" style="display: flex; flex-direction: column">
+			</pane>
+			<pane size="80">
 				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="行政名称">
@@ -53,8 +52,8 @@
 						layout="total, sizes, prev, pager, next, jumper"
 					/>
 				</el-card>
-			</el-col>
-		</el-row>
+			</pane>
+		</splitpanes>
 
 		<EditRegion ref="editRegionRef" :title="state.editRegionTitle" @handleQuery="handleQuery" />
 	</div>
@@ -70,6 +69,9 @@ import { getAPI } from '/@/utils/axios-utils';
 import { SysRegionApi } from '/@/api-services/api';
 import { SysRegion } from '/@/api-services/models';
 
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+
 const editRegionRef = ref<InstanceType<typeof EditRegion>>();
 const regionTreeRef = ref<InstanceType<typeof RegionTree>>();
 const state = reactive({

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

@@ -4,7 +4,7 @@
 			<pane size="16">
 				<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
 			</pane>
-			<pane size="94">
+			<pane size="84">
 				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="账号">