Browse Source

👣 制定团队规则,提供菜单参考代码规范模板

master
wangxiang 3 years ago
parent
commit
f8041f88f4
  1. 20
      kicc-ui/src/views/system/menu/MenuModal.vue
  2. 23
      kicc-ui/src/views/system/menu/index.vue
  3. 10
      kicc-ui/src/views/system/menu/menu.data.ts
  4. 1
      kicc-ui/src/views/system/role/RoleDrawer.vue
  5. 2
      kicc-ui/src/views/system/role/role.data.ts
  6. 2
      kicc-ui/src/views/system/user/UserModal.vue

20
kicc-ui/src/views/system/menu/MenuModal.vue

@ -9,6 +9,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/** /**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔 * author entfrm开发团队-王翔
*/ */
@ -19,21 +21,22 @@
import { listMenu, addMenu, editMenu, getMenu } from '/@/api/system/menu'; import { listMenu, addMenu, editMenu, getMenu } from '/@/api/system/menu';
import { listToTree } from '/@/utils/helper/treeHelper'; import { listToTree } from '/@/utils/helper/treeHelper';
/** 通用变量统一声明区域 */
const tag = ref('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */ /** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const tag = ref('');
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({ const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
labelWidth: 100, labelWidth: 100,
schemas: formSchema, schemas: formSchema,
showActionButtonGroup: false, showActionButtonGroup: false,
baseColProps: { span: 24 } baseColProps: { span: 24 }
}); });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
//
await resetFields(); await resetFields();
await clearValidate(); await clearValidate();
//
tag.value = data._tag;
const topMenu = { id: '0', name: '顶级菜单', children: [] }; const topMenu = { id: '0', name: '顶级菜单', children: [] };
topMenu.children = listToTree(await listMenu()); topMenu.children = listToTree(await listMenu());
await updateSchema({ await updateSchema({
@ -42,9 +45,9 @@
treeData: [topMenu] treeData: [topMenu]
} }
}); });
tag.value = data._tag;
const menuId = data.record?.id; const menuId = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false }; const props: Partial<ModalProps> = { confirmLoading: false };
// tag
switch (unref(tag)) { switch (unref(tag)) {
case 'add': case 'add':
props.title = '新增菜单'; props.title = '新增菜单';
@ -55,13 +58,18 @@
await setFieldsValue(await getMenu(menuId)); await setFieldsValue(await getMenu(menuId));
break; break;
} }
// :
setModalProps(props); setModalProps(props);
}); });
/** 处理弹出框提交 */
async function handleSubmit() { async function handleSubmit() {
try { try {
//
const formData = await validate(); const formData = await validate();
//
setModalProps({ confirmLoading: true }); setModalProps({ confirmLoading: true });
// tag
switch (unref(tag)) { switch (unref(tag)) {
case 'add': case 'add':
await addMenu(formData); await addMenu(formData);
@ -70,10 +78,12 @@
await editMenu(formData); await editMenu(formData);
break; break;
} }
//
closeModal(); closeModal();
emit('success'); emit('success');
} finally { } finally {
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
} }
} }
</script> </script>

23
kicc-ui/src/views/system/menu/index.vue

@ -25,7 +25,7 @@
label: '新增', label: '新增',
icon: 'ant-design:plus-circle-outlined', icon: 'ant-design:plus-circle-outlined',
auth: ['menu_add'], auth: ['menu_add'],
onClick: handleAdd.bind(null, record), onClick: handleAdd.bind(null, record)
}, },
{ {
label: '删除', label: '删除',
@ -34,17 +34,19 @@
color: 'error', color: 'error',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
confirm: handleDel.bind(null, record), confirm: handleDel.bind(null, record)
}, }
}]" }]"
/> />
</template> </template>
</BasicTable> </BasicTable>
<MenuModal @register="registerModal" @success="handleSuccess"/> <MenuModal @register="registerModal" @success="handleRefreshTable"/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/** /**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔 * author entfrm开发团队-王翔
*/ */
@ -57,15 +59,18 @@
import { convertDateRange } from '/@/utils/dateUtil'; import { convertDateRange } from '/@/utils/dateUtil';
import MenuModal from './MenuModal.vue'; import MenuModal from './MenuModal.vue';
/** 通用变量统一声明区域 */
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, expandAll,collapseAll }] = useTable({ const [registerTable, { reload, expandAll, collapseAll }] = useTable({
title: '菜单列表', title: '菜单列表',
api: listMenu, api: listMenu,
rowKey: 'id',
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema schemas: searchFormSchema,
autoSubmitOnEnter: true
}, },
isTreeTable: true, isTreeTable: true,
pagination: false, pagination: false,
@ -100,11 +105,11 @@
async function handleDel(record: Recordable) { async function handleDel(record: Recordable) {
await delMenu(record.id); await delMenu(record.id);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
handleSuccess(); handleRefreshTable();
} }
/** 处理表单提交成功 */ /** 处理表格刷新 */
function handleSuccess() { function handleRefreshTable() {
reload(); reload();
} }

10
kicc-ui/src/views/system/menu/menu.data.ts

@ -11,6 +11,10 @@ import { h } from 'vue';
import { Tag } from 'ant-design-vue'; import { Tag } from 'ant-design-vue';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
/** 通用变量统一声明区域 */
const isMenu = (type: string) => type === 'C';
const isButton = (type: string) => type === 'F';
/** 表格列配置 */ /** 表格列配置 */
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
@ -65,11 +69,7 @@ export const columns: BasicColumn[] = [
} }
]; ];
/** 菜单类型 */ /** 搜索表单配置 */
const isMenu = (type: string) => type === 'C';
/** 按钮类型 */
const isButton = (type: string) => type === 'F';
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
{ {
field: 'name', field: 'name',

1
kicc-ui/src/views/system/role/RoleDrawer.vue

@ -74,6 +74,7 @@
setDrawerProps(props); setDrawerProps(props);
}); });
/** 处理弹出框提交 */
async function handleSubmit() { async function handleSubmit() {
try { try {
// //

2
kicc-ui/src/views/system/role/role.data.ts

@ -23,7 +23,7 @@ export const columns: BasicColumn[] = [
width: 200 width: 200
}, },
{ {
title: '显示顺序', title: '角色排序',
dataIndex: 'sort', dataIndex: 'sort',
width: 200 width: 200
}, },

2
kicc-ui/src/views/system/user/UserModal.vue

@ -80,7 +80,7 @@
setModalProps(props); setModalProps(props);
}); });
/** 处理模态框提交 */ /** 处理弹出框提交 */
async function handleSubmit() { async function handleSubmit() {
try { try {
// //

Loading…
Cancel
Save