|
| 1 | +<template> |
| 2 | + <a-modal |
| 3 | + :title="title" |
| 4 | + :visible="visible" |
| 5 | + :mask-closable="false" |
| 6 | + :body-style="{ paddingBottom: '8px' }" |
| 7 | + :confirm-loading="submitLoading" |
| 8 | + @ok="handleSubmit" |
| 9 | + @cancel="handleClose" |
| 10 | + > |
| 11 | + <a-form :model="formModel" :label-col="labelCol" :wrapper-col="wrapperCol"> |
| 12 | + <a-form-item v-if="isUpdateForm" style="display: none"> |
| 13 | + <a-input v-model:value="formModel.id" /> |
| 14 | + </a-form-item> |
| 15 | + |
| 16 | + <a-form-item label="父级组织" v-bind="validateInfos.parentId"> |
| 17 | + <sys-organization-tree-select |
| 18 | + v-model:value="formModel.parentId" |
| 19 | + placeholder="父级组织" |
| 20 | + :tree-data="hasRootOrganizationTree" |
| 21 | + tree-default-expand-all |
| 22 | + allow-clear |
| 23 | + /> |
| 24 | + </a-form-item> |
| 25 | + |
| 26 | + <a-form-item label="组织名称" v-bind="validateInfos.name"> |
| 27 | + <a-input v-model:value="formModel.name" placeholder="组织名称" /> |
| 28 | + </a-form-item> |
| 29 | + |
| 30 | + <a-form-item label="排序"> |
| 31 | + <a-input-number |
| 32 | + v-model:value="formModel.sort" |
| 33 | + style="width: 60%" |
| 34 | + placeholder="按数值由小到大升序" |
| 35 | + /> |
| 36 | + </a-form-item> |
| 37 | + |
| 38 | + <a-form-item label="备注信息" v-bind="validateInfos.remarks"> |
| 39 | + <a-textarea |
| 40 | + v-model:value="formModel.remarks" |
| 41 | + placeholder="备注信息" |
| 42 | + :rows="3" |
| 43 | + :max-length="512" |
| 44 | + /> |
| 45 | + </a-form-item> |
| 46 | + </a-form> |
| 47 | + </a-modal> |
| 48 | +</template> |
| 49 | + |
| 50 | +<script setup lang="ts"> |
| 51 | +import SysOrganizationTreeSelect from './SysOrganizationTreeSelect.vue' |
| 52 | +import { useModal } from '@/hooks/modal' |
| 53 | +import type { FormRequestMapping } from '@/hooks/form' |
| 54 | +import { FormAction, useAdminForm, useFormAction, labelCol, wrapperCol } from '@/hooks/form' |
| 55 | +import { overrideProperties } from '@/utils/bean-utils' |
| 56 | +import type { |
| 57 | + SysOrganizationTree, |
| 58 | + SysOrganizationVO, |
| 59 | + SysOrganizationDTO |
| 60 | +} from '@/api/system/organization/types' |
| 61 | +import { createOrganization, updateOrganization } from '@/api/system/organization' |
| 62 | +
|
| 63 | +const emits = defineEmits<{ |
| 64 | + (e: 'submit-success'): void |
| 65 | +}>() |
| 66 | +
|
| 67 | +const props = defineProps<{ |
| 68 | + organizationTree: SysOrganizationTree[] |
| 69 | +}>() |
| 70 | +
|
| 71 | +const hasRootOrganizationTree = computed(() => [ |
| 72 | + { id: 0, key: 0, name: '根组织', children: props.organizationTree } |
| 73 | +]) |
| 74 | +
|
| 75 | +const { title, visible, openModal, closeModal } = useModal() |
| 76 | +
|
| 77 | +const { formAction, isUpdateForm } = useFormAction() |
| 78 | +
|
| 79 | +// 表单的提交请求 |
| 80 | +const formRequestMapping: FormRequestMapping<SysOrganizationDTO> = { |
| 81 | + [FormAction.CREATE]: createOrganization, |
| 82 | + [FormAction.UPDATE]: updateOrganization |
| 83 | +} |
| 84 | +
|
| 85 | +// 表单模型 |
| 86 | +const formModel = reactive<SysOrganizationDTO>({ |
| 87 | + id: undefined, |
| 88 | + parentId: 0, |
| 89 | + name: '', |
| 90 | + sort: 1, |
| 91 | + remarks: '' |
| 92 | +}) |
| 93 | +
|
| 94 | +// 表单的校验规则 |
| 95 | +const formRule = reactive({ |
| 96 | + parentId: [ |
| 97 | + { |
| 98 | + required: true, |
| 99 | + type: 'number', |
| 100 | + message: '请选择父级组织' |
| 101 | + } |
| 102 | + ], |
| 103 | + name: [{ required: true, message: '请输入组织名称!' }], |
| 104 | + remarks: [{ max: 512 }] |
| 105 | +}) |
| 106 | +
|
| 107 | +const { submitLoading, validateAndSubmit, resetFields, validate, validateInfos } = useAdminForm( |
| 108 | + formAction, |
| 109 | + formRequestMapping, |
| 110 | + formModel, |
| 111 | + formRule |
| 112 | +) |
| 113 | +
|
| 114 | +/* 表单提交处理 */ |
| 115 | +const handleSubmit = () => { |
| 116 | + const model = { ...formModel } |
| 117 | + validateAndSubmit(model, () => { |
| 118 | + closeModal() |
| 119 | + emits('submit-success') |
| 120 | + }) |
| 121 | +} |
| 122 | +
|
| 123 | +/* 弹窗关闭方法 */ |
| 124 | +const handleClose = () => { |
| 125 | + closeModal() |
| 126 | + submitLoading.value = false |
| 127 | +} |
| 128 | +
|
| 129 | +defineExpose({ |
| 130 | + open(newFormAction: FormAction, record?: SysOrganizationVO) { |
| 131 | + openModal() |
| 132 | + resetFields() |
| 133 | + formAction.value = newFormAction |
| 134 | + if (newFormAction === FormAction.CREATE) { |
| 135 | + title.value = '新建组织' |
| 136 | + } else { |
| 137 | + title.value = '修改组织' |
| 138 | + overrideProperties(formModel, record) |
| 139 | + } |
| 140 | + } |
| 141 | +}) |
| 142 | +</script> |
| 143 | + |
| 144 | +<script lang="ts"> |
| 145 | +export default { |
| 146 | + name: 'SysOrganizationFormModal' |
| 147 | +} |
| 148 | +</script> |
| 149 | + |
| 150 | +<style scoped></style> |
0 commit comments