<script setup lang="ts">
|
import { onMounted, reactive, ref, h } from "vue";
|
import MyHeader from "./component/myHeader.vue";
|
import MyFooter from "./component/myFooter.vue";
|
import { useIndex } from "../home/utils/hook";
|
import { message } from "@/utils/message";
|
import pdfPreview from "@/views/system/component/pdfPreview.vue";
|
import { deviceDetection } from "@pureadmin/utils";
|
import { addDialog } from "@/components/ReDialog";
|
|
const { getNeirongfabuDetail, route, router, getFeizhengfuDetail, stateHook } =
|
useIndex();
|
import { ArrowRight } from "@element-plus/icons-vue";
|
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 previewPdf = 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;
|
message("正在下载！");
|
break;
|
}
|
};
|
const showPreview = ref(false);
|
const state = reactive({
|
srcList: []
|
});
|
const showImg = (name: string | number) => {
|
showPreview.value = true;
|
state.srcList = [name];
|
};
|
onMounted(() => {
|
console.log(route);
|
|
const value = route.query;
|
getFeizhengfuDetail(value);
|
});
|
defineOptions({
|
name: "gonggaoDetail"
|
});
|
</script>
|
|
<template>
|
<div class="bg-[#f5f5f5] min-h-[100%]">
|
<my-header />
|
<div class="w-[80%] m-auto p-5">
|
<div class="h=[52px] w-[100%] bg-white p-2 pl-4 flex items-center">
|
<span class="text-sm">您的当前位置：</span>
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item :to="{ path: '/index' }" replace>
|
首页
|
</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="bg-white w-[100%] p-4 mt-7">
|
<h3 class="text-center p-4 text-2xl">
|
{{ stateHook.gonggaoDetail.projectName }}
|
</h3>
|
<div class="w-[95%] m-auto pt-1 pb-1">
|
<div class="bg-[#edf1f4] w-[100%] m-auto text-center pt-1 pb-1">
|
【信息发布主体：
|
{{ stateHook.gonggaoDetail.caigourenmingcheng }}
|
】 【发布时间：<span class="text-red-500">{{
|
stateHook.gonggaoDetail.createTime
|
}}</span
|
>】
|
</div>
|
<div class="mt-3">
|
<span class="text-xl">一、项目基本情况</span>
|
<div>
|
<p>项目编号：{{ stateHook.gonggaoDetail.projectCode }}</p>
|
<p>采购方式：{{ stateHook.gonggaoDetail.caigoufangshiName }}</p>
|
<p>预算金额：{{ stateHook.gonggaoDetail.caigouyusuan }}元</p>
|
<p>联合体投标：{{ stateHook.gonggaoDetail.lianhetitoubiao }}</p>
|
<p>
|
投标报名开始时间：{{ stateHook.gonggaoDetail.toubiaoStartDate }}
|
</p>
|
<p>
|
投标报名截止时间：{{ stateHook.gonggaoDetail.toubiaoEndDate }}
|
</p>
|
<p>开标时间：{{ stateHook.gonggaoDetail.kaibiaoDate }}</p>
|
<p
|
class="flex items-center cursor-pointer"
|
@click="
|
previewPdf({
|
name: stateHook.gonggaoDetail.zhaobiaowenjianName,
|
filePath: stateHook.gonggaoDetail.zhaobiaowenjian,
|
fileType: 'pdf'
|
})
|
"
|
>
|
招标文件：<MaterialIconThemePdf style="font-size: 1.5em" />{{
|
stateHook.gonggaoDetail.zhaobiaowenjianName
|
}}
|
</p>
|
<div v-if="stateHook.gonggaoDetail.fujian" class="flex">
|
附件：
|
<div>
|
<p
|
v-for="item in stateHook.gonggaoDetail.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>
|
</div>
|
</div>
|
<div v-if="stateHook.gonggaoDetail?.changeOrder" class="mt-3">
|
<span class="text-xl">二、变更公告</span>
|
<div>
|
<p>
|
变更名称：{{ stateHook.gonggaoDetail.changeOrder?.projectName }}
|
</p>
|
<p
|
v-if="stateHook.gonggaoDetail?.changeOrder"
|
class="flex items-center cursor-pointer"
|
@click="
|
previewPdf({
|
name: stateHook.gonggaoDetail.changeOrder
|
.biangengwenjianName,
|
filePath:
|
stateHook.gonggaoDetail.changeOrder.biangengwenjian,
|
fileType: 'pdf'
|
})
|
"
|
>
|
变更公告：
|
<MaterialIconThemePdf style="font-size: 1.5em" />
|
{{ stateHook.gonggaoDetail.changeOrder.biangengwenjianName }}
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<my-footer />
|
</div>
|
<el-image-viewer
|
v-if="showPreview"
|
:url-list="state.srcList"
|
show-progress
|
@close="showPreview = false"
|
/>
|
</template>
|
|
<style lang="scss" scoped></style>
|
