@ -1,21 +1,18 @@
@@ -1,21 +1,18 @@
< template >
< BasicDrawer
v - bind = "$attrs"
@ register = "registerDrawer"
showFooter
: title = "getTitle"
width = "500px"
@ ok = "handleSubmit"
< BasicDrawer v -bind = " $ attrs "
width = "500px"
showFooter
@ ok = "handleSubmit"
@ register = "registerDrawer"
>
< BasicForm @register ="registerForm" >
< template # menu = "{ model, field }" >
< BasicTree
v - model : value = "model[field]"
: treeData = "treeData"
: replaceFields = "{ title: 'name', key: 'id' }"
checkable
toolbar
title = "菜单分配"
< BasicTree v -model :value ="model[field]"
title = "菜单分配"
toolbar
checkable
: treeData = "state.menuTree"
: replaceFields = "{ title: 'name', key: 'id' }"
/ >
< / template >
< / BasicForm >
@ -26,20 +23,21 @@
@@ -26,20 +23,21 @@
* Copyright © 2020 - 2022 < a href = "http://www.entfrm.com/" > entfrm < / a > All rights reserved .
* author entfrm开发团队 - 王翔
* /
import { defineComponent , ref , computed , unref , reactive } from 'vue' ;
import { unref , reactive } from 'vue' ;
import { BasicForm , useForm } from '/@/components/Form/index' ;
import { formSchema } from './role.data' ;
import { BasicDrawer , useDrawerInner } from '/@/components/Drawer' ;
import { BasicDrawer , DrawerProps , useDrawerInner } from '/@/components/Drawer' ;
import { BasicTree , TreeItem } from '/@/components/Tree' ;
import { listMenu } from '/@/api/system/menu' ;
import { addRole , editRole , delRole } from '/@/api/system/role' ;
import { addRole , editRole , getRole } from '/@/api/system/role' ;
import { listToTree } from "/@/utils/helper/treeHelper" ;
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits ( [ 'success' , 'register' ] ) ;
const state = reactive ( {
/ / 操 作 标 签
tag : [ ] ,
tag : '' ,
/ / 菜 单 树 形 数 据
menuTree : [ ] as TreeItem [ ] ,
} ) ;
@ -51,34 +49,42 @@
@@ -51,34 +49,42 @@
baseColProps : { span : 24 }
} ) ;
const [ registerDrawer , { setDrawerProps , closeDrawer } ] = useDrawerInner ( async ( data ) => {
resetFields ( ) ;
setDrawerProps ( { confirmLoading : false } ) ;
/ / 需 要 在 s e t F i e l d s V a l u e 之 前 先 填 充 t r e e D a t a ， 否 则 T r e e 组 件 可 能 会 报 k e y n o t e x i s t 警 告
if ( unref ( treeData ) . length === 0 ) {
treeData . value = ( await getMenuList ( ) ) as any as TreeItem [ ] ;
}
isUpdate . value = ! ! data ? . isUpdate ;
if ( unref ( isUpdate ) ) {
setFieldsValue ( {
... data . record ,
} ) ;
const [ registerDrawer , { setDrawerProps , closeDrawer } ] = useDrawerInner ( async ( data : WindowInnerData = { _tag : '' } ) => {
await resetFields ( ) ;
await clearValidate ( ) ;
state . menuTree = listToTree ( await listMenu ( ) ) ;
state . tag = data . _tag ;
const roleId = data . record ? . id ;
const props : Partial < DrawerProps > = { confirmLoading : false } ;
switch ( unref ( state . tag ) ) {
case 'add' :
props . title = '新增角色' ;
break ;
case 'edit' :
props . title = '编辑角色' ;
await setFieldsValue ( await getRole ( { id : roleId } ) || { } ) ;
break ;
}
setDrawerProps ( props ) ;
} ) ;
const getTitle = computed ( ( ) => ( ! unref ( isUpdate ) ? '新增角色' : '编辑角色' ) ) ;
async function handleSubmit ( ) {
try {
const values = await validate ( ) ;
setDrawerProps ( { confirmLoading : true } ) ;
await roleSet ( values ) ;
closeDrawer ( ) ;
emit ( 'success' ) ;
} finally {
setDrawerProps ( { confirmLoading : false } ) ;
async function handleSubmit ( ) {
try {
const formData = await validate ( ) ;
setDrawerProps ( { confirmLoading : true } ) ;
switch ( unref ( state . tag ) ) {
case 'add' :
await addRole ( formData ) ;
break ;
case 'edit' :
await editRole ( formData ) ;
break ;
}
closeDrawer ( ) ;
emit ( 'success' ) ;
} finally {
setDrawerProps ( { confirmLoading : false } ) ;
}
}
< / script >
wangxiang
3 years ago