😎样式调整：缓存页面、用户管理页面、移动端显示
This commit is contained in:
zuohuaijun
parent
75cbf5bb87
commit
877019f92e
@ -17,7 +17,7 @@
|
||||
<PackageReference Include="AngleSharp" Version="1.1.2" />
|
||||
<PackageReference Include="AspectCore.Extensions.Reflection" Version="2.4.0" />
|
||||
<PackageReference Include="AspNetCoreRateLimit" Version="5.0.0" />
|
||||
<PackageReference Include="Elastic.Clients.Elasticsearch" Version="8.14.7" />
|
||||
<PackageReference Include="Elastic.Clients.Elasticsearch" Version="8.14.8" />
|
||||
<PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.9.4.11" />
|
||||
<PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.9.4.11" />
|
||||
<PackageReference Include="Furion.Pure" Version="4.9.4.11" />
|
||||
@ -39,7 +39,7 @@
|
||||
<PackageReference Include="SqlSugarCore" Version="5.1.4.166" />
|
||||
<PackageReference Include="SSH.NET" Version="2024.1.0" />
|
||||
<PackageReference Include="System.Linq.Dynamic.Core" Version="1.4.4" />
|
||||
<PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1059" />
|
||||
<PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1060" />
|
||||
<PackageReference Include="UAParser" Version="3.1.47" />
|
||||
<PackageReference Include="Yitter.IdGenerator" Version="1.0.14" />
|
||||
</ItemGroup>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"animate.css": "^4.1.1",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.7.2",
|
||||
"axios": "^1.7.3",
|
||||
"countup.js": "^2.8.0",
|
||||
"cropperjs": "^1.6.2",
|
||||
"echarts": "^5.5.1",
|
||||
@ -49,7 +49,7 @@
|
||||
"print-js": "^1.6.0",
|
||||
"push.js": "^1.0.12",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"qs": "^6.12.3",
|
||||
"qs": "^6.13.0",
|
||||
"relation-graph": "^2.2.3",
|
||||
"screenfull": "^6.0.2",
|
||||
"sm-crypto-v2": "^1.9.1",
|
||||
@ -64,11 +64,11 @@
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-plugin-hiprint": "0.0.57-beta20",
|
||||
"vue-router": "^4.4.1",
|
||||
"vue-router": "^4.4.2",
|
||||
"vue-signature-pad": "^3.0.2",
|
||||
"vue3-tree-org": "^4.2.2",
|
||||
"vuedraggable": "4.0.3",
|
||||
"vxe-pc-ui": "^4.0.82",
|
||||
"vxe-pc-ui": "^4.0.84",
|
||||
"vxe-table": "^4.7.59",
|
||||
"vxe-table-plugin-element": "^4.0.4",
|
||||
"vxe-table-plugin-export-xlsx": "^4.0.5",
|
||||
@ -84,7 +84,7 @@
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@vitejs/plugin-vue": "^5.1.1",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
||||
"@vue/compiler-sfc": "^3.4.35",
|
||||
"code-inspector-plugin": "^0.15.2",
|
||||
|
||||
@ -29,13 +29,15 @@
|
||||
overflow: auto;
|
||||
}
|
||||
// 在小屏幕中，取消表单左边距
|
||||
.el-form-item__label-wrap{
|
||||
.el-form-item__label-wrap {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
// 列表页查询表单内的输入框宽度适配
|
||||
.el-form--inline .el-form-item .el-select,
|
||||
.el-form--inline .el-form-item .el-input
|
||||
{
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-form--inline .el-form-item .el-select,
|
||||
.el-form--inline .el-form-item .el-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-form--inline .el-form-item:has(.el-form-item__label) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
95
Web/src/views/system/cache/index.vue
vendored
95
Web/src/views/system/cache/index.vue
vendored
@ -1,41 +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="5" class="mt5">
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card shadow="hover" header="缓存列表" style="height: calc(100vh - 156px)" v-loading="state.loading" body-style="height:100%;overflow:auto;padding:5px 5px 50px 5px;">
|
||||
<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
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="16" :xs="24">
|
||||
<el-card shadow="hover" header="缓存数据" style="height: calc(100vh - 156px)" v-loading="state.loadingData" body-style="height:calc(100% - 36px);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>
|
||||
</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>
|
||||
|
||||
@ -45,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';
|
||||
@ -53,15 +62,14 @@ const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
const currentNode = ref<any>({});
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
loadingData: false,
|
||||
loading1: false,
|
||||
cacheData: [] as any,
|
||||
cacheValue: undefined as any,
|
||||
cacheKey: undefined,
|
||||
});
|
||||
|
||||
// 页面初始化
|
||||
onMounted(async () => {
|
||||
await handleQuery();
|
||||
handleQuery();
|
||||
});
|
||||
|
||||
// 查询操作
|
||||
@ -109,7 +117,7 @@ const delCache = () => {
|
||||
})
|
||||
.then(async () => {
|
||||
await getAPI(SysCacheApi).apiSysCacheDeleteKeyPost(currentNode.value.id);
|
||||
await handleQuery();
|
||||
handleQuery();
|
||||
state.cacheValue = undefined;
|
||||
state.cacheKey = undefined;
|
||||
ElMessage.success('删除成功');
|
||||
@ -122,7 +130,7 @@ const nodeClick = async (node: any) => {
|
||||
if (node.id == 0) return;
|
||||
|
||||
currentNode.value = node;
|
||||
state.loadingData = true;
|
||||
state.loading1 = true;
|
||||
var res = await getAPI(SysCacheApi).apiSysCacheValueKeyGet(node.id);
|
||||
// state.cacheValue = JSON.parse(res.data.result);
|
||||
var result = res.data.result;
|
||||
@ -142,7 +150,7 @@ const nodeClick = async (node: any) => {
|
||||
}
|
||||
|
||||
state.cacheKey = node.id;
|
||||
state.loadingData = false;
|
||||
state.loading1 = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -152,7 +160,4 @@ const nodeClick = async (node: any) => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.el-card__header) {
|
||||
padding: 6px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="sys-user-container">
|
||||
<el-row :gutter="5" style="width: 100%; height: 100%">
|
||||
<el-col :span="4" :xs="24" style="display: flex; height: 100%">
|
||||
<OrgTree ref="treeRef" @node-click="handleNodeChange" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column; height: 100%">
|
||||
<splitpanes>
|
||||
<pane size="16">
|
||||
<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
|
||||
</pane>
|
||||
<pane size="94">
|
||||
<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">
|
||||
@ -86,8 +85,8 @@
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
|
||||
<EditUser ref="editUserRef" :title="state.title" :orgData="state.treeData" @handleQuery="handleQuery" />
|
||||
</div>
|
||||
@ -100,6 +99,8 @@ import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
|
||||
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
|
||||
import { Local } from '/@/utils/storage';
|
||||
import XEUtils from 'xe-utils';
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
|
||||
import OrgTree from '/@/views/system/org/component/orgTree.vue';
|
||||
import EditUser from '/@/views/system/user/component/editUser.vue';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user