gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/main' into template

Browse Source
This commit is contained in:
Master 2024-07-11 09:06:44 +08:00
commit aba7ccc6a8
37 changed files with 1639 additions and 1622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Admin.NET/Admin.NET.Core/Admin.NET.Core.csproj
View File

@ -17,17 +17,17 @@
<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.4" />
<PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.9.4.3" />
<PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.9.4.3" />
<PackageReference Include="Furion.Pure" Version="4.9.4.3" />
<PackageReference Include="Elastic.Clients.Elasticsearch" Version="8.14.6" />
<PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.9.4.4" />
<PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.9.4.4" />
<PackageReference Include="Furion.Pure" Version="4.9.4.4" />
<PackageReference Include="IPTools.China" Version="1.6.0" />
<PackageReference Include="IPTools.International" Version="1.6.0" />
<PackageReference Include="Magicodes.IE.Excel" Version="2.7.5.1" />
<PackageReference Include="Magicodes.IE.Pdf" Version="2.7.5.1" />
<PackageReference Include="Magicodes.IE.Word" Version="2.7.5.1" />
<PackageReference Include="MailKit" Version="4.7.0" />
<PackageReference Include="NewLife.Redis" Version="5.7.2024.701" />
<PackageReference Include="NewLife.Redis" Version="5.7.2024.709" />
<PackageReference Include="Novell.Directory.Ldap.NETStandard" Version="3.6.0" />
<PackageReference Include="QRCoder" Version="1.6.0" />
<PackageReference Include="RabbitMQ.Client" Version="6.8.1" />
@ -37,7 +37,7 @@
<PackageReference Include="SqlSugarCore" Version="5.1.4.160" />
<PackageReference Include="SSH.NET" Version="2024.1.0" />
<PackageReference Include="System.Linq.Dynamic.Core" Version="1.4.3" />
<PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1042" />
<PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1044" />
<PackageReference Include="UAParser" Version="3.1.47" />
<PackageReference Include="Yitter.IdGenerator" Version="1.0.14" />
</ItemGroup>
@ -56,9 +56,9 @@
<PackageReference Include="AspNet.Security.OAuth.Gitee" Version="8.1.0" />
<PackageReference Include="AspNet.Security.OAuth.Weixin" Version="8.1.0" />
<PackageReference Include="Lazy.Captcha.Core" Version="2.0.7" />
<PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="8.0.6" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.Protocols.NewtonsoftJson" Version="8.0.6" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.StackExchangeRedis" Version="8.0.6" />
<PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="8.0.7" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.Protocols.NewtonsoftJson" Version="8.0.7" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.StackExchangeRedis" Version="8.0.7" />
<PackageReference Include="OnceMi.AspNetCore.OSS" Version="1.2.0" />
</ItemGroup>

2
Admin.NET/Admin.NET.Core/Entity/SysWechatRefund.cs
View File

@ -63,7 +63,7 @@ public class SysWechatRefund : EntityBase
/// 退款资金来源, 可不传，默认使用未结算资金退款（仅对老资金流商户适用）
/// </summary>
[SugarColumn(ColumnDescription = "退款资金来源", Length = 32)]
public string FundsAccount { get; set; }
public string? FundsAccount { get; set; }
/// <summary>
/// 关联的商户订单号

11
Admin.NET/Admin.NET.Core/Service/Cache/SysCacheService.cs
View File

@ -62,6 +62,17 @@ public class SysCacheService : IDynamicApiController, ISingleton
return _cacheProvider.Cache.Set($"{_cacheOptions.Prefix}{key}", value, expire);
}
/// <summary>
/// 获取缓存的剩余生存时间
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
[NonAction]
public TimeSpan GetExpire(string key)
{
return _cacheProvider.Cache.GetExpire(key);
}
/// <summary>
/// 获取缓存
/// </summary>

1
Admin.NET/Admin.NET.Core/Service/CodeGen/SysCodeGenService.cs
View File

@ -42,6 +42,7 @@ public class SysCodeGenService : IDynamicApiController, ITransient
return await _db.Queryable<SysCodeGen>()
.WhereIF(!string.IsNullOrWhiteSpace(input.TableName), u => u.TableName.Contains(input.TableName.Trim()))
.WhereIF(!string.IsNullOrWhiteSpace(input.BusName), u => u.BusName.Contains(input.BusName.Trim()))
.OrderBy(u => u.Id, OrderByType.Desc)
.ToPagedListAsync(input.Page, input.PageSize);
}

7
Admin.NET/Admin.NET.Core/Service/Config/SysConfigService.cs
View File

@ -14,12 +14,15 @@ public class SysConfigService : IDynamicApiController, ITransient
{
private readonly SysCacheService _sysCacheService;
private readonly SqlSugarRepository<SysConfig> _sysConfigRep;
private readonly UserManager _userManager;
public SysConfigService(SysCacheService sysCacheService,
SqlSugarRepository<SysConfig> sysConfigRep)
SqlSugarRepository<SysConfig> sysConfigRep,
UserManager userManager)
{
_sysCacheService = sysCacheService;
_sysConfigRep = sysConfigRep;
_userManager = userManager;
}
/// <summary>
@ -31,7 +34,7 @@ public class SysConfigService : IDynamicApiController, ITransient
public async Task<SqlSugarPagedList<SysConfig>> Page(PageConfigInput input)
{
return await _sysConfigRep.AsQueryable()
.Where(u => u.GroupCode != "WebConfig") // 不显示 WebConfig 分组
.WhereIF(!_userManager.SuperAdmin, u => u.GroupCode != "WebConfig") // 若非超管，不显示 WebConfig 分组
.WhereIF(!string.IsNullOrWhiteSpace(input.Name?.Trim()), u => u.Name.Contains(input.Name))
.WhereIF(!string.IsNullOrWhiteSpace(input.Code?.Trim()), u => u.Code.Contains(input.Code))
.WhereIF(!string.IsNullOrWhiteSpace(input.GroupCode?.Trim()), u => u.GroupCode.Equals(input.GroupCode))

14
Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/index.vue.vm
View File

@ -20,7 +20,7 @@
<template>
<div class="@(@Model.LowerClassName)-container" v-loading="options.loading">
<el-card shadow="hover" :body-style="{ padding: '20px 20px 16px 10px', 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%" @@submit.prevent="handleQuery(true)" >
<el-row :gutter="10">
@if(Model.QueryWhetherList.Count > 0){
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
@ -156,7 +156,7 @@
@:</template>
} else if(@column.EffectType == "DatePicker") {
@:<template #row_@(@column.LowerPropertyName)="{ row }">
@:<span>{{ formatDate(new Date(row.@(@column.LowerPropertyName)), 'YYYY-mm-dd') }}</span>
@:<span>{{ formatDate(new Date(row.@(@column.LowerPropertyName)), 'YYYY-mm-dd HH:MM:SS') }}</span>
@:</template>
}
}
@ -227,19 +227,19 @@ import ModifyRecord from '/@@/components/table/modifyRecord.vue';
@if (@Model.IsApiService) {
// 接口函数
import { getAPI } from '/@@/utils/axios-utils';
@:import { getAPI } from '/@@/utils/axios-utils';
// 接口
import { @(@Model.ClassName)Api } from '/@@/api-services/api';
@:import { @(@Model.ClassName)Api } from '/@@/api-services/api';
// 模型
import { @(@Model.ClassName), @(@Model.ClassName)Input, @(@Model.ClassName)Output } from '/@@/api-services/models';
@:import { @(@Model.ClassName), @(@Model.ClassName)Input, @(@Model.ClassName)Output } from '/@@/api-services/models';
} else {
@:import { page@(@Model.ClassName), delete@(@Model.ClassName) } from '/@@/api/@(@Model.PagePath)/@(@Model.LowerEntityName)';
@:import { page@(@Model.ClassName), delete@(@Model.ClassName) } from '/@@/api/@(@Model.PagePath)/@(@Model.LowerClassName)';
foreach (var column in Model.QueryWhetherList){
if(@column.EffectType == "fk"){
@:import { get@(@column.FkEntityName)@(@column.PropertyName)Dropdown } from '/@@/api/@(@Model.PagePath)/@(@Model.LowerEntityName)';
@:import { get@(@column.FkEntityName)@(@column.PropertyName)Dropdown } from '/@@/api/@(@Model.PagePath)/@(@Model.LowerClassName)';
}
}
}

16
Web/package.json
View File

@ -2,7 +2,7 @@
"name": "admin.net.pro",
"type": "module",
"version": "2.4.33",
"lastBuildTime": "2024.07.09",
"lastBuildTime": "2024.07.10",
"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
"author": "zuohuaijun",
"license": "MIT",
@ -16,7 +16,7 @@
"@element-plus/icons-vue": "^2.3.1",
"@logicflow/core": "^1.2.27",
"@logicflow/extension": "^1.2.27",
"@microsoft/signalr": "^8.0.0",
"@microsoft/signalr": "^8.0.7",
"@vue-office/docx": "^1.6.2",
"@vue-office/excel": "^1.7.8",
"@vue-office/pdf": "^2.0.2",
@ -49,10 +49,10 @@
"print-js": "^1.6.0",
"push.js": "^1.0.12",
"qrcodejs2-fixes": "^0.0.2",
"qs": "^6.12.2",
"qs": "^6.12.3",
"relation-graph": "^2.2.2",
"screenfull": "^6.0.2",
"sm-crypto-v2": "^1.9.0",
"sm-crypto-v2": "^1.9.1",
"sortablejs": "^1.15.2",
"splitpanes": "^3.1.5",
"vcrontab-3": "^3.3.22",
@ -68,8 +68,8 @@
"vue-signature-pad": "^3.0.2",
"vue3-tree-org": "^4.2.2",
"vuedraggable": "4.0.3",
"vxe-pc-ui": "^4.0.51",
"vxe-table": "^4.7.45",
"vxe-pc-ui": "^4.0.58",
"vxe-table": "^4.7.47",
"vxe-table-plugin-element": "^4.0.4",
"vxe-table-plugin-export-xlsx": "^4.0.5",
"xe-utils": "^3.5.28",
@ -93,8 +93,8 @@
"less": "^4.2.0",
"prettier": "^3.3.2",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.77.6",
"terser": "^5.31.1",
"sass": "^1.77.7",
"terser": "^5.31.2",
"typescript": "^5.5.3",
"vite": "^5.3.3",
"vite-plugin-cdn-import": "^1.0.1",

19
Web/src/hooks/setupVXETableHook.ts
View File

