WFC/fe.wfc
2
0
Fork 0
Code Activity

增加字典数据界面

Browse Source
This commit is contained in:
lai
2024-12-30 16:46:12 +08:00
parent 0a1f0d94d8
commit 3e2d8faf5e
12 changed files with 1027 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/advanced/table-header-operation.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import { isShowBtn } from '@/utils/permission';
import { ContainerOutlined } from '@ant-design/icons-vue';
defineOptions({
name: 'TableHeaderOperation'
@@ -12,6 +14,7 @@ interface Props {
showDelete?: boolean;
showExport?: boolean;
notShowAdd?: boolean;
showView?: boolean;
}
defineProps<Props>();
@@ -21,6 +24,7 @@ interface Emits {
(e: 'delete'): void;
(e: 'refresh'): void;
(e: 'export'): void;
(e: 'view'): void;
}
const emit = defineEmits<Emits>();
@@ -44,13 +48,19 @@ function refresh() {
function handleExport() {
emit('export');
}
function handleView() {
emit('view');
}
</script>
<template>
<div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
<slot name="prefix"></slot>
<slot name="default">
<AButton v-if="isShowBtn(`system:${tableType}:add`) && !notShowAdd" size="small" ghost type="primary" @click="add">
<AButton v-if="isShowBtn(`system:${tableType}:add`) && !notShowAdd" size="small" ghost type="primary"
@click="add">
<div class="flex-y-center gap-8px">
<icon-ic-round-plus class="text-icon" />
<span>{{ $t('common.add') }}</span>
@@ -78,6 +88,13 @@ function handleExport() {
<span>{{ $t('common.export') }}</span>
</div>
</AButton>
<AButton size="small" type="default" @click.prevent="handleView" v-show="showView">
<template #icon>
<ContainerOutlined />
</template>
{{ $t('route.manage_dictData') }}
</AButton>
<TableColumnSetting v-model:columns="columns" />
<slot name="suffix"></slot>
</div>

2
src/hooks/common/table.ts
View File

@@ -154,7 +154,7 @@ export function useTableOperate<T extends TableData<{ [key: string]: any }>>(
const operateType = ref<any>('add');
const { getData, idKey = 'id' } = options;
/** the editing row data */
const editingData: Ref<T | null> = ref(null);
const editingData: any = ref(null);
function handleAdd() {
operateType.value = 'add';

31
src/locales/langs/en-us.ts
View File

@@ -80,6 +80,7 @@ const local: any = {
core: 'Core',
},
tablePaginationTotal: 'Total {total} items',
inputPlease: 'Please input',
},
// 组件
components: {
@@ -250,7 +251,9 @@ const local: any = {
manage_dept: 'Dept Manage',
manage_route: 'Route Manage',
manage_post: 'Post Manage',
manage_dict: 'Dict Manage'
manage_dict: 'Dict Manage',
manage_dictData:'Dict Data',
manage_task_log: 'Task Log',
},
page: {
login: {
@@ -561,7 +564,31 @@ const local: any = {
remark: 'Please enter remark'
},
addDict: 'Add Dictionary',
editDict: 'Edit Dictionary'
editDict: 'Edit Dictionary',
dictData:{
dictType: "Dictionary name",
dictCode: "Data Code",
dictLabel: "Data Key",
dictLabelPleac: "Please enter the data key correctly",
dictValue: "Data Value",
dictValuePleac: "Please enter the data value correctly",
dictSort: "Data Sort",
status: "Status",
createTime: "CreateTime",
tagType: "Tag Type",
tagTypeShow: "Tag Type Show",
tagClass: "Tag Class",
remark: "Remark",
viewInfo: "Dictionary Data Info",
viewInfoErr: "Failed to get dictionary data information",
addInfo: "Add Dictionary Data",
editInfo: "Modifying Dictionary Data",
delTip: "Confirm deleting the data item with dictionary data code [{txt}]?",
delOk: "Deleted successfully",
exportTip: "Confirm exporting xlsx table files based on search criteria?",
exportOk: "Completed export",
typeDataErr: "Failed to get dictionary type information",
}
},
log:{
logId:'Log ID',

31
src/locales/langs/zh-cn.ts
View File

@@ -80,6 +80,7 @@ const local:any = {
core: '核',
},
tablePaginationTotal: '总共 {total} 条',
inputPlease: '请输入',
},
// 组件
components: {
@@ -250,7 +251,9 @@ const local:any = {
manage_dept: '部门管理',
manage_route: '路由管理',
manage_post: '岗位管理',
manage_dict: '字典管理'
manage_dict: '字典管理',
manage_dictData:'字典数据',
manage_task_log: '任务日志',
},
page: {
login: {
@@ -561,7 +564,31 @@ const local:any = {
remark: '请输入备注'
},
addDict: '新增字典',
editDict: '编辑字典'
editDict: '编辑字典',
dictData:{
dictType: "字典名称",
dictCode: "数据代码",
dictLabel: "数据键名",
dictLabelPleac: "请正确输入数据键名",
dictValue: "数据键值",
dictValuePleac: "请正确输入数据键值",
dictSort: "数据排序",
status: "数据状态",
createTime: "创建时间",
tagType: "标签类型",
tagTypeShow: "回显预览",
tagClass: "样式属性",
remark: "数据说明",
viewInfo: "字典数据信息",
viewInfoErr: "获取字典数据信息失败",
addInfo: "添加字典数据",
editInfo: "修改字典数据",
delTip: "确认删除字典数据代码为 【{txt}】 的数据项?",
delOk: "删除成功",
exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
exportOk: "已完成导出",
typeDataErr: "获取字典类型信息失败",
}
},
log:{
logId:'日志编号',

16
src/service/api/dict.ts
View File

@@ -34,3 +34,19 @@ export const doDeleteDict = (dictId: string | number) => {
method: 'post'
});
};
/**
* 字典数据列表（指定字典类型）
* @param dictType 字典类型
* @returns object
*/
export function getDictDataType(dictType: string) {
return request({
url: `/system/dict/data/type/${dictType}`,
method: 'get',
});
}

87
src/service/api/dictData.ts Normal file
View File

@@ -0,0 +1,87 @@
import { request } from '../request';
export type DictSubmitModel = Partial<
Pick<Api.SystemManage.Dict, 'dictName' | 'dictType' | 'status' | 'remark' | 'dictId'>
>;
/**
* 字典数据列表导出
* @param query 查询参数
* @returns bolb
*/
export function exportData(query: Record<string, any>) {
return request({
url: '/system/dict/data/export',
method: 'post',
data: query,
responseType: 'blob',
});
}
/**
* 查询字典数据列表
* @param query 查询值
* @returns
*/
export function doGetdictDataList(query: Record<string, any>) {
return request({
url: '/system/dict/data/list',
method: 'get',
params: query,
});
}
/**
* 查询字典数据详细
* @param dictCode 字典代码值
* @returns object
*/
export function doGetDataInfo(dictCode: string | number) {
return request({
url: `/system/dict/data/${dictCode}`,
method: 'get',
});
}
/**
* 新增字典数据
* @param data 字典数据对象
* @returns object
*/
export function addData(data: Record<string, any>) {
return request({
url: '/system/dict/data',
method: 'post',
data: data,
});
}
/**
* 修改字典数据
* @param data 字典数据对象
* @returns object
*/
export function updateData(data: Record<string, any>) {
return request({
url: '/system/dict/data',
method: 'put',
data: data,
});
}
/**
* 删除字典数据
* @param dictCode 字典代码值
* @returns object
*/
export function delData(dictCode: string | number) {
return request({
url: `/system/dict/data/${dictCode}`,
method: 'delete',
});
}

62
src/store/modules/dict/index.ts Normal file
View File

@@ -0,0 +1,62 @@
import { defineStore } from 'pinia';
/**字典参数类型 */
type DictStore = {
/**字典数据 */
dicts: Map<string, DictType[]>;
};
const useDictStore = defineStore('dict', {
state: (): DictStore => ({
dicts: new Map(),
}),
actions: {
/**清空字典 */
clearDict() {
this.dicts.clear();
},
/**删除字典 */
removeDict(key: string) {
if (!key) return;
return this.dicts.delete(key);
},
/**
* 处理字典数据对象用于回显标签
* @param data 字典数据项
* @returns
*/
parseDataDict(data: Record<string, any>) {
return [
{
label: data.dictLabel,
value: data.dictValue,
tagType: data.tagType,
tagClass: data.tagClass,
},
];
},
/**获取字典 */
async getDict(key: string) {
if (!key) return [];
let disct = this.dicts.get(key);
if (disct === undefined || disct.length === 0) {
const res = await getDictDataType(key);
if (!res.error && Array.isArray(res.data)) {
const dictData: DictType[] = res.data.map((d:any) => ({
label: d.dictLabel,
value: d.dictValue,
tagType: d.tagType,
tagClass: d.tagClass,
}));
this.dicts.set(key, dictData);
disct = dictData;
} else {
disct = [];
}
}
return disct;
},
},
});
export default useDictStore;

10
src/typings/auto-imports.d.ts vendored
View File

@@ -10,6 +10,7 @@ declare global {
const $notification: typeof import('ant-design-vue')['notification']
const EffectScope: typeof import('vue')['EffectScope']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const addData: typeof import('../service/api/dictData')['addData']
const addJob: typeof import('../service/api/job')['addJob']
const addPackage: typeof import('../service/api/auth')['addPackage']
const addRateLimit: typeof import('../service/api/auth')['addRateLimit']
@@ -57,9 +58,11 @@ declare global {
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const defineStore: typeof import('pinia')['defineStore']
const delData: typeof import('../service/api/dictData')['delData']
const delJobLog: typeof import('../service/api/job')['delJobLog']
const deletePackage: typeof import('../service/api/auth')['deletePackage']
const describe: typeof import('vitest')['describe']
const dict: typeof import('../store/modules/dict/index')['default']
const doAddDept: typeof import('../service/api/dept')['doAddDept']
const doAddDict: typeof import('../service/api/dict')['doAddDict']
const doAddMenu: typeof import('../service/api/menu')['doAddMenu']
@@ -82,6 +85,7 @@ declare global {
const doExportLog: typeof import('../service/api/log')['doExportLog']
const doGetAdminUserPostsAndRoles: typeof import('../service/api/user')['doGetAdminUserPostsAndRoles']
const doGetCheckCode: typeof import('../service/api/auth')['doGetCheckCode']
const doGetDataInfo: typeof import('../service/api/dictData')['doGetDataInfo']
const doGetDeptInfo: typeof import('../service/api/dept')['doGetDeptInfo']
const doGetDeptList: typeof import('../service/api/dept')['doGetDeptList']
const doGetDictList: typeof import('../service/api/dict')['doGetDictList']
@@ -97,6 +101,7 @@ declare global {
const doGetUserList: typeof import('../service/api/user')['doGetUserList']
const doGetUserPostsAndRoles: typeof import('../service/api/user')['doGetUserPostsAndRoles']
const doGetUserRoutes: typeof import('../service/api/route')['doGetUserRoutes']
const doGetdictDataList: typeof import('../service/api/dictData')['doGetdictDataList']
const doGetjobInfo: typeof import('../service/api/job')['doGetjobInfo']
const doGetjobList: typeof import('../service/api/job')['doGetjobList']
const doGetjobLogInfo: typeof import('../service/api/jobLog')['doGetjobLogInfo']
@@ -111,6 +116,7 @@ declare global {
const effectScope: typeof import('vue')['effectScope']
const emptyInfo: typeof import('../store/modules/auth/shared')['emptyInfo']
const expect: typeof import('vitest')['expect']
const exportData: typeof import('../service/api/dictData')['exportData']
const exportJob: typeof import('../service/api/job')['exportJob']
const exportJobLog: typeof import('../service/api/jobLog')['exportJobLog']
const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -139,7 +145,10 @@ declare global {
const getCacheRouteNames: typeof import('../store/modules/route/shared')['getCacheRouteNames']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const getData: typeof import('../service/api/dictData')['getData']
const getDefaultHomeTab: typeof import('../store/modules/tab/shared')['getDefaultHomeTab']
const getDictDataType: typeof import('../service/api/dict')['getDictDataType']
const getDictOptionselect: typeof import('../service/api/dict')['getDictOptionselect']
const getFixedTabIds: typeof import('../store/modules/tab/shared')['getFixedTabIds']
const getFixedTabs: typeof import('../store/modules/tab/shared')['getFixedTabs']
const getGlobalMenusByAuthRoutes: typeof import('../store/modules/route/shared')['getGlobalMenusByAuthRoutes']
@@ -259,6 +268,7 @@ declare global {
const unref: typeof import('vue')['unref']
const unrefElement: typeof import('@vueuse/core')['unrefElement']
const until: typeof import('@vueuse/core')['until']
const updateData: typeof import('../service/api/dictData')['updateData']
const updateJob: typeof import('../service/api/job')['updateJob']
const updateLocaleOfGlobalMenus: typeof import('../store/modules/route/shared')['updateLocaleOfGlobalMenus']
const updatePackage: typeof import('../service/api/auth')['updatePackage']

1
src/typings/components.d.ts vendored
View File

@@ -63,6 +63,7 @@ declare module 'vue' {
CronModal: typeof import('./../components/CronModal/index.vue')['default']
DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
Day: typeof import('./../components/CronModal/components/Day.vue')['default']
DictTag: typeof import('./../components/DictTag/index.vue')['default']
ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
FullScreen: typeof import('./../components/common/full-screen.vue')['default']
Hour: typeof import('./../components/CronModal/components/Hour.vue')['default']

7
src/typings/dict.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
/**字段类型 */
type DictType = {
label: string;
value: string;
tagType?: string;
tagClass?: string;
};

731
src/views/manage/dict/dictData/index.vue Normal file
View File

@@ -0,0 +1,731 @@
<script setup lang="tsx">
import { Form, message } from 'ant-design-vue';
import type { Key } from 'ant-design-vue/es/_util/type';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { SimpleScrollbar } from '~/packages/materials/src';
import { useI18n } from "vue-i18n";
import { SyncOutlined, SearchOutlined, ProfileOutlined, CloseOutlined, ExportOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { enableStatusOptions } from '@/constants/business';
import { saveAs } from 'file-saver';
import useDictStore from '@/store/modules/dict';
import Modal from 'ant-design-vue/es/modal/Modal';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const { parseDataDict, getDict } = useDictStore();
const { t } = useI18n();
const i18n = useI18n();
// 获取当前语言设置
const currentLocale = computed(() => {
return i18n.locale.value;
});
const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl);
const zh = currentLocale.value === 'zh_CN';
/**标签类型数据固定项 */
const tagTypeOptions = ref([
{ value: '', label: zh ? '普通文本' : 'Plain text' },
{ value: 'default', label: zh ? '默认（default）' : 'Default' },
{ value: 'blue ', label: zh ? '蓝色（blue）' : 'Blue' },
{ value: 'cyan', label: zh ? '青色（cyan）' : 'Cyan' },
{ value: 'gold', label: zh ? '金色（gold）' : 'Gold' },
{ value: 'green', label: zh ? '绿色（green）' : 'Green' },
{ value: 'lime', label: zh ? '亮绿（lime）' : 'Lime' },
{ value: 'magenta', label: zh ? '紫红（magenta）' : 'Magenta' },
{ value: 'orange', label: zh ? '橘黄（orange）' : 'Orange' },
{ value: 'pink', label: zh ? '粉色（pink）' : 'Pink' },
{ value: 'purple', label: zh ? '紫色（purple）' : 'Purple' },
{ value: 'red', label: zh ? '红色（red）' : 'Red' },
{ value: 'yellow', label: zh ? '黄色（yellow）' : 'Yellow' },
{ value: 'geekblue', label: zh ? '深蓝（geekblue）' : 'Geekblue' },
{ value: 'volcano', label: zh ? '棕色（volcano）' : 'Volcano' },
{ value: 'processing', label: zh ? '进行（processing）' : 'Processing' },
{ value: 'warning', label: zh ? '警告（warning）' : 'Warning' },
{ value: 'error', label: zh ? '错误（error）' : 'Error' },
{ value: 'success', label: zh ? '成功（success）' : 'Success' },
]);
// 获取地址栏参数
const dictId = route.params && (route.query.dictId as string);
/**对话框对象信息状态 */
let modalState: any = reactive({
openByView: false,
openByEdit: false,
title: '字典数据',
from: {
dictCode: undefined,
dictLabel: '',
dictSort: 0,
dictType: 'sys_oper_type',
dictValue: '',
tagClass: '',
tagType: '',
remark: '',
status: '0',
createTime: 0,
createBy: undefined,
},
confirmLoading: false,
});
/**字典数据 */
let dict: {
/**数据状态 */
sysNormalDisable: any[];
/**字典名称 */
sysDictType: any[];
} = reactive({
sysNormalDisable: [],
sysDictType: [],
});
const scrollConfig = computed(() => {
return {
y: wrapperElHeight.value - 72,
x: 1000
};
});
const { columns, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
apiFn: doGetdictDataList,
apiParams: {
pageNum: 1,
pageSize: 10,
dictType: '',
dictLabel: '',
status: ''
},
rowKey: 'dictCode',
columns: () => [
{
title: t('page.manage.dict.dictData.dictCode'),
key: 'dictCode',
dataIndex: 'dictCode',
align: 'center',
width: 100,
},
{
title: t('page.manage.dict.dictData.dictLabel'),
key: 'dictLabel',
dataIndex: 'dictLabel',
align: 'center',
width: 200,
},
{
title: t('page.manage.dict.dictData.dictValue'),
key: 'dictValue',
dataIndex: 'dictValue',
align: 'center',
width: 200,
},
{
title: t('page.manage.dict.dictData.dictSort'),
dataIndex: 'dictSort',
key: 'dictSort',
align: 'center',
width: 100,
},
{
title: t('page.manage.dict.dictData.status'),
dataIndex: 'status',
key: 'status',
align: 'center',
width: 100,
},
{
title: t('page.manage.dict.dictData.createTime'),
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
width: 150,
},
{
title: t('common.operate'),
key: 'dictCode',
align: 'center',
width: 200,
},
]
});
const {
operateType,
checkedRowKeys,
onDeleted
// closeDrawer
} = useTableOperate(data, { getData, idKey: 'dictCode' });
async function handleBatchDelete() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.dict.dictData.delTip', { txt: checkedRowKeys.value.join(',') }),
async onOk() {
const { error } = await delData(checkedRowKeys.value.join(','));
if (!error) {
onDeleted();
// 取消勾选
if (checkedRowKeys.value.length > 0) {
checkedRowKeys.value = [];
}
}
}
})
}
/**表格多选 */
function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
checkedRowKeys.value = selectedRowKeys as number[];
}
function fnQueryReset() {
if (dictId && dictId !== '0') {
searchParams.value = Object.assign(searchParams, {
dictLabel: '',
status: undefined,
pageNum: 1,
pageSize: 10,
});
} else {
searchParams.value = Object.assign(searchParams, {
dictType: '',
dictLabel: '',
status: undefined,
pageNum: 1,
pageSize: 10,
});
}
resetSearchParams();
}
async function fnRecordView(dictCode: number) {
operateType.value = 'view';
if (modalState.confirmLoading) return;
const hide = message.loading('Waiting...', 0);
modalState.confirmLoading = true;
doGetDataInfo(dictCode).then(res => {
modalState.confirmLoading = false;
hide();
if (!res.error) {
modalState.from = Object.assign(modalState.from, res.data);
modalState.openByView = true;
modalState.title = t('page.manage.task.viewJob');
}
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.openByEdit = false;
modalState.openByView = false;
}
/**列表导出 */
function fnExportList() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('common.exportTip'),
onOk() {
const key = 'exportJobLog';
message.loading({ content: t('common.loading'), key });
exportData(toRaw(searchParams)).then(res => {
if (!res.error) {
message.success({
content: t('common.exportOk'),
key,
duration: 2,
});
saveAs(res.data, `DictData_${Date.now()}.xlsx`);
}
});
},
});
}
/**关闭跳转 */
function fnClose(this: any) {
router.back(); // 返回到上一个页面
}
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
dictLabel: [
{
required: true,
min: 1,
max: 50,
message: t('page.manage.dict.dictData.dictLabelPleac'),
},
],
dictValue: [
{
required: true,
min: 1,
max: 50,
message: t('page.manage.dict.dictData.dictValuePleac'),
},
],
})
);
/**新增修改界面 */
function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
if (!dictCode) {
modalStateFrom.resetFields();
modalState.from.dictType = searchParams.dictType;
modalState.title = t('page.manage.dict.dictData.addInfo');
modalState.openByEdit = true;
} else {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
modalState.confirmLoading = true;
doGetDataInfo(dictCode).then(res => {
modalState.confirmLoading = false;
hide();
if (!res.error) {
modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('page.manage.dict.dictData.editInfo');
modalState.openByEdit = true;
}
});
}
}
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalOk() {
modalStateFrom
.validate()
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const dictData = from.dictCode ? updateData(from) : addData(from);
const key = 'dictData';
message.loading({ content: t('common.loading'), key });
dictData
.then(res => {
if (!res.error) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
key,
duration: 2,
});
modalState.openByEdit = false;
modalStateFrom.resetFields();
getData();
}
})
.finally(() => {
modalState.confirmLoading = false;
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 2);
});
}
/**
* 字典删除
* @param dictCode 字典代码
*/
function fnRecordDelete(dictCode: string = '0') {
if (dictCode === '0') {
dictCode = checkedRowKeys.value.join(',');
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.dict.dictData.delTip', { txt: dictCode }),
onOk() {
const key = 'delData';
message.loading({ content: t('common.loading'), key });
delData(dictCode).then(res => {
if (!res.error) {
message.success({
content: t('page.manage.dict.dictData.delOk'),
key,
duration: 2,
});
getData();
}
});
},
});
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([
getDict('sys_normal_disable'),
]).then((resArr: any) => {
if (resArr[0].status === 'fulfilled') {
dict.sysNormalDisable = resArr[0].value;
}
});
// 指定任务id数据列表
if (dictId && dictId !== '0') {
doGetDataInfo(dictId).then(res => {
if (!res.error) {
searchParams.dictType = res.data.dictType;
getData();
}
});
} else {
getData();
}
})
</script>
<template>
<SimpleScrollbar>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<!-- 搜索框 -->
<ACard :title="$t('common.search')" :bordered="false" class="card-wrapper">
<AForm :model="searchParams" :label-width="80">
<ARow :gutter="[16, 16]" wrap>
<a-col :lg="6" :md="12" :xs="24" v-if="dictId !== '0'">
<a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType" class="m-0">
<a-input v-model:value="searchParams.dictType" :disabled="dictId !== '0'"
:placeholder="t('common.inputPlease')"></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel" class="m-0">
<a-input v-model:value="searchParams.dictLabel" allow-clear
:placeholder="t('common.inputPlease')"></a-input>
</a-form-item>
</a-col>
<ACol :lg="6" :md="12" :xs="24">
<AFormItem :label="$t('page.manage.user.status')" name="status" class="m-0">
<ASelect v-model:value="searchParams.status" :placeholder="$t('page.manage.user.form.status')"
allow-clear>
<ASelectOption v-for="option in enableStatusOptions" :key="option.value" :value="option.value">
{{ $t(option.label) }}
</ASelectOption>
</ASelect>
</AFormItem>
</ACol>
<ACol :lg="6" :md="12" :xs="24">
<AFormItem class="m-0">
<div class="w-full flex-y-center justify-end gap-8px">
<a-space :size="8">
<a-button @click="fnQueryReset">
<template #icon>
<SyncOutlined />
</template>
{{ $t('common.reset') }}
</a-button>
<AButton type="primary" ghost @click="getData">
<template #icon>
<SearchOutlined />
</template>
{{ $t('common.search') }}
</AButton>
</a-space>
</div>
</AFormItem>
</ACol>
</ARow>
</AForm>
</ACard>
<ACard title="Dictionary Data" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper">
<template #extra>
<div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
<slot name="prefix"></slot>
<slot name="default">
<a-button type="default" size="small" @click.prevent="fnClose()">
<template #icon>
<CloseOutlined />
</template>
{{ t('common.close') }}
</a-button>
<AButton size="small" ghost type="primary" @click="fnModalVisibleByEdit()">
<div class="flex-y-center gap-8px">
<icon-ic-round-plus class="text-icon" />
<span>{{ $t('common.add') }}</span>
</div>
</AButton>
<AButton size="small" danger :disabled="checkedRowKeys.length <= 0" @click="handleBatchDelete()">
<div class="flex-y-center gap-8px">
<icon-ic-round-delete class="text-icon" />
<span>{{ $t('common.batchDelete') }}</span>
</div>
</AButton>
<AButton size="small" type="primary" @click="fnExportList">
<template #icon>
<ExportOutlined />
</template>
<span>{{ $t('common.export') }}</span>
</AButton>
<AButton size="small" @click="getData">
<div class="flex-y-center gap-8px">
<icon-mdi-refresh class="text-icon" />
<span>{{ $t('common.refresh') }}</span>
</div>
</AButton>
</slot>
<slot name="suffix"></slot>
</div>
</template>
<ATable ref="wrapperEl" row-key="dictCode" :columns="columns" :data-source="data" :loading="loading"
:row-selection="{
selectedRowKeys: checkedRowKeys,
onChange: handleUserSelectChange,
}" size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<DictTag :options="dict.sysNormalDisable" :value="record.status" />
</template>
<template v-if="column.key === 'dictCode'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.view') }}</template>
<a-button type="link" @click.prevent="fnRecordView(record.dictCode)">
<template #icon>
<ProfileOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.edit') }}</template>
<a-button type="link" @click.prevent="fnModalVisibleByEdit(record.dictCode, record)">
<template #icon>
<FormOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.delete') }}</template>
<a-button type="link" @click.prevent="fnRecordDelete(record.dictCode)">
<template #icon>
<DeleteOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
</ATable>
<!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
:row-data="editingData" @submitted="getData" /> -->
<!-- 详情框 -->
<a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType">
{{
dict.sysDictType.find(
item => item.value === modalState.from.dictType
)?.label
}}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.createTime')" name="createTime">
<span v-if="+modalState.from.createTime > 0">
{{ modalState.from.createTime }}
</span>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictCode')" name="dictCode">
{{ modalState.from.dictCode }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.status')" name="status">
<DictTag :options="dict.sysNormalDisable" :value="modalState.from.status" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel">
{{ modalState.from.dictLabel }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictValue')" name="dictValue">
{{ modalState.from.dictValue }}
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.tagType')" name="tagType">
<DictTag :options="tagTypeOptions" :value="modalState.from.tagType" />
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.tagClass')" name="tagClass">
{{ modalState.from.tagClass }}
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.tagTypeShow')" name="tagType">
<DictTag :options="parseDataDict(modalState.from)" :value="modalState.from.dictValue" />
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictSort')" name="dictSort">
{{ modalState.from.dictSort }}
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('page.manage.dict.dictData.remark')" name="remark" :label-col="{ span: 3 }"
:label-wrap="true">
<a-textarea v-model:value="modalState.from.remark" :auto-size="{ minRows: 2, maxRows: 6 }"
:disabled="true" />
</a-form-item>
</a-form>
<template #footer>
<a-button key="cancel" @click="fnModalCancel">
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
<!--新增修改框 -->
<a-modal :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
v-model:open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @cancel="fnModalCancel">
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType">
<a-select v-model:value="modalState.from.dictType" default-value="sys_oper_type"
:placeholder="t('common.selectPlease')" :options="dict.sysDictType" :disabled="true">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictSort')" name="dictSort">
<a-input-number v-model:value="modalState.from.dictSort" :min="0" :max="65535"
:placeholder="t('common.inputPlease')"></a-input-number>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel"
v-bind="modalStateFrom.validateInfos.dictLabel">
<a-input v-model:value="modalState.from.dictLabel" allow-clear
:placeholder="t('page.manage.dict.dictData.dictLabelPleac')"></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.dictValue')" name="dictValue"
v-bind="modalStateFrom.validateInfos.dictValue">
<a-input v-model:value="modalState.from.dictValue" allow-clear
:placeholder="t('page.manage.dict.dictData.dictValuePleac')"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.dict.dictData.status')" name="status">
<a-select v-model:value="modalState.from.status" default-value="0"
:placeholder="t('common.selectPlease')" :options="dict.sysNormalDisable">
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('page.manage.dict.dictData.remark')" name="remark" :label-col="{ span: 3 }"
:label-wrap="true">
<a-textarea v-model:value="modalState.from.remark" :auto-size="{ minRows: 4, maxRows: 6 }"
:maxlength="450" :show-count="true" />
</a-form-item>
</a-form>
</a-modal>
</ACard>
</div>
</SimpleScrollbar>
</template>
<style scoped></style>

75
src/views/manage/dict/index.vue
View File

@@ -6,7 +6,14 @@ import { $t } from '@/locales';
import { enableStatusRecord } from '@/constants/business';
import DictOperateDrawer from './modules/dict-operate-drawer.vue';
import DictSearch from './modules/dict-search.vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const routePath = route.path;
const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl);
@@ -45,11 +52,11 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
dataIndex: 'status',
title: '状态',
align: 'center',
customRender: ({ record }) => {
customRender: ({ record }: any) => {
if (record.status === null) {
return null;
}
const tagMap: Record<Api.Common.EnableStatus, string> = {
const tagMap: any = {
'0': 'success',
'1': 'warning'
};
@@ -74,20 +81,23 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
title: '操作',
align: 'center',
width: 200,
customRender: ({ record }) => (
customRender: ({ record }: any) => (
<div class="flex justify-around gap-8px">
{isShowBtn('system:dict:edit') && (
<Button size="small" onClick={() => edit(record.dictId)}>
编辑
{t('common.edit')}
</Button>
)}
{isShowBtn('system:dict:remove') && (
<Popconfirm onConfirm={() => handleDelete(record.dictId)} title="确认删除吗？">
<Button danger size="small">
删除
{$t('common.delete')}
</Button>
</Popconfirm>
)}
<Button size="small" onClick={() => fnDataView(record.dictId)} >
{$t('route.manage_dictData')}
</Button>
</div>
)
}
@@ -101,6 +111,10 @@ async function handleBatchDelete() {
const { error } = await doDeleteDict(checkedRowKeys.value.join(','));
if (!error) {
onBatchDeleted();
// 取消勾选
if (checkedRowKeys.value.length > 0) {
checkedRowKeys.value = [];
}
}
}
@@ -118,47 +132,30 @@ function edit(id: number) {
function handleDictSelectChange(selectedRowKeys: Key[]) {
checkedRowKeys.value = selectedRowKeys as number[];
}
/**跳转字典数据页面 */
function fnDataView(dictId: string | number = '0') {
router.push(`${routePath}/dictData?dictId=${dictId}`);
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<DictSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
<ACard
title="字典列表"
:bordered="false"
:body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
>
<ACard title="字典列表" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper">
<template #extra>
<TableHeaderOperation
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-delete="true"
table-type="dict"
@add="handleAdd"
@delete="handleBatchDelete"
@refresh="getData"
/>
<TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
:loading="loading" :show-delete="true" :show-view="true" table-type="dict" @add="handleAdd" @delete="handleBatchDelete"
@refresh="getData" @view="fnDataView"/>
</template>
<ATable
ref="wrapperEl"
:columns="columns"
:data-source="data"
:loading="loading"
:row-selection="{ selectedRowKeys: checkedRowKeys, onChange: handleDictSelectChange }"
row-key="dictId"
size="small"
:pagination="mobilePagination"
:scroll="scrollConfig"
class="h-full"
/>
<DictOperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getData"
/>
<ATable ref="wrapperEl" :columns="columns" :data-source="data" :loading="loading"
:row-selection="{ selectedRowKeys: checkedRowKeys, onChange: handleDictSelectChange }" row-key="dictId"
size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full" />
<DictOperateDrawer v-model:visible="drawerVisible" :operate-type="operateType" :row-data="editingData"
@submitted="getData" />
</ACard>
</div>
</template>