😎1、拆分窗格组件调整 2、菜单和组织树名称默认左对齐
This commit is contained in:
zuohuaijun
parent
07115c646c
commit
f84a6fc50a
74
Web/src/views/system/cache/index.vue
vendored
74
Web/src/views/system/cache/index.vue
vendored
@ -1,46 +1,40 @@
|
||||
<template>
|
||||
<div class="sys-cache-container">
|
||||
<splitpanes horizontal>
|
||||
<pane size="5">
|
||||
<NoticeBar text="系统缓存数据管理，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
|
||||
<NoticeBar text="系统缓存数据管理，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" style="margin-bottom: 5px" />
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="20">
|
||||
<el-card shadow="hover" header="缓存列表" v-loading="state.loading" 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 @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="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 size="80">
|
||||
<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" 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>
|
||||
</div>
|
||||
|
||||
@ -109,7 +109,7 @@ const options = useVxeTable<SysMenu>(
|
||||
columns: [
|
||||
// { type: 'checkbox', width: 40, 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: 'path', title: '路由路径', minWidth: 150, showOverflow: 'tooltip' },
|
||||
{ field: 'component', title: '组件路径', minWidth: 150, showOverflow: 'tooltip' },
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="sys-org-container">
|
||||
<el-row :gutter="5" style="width: 100%; height: 100%">
|
||||
<el-col :span="4" :xs="24" style="display: flex; height: 100%">
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="15" style="display: flex; flex: 1">
|
||||
<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column; height: 100%">
|
||||
</pane>
|
||||
<pane size="85">
|
||||
<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-row :gutter="10">
|
||||
@ -71,8 +70,8 @@
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
|
||||
<EditOrg ref="editOrgRef" :title="state.title" :orgData="state.treeData" @reload="handleQuery" />
|
||||
</div>
|
||||
@ -83,6 +82,8 @@ import { onMounted, reactive, ref, nextTick } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
|
||||
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 EditOrg from '/@/views/system/org/component/editOrg.vue';
|
||||
@ -115,7 +116,7 @@ const options = useVxeTable<SysOrg>(
|
||||
columns: [
|
||||
// { type: 'checkbox', width: 40, 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: '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' },
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="sys-region-container">
|
||||
<el-row :gutter="5" style="width: 100%; height: 100%">
|
||||
<el-col :span="6" :xs="24" style="display: flex; height: 100%">
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="20" style="display: flex; flex: 1">
|
||||
<RegionTree ref="regionTreeRef" @node-click="handleNodeChange" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="18" :xs="24" style="display: flex; flex-direction: column; height: 100%">
|
||||
</pane>
|
||||
<pane size="80">
|
||||
<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-row :gutter="10">
|
||||
@ -58,8 +57,8 @@
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
|
||||
<EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" />
|
||||
</div>
|
||||
@ -72,6 +71,8 @@ import { auth } from '/@/utils/authFunction';
|
||||
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
|
||||
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
|
||||
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 EditRegion from '/@/views/system/region/component/editRegion.vue';
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="sys-user-container">
|
||||
<splitpanes>
|
||||
<pane size="16">
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="15" style="display: flex; flex: 1">
|
||||
<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
|
||||
</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-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
|
||||
<el-row :gutter="10">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user