snowy/snowy-admin-web/src/views/biz/org/form.vue

175 lines
4.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<a-drawer
:title="formData.id ? '编辑机构' : '增加机构'"
:width="500"
:visible="visible"
:destroy-on-close="true"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
@close="onClose"
>
<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
<a-form-item label="上级机构:" name="parentId">
<a-tree-select
v-model:value="formData.parentId"
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择上级机构"
allow-clear
tree-default-expand-all
:tree-data="treeData"
:field-names="{
children: 'children',
label: 'name',
value: 'id'
}"
selectable="false"
tree-line
></a-tree-select>
</a-form-item>
<a-form-item label="机构名称:" name="name">
<a-input v-model:value="formData.name" placeholder="请输入机构名称" allow-clear />
</a-form-item>
<a-form-item label="机构分类:" name="category">
<a-select
v-model:value="formData.category"
:options="orgCategoryOptions"
style="width: 100%"
placeholder="请选择机构分类"
>
</a-select>
</a-form-item>
<a-form-item label="排序:" name="sortCode">
<a-input-number style="width: 100%" v-model:value="formData.sortCode" :max="100" />
</a-form-item>
<a-form-item label="指定主管:" name="directorId">
<a-button type="link" style="padding-left: 0px" @click="openSelector(formData.directorId)"></a-button>
<a-tag v-if="formData.directorId && extJson.length > 0" color="orange" closable @close="closeUserTag">{{
extJson[0].name
}}</a-tag>
<a-input v-show="false" v-model:value="formData.directorId" />
</a-form-item>
</a-form>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
</template>
<user-selector-plus
ref="UserSelectorPlus"
page-url="/biz/org/userSelector"
org-url="/biz/org/orgTreeSelector"
:radio-model="true"
@onBack="userBack"
/>
</a-drawer>
</template>
<script setup name="bizOrgForm">
import { required } from '@/utils/formRules'
import bizOrgApi from '@/api/biz/bizOrgApi'
import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
import tool from '@/utils/tool'
// emit
const emit = defineEmits({ successful: null })
//
let visible = $ref(false)
let UserSelectorPlus = ref()
const formRef = ref()
//
const formData = ref({})
//
const treeData = ref([])
const extJson = ref([])
const submitLoading = ref(false)
//
const onOpen = (record, parentId) => {
visible = true
extJson.value = ref([])
formData.value = {
sortCode: 99
}
if (parentId) {
formData.value.parentId = parentId
}
if (record) {
const param = {
id: record.id
}
bizOrgApi.orgDetail(param).then((data) => {
formData.value = Object.assign({}, data)
extJson.value = JSON.parse(formData.value.extJson) || []
})
}
// 获取机构树并加入顶级
bizOrgApi.orgTree().then((res) => {
treeData.value = [
{
id: 0,
parentId: '-1',
name: '顶级',
children: res
}
]
})
}
// 关闭抽屉
const onClose = () => {
visible = false
}
// 默认要校验的
const formRules = {
name: [required('请输入机构名称')],
category: [required('请选择机构分类')],
sortCode: [required('请选择排序')]
}
// 机构分类字典
const orgCategoryOptions = tool.dictList('ORG_CATEGORY')
// 打开人员选择器,选择主管
const openSelector = (id) => {
let checkedUserIds = []
checkedUserIds.push(id)
UserSelectorPlus.value.showUserPlusModal(checkedUserIds)
}
// 人员选择器回调
const userBack = (value) => {
extJson.value = value
if (value.length > 0) {
formData.value.directorId = value[0].id
} else {
formData.value.directorId = ''
}
}
// 通过小标签删除主管
const closeUserTag = () => {
extJson.value = []
formData.value.directorId = ''
}
// 验证并提交数据
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
submitLoading.value = true
formData.value.extJson = JSON.stringify(extJson.value)
bizOrgApi
.submitForm(formData.value, !formData.value.id)
.then(() => {
visible = false
emit('successful')
})
.finally(() => {
submitLoading.value = false
})
})
.catch(() => {})
}
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
onOpen
})
</script>
<style scoped></style>