Browse Source

👣 编写基础模块字典

master
wangxiang 3 years ago
parent
commit
a141306716
  1. 70
      kicc-ui/src/views/system/dict/DictModal.vue
  2. 14
      kicc-ui/src/views/system/dict/index.vue

70
kicc-ui/src/views/system/dict/DictModal.vue

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

14
kicc-ui/src/views/system/dict/index.vue

@ -67,7 +67,6 @@
/** 类型规范统一声明定义区域 */ /** 类型规范统一声明定义区域 */
interface TableState { interface TableState {
ids: string[];
single: boolean; single: boolean;
multiple: boolean; multiple: boolean;
} }
@ -80,8 +79,6 @@
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
const dictSubRef = ref(); const dictSubRef = ref();
const state = reactive<TableState>({ const state = reactive<TableState>({
//
ids: [],
// //
single: true, single: true,
// //
@ -89,7 +86,7 @@
}); });
const { createConfirm, createMessage } = useMessage(); const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({ const [registerTable, { reload, clearSelectedRowKeys, getSelectRows }] = useTable({
title: '字典列表', title: '字典列表',
api: listDict, api: listDict,
rowKey: 'id', rowKey: 'id',
@ -117,7 +114,6 @@
/** 处理多选框选中数据 */ /** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) { function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || []; const rowSelection = toRaw(selection?.keys) || [];
state.ids = rowSelection;
state.single = rowSelection.length != 1; state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length; state.multiple = !rowSelection.length;
} }
@ -129,19 +125,19 @@
/** 编辑按钮操作,行内编辑 */ /** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) { function handleEdit(record?: Recordable) {
record = record || { id: toRaw(state.ids) }; record = record || { id: getSelectRows().map(item => item.id) };
openModal(true, { _tag: 'edit', record }); openModal(true, { _tag: 'edit', record });
} }
/** 删除按钮操作,行内删除 */ /** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) { async function handleDel(record?: Recordable) {
const ids = record?.id || toRaw(state.ids); const types = record?.type || getSelectRows().map(item => item.type);
createConfirm({ createConfirm({
iconType: 'warning', iconType: 'warning',
title: '警告', title: '警告',
content: `是否确认删除角色编号为${ids}角色吗?`, content: `是否确认删除字典类型为${types}字典吗?`,
onOk: async () => { onOk: async () => {
//await delRole(ids); await delDict(types);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
handleRefreshTable(); handleRefreshTable();
} }

Loading…
Cancel
Save