Browse Source

👣 编写基础模块字典

master
wangxiang 3 years ago
parent
commit
42c34afc83
  1. 91
      kicc-ui/src/views/system/dict/DictDataModal.vue
  2. 154
      kicc-ui/src/views/system/dict/DictDataTable.vue
  3. 4
      kicc-ui/src/views/system/dict/dict.data.ts
  4. 81
      kicc-ui/src/views/system/dict/dictdata.data.ts

91
kicc-ui/src/views/system/dict/DictDataModal.vue

@ -1,9 +1,6 @@
<template> <template>
<BasicModal <BasicModal v-bind="$attrs"
v-bind="$attrs" width="720px"
showFooter
:title="getTitle"
width="500px"
@register="registerModal" @register="registerModal"
@ok="handleSubmit" @ok="handleSubmit"
> >
@ -11,45 +8,71 @@
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref} from 'vue'; /**
import {BasicForm, useForm} from '/@/components/Form/index'; * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
import {formSchema} from './dictdata.data'; * 采用vben-动态表格表单封装组件编写,采用 setup 写法
//import {set} from '/@/api/platform/system/controller/dictdata'; * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
import {BasicModal, useModalInner} from '/@/components/Modal'; * author entfrm开发团队-王翔
*/
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './dictdata.data';
import { getDictData, addDictData, editDictData } from '/@/api/platform/system/controller/dictdata';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
const emit = defineEmits(['success', 'register']); /** 通用变量统一声明区域 */
const isUpdate = ref(true); const tag = ref<Nullable<string>>('');
const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({ /** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({
labelWidth: 100, labelWidth: 100,
schemas: formSchema, schemas: formSchema,
showActionButtonGroup: false, showActionButtonGroup: false,
}); baseColProps: { span: 24 }
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
await resetFields();
setModalProps({confirmLoading: false});
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
await setFieldsValue({
...data.record,
}); });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
//
await resetFields();
await clearValidate();
//
tag.value = data._tag;
const dictDataId = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false };
// tag
switch (unref(tag)) {
case 'add':
props.title = '新增字典数据';
break;
case 'edit':
props.title = '编辑字典数据';
await setFieldsValue(await getDictData(dictDataId));
break;
} }
}); // :
setModalProps(props);
const getTitle = computed(() => (!unref(isUpdate) ? '新增字典项' : '编辑字典项')); });
async function handleSubmit() { /** 处理弹出框提交 */
async function handleSubmit() {
try { try {
const values = await validate(); //
setModalProps({confirmLoading: true}); const formData = await validate();
//await set(values); //
setModalProps({ confirmLoading: true });
// tag
switch (unref(tag)) {
case 'add':
await addDictData(formData);
break;
case 'edit':
await editDictData(formData);
break;
}
//
closeModal(); closeModal();
emit('success'); emit('success');
} finally { } finally {
setModalProps({confirmLoading: false}); setModalProps({ confirmLoading: false });
}
} }
}
</script> </script>

154
kicc-ui/src/views/system/dict/DictDataTable.vue

@ -4,118 +4,168 @@
fixedHeight fixedHeight
contentClass="flex" contentClass="flex"
> >
<BasicTable @register="registerTable"> <BasicTable @register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleCreate">新增字典</a-button> <a-button v-auth="['dictData_add']"
type="primary"
@click="handleAdd()"
>新增字典数据</a-button>
<a-button v-auth="['dictData_edit']"
type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改字典数据</a-button>
<a-button v-auth="['dictData_del']"
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除字典数据</a-button>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<TableAction <TableAction :actions="[
:actions="[
{ {
icon: 'clarity:note-edit-line', label: '编辑',
onClick: handleEdit.bind(null, record), icon: 'fa6-regular:pen-to-square',
auth: ['dictData_edit'],
onClick: handleEdit.bind(null, record)
}, },
{ {
label: '删除',
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
auth: ['dictData_del'],
color: 'error', color: 'error',
popConfirm: { onClick: handleDel.bind(null, record)
title: '是否确认删除', }]"
confirm: handleDelete.bind(null, record),
},
},
]"
/> />
</template> </template>
</BasicTable> </BasicTable>
<DictDataModal @register="registerModal" @success="handleSuccess"/> <DictDataModal @register="registerModal" @success="handleRefreshTable"/>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, reactive } from 'vue'; /**
// * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,不采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔
*/
import {defineComponent, ref, reactive, toRaw} from 'vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
//
import { columns, searchFormSchema } from './dictdata.data'; import { columns, searchFormSchema } from './dictdata.data';
// API import { listDictData, delDictData } from '/@/api/platform/system/controller/dictdata';
//import { list, remove } from '/@/api/platform/system/controller/dictdata';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import DictDataModal from './DictDataModal.vue';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import DictDataModal from './DictDataModal.vue';
/** 类型规范统一声明定义区域 */
interface TableState {
dictType: String;
single: boolean;
multiple: boolean;
}
export default defineComponent({ export default defineComponent({
name: 'DictDataManagement',
components: { BasicTable, PageWrapper, DictDataModal, TableAction }, components: { BasicTable, PageWrapper, DictDataModal, TableAction },
setup() { setup() {
const { createMessage } = useMessage();
let dictType = ref<string>(''); /** 通用变量统一声明区域 */
let record = reactive({ const state = reactive<TableState>({
//
dictType: '', dictType: '',
parentId: 0, //
single: true,
//
multiple: true
}); });
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, setProps }] = useTable({ const [registerTable, { reload, setProps, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '>>字典项列表', title: '>>字典项列表',
//api: list, api: listDictData,
rowKey: 'id',
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true
}, },
rowSelection: { type: 'checkbox' },
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: true,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
actionColumn: { actionColumn: {
width: 80, width: 220,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, slots: { customRender: 'action' },
fixed: undefined, fixed: false
}, },
immediate: false, handleSearchInfoFn: () => clearSelectedRowKeys(),
immediate: false
}); });
function filterByDictType(records: Recordable) { /** 根据字典类型查找字典数据 */
setProps({ searchInfo: { dictType: records.type } }); function filterByDictType(dictType: string) {
record.dictType = records.type; setProps({ searchInfo: { dictType } });
record.parentId = records.id; state.dictType = dictType;
reload(); reload();
} }
function handleCreate() { /** 处理多选框选中数据 */
openModal(true, { function handleSelectionChange(selection?: Recordable) {
record, const rowSelection = toRaw(selection?.keys) || [];
isUpdate: true, state.single = rowSelection.length != 1;
}); state.multiple = !rowSelection.length;
} }
function handleEdit(record: Recordable) {
openModal(true, { /** 新增按钮操作,行内新增与工具栏局域新增通用 */
record, function handleAdd() {
isUpdate: true, openModal(true,{ _tag: 'add' });
});
} }
async function handleDelete(record: Recordable) { /** 编辑按钮操作,行内编辑 */
//await remove({ id: record.id }); function handleEdit(record?: Recordable) {
record = record || { id: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const ids = record?.id || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除字典数据编号为${ids}字典数据吗?`,
onOk: async () => {
await delDictData(ids);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
handleSuccess(); handleRefreshTable();
}
});
} }
function handleSuccess() { /** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload(); reload();
} }
return { return {
state,
registerTable, registerTable,
registerModal, registerModal,
handleCreate, handleAdd,
handleEdit, handleEdit,
handleDelete, handleDel,
handleSuccess, handleRefreshTable,
filterByDictType, filterByDictType,
dictType handleSelectionChange
}; };
}, }
}); });
</script> </script>

4
kicc-ui/src/views/system/dict/dict.data.ts

@ -92,18 +92,21 @@ export const formSchema: FormSchema[] = [
field: 'name', field: 'name',
label: '字典名称', label: '字典名称',
component: 'Input', component: 'Input',
required: true,
colProps:{ span: 12 } colProps:{ span: 12 }
}, },
{ {
field: 'type', field: 'type',
label: '字典类型', label: '字典类型',
component: 'Input', component: 'Input',
required: true,
colProps:{ span: 12 } colProps:{ span: 12 }
}, },
{ {
field: 'isSys', field: 'isSys',
label: '系统内置', label: '系统内置',
component: 'Select', component: 'Select',
required: true,
defaultValue: '0', defaultValue: '0',
componentProps: { componentProps: {
options: [ options: [
@ -117,6 +120,7 @@ export const formSchema: FormSchema[] = [
field: 'status', field: 'status',
label: '状态', label: '状态',
component: 'Select', component: 'Select',
required: true,
defaultValue: '0', defaultValue: '0',
componentProps: { componentProps: {
options: [ options: [

81
kicc-ui/src/views/system/dict/dictdata.data.ts

@ -1,82 +1,107 @@
import {BasicColumn} from '/@/components/Table'; /**
import {FormSchema} from '/@/components/Table'; * @program: kicc-ui
* @description:
* @author: entfrm开发团队-
* @create: 2022/5/8
*/
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
/** 表格列配置 */
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '字典ID', title: '字典数据类型',
dataIndex: 'id', dataIndex: 'dictType'
width: 100,
},
{
title: '字典类型',
dataIndex: 'dictType',
width: 100,
}, },
{ {
title: '字典标签', title: '字典数据标签',
dataIndex: 'label', dataIndex: 'label'
width: 130,
}, },
{ {
title: '字典键值', title: '字典数据键值',
dataIndex: 'value', dataIndex: 'value'
width: 90,
}, },
{ {
title: '字典排序', title: '字典数据排序',
dataIndex: 'sort', dataIndex: 'sort'
width: 90,
} }
]; ];
/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
{ {
field: 'dataType', field: 'dataType',
label: '字典参数类型', label: '字典类型',
component: 'Input', component: 'Input',
componentProps: { componentProps: {
placeholder: '请输入字典参数类型', placeholder: '请输入字典类型'
}, },
colProps: {span: 16}, colProps: { span: 12 }
},
{
field: 'dataType',
label: '字典数据标签',
component: 'Input',
componentProps: {
placeholder: '请输入字典数据标签'
},
colProps: { span: 12 }
} }
]; ];
/** 表单配置 */
export const formSchema: FormSchema[] = [ export const formSchema: FormSchema[] = [
{ {
field: 'id', field: 'id',
label: 'ID', label: 'ID',
component: 'Input', component: 'Input',
show: false, show: false
}, },
{ {
field: 'dictType', field: 'dictType',
label: '字典类型', label: '字典类型',
component: 'Input', component: 'Input',
required: true, required: true,
componentProps: {disabled: true} componentProps: { disabled: true },
colProps:{ span: 12 }
}, },
{ {
field: 'label', field: 'label',
label: '字典标签', label: '字典标签',
component: 'Input', component: 'Input',
required: true required: true,
colProps:{ span: 12 }
}, },
{ {
field: 'value', field: 'value',
label: '字典键值', label: '字典键值',
component: 'Input', component: 'Input',
required: true required: true,
colProps:{ span: 12 }
}, },
{ {
field: 'sort', field: 'sort',
label: '排序', label: '排序',
component: 'InputNumber', component: 'InputNumber',
componentProps: {
style: { width:'100%' },
min: 0
},
required: true,
colProps: {
span: 12
}
}, },
{ {
field: 'remark', field: 'remark',
label: '备注', label: '备注',
component: 'InputTextArea', component: 'InputTextArea',
componentProps: {
rows: 6
},
colProps: {
span: 24
}
} }
]; ];
Loading…
Cancel
Save