!1375 页面布局调整(内容过多无法显示滚动条,导致查看不方便)

Merge pull request !1375 from 冰魄少年/next

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

@@ -1,42 +1,48 @@
 <template>
 	<div class="sys-cache-container">
-		<NoticeBar text="系统缓存数据管理，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
-		<el-row :gutter="8" style="width: 100%">
-			<el-col :span="8" :xs="24">
-				<el-card shadow="hover" header="缓存列表" v-loading="state.loading" class="mt8">
-					<template #header>
-						<div class="card-header">
-							<span>缓存列表</span>
-							<el-button icon="ele-Refresh" size="small" circle text @click="handleQuery" v-auth="'sysCache:keyList'" />
-						</div>
-					</template>
-					<el-tree
-						ref="treeRef"
-						class="filter-tree"
-						:data="state.cacheData"
-						node-key="id"
-						:props="{ children: 'children', label: 'name' }"
-						@node-click="nodeClick"
-						:default-checked-keys="state.cacheData"
-						highlight-current
-						check-strictly
-						default-expand-all
-						accordion
-					/>
-				</el-card>
-			</el-col>
-			<el-col :span="16" :xs="24">
-				<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" class="mt8">
-					<template #header>
-						<div class="card-header">
-							<span>{{ `缓存数据${state.cacheKey ? `【${state.cacheKey}】` : ''}` }}</span>
-							<el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache:delete'"> 删除缓存 </el-button>
-						</div>
-					</template>
-					<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController />
-				</el-card>
-			</el-col>
-		</el-row>
+		<splitpanes horizontal >
+			<pane size="5">
+				<NoticeBar text="系统缓存数据管理，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
+			</pane>
+			<pane size="95">
+				<splitpanes>
+					<pane size="20">
+						<el-card shadow="hover" header="缓存列表" v-loading="state.loading" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto">
+							<template #header>
+								<div class="card-header">
+									<span>缓存列表</span>
+									<el-button icon="ele-Refresh" size="small" circle text @click="handleQuery" v-auth="'sysCache:keyList'" />
+								</div>
+							</template>
+							<el-tree
+								ref="treeRef"
+								class="filter-tree"
+								:data="state.cacheData"
+								node-key="id"
+								:props="{ children: 'children', label: 'name' }"
+								@node-click="nodeClick"
+								:default-checked-keys="state.cacheData"
+								highlight-current
+								check-strictly
+								default-expand-all
+								accordion
+							/>
+						</el-card>
+					</pane>
+					<pane size="80">
+						<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto">
+							<template #header>
+								<div class="card-header">
+									<span>{{ `缓存数据${state.cacheKey ? `【${state.cacheKey}】` : ''}` }}</span>
+									<el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache:delete'"> 删除缓存 </el-button>
+								</div>
+							</template>
+							<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController />
+						</el-card>
+					</pane>
+				</splitpanes>
+			</pane>
+		</splitpanes>
 	</div>
 </template>
 
@@ -46,6 +52,8 @@ import { ElMessageBox, ElMessage, ElTree } from 'element-plus';
 import NoticeBar from '/@/components/noticeBar/index.vue';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysCacheApi } from '/@/api-services';

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

@@ -1,12 +1,11 @@
 <template>
 	<div class="sys-user-container">
-		<el-row :gutter="5" style="width: 100%; flex: 1">
-			<el-col :span="4" :xs="24">
-				<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
-			</el-col>
-
-			<el-col :span="20" :xs="24" style="display: flex; flex-direction: column">
-				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
+		<splitpanes>
+  <pane size="16">
+    <OrgTree ref="orgTreeRef" @node-click="nodeClick" />
+  </pane>
+  <pane size="94">
+    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="账号">
 							<el-input v-model="state.queryParams.account" placeholder="账号" clearable />
@@ -106,8 +105,8 @@
 						layout="total, sizes, prev, pager, next, jumper"
 					/>
 				</el-card>
-			</el-col>
-		</el-row>
+  </pane>
+</splitpanes>
 
 		<EditUser ref="editUserRef" :title="state.editUserTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery" />
 	</div>
@@ -122,6 +121,9 @@ import OrgTree from '/@/views/system/org/component/orgTree.vue';
 import EditUser from '/@/views/system/user/component/editUser.vue';
 import ModifyRecord from '/@/components/table/modifyRecord.vue';
 
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+
 import { getAPI } from '/@/utils/axios-utils';
 import { SysUserApi, SysOrgApi } from '/@/api-services/api';
 import { SysUser, SysOrg } from '/@/api-services/models';