mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-03 00:55:33 +08:00
前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题
This commit is contained in:
JEECG
140
jeecgboot-vue3/src/views/system/dict/components/DictItemList.vue
Normal file
140
jeecgboot-vue3/src/views/system/dict/components/DictItemList.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="字典列表" width="800px">
|
||||
<BasicTable @register="registerTable" :rowClassName="getRowClassName">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleCreate"> 新增</a-button>
|
||||
</template>
|
||||
<template v-slot:bodyCell="{column, record, index}">
|
||||
<template v-if="column.dataIndex ==='action'">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</BasicTable>
|
||||
</BasicDrawer>
|
||||
<DictItemModal @register="registerModal" @success="reload" :dictId="dictId" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
|
||||
import { BasicTable, useTable, TableAction } from '/src/components/Table';
|
||||
import { useModal } from '/src/components/Modal';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import DictItemModal from './DictItemModal.vue';
|
||||
import { dictItemColumns, dictItemSearchFormSchema } from '../dict.data';
|
||||
import { itemList, deleteItem } from '../dict.api';
|
||||
import { ColEx } from '/@/components/Form/src/types';
|
||||
|
||||
const { prefixCls } = useDesign('row-invalid');
|
||||
const dictId = ref('');
|
||||
//字典配置model
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerDrawer] = useDrawerInner(async (data) => {
|
||||
dictId.value = data.id;
|
||||
setProps({ searchInfo: { dictId: unref(dictId) } });
|
||||
reload();
|
||||
});
|
||||
// 自适应列配置
|
||||
const adaptiveColProps: Partial<ColEx> = {
|
||||
xs: 24, // <576px
|
||||
sm: 24, // ≥576px
|
||||
md: 24, // ≥768px
|
||||
lg: 12, // ≥992px
|
||||
xl: 12, // ≥1200px
|
||||
xxl: 8, // ≥1600px
|
||||
};
|
||||
const [registerTable, { reload, setProps }] = useTable({
|
||||
//需要配置rowKey，否则会有警告
|
||||
rowKey:'dictId',
|
||||
api: itemList,
|
||||
columns: dictItemColumns,
|
||||
formConfig: {
|
||||
baseColProps: adaptiveColProps,
|
||||
labelAlign: 'right',
|
||||
labelCol: {
|
||||
offset: 1,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 9,
|
||||
xl: 7,
|
||||
xxl: 4,
|
||||
},
|
||||
wrapperCol: {},
|
||||
schemas: dictItemSearchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
actionColOptions: {
|
||||
span: 8
|
||||
}
|
||||
},
|
||||
striped: true,
|
||||
useSearchForm: true,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
canResize: false,
|
||||
immediate: false,
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
//slots: { customRender: 'action' },
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(record) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteItem({ id: record.id }, reload);
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
function getRowClassName(record) {
|
||||
return record.status == 0 ? prefixCls : '';
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@prefix-cls: ~'@{namespace}-row-invalid';
|
||||
|
||||
:deep(.@{prefix-cls}) {
|
||||
background: #f4f4f4;
|
||||
color: #bababa;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="800px">
|
||||
<!-- update-begin---author:wangshuai---date:2023-10-23---for:【QQYUN-6804】后台模式字典没有颜色配置--- -->
|
||||
<BasicForm @register="registerForm" >
|
||||
<template #itemColor="{ model, field }">
|
||||
<div class="item-tool">
|
||||
<div
|
||||
v-for="(item,index) in Colors"
|
||||
:style="{ color: item[0] }"
|
||||
:class="model.itemColor===item[0]?'item-active':''"
|
||||
class="item-color"
|
||||
@click="itemColorClick(item)">
|
||||
<div class="item-color-border"></div>
|
||||
<div class="item-back" :style="{ background: item[0] }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BasicForm>
|
||||
<!-- update-end---author:wangshuai---date:2023-10-23---for:【QQYUN-6804】后台模式字典没有颜色配置--- -->
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, ref, computed, unref, reactive } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/src/components/Modal';
|
||||
import { BasicForm, useForm } from '/src/components/Form';
|
||||
import { itemFormSchema } from '../dict.data';
|
||||
import { saveOrUpdateDictItem } from '../dict.api';
|
||||
import { Colors } from '/@/utils/dict/DictColors.js'
|
||||
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const props = defineProps({ dictId: String });
|
||||
const isUpdate = ref(true);
|
||||
//表单配置
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
schemas: itemFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
mergeDynamicData: props,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 4 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 18 },
|
||||
},
|
||||
});
|
||||
//表单赋值
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
//重置表单
|
||||
await resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
if (unref(isUpdate)) {
|
||||
//表单赋值
|
||||
await setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//设置标题
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
|
||||
|
||||
//表单提交事件
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
values.dictId = props.dictId;
|
||||
setModalProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
await saveOrUpdateDictItem(values, isUpdate.value);
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
//刷新列表
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 字典颜色点击事件
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
* @param model
|
||||
*/
|
||||
function itemColorClick(item) {
|
||||
console.log(item)
|
||||
setFieldsValue({ itemColor: item[0] })
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/*begin 字典颜色配置样式*/
|
||||
.item-tool{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item-color{
|
||||
width: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-back{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.item-color-border{
|
||||
visibility: hidden;
|
||||
}
|
||||
.item-active .item-color-border{
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
border: 1px solid;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*end 字典颜色配置样式*/
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" width="550px" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/src/components/Modal';
|
||||
import { BasicForm, useForm } from '/src/components/Form';
|
||||
import { formSchema } from '../dict.data';
|
||||
import { saveOrUpdateDict } from '../dict.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
//表单配置
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
//表单赋值
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
//重置表单
|
||||
await resetFields();
|
||||
setModalProps({ confirmLoading: false, minHeight: 80 });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.record.id;
|
||||
//表单赋值
|
||||
await setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
});
|
||||
//设置标题
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增字典' : '编辑字典'));
|
||||
//表单提交事件
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
let values = await validate();
|
||||
setModalProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
await saveOrUpdateDict(values, isUpdate.value);
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
//刷新列表
|
||||
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="字典回收站" :showOkBtn="false" width="1000px" destroyOnClose>
|
||||
<BasicTable @register="registerTable">
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, toRaw } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/src/components/Modal';
|
||||
import { BasicTable, useTable, TableAction } from '/src/components/Table';
|
||||
import { recycleBincolumns } from '../dict.data';
|
||||
import { getRecycleBinList, putRecycleBin, deleteRecycleBin } from '../dict.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const checkedKeys = ref<Array<string | number>>([]);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner();
|
||||
//注册table数据
|
||||
const [registerTable, { reload }] = useTable({
|
||||
api: getRecycleBinList,
|
||||
columns: recycleBincolumns,
|
||||
striped: true,
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
clickToRowSelect: false,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
tableSetting: { fullScreen: true },
|
||||
canResize: false,
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 还原事件
|
||||
*/
|
||||
async function handleRevert(record) {
|
||||
await putRecycleBin(record.id, reload);
|
||||
emit('success');
|
||||
}
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteRecycleBin(record.id, reload);
|
||||
}
|
||||
/**
|
||||
* 批量还原事件
|
||||
*/
|
||||
function batchHandleRevert() {
|
||||
handleRevert({ id: toRaw(checkedKeys.value).join(',') });
|
||||
}
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
function batchHandleDelete() {
|
||||
handleDelete({ id: toRaw(checkedKeys.value).join(',') });
|
||||
}
|
||||
//获取操作栏事件
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '取回',
|
||||
icon: 'ant-design:redo-outlined',
|
||||
popConfirm: {
|
||||
title: '是否确认取回',
|
||||
confirm: handleRevert.bind(null, record),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '彻底删除',
|
||||
icon: 'ant-design:scissor-outlined',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
135
jeecgboot-vue3/src/views/system/dict/dict.api.ts
Normal file
135
jeecgboot-vue3/src/views/system/dict/dict.api.ts
Normal file
@ -0,0 +1,135 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
enum Api {
|
||||
list = '/sys/dict/list',
|
||||
save = '/sys/dict/add',
|
||||
edit = '/sys/dict/edit',
|
||||
duplicateCheck = '/sys/duplicate/check',
|
||||
deleteDict = '/sys/dict/delete',
|
||||
deleteBatch = '/sys/dict/deleteBatch',
|
||||
importExcel = '/sys/dict/importExcel',
|
||||
exportXls = '/sys/dict/exportXls',
|
||||
recycleBinList = '/sys/dict/deleteList',
|
||||
putRecycleBin = '/sys/dict/back',
|
||||
deleteRecycleBin = '/sys/dict/deletePhysic',
|
||||
itemList = '/sys/dictItem/list',
|
||||
deleteItem = '/sys/dictItem/delete',
|
||||
itemSave = '/sys/dictItem/add',
|
||||
itemEdit = '/sys/dictItem/edit',
|
||||
dictItemCheck = '/sys/dictItem/dictItemCheck',
|
||||
refreshCache = '/sys/dict/refleshCache',
|
||||
queryAllDictItems = '/sys/dict/queryAllDictItems',
|
||||
}
|
||||
/**
|
||||
* 导出api
|
||||
* @param params
|
||||
*/
|
||||
export const getExportUrl = Api.exportXls;
|
||||
/**
|
||||
* 导入api
|
||||
* @param params
|
||||
*/
|
||||
export const getImportUrl = Api.importExcel;
|
||||
/**
|
||||
* 字典列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
/**
|
||||
* 删除字典
|
||||
*/
|
||||
export const deleteDict = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteDict, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 批量删除字典
|
||||
* @param params
|
||||
*/
|
||||
export const batchDeleteDict = (params, handleSuccess) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 保存或者更新字典
|
||||
* @param params
|
||||
*/
|
||||
export const saveOrUpdateDict = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url: url, params });
|
||||
};
|
||||
/**
|
||||
* 唯一校验
|
||||
* @param params
|
||||
*/
|
||||
export const duplicateCheck = (params) => defHttp.get({ url: Api.duplicateCheck, params }, { isTransformResponse: false });
|
||||
/**
|
||||
* 字典回收站列表
|
||||
* @param params
|
||||
*/
|
||||
export const getRecycleBinList = (params) => defHttp.get({ url: Api.recycleBinList, params });
|
||||
/**
|
||||
* 回收站还原
|
||||
* @param params
|
||||
*/
|
||||
export const putRecycleBin = (id, handleSuccess) => {
|
||||
return defHttp.put({ url: Api.putRecycleBin + `/${id}` }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 回收站删除
|
||||
* @param params
|
||||
*/
|
||||
export const deleteRecycleBin = (id, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteRecycleBin + `/${id}` }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 字典配置列表
|
||||
* @param params
|
||||
*/
|
||||
export const itemList = (params) => defHttp.get({ url: Api.itemList, params });
|
||||
/**
|
||||
* 字典配置删除
|
||||
* @param params
|
||||
*/
|
||||
export const deleteItem = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteItem, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 保存或者更新字典配置
|
||||
* @param params
|
||||
*/
|
||||
export const saveOrUpdateDictItem = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.itemEdit : Api.itemSave;
|
||||
return defHttp.post({ url: url, params });
|
||||
};
|
||||
/**
|
||||
* 校验字典数据值
|
||||
* @param params
|
||||
*/
|
||||
export const dictItemCheck = (params) => defHttp.get({ url: Api.dictItemCheck, params }, { isTransformResponse: false });
|
||||
/**
|
||||
* 刷新字典
|
||||
* @param params
|
||||
*/
|
||||
export const refreshCache = () => defHttp.get({ url: Api.refreshCache }, { isTransformResponse: false });
|
||||
/**
|
||||
* 获取所有字典项
|
||||
* @param params
|
||||
*/
|
||||
export const queryAllDictItems = () => defHttp.get({ url: Api.queryAllDictItems }, { isTransformResponse: false });
|
||||
203
jeecgboot-vue3/src/views/system/dict/dict.data.ts
Normal file
203
jeecgboot-vue3/src/views/system/dict/dict.data.ts
Normal file
@ -0,0 +1,203 @@
|
||||
import { BasicColumn } from '/@/components/Table';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import { dictItemCheck } from './dict.api';
|
||||
import { rules } from '/@/utils/helper/validator';
|
||||
import { h } from "vue";
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '字典名称',
|
||||
dataIndex: 'dictName',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '字典编码',
|
||||
dataIndex: 'dictCode',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
// width: 120
|
||||
},
|
||||
];
|
||||
|
||||
export const recycleBincolumns: BasicColumn[] = [
|
||||
{
|
||||
title: '字典名称',
|
||||
dataIndex: 'dictName',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '字典编码',
|
||||
dataIndex: 'dictCode',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '字典名称',
|
||||
field: 'dictName',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
label: '字典编码',
|
||||
field: 'dictCode',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
label: '',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '字典名称',
|
||||
field: 'dictName',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '字典编码',
|
||||
field: 'dictCode',
|
||||
component: 'Input',
|
||||
dynamicDisabled: ({ values }) => {
|
||||
return !!values.id;
|
||||
},
|
||||
dynamicRules: ({ model, schema }) => rules.duplicateCheckRule('sys_dict', 'dict_code', model, schema, true),
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
field: 'description',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
|
||||
export const dictItemColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'itemText',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '数据值',
|
||||
dataIndex: 'itemValue',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '字典颜色',
|
||||
dataIndex: 'itemColor',
|
||||
width: 80,
|
||||
align:'center',
|
||||
customRender:({ text }) => {
|
||||
return h('div', {
|
||||
style: {"background": text, "width":"18px","height":"18px","border-radius":"50%","margin":"0 auto"}
|
||||
})
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
export const dictItemSearchFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '名称',
|
||||
field: 'itemText',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
field: 'status',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
dictCode: 'dict_item_status',
|
||||
stringToNumber: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const itemFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
field: 'itemText',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '数据值',
|
||||
field: 'itemValue',
|
||||
component: 'Input',
|
||||
dynamicRules: ({ values, model }) => {
|
||||
return [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入数据值');
|
||||
}
|
||||
if (new RegExp("[`~!@#$^&*()=|{}'.<>《》/?！￥（）—【】‘；：”“。，、？]").test(value)) {
|
||||
return Promise.reject('数据值不能包含特殊字符！');
|
||||
}
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
let params = {
|
||||
dictId: values.dictId,
|
||||
id: model.id,
|
||||
itemValue: value,
|
||||
};
|
||||
dictItemCheck(params)
|
||||
.then((res) => {
|
||||
res.success ? resolve() : reject(res.message || '校验失败');
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err.message || '验证失败');
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '颜色值',
|
||||
field: 'itemColor',
|
||||
component: 'Input',
|
||||
slot:'itemColor'
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
field: 'description',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
field: 'sortOrder',
|
||||
label: '排序',
|
||||
component: 'InputNumber',
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '是否启用',
|
||||
defaultValue: 1,
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
type: 'radioButton',
|
||||
dictCode: 'dict_item_status',
|
||||
stringToNumber: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
191
jeecgboot-vue3/src/views/system/dict/index.vue
Normal file
191
jeecgboot-vue3/src/views/system/dict/index.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
|
||||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
|
||||
<a-button type="primary" @click="handlerRefreshCache" preIcon="ant-design:sync-outlined"> 刷新缓存</a-button>
|
||||
<a-button type="primary" @click="openRecycleModal(true)" preIcon="ant-design:hdd-outlined"> 回收站</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined"></Icon>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button
|
||||
>批量操作
|
||||
<Icon icon="ant-design:down-outlined"></Icon>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!--字典弹窗-->
|
||||
<DictModal @register="registerModal" @success="handleSuccess" />
|
||||
<!--字典配置抽屉-->
|
||||
<DictItemList @register="registerDrawer" />
|
||||
<!--回收站弹窗-->
|
||||
<DictRecycleBinModal @register="registerModal1" @success="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="system-dict" setup>
|
||||
//ts语法
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicTable, TableAction } from '/src/components/Table';
|
||||
import { useDrawer } from '/src/components/Drawer';
|
||||
import { useModal } from '/src/components/Modal';
|
||||
import DictItemList from './components/DictItemList.vue';
|
||||
import DictModal from './components/DictModal.vue';
|
||||
import DictRecycleBinModal from './components/DictRecycleBinModal.vue';
|
||||
import { useMessage } from '/src/hooks/web/useMessage';
|
||||
import { removeAuthCache, setAuthCache } from '/src/utils/auth';
|
||||
import { columns, searchFormSchema } from './dict.data';
|
||||
import { list, deleteDict, batchDeleteDict, getExportUrl, getImportUrl, refreshCache, queryAllDictItems } from './dict.api';
|
||||
import { DB_DICT_DATA_KEY } from '/src/enums/cacheEnum';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
//字典model
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
//字典配置drawer
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
|
||||
//回收站model
|
||||
const [registerModal1, { openModal: openRecycleModal }] = useModal();
|
||||
|
||||
// 列表页面公共参数、方法
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
designScope: 'dict-template',
|
||||
tableProps: {
|
||||
title: '数据字典',
|
||||
api: list,
|
||||
columns: columns,
|
||||
formConfig: {
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 240,
|
||||
},
|
||||
},
|
||||
//update-begin---author:wangshuai ---date:20220616 for：[issues/I5AMDD]导入/导出功能，操作后提示没有传递 export.url/import.url 参数------------
|
||||
exportConfig: {
|
||||
name: '数据字典列表',
|
||||
url: getExportUrl,
|
||||
},
|
||||
importConfig: {
|
||||
url: getImportUrl,
|
||||
},
|
||||
//update-end---author:wangshuai ---date:20220616 for：[issues/I5AMDD]导入/导出功能，操作后提示没有传递 export.url/import.url 参数--------------
|
||||
});
|
||||
|
||||
//注册table数据
|
||||
const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
|
||||
/**
|
||||
* 新增事件
|
||||
*/
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 编辑事件
|
||||
*/
|
||||
async function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
async function handleDetail(record) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteDict({ id: record.id }, reload);
|
||||
}
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
async function batchHandleDelete() {
|
||||
await batchDeleteDict({ ids: selectedRowKeys.value }, reload);
|
||||
}
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess({ isUpdate, values }) {
|
||||
if (isUpdate) {
|
||||
updateTableDataRecord(values.id, values);
|
||||
} else {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 刷新缓存
|
||||
*/
|
||||
async function handlerRefreshCache() {
|
||||
const result = await refreshCache();
|
||||
if (result.success) {
|
||||
const res = await queryAllDictItems();
|
||||
removeAuthCache(DB_DICT_DATA_KEY);
|
||||
// update-begin--author:liaozhiyang---date:20230908---for：【QQYUN-6417】生产环境字典慢的问题
|
||||
const userStore = useUserStore();
|
||||
userStore.setAllDictItems(res.result);
|
||||
// update-end--author:liaozhiyang---date:20230908---for：【QQYUN-6417】生产环境字典慢的问题
|
||||
createMessage.success('刷新缓存完成！');
|
||||
} else {
|
||||
createMessage.error('刷新缓存失败！');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 字典配置
|
||||
*/
|
||||
function handleItem(record) {
|
||||
openDrawer(true, {
|
||||
id: record.id,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '字典配置',
|
||||
onClick: handleItem.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '确定删除吗?',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user