Files
fe.ems.vue3/src/views/system/config/index.vue
2023-11-28 21:08:26 +08:00

859 lines
24 KiB
Vue

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import {
exportConfig,
listConfig,
getConfig,
delConfig,
addConfig,
updateConfig,
refreshCache,
} from '@/api/system/config';
import { saveAs } from 'file-saver';
import { parseDateToStr } from '@/utils/date-utils';
import useDictStore from '@/store/modules/dict';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const { getDict } = useDictStore();
/**字典数据 */
let dict: {
/**系统内置 */
sysYesNo: DictType[];
} = reactive({
sysYesNo: [],
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**参数名称 */
configName: '',
/**参数键名 */
configKey: '',
/**系统内置 */
configType: undefined,
/**记录开始时间 */
beginTime: '',
/**记录结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
configName: '',
configKey: '',
configType: undefined,
beginTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**斑马纹 */
striped: boolean;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
striped: false,
seached: false,
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('common.rowId'),
dataIndex: 'configId',
align: 'center',
},
{
title: t('views.system.config.configName'),
dataIndex: 'configName',
align: 'left',
},
{
title: t('views.system.config.configKey'),
dataIndex: 'configKey',
align: 'left',
},
{
title: t('views.system.config.configValue'),
dataIndex: 'configValue',
align: 'left',
},
{
title: t('views.system.config.configType'),
dataIndex: 'configType',
key: 'configType',
align: 'center',
},
{
title: t('views.system.config.createTime'),
dataIndex: 'createTime',
align: 'center',
customRender(opt) {
if (+opt.value <= 0) return '';
return parseDateToStr(+opt.value);
},
},
{
title: t('common.operate'),
key: 'configId',
align: 'center',
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) =>
t('common.tablePaginationTotal', { total: total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格斑马纹 */
function fnTableStriped(_record: unknown, index: number): any {
return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
}
/**表格多选 */
function fnTableSelectedRowKeys(keys: (string | number)[]) {
tableState.selectedRowKeys = keys;
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**详情框是否显示 */
visibleByView: boolean;
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByView: false,
visibleByEdit: false,
title: '参数配置',
from: {
configId: undefined,
configName: '',
configKey: '',
configValue: '',
configType: 'N',
remark: undefined,
},
confirmLoading: false,
});
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
configName: [
{
required: true,
min: 1,
max: 50,
message: t('views.system.config.configNamePlease'),
},
],
configKey: [
{
required: true,
min: 1,
max: 50,
message: t('views.system.config.configKeyPlease'),
},
],
configValue: [
{
required: true,
min: 1,
max: 250,
message: t('views.system.config.configValuePlease'),
},
],
})
);
/**
* 对话框弹出显示为 查看
* @param configId 参数编号id
*/
function fnModalVisibleByVive(configId: string | number) {
if (!configId) {
message.error(t('views.system.config.tipRowErr'), 2);
return;
}
getConfig(configId).then(res => {
if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.config.viewInfo');
modalState.visibleByView = true;
} else {
message.error(t('views.system.config.viewInfoErr'), 2);
}
});
}
/**
* 对话框弹出显示为 新增或者修改
* @param configId 参数编号id, 不传为新增
*/
function fnModalVisibleByEdit(configId?: string | number) {
if (!configId) {
modalStateFrom.resetFields();
modalState.title = t('views.system.config.addInfo');
modalState.visibleByEdit = true;
} else {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
modalState.confirmLoading = true;
getConfig(configId).then(res => {
modalState.confirmLoading = false;
hide();
if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.config.editInfo');
modalState.visibleByEdit = true;
} else {
message.error(t('views.system.config.viewInfoErr'), 2);
}
});
}
}
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalOk() {
modalStateFrom
.validate()
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const config = from.configId ? updateConfig(from) : addConfig(from);
const key = 'config';
message.loading({ content: t('common.loading'), key });
config
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
key,
duration: 2,
});
modalState.visibleByEdit = false;
modalStateFrom.resetFields();
fnGetList(1);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
});
}
})
.finally(() => {
modalState.confirmLoading = false;
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.visibleByView = false;
modalStateFrom.resetFields();
}
/**
* 参数配置删除
* @param configId 参数编号ID
*/
function fnRecordDelete(configId: string = '0') {
if (configId === '0') {
configId = tableState.selectedRowKeys.join(',');
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.system.config.delTip', { num: configId }),
onOk() {
const key = 'delConfig';
message.loading({ content: t('common.loading'), key });
delConfig(configId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.system.config.delOk'),
key,
duration: 2,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
key: key,
duration: 2,
});
}
});
},
});
}
/**列表导出 */
function fnExportList() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.system.config.exportTip'),
onOk() {
const key = 'exportConfig';
message.loading({ content: t('common.loading'), key });
exportConfig(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.system.config.exportOk'),
key,
duration: 2,
});
saveAs(res.data, `config_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
});
}
});
},
});
}
/**
* 刷新缓存
*/
function fnRefreshCache() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.system.config.refreshCacheTip'),
onOk() {
const key = 'refreshCache';
message.loading({ content: t('common.loading'), key });
refreshCache().then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.system.config.refreshCacheOk'),
key,
duration: 2,
});
} else {
message.error({
content: `${res.msg}`,
key: key,
duration: 2,
});
}
});
},
});
}
/**查询参数配置列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.beginTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listConfig(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
tableState.data = res.rows;
}
tableState.loading = false;
});
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('sys_yes_no')]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.sysYesNo = resArr[0].value;
}
});
// 获取列表数据
fnGetList();
});
</script>
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configName')"
name="configName"
>
<a-input
v-model:value="queryParams.configName"
allow-clear
:placeholder="t('common.ipnutPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configKey')"
name="configKey"
>
<a-input
v-model:value="queryParams.configKey"
allow-clear
:placeholder="t('common.ipnutPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configType')"
name="configType"
>
<a-select
v-model:value="queryParams.configType"
allow-clear
:placeholder="t('common.selectPlease')"
:options="dict.sysYesNo"
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.createTime')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
value-format="YYYY-MM-DD"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-button
type="primary"
@click.prevent="fnModalVisibleByEdit()"
v-perms:has="['system:config:add']"
>
<template #icon><PlusOutlined /></template>
{{ t('common.addText') }}
</a-button>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
@click.prevent="fnRecordDelete()"
v-perms:has="['system:config:remove']"
>
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button
type="dashed"
danger
@click.prevent="fnRefreshCache"
v-perms:has="['system:config:remove']"
>
<template #icon><SyncOutlined /></template>
{{ t('views.system.config.refreshCache') }}
</a-button>
<a-button
type="dashed"
@click.prevent="fnExportList()"
v-perms:has="['system:config:export']"
>
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.tableStripedText') }}</template>
<a-switch
v-model:checked="tableState.striped"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="configId"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: true }"
:row-selection="{
type: 'checkbox',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'configType'">
<DictTag :options="dict.sysYesNo" :value="record.configType" />
</template>
<template v-if="column.key === 'configId'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.viewText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByVive(record.configId)"
v-perms:has="['system:config:query']"
>
<template #icon><ProfileOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.editText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByEdit(record.configId)"
v-perms:has="['system:config:edit']"
>
<template #icon><FormOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
type="link"
@click.prevent="fnRecordDelete(record.configId)"
v-perms:has="['system:config:remove']"
>
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
</a-table>
</a-card>
<!-- 详情框 -->
<a-modal
width="800px"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
>
<a-form layout="horizontal">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configName')"
name="configName"
>
{{ modalState.from.configName }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configType')"
name="configType"
>
<DictTag
:options="dict.sysYesNo"
:value="modalState.from.configType"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configKey')"
name="configKey"
>
{{ modalState.from.configKey }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configValue')"
name="configValue"
>
{{ modalState.from.configValue }}
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('views.system.config.remark')" name="remark">
{{ modalState.from.remark }}
</a-form-item>
</a-form>
<template #footer>
<a-button key="cancel" @click="fnModalCancel">
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
<!-- 新增框或修改框 -->
<a-modal
width="800px"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@cancel="fnModalCancel"
>
<a-form name="modalStateFrom" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configName')"
name="configName"
v-bind="modalStateFrom.validateInfos.configName"
>
<a-input
v-model:value="modalState.from.configName"
allow-clear
:placeholder="t('views.system.config.configNamePlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configType')"
name="configType"
>
<a-select
v-model:value="modalState.from.configType"
default-value="N"
:placeholder="t('common.selectPlease')"
:options="dict.sysYesNo"
>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configKey')"
name="configKey"
v-bind="modalStateFrom.validateInfos.configKey"
>
<a-input
v-model:value="modalState.from.configKey"
allow-clear
:placeholder="t('views.system.config.configKeyPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.system.config.configValue')"
name="configValue"
v-bind="modalStateFrom.validateInfos.configValue"
>
<a-input
v-model:value="modalState.from.configValue"
allow-clear
:placeholder="t('views.system.config.configValuePlease')"
></a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('views.system.config.remark')" name="remark">
<a-textarea
v-model:value="modalState.from.remark"
:auto-size="{ minRows: 4, maxRows: 6 }"
:maxlength="450"
:show-count="true"
:placeholder="t('common.ipnutPlease')"
/>
</a-form-item>
</a-form>
</a-modal>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.table-striped) td {
background-color: #fafafa;
}
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>