feat: 优化更新材料页面,只显示已上传的文件类型
- 调用 getApplyFiles API 获取已上传文件 - 根据已上传文件类型过滤显示列表 - 无材料时显示空状态提示
This commit is contained in:
@@ -1,12 +1,5 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="更新材料"
|
||||
width="900px"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-dialog v-model="visible" title="更新材料" width="900px" destroy-on-close append-to-body :close-on-click-modal="false">
|
||||
<template #header>
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-title">
|
||||
@@ -16,23 +9,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
title="仅支持上传PDF格式文件,上传新文件将替换原有同类型文件"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-bottom: 16px"
|
||||
/>
|
||||
<el-alert title="仅支持上传PDF格式文件,上传新文件将替换原有同类型文件" type="info" :closable="false" style="margin-bottom: 16px" />
|
||||
|
||||
<el-form label-width="120px">
|
||||
<el-empty v-if="uploadedFileTypes.length === 0" description="该采购申请暂无上传材料" />
|
||||
|
||||
<el-form v-else label-width="120px">
|
||||
<el-form-item label="采购编号">
|
||||
<el-input v-model="purchaseNo" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="item in fileTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
<el-form-item v-for="item in displayedFileTypes" :key="item.value" :label="item.label">
|
||||
<upload-file
|
||||
v-model="fileMap[item.value]"
|
||||
:limit="5"
|
||||
@@ -47,37 +33,38 @@
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">
|
||||
确认更新
|
||||
</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit"> 确认更新 </el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Upload } from '@element-plus/icons-vue'
|
||||
import { useMessage } from '/@/hooks/message'
|
||||
import { updateFiles } from '/@/api/purchase/purchasingrequisition'
|
||||
import { ref, reactive, computed, nextTick } from 'vue';
|
||||
import { Upload } from '@element-plus/icons-vue';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { updateFiles, getApplyFiles } from '/@/api/purchase/purchasingrequisition';
|
||||
|
||||
interface FileItem {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface FileTypeItem {
|
||||
value: string
|
||||
label: string
|
||||
desc: string
|
||||
value: string;
|
||||
label: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
const visible = ref(false)
|
||||
const submitting = ref(false)
|
||||
const purchaseId = ref('')
|
||||
const purchaseNo = ref('')
|
||||
const visible = ref(false);
|
||||
const submitting = ref(false);
|
||||
const purchaseId = ref('');
|
||||
const purchaseNo = ref('');
|
||||
|
||||
const fileMap = reactive<Record<string, FileItem[]>>({})
|
||||
const fileMap = reactive<Record<string, FileItem[]>>({});
|
||||
|
||||
// 已上传文件类型列表(只显示有文件的类型)
|
||||
const uploadedFileTypes = ref<string[]>([]);
|
||||
|
||||
const fileTypeList: FileTypeItem[] = [
|
||||
{ value: '10', label: '商务洽谈纪要', desc: '商务洽谈相关纪要文件' },
|
||||
@@ -92,69 +79,102 @@ const fileTypeList: FileTypeItem[] = [
|
||||
{ value: '100', label: '政府采购意向表', desc: '政府采购意向公示表' },
|
||||
{ value: '110', label: '履约验收单', desc: '履约验收相关单据' },
|
||||
{ value: '120', label: '采购需求表', desc: '采购需求明细表' },
|
||||
]
|
||||
];
|
||||
|
||||
const open = (id: string, no?: string) => {
|
||||
purchaseId.value = id || ''
|
||||
purchaseNo.value = no || ''
|
||||
visible.value = true
|
||||
// 根据已上传文件类型过滤显示列表
|
||||
const displayedFileTypes = computed(() => {
|
||||
return fileTypeList.filter((item) => uploadedFileTypes.value.includes(item.value));
|
||||
});
|
||||
|
||||
const open = async (id: string, no?: string) => {
|
||||
purchaseId.value = id || '';
|
||||
purchaseNo.value = no || '';
|
||||
visible.value = true;
|
||||
// 清空文件列表
|
||||
fileTypeList.forEach((item) => {
|
||||
fileMap[item.value] = []
|
||||
})
|
||||
}
|
||||
fileMap[item.value] = [];
|
||||
});
|
||||
uploadedFileTypes.value = [];
|
||||
|
||||
// 获取已上传的文件
|
||||
try {
|
||||
const res = await getApplyFiles(id);
|
||||
const files = res?.data || [];
|
||||
|
||||
// 收集已上传的文件类型
|
||||
const fileTypes = new Set<string>();
|
||||
files.forEach((file: any) => {
|
||||
if (file.fileType) {
|
||||
fileTypes.add(String(file.fileType));
|
||||
// 初始化已有文件的类型列表
|
||||
if (!fileMap[file.fileType]) {
|
||||
fileMap[file.fileType] = [];
|
||||
}
|
||||
fileMap[file.fileType].push({
|
||||
id: file.id,
|
||||
name: file.fileName,
|
||||
url: file.fileUrl,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
uploadedFileTypes.value = Array.from(fileTypes);
|
||||
} catch (e) {
|
||||
console.error('获取已上传文件失败', e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadSuccess = (res: any, fileType: string) => {
|
||||
if (res && res.data) {
|
||||
useMessage().success('上传成功')
|
||||
useMessage().success('上传成功');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!purchaseId.value) {
|
||||
useMessage().warning('无法获取采购申请ID')
|
||||
return
|
||||
useMessage().warning('无法获取采购申请ID');
|
||||
return;
|
||||
}
|
||||
|
||||
// 收集所有上传的文件ID
|
||||
const allFileIds: string[] = []
|
||||
fileTypeList.forEach((item) => {
|
||||
const files = fileMap[item.value] || []
|
||||
// 收集所有当前显示的文件ID
|
||||
const allFileIds: string[] = [];
|
||||
uploadedFileTypes.value.forEach((fileType) => {
|
||||
const files = fileMap[fileType] || [];
|
||||
files.forEach((file) => {
|
||||
if (file.id) {
|
||||
allFileIds.push(file.id)
|
||||
allFileIds.push(file.id);
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
if (allFileIds.length === 0) {
|
||||
useMessage().warning('请至少上传一个文件')
|
||||
return
|
||||
useMessage().warning('请至少保留或上传一个文件');
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
submitting.value = true;
|
||||
try {
|
||||
await updateFiles({
|
||||
purchaseId: purchaseId.value,
|
||||
fileIds: allFileIds,
|
||||
})
|
||||
useMessage().success('更新材料成功')
|
||||
visible.value = false
|
||||
emit('refresh')
|
||||
});
|
||||
useMessage().success('更新材料成功');
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err?.msg || '更新材料失败')
|
||||
useMessage().error(err?.msg || '更新材料失败');
|
||||
} finally {
|
||||
submitting.value = false
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'refresh'): void
|
||||
}>()
|
||||
(e: 'refresh'): void;
|
||||
}>();
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user