You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.9 KiB
116 lines
3.9 KiB
<template> |
|
<BasicModal v-bind="$attrs" |
|
width="720px" |
|
@ok="handleSubmit" |
|
@register="registerModal" |
|
> |
|
<BasicForm @register="registerForm"/> |
|
</BasicModal> |
|
</template> |
|
<script lang="ts"> |
|
/** |
|
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
|
* 采用vben-动态表格表单封装组件编写,不采用 setup 写法 |
|
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. |
|
* author entfrm开发团队-王翔 |
|
*/ |
|
import {defineComponent, reactive, toRaw } from 'vue'; |
|
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|
import { BasicForm, useForm } from '/@/components/Form/index'; |
|
import { userFormSchema } from './user.data'; |
|
import { listDept } from '/@/api/controller/system/dept'; |
|
import { addUser, editUser, getUser } from '/@/api/controller/system/user'; |
|
import { listToTree } from "/@/utils/helper/treeHelper"; |
|
import { ModalProps } from "/@/components/Modal"; |
|
import { findListNameById } from '/@/utils'; |
|
import { TreeItem } from "/@/components/Tree"; |
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
|
|
export default defineComponent({ |
|
name: 'UserModal', |
|
components: { BasicModal, BasicForm }, |
|
emits: ['success', 'register'], |
|
setup(props, { emit }) { |
|
|
|
/** 通用变量统一声明区域 */ |
|
const state = reactive({ |
|
// 操作标签 |
|
tag: '', |
|
// 部门树形数据 |
|
deptTree: [] as TreeItem[], |
|
}); |
|
const { createMessage } = useMessage(); |
|
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({ |
|
labelWidth: 100, |
|
schemas: userFormSchema, |
|
showActionButtonGroup: false, |
|
actionColOptions: { span: 24 } |
|
}); |
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => { |
|
// 处理清除脏数据 |
|
await resetFields(); |
|
await clearValidate(); |
|
// 处理设置数据 |
|
state.tag = data._tag; |
|
state.deptTree = listToTree(await listDept()); |
|
const userId = data.record?.id; |
|
const props: Partial<ModalProps> = { confirmLoading: false }; |
|
await updateSchema([ |
|
{ |
|
field: 'deptId', |
|
componentProps: { treeData: toRaw(state.deptTree) } |
|
}, |
|
{ |
|
field: 'password', |
|
show: state.tag == 'add' |
|
} |
|
]); |
|
// 采用tag标签区分操作 |
|
switch (state.tag) { |
|
case 'add': |
|
props.title = '新增用户'; |
|
break; |
|
case 'edit': |
|
props.title = '编辑用户'; |
|
const result = await getUser(userId); |
|
await setFieldsValue(result.result); |
|
break; |
|
} |
|
// 尾部:设置处理后的最终配置数据 |
|
setModalProps(props); |
|
}); |
|
|
|
/** 处理弹出框提交 */ |
|
async function handleSubmit() { |
|
try { |
|
// 提取验证数据 |
|
const formData = await validate(); |
|
// 处理提交之前逻辑 |
|
setModalProps({ confirmLoading: true }); |
|
formData.deptName = findListNameById(formData.deptId, toRaw(state.deptTree), { idField: 'deptId' }); |
|
if (!formData.deptName) return createMessage.error('部门名称数据为空,请重试!'); |
|
// 采用tag标签区分操作 |
|
switch (state.tag) { |
|
case 'add': |
|
await addUser(formData); |
|
break; |
|
case 'edit': |
|
await editUser(formData); |
|
break; |
|
} |
|
// 处理提交完成之后逻辑 |
|
closeModal(); |
|
emit('success'); |
|
} finally { |
|
setModalProps({ confirmLoading: false }); |
|
} |
|
} |
|
|
|
return { |
|
registerModal, |
|
registerForm, |
|
handleSubmit |
|
}; |
|
} |
|
}); |
|
</script>
|
|
|