😎1、拆分窗格组件调整 2、菜单和组织树名称默认左对齐

This commit is contained in:
zuohuaijun 2024-08-03 02:11:21 +08:00
parent 07115c646c
commit f84a6fc50a
5 changed files with 55 additions and 59 deletions

View File

@ -1,17 +1,13 @@
<template> <template>
<div class="sys-cache-container"> <div class="sys-cache-container">
<splitpanes horizontal> <NoticeBar text="系统缓存数据管理,请慎重操作!" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" style="margin-bottom: 5px" />
<pane size="5"> <splitpanes class="default-theme">
<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"> <pane size="20">
<el-card shadow="hover" header="缓存列表" v-loading="state.loading" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto"> <el-card shadow="hover" header="缓存列表" v-loading="state.loading" style="height: 100%" body-style="height:100%; overflow:auto">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>缓存列表</span> <span>缓存列表</span>
<el-button icon="ele-Refresh" size="small" circle text @click="handleQuery" v-auth="'sysCache:keyList'" /> <el-button icon="ele-Refresh" size="small" circle @click="handleQuery" v-auth="'sysCache/keyList'" />
</div> </div>
</template> </template>
<el-tree <el-tree
@ -30,19 +26,17 @@
</el-card> </el-card>
</pane> </pane>
<pane size="80"> <pane size="80">
<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto"> <el-card shadow="hover" header="缓存数据" v-loading="state.loading1" style="height: 100%" body-style="height:100%; overflow:auto">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>{{ `缓存数据${state.cacheKey ? `${state.cacheKey}` : ''}` }}</span> <span>{{ `缓存数据${state.cacheKey ? `${state.cacheKey}` : ''}` }}</span>
<el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache:delete'"> 删除缓存 </el-button> <el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache/delete'"> 删除缓存 </el-button>
</div> </div>
</template> </template>
<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController /> <vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController />
</el-card> </el-card>
</pane> </pane>
</splitpanes> </splitpanes>
</pane>
</splitpanes>
</div> </div>
</template> </template>

View File

@ -109,7 +109,7 @@ const options = useVxeTable<SysMenu>(
columns: [ columns: [
// { type: 'checkbox', width: 40, fixed: 'left' }, // { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' }, { type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'title', title: '菜单名称', minWidth: 180, showOverflow: 'tooltip', treeNode: true, slots: { default: 'row_title' } }, { field: 'title', title: '菜单名称', minWidth: 180, showOverflow: 'tooltip', treeNode: true, align: 'left', headerAlign: 'center', slots: { default: 'row_title' } },
{ field: 'type', title: '菜单类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_type' } }, { field: 'type', title: '菜单类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_type' } },
{ field: 'path', title: '路由路径', minWidth: 150, showOverflow: 'tooltip' }, { field: 'path', title: '路由路径', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'component', title: '组件路径', minWidth: 150, showOverflow: 'tooltip' }, { field: 'component', title: '组件路径', minWidth: 150, showOverflow: 'tooltip' },

View File

@ -1,11 +1,10 @@
<template> <template>
<div class="sys-org-container"> <div class="sys-org-container">
<el-row :gutter="5" style="width: 100%; height: 100%"> <splitpanes class="default-theme">
<el-col :span="4" :xs="24" style="display: flex; height: 100%"> <pane size="15" style="display: flex; flex: 1">
<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" /> <OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
</el-col> </pane>
<pane size="85">
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column; height: 100%">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10"> <el-row :gutter="10">
@ -71,8 +70,8 @@
</template> </template>
</vxe-grid> </vxe-grid>
</el-card> </el-card>
</el-col> </pane>
</el-row> </splitpanes>
<EditOrg ref="editOrgRef" :title="state.title" :orgData="state.treeData" @reload="handleQuery" /> <EditOrg ref="editOrgRef" :title="state.title" :orgData="state.treeData" @reload="handleQuery" />
</div> </div>
@ -83,6 +82,8 @@ import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import { VxeGridInstance, VxeGridListeners } from 'vxe-table'; import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook'; import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import OrgTree from '/@/views/system/org/component/orgTree.vue'; import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditOrg from '/@/views/system/org/component/editOrg.vue'; import EditOrg from '/@/views/system/org/component/editOrg.vue';
@ -115,7 +116,7 @@ const options = useVxeTable<SysOrg>(
columns: [ columns: [
// { type: 'checkbox', width: 40, fixed: 'left' }, // { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' }, { type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true }, { field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true, align: 'left', headerAlign: 'center' },
{ field: 'code', title: '机构编码', minWidth: 200, showOverflow: 'tooltip' }, { field: 'code', title: '机构编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'level', title: '级别', minWidth: 70, showOverflow: 'tooltip' }, { field: 'level', title: '级别', minWidth: 70, showOverflow: 'tooltip' },
{ field: 'type', title: '机构类型', minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' }, { field: 'type', title: '机构类型', minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' },

View File

@ -1,11 +1,10 @@
<template> <template>
<div class="sys-region-container"> <div class="sys-region-container">
<el-row :gutter="5" style="width: 100%; height: 100%"> <splitpanes class="default-theme">
<el-col :span="6" :xs="24" style="display: flex; height: 100%"> <pane size="20" style="display: flex; flex: 1">
<RegionTree ref="regionTreeRef" @node-click="handleNodeChange" /> <RegionTree ref="regionTreeRef" @node-click="handleNodeChange" />
</el-col> </pane>
<pane size="80">
<el-col :span="18" :xs="24" style="display: flex; flex-direction: column; height: 100%">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10"> <el-row :gutter="10">
@ -58,8 +57,8 @@
</template> </template>
</vxe-grid> </vxe-grid>
</el-card> </el-card>
</el-col> </pane>
</el-row> </splitpanes>
<EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" /> <EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" />
</div> </div>
@ -72,6 +71,8 @@ import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table'; import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook'; import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage'; import { Local } from '/@/utils/storage';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import RegionTree from '/@/views/system/region/component/regionTree.vue'; import RegionTree from '/@/views/system/region/component/regionTree.vue';
import EditRegion from '/@/views/system/region/component/editRegion.vue'; import EditRegion from '/@/views/system/region/component/editRegion.vue';

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="sys-user-container"> <div class="sys-user-container">
<splitpanes> <splitpanes class="default-theme">
<pane size="16"> <pane size="15" style="display: flex; flex: 1">
<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" /> <OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
</pane> </pane>
<pane size="94"> <pane size="85">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10"> <el-row :gutter="10">