kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🎨 修复菜单授权bug

master
wangxiang 3 years ago
parent
cf22cbc2e8
commit
75c3892b9e
3 changed files with 132 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      src/views/common/project/ProjectModal.vue
  2. 125
      src/views/common/project/index.vue
  3. 6
      src/views/common/project/project.data.ts

135
src/views/common/project/ProjectModal.vue
Unescape View File

@ -8,82 +8,81 @@
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/** /**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 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开发团队-王翔
*/ */
import { ref, unref } from 'vue'; import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form'; import { BasicForm, useForm } from '/@/components/Form';
import { formSchema } from './project.data'; import { formSchema } from './project.data';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import {listProject, addProject, editProject, getProject} from '/@/api/platform/common/controller/project'; import {listProject, addProject, editProject, getProject} from '/@/api/platform/common/controller/project';
import { listToTree } from '/@/utils/helper/treeHelper'; import { listToTree } from '/@/utils/helper/treeHelper';
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>(''); const tag = ref<Nullable<string>>('');
/** 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 [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: '' }) => {
// 处理清除脏数据
await resetFields();
await clearValidate();
// 处理设置数据
tag.value = data._tag;
const topProject = { projectId: '0', name: '顶级项目', children: [] };
topProject.children = listToTree(await listProject());
await updateSchema({
field: 'parentId',
componentProps: {
treeData: [topProject]
}
}); });
const projectId = data.record?.projectId; const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
const props: Partial<ModalProps> = { confirmLoading: false }; // 处理清除脏数据
// 采用tag标签区分操作 await resetFields();
switch (unref(tag)) { await clearValidate();
case 'add': // 处理设置数据
props.title = '新增项目'; tag.value = data._tag;
projectId && await setFieldsValue({ parentId: projectId }); const topProject = { id: '0', name: '顶级项目', children: [] };
break; topProject.children = listToTree(await listProject());
case 'edit': await updateSchema({
props.title = '编辑项目'; field: 'parentId',
await setFieldsValue(await getProject(projectId)); componentProps: {
break; treeData: [topProject]
} }
// 尾部:设置处理后的最终配置数据 });
setModalProps(props); const id = data.record?.id;
}); const props: Partial<ModalProps> = { confirmLoading: false };
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作 // 采用tag标签区分操作
switch (unref(tag)) { switch (unref(tag)) {
case 'add': case 'add':
await addProject(formData); props.title = '新增项目';
id && await setFieldsValue({ parentId: id });
break; break;
case 'edit': case 'edit':
await editProject(formData); props.title = '编辑项目';
await setFieldsValue(await getProject(id));
break; break;
} }
// 处理提交完成之后逻辑 // 尾部:设置处理后的最终配置数据
closeModal(); setModalProps(props);
emit('success'); });
} finally {
setModalProps({ confirmLoading: false });
}
}
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addProject(formData);
break;
case 'edit':
await editProject(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script> </script>

125
src/views/common/project/index.vue
Unescape View File

@ -1,4 +1,3 @@
<template> <template>
<div> <div>
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
@ -45,72 +44,72 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/** /**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 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开发团队-王翔
*/ */
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import DeptModal from './ProjectModal.vue'; import DeptModal from './ProjectModal.vue';
import { columns, searchFormSchema } from './project.data'; import { columns, searchFormSchema } from './project.data';
import {delProject, getProject, listProject} from '/@/api/platform/common/controller/project'; import {delProject, getProject, listProject} from '/@/api/platform/common/controller/project';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { listToTree } from '/@/utils/helper/treeHelper'; import { listToTree } from '/@/utils/helper/treeHelper';
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
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: listProject, api: listProject,
rowKey: 'projectId', rowKey: 'id',
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']] fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
}, },
isTreeTable: true, isTreeTable: true,
pagination: false, pagination: false,
striped: false, striped: false,
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: true,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
canResize: false, canResize: false,
actionColumn: { actionColumn: {
width: 250, width: 250,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, slots: { customRender: 'action' },
fixed: false fixed: false
}, },
afterFetch: (result) => listToTree(result, { id: 'projectId' }) afterFetch: (result) => listToTree(result)
}); });
/** 新增按钮操作,行内新增与工具栏局域新增通用 */ /** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd(record?: Recordable) { function handleAdd(record?: Recordable) {
openModal(true,{ _tag: 'add', record }); openModal(true,{ _tag: 'add', record });
} }
/** 编辑按钮操作,行内编辑 */ /** 编辑按钮操作,行内编辑 */
function handleEdit(record: Recordable) { function handleEdit(record: Recordable) {
openModal(true, { _tag: 'edit', record }); openModal(true, { _tag: 'edit', record });
} }
/** 删除按钮操作,行内删除 */ /** 删除按钮操作,行内删除 */
async function handleDel(record: Recordable) { async function handleDel(record: Recordable) {
await delProject(record.projectId); await delProject(record.id);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
handleRefreshTable(); handleRefreshTable();
} }
/** 处理表格刷新 */ /** 处理表格刷新 */
function handleRefreshTable() { function handleRefreshTable() {
reload(); reload();
} }
</script> </script>

6
src/views/common/project/project.data.ts
Unescape View File

@ -84,7 +84,7 @@ export const searchFormSchema: FormSchema[] = [
/** 表单配置 */ /** 表单配置 */
export const formSchema: FormSchema[] = [ export const formSchema: FormSchema[] = [
{ {
field: 'projectId', field: 'id',
label: 'ID', label: 'ID',
component: 'Input', component: 'Input',
show: false show: false
@ -97,8 +97,8 @@ export const formSchema: FormSchema[] = [
componentProps: { componentProps: {
replaceFields: { replaceFields: {
title: 'name', title: 'name',
key: 'projectId', key: 'id',
value: 'projectId', value: 'id',
}, },
getPopupContainer: () => document.body, getPopupContainer: () => document.body,
} }

Write Preview
Loading…
Cancel
Save