@ -8,10 +8,10 @@ import 'vxe-table-plugin-element/dist/style.css';
// Vxe UI 组件库
import VxeUI, { VxeComponentSizeType } from 'vxe-pc-ui';
import ExcelJS from 'exceljs';
import { Local } from '../utils/storage';
import { useThemeConfig } from '/@/stores/themeConfig';
const vxeSize: VxeComponentSizeType = useThemeConfig().themeConfig.globalComponentSize == 'small' ? 'mini' : useThemeConfig().themeConfig.globalComponentSize == 'default' ? 'small' : 'medium';
export const setupVXETable = (app: App) => {
let vxeSize = getVxeTableSize();
// 加载插件
VxeUITable.use(VXETablePluginElement);
VxeUITable.use(VXETablePluginExportXLSX, { ExcelJS: ExcelJS });
@ -109,18 +109,3 @@ export const setupVXETable = (app: App) => {
// app.config.globalProperties.$XSaveFile = VxeUI.saveFile
// app.config.globalProperties.$XReadFile = VxeUI.readFile
};
// 从全局主题里面获取组件大小模式
function getVxeTableSize() {
let vxeSize: VxeComponentSizeType = 'mini';
let themeConfig = Local.get('themeConfig');
if (themeConfig == null || themeConfig == undefined) return vxeSize;
let size = themeConfig.globalComponentSize;
if (size == 'large') vxeSize = 'medium';
else if (size == 'default') vxeSize = 'small';
else if (size == 'small') vxeSize = 'mini';
return vxeSize;
}

84
Web/src/hooks/useVxeTableOptionsHook.ts Normal file
View File

@ -0,0 +1,84 @@
import { dayjs } from 'element-plus';
import { reactive } from 'vue';
import { VxeGridProps, VxeGridPropTypes, VxeComponentSizeType } from 'vxe-table';
import { useThemeConfig } from '/@/stores/themeConfig';
import { merge } from 'lodash-es';
const vxeSize: VxeComponentSizeType = useThemeConfig().themeConfig.globalComponentSize == 'small' ? 'mini' : useThemeConfig().themeConfig.globalComponentSize == 'default' ? 'small' : 'medium';
/**
* @param {String} id 表格唯一标识，为空时自动随机产生;
* @param {String} id name:表格名称，与导出文件名有关;
* @param {VxeGridPropTypes.Columns<any>} columns 列配置;
*/
interface iVxeOption {
id?: string;
name?: string;
columns: VxeGridPropTypes.Columns<any>;
}
/**
* Vxe表格参数化Hook
* @param {iVxeOption} opt 参数
* @param {VxeGridProps<RowVO>} extras 要覆盖的参数
* @returns
*/
export const useVxeTable = <T>(opt: iVxeOption, extras?: VxeGridProps<T>) => {
// 默认参数
opt = Object.assign({ enableExport: true, remoteExport: false }, opt);
// 创建tableId,表格id固定才可以记录调整列宽，再次刷新仍有效。
opt.id = opt.id ? opt.id : String(new Date().getTime());
// console.log(opt);
const options = reactive<VxeGridProps>({
id: opt.id,
height: 'auto',
autoResize: true,
size: vxeSize,
loading: false,
align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
// data: [] as Array<T>,
columns: opt.columns,
toolbarConfig: {
size: vxeSize,
slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },
refresh: {
code: 'query',
},
export: true,
print: true,
zoom: true,
custom: true,
},
checkboxConfig: { range: true },
sortConfig: { trigger: 'cell', remote: true },
exportConfig: {
remote: false, // 设置使用服务端导出
filename: `${opt.name}导出_${dayjs().format('YYMMDDHHmmss')}`,
},
pagerConfig: {
enabled: true,
size: vxeSize,
pageSize: 20,
}, // 分页
printConfig: { sheetName: '' },
proxyConfig: {
enabled: true,
autoLoad: false,
sort: true,
props: {
list: 'data.result', // 不分页时
result: 'data.result.items', // 分页时
total: 'data.result.total',
message: 'data.message',
},
},
customConfig: {
storage: {
// 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
visible: true, // 启用显示/隐藏列状态
resizable: true, // 启用列宽状态
},
},
});
return extras ? merge(options, extras) : options;
};

6
Web/src/theme/element.scss
View File

