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

😎调整字典管理页面

Browse Source
This commit is contained in:
zuohuaijun 2024-07-01 13:29:57 +08:00
parent f17beea203
commit 428c6cf716
3 changed files with 327 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,14 @@
<template> <template>
<div class="sys-dictData-container"> <div class="sys-dictData-container">
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px"> <el-dialog v-model="state.visible" draggable overflow destroy-on-close width="700px">
<template #header> <template #header>
<div style="color: #fff"> <div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon> <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
<span> {{ props.title }} </span> <span> {{ props.title }} </span>
</div> </div>
</template> </template>
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> <el-form :model="state.ruleForm" ref="formRef" label-width="auto">
<el-row :gutter="35"> <el-row :gutter="10">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="字典值" prop="value" :rules="[{ required: true, message: '字典值不能为空', trigger: 'blur' }]"> <el-form-item label="字典值" prop="value" :rules="[{ required: true, message: '字典值不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.value" placeholder="字典值" clearable /> <el-input v-model="state.ruleForm.value" placeholder="字典值" clearable />
@ -31,7 +31,7 @@
<el-radio value="success"><el-tag type="success">success</el-tag></el-radio> <el-radio value="success"><el-tag type="success">success</el-tag></el-radio>
<el-radio value="info"><el-tag type="info">info</el-tag></el-radio> <el-radio value="info"><el-tag type="info">info</el-tag></el-radio>
<el-radio value="warning"><el-tag type="warning">warning</el-tag></el-radio> <el-radio value="warning"><el-tag type="warning">warning</el-tag></el-radio>
<el-radio value="danger"><el-tag type="danger" style="font:">danger</el-tag></el-radio> <el-radio value="danger"><el-tag type="danger">danger</el-tag></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -92,9 +92,9 @@ const props = defineProps({
dictTypeId: Number, dictTypeId: Number,
}); });
const emits = defineEmits(['handleQuery', 'handleUpdate']); const emits = defineEmits(['handleQuery', 'handleUpdate']);
const ruleFormRef = ref(); const formRef = ref();
const state = reactive({ const state = reactive({
isShowDialog: false, visible: false,
ruleForm: {} as UpdateDictDataInput, ruleForm: {} as UpdateDictDataInput,
}); });
@ -104,24 +104,24 @@ const openDialog = (row: any) => {
if (JSON.stringify(row) == '{}') { if (JSON.stringify(row) == '{}') {
state.ruleForm.dictTypeId = props.dictTypeId; state.ruleForm.dictTypeId = props.dictTypeId;
} }
state.isShowDialog = true; state.visible = true;
ruleFormRef.value?.resetFields(); formRef.value?.resetFields();
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
emits('handleQuery'); emits('handleQuery');
state.isShowDialog = false; state.visible = false;
}; };
// 取消 // 取消
const cancel = () => { const cancel = () => {
state.isShowDialog = false; state.visible = false;
}; };
// 提交 // 提交
const submit = () => { const submit = () => {
ruleFormRef.value.validate(async (valid: boolean) => { formRef.value.validate(async (valid: boolean) => {
if (!valid) return; if (!valid) return;
if (state.ruleForm.id != undefined && state.ruleForm.id > 0) { if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
await getAPI(SysDictDataApi).apiSysDictDataUpdatePost(state.ruleForm); await getAPI(SysDictDataApi).apiSysDictDataUpdatePost(state.ruleForm);

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

@ -1,14 +1,14 @@
<template> <template>
<div class="sys-dictType-container"> <div class="sys-dictType-container">
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px"> <el-dialog v-model="state.visible" draggable overflow destroy-on-close width="700px">
<template #header> <template #header>
<div style="color: #fff"> <div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon> <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
<span> {{ props.title }} </span> <span> {{ props.title }} </span>
</div> </div>
</template> </template>
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> <el-form :model="state.ruleForm" ref="formRef" 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-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-form-item label="字典名称" prop="name" :rules="[{ required: true, message: '字典名称不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.name" placeholder="字典名称" clearable /> <el-input v-model="state.ruleForm.name" placeholder="字典名称" clearable />
@ -60,33 +60,33 @@ const props = defineProps({
title: String, title: String,
}); });
const emits = defineEmits(['handleQuery', 'handleUpdate']); const emits = defineEmits(['handleQuery', 'handleUpdate']);
const ruleFormRef = ref(); const formRef = ref();
const state = reactive({ const state = reactive({
isShowDialog: false, visible: false,
ruleForm: {} as UpdateDictTypeInput, ruleForm: {} as UpdateDictTypeInput,
}); });
// 打开弹窗 // 打开弹窗
const openDialog = (row: any) => { const openDialog = (row: any) => {
state.ruleForm = JSON.parse(JSON.stringify(row)); state.ruleForm = JSON.parse(JSON.stringify(row));
state.isShowDialog = true; state.visible = true;
ruleFormRef.value?.resetFields(); formRef.value?.resetFields();
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
emits('handleQuery'); emits('handleQuery');
state.isShowDialog = false; state.visible = false;
}; };
// 取消 // 取消
const cancel = () => { const cancel = () => {
state.isShowDialog = false; state.visible = false;
}; };
// 提交 // 提交
const submit = () => { const submit = () => {
ruleFormRef.value.validate(async (valid: boolean) => { formRef.value.validate(async (valid: boolean) => {
if (!valid) return; if (!valid) return;
if (state.ruleForm.id != undefined && state.ruleForm.id > 0) { if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
await getAPI(SysDictTypeApi).apiSysDictTypeUpdatePost(state.ruleForm); await getAPI(SysDictTypeApi).apiSysDictTypeUpdatePost(state.ruleForm);

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

@ -1,279 +1,281 @@
<template> <template>
<div class="sys-dict-container"> <div class="sys-dict-container" v-loading="options.loading">
<el-row :gutter="8" style="width: 100%; height: 100%; flex: 1"> <el-row :gutter="8" style="width: 100%; height: 100%; flex: 1">
<el-col :span="12" :xs="24" style="display: flex; height: 100%; flex: 1"> <el-col :span="12" :xs="24" class="full-height">
<el-card class="full-table" shadow="hover" :body-style="{ height: 'calc(100% - 51px)' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<template #header> <el-form :model="state.queryParams" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典 <el-row :gutter="10">
</template> <el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-form :model="state.queryDictTypeParams" ref="queryForm" :inline="true" @submit.native.prevent> <el-form-item label="字典名称" prop="name">
<el-form-item label="名称"> <el-input v-model="state.queryParams.name" placeholder="字典名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryDictTypeParams.name" @keyup.enter.native="handleDictTypeQuery" placeholder="字典名称" clearable /> </el-form-item>
</el-form-item> </el-col>
<!-- <el-form-item label="字典编码"> <el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-input v-model="state.queryDictTypeParams.code" placeholder="字典编码" clearable /> <el-form-item label="字典编码" prop="code">
</el-form-item> --> <el-input v-model="state.queryParams.code" placeholder="字典编码" clearable @keyup.enter.native="handleQuery(true)" />
<el-form-item> </el-form-item>
<el-button-group> </el-col>
<el-button type="primary" icon="ele-Search" @click="handleDictTypeQuery" v-auth="'sysDictType:page'"> 查询 </el-button> </el-row>
<el-button icon="ele-Refresh" @click="resetDictTypeQuery"> 重置 </el-button>
</el-button-group>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="ele-Plus" @click="openAddDictType" v-auth="'sysDictType:add'"> 新增 </el-button>
</el-form-item>
</el-form> </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="'sysDictType: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-table :data="state.dictTypeData" style="width: 100%" v-loading="state.typeLoading" @row-click="handleDictType" highlight-current-row border> <el-card class="full-table" shadow="hover" style="margin-top: 5px">
<el-table-column type="index" label="序号" width="55" align="center" /> <vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange" @cell-click="handleDictData">
<el-table-column prop="name" label="字典名称" min-width="120" header-align="center" show-overflow-tooltip /> <template #toolbar_buttons>
<el-table-column prop="code" label="字典编码" min-width="140" header-align="center" show-overflow-tooltip /> <el-icon size="16" style="margin-right: 3px; margin-top: 2px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典
<el-table-column prop="status" label="状态" width="70" align="center" show-overflow-tooltip> <el-button type="primary" style="margin-left: 10px" icon="ele-Plus" @click="handleAdd" v-auth="'sysDictType:add'"> 新增 </el-button>
<template #default="scope"> </template>
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag> <template #toolbar_tools> </template>
<el-tag type="danger" v-else>禁用</el-tag> <template #empty>
</template> <el-empty :image-size="200" />
</el-table-column> </template>
<el-table-column prop="orderNo" label="排序" width="60" align="center" show-overflow-tooltip /> <template #row_status="{ row }">
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip> <el-tag v-if="row.status === 1" type="success">启用</el-tag>
<template #default="scope"> <el-tag v-else type="danger">禁用</el-tag>
<ModifyRecord :data="scope.row" /> </template>
</template> <template #row_record="{ row }">
</el-table-column> <ModifyRecord :data="row" />
<el-table-column label="操作" width="110" fixed="right" align="center"> </template>
<template #default="scope"> <template #row_buttons="{ row }">
<el-tooltip content="字典值"> <el-tooltip content="编辑" placement="top">
<el-button icon="ele-Memo" size="small" text type="primary" @click="openDictDataDialog(scope.row)" v-auth="'sysDictType:page'"> </el-button> <el-button icon="ele-Edit" text type="primary" v-auth="'sysDictType:update'" @click="handleEdit(row)"> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="编辑"> <el-tooltip content="删除" placement="top">
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditDictType(scope.row)" v-auth="'sysDictType:update'"> </el-button> <el-button icon="ele-Delete" text type="danger" v-auth="'sysDictType:delete'" @click="handleDelete(row)"> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="删除"> </template>
<el-button icon="ele-Delete" size="small" text type="danger" @click="delDictType(scope.row)" v-auth="'sysDictType:delete'"> </el-button> <template #pager>
</el-tooltip> <vxe-pager
</template> :loading="options.loading"
</el-table-column> v-model:current-page="state.tableParams.page"
</el-table> v-model:page-size="state.tableParams.pageSize"
<el-pagination :total="state.tableParams.total"
v-model:currentPage="state.tableDictTypeParams.page" @page-change="pageChange"
v-model:page-size="state.tableDictTypeParams.pageSize" />
:total="state.tableDictTypeParams.total" </template>
:page-sizes="[10, 20, 50, 100]" </vxe-grid>
small
background
@size-change="handleDictTypeSizeChange"
@current-change="handleDictTypeCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
/>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12" :xs="24" style="display: flex; height: 100%; flex: 1"> <el-col :span="12" :xs="24" class="full-height">
<el-card class="full-table" shadow="hover" :body-style="{ height: 'calc(100% - 51px)' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<template #header> <el-form :model="state.queryDictParams" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典值【{{ state.editDictTypeName }}】 <el-row :gutter="10">
</template> <el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-form :model="state.queryDictDataParams" ref="queryForm" :inline="true" @submit.native.prevent> <el-form-item label="字典值" prop="value">
<!-- <el-form-item label="字典值"> <el-input v-model="state.queryDictParams.value" placeholder="字典值" clearable @keyup.enter.native="handleDictQuery(true)" />
<el-input v-model="state.queryDictDataParams.value" placeholder="字典值" /> </el-form-item>
</el-form-item> --> </el-col>
<el-form-item label="编码"> <el-col class="mb5" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-input v-model="state.queryDictDataParams.code" placeholder="编码" @keyup.enter="handleDictDataQuery" /> <el-form-item label="编码" prop="code">
</el-form-item> <el-input v-model="state.queryDictParams.code" placeholder="编码" clearable @keyup.enter.native="handleDictQuery(true)" />
<el-form-item> </el-form-item>
<el-button-group> </el-col>
<el-button type="primary" icon="ele-Search" @click="handleDictDataQuery"> 查询 </el-button> </el-row>
<el-button icon="ele-Refresh" @click="resetDictDataQuery"> 重置 </el-button>
</el-button-group>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="ele-Plus" @click="openAddDictData"> 新增 </el-button>
</el-form-item>
</el-form> </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="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-group>
</el-col>
</el-row>
</el-card>
<el-table :data="state.dictDataData" style="width: 100%" v-loading="state.loading" border> <el-card class="full-table" shadow="hover" style="margin-top: 5px">
<el-table-column type="index" label="序号" width="55" align="center" /> <vxe-grid ref="xDictGrid" class="xGrid-style" v-bind="dictOptions" @sort-change="dictSortChange">
<el-table-column prop="value" label="字典值" header-align="center" min-width="120" show-overflow-tooltip> <template #toolbar_buttons>
<template #default="scope"> <el-icon size="16" style="margin-right: 3px; margin-top: 2px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典值
<el-tag :type="scope.row.tagType" :style="scope.row.styleSetting" :class="scope.row.classSetting">{{ scope.row.value }}</el-tag> <el-button type="primary" style="margin-left: 10px" icon="ele-Plus" @click="handleDictAdd" v-auth="'sysDictType:add'"> 新增 </el-button>
</template> </template>
</el-table-column> <template #toolbar_tools> </template>
<el-table-column prop="code" label="编码" header-align="center" min-width="120" show-overflow-tooltip /> <template #empty>
<el-table-column prop="name" label="名称" header-align="center" min-width="120" show-overflow-tooltip /> <el-empty :image-size="200" />
<el-table-column prop="extData" label="拓展数据" width="90" align="center"> </template>
<template #default="scope"> <template #row_value="{ row }">
<el-tag type="warning" v-if="scope.row.extData == null || scope.row.extData == ''">空</el-tag> <el-tag :type="row.tagType" :style="row.styleSetting" :class="row.classSetting">{{ row.value }}</el-tag>
<el-tag type="success" v-else>有值</el-tag> </template>
</template> <template #row_extData="{ row }">
</el-table-column> <el-tag type="warning" v-if="row.extData == null || row.extData == ''">空</el-tag>
<el-table-column prop="status" label="状态" width="70" align="center" show-overflow-tooltip> <el-tag type="success" v-else>有值</el-tag>
<template #default="scope"> </template>
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag> <template #row_status="{ row }">
<el-tag type="danger" v-else>禁用</el-tag> <el-tag v-if="row.status === 1" type="success">启用</el-tag>
</template> <el-tag v-else type="danger">禁用</el-tag>
</el-table-column> </template>
<el-table-column prop="orderNo" label="排序" width="60" align="center" show-overflow-tooltip /> <template #row_record="{ row }">
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip> <ModifyRecord :data="row" />
<template #default="scope"> </template>
<ModifyRecord :data="scope.row" /> <template #row_buttons="{ row }">
</template> <el-tooltip content="编辑" placement="top">
</el-table-column> <el-button icon="ele-Edit" text type="primary" v-auth="'sysDictType:update'" @click="handleDictEdit(row)"> </el-button>
<el-table-column label="操作" width="80" fixed="right" align="center" show-overflow-tooltip> </el-tooltip>
<template #default="scope"> <el-tooltip content="删除" placement="top">
<el-tooltip content="编辑"> <el-button icon="ele-Delete" text type="danger" v-auth="'sysDictType:delete'" @click="handleDictDelete(row)"> </el-button>
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditDictData(scope.row)"> </el-button> </el-tooltip>
</el-tooltip> </template>
<el-tooltip content="删除"> <template #pager>
<el-button icon="ele-Delete" size="small" text type="danger" @click="delDictData(scope.row)"> </el-button> <vxe-pager
</el-tooltip> :loading="dictOptions.loading"
</template> v-model:current-page="state.tableDictParams.page"
</el-table-column> v-model:page-size="state.tableDictParams.pageSize"
</el-table> :total="state.tableDictParams.total"
<el-pagination @page-change="dictPageChange"
v-model:currentPage="state.tableDictDataParams.page" />
v-model:page-size="state.tableDictDataParams.pageSize" </template>
:total="state.tableDictDataParams.total" </vxe-grid>
:page-sizes="[10, 20, 50, 100]"
small
background
@size-change="handleDictDataSizeChange"
@current-change="handleDictDataCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
/>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<EditDictType ref="editDictTypeRef" :title="state.editDictTypeTitle" @handleQuery="handleDictTypeQuery" @handleUpdate="updateDictSession" /> <EditDictType ref="editRef" :title="state.title" @handleQuery="handleQuery(false)" @handleUpdate="updateDictSession" />
<EditDictData ref="editDictDataRef" :title="state.editDictDataTitle" @handleQuery="handleDictDataQuery" @handleUpdate="updateDictSession" /> <EditDcitData ref="editDictRef" :title="state.title" @handleQuery="handleDictQuery(false)" @handleUpdate="updateDictSession" />
</div> </div>
</template> </template>
<script lang="ts" setup name="sysDict"> <script lang="ts" setup name="sysDict">
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import { useUserInfo } from '/@/stores/userInfo';
import EditDictType from '/@/views/system/dict/component/editDictType.vue'; import EditDictType from '/@/views/system/dict/component/editDictType.vue';
import EditDictData from '/@/views/system/dict/component/editDictData.vue'; import EditDcitData from '/@/views/system/dict/component/editDictData.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue'; import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { Session } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo';
import { SysDictTypeApi, SysDictDataApi } from '/@/api-services/api'; import { SysDictTypeApi, SysDictDataApi } from '/@/api-services/api';
import { SysDictType, SysDictData } from '/@/api-services/models'; import { SysDictType, SysDictData } from '/@/api-services/models';
const editDictTypeRef = ref<InstanceType<typeof EditDictType>>(); const xGrid = ref<VxeGridInstance>();
const editDictDataRef = ref<InstanceType<typeof EditDictData>>(); const xDictGrid = ref<VxeGridInstance>();
const editRef = ref<InstanceType<typeof EditDictType>>();
const editDictRef = ref<InstanceType<typeof EditDcitData>>();
const state = reactive({ const state = reactive({
loading: false, queryParams: {
typeLoading: false,
dictTypeData: [] as Array<SysDictType>,
dictDataData: [] as Array<SysDictData>,
queryDictTypeParams: {
name: undefined, name: undefined,
code: undefined, code: undefined,
}, },
tableDictTypeParams: { queryDictParams: {
page: 1, dictTypeId: undefined,
pageSize: 20,
total: 0 as any,
},
queryDictDataParams: {
value: undefined, value: undefined,
code: undefined, code: undefined,
dictTypeId: 0, // 字典类型Id
}, },
tableDictDataParams: { tableParams: {
page: 1, page: 1,
pageSize: 20, pageSize: 50,
field: 'orderNo', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any, total: 0 as any,
}, },
editDictTypeTitle: '', tableDictParams: {
editDictDataTitle: '', page: 1,
editDictTypeName: '', pageSize: 50,
field: 'orderNo', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any,
},
title: '',
}); });
// 表格参数配置-字典类型
const options = useVxeTable<SysDictType>(
{
id: 'sysDict',
name: '字典信息',
columns: [
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '字典名称', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'code', title: '字典编码', minWidth: 140, 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('sysDictType:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ rowConfig: { isCurrent: true, isHover: true }, checkboxConfig: { range: true, highlight: false } }
);
// 页面初始化
onMounted(async () => { onMounted(async () => {
handleDictTypeQuery(); await handleQuery();
}); });
// 查询字典操作 // 查询操作
const handleDictTypeQuery = async () => { const handleQuery = async (reset = false) => {
state.typeLoading = true; options.loading = true;
let params = Object.assign(state.queryDictTypeParams, state.tableDictTypeParams); if (reset) state.tableParams.page = 1;
var res = await getAPI(SysDictTypeApi).apiSysDictTypePagePost(params); var res = await fetchData(null);
state.dictTypeData = res.data.result?.items ?? []; await xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableDictTypeParams.total = res.data.result?.total; state.tableParams.total = res.data.result?.total;
state.typeLoading = false; options.loading = false;
}; };
// 查询字典值操作 // 获取数据
const handleDictDataQuery = async () => { const fetchData = async (tableParams: any) => {
state.loading = true; let params = Object.assign(state.queryParams, state.tableParams, tableParams);
let params = Object.assign(state.queryDictDataParams, state.tableDictDataParams); return getAPI(SysDictTypeApi).apiSysDictTypePagePost(params);
var res = await getAPI(SysDictDataApi).apiSysDictDataPagePost(params);
state.dictDataData = res.data.result?.items ?? [];
state.tableDictDataParams.total = res.data.result?.total;
state.loading = false;
}; };
// 点击表格 // 重置操作
const handleDictType = (row: any, event: any, column: any) => { const resetQuery = async () => {
openDictDataDialog(row); state.queryParams.code = undefined;
state.queryParams.name = undefined;
await handleQuery(true);
}; };
// 重置字典操作 // 改变页码序号或页面容量
const resetDictTypeQuery = () => { const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.queryDictTypeParams.name = undefined; state.tableParams.page = currentPage;
state.queryDictTypeParams.code = undefined; state.tableParams.pageSize = pageSize;
handleDictTypeQuery(); await handleQuery();
}; };
// 重置字典值操作 // 列排序
const resetDictDataQuery = () => { const sortChange = async (options: any) => {
state.queryDictDataParams.value = undefined; state.tableParams.field = options.field;
state.queryDictDataParams.code = undefined; state.tableParams.order = options.order;
handleDictDataQuery(); await handleQuery();
}; };
// 打开新增字典页面 // 打开新增页面
const openAddDictType = () => { const handleAdd = () => {
state.editDictTypeTitle = '添加字典'; state.title = '添加字典';
editDictTypeRef.value?.openDialog({ status: 1, orderNo: 100 }); editRef.value?.openDialog({ status: 1, orderNo: 100 });
}; };
// 打开新增字典值页面 // 打开编辑页面
const openAddDictData = () => { const handleEdit = (row: any) => {
if (!state.queryDictDataParams.dictTypeId) { state.title = '编辑字典';
ElMessage.warning('请选择字典'); editRef.value?.openDialog(row);
return;
}
state.editDictDataTitle = '添加字典值';
editDictDataRef.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryDictDataParams.dictTypeId });
}; };
// 打开编辑字典页面 // 点击表格，加载字典值表格数据
const openEditDictType = (row: any) => { const handleDictData = async (scope: any) => {
state.editDictTypeTitle = '编辑字典'; state.queryDictParams.dictTypeId = scope.row.id;
editDictTypeRef.value?.openDialog(row); await handleDictQuery(true);
}; };
// 打开编辑字典值页面 // 删除
const openEditDictData = (row: any) => { const handleDelete = (row: any) => {
state.editDictDataTitle = '编辑字典值';
editDictDataRef.value?.openDialog(row);
};
// 打开字典值页面
const openDictDataDialog = (row: any) => {
state.editDictTypeName = row.name;
state.queryDictDataParams.dictTypeId = row.id;
handleDictDataQuery();
};
// 删除字典
const delDictType = (row: any) => {
ElMessageBox.confirm(`确定删除字典：【${row.name}】?`, '提示', { ElMessageBox.confirm(`确定删除字典：【${row.name}】?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -281,15 +283,78 @@ const delDictType = (row: any) => {
}) })
.then(async () => { .then(async () => {
await getAPI(SysDictTypeApi).apiSysDictTypeDeletePost({ id: row.id }); await getAPI(SysDictTypeApi).apiSysDictTypeDeletePost({ id: row.id });
handleDictTypeQuery(); handleQuery();
updateDictSession(); updateDictSession();
xDictGrid.value?.loadData([]);
state.tableDictParams.total = 0;
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => {});
}; };
// 删除字典值 // 表格参数配置-字典值
const delDictData = (row: any) => { const dictOptions = useVxeTable<SysDictData>(
{
id: 'dictInfo',
name: '字典值信息',
columns: [
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'value', title: '字典值', minWidth: 90, showOverflow: 'tooltip', slots: { default: 'row_value' } },
{ field: 'code', title: '编码', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'name', title: '名称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'extData', title: '拓展数据', showOverflow: 'tooltip', slots: { default: 'row_extData' } },
{ 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('sysDictType:export'),
searchCallback: () => handleDictQuery(),
queryAllCallback: () => fetchDictData({ pageSize: 99999 }),
},
{ 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);
return getAPI(SysDictDataApi).apiSysDictDataPagePost(params);
};
// 重置操作
const resetDictQuery = async () => {
state.queryDictParams.value = undefined;
state.queryDictParams.code = undefined;
await handleDictQuery(true);
};
const handleDictAdd = () => {
if (!state.queryDictParams.dictTypeId) {
ElMessage.warning('请选择字典');
return;
}
state.title = '添加字典值';
editDictRef.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryDictParams.dictTypeId });
};
// 打开编辑页面
const handleDictEdit = (row: any) => {
state.title = '编辑字典值';
editDictRef.value?.openDialog(row);
};
// 删除
const handleDictDelete = (row: any) => {
ElMessageBox.confirm(`确定删除字典值：【${row.value}】?`, '提示', { ElMessageBox.confirm(`确定删除字典值：【${row.value}】?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -297,35 +362,25 @@ const delDictData = (row: any) => {
}) })
.then(async () => { .then(async () => {
await getAPI(SysDictDataApi).apiSysDictDataDeletePost({ id: row.id }); await getAPI(SysDictDataApi).apiSysDictDataDeletePost({ id: row.id });
handleDictDataQuery(); handleDictQuery();
updateDictSession(); updateDictSession();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => {});
}; };
// 改变字典页面容量 // 改变字典值页码序号或页面容量
const handleDictTypeSizeChange = (val: number) => { const dictPageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableDictTypeParams.pageSize = val; state.tableDictParams.page = currentPage;
handleDictTypeQuery(); state.tableDictParams.pageSize = pageSize;
await handleDictQuery();
}; };
// 改变字典页码序号 // 字典值列排序
const handleDictTypeCurrentChange = (val: number) => { const dictSortChange = async (options: any) => {
state.tableDictTypeParams.page = val; state.tableDictParams.field = options.field;
handleDictTypeQuery(); state.tableDictParams.order = options.order;
}; await handleDictQuery();
// 改变字典值页面容量
const handleDictDataSizeChange = (val: number) => {
state.tableDictDataParams.pageSize = val;
handleDictDataQuery();
};
// 改变字典值页码序号
const handleDictDataCurrentChange = (val: number) => {
state.tableDictDataParams.page = val;
handleDictDataQuery();
}; };
// 更新前端字典缓存 // 更新前端字典缓存
@ -337,3 +392,11 @@ const updateDictSession = async () => {
await useUserInfo().setDictList(); await useUserInfo().setDictList();
}; };
</script> </script>
<style lang="scss" scoped>
.full-height {
display: flex;
flex-direction: column;
height: 100%;
}
</style>