😎调整参数配置页面

This commit is contained in:
zuohuaijun 2024-07-01 11:53:29 +08:00
parent a6482222d3
commit f17beea203
4 changed files with 188 additions and 144 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class="sys-config-container">
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
<el-dialog v-model="state.isShowDialog" draggable overflow destroy-on-close 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>
@ -8,7 +8,7 @@
</div>
</template>
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
<el-row :gutter="35">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="配置名称" prop="name" :rules="[{ required: true, message: '配置名称不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.name" placeholder="配置名称" clearable />

View File

@ -1,170 +1,208 @@
<template>
<div class="sys-config-container">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
<TableSearch :search="tb.tableData.search" @search="onSearch" />
<div class="sys-config-container" v-loading="options.loading">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<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-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-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="分组编码" prop="groupCode">
<el-select v-model="state.queryParams.groupCode" clearable placeholder="分组编码" @clear="state.queryParams.groupCode = undefined">
<el-option v-for="item in state.groupList" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<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 icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
</el-row>
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<Table ref="tableRef" v-bind="tb.tableData" :getData="getData" :exportChangeData="exportChangeData" @sortHeader="onSortHeader" @selectionChange="tableSelection" border>
<template #command>
<el-button type="primary" icon="ele-Plus" @click="openAddConfig" v-auth="'sysConfig:add'"> 新增 </el-button>
<el-button v-if="state.selectlist.length > 0" type="danger" icon="ele-Delete" @click="bacthDelete" v-auth="'sysConfig:batchDelete'"> 批量删除 </el-button>
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange" @checkbox-all="handleSelectChange" @checkbox-change="handleSelectChange">
<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> -->
</template>
<template #sysFlag="scope">
<el-tag v-if="scope.row.sysFlag === 1"> </el-tag>
<el-tag type="danger" v-else> </el-tag>
<template #toolbar_tools> </template>
<template #empty>
<el-empty :image-size="200" />
</template>
<template #remark="scope">
<ModifyRecord :data="scope.row" />
<template #row_sysFlag="{ row }">
<el-tag v-if="row.sysFlag === 1" type="success"></el-tag>
<el-tag v-else type="danger"></el-tag>
</template>
<template #action="scope">
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditConfig(scope.row)" v-auth="'sysConfig:update'"> 编辑 </el-button>
<el-button icon="ele-Delete" size="small" text type="danger" @click="delConfig(scope.row)" v-auth="'sysConfig:delete'" :disabled="scope.row.sysFlag === 1"> 删除 </el-button>
<template #row_record="{ row }">
<ModifyRecord :data="row" />
</template>
</Table>
<template #row_buttons="{ row }">
<el-tooltip content="编辑" placement="top">
<el-button icon="ele-Edit" text type="primary" v-auth="'sysConfig:update'" @click="handleEdit(row)"> </el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<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>
<EditConfig ref="editConfigRef" :title="state.editConfigTitle" :groupList="state.groupList" @updateData="updateData" />
<EditConfig ref="editConfigRef" :title="state.title" :groupList="state.groupList" @updateData="updateData" />
</div>
</template>
<script lang="ts" setup name="sysConfig">
import { onMounted, onUnmounted, reactive, ref, defineAsyncComponent, nextTick } from 'vue';
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 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 { auth } from '/@/utils/authFunction';
import { SysConfig } from '/@/api-services/models';
//
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const xGrid = ref<VxeGridInstance>();
const editConfigRef = ref<InstanceType<typeof EditConfig>>();
const tableRef = ref<RefType>();
const state = reactive({
editConfigTitle: '',
selectlist: [] as EmptyObjectType[],
groupList: [] as Array<String>,
});
const tb = reactive<TableDemoState>({
tableData: {
//
columns: [
{ prop: 'name', minWidth: 150, label: '配置名称', headerAlign: 'center', sortable: 'custom', isCheck: true, hideCheck: true },
{ prop: 'code', minWidth: 150, label: '配置编码', headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
{ prop: 'value', minWidth: 150, label: '属性值', headerAlign: 'center', isCheck: true },
{ prop: 'sysFlag', width: 100, label: '内置参数', align: 'center', isCheck: true },
{ prop: 'groupCode', width: 120, label: '分组编码', align: 'center', sortable: 'custom', isCheck: true },
{ prop: 'orderNo', width: 80, label: '排序', align: 'center', sortable: 'custom', isCheck: true },
{ prop: 'remark', width: 100, label: '修改记录', align: 'center', headerAlign: 'center', showOverflowTooltip: true, isCheck: true },
{ prop: 'action', width: 140, label: '操作', type: 'action', align: 'center', isCheck: true, fixed: 'right', hideCheck: true },
],
//
config: {
isStripe: true, //
isBorder: false, //
isSerialNo: true, //
isSelection: true, //
showSelection: auth('sysConfig:batchDelete'), //
pageSize: 20, //
hideExport: false, //
exportFileName: '系统参数', //
},
// type3input,date,select
search: [
{ label: '配置名称', prop: 'name', placeholder: '搜索配置名称', required: false, type: 'input' },
{ label: '配置编码', prop: 'code', placeholder: '搜索配置编码', required: false, type: 'input' },
// { label: '', prop: 'time', placeholder: '', required: false, type: 'date' },
],
param: {},
defaultSort: {
prop: 'orderNo',
order: 'ascending',
},
queryParams: {
name: undefined,
code: undefined,
groupCode: undefined,
},
tableParams: {
page: 1,
pageSize: 50,
field: 'orderNo', //
order: 'aes', //
descStr: 'desc', //
total: 0 as any,
},
visible: false,
title: '',
groupList: [] as string[],
selectList: [] as 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 getData = (param: any) => {
return getAPI(SysConfigApi)
.apiSysConfigPagePost(param)
.then((res) => {
return res.data;
});
};
const exportChangeData = (data: Array<EmptyObjectType>) => {
data.forEach((item) => {
item.sysFlag = item.sysFlag == 1 ? '是' : '否';
});
return data;
};
//
const onSortHeader = (data: object[]) => {
tb.tableData.columns = data;
};
//
const onSearch = (data: EmptyObjectType) => {
tb.tableData.param = Object.assign({}, tb.tableData.param, { ...data });
nextTick(() => {
tableRef.value.pageReset();
});
};
const getGroupList = async () => {
const res = await getAPI(SysConfigApi).apiSysConfigGroupListGet();
const groupSearch = {
label: '分组编码',
prop: 'groupCode',
placeholder: '请选择',
required: false,
type: 'select',
options: [],
} as TableSearchType;
state.groupList = res.data.result ?? [];
res.data.result?.forEach((item) => {
groupSearch.options?.push({ label: item, value: item });
});
let group = tb.tableData.search.filter((item) => {
return item.prop == 'groupCode';
});
if (group.length == 0) {
tb.tableData.search.push(groupSearch);
} else {
group[0] = groupSearch;
}
};
//
const tableSelection = (data: EmptyObjectType[]) => {
state.selectlist = data;
};
//
onMounted(async () => {
getGroupList();
await handleQuery();
fetchGroupData();
});
//
const updateData = () => {
tableRef.value.handleList();
getGroupList();
//
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);
return getAPI(SysConfigApi).apiSysConfigPagePost(params);
};
const fetchGroupData = async () => {
const res = await getAPI(SysConfigApi).apiSysConfigGroupListGet();
state.groupList = res.data.result ?? [];
};
//
const resetQuery = () => {
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();
};
//
const openAddConfig = () => {
state.editConfigTitle = '添加配置';
const handleAdd = () => {
state.title = '添加配置';
editConfigRef.value?.openDialog({ sysFlag: 2, orderNo: 100 });
};
//
const openEditConfig = (row: any) => {
state.editConfigTitle = '编辑配置';
const handleEdit = (row: any) => {
state.title = '编辑配置';
editConfigRef.value?.openDialog(row);
};
//
const updateData = async () => {
await handleQuery();
fetchGroupData();
};
//
const delConfig = (row: any) => {
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除配置:【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -172,26 +210,28 @@ const delConfig = (row: any) => {
})
.then(async () => {
await getAPI(SysConfigApi).apiSysConfigDeletePost({ id: row.id });
tableRef.value.handleList();
handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});
};
//
const bacthDelete = () => {
if (state.selectlist.length == 0) return false;
ElMessageBox.confirm(`确定批量删除【${state.selectlist[0].name}】等${state.selectlist.length}个配置?`, '提示', {
const handleSelectChange = () => {
state.selectList = xGrid.value?.getCheckboxRecords() ?? [];
};
//
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) => {
return item.id;
});
const ids = state.selectList.map((item: any) => item.id);
var res = await getAPI(SysConfigApi).apiSysConfigBatchDeletePost(ids);
tableRef.value.pageReset();
handleQuery();
ElMessage.success('删除成功');
})
.catch(() => {});

View File

@ -25,7 +25,7 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysMenu:page'" :loading="options.loading"> 查询 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysMenu:list'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
@ -58,6 +58,9 @@
<el-tag v-if="row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="danger">禁用</el-tag>
</template>
<template #row_record="{ row }">
<ModifyRecord :data="row" />
</template>
<template #row_buttons="{ row }">
<el-tooltip content="编辑" placement="top">
<el-button icon="ele-Edit" text type="primary" v-auth="'sysMenu:update'" @click="handleEdit(row)"> </el-button>
@ -82,6 +85,7 @@ import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import SvgIcon from '/@/components/svgIcon/index.vue';
import EditMenu from '/@/views/system/menu/component/editMenu.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysMenuApi } from '/@/api-services/api';
@ -111,9 +115,9 @@ const options = useVxeTable<SysMenu>(
{ field: 'path', title: '路由路径', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'component', title: '组件路径', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'permission', title: '权限标识', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'createTime', title: '修改时间', minWidth: 150, 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('sysMenu:export'),

View File

@ -153,7 +153,7 @@ const options = useVxeTable<TenantOutput>({
{ field: 'name', title: '租户名称', minWidth: 160, showOverflow: 'tooltip' },
{ field: 'adminAccount', title: '租管账号', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'phone', title: '电话', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'host', title: '主机', minWidth: 150, 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' } },