admin-vben5/apps/web-antd/src/views/system/post/post-drawer.vue

114 lines
2.8 KiB
Vue
Raw Normal View History

2024-09-13 15:27:29 +08:00
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
2024-09-25 14:46:02 +08:00
import { addFullName, cloneDeep } from '@vben/utils';
2024-09-13 15:27:29 +08:00
2024-10-17 15:16:22 +08:00
import { useVbenForm } from '#/adapter/form';
2024-09-23 08:48:37 +08:00
import { postAdd, postInfo, postUpdate } from '#/api/system/post';
2024-09-13 15:27:29 +08:00
import { getDeptTree } from '#/api/system/user';
2025-04-12 10:38:14 +08:00
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
2024-09-13 15:27:29 +08:00
import { drawerSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
2024-10-03 15:37:14 +08:00
componentProps: {
class: 'w-full',
},
2024-10-06 10:06:50 +08:00
labelWidth: 80,
2024-09-13 15:27:29 +08:00
},
schema: drawerSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
2024-09-23 08:48:37 +08:00
async function setupDeptSelect() {
2024-09-13 15:27:29 +08:00
const deptTree = await getDeptTree();
// 选中后显示在输入框的值 即父节点 / 子节点
addFullName(deptTree, 'label', ' / ');
2024-09-23 08:48:37 +08:00
formApi.updateSchema([
{
componentProps: {
fieldNames: { label: 'label', value: 'id' },
treeData: deptTree,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
},
fieldName: 'deptId',
},
]);
2024-09-13 15:27:29 +08:00
}
2025-04-12 10:38:14 +08:00
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
2024-09-13 15:27:29 +08:00
const [BasicDrawer, drawerApi] = useVbenDrawer({
2025-04-12 10:38:14 +08:00
onBeforeClose,
onClosed: handleClosed,
2024-09-13 15:27:29 +08:00
onConfirm: handleConfirm,
async onOpenChange(isOpen) {
if (!isOpen) {
return null;
}
drawerApi.drawerLoading(true);
2024-09-25 14:46:02 +08:00
const { id } = drawerApi.getData() as { id?: number | string };
isUpdate.value = !!id;
2024-09-13 15:27:29 +08:00
// 初始化
2024-09-23 08:48:37 +08:00
await setupDeptSelect();
2024-09-13 15:27:29 +08:00
// 更新 && 赋值
2024-09-25 14:46:02 +08:00
if (isUpdate.value && id) {
2024-09-23 08:48:37 +08:00
const record = await postInfo(id);
2024-09-25 14:46:02 +08:00
await formApi.setValues(record);
2024-09-13 15:27:29 +08:00
}
2025-04-12 10:38:14 +08:00
await markInitialized();
2024-09-13 15:27:29 +08:00
drawerApi.drawerLoading(false);
},
});
async function handleConfirm() {
try {
2025-04-12 10:38:14 +08:00
drawerApi.lock(true);
2024-09-13 15:27:29 +08:00
const { valid } = await formApi.validate();
if (!valid) {
return;
}
2024-09-25 14:46:02 +08:00
const data = cloneDeep(await formApi.getValues());
2024-09-13 15:27:29 +08:00
await (isUpdate.value ? postUpdate(data) : postAdd(data));
2025-04-12 10:38:14 +08:00
resetInitialized();
2024-09-13 15:27:29 +08:00
emit('reload');
2025-04-12 10:38:14 +08:00
drawerApi.close();
2024-09-13 15:27:29 +08:00
} catch (error) {
console.error(error);
} finally {
2025-04-12 10:38:14 +08:00
drawerApi.lock(false);
2024-09-13 15:27:29 +08:00
}
}
2025-04-12 10:38:14 +08:00
async function handleClosed() {
2024-09-13 15:27:29 +08:00
await formApi.resetForm();
2025-04-12 10:38:14 +08:00
resetInitialized();
2024-09-13 15:27:29 +08:00
}
</script>
<template>
2025-04-09 15:06:00 +08:00
<BasicDrawer :title="title" class="w-[600px]">
2024-09-13 15:27:29 +08:00
<BasicForm />
</BasicDrawer>
</template>