From dade6a8b4772abc113383246d05ab59162630e7c Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期三, 27 八月 2025 17:21:21 +0800
Subject: [PATCH] '上传变更公告获取详情与删除'
---
src/views/system/dept/detail.vue | 237 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 198 insertions(+), 39 deletions(-)
diff --git a/src/views/system/dept/detail.vue b/src/views/system/dept/detail.vue
index ec82377..ddb1e97 100644
--- a/src/views/system/dept/detail.vue
+++ b/src/views/system/dept/detail.vue
@@ -1,14 +1,21 @@
<script setup lang="tsx">
-import { ref, reactive, onMounted, computed, PropType } from "vue";
+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
@@ -17,41 +24,83 @@
import IconParkSolidBack from "~icons/icon-park-solid/back";
const { openDialog } = useDept(ref({}));
-const { openUploadDialog, state } = useDetail();
+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 => {
- addDialog({
- width: "80%",
- title: "纭淇℃伅",
- contentRenderer: () => (
- <iframe
- type="application/pdf"
- src={pdfUrl}
- width="800"
- height="600"
- ></iframe>
- ), // jsx 璇硶 锛堟敞鎰忓湪.vue鏂囦欢鍚敤jsx璇硶锛岄渶瑕佸湪script寮�鍚痩ang="tsx"锛�
- closeCallBack: ({ options, args }) => {
- // options.props 鏄搷搴斿紡鐨�
- // const { formInline } = options.props as FormProps;
- // const text = `濮撳悕锛�${formInline.user} 鍩庡競锛�${formInline.region}`;
- if (args?.command === "cancel") {
- // 鎮ㄧ偣鍑讳簡鍙栨秷鎸夐挳
- // active.value -= 1;
- } else if (args?.command === "sure") {
- } else {
- }
- }
- });
+ 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寮�鍚痩ang="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>
@@ -80,7 +129,12 @@
</div>
</template>
<div>
- <el-descriptions class="margin-top" :column="3" border>
+ <el-descriptions
+ class="margin-top"
+ :column="3"
+ border
+ label-width="120"
+ >
<el-descriptions-item label="椤圭洰缂栧彿">
{{ state.nowInfo.projectCode }}
</el-descriptions-item>
@@ -93,9 +147,9 @@
<el-descriptions-item label="鑱斿悎浣撴姇鏍�">
{{ state.nowInfo.lianhetitoubiao }}
</el-descriptions-item>
- <!-- <el-descriptions-item label="Remarks">
+ <el-descriptions-item label="寮�鏍囨柟寮�">
+ {{ state.nowInfo.kaibiaofangshi }}
</el-descriptions-item>
- <el-descriptions-item label="Address" /> -->
</el-descriptions>
</div>
</el-card>
@@ -114,11 +168,18 @@
<div>
<el-form label-width="auto" style="max-width: 1000px">
<el-form-item label="椤圭洰淇℃伅锛�">
- 鎶曟爣鎶ュ悕寮�濮嬫椂闂达細
- {{ state.nowInfo.toubiaoStartDate ?? "鏆傛棤" }}
- 鎶曟爣鎶ュ悕鎴鏃堕棿锛�
- {{ state.nowInfo.toubiaoEndDate }}
- 寮�鏍囨椂闂达細{{ state.nowInfo.kaibiaoDate }}
+ <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
@@ -126,7 +187,7 @@
type="primary"
plain
size="small"
- @click="openUploadDialog('涓婁紶')"
+ @click="openUploadDialog('涓婁紶', state.nowInfo)"
>
涓婁紶鍏憡
</el-button>
@@ -139,22 +200,114 @@
>
涓婁紶鍙樻洿鍏憡
</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>涓婁紶鏃堕棿锛�2025-8-12 13:41:00</p>
- <el-button
+ <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 type="primary" plain size="small">
+ </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>
+ </el-button> -->
</div>
</el-form-item>
<!-- <el-form-item label="纾嬪晢鏂囦欢锛�">
@@ -223,6 +376,12 @@
</el-tabs>
</el-card>
</div>
+ <el-image-viewer
+ v-if="showPreview"
+ :url-list="state.srcList"
+ show-progress
+ @close="showPreview = false"
+ />
</div>
</template>
--
Gitblit v1.9.1