<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import type { DmsFileUploadMetadata } from '#/api/x/dms/fileCenter';
|
|
import { nextTick, reactive, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import dayjs from 'dayjs';
|
|
import { uploadFile } from '#/api/x/dms/fileCenter';
|
|
interface UploadFolder {
|
id: string;
|
name: string;
|
}
|
|
const emit = defineEmits<{
|
uploaded: [folder: UploadFolder];
|
}>();
|
|
const folder = ref<UploadFolder>();
|
const selectedFile = ref<File>();
|
const formRef = ref<FormInstance>();
|
const form = reactive<DmsFileUploadMetadata>({
|
documentName: '',
|
documentNo: '',
|
documentType: '',
|
preparedBy: '',
|
preparedOn: '',
|
responsibleDeptId: '',
|
versionLabel: 'D(00)',
|
});
|
const sourceId = ref('');
|
const { createMessage } = useMessage();
|
const [registerModal, { changeOkLoading, closeModal }] = useModalInner(init);
|
|
function init(data: { file: File; folder: UploadFolder }) {
|
folder.value = data.folder;
|
selectedFile.value = data.file;
|
const extensionIndex = data.file.name.lastIndexOf('.');
|
const extension = extensionIndex > 0 ? data.file.name.slice(extensionIndex + 1) : '';
|
Object.assign(form, {
|
documentName: extensionIndex > 0 ? data.file.name.slice(0, extensionIndex) : data.file.name,
|
documentNo: '',
|
documentType: extension.toUpperCase(),
|
preparedBy: '',
|
preparedOn: dayjs().format('YYYY-MM-DD'),
|
responsibleDeptId: '',
|
versionLabel: 'D(00)',
|
});
|
sourceId.value = `dms-upload-${crypto.randomUUID()}`;
|
nextTick(() => formRef.value?.clearValidate());
|
}
|
|
async function handleSubmit() {
|
if (!folder.value || !selectedFile.value) return;
|
await formRef.value?.validate();
|
changeOkLoading(true);
|
try {
|
await uploadFile(folder.value.id, sourceId.value, selectedFile.value, {
|
documentName: form.documentName.trim(),
|
documentNo: form.documentNo.trim(),
|
documentType: form.documentType.trim(),
|
preparedBy: form.preparedBy.trim(),
|
preparedOn: form.preparedOn,
|
responsibleDeptId: form.responsibleDeptId.trim(),
|
versionLabel: form.versionLabel.trim(),
|
});
|
const uploadedFolder = folder.value;
|
closeModal();
|
emit('uploaded', uploadedFolder);
|
} catch {
|
createMessage.error('文件上传失败，请检查文件编号是否已存在以及文件属性是否完整');
|
} finally {
|
changeOkLoading(false);
|
}
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" title="上传文件" :width="680" destroy-on-close @register="registerModal" @ok="handleSubmit">
|
<a-alert class="mb-[18px]" type="info" show-icon :message="`目录：${folder?.name || '-'} 文件：${selectedFile?.name || '-'}`" />
|
<a-form ref="formRef" :model="form" layout="vertical">
|
<a-row :gutter="16">
|
<a-col :span="12">
|
<a-form-item label="文件编号" name="documentNo" :rules="[{ required: true, whitespace: true, message: '请输入文件编号' }]">
|
<a-input v-model:value="form.documentNo" autofocus :maxlength="200" placeholder="例如：MM-R02" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="文件名称" name="documentName" :rules="[{ required: true, whitespace: true, message: '请输入文件名称' }]">
|
<a-input v-model:value="form.documentName" :maxlength="300" placeholder="请输入文件名称" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="文件类型" name="documentType" :rules="[{ required: true, whitespace: true, message: '请输入文件类型' }]">
|
<a-input v-model:value="form.documentType" :maxlength="100" placeholder="例如：QUALITY_MANUAL" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="归属部门ID" name="responsibleDeptId" :rules="[{ required: true, whitespace: true, message: '请输入归属部门ID' }]">
|
<a-input v-model:value="form.responsibleDeptId" :maxlength="100" placeholder="请输入归属部门ID" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="版本号" name="versionLabel" :rules="[{ required: true, whitespace: true, message: '请输入版本号' }]">
|
<a-input v-model:value="form.versionLabel" :maxlength="50" placeholder="例如：D(00)" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="制定人" name="preparedBy" :rules="[{ required: true, whitespace: true, message: '请输入制定人' }]">
|
<a-input v-model:value="form.preparedBy" :maxlength="100" placeholder="请输入制定人" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="制定日期" name="preparedOn" :rules="[{ required: true, message: '请选择制定日期' }]">
|
<a-date-picker v-model:value="form.preparedOn" class="w-full" value-format="YYYY-MM-DD" />
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</BasicModal>
|
</template>
|
