<script setup lang="ts">
|
import type { fileItem } from './props';
|
import type { UploadTemplateQuery } from '#/api/onlineDev/uploadTemplate';
|
import type { UploadTemplateSelectionAdapter } from '../../popupSelect/src/props';
|
|
import { Alert } from 'ant-design-vue';
|
import { listUploadTemplates } from '#/api/onlineDev/uploadTemplate';
|
import PopupSelect from '../../popupSelect/src/PopupSelect.vue';
|
|
const props = defineProps<{
|
query: UploadTemplateQuery;
|
replacing: boolean;
|
validate: (file: fileItem) => string;
|
select: (query: UploadTemplateQuery & { templateId: string; fileId: string }) => Promise<void>;
|
}>();
|
const emit = defineEmits(['close']);
|
const columns = [
|
{ label: '模板名称', value: 'templateName' },
|
{ label: '文件名称', value: 'fileName' },
|
{ label: '不可选原因', value: 'unavailableReason' },
|
];
|
const adapter: UploadTemplateSelectionAdapter = {
|
async load(page) {
|
const query = { ...props.query, ...page };
|
const { data } = await listUploadTemplates(query);
|
return {
|
total: data.total,
|
list: data.list.flatMap((row) => {
|
if (!row.files.length) return [{ id: row.id, templateName: row.name, fileName: '', unavailableReason: '没有可选择的 DOCX 文件' }];
|
return row.files.map((file) => ({
|
id: JSON.stringify([row.id, file.fileId]),
|
templateName: row.name,
|
fileName: file.name,
|
unavailableReason: props.validate(file),
|
selection: { ...query, templateId: row.id, fileId: file.fileId },
|
}));
|
}),
|
};
|
},
|
async confirm(row) {
|
await props.select(row.selection);
|
},
|
};
|
</script>
|
|
<template>
|
<PopupSelect
|
:upload-template-selection="adapter"
|
:column-options="columns"
|
popup-title="选择模板"
|
popup-width="900px"
|
relation-field="fileName"
|
has-page
|
@close="emit('close')">
|
<template #notice>
|
<Alert v-if="replacing" class="m-3" type="info" show-icon message="确认后将替换当前上传组件中的全部附件，模板原文件保持不变。" />
|
</template>
|
</PopupSelect>
|
</template>
|