@ -376,13 +376,13 @@
/* Table 表格 element plus 2.2.0 版本
------------------------------- */
.el-table {
// 表头背景色
--el-table-header-bg-color: var(--next-bg-main-color);
.el-button.is-text {
padding: 0;
}
// 表头背景色
--el-table-header-bg-color: var(--next-bg-main-color);
// 表头字体颜色
thead {
color: var(--el-text-color-regular);

3
Web/src/theme/vxeTable.scss
View File

@ -36,10 +36,11 @@
.vxe-cell {
padding-left: 5px !important;
padding-right: 5px !important;
user-select: text !important;
.el-button {
padding: 0 !important;
}
user-select: text !important;
}
.vxe-pager.size--mini {

4
Web/src/views/login/component/account.vue
View File

@ -283,6 +283,8 @@ defineExpose({ saveTokenAndInitRoutes });
<style lang="scss" scoped>
.dialog-header {
:deep(.el-dialog) {
width: unset !important;
.el-dialog__header {
display: none;
}
@ -294,8 +296,6 @@ defineExpose({ saveTokenAndInitRoutes });
.v-modal {
position: absolute !important;
}
width: unset !important;
}
}

4
Web/src/views/system/cache/index.vue vendored
View File

@ -61,7 +61,7 @@ const state = reactive({
// 页面初始化
onMounted(async () => {
handleQuery();
await handleQuery();
});
// 查询操作
@ -109,7 +109,7 @@ const delCache = () => {
})
.then(async () => {
await getAPI(SysCacheApi).apiSysCacheDeleteKeyPost(currentNode.value.id);
handleQuery();
await handleQuery();
state.cacheValue = undefined;
state.cacheKey = undefined;
ElMessage.success('删除成功');

196
Web/src/views/system/config/index.vue
View File

@ -5,12 +5,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="配置名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="配置名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="配置名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="配置编码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="配置编码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.code" placeholder="配置编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
@ -28,7 +28,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysConfig:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysConfig:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -36,7 +36,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange" @checkbox-all="handleSelectChange" @checkbox-change="handleSelectChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysConfig:add'"> 新增 </el-button>
<!-- <el-button v-if="state.selectList.length > 0" type="danger" icon="ele-Delete" @click="handleBacthDelete" > 批量删除 </el-button> -->
@ -60,15 +60,6 @@
<el-button icon="ele-Delete" text type="danger" v-auth="'sysConfig:delete'" :disabled="row.sysFlag === 1" @click="handleDelete(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -79,16 +70,16 @@
<script lang="ts" setup name="sysConfig">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditConfig from '/@/views/system/config/component/editConfig.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysConfigApi } from '/@/api-services/api';
import { SysConfig } from '/@/api-services/models';
import { SysConfig, PageConfigInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editConfigRef = ref<InstanceType<typeof EditConfig>>();
@ -98,13 +89,9 @@ const state = reactive({
code: undefined,
groupCode: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'orderNo', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
@ -112,76 +99,65 @@ const state = reactive({
selectList: [] as SysConfig[],
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysConfig';
// 表格参数配置
const options = useVxeTable<SysConfig>({
id: 'sysConfig',
name: '参数配置',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '配置名称', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'code', title: '配置编码', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'value', title: '属性值', minWidth: 150, showOverflow: 'tooltip', sortable: true },
{ field: 'sysFlag', title: '内置参数', width: 80, showOverflow: 'tooltip', sortable: true, slots: { default: 'row_sysFlag' } },
{ field: 'groupCode', title: '分组编码', minWidth: 120, showOverflow: 'tooltip', sortable: true },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip', sortable: true },
{ field: 'remark', title: '备注', minWidth: 300, showOverflow: 'tooltip', sortable: true },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysConfig:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysConfig>(
{
id: 'sysConfig',
name: '参数配置',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '配置名称', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'code', title: '配置编码', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'value', title: '属性值', minWidth: 150, showOverflow: 'tooltip', sortable: true },
{ field: 'sysFlag', title: '内置参数', width: 80, showOverflow: 'tooltip', sortable: true, slots: { default: 'row_sysFlag' } },
{ field: 'groupCode', title: '分组编码', minWidth: 120, showOverflow: 'tooltip', sortable: true },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip', sortable: true },
{ field: 'remark', title: '备注', minWidth: 300, showOverflow: 'tooltip', sortable: true },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
await handleQuery();
fetchGroupData();
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await fetchGroupData();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
state.selectList = [];
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageConfigInput;
return getAPI(SysConfigApi).apiSysConfigPagePost(params);
};
const fetchGroupData = async () => {
const res = await getAPI(SysConfigApi).apiSysConfigGroupListGet();
state.groupList = res.data.result ?? [];
// 查询操作
const handleQuery = async () => {
// 调用vxe-grid的commitProxy(query)方法，触发表格重新加载数据
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.code = undefined;
state.queryParams.name = undefined;
state.queryParams.groupCode = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
// 调用vxe-grid的commitProxy(reload)方法，触发表格重新加载数据
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -196,12 +172,6 @@ const handleEdit = (row: any) => {
editConfigRef.value?.openDialog(row);
};
// 更新数据
const updateData = async () => {
await handleQuery();
fetchGroupData();
};
// 删除
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除配置：【${row.name}】?`, '提示', {
@ -217,24 +187,46 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
const handleSelectChange = () => {
state.selectList = xGrid.value?.getCheckboxRecords() ?? [];
// 表格事件
const gridEvents: VxeGridListeners<SysConfig> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 批量删除
const handleBacthDelete = () => {
if (state.selectList.length == 0) return false;
ElMessageBox.confirm(`确定批量删除【${state.selectList[0].name}】等${state.selectList.length}个配置?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const ids = state.selectList.map((item: any) => item.id);
var res = await getAPI(SysConfigApi).apiSysConfigBatchDeletePost(ids);
handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});
// 获取分组
const fetchGroupData = async () => {
const res = await getAPI(SysConfigApi).apiSysConfigGroupListGet();
state.groupList = res.data.result ?? [];
};
// 更新数据
const updateData = async () => {
await handleQuery();
fetchGroupData();
};
// // 批量删除
// const handleBacthDelete = () => {
// if (state.selectList.length == 0) return false;
// ElMessageBox.confirm(`确定批量删除【${state.selectList[0].name}】等${state.selectList.length}个配置?`, '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// })
// .then(async () => {
// const ids = state.selectList.map((item: any) => item.id);
// var res = await getAPI(SysConfigApi).apiSysConfigBatchDeletePost(ids);
// handleQuery();
// ElMessage.success('删除成功');
// })
// .catch(() => {});
// };
</script>

4
Web/src/views/system/dict/component/editDictData.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="sys-dictData-container">
<el-dialog v-model="state.visible" draggable overflow destroy-on-close width="700px">
<el-dialog v-model="state.visible" draggable :close-on-click-modal="false" width="700px">
<template #header>
<div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
@ -20,7 +20,7 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="名称" prop="name" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
<el-form-item label="名称">
<el-input v-model="state.ruleForm.name" placeholder="名称" clearable />
</el-form-item>
</el-col>

2
Web/src/views/system/dict/component/editDictType.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="sys-dictType-container">
<el-dialog v-model="state.visible" draggable overflow destroy-on-close width="700px">
<el-dialog v-model="state.visible" draggable :close-on-click-modal="false" width="700px">
<template #header>
<div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>

293
Web/src/views/system/dict/index.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="sys-dict-container" v-loading="options.loading">
<div class="sys-dict-container" v-loading="optionsDictType.loading">
<el-row :gutter="8" style="width: 100%; height: 100%; flex: 1">
<el-col :span="12" :xs="24" class="full-height">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-form :model="state.queryParamsDictType" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-form-item label="字典名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="字典名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParamsDictType.name" placeholder="字典名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-form-item label="字典编码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="字典编码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParamsDictType.code" placeholder="字典编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -21,15 +21,15 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysDictType:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysDictType:page'" :loading="optionsDictType.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="optionsDictType.loading"> 重置 </el-button>
</el-button-group>
</el-col>
</el-row>
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange" @cell-click="handleDictData">
<vxe-grid ref="xGridDictType" class="xGrid-style" v-bind="optionsDictType" v-on="gridEventsDictType" @cell-click="handleDictData">
<template #toolbar_buttons>
<el-icon size="16" style="margin-right: 3px; margin-top: 2px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典
<el-button type="primary" style="margin-left: 10px" icon="ele-Plus" @click="handleAdd" v-auth="'sysDictType:add'"> 新增 </el-button>
@ -50,34 +50,25 @@
<el-button icon="ele-Edit" text type="primary" v-auth="'sysDictType:update'" @click="handleEdit(row)"> </el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button icon="ele-Delete" text type="danger" v-auth="'sysDictType:delete'" @click="handleDelete(row)"> </el-button>
<el-button icon="ele-Delete" text type="danger" v-auth="'sysDictType:delete'" @click="handleDeleteDictType(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
</el-col>
<el-col :span="12" :xs="24" class="full-height">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryDictParams" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-form :model="state.queryParamsDictData" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-form-item label="字典值" prop="value">
<el-input v-model="state.queryDictParams.value" placeholder="字典值" clearable @keyup.enter.native="handleDictQuery(true)" />
<el-input v-model="state.queryParamsDictData.value" placeholder="字典值" clearable @keyup.enter.native="handleQueryDictData" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-form-item label="编码" prop="code">
<el-input v-model="state.queryDictParams.code" placeholder="编码" clearable @keyup.enter.native="handleDictQuery(true)" />
<el-input v-model="state.queryParamsDictData.code" placeholder="编码" clearable @keyup.enter.native="handleQueryDictData" />
</el-form-item>
</el-col>
</el-row>
@ -86,18 +77,18 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleDictQuery(true)" v-auth="'sysDictType:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetDictQuery" :loading="options.loading"> 重置 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQueryDictData" v-auth="'sysDictType:page'" :loading="optionsDictData.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQueryDictData" :loading="optionsDictData.loading"> 重置 </el-button>
</el-button-group>
</el-col>
</el-row>
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xDictGrid" class="xGrid-style" v-bind="dictOptions" @sort-change="dictSortChange">
<vxe-grid ref="xGridDictData" class="xGrid-style" v-bind="optionsDictData" v-on="gridEventsDictData">
<template #toolbar_buttons>
<el-icon size="16" style="margin-right: 3px; margin-top: 2px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典值
<el-button type="primary" style="margin-left: 10px" icon="ele-Plus" @click="handleDictAdd" v-auth="'sysDictType:add'"> 新增 </el-button>
<el-button type="primary" style="margin-left: 10px" icon="ele-Plus" @click="handleAddDictData" v-auth="'sysDictType:add'"> 新增 </el-button>
</template>
<template #toolbar_tools> </template>
<template #empty>
@ -119,28 +110,19 @@
</template>
<template #row_buttons="{ row }">
<el-tooltip content="编辑" placement="top">
<el-button icon="ele-Edit" text type="primary" v-auth="'sysDictType:update'" @click="handleDictEdit(row)"> </el-button>
<el-button icon="ele-Edit" text type="primary" v-auth="'sysDictType:update'" @click="handleEditDictData(row)"> </el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button icon="ele-Delete" text type="danger" v-auth="'sysDictType:delete'" @click="handleDictDelete(row)"> </el-button>
<el-button icon="ele-Delete" text type="danger" v-auth="'sysDictType:delete'" @click="handleDeleteDictData(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="dictOptions.loading"
v-model:current-page="state.tableDictParams.page"
v-model:page-size="state.tableDictParams.pageSize"
:total="state.tableDictParams.total"
@page-change="dictPageChange"
/>
</template>
</vxe-grid>
</el-card>
</el-col>
</el-row>
<EditDictType ref="editRef" :title="state.title" @handleQuery="handleQuery(false)" @handleUpdate="updateDictSession" />
<EditDcitData ref="editDictRef" :title="state.title" @handleQuery="handleDictQuery(false)" @handleUpdate="updateDictSession" />
<EditDictType ref="editRefDictType" :title="state.title" @handleQuery="handleQuery" @handleUpdate="updateDictSession" />
<EditDcitData ref="editRefDictData" :title="state.title" @handleQuery="handleQueryDictData" @handleUpdate="updateDictSession" />
</div>
</template>
@ -148,8 +130,9 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo';
import EditDictType from '/@/views/system/dict/component/editDictType.vue';
@ -158,45 +141,39 @@ import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysDictTypeApi, SysDictDataApi } from '/@/api-services/api';
import { SysDictType, SysDictData } from '/@/api-services/models';
import { SysDictType, PageDictTypeInput, SysDictData, PageDictDataInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const xDictGrid = ref<VxeGridInstance>();
const editRef = ref<InstanceType<typeof EditDictType>>();
const editDictRef = ref<InstanceType<typeof EditDcitData>>();
const xGridDictType = ref<VxeGridInstance>();
const xGridDictData = ref<VxeGridInstance>();
const editRefDictType = ref<InstanceType<typeof EditDictType>>();
const editRefDictData = ref<InstanceType<typeof EditDcitData>>();
const state = reactive({
queryParams: {
queryParamsDictType: {
name: undefined,
code: undefined,
},
queryDictParams: {
queryParamsDictData: {
dictTypeId: undefined,
value: undefined,
code: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'orderNo', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParamDictType: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
tableDictParams: {
page: 1,
pageSize: 50,
field: 'orderNo', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParamDictData: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysDictType';
// 表格参数配置-字典类型
const options = useVxeTable<SysDictType>(
const optionsDictType = useVxeTable<SysDictType>(
{
id: 'sysDict',
id: 'sysDictType',
name: '字典信息',
columns: [
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
@ -207,75 +184,67 @@ const options = useVxeTable<SysDictType>(
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysDictType:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ rowConfig: { isCurrent: true, isHover: true }, checkboxConfig: { range: true, highlight: false } }
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParamDictType.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParamDictType.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
// 行配置
rowConfig: { isCurrent: true, isHover: true },
checkboxConfig: { range: true, highlight: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParamDictType = Local.get(localPageParamKey) || state.localPageParamDictType;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
await xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParamsDictType, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageDictTypeInput;
return getAPI(SysDictTypeApi).apiSysDictTypePagePost(params);
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
return getAPI(SysDictTypeApi).apiSysDictTypePagePost(params);
// 查询操作
const handleQuery = async () => {
await xGridDictType.value?.commitProxy('query');
};
// 重置操作
const resetQuery = async () => {
state.queryParams.code = undefined;
state.queryParams.name = undefined;
await handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
await handleQuery();
};
// 列排序
const sortChange = async (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
await handleQuery();
state.queryParamsDictType.code = undefined;
state.queryParamsDictType.name = undefined;
await xGridDictType.value?.commitProxy('reload');
};
// 打开新增页面
const handleAdd = () => {
state.title = '添加字典';
editRef.value?.openDialog({ status: 1, orderNo: 100 });
editRefDictType.value?.openDialog({ status: 1, orderNo: 100 });
};
// 打开编辑页面
const handleEdit = (row: any) => {
state.title = '编辑字典';
editRef.value?.openDialog(row);
editRefDictType.value?.openDialog(row);
};
// 点击表格，加载字典值表格数据
// 点击字典类型，加载其字典值数据
const handleDictData = async (scope: any) => {
state.queryDictParams.dictTypeId = scope.row.id;
await handleDictQuery(true);
state.queryParamsDictData.dictTypeId = scope.row.id;
await handleQueryDictData();
};
// 删除
const handleDelete = (row: any) => {
// 删除字典
const handleDeleteDictType = (row: any) => {
ElMessageBox.confirm(`确定删除字典：【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -283,19 +252,32 @@ const handleDelete = (row: any) => {
})
.then(async () => {
await getAPI(SysDictTypeApi).apiSysDictTypeDeletePost({ id: row.id });
handleQuery();
updateDictSession();
xDictGrid.value?.loadData([]);
state.tableDictParams.total = 0;
await handleQuery();
await updateDictSession();
xGridDictData.value?.loadData([]);
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 表格事件
const gridEventsDictType: VxeGridListeners<SysDictType> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParamDictType.pageSize = pageSize;
// Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParamDictType.defaultSort = { field: field, order: order!, descStr: 'desc' };
// Local.set(localPageParamKey, state.localPageParam);
},
};
// 表格参数配置-字典值
const dictOptions = useVxeTable<SysDictData>(
const optionsDictData = useVxeTable<SysDictData>(
{
id: 'dictInfo',
id: 'sysDictData',
name: '字典值信息',
columns: [
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
@ -308,53 +290,62 @@ const dictOptions = useVxeTable<SysDictData>(
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysDictType:export'),
searchCallback: () => handleDictQuery(),
queryAllCallback: () => fetchDictData({ pageSize: 99999 }),
},
{ loading: false, rowConfig: { isCurrent: true, isHover: true }, checkboxConfig: { range: true, highlight: false } }
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryDictDataApi(page, sort) } },
// // 排序配置
// sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// // 分页配置
// pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
// 等待
loading: false,
// 行配置
rowConfig: { isCurrent: true, isHover: true },
// 多选配置
checkboxConfig: { range: true, highlight: false },
}
);
// 查询操作
const handleDictQuery = async (reset = false) => {
dictOptions.loading = true;
if (reset) state.tableDictParams.page = 1;
var res = await fetchDictData(null);
xDictGrid.value?.loadData(res.data.result?.items ?? []);
state.tableDictParams.total = res.data.result?.total;
dictOptions.loading = false;
};
// 获取数据
const fetchDictData = async (tableParams: any) => {
let params = Object.assign(state.queryDictParams, state.tableDictParams, tableParams);
// 查询api
const handleQueryDictDataApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParamsDictData, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageDictDataInput;
return getAPI(SysDictDataApi).apiSysDictDataPagePost(params);
};
// 重置操作
const resetDictQuery = async () => {
state.queryDictParams.value = undefined;
state.queryDictParams.code = undefined;
await handleDictQuery(true);
// 查询操作
const handleQueryDictData = async () => {
await xGridDictData.value?.commitProxy('query');
};
const handleDictAdd = () => {
if (!state.queryDictParams.dictTypeId) {
// 重置操作
const resetQueryDictData = async () => {
state.queryParamsDictData.value = undefined;
state.queryParamsDictData.code = undefined;
await xGridDictData.value?.commitProxy('reload');
};
// 添加字典值
const handleAddDictData = () => {
if (!state.queryParamsDictData.dictTypeId) {
ElMessage.warning('请选择字典');
return;
}
state.title = '添加字典值';
editDictRef.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryDictParams.dictTypeId });
editRefDictData.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryParamsDictData.dictTypeId });
};
// 打开编辑页面
const handleDictEdit = (row: any) => {
const handleEditDictData = (row: any) => {
state.title = '编辑字典值';
editDictRef.value?.openDialog(row);
editRefDictData.value?.openDialog(row);
};
// 删除
const handleDictDelete = (row: any) => {
// 删除字典值
const handleDeleteDictData = (row: any) => {
ElMessageBox.confirm(`确定删除字典值：【${row.value}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -362,25 +353,25 @@ const handleDictDelete = (row: any) => {
})
.then(async () => {
await getAPI(SysDictDataApi).apiSysDictDataDeletePost({ id: row.id });
handleDictQuery();
updateDictSession();
await handleQueryDictData();
await updateDictSession();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 改变字典值页码序号或页面容量
const dictPageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableDictParams.page = currentPage;
state.tableDictParams.pageSize = pageSize;
await handleDictQuery();
};
// 字典值列排序
const dictSortChange = async (options: any) => {
state.tableDictParams.field = options.field;
state.tableDictParams.order = options.order;
await handleDictQuery();
// 表格事件
const gridEventsDictData: VxeGridListeners<SysDictData> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParamDictData.pageSize = pageSize;
// Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParamDictData.defaultSort = { field: field, order: order!, descStr: 'desc' };
// Local.set(localPageParamKey, state.localPageParam);
},
};
// 更新前端字典缓存

0
Web/src/views/system/file/component/editSysfile.vue → Web/src/views/system/file/component/editFile.vue
View File

110
Web/src/views/system/file/index.vue
View File

@ -5,17 +5,17 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="文件名称" prop="fileName">
<el-input v-model="state.queryParams.fileName" placeholder="文件名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.fileName" placeholder="文件名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="开始时间" prop="name">
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" class="w100" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="结束时间" prop="code">
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" class="w100" />
</el-form-item>
</el-col>
</el-row>
@ -26,7 +26,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysFile:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysFile:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -34,7 +34,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="showUpload" v-auth="'sysFile:uploadFile'"> 上传 </el-button>
</template>
@ -72,15 +72,6 @@
<el-button icon="ele-Download" size="small" text type="primary" @click="handleDownload(row)" v-auth="'sysFile:downloadFile'" />
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -133,8 +124,9 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage, UploadInstance } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import { downloadByUrl } from '/@/utils/download';
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
@ -142,11 +134,11 @@ import VueOfficePdf from '@vue-office/pdf';
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';
import EditFile from '/@/views/system/file/component/editSysfile.vue';
import EditFile from '/@/views/system/file/component/editFile.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysFileApi } from '/@/api-services/api';
import { SysFile } from '/@/api-services/models';
import { SysFile, PageFileInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
// const baseUrl = window.__env__.VITE_API_URL;
@ -158,13 +150,9 @@ const state = reactive({
startTime: undefined,
endTime: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
diaglogEditFile: false,
@ -181,6 +169,8 @@ const state = reactive({
previewList: [] as string[],
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysFile';
// 表格参数配置
const options = useVxeTable<SysFile>(
{
@ -204,11 +194,20 @@ const options = useVxeTable<SysFile>(
{ field: 'remark', title: '备注', minWidth: 200, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 150, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysFile:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ rowConfig: { height: 80 } }
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
// 行设置
rowConfig: { height: 80 },
}
);
// 页面初始化
@ -216,42 +215,23 @@ onMounted(async () => {
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageFileInput;
return getAPI(SysFileApi).apiSysFilePagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.fileName = undefined;
state.queryParams.startTime = undefined;
state.queryParams.endTime = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开上传页面
@ -296,6 +276,20 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysFile> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 打开Pdf预览页面
const showPreviewDialog = async (row: any) => {
if (row.suffix == '.pdf') {

138
Web/src/views/system/ldap/index.vue
View File

@ -5,7 +5,7 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="关键字">
<el-input v-model="state.queryParams.searchKey" placeholder="请输入模糊查询关键字" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.searchKey" placeholder="请输入模糊查询关键字" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -16,7 +16,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysLdap:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysLdap:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
<el-button icon="ele-Filter" type="primary" :loading="options.loading" @click="state.visible = true" v-auth="'sysLdap:page'" style="margin-left: 12px"> 高级查询</el-button>
@ -35,7 +35,7 @@
<el-row :gutter="10">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb8">
<el-form-item label="主机">
<el-input v-model="state.queryParams.host" clearable placeholder="请输入主机" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.host" clearable placeholder="请输入主机" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -44,14 +44,14 @@
<div class="filter-dialog-footer">
<el-text type="danger"></el-text>
<el-button icon="ele-Close" type="info" :loading="options.loading" @click="state.visible = false">关闭</el-button>
<el-button icon="ele-Search" type="primary" :loading="options.loading" @click="handleQuery(true)">查询</el-button>
<el-button icon="ele-Search" type="primary" :loading="options.loading" @click="handleQuery">查询</el-button>
<el-button icon="ele-RefreshRight" type="primary" :loading="options.loading" @click="resetQueryFliter">重置</el-button>
</div>
</template>
</el-dialog>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysLdap:add'"> 新增 </el-button>
</template>
@ -75,15 +75,6 @@
</el-tooltip>
<el-button icon="ele-Refresh" text type="danger" v-auth="'sysLdap:syncUser'" @click="handleSync(row)">同步域账户</el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -96,14 +87,15 @@
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth, auths } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysLdapApi } from '/@/api-services';
import { SysLdap } from '/@/api-services/models';
import { SysLdap, SysLdapInput } from '/@/api-services/models';
// 异步引用组件
const PrintDialog = defineAsyncComponent(() => import('/@/views/system/print/component/hiprint/preview.vue'));
@ -117,84 +109,74 @@ const state = reactive({
searchKey: '',
host: '',
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysLdap';
// 表格参数配置
const options = useVxeTable<SysLdap>({
id: 'sysLdap',
name: '系统域登录信息配置',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'host', title: '主机', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'port', title: '端口', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'baseDn', title: '用户搜索基准', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'bindDn', title: '绑定DN', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'authFilter', title: '用户过滤规则', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'version', title: 'Ldap版本', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 200, showOverflow: true, slots: { default: 'row_buttons' }, visible: auths(['sysLdap:update', 'sysLdap:delete', 'sysLdap:syncUser']) },
],
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysLdap>(
{
id: 'sysLdap',
name: '系统域登录信息配置',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'host', title: '主机', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'port', title: '端口', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'baseDn', title: '用户搜索基准', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'bindDn', title: '绑定DN', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'authFilter', title: '用户过滤规则', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'version', title: 'Ldap版本', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 200, showOverflow: true, slots: { default: 'row_buttons' }, visible: auths(['sysLdap:update', 'sysLdap:delete', 'sysLdap:syncUser']) },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
if (!auth('sysLdap:page')) return;
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as SysLdapInput;
return getAPI(SysLdapApi).apiSysLdapPagePost(params);
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
return getAPI(SysLdapApi).apiSysLdapPagePost(params);
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = async () => {
state.queryParams.searchKey = '';
await handleQuery(true);
await xGrid.value?.commitProxy('reload');
};
// 重置高级查询
const resetQueryFliter = async () => {
state.queryParams.host = '';
await handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
await handleQuery();
};
// 列排序
const sortChange = async (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
await handleQuery();
};
@ -225,6 +207,20 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysLdap> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 同步域账户
const handleSync = (row: any) => {
ElMessageBox.confirm(`确定要删除域登录信息配置：【${row.host}】?`, '提示', {

138
Web/src/views/system/log/difflog/index.vue
View File

@ -21,7 +21,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysDifflog:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysDifflog:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -29,7 +29,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button icon="ele-DeleteFilled" type="danger" @click="handleClear" v-auth="'sysDifflog:clear'"> 清空 </el-button>
</template>
@ -39,15 +39,6 @@
<template #empty>
<el-empty :image-size="200" />
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
</div>
@ -58,12 +49,13 @@ import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useDateTimeShortCust } from '/@/hooks/dateTimeShortCust';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import { getAPI } from '/@/utils/axios-utils';
import { SysLogDiffApi } from '/@/api-services/api';
import { SysLogDiff } from '/@/api-services/models';
import { SysLogDiff, PageLogInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const shortcuts = useDateTimeShortCust();
@ -72,66 +64,82 @@ const state = reactive({
startTime: undefined,
endTime: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'desc', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'id', order: 'desc', descStr: 'desc' },
},
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysDiffLog';
// 表格参数配置
const options = useVxeTable<SysLogDiff>({
id: 'sysDiffLog',
name: '差异日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'diffType', title: '差异操作', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'sql', title: 'Sql语句', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'parameters', title: '参数', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'message', title: '日志消息', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'beforeData', title: '操作前记录', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'afterData', title: '操作后记录', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'businessData', title: '业务对象', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'createTime', title: '操作时间', minWidth: 100, showOverflow: 'tooltip' },
],
enableExport: auth('sysDifflog:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysLogDiff>(
{
id: 'sysDiffLog',
name: '差异日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'diffType', title: '差异操作', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'sql', title: 'Sql语句', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'parameters', title: '参数', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'message', title: '日志消息', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'beforeData', title: '操作前记录', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'afterData', title: '操作后记录', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'businessData', title: '业务对象', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'createTime', title: '操作时间', minWidth: 100, showOverflow: 'tooltip' },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageLogInput;
return getAPI(SysLogDiffApi).apiSysLogDiffPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.startTime = undefined;
state.queryParams.endTime = undefined;
handleQuery(true);
await xGrid.value?.commitProxy('reload');
};
// 表格事件
const gridEvents: VxeGridListeners<SysLogDiff> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 清空日志
@ -142,18 +150,4 @@ const handleClear = async () => {
ElMessage.success('清空成功');
handleQuery();
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
};
</script>

168
Web/src/views/system/log/exlog/index.vue
View File

@ -15,12 +15,12 @@
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="显示名称" prop="displayTitle">
<el-input v-model="state.queryParams.displayTitle" clearable placeholder="显示名称" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.displayTitle" clearable placeholder="显示名称" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="操作人" prop="realName">
<el-input v-model="state.queryParams.realName" clearable placeholder="操作人" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.realName" clearable placeholder="操作人" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -31,7 +31,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysExlog:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysExlog:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -39,7 +39,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @cell-dblclick="handleView" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents" @cell-dblclick="handleView">
<template #toolbar_buttons>
<el-button icon="ele-DeleteFilled" type="danger" @click="handleClear" v-auth="'sysExlog:clear'"> 清空 </el-button>
</template>
@ -61,15 +61,6 @@
<template #row_buttons="{ row }">
<el-button icon="ele-InfoFilled" text type="primary" @click="handleView({ row })">详情</el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -106,15 +97,16 @@ import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useDateTimeShortCust } from '/@/hooks/dateTimeShortCust';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import { StringToObj } from '/@/utils/json-utils';
import { getAPI } from '/@/utils/axios-utils';
import { SysLogExApi } from '/@/api-services/api';
import { SysLogEx } from '/@/api-services/models';
import { SysLogEx, PageLogInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const shortcuts = useDateTimeShortCust();
@ -125,13 +117,9 @@ const state = reactive({
displayTitle: '',
realName: '',
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'desc', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'id', order: 'desc', descStr: 'desc' },
},
visible: false,
detail: {
@ -143,70 +131,90 @@ const state = reactive({
activeTab: 'message',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysExLog';
// 表格参数配置
const options = useVxeTable<SysLogEx>({
id: 'sysExLog',
name: '异常日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'controllerName', title: '模块名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'displayTitle', title: '显示名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'actionName', title: '方法名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'httpMethod', title: '请求方式', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'requestUrl', title: '请求地址', minWidth: 300, showOverflow: 'tooltip' },
{ field: 'logLevel', title: '级别', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_logLevel' } },
{ field: 'eventId', title: '事件Id', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'threadId', title: '线程Id', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'traceId', title: '请求跟踪Id', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'account', title: '账号名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'realName', title: '真实姓名', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'remoteIp', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'location', title: '登录地点', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'longitude', title: '经度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'latitude', title: '纬度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'os', title: '操作系统', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'logDateTime', title: '日志时间', minWidth: 160, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysExlog:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysLogEx>(
{
id: 'sysExLog',
name: '异常日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'controllerName', title: '模块名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'displayTitle', title: '显示名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'actionName', title: '方法名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'httpMethod', title: '请求方式', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'requestUrl', title: '请求地址', minWidth: 300, showOverflow: 'tooltip' },
{ field: 'logLevel', title: '级别', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_logLevel' } },
{ field: 'eventId', title: '事件Id', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'threadId', title: '线程Id', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'traceId', title: '请求跟踪Id', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'account', title: '账号名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'realName', title: '真实姓名', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'remoteIp', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'location', title: '登录地点', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'longitude', title: '经度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'latitude', title: '纬度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'os', title: '操作系统', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'logDateTime', title: '日志时间', minWidth: 160, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageLogInput;
return getAPI(SysLogExApi).apiSysLogExPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.startTime = undefined;
state.queryParams.endTime = undefined;
state.queryParams.displayTitle = '';
state.queryParams.realName = '';
handleQuery(true);
await xGrid.value?.commitProxy('reload');
};
// 表格事件
const gridEvents: VxeGridListeners<SysLogEx> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 清空日志
@ -215,7 +223,7 @@ const handleClear = async () => {
await getAPI(SysLogExApi).apiSysLogExClearPost();
options.loading = false;
ElMessage.success('清空成功');
handleQuery(true);
await handleQuery();
};
// 查看详情
@ -228,20 +236,6 @@ const handleView = async ({ row }: any) => {
state.detail.returnResult = StringToObj(data?.result?.returnResult);
state.visible = true;
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
};
</script>
<style lang="scss" scoped>

176
Web/src/views/system/log/oplog/index.vue
View File

@ -5,22 +5,22 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="开始时间" prop="name">
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" class="w100" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="结束时间" prop="code">
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" class="w100" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="显示名称" prop="displayTitle">
<el-input v-model="state.queryParams.displayTitle" clearable placeholder="显示名称" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.displayTitle" clearable placeholder="显示名称" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="操作人" prop="realName">
<el-input v-model="state.queryParams.realName" clearable placeholder="操作人" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.realName" clearable placeholder="操作人" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -31,7 +31,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysOplog:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysOplog:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -39,7 +39,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @cell-dblclick="handleView" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents" @cell-dblclick="handleView">
<template #toolbar_buttons>
<el-button icon="ele-DeleteFilled" type="danger" @click="handleClear" v-auth="'sysOplog:clear'"> 清空 </el-button>
</template>
@ -61,15 +61,6 @@
<template #row_buttons="{ row }">
<el-button icon="ele-InfoFilled" text type="primary" @click="handleView({ row })">详情</el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -106,15 +97,16 @@ import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useDateTimeShortCust } from '/@/hooks/dateTimeShortCust';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import { StringToObj } from '/@/utils/json-utils';
import { getAPI } from '/@/utils/axios-utils';
import { SysLogOpApi } from '/@/api-services/api';
import { SysLogOp } from '/@/api-services/models';
import { SysLogOp, PageLogInput } from '/@/api-services/models';
const shortcuts = useDateTimeShortCust();
const xGrid = ref<VxeGridInstance>();
@ -125,13 +117,9 @@ const state = reactive({
displayTitle: '',
realName: '',
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'desc', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'id', order: 'desc', descStr: 'desc' },
},
visible: false,
detail: {
@ -143,72 +131,92 @@ const state = reactive({
activeTab: 'message',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysOpLog';
// 表格参数配置
const options = useVxeTable<SysLogOp>({
id: 'sysOpLog',
name: '操作日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'controllerName', title: '模块名称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'displayTitle', title: '显示名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'actionName', title: '方法名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'httpMethod', title: '请求方式', minWidth: 90, showOverflow: 'tooltip' },
// { field: 'returnResult', title: '返回结果', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'logLevel', title: '级别', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_logLevel' } },
{ field: 'eventId', title: '事件Id', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'threadId', title: '线程Id', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'traceId', title: '请求跟踪Id', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'account', title: '账号名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'realName', title: '真实姓名', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'remoteIp', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'location', title: '登录地点', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'longitude', title: '经度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'latitude', title: '纬度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'os', title: '操作系统', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 100, showOverflow: 'tooltip' },
// { field: 'exception', title: '异常对象', minWidth: 150, showOverflow: 'tooltip' },
// { field: 'message', title: '日志消息', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'logDateTime', title: '日志时间', minWidth: 160, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysOplog:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysLogOp>(
{
id: 'sysOpLog',
name: '操作日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'controllerName', title: '模块名称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'displayTitle', title: '显示名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'actionName', title: '方法名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'httpMethod', title: '请求方式', minWidth: 90, showOverflow: 'tooltip' },
// { field: 'returnResult', title: '返回结果', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'logLevel', title: '级别', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_logLevel' } },
{ field: 'eventId', title: '事件Id', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'threadId', title: '线程Id', minWidth: 90, showOverflow: 'tooltip' },
{ field: 'traceId', title: '请求跟踪Id', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'account', title: '账号名称', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'realName', title: '真实姓名', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'remoteIp', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'location', title: '登录地点', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'longitude', title: '经度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'latitude', title: '纬度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'os', title: '操作系统', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 100, showOverflow: 'tooltip' },
// { field: 'exception', title: '异常对象', minWidth: 150, showOverflow: 'tooltip' },
// { field: 'message', title: '日志消息', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'logDateTime', title: '日志时间', minWidth: 160, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageLogInput;
return getAPI(SysLogOpApi).apiSysLogOpPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.startTime = undefined;
state.queryParams.endTime = undefined;
state.queryParams.displayTitle = '';
state.queryParams.realName = '';
handleQuery(true);
await xGrid.value?.commitProxy('reload');
};
// 表格事件
const gridEvents: VxeGridListeners<SysLogOp> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 清空日志
@ -217,7 +225,7 @@ const handleClear = async () => {
await getAPI(SysLogOpApi).apiSysLogOpClearPost();
options.loading = false;
ElMessage.success('清空成功');
handleQuery(true);
await handleQuery();
};
// 查看详情
@ -230,20 +238,6 @@ const handleView = async ({ row }: any) => {
state.detail.returnResult = StringToObj(data?.result?.returnResult);
state.visible = true;
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
};
</script>
<style lang="scss" scoped>

156
Web/src/views/system/log/vislog/index.vue
View File

@ -5,22 +5,22 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="开始时间" prop="name">
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" class="w100" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="结束时间" prop="code">
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" class="w100" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="显示名称" prop="displayTitle">
<el-input v-model="state.queryParams.displayTitle" clearable placeholder="显示名称" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.displayTitle" clearable placeholder="显示名称" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="操作人" prop="realName">
<el-input v-model="state.queryParams.realName" clearable placeholder="操作人" @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.realName" clearable placeholder="操作人" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -31,7 +31,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysVislog:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysVislog:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -39,7 +39,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button icon="ele-DeleteFilled" type="danger" @click="handleClear" v-auth="'sysVislog:clear'"> 清空 </el-button>
<el-button icon="ele-MapLocation" type="primary" @click="handleMap"> 热力图 </el-button>
@ -52,15 +52,6 @@
<el-tag v-if="row.status === '200'" type="success">成功</el-tag>
<el-tag v-else type="danger">失败</el-tag>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -73,12 +64,13 @@ import { onMounted, reactive, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { useDateTimeShortCust } from '/@/hooks/dateTimeShortCust';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import { getAPI } from '/@/utils/axios-utils';
import { SysLogVisApi } from '/@/api-services';
import { SysLogVis } from '/@/api-services/models';
import { SysLogVis, PageLogInput } from '/@/api-services/models';
const VisMap = defineAsyncComponent(() => import('./component/visMap.vue'));
@ -92,73 +84,89 @@ const state = reactive({
displayTitle: '',
realName: '',
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'desc', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'id', order: 'desc', descStr: 'desc' },
},
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysVisLog';
// 表格参数配置
const options = useVxeTable<SysLogVis>({
id: 'sysVisLog',
name: '访问日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'displayTitle', title: '显示名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'actionName', title: '方法名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'account', title: '账号名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'realName', title: '真实姓名', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remoteIp', title: 'IP地址', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'location', title: '登录地点', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'longitude', title: '经度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'latitude', title: '纬度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'os', title: '操作系统', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'logDateTime', title: '日志时间', minWidth: 150, showOverflow: 'tooltip' },
],
enableExport: auth('sysVislog:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysLogVis>(
{
id: 'sysVisLog',
name: '访问日志',
columns: [
// { type: 'checkbox', width: 40 },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'displayTitle', title: '显示名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'actionName', title: '方法名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'account', title: '账号名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'realName', title: '真实姓名', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remoteIp', title: 'IP地址', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'location', title: '登录地点', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'longitude', title: '经度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'latitude', title: '纬度', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'os', title: '操作系统', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'elapsed', title: '耗时(ms)', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'logDateTime', title: '日志时间', minWidth: 150, showOverflow: 'tooltip' },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageLogInput;
return getAPI(SysLogVisApi).apiSysLogVisPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.startTime = undefined;
state.queryParams.endTime = undefined;
state.queryParams.displayTitle = '';
state.queryParams.realName = '';
handleQuery(true);
await xGrid.value?.commitProxy('reload');
};
// 表格事件
const gridEvents: VxeGridListeners<SysLogVis> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 清空日志
@ -167,7 +175,7 @@ const handleClear = async () => {
await getAPI(SysLogVisApi).apiSysLogVisClearPost();
options.loading = false;
ElMessage.success('清空成功');
handleQuery(true);
await handleQuery();
};
// 打开访问热力图
@ -175,18 +183,4 @@ const handleMap = async () => {
state.title = '访问者热力图';
mapRef.value?.openDialog();
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
};
</script>

64
Web/src/views/system/menu/index.vue
View File

@ -33,7 +33,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{}">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysMenu:add'"> 新增 </el-button>
<el-button-group style="padding-left: 12px">
@ -77,11 +77,10 @@
</template>
<script lang="ts" setup name="sysMenu">
import { onMounted, reactive, ref } from 'vue';
import { reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import SvgIcon from '/@/components/svgIcon/index.vue';
import EditMenu from '/@/views/system/menu/component/editMenu.vue';
@ -120,38 +119,39 @@ const options = useVxeTable<SysMenu>(
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysMenu:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ stripe: false, checkboxConfig: { range: false } }
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
stripe: false,
checkboxConfig: { range: false },
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: () => handleQueryApi() } },
// 分页配置
pagerConfig: { enabled: false },
// 工具栏配置
toolbarConfig: { export: false },
treeConfig: { expandAll: false },
}
);
// 页面初始化
onMounted(async () => {
await handleQuery();
});
// 查询操作
const handleQuery = async () => {
options.loading = true;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result ?? []);
state.menuData = res.data.result ?? [];
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, tableParams);
// 查询api
const handleQueryApi = async () => {
const params = Object.assign(state.queryParams);
return getAPI(SysMenuApi).apiSysMenuListGet(params.title, params.type);
};
// 查询操作
const handleQuery = async () => {
// 调用vxe-grid的commitProxy(query)方法，触发表格重新加载数据
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.title = undefined;
state.queryParams.type = undefined;
handleQuery();
// 调用vxe-grid的commitProxy(reload)方法，触发表格重新加载数据
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -181,6 +181,14 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysMenu> = {
// 只对 proxy-config.ajax.query 配置时有效，当手动点击查询时会触发该事件
async proxyQuery() {
state.menuData = xGrid.value?.getTableData().tableData ?? [];
},
};
// 全部展开
const handleExpand = () => {
xGrid.value?.setAllTreeExpand(true);

138
Web/src/views/system/notice/index.vue
View File

@ -5,7 +5,7 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="标题" prop="title">
<el-input v-model="state.queryParams.title" placeholder="标题" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.title" placeholder="标题" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
@ -24,7 +24,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysNotice:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysNotice:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -32,7 +32,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysNotice:add'"> 新增 </el-button>
</template>
@ -60,15 +60,6 @@
</el-tooltip>
<el-button icon="ele-Position" size="small" text type="primary" @click="handlePublic(row)" v-auth="'sysNotice:public'" :disabled="row.status === 1">发布</el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -81,15 +72,16 @@ import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import commonFunction from '/@/utils/commonFunction';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditNotice from '/@/views/system/notice/component/editNotice.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysNoticeApi } from '/@/api-services/api';
import { SysNotice } from '/@/api-services/models';
import { SysNotice, PageNoticeInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editNoticeRef = ref<InstanceType<typeof EditNotice>>();
@ -99,80 +91,70 @@ const state = reactive({
title: undefined,
type: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysNotice';
// 表格参数配置
const options = useVxeTable<SysNotice>({
id: 'sysNotice',
name: '通知公告',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'title', title: '标题', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'content', title: '内容', minWidth: 180, showOverflow: 'tooltip', slots: { default: (scope: any) => removeHtml(scope.row.content) } },
{ field: 'type', title: '类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_type' } },
{ field: 'createTime', title: '创建时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'publicUserName', title: '发布者', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'publicTime', title: '发布时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 180, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysNotice:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysNotice>(
{
id: 'sysNotice',
name: '通知公告',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'title', title: '标题', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'content', title: '内容', minWidth: 180, showOverflow: 'tooltip', slots: { default: (scope: any) => removeHtml(scope.row.content) } },
{ field: 'type', title: '类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_type' } },
{ field: 'createTime', title: '创建时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'publicUserName', title: '发布者', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'publicTime', title: '发布时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 180, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageNoticeInput;
return getAPI(SysNoticeApi).apiSysNoticePagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.title = undefined;
state.queryParams.type = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -202,6 +184,20 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysNotice> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 发布
const handlePublic = (row: any) => {
ElMessageBox.confirm(`确定发布通知公告：【${row.title}】，不可撤销?`, '提示', {

144
Web/src/views/system/oAuthUser/index.vue
View File

@ -5,12 +5,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="微信昵称" prop="nickName">
<el-input v-model="state.queryParams.nickName" placeholder="微信昵称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.nickName" placeholder="微信昵称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="state.queryParams.mobile" placeholder="手机号码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.mobile" placeholder="手机号码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -21,7 +21,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysOAuthUser:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysOAuthUser:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -29,7 +29,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons> </template>
<template #toolbar_tools> </template>
<template #empty>
@ -61,15 +61,6 @@
<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'sysOAuthUser:delete'" :disabled="row.status === 1" />
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -81,15 +72,16 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditOAuthUser from '/@/views/system/oAuthUser/component/editOAuthUser.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysOAuthUserApi } from '/@/api-services/api';
import { SysOAuthUser } from '/@/api-services/models';
import { SysOAuthUser, OAuthUserInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editOAuthUserRef = ref<InstanceType<typeof EditOAuthUser>>();
@ -98,81 +90,71 @@ const state = reactive({
nickName: undefined,
mobile: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:weChatUser';
// 表格参数配置
const options = useVxeTable<SysOAuthUser>({
id: 'weChatUser',
name: '三方账号',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'openId', title: 'OpenId', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'unionId', title: 'UnionId', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'platformType', title: '平台类型', minWidth: 110, showOverflow: 'tooltip', slots: { default: 'row_platformType' } },
{ field: 'nickName', title: '昵称', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'avatar', title: '头像', minWidth: 70, slots: { default: 'row_avatar' } },
{ field: 'mobile', title: '手机号码', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'sex', title: '性别', minWidth: 60, showOverflow: 'tooltip', slots: { default: 'row_sex' } },
{ field: 'city', title: '城市', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'province', title: '省', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'country', title: '国家', minWidth: 150, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysOAuthUser:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysOAuthUser>(
{
id: 'weChatUser',
name: '三方账号',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'openId', title: 'OpenId', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'unionId', title: 'UnionId', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'platformType', title: '平台类型', minWidth: 110, showOverflow: 'tooltip', slots: { default: 'row_platformType' } },
{ field: 'nickName', title: '昵称', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'avatar', title: '头像', minWidth: 70, slots: { default: 'row_avatar' } },
{ field: 'mobile', title: '手机号码', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'sex', title: '性别', minWidth: 60, showOverflow: 'tooltip', slots: { default: 'row_sex' } },
{ field: 'city', title: '城市', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'province', title: '省', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'country', title: '国家', minWidth: 150, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as OAuthUserInput;
return getAPI(SysOAuthUserApi).apiSysOAuthUserPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.nickName = undefined;
state.queryParams.mobile = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开编辑页面
@ -195,4 +177,18 @@ const handleDelete = (row: any) => {
})
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysOAuthUser> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
</script>

126
Web/src/views/system/onlineUser/index.vue
View File

@ -12,12 +12,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="账号" prop="userName">
<el-input v-model="state.queryParams.userName" placeholder="账号" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.userName" placeholder="账号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="姓名" prop="realName">
<el-input v-model="state.queryParams.realName" placeholder="姓名" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.realName" placeholder="姓名" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -28,7 +28,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -36,7 +36,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons> </template>
<template #toolbar_tools> </template>
<template #empty>
@ -50,15 +50,6 @@
<el-button icon="ele-CircleCloseFilled" text type="danger" v-auth="'sysOnlineUser:forceOffline'" @click="forceOffline(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
</el-drawer>
@ -72,14 +63,15 @@ import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';
import { throttle } from 'lodash-es';
import { signalR } from './signalR';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import SendMessage from '/@/views/system/onlineUser/component/sendMessage.vue';
import { getAPI, clearAccessTokens } from '/@/utils/axios-utils';
import { SysOnlineUserApi, SysAuthApi } from '/@/api-services/api';
import { SysOnlineUser } from '/@/api-services/models';
import { SysOnlineUser, PageOnlineUserInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const sendMessageRef = ref<InstanceType<typeof SendMessage>>();
@ -89,13 +81,9 @@ const state = reactive({
userName: undefined,
realName: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
onlineUserList: [] as Array<SysOnlineUser>, // 在线用户列表
lastUserState: {
@ -104,28 +92,41 @@ const state = reactive({
}, // 最后接收的用户变更状态信息
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysOnlineUser';
// 表格参数配置
const options = useVxeTable<SysOnlineUser>({
id: 'sysOnlineUser',
name: '在线用户',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 50, fixed: 'left' },
{ field: 'userName', title: '账号', minWidth: 110, showOverflow: 'tooltip' },
{ field: 'realName', title: '姓名', minWidth: 110, showOverflow: 'tooltip' },
{ field: 'ip', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 160, showOverflow: 'tooltip' },
// { field: 'connectionId', title: '连接Id', minWidth: 160, showOverflow: 'tooltip', sortable: true },
{ field: 'time', title: '登录时间', minWidth: 120, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: true,
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysOnlineUser>(
{
id: 'sysOnlineUser',
name: '在线用户',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 50, fixed: 'left' },
{ field: 'userName', title: '账号', minWidth: 110, showOverflow: 'tooltip' },
{ field: 'realName', title: '姓名', minWidth: 110, showOverflow: 'tooltip' },
{ field: 'ip', title: 'IP地址', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'browser', title: '浏览器', minWidth: 160, showOverflow: 'tooltip' },
// { field: 'connectionId', title: '连接Id', minWidth: 160, showOverflow: 'tooltip', sortable: true },
{ field: 'time', title: '登录时间', minWidth: 120, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
// 在线用户列表
signalR.off('OnlineUserList');
signalR.on('OnlineUserList', (data: any) => {
@ -170,20 +171,15 @@ const openDrawer = () => {
handleQuery();
};
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageOnlineUserInput;
return getAPI(SysOnlineUserApi).apiSysOnlineUserPagePost(params);
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
return getAPI(SysOnlineUserApi).apiSysOnlineUserPagePost(params);
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
@ -213,18 +209,18 @@ const forceOffline = async (row: any) => {
.catch(() => {});
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
// 表格事件
const gridEvents: VxeGridListeners<SysOnlineUser> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 导出对象

132
Web/src/views/system/openAccess/index.vue
View File

@ -5,7 +5,7 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="身份标识" prop="accessKey">
<el-input v-model="state.queryParams.accessKey" placeholder="身份标识" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.accessKey" placeholder="身份标识" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -16,7 +16,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysOpenAccess:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysOpenAccess:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -24,7 +24,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOpenAccess:add'"> 新增 </el-button>
<el-button icon="ele-QuestionFilled" @click="openHelp"> 说明 </el-button>
@ -47,15 +47,6 @@
<el-button icon="ele-EditPen" size="small" text type="warning" @click="handleSign(row)" />
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -69,8 +60,9 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditOpenAccess from '/@/views/system/openAccess/component/editOpenAccess.vue';
import HelpView from '/@/views/system/openAccess/component/helpView.vue';
@ -79,7 +71,7 @@ import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysOpenAccessApi } from '/@/api-services/api';
import { OpenAccessOutput } from '/@/api-services/models';
import { OpenAccessInput, OpenAccessOutput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editRef = ref<InstanceType<typeof EditOpenAccess>>();
@ -90,75 +82,65 @@ const state = reactive({
queryParams: {
accessKey: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysOpenAccess';
// 表格参数配置
const options = useVxeTable<OpenAccessOutput>({
id: 'sysOpenAccess',
name: '开发接口身份',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'accessKey', title: '身份标识', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'accessSecret', title: '密钥', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'bindUserAccount', title: '绑定用户账号', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'bindTenantName', title: '绑定租户名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', minWidth: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysOpenAccess:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<OpenAccessOutput>(
{
id: 'sysOpenAccess',
name: '开发接口身份',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'accessKey', title: '身份标识', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'accessSecret', title: '密钥', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'bindUserAccount', title: '绑定用户账号', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'bindTenantName', title: '绑定租户名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', minWidth: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as OpenAccessInput;
return getAPI(SysOpenAccessApi).apiSysOpenAccessPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.accessKey = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -188,6 +170,20 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<OpenAccessOutput> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 打开说明页面
const openHelp = () => {
helpRef.value?.openDialog();

46
Web/src/views/system/org/index.vue
View File

@ -42,7 +42,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{}">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOrg:add'"> 新增 </el-button>
<el-button-group style="padding-left: 12px">
@ -82,8 +82,8 @@
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditOrg from '/@/views/system/org/component/editOrg.vue';
@ -125,11 +125,19 @@ const options = useVxeTable<SysOrg>(
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysOrg:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ stripe: false, checkboxConfig: { range: false } }
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
stripe: false,
checkboxConfig: { range: false },
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: () => handleQueryApi() } },
// 分页配置
pagerConfig: { enabled: false },
// 工具栏配置
toolbarConfig: { export: false },
treeConfig: { expandAll: false },
}
);
// 页面初始化
@ -143,10 +151,16 @@ onMounted(async () => {
});
});
// 查询api
const handleQueryApi = async () => {
const params = Object.assign(state.queryParams);
return getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
};
// 查询操作
const handleQuery = async (updateTree: boolean = false) => {
options.loading = true;
var res = await fetchData(null);
var res = await handleQueryApi();
xGrid.value?.loadData(res.data.result ?? []);
options.loading = false;
// 是否更新左侧机构列表树
@ -159,19 +173,13 @@ const handleQuery = async (updateTree: boolean = false) => {
state.treeData = res.data.result ?? [];
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, tableParams);
return getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
};
// 重置操作
const resetQuery = async () => {
state.queryParams.id = 0;
state.queryParams.name = undefined;
state.queryParams.code = undefined;
state.queryParams.type = undefined;
await handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -201,6 +209,14 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysOrg> = {
// 只对 proxy-config.ajax.query 配置时有效，当手动点击查询时会触发该事件
async proxyQuery() {
state.treeData = xGrid.value?.getTableData().tableData ?? [];
},
};
// 树组件点击
const handleNodeChange = async (node: any) => {
state.queryParams.id = node.id;

132
Web/src/views/system/plugin/index.vue
View File

@ -5,7 +5,7 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="功能名称" pro="name">
<el-input v-model="state.queryParams.name" placeholder="功能名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="功能名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -16,7 +16,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysPlugin:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysPlugin:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -24,7 +24,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysPlugin:add'"> 新增 </el-button>
</template>
@ -47,15 +47,6 @@
<el-button icon="ele-Delete" text type="danger" v-auth="'sysPlugin:delete'" @click="handleDelete(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -67,15 +58,16 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditPlugin from '/@/views/system/plugin/component/editPlugin.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysPluginApi } from '/@/api-services/api';
import { SysPlugin } from '/@/api-services/models';
import { SysPlugin, PagePluginInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editPluginRef = ref<InstanceType<typeof EditPlugin>>();
@ -83,76 +75,66 @@ const state = reactive({
queryParams: {
name: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysPlugin';
// 表格参数配置
const options = useVxeTable<SysPlugin>({
id: 'sysPlugin',
name: '插件信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '功能名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'assemblyName', title: '程序集名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysPlugin:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysPlugin>(
{
id: 'sysPlugin',
name: '插件信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '功能名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'assemblyName', title: '程序集名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PagePluginInput;
return getAPI(SysPluginApi).apiSysPluginPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.name = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -181,4 +163,18 @@ const handleDelete = (row: any) => {
})
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysPlugin> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
</script>

134
Web/src/views/system/pos/index.vue
View File

@ -5,12 +5,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="职位名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="职位名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="职位名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="职位编码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="职位编码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.code" placeholder="职位编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -21,7 +21,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysPos:page'"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysPos:page'"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
</el-button-group>
</el-col>
@ -29,7 +29,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysPos:add'"> 新增 </el-button>
</template>
@ -52,15 +52,6 @@
<el-button icon="ele-Delete" text type="danger" v-auth="'sysPos:delete'" @click="handleDelete(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -71,15 +62,16 @@
<script lang="ts" setup name="sysPos">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditPos from '/@/views/system/pos/component/editPos.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysPosApi } from '/@/api-services/api';
import { PosOutput } from '/@/api-services/models';
import { PagePosOutput, PagePosInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editPosRef = ref<InstanceType<typeof EditPos>>();
@ -88,76 +80,68 @@ const state = reactive({
name: undefined,
code: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysPos';
// 表格参数配置
const options = useVxeTable<PosOutput>({
id: 'sysPos',
name: '职位',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '职位名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'code', title: '职位编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<PagePosOutput>(
{
id: 'sysPos',
name: '职位',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '职位名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'code', title: '职位编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PagePosInput;
return getAPI(SysPosApi).apiSysPosPagePost(params);
};
// 查询操作
const handleQuery = async () => {
// 调用vxe-grid的commitProxy(query)方法，触发表格重新加载数据
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.code = undefined;
state.queryParams.name = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -186,4 +170,18 @@ const handleDelete = (row: any) => {
})
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<PagePosOutput> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
</script>

138
Web/src/views/system/print/index.vue
View File

@ -5,7 +5,7 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="模板名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="模板名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="模板名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -16,7 +16,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysPrint:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysPrint:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -24,7 +24,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysPrint:add'"> 新增 </el-button>
</template>
@ -47,15 +47,6 @@
<el-button icon="ele-Delete" text type="danger" v-auth="'sysPrint:delete'" @click="handleDelete(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -67,15 +58,16 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditPrint from '/@/views/system/print/component/editPrint.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysPrintApi } from '/@/api-services/api';
import { SysPrint } from '/@/api-services/models';
import { SysPrint, PagePrintInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editPrintRef = ref<InstanceType<typeof EditPrint>>();
@ -83,78 +75,68 @@ const state = reactive({
queryParams: {
name: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysPrint';
// 表格参数配置
const options = useVxeTable<SysPrint>({
id: 'sysPrint',
name: '打印信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '名称', minWidth: 250, showOverflow: 'tooltip' },
// { field: 'template', title: '模板', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remark', title: '备注', minWidth: 250, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 100, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysPrint:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysPrint>(
{
id: 'sysPrint',
name: '打印信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '名称', minWidth: 250, showOverflow: 'tooltip' },
// { field: 'template', title: '模板', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remark', title: '备注', minWidth: 250, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 100, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PagePrintInput;
return getAPI(SysPrintApi).apiSysPrintPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.name = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -178,9 +160,23 @@ const handleDelete = (row: any) => {
})
.then(async () => {
await getAPI(SysPrintApi).apiSysPrintDeletePost({ id: row.id });
handleQuery();
await handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysPrint> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
</script>

140
Web/src/views/system/region/index.vue
View File

@ -11,12 +11,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="行政名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="行政代码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -27,7 +27,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysRegion:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRegion:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -35,7 +35,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{ transform: true, parentField: 'pid' }" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents" :tree-config="{ transform: true, parentField: 'pid' }">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysRegion:add'"> 新增 </el-button>
<el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:add'"> 同步统计局 </el-button>
@ -56,15 +56,6 @@
<el-button icon="ele-Delete" text type="danger" v-auth="'sysRegion:delete'" @click="handleDelete(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
</el-col>
@ -78,15 +69,16 @@
import { nextTick, onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import RegionTree from '/@/views/system/region/component/regionTree.vue';
import EditRegion from '/@/views/system/region/component/editRegion.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysRegionApi } from '/@/api-services/api';
import { SysRegion } from '/@/api-services/models';
import { SysRegion, PageRegionInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editRegionRef = ref<InstanceType<typeof EditRegion>>();
@ -98,40 +90,49 @@ const state = reactive({
name: undefined,
code: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysRegion';
// 表格参数配置
const options = useVxeTable<SysRegion>({
id: 'sysRegion',
name: '区域信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 100, fixed: 'left' },
{ field: 'name', title: '行政名称', minWidth: 280, showOverflow: 'tooltip', treeNode: true },
{ field: 'code', title: '行政代码', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'cityCode', title: '区号', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remark', title: '备注', minWidth: 300, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysRegion:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<SysRegion>(
{
id: 'sysRegion',
name: '区域信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 100, fixed: 'left' },
{ field: 'name', title: '行政名称', minWidth: 280, showOverflow: 'tooltip', treeNode: true },
{ field: 'code', title: '行政代码', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'cityCode', title: '区号', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remark', title: '备注', minWidth: 300, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
// 展开表格所有数据，数据量大时请勿开启
nextTick(() => {
@ -141,43 +142,24 @@ onMounted(async () => {
});
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageRegionInput;
return getAPI(SysRegionApi).apiSysRegionPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.id = -1;
state.queryParams.pid = undefined;
state.queryParams.name = undefined;
state.queryParams.code = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -201,7 +183,7 @@ const handleDelete = (row: any) => {
})
.then(async () => {
await getAPI(SysRegionApi).apiSysRegionDeletePost({ id: row.id });
handleQuery();
await handleQuery();
// 编辑删除后更新机构数据
regionTreeRef.value?.fetchTreeData();
ElMessage.success('删除成功');
@ -209,12 +191,26 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<SysRegion> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 树组件点击
const handleNodeChange = async (node: any) => {
state.queryParams.pid = node.id;
state.queryParams.name = undefined;
state.queryParams.code = undefined;
handleQuery();
await handleQuery();
};
// 同步国家统计局操作

133
Web/src/views/system/role/index.vue
View File

@ -5,12 +5,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="角色名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="角色名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="角色名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="角色编码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="角色编码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.code" placeholder="角色编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -21,7 +21,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysRole:page'"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRole:page'"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
</el-button-group>
</el-col>
@ -29,7 +29,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysRole:add'"> 新增 </el-button>
<el-button type="primary" icon="ele-Link" @click="openBaseApi" plain> 设置基础接口资源 </el-button>
@ -62,15 +62,6 @@
<el-button icon="ele-Link" size="small" text type="primary" @click="openGrantApi(row)" v-auth="'sysRole:grantApi'"> 接口资源 </el-button>
<el-button icon="ele-OfficeBuilding" size="small" text type="primary" @click="openGrantData(row)" v-auth="'sysRole:grantDataScope'">数据范围</el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -85,8 +76,9 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditRole from '/@/views/system/role/component/editRole.vue';
import GrantData from '/@/views/system/role/component/grantData.vue';
@ -96,7 +88,7 @@ import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysRoleApi } from '/@/api-services/api';
import { PageRoleOutput } from '/@/api-services/models';
import { PageRoleInput, PageRoleOutput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editRoleRef = ref<InstanceType<typeof EditRole>>();
@ -108,78 +100,69 @@ const state = reactive({
name: undefined,
code: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysRole';
// 表格参数配置
const options = useVxeTable<PageRoleOutput>({
id: 'sysRole',
name: '角色',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '角色名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'code', title: '角色编码', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'dataScope', title: '数据范围', minWidth: 150, showOverflow: 'tooltip', slots: { default: 'row_dataScope' } },
{ field: 'tenantName', title: '租户名称', minWidth: 180, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } },
],
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<PageRoleOutput>(
{
id: 'sysRole',
name: '角色',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '角色名称', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'code', title: '角色编码', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'dataScope', title: '数据范围', minWidth: 150, showOverflow: 'tooltip', slots: { default: 'row_dataScope' } },
{ field: 'tenantName', title: '租户名称', minWidth: 180, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
if (reset) state.tableParams.page = 1;
options.loading = true;
var res = await fetchData(null);
await xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageRoleInput;
return getAPI(SysRoleApi).apiSysRolePagePost(params);
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
return getAPI(SysRoleApi).apiSysRolePagePost(params);
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = async () => {
state.queryParams.code = undefined;
state.queryParams.name = undefined;
await handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
await handleQuery();
};
// 列排序
const sortChange = async (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
await handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -209,6 +192,20 @@ const handleDelete = (row: any) => {
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<PageRoleOutput> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 打开授权数据范围页面
const openGrantData = (row: any) => {
grantDataRef.value?.openDialog(row);

206
Web/src/views/system/tenant/index.vue
View File

@ -5,12 +5,12 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="租户名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="租户名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.name" placeholder="租户名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="联系电话" prop="code">
<el-input v-model="state.queryParams.phone" placeholder="联系电话" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.phone" placeholder="联系电话" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -21,7 +21,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysTenant:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysTenant:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -29,7 +29,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @cell-dblclick="handleEdit" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button icon="ele-Plus" type="primary" @click="handleAdd" v-auth="'sysTenant:add'"> 新增 </el-button>
<el-button type="danger" icon="ele-Refresh" @click="syncTenantDb" plain> 同步所有租户数据库 </el-button>
@ -89,15 +89,6 @@
<el-button icon="ele-Menu" size="small" text type="primary" @click="openGrantMenu(row)" :v-auth="'sysTenant:grantMenu'"> 授权菜单 </el-button>
<el-button icon="ele-Link" size="small" text type="primary" @click="openGrantApi(row)"> 授权接口 </el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
@ -111,8 +102,9 @@
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage, ElButton } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import EditTenant from '/@/views/system/tenant/component/editTenant.vue';
import GrantMenu from '/@/views/system/tenant/component/grantMenu.vue';
@ -121,7 +113,7 @@ import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysTenantApi } from '/@/api-services/api';
import { TenantOutput } from '/@/api-services/models';
import { PageTenantInput, TenantOutput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editTenantRef = ref<InstanceType<typeof EditTenant>>();
@ -132,84 +124,74 @@ const state = reactive({
name: undefined,
phone: undefined,
},
tableParams: {
page: 1,
pageSize: 10,
field: 'createTime', // 默认的排序字段
order: 'desc', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 20 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysTenant';
// 表格参数配置
const options = useVxeTable<TenantOutput>({
id: 'sysTenant',
name: '租户信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '租户名称', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'adminAccount', title: '租管账号', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'phone', title: '电话', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'host', title: '主机', showOverflow: 'tooltip' },
{ field: 'email', title: '邮箱', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'tenantType', title: '租户类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_tenantType' } },
{ field: 'status', title: '状态', minWidth: 100, slots: { default: 'row_status' } },
{ field: 'dbType', title: '数据库类型', minWidth: 120, showOverflow: 'tooltip', slots: { default: 'row_dbType' } },
{ field: 'configId', title: '数据库标识', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'connection', title: '数据库连接', minWidth: 300, showOverflow: 'tooltip' },
{ field: 'slaveConnections', title: '从库连接', showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 380, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysTenant:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<TenantOutput>(
{
id: 'sysTenant',
name: '租户信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '租户名称', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'adminAccount', title: '租管账号', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'phone', title: '电话', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'host', title: '主机', showOverflow: 'tooltip' },
{ field: 'email', title: '邮箱', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'tenantType', title: '租户类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_tenantType' } },
{ field: 'status', title: '状态', minWidth: 100, slots: { default: 'row_status' } },
{ field: 'dbType', title: '数据库类型', minWidth: 120, showOverflow: 'tooltip', slots: { default: 'row_dbType' } },
{ field: 'configId', title: '数据库标识', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'connection', title: '数据库连接', minWidth: 300, showOverflow: 'tooltip' },
{ field: 'slaveConnections', title: '从库连接', showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 380, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
await handleQuery();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageTenantInput;
return getAPI(SysTenantApi).apiSysTenantPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.name = undefined;
state.queryParams.phone = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
await xGrid.value?.commitProxy('reload');
};
// 打开新增页面
@ -224,33 +206,6 @@ const handleEdit = (row: any) => {
editTenantRef.value?.openDialog(row);
};
// 打开授权菜单页面
const openGrantMenu = async (row: any) => {
grantMenuRef.value?.openDialog(row);
};
// 打开授权接口页面
const openGrantApi = async (row: any) => {
grantApiRef.value?.openDrawer(row);
};
// 重置密码
const resetTenantPwd = async (row: any) => {
ElMessageBox.confirm(`确定重置密码：【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await getAPI(SysTenantApi)
.apiSysTenantResetPwdPost({ userId: row.userId })
.then((res) => {
ElMessage.success(`密码重置成功为：${res.data.result}`);
});
})
.catch(() => {});
};
// 删除
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除租户：【${row.name}】?`, '提示', {
@ -260,12 +215,36 @@ const handleDelete = (row: any) => {
})
.then(async () => {
await getAPI(SysTenantApi).apiSysTenantDeletePost({ id: row.id });
handleQuery();
await handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<TenantOutput> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 打开授权菜单页面
const openGrantMenu = async (row: any) => {
grantMenuRef.value?.openDialog(row);
};
// 打开授权接口页面
const openGrantApi = async (row: any) => {
grantApiRef.value?.openDrawer(row);
};
// 创建租户库
const createTenant = (row: any) => {
ElMessageBox.confirm(`确定创建/更新租户数据库：【${row.name}】?`, '提示', {
@ -293,6 +272,23 @@ const changeStatus = async (scope: any) => {
});
};
// 重置密码
const resetTenantPwd = async (row: any) => {
ElMessageBox.confirm(`确定重置密码：【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await getAPI(SysTenantApi)
.apiSysTenantResetPwdPost({ userId: row.userId })
.then((res) => {
ElMessage.success(`密码重置成功为：${res.data.result}`);
});
})
.catch(() => {});
};
// 同步所有租户数据库
const syncTenantDb = (row: any) => {
ElMessageBox.confirm(`确定同步所有租户数据库?`, '提示', {

158
Web/src/views/system/user/index.vue
View File

@ -11,17 +11,17 @@
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="账号" prop="account">
<el-input v-model="state.queryParams.account" placeholder="账号" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.account" placeholder="账号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="姓名" prop="realName">
<el-input v-model="state.queryParams.realName" placeholder="姓名" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.realName" placeholder="姓名" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="手机号码" prop="phone">
<el-input v-model="state.queryParams.phone" placeholder="手机号码" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.phone" placeholder="手机号码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
</el-row>
@ -32,7 +32,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysUser:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysUser:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -40,7 +40,7 @@
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysUser:add'"> 新增 </el-button>
</template>
@ -78,15 +78,6 @@
<el-button icon="ele-RefreshLeft" text type="danger" v-auth="'sysUser:resetPwd'" @click="resetQueryPwd(row)">重置密码</el-button>
<el-button icon="ele-Unlock" text type="primary" v-auth="'sysUser:unlockLogin'" @click="handleUnlock(row)">解除锁定</el-button>
</template>
<template #pager>
<vxe-pager
:loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card>
</el-col>
@ -100,8 +91,9 @@
import { onMounted, reactive, ref, onActivated } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';
import XEUtils from 'xe-utils';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
@ -110,7 +102,7 @@ import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysUserApi, SysOrgApi } from '/@/api-services/api';
import { SysUser, SysOrg } from '/@/api-services/models';
import { SysOrg, PageTenantInput, UserOutput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const treeRef = ref<InstanceType<typeof OrgTree>>();
@ -123,48 +115,57 @@ const state = reactive({
realName: undefined,
phone: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
localPageParam: {
pageSize: 50 as number,
defaultSort: { field: 'orderNo', order: 'asc', descStr: 'desc' },
},
visible: false,
title: '',
});
// 本地存储参数
const localPageParamKey = 'localPageParam:sysUser';
// 表格参数配置
const options = useVxeTable<SysUser>({
id: 'sysUser',
name: '账号',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'avatar', title: '头像', minWidth: 80, showOverflow: 'tooltip', slots: { default: 'row_avatar' } },
{ field: 'account', title: '账号', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'nickName', title: '昵称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'realName', title: '姓名', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'phone', title: '手机号码', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'birthday', title: '出生日期', minWidth: 100, showOverflow: 'tooltip', formatter: ({ cellValue }: any) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd') },
{ field: 'sex', title: '性别', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_sex' } },
{ field: 'accountType', title: '账号类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_accountType' } },
{ field: 'roleName', title: '角色集合', minWidth: 130, showOverflow: 'tooltip' },
{ field: 'orgName', title: '所属机构', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'posName', title: '职位名称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysUser:page'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
const options = useVxeTable<UserOutput>(
{
id: 'sysUser',
name: '账号',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'avatar', title: '头像', minWidth: 80, showOverflow: 'tooltip', slots: { default: 'row_avatar' } },
{ field: 'account', title: '账号', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'nickName', title: '昵称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'realName', title: '姓名', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'phone', title: '手机号码', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'birthday', title: '出生日期', minWidth: 100, showOverflow: 'tooltip', formatter: ({ cellValue }: any) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd') },
{ field: 'sex', title: '性别', minWidth: 70, showOverflow: 'tooltip', slots: { default: 'row_sex' } },
{ field: 'accountType', title: '账号类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_accountType' } },
{ field: 'roleName', title: '角色集合', minWidth: 130, showOverflow: 'tooltip' },
{ field: 'orgName', title: '所属机构', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'posName', title: '职位名称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: false },
}
);
// 页面初始化
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
fetchOrgData();
await handleQuery();
});
@ -174,29 +175,24 @@ onActivated(async () => {
await fetchOrgData();
});
// 查询操作
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total;
options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as PageTenantInput;
return getAPI(SysUserApi).apiSysUserPagePost(params);
};
// 查询操作
const handleQuery = async () => {
await xGrid.value?.commitProxy('query');
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.orgId = -1;
state.queryParams.account = undefined;
state.queryParams.realName = undefined;
state.queryParams.phone = undefined;
handleQuery(true);
await xGrid.value?.commitProxy('reload');
};
// 查询机构数据
@ -205,20 +201,6 @@ const fetchOrgData = async () => {
state.treeData = res.data.result ?? [];
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery();
};
// 打开新增页面
const handleAdd = () => {
state.title = '添加账号';
@ -240,12 +222,26 @@ const handleDelete = (row: any) => {
})
.then(async () => {
await getAPI(SysUserApi).apiSysUserDeletePost({ id: row.id });
handleQuery();
await handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 表格事件
const gridEvents: VxeGridListeners<UserOutput> = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
Local.set(localPageParamKey, state.localPageParam);
},
};
// 修改状态
const changeStatus = (row: any) => {
getAPI(SysUserApi)
@ -298,6 +294,6 @@ const handleNodeChange = async (node: any) => {
state.queryParams.account = undefined;
state.queryParams.realName = undefined;
state.queryParams.phone = undefined;
handleQuery(true);
await handleQuery();
};
</script>