<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import type { DmsPermissionResource } from '#/api/x/dms/permission';
|
|
import { nextTick, reactive, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { createDmsFolder } from '#/api/x/dms/permission';
|
|
const emit = defineEmits<{
|
created: [parent: DmsPermissionResource, folder: DmsPermissionResource];
|
}>();
|
|
const parent = ref<DmsPermissionResource>();
|
const formRef = ref<FormInstance>();
|
const form = reactive({ name: '' });
|
const sourceId = ref('');
|
const { createMessage } = useMessage();
|
const [registerModal, { changeOkLoading, closeModal }] = useModalInner(init);
|
|
function init(data: { parent: DmsPermissionResource }) {
|
parent.value = data.parent;
|
form.name = '';
|
sourceId.value = `folder-${crypto.randomUUID()}`;
|
nextTick(() => formRef.value?.clearValidate());
|
}
|
|
async function handleSubmit() {
|
if (!parent.value) return;
|
await formRef.value?.validate();
|
changeOkLoading(true);
|
try {
|
const response = await createDmsFolder({
|
name: form.name.trim(),
|
parentId: parent.value.id,
|
sourceId: sourceId.value,
|
});
|
closeModal();
|
emit('created', parent.value, response.data);
|
} catch {
|
createMessage.error('目录创建失败，请检查名称和父目录权限');
|
} finally {
|
changeOkLoading(false);
|
}
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" title="新建子目录" :width="480" destroy-on-close @register="registerModal" @ok="handleSubmit">
|
<a-alert class="mb-[18px]" type="info" show-icon :message="`父目录：${parent?.name || '-'}`" />
|
<a-form ref="formRef" :model="form" layout="vertical">
|
<a-form-item label="目录名称" name="name" :rules="[{ required: true, whitespace: true, message: '请输入目录名称' }]">
|
<a-input v-model:value="form.name" autofocus :maxlength="300" placeholder="请输入目录名称" show-count @press-enter="handleSubmit" />
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
