<script setup lang="tsx">
|
import { ref, reactive, onMounted, computed, PropType, h } from "vue";
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
import { useDept } from "./utils/hook";
|
import { useDetail } from "./utils/detail";
|
import { getTenderOrderDetail } from "@/api/item/index";
|
const isLoading = ref(false);
|
import { addDialog } from "@/components/ReDialog";
|
import pdfPreview from "@/views/system/component/pdfPreview.vue";
|
import { deviceDetection } from "@pureadmin/utils";
|
interface Emits {
|
(e: "backListPage"): void;
|
}
|
import MaterialIconThemePdf from "~icons/material-icon-theme/pdf";
|
import MaterialIconThemeImage from "~icons/material-icon-theme/image";
|
import MaterialIconThemeWord from "~icons/material-icon-theme/word";
|
import MaterialIconThemeTable from "~icons/material-icon-theme/table";
|
import MaterialIconThemeZip from "~icons/material-icon-theme/zip";
|
const emit = defineEmits<Emits>();
|
const props = defineProps({
|
nowID: null
|
});
|
import EditPen from "~icons/ep/edit-pen";
|
import IconParkSolidBack from "~icons/icon-park-solid/back";
|
|
const { openDialog } = useDept(ref({}));
|
const { openUploadDialog, state, changeDialog } = useDetail();
|
defineOptions({
|
name: "itemdetail"
|
});
|
const convertFujianToObjects = (fujianStr, fujianNameStr) => {
|
// 分割字符串为数组并过滤空值
|
const srcArray = fujianStr.split(",").filter(Boolean);
|
const nameArray = fujianNameStr.split(",").filter(Boolean);
|
|
// 提取文件后缀作为valu
|
const getFileExtension = fileName => {
|
const lastDotIndex = fileName.lastIndexOf(".");
|
// 如果没有后缀或文件名以点结尾，返回空字符串
|
if (lastDotIndex === -1 || lastDotIndex === fileName.length - 1) {
|
return "";
|
}
|
return fileName.slice(lastDotIndex + 1).toLowerCase();
|
};
|
|
// 映射为目标对象数组
|
return srcArray.map((src, index) => {
|
// 确保名称数组有对应索引的元素
|
const name = nameArray[index]?.trim() || `未知文件${index + 1}`;
|
|
return {
|
name: name,
|
filePath: src.trim(),
|
fileType: getFileExtension(name)
|
};
|
});
|
};
|
onMounted(async () => {
|
let res = await getTenderOrderDetail({ id: props.nowID });
|
state.nowInfo = res.result;
|
if (state.nowInfo.fujian) {
|
state.nowInfo.fujianList = convertFujianToObjects(
|
state.nowInfo.fujian,
|
state.nowInfo.fujianName
|
);
|
}
|
});
|
const backListPage = () => {
|
emit("backListPage");
|
};
|
const previewPdf = pdfUrl => {
|
console.log(pdfUrl, "pdfUrl");
|
|
switch (pdfUrl.fileType) {
|
case "png":
|
showImg(pdfUrl.filePath);
|
break;
|
case "jepg":
|
showImg(pdfUrl.filePath);
|
break;
|
case "pdf":
|
addDialog({
|
title: `预览pdf`,
|
props: {},
|
width: "60%",
|
draggable: true,
|
fullscreen: deviceDetection(),
|
fullscreenIcon: true,
|
sureBtnLoading: true,
|
closeOnClickModal: false,
|
contentRenderer: () => h(pdfPreview, { fileInfo: pdfUrl })
|
// jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
});
|
break;
|
default:
|
window.location.href = pdfUrl.filePath;
|
break;
|
}
|
};
|
const showPreview = ref(false);
|
const showImg = (name: string | number) => {
|
showPreview.value = true;
|
state.srcList = [name];
|
};
|
</script>
|
|
<template>
|
<div>
|
<el-card>
|
<template v-slot:header>
|
<div class="flex justify-between">
|
<div>{{ state.nowInfo.projectName }}</div>
|
<div>
|
<el-button
|
class="reset-margin"
|
link
|
type="primary"
|
:icon="useRenderIcon(EditPen)"
|
@click="openDialog('修改', state.nowInfo)"
|
/>
|
<el-button
|
class="reset-margin"
|
link
|
type="primary"
|
:icon="useRenderIcon(IconParkSolidBack)"
|
@click="backListPage"
|
/>
|
</div>
|
</div>
|
</template>
|
<div>
|
<el-descriptions
|
class="margin-top"
|
:column="3"
|
border
|
label-width="120"
|
>
|
<el-descriptions-item label="项目编号">
|
{{ state.nowInfo.projectCode }}
|
</el-descriptions-item>
|
<el-descriptions-item label="行业品目">
|
{{ state.nowInfo.hangyepinmuName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="采购方式">
|
{{ state.nowInfo.caigoufangshiName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="联合体投标">
|
{{ state.nowInfo.lianhetitoubiao }}
|
</el-descriptions-item>
|
<el-descriptions-item label="开标方式">
|
{{ state.nowInfo.kaibiaofangshi }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
</el-card>
|
<div class="mt-4.5">
|
<el-card>
|
<el-tabs
|
tab-position="left"
|
style="height: calc(100vh - 380px)"
|
class="demo-tabs"
|
type="border-card"
|
>
|
<el-tab-pane label="公告文件上传">
|
<h4>公告文件上传</h4>
|
<el-divider />
|
<el-scrollbar height="calc(100vh - 430px)">
|
<div>
|
<el-form label-width="auto" style="max-width: 1000px">
|
<el-form-item label="项目信息：">
|
<span class="mr-4">
|
投标报名开始时间：{{
|
state.nowInfo.toubiaoStartDate ?? "暂无"
|
}}
|
</span>
|
<span class="mr-4">
|
投标报名截止时间：
|
{{ state.nowInfo.toubiaoEndDate ?? "暂无" }}
|
</span>
|
<span class="mr-4">
|
开标时间：{{ state.nowInfo.kaibiaoDate ?? "暂无" }}
|
</span>
|
</el-form-item>
|
<el-form-item label="上传公告：">
|
<el-button
|
:disabled="!!state.nowInfo.zhaobiaowenjian"
|
type="primary"
|
plain
|
size="small"
|
@click="openUploadDialog('上传', state.nowInfo)"
|
>
|
上传公告
|
</el-button>
|
<el-button
|
v-if="state.nowInfo.zhaobiaowenjian"
|
type="primary"
|
plain
|
size="small"
|
@click="openUploadDialog('上传变更', state.nowInfo)"
|
>
|
上传变更公告
|
</el-button>
|
<el-button
|
type="primary"
|
plain
|
size="small"
|
@click="changeDialog('上传变更', state.nowInfo)"
|
>
|
修改标题
|
</el-button>
|
</el-form-item>
|
<el-form-item v-if="state.nowInfo.zhaobiaowenjian" label=" ">
|
<div class="border-1 w-[100%] rounded-md p-3">
|
<p>{{ state.nowInfo.projectName }}</p>
|
<p>上传时间：{{ state.nowInfo.fabuDate }}</p>
|
<p
|
class="flex items-center cursor-pointer"
|
@click="
|
previewPdf({
|
name: state.nowInfo.zhaobiaowenjian,
|
filePath: state.nowInfo.zhaobiaowenjianName,
|
fileType: 'pdf'
|
})
|
"
|
>
|
招标文件：<MaterialIconThemePdf
|
style="font-size: 1.5em"
|
/>{{ state.nowInfo.zhaobiaowenjianName }}
|
</p>
|
<p
|
v-if="state.nowInfo?.changeOrder"
|
class="flex items-center cursor-pointer"
|
@click="
|
previewPdf({
|
name: state.nowInfo.changeOrder.biangengwenjianName,
|
filePath: state.nowInfo.changeOrder.biangengwenjian,
|
fileType: 'pdf'
|
})
|
"
|
>
|
变更公告：
|
<MaterialIconThemePdf style="font-size: 1.5em" />
|
{{ state.nowInfo.changeOrder.biangengwenjianName }}
|
</p>
|
<div v-if="state.nowInfo.fujian" class="flex">
|
附件：
|
<div>
|
<p
|
v-for="item in state.nowInfo.fujianList"
|
:key="item.src"
|
class="flex items-center cursor-pointer"
|
@click="previewPdf(item)"
|
>
|
<MaterialIconThemeImage
|
v-if="
|
item.fileType == 'png' ||
|
item.fileType == 'jepg'
|
"
|
style="font-size: 1.5em"
|
/>
|
<MaterialIconThemePdf
|
v-else-if="item.fileType == 'pdf'"
|
style="font-size: 1.5em"
|
/>
|
<MaterialIconThemeTable
|
v-else-if="item.fileType == 'xlsx'"
|
style="font-size: 1.5em"
|
/>
|
<MaterialIconThemeWord
|
v-else-if="
|
item.fileType == 'doc' ||
|
item.fileType == 'docx'
|
"
|
style="font-size: 1.5em"
|
/>
|
<MaterialIconThemeZip
|
v-else
|
style="font-size: 1.5em"
|
/>
|
{{ item.name }}
|
</p>
|
</div>
|
</div>
|
<!-- <el-button
|
type="primary"
|
plain
|
size="small"
|
@click="previewPdf(state.nowInfo.zhaobiaowenjian)"
|
>
|
点击预览
|
</el-button> -->
|
<!-- <el-button
|
v-if="state.nowInfo?.changeOrder"
|
type="primary"
|
plain
|
size="small"
|
@click="
|
previewPdf(state.nowInfo.changeOrder.biangengwenjian)
|
"
|
>
|
点击预览变更公告
|
</el-button> -->
|
<!-- <el-button
|
type="primary"
|
plain
|
size="small"
|
@click="changeDialog('上传变更', state.nowInfo)"
|
>
|
修改标题
|
</el-button> -->
|
</div>
|
</el-form-item>
|
<!-- <el-form-item label="磋商文件：">
|
<el-button type="primary" plain size="small">
|
上传磋商文件
|
</el-button>
|
</el-form-item>
|
<el-form-item label=" ">
|
<div class="border-1 w-[100%] rounded-md p-3 pl-3">
|
<p>磋商文件名称</p>
|
<p>发布时间：2025-8-12 13:41:00</p>
|
<el-button type="primary" plain size="small">
|
点击预览
|
</el-button>
|
<el-button type="primary" plain size="small">
|
点击下载
|
</el-button>
|
</div>
|
</el-form-item> -->
|
<!-- <el-form-item label="澄清与答疑文件：">
|
<el-button type="primary" plain size="small">
|
文件管理
|
</el-button>
|
</el-form-item> -->
|
</el-form>
|
</div>
|
<!-- <el-row :gutter="10" align="right">
|
<el-col :span="3">
|
<el-text size="large"> 项目信息： </el-text>
|
</el-col>
|
<el-col :span="20">
|
<el-button type="primary" plain>上传公告</el-button>
|
<el-button type="primary" plain>上传变更公告</el-button>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" align="right">
|
<el-col :span="3">
|
<el-text size="large"> 公告上传： </el-text>
|
</el-col>
|
<el-col :span="20">
|
<el-button type="primary" plain>上传公告</el-button>
|
<el-button type="primary" plain>上传变更公告</el-button>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" align="right">
|
<el-col :span="3">
|
<el-text size="large"> 磋商文件： </el-text>
|
</el-col>
|
<el-col :span="20">
|
<el-button type="primary" plain>上传磋商文件</el-button>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" align="right">
|
<el-col :span="3">
|
<el-text size="large"> 澄清与答疑文件： </el-text>
|
</el-col>
|
<el-col :span="20">
|
<el-button type="primary" plain>文件管理</el-button>
|
</el-col>
|
</el-row> -->
|
</el-scrollbar>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="开评标管理">开评标管理</el-tab-pane> -->
|
<el-tab-pane label="中标公示">中标公示</el-tab-pane>
|
<el-tab-pane label="项目完结">项目完结</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
<el-image-viewer
|
v-if="showPreview"
|
:url-list="state.srcList"
|
show-progress
|
@close="showPreview = false"
|
/>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.el-divider--horizontal {
|
margin: 11px 0;
|
}
|
</style>
|
