271 lines
7.9 KiB
Vue
271 lines
7.9 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="招标文件审批详情" width="90%" top="5vh" destroy-on-close append-to-body>
|
|
<template #header>
|
|
<div class="dialog-header">
|
|
<span class="dialog-title">
|
|
<el-icon><DocumentChecked /></el-icon>
|
|
招标文件审批详情 - {{ applyData.purchaseNo || applyId }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="16">
|
|
<el-card shadow="never" class="info-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span class="card-title">采购申请信息</span>
|
|
</div>
|
|
</template>
|
|
<el-descriptions :column="1" border size="small">
|
|
<el-descriptions-item label="采购编号">{{ applyData.purchaseNo || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="项目名称">{{ applyData.projectName || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="采购金额">{{
|
|
applyData.budget ? Number(applyData.budget).toLocaleString() + ' 元' : '-'
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="招标代理">{{ applyData.agentName || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="审批状态">
|
|
<el-tag v-if="applyData.fileFlowStatus === '0'" type="primary">运行中</el-tag>
|
|
<el-tag v-else-if="applyData.fileFlowStatus === '1'" type="success">完成</el-tag>
|
|
<el-tag v-else-if="applyData.fileFlowStatus === '2'" type="danger">作废</el-tag>
|
|
<el-tag v-else-if="applyData.fileFlowStatus === '3'" type="info">终止</el-tag>
|
|
<el-tag v-else type="warning">未发起</el-tag>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="file-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span class="card-title">招标文件</span>
|
|
</div>
|
|
</template>
|
|
<el-table :data="docList" border stripe size="small" v-if="docList.length > 0" max-height="300">
|
|
<!-- <el-table-column type="index" label="序号" width="50" />-->
|
|
<el-table-column prop="version" label="版本" width="60" align="center">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.isCurrent === '1'" type="success" size="small">{{ scope.row.version || '-' }}</el-tag>
|
|
<span v-else>{{ scope.row.version || '-' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="fileName" label="文件名称" show-overflow-tooltip />
|
|
<el-table-column prop="uploadUserName" label="上传人" width="100" />
|
|
<el-table-column prop="createTime" label="上传时间" width="150" />
|
|
<el-table-column prop="comment" label="批注" width="150" show-overflow-tooltip />
|
|
<el-table-column label="操作" width="120" align="center" fixed="right">
|
|
<template #default="scope">
|
|
<el-button type="primary" link size="small" icon="View" @click="handlePreview(scope.row)">预览</el-button>
|
|
<el-button type="success" link size="small" icon="Download" @click="handleDownload(scope.row)">下载</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-empty v-else description="暂无招标文件" :image-size="60" />
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-card shadow="never" class="flow-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span class="card-title">审批流程</span>
|
|
</div>
|
|
</template>
|
|
<template v-if="applyData.fileFlowInstId">
|
|
<FlowCommentTimeline :key="String(applyData.fileFlowInstId) + 'doc'" :curr-job="fileFlowJob" />
|
|
</template>
|
|
<el-empty v-else description="暂未发起审批流程" :image-size="80" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<template #footer>
|
|
<el-button @click="visible = false">关闭</el-button>
|
|
</template>
|
|
|
|
<el-dialog v-model="previewVisible" :title="previewTitle" width="80%" top="5vh" destroy-on-close append-to-body>
|
|
<div class="preview-container">
|
|
<iframe v-if="previewUrl" :src="previewUrl" class="preview-iframe" />
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue';
|
|
import { DocumentChecked } from '@element-plus/icons-vue';
|
|
import { useMessage } from '/@/hooks/message';
|
|
import { getObj, getDocList, previewFileById, downloadFileById } from '/@/api/purchase/purchasingrequisition';
|
|
import { getFlowPurchaseDetail } from '/@/api/purchase/bidfile';
|
|
|
|
const FlowCommentTimeline = defineAsyncComponent(() => import('/@/views/jsonflow/comment/timeline.vue'));
|
|
|
|
interface DocItem {
|
|
id: string;
|
|
fileName: string;
|
|
fileUrl: string;
|
|
createTime?: string;
|
|
version?: string;
|
|
isCurrent?: string;
|
|
uploadUserName?: string;
|
|
comment?: string;
|
|
}
|
|
|
|
const visible = ref(false);
|
|
const applyId = ref('');
|
|
const applyData = ref<any>({});
|
|
const docList = ref<DocItem[]>([]);
|
|
const previewVisible = ref(false);
|
|
const previewTitle = ref('');
|
|
const previewUrl = ref('');
|
|
|
|
const fileFlowJob = computed(() => {
|
|
if (!applyData.value.fileFlowInstId) return null;
|
|
return {
|
|
id: applyData.value.id,
|
|
flowInstId: applyData.value.fileFlowInstId,
|
|
};
|
|
});
|
|
|
|
const open = async (id: string, row?: any) => {
|
|
applyId.value = id || '';
|
|
visible.value = true;
|
|
docList.value = [];
|
|
applyData.value = row || {};
|
|
|
|
// 使用专门的招标文件审批详情接口获取数据，确保包含 agentName
|
|
if (!row || !row.fileFlowInstId || !row.agentName) {
|
|
try {
|
|
const res = await getFlowPurchaseDetail(id);
|
|
if (res?.code === 0 && res?.data) {
|
|
// 合并数据，确保 agentName 等字段正确返回
|
|
applyData.value = { ...applyData.value, ...res.data };
|
|
}
|
|
} catch (e) {
|
|
console.error('获取采购申请详情失败', e);
|
|
useMessage().error('获取采购申请详情失败');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 加载招标文件列表
|
|
if (applyData.value.id) {
|
|
try {
|
|
const docsRes = await getDocList(applyData.value.id);
|
|
const docs = docsRes?.data || [];
|
|
if (Array.isArray(docs) && docs.length > 0) {
|
|
docList.value = docs.map((d: any) => ({
|
|
id: d.id || d.fileId,
|
|
fileName: d.fileName || d.fileTitle || '招标文件',
|
|
fileUrl: d.fileUrl,
|
|
createTime: d.createTime,
|
|
version: d.version,
|
|
isCurrent: d.isCurrent,
|
|
uploadUserName: d.uploadUserName,
|
|
comment: d.comment,
|
|
}));
|
|
}
|
|
} catch (e) {
|
|
console.error('获取招标文件列表失败', e);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handlePreview = async (row: DocItem) => {
|
|
if (!row.id) {
|
|
useMessage().warning('文件ID不存在');
|
|
return;
|
|
}
|
|
try {
|
|
const blob = await previewFileById(row.id);
|
|
previewUrl.value = window.URL.createObjectURL(blob);
|
|
previewTitle.value = row.fileName || '文件预览';
|
|
previewVisible.value = true;
|
|
} catch (e) {
|
|
console.error('预览失败', e);
|
|
useMessage().error('预览失败');
|
|
}
|
|
};
|
|
|
|
const handleDownload = async (row: DocItem) => {
|
|
if (!row.id) {
|
|
useMessage().warning('文件ID不存在');
|
|
return;
|
|
}
|
|
try {
|
|
const blob = await downloadFileById(row.id);
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = row.fileName || '招标文件.pdf';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (e) {
|
|
console.error('下载失败', e);
|
|
useMessage().error('下载失败');
|
|
}
|
|
};
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'refresh'): void;
|
|
}>();
|
|
|
|
defineExpose({
|
|
open,
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.dialog-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.info-card,
|
|
.file-card,
|
|
.flow-card {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preview-container {
|
|
width: 100%;
|
|
height: 75vh;
|
|
}
|
|
|
|
.preview-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
:deep(.el-card__header) {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
:deep(.el-card__body) {
|
|
padding: 12px 16px;
|
|
}
|
|
</style>
|