😎调整字典管理页面
This commit is contained in:
zuohuaijun
parent
f17beea203
commit
428c6cf716
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<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>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||||
<span> {{ props.title }} </span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-form :model="state.ruleForm" ref="formRef" label-width="auto">
|
||||
<el-row :gutter="10">
|
||||
<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-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="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="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-form-item>
|
||||
</el-col>
|
||||
@ -92,9 +92,9 @@ const props = defineProps({
|
||||
dictTypeId: Number,
|
||||
});
|
||||
const emits = defineEmits(['handleQuery', 'handleUpdate']);
|
||||
const ruleFormRef = ref();
|
||||
const formRef = ref();
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
visible: false,
|
||||
ruleForm: {} as UpdateDictDataInput,
|
||||
});
|
||||
|
||||
@ -104,24 +104,24 @@ const openDialog = (row: any) => {
|
||||
if (JSON.stringify(row) == '{}') {
|
||||
state.ruleForm.dictTypeId = props.dictTypeId;
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
ruleFormRef.value?.resetFields();
|
||||
state.visible = true;
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
emits('handleQuery');
|
||||
state.isShowDialog = false;
|
||||
state.visible = false;
|
||||
};
|
||||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
state.isShowDialog = false;
|
||||
state.visible = false;
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
ruleFormRef.value.validate(async (valid: boolean) => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return;
|
||||
if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
|
||||
await getAPI(SysDictDataApi).apiSysDictDataUpdatePost(state.ruleForm);
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<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>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||||
<span> {{ props.title }} </span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-form :model="state.ruleForm" ref="formRef" label-width="auto">
|
||||
<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 />
|
||||
@ -60,33 +60,33 @@ const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
const emits = defineEmits(['handleQuery', 'handleUpdate']);
|
||||
const ruleFormRef = ref();
|
||||
const formRef = ref();
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
visible: false,
|
||||
ruleForm: {} as UpdateDictTypeInput,
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row: any) => {
|
||||
state.ruleForm = JSON.parse(JSON.stringify(row));
|
||||
state.isShowDialog = true;
|
||||
ruleFormRef.value?.resetFields();
|
||||
state.visible = true;
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
emits('handleQuery');
|
||||
state.isShowDialog = false;
|
||||
state.visible = false;
|
||||
};
|
||||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
state.isShowDialog = false;
|
||||
state.visible = false;
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
ruleFormRef.value.validate(async (valid: boolean) => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return;
|
||||
if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
|
||||
await getAPI(SysDictTypeApi).apiSysDictTypeUpdatePost(state.ruleForm);
|
||||
|
||||
@ -1,279 +1,281 @@
|
||||
<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-col :span="12" :xs="24" style="display: flex; height: 100%; flex: 1">
|
||||
<el-card class="full-table" shadow="hover" :body-style="{ height: 'calc(100% - 51px)' }">
|
||||
<template #header>
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典
|
||||
</template>
|
||||
<el-form :model="state.queryDictTypeParams" ref="queryForm" :inline="true" @submit.native.prevent>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="state.queryDictTypeParams.name" @keyup.enter.native="handleDictTypeQuery" placeholder="字典名称" clearable />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="字典编码">
|
||||
<el-input v-model="state.queryDictTypeParams.code" placeholder="字典编码" clearable />
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleDictTypeQuery" v-auth="'sysDictType:page'"> 查询 </el-button>
|
||||
<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-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="'60px'" 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-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-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="'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-table-column type="index" label="序号" width="55" align="center" />
|
||||
<el-table-column prop="name" label="字典名称" min-width="120" header-align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="code" label="字典编码" min-width="140" header-align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="70" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNo" label="排序" width="60" align="center" show-overflow-tooltip />
|
||||
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<ModifyRecord :data="scope.row" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="110" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="字典值">
|
||||
<el-button icon="ele-Memo" size="small" text type="primary" @click="openDictDataDialog(scope.row)" v-auth="'sysDictType:page'"> </el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="编辑">
|
||||
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditDictType(scope.row)" v-auth="'sysDictType:update'"> </el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除">
|
||||
<el-button icon="ele-Delete" size="small" text type="danger" @click="delDictType(scope.row)" v-auth="'sysDictType:delete'"> </el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:currentPage="state.tableDictTypeParams.page"
|
||||
v-model:page-size="state.tableDictTypeParams.pageSize"
|
||||
:total="state.tableDictTypeParams.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
small
|
||||
background
|
||||
@size-change="handleDictTypeSizeChange"
|
||||
@current-change="handleDictTypeCurrentChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
<template #toolbar_tools> </template>
|
||||
<template #empty>
|
||||
<el-empty :image-size="200" />
|
||||
</template>
|
||||
<template #row_status="{ row }">
|
||||
<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="'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-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" style="display: flex; height: 100%; flex: 1">
|
||||
<el-card class="full-table" shadow="hover" :body-style="{ height: 'calc(100% - 51px)' }">
|
||||
<template #header>
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Collection /></el-icon>字典值【{{ state.editDictTypeName }}】
|
||||
</template>
|
||||
<el-form :model="state.queryDictDataParams" ref="queryForm" :inline="true" @submit.native.prevent>
|
||||
<!-- <el-form-item label="字典值">
|
||||
<el-input v-model="state.queryDictDataParams.value" placeholder="字典值" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="编码">
|
||||
<el-input v-model="state.queryDictDataParams.code" placeholder="编码" @keyup.enter="handleDictDataQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleDictDataQuery"> 查询 </el-button>
|
||||
<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-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="'60px'" 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-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-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="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-table-column type="index" label="序号" width="55" align="center" />
|
||||
<el-table-column prop="value" label="字典值" header-align="center" min-width="120" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.tagType" :style="scope.row.styleSetting" :class="scope.row.classSetting">{{ scope.row.value }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="code" label="编码" header-align="center" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="name" label="名称" header-align="center" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="extData" label="拓展数据" width="90" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="warning" v-if="scope.row.extData == null || scope.row.extData == ''">空</el-tag>
|
||||
<el-tag type="success" v-else>有值</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="70" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNo" label="排序" width="60" align="center" show-overflow-tooltip />
|
||||
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<ModifyRecord :data="scope.row" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" fixed="right" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tooltip content="编辑">
|
||||
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditDictData(scope.row)"> </el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除">
|
||||
<el-button icon="ele-Delete" size="small" text type="danger" @click="delDictData(scope.row)"> </el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:currentPage="state.tableDictDataParams.page"
|
||||
v-model:page-size="state.tableDictDataParams.pageSize"
|
||||
:total="state.tableDictDataParams.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
small
|
||||
background
|
||||
@size-change="handleDictDataSizeChange"
|
||||
@current-change="handleDictDataCurrentChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||
<vxe-grid ref="xDictGrid" class="xGrid-style" v-bind="dictOptions" @sort-change="dictSortChange">
|
||||
<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>
|
||||
</template>
|
||||
<template #toolbar_tools> </template>
|
||||
<template #empty>
|
||||
<el-empty :image-size="200" />
|
||||
</template>
|
||||
<template #row_value="{ row }">
|
||||
<el-tag :type="row.tagType" :style="row.styleSetting" :class="row.classSetting">{{ row.value }}</el-tag>
|
||||
</template>
|
||||
<template #row_extData="{ row }">
|
||||
<el-tag type="warning" v-if="row.extData == null || row.extData == ''">空</el-tag>
|
||||
<el-tag type="success" v-else>有值</el-tag>
|
||||
</template>
|
||||
<template #row_status="{ row }">
|
||||
<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="'sysDictType:update'" @click="handleDictEdit(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-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="editDictTypeRef" :title="state.editDictTypeTitle" @handleQuery="handleDictTypeQuery" @handleUpdate="updateDictSession" />
|
||||
<EditDictData ref="editDictDataRef" :title="state.editDictDataTitle" @handleQuery="handleDictDataQuery" @handleUpdate="updateDictSession" />
|
||||
<EditDictType ref="editRef" :title="state.title" @handleQuery="handleQuery(false)" @handleUpdate="updateDictSession" />
|
||||
<EditDcitData ref="editDictRef" :title="state.title" @handleQuery="handleDictQuery(false)" @handleUpdate="updateDictSession" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="sysDict">
|
||||
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 { useUserInfo } from '/@/stores/userInfo';
|
||||
|
||||
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 { getAPI } from '/@/utils/axios-utils';
|
||||
import { Session } from '/@/utils/storage';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import { SysDictTypeApi, SysDictDataApi } from '/@/api-services/api';
|
||||
import { SysDictType, SysDictData } from '/@/api-services/models';
|
||||
|
||||
const editDictTypeRef = ref<InstanceType<typeof EditDictType>>();
|
||||
const editDictDataRef = ref<InstanceType<typeof EditDictData>>();
|
||||
const xGrid = ref<VxeGridInstance>();
|
||||
const xDictGrid = ref<VxeGridInstance>();
|
||||
const editRef = ref<InstanceType<typeof EditDictType>>();
|
||||
const editDictRef = ref<InstanceType<typeof EditDcitData>>();
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
typeLoading: false,
|
||||
dictTypeData: [] as Array<SysDictType>,
|
||||
dictDataData: [] as Array<SysDictData>,
|
||||
queryDictTypeParams: {
|
||||
queryParams: {
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
},
|
||||
tableDictTypeParams: {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0 as any,
|
||||
},
|
||||
queryDictDataParams: {
|
||||
queryDictParams: {
|
||||
dictTypeId: undefined,
|
||||
value: undefined,
|
||||
code: undefined,
|
||||
dictTypeId: 0, // 字典类型Id
|
||||
},
|
||||
tableDictDataParams: {
|
||||
tableParams: {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
pageSize: 50,
|
||||
field: 'orderNo', // 默认的排序字段
|
||||
order: 'aes', // 排序方向
|
||||
descStr: 'desc', // 降序排序的关键字符
|
||||
total: 0 as any,
|
||||
},
|
||||
editDictTypeTitle: '',
|
||||
editDictDataTitle: '',
|
||||
editDictTypeName: '',
|
||||
tableDictParams: {
|
||||
page: 1,
|
||||
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 () => {
|
||||
handleDictTypeQuery();
|
||||
await handleQuery();
|
||||
});
|
||||
|
||||
// 查询字典操作
|
||||
const handleDictTypeQuery = async () => {
|
||||
state.typeLoading = true;
|
||||
let params = Object.assign(state.queryDictTypeParams, state.tableDictTypeParams);
|
||||
var res = await getAPI(SysDictTypeApi).apiSysDictTypePagePost(params);
|
||||
state.dictTypeData = res.data.result?.items ?? [];
|
||||
state.tableDictTypeParams.total = res.data.result?.total;
|
||||
state.typeLoading = false;
|
||||
// 查询操作
|
||||
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;
|
||||
};
|
||||
|
||||
// 查询字典值操作
|
||||
const handleDictDataQuery = async () => {
|
||||
state.loading = true;
|
||||
let params = Object.assign(state.queryDictDataParams, state.tableDictDataParams);
|
||||
var res = await getAPI(SysDictDataApi).apiSysDictDataPagePost(params);
|
||||
state.dictDataData = res.data.result?.items ?? [];
|
||||
state.tableDictDataParams.total = res.data.result?.total;
|
||||
state.loading = false;
|
||||
// 获取数据
|
||||
const fetchData = async (tableParams: any) => {
|
||||
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
|
||||
return getAPI(SysDictTypeApi).apiSysDictTypePagePost(params);
|
||||
};
|
||||
|
||||
// 点击表格
|
||||
const handleDictType = (row: any, event: any, column: any) => {
|
||||
openDictDataDialog(row);
|
||||
// 重置操作
|
||||
const resetQuery = async () => {
|
||||
state.queryParams.code = undefined;
|
||||
state.queryParams.name = undefined;
|
||||
await handleQuery(true);
|
||||
};
|
||||
|
||||
// 重置字典操作
|
||||
const resetDictTypeQuery = () => {
|
||||
state.queryDictTypeParams.name = undefined;
|
||||
state.queryDictTypeParams.code = undefined;
|
||||
handleDictTypeQuery();
|
||||
// 改变页码序号或页面容量
|
||||
const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
|
||||
state.tableParams.page = currentPage;
|
||||
state.tableParams.pageSize = pageSize;
|
||||
await handleQuery();
|
||||
};
|
||||
|
||||
// 重置字典值操作
|
||||
const resetDictDataQuery = () => {
|
||||
state.queryDictDataParams.value = undefined;
|
||||
state.queryDictDataParams.code = undefined;
|
||||
handleDictDataQuery();
|
||||
// 列排序
|
||||
const sortChange = async (options: any) => {
|
||||
state.tableParams.field = options.field;
|
||||
state.tableParams.order = options.order;
|
||||
await handleQuery();
|
||||
};
|
||||
|
||||
// 打开新增字典页面
|
||||
const openAddDictType = () => {
|
||||
state.editDictTypeTitle = '添加字典';
|
||||
editDictTypeRef.value?.openDialog({ status: 1, orderNo: 100 });
|
||||
// 打开新增页面
|
||||
const handleAdd = () => {
|
||||
state.title = '添加字典';
|
||||
editRef.value?.openDialog({ status: 1, orderNo: 100 });
|
||||
};
|
||||
|
||||
// 打开新增字典值页面
|
||||
const openAddDictData = () => {
|
||||
if (!state.queryDictDataParams.dictTypeId) {
|
||||
ElMessage.warning('请选择字典');
|
||||
return;
|
||||
}
|
||||
|
||||
state.editDictDataTitle = '添加字典值';
|
||||
editDictDataRef.value?.openDialog({ status: 1, orderNo: 100, dictTypeId: state.queryDictDataParams.dictTypeId });
|
||||
// 打开编辑页面
|
||||
const handleEdit = (row: any) => {
|
||||
state.title = '编辑字典';
|
||||
editRef.value?.openDialog(row);
|
||||
};
|
||||
|
||||
// 打开编辑字典页面
|
||||
const openEditDictType = (row: any) => {
|
||||
state.editDictTypeTitle = '编辑字典';
|
||||
editDictTypeRef.value?.openDialog(row);
|
||||
// 点击表格，加载字典值表格数据
|
||||
const handleDictData = async (scope: any) => {
|
||||
state.queryDictParams.dictTypeId = scope.row.id;
|
||||
await handleDictQuery(true);
|
||||
};
|
||||
|
||||
// 打开编辑字典值页面
|
||||
const openEditDictData = (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) => {
|
||||
// 删除
|
||||
const handleDelete = (row: any) => {
|
||||
ElMessageBox.confirm(`确定删除字典：【${row.name}】?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -281,15 +283,78 @@ const delDictType = (row: any) => {
|
||||
})
|
||||
.then(async () => {
|
||||
await getAPI(SysDictTypeApi).apiSysDictTypeDeletePost({ id: row.id });
|
||||
handleDictTypeQuery();
|
||||
handleQuery();
|
||||
updateDictSession();
|
||||
xDictGrid.value?.loadData([]);
|
||||
state.tableDictParams.total = 0;
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.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}】?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -297,35 +362,25 @@ const delDictData = (row: any) => {
|
||||
})
|
||||
.then(async () => {
|
||||
await getAPI(SysDictDataApi).apiSysDictDataDeletePost({ id: row.id });
|
||||
handleDictDataQuery();
|
||||
handleDictQuery();
|
||||
updateDictSession();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 改变字典页面容量
|
||||
const handleDictTypeSizeChange = (val: number) => {
|
||||
state.tableDictTypeParams.pageSize = val;
|
||||
handleDictTypeQuery();
|
||||
// 改变字典值页码序号或页面容量
|
||||
const dictPageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
|
||||
state.tableDictParams.page = currentPage;
|
||||
state.tableDictParams.pageSize = pageSize;
|
||||
await handleDictQuery();
|
||||
};
|
||||
|
||||
// 改变字典页码序号
|
||||
const handleDictTypeCurrentChange = (val: number) => {
|
||||
state.tableDictTypeParams.page = val;
|
||||
handleDictTypeQuery();
|
||||
};
|
||||
|
||||
// 改变字典值页面容量
|
||||
const handleDictDataSizeChange = (val: number) => {
|
||||
state.tableDictDataParams.pageSize = val;
|
||||
handleDictDataQuery();
|
||||
};
|
||||
|
||||
// 改变字典值页码序号
|
||||
const handleDictDataCurrentChange = (val: number) => {
|
||||
state.tableDictDataParams.page = val;
|
||||
handleDictDataQuery();
|
||||
// 字典值列排序
|
||||
const dictSortChange = async (options: any) => {
|
||||
state.tableDictParams.field = options.field;
|
||||
state.tableDictParams.order = options.order;
|
||||
await handleDictQuery();
|
||||
};
|
||||
|
||||
// 更新前端字典缓存
|
||||
@ -337,3 +392,11 @@ const updateDictSession = async () => {
|
||||
await useUserInfo().setDictList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.full-height {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user