From 7339b8a9ccf09e6262cb71ac6c9b724cdfa6fe22 Mon Sep 17 00:00:00 2001 From: zhangwei <1504152376@qq.com> Date: 星期五, 15 八月 2025 16:43:32 +0800 Subject: [PATCH] 'pdf预览'’’ --- src/views/system/dept/detail.vue | 220 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 176 insertions(+), 44 deletions(-) diff --git a/src/views/system/dept/detail.vue b/src/views/system/dept/detail.vue index b3b7c3c..ec82377 100644 --- a/src/views/system/dept/detail.vue +++ b/src/views/system/dept/detail.vue @@ -1,45 +1,57 @@ -<script setup lang="ts"> +<script setup lang="tsx"> import { ref, reactive, onMounted, computed, PropType } from "vue"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useDept } from "./utils/hook"; -import { FormItemProps } from "./utils/types"; - +import { useDetail } from "./utils/detail"; +import { getTenderOrderDetail } from "@/api/item/index"; +const isLoading = ref(false); +import { addDialog } from "@/components/ReDialog"; interface Emits { (e: "backListPage"): void; } const emit = defineEmits<Emits>(); const props = defineProps({ - nowInfo: Object as PropType<FormItemProps> + nowID: null }); -import Delete from "~icons/ep/delete"; import EditPen from "~icons/ep/edit-pen"; import IconParkSolidBack from "~icons/icon-park-solid/back"; -const { - state, - loading, - selectedNum, - dataList, - onSearch, - resetForm, - openDialog, - handleDelete, - handleSelectionChange, - handleSizeChange, - handleCurrentChange, - pagination, - checkboxAsRadio, - onSelectionCancel, - onbatchDel -} = useDept(ref({})); +const { openDialog } = useDept(ref({})); +const { openUploadDialog, state } = useDetail(); defineOptions({ name: "itemdetail" }); -onMounted(() => { - console.log(props.nowInfo); +onMounted(async () => { + let res = await getTenderOrderDetail({ id: props.nowID }); + state.nowInfo = res.result; }); 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 { + } + } + }); }; </script> @@ -48,21 +60,14 @@ <el-card> <template v-slot:header> <div class="flex justify-between"> - <div>{{ nowInfo.projectName }}</div> + <div>{{ state.nowInfo.projectName }}</div> <div> <el-button class="reset-margin" link type="primary" :icon="useRenderIcon(EditPen)" - @click="openDialog('淇敼', nowInfo)" - /> - <el-button - class="reset-margin" - link - type="primary" - :icon="useRenderIcon(Delete)" - @click="openDialog('淇敼', nowInfo)" + @click="openDialog('淇敼', state.nowInfo)" /> <el-button class="reset-margin" @@ -75,27 +80,154 @@ </div> </template> <div> - <el-descriptions class="margin-top" :column="3" :size="size" border> + <el-descriptions class="margin-top" :column="3" border> <el-descriptions-item label="椤圭洰缂栧彿"> - {{ nowInfo.projectCode }} + {{ state.nowInfo.projectCode }} </el-descriptions-item> - <el-descriptions-item label="琛屼笟鍝佺洰" - >18100000000</el-descriptions-item - > + <el-descriptions-item label="琛屼笟鍝佺洰"> + {{ state.nowInfo.hangyepinmuName }} + </el-descriptions-item> <el-descriptions-item label="閲囪喘鏂瑰紡"> - {{ nowInfo.caigoufangshiName }} + {{ state.nowInfo.caigoufangshiName }} </el-descriptions-item> <el-descriptions-item label="鑱斿悎浣撴姇鏍�"> - {{ nowInfo.lianhetitoubiao }} + {{ state.nowInfo.lianhetitoubiao }} </el-descriptions-item> - <el-descriptions-item label="Remarks"> - <el-tag size="small">School</el-tag> + <!-- <el-descriptions-item label="Remarks"> </el-descriptions-item> - <el-descriptions-item label="Address" /> + <el-descriptions-item label="Address" /> --> </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="椤圭洰淇℃伅锛�"> + 鎶曟爣鎶ュ悕寮�濮嬫椂闂达細 + {{ state.nowInfo.toubiaoStartDate ?? "鏆傛棤" }} + 鎶曟爣鎶ュ悕鎴鏃堕棿锛� + {{ state.nowInfo.toubiaoEndDate }} + 寮�鏍囨椂闂达細{{ state.nowInfo.kaibiaoDate }} + </el-form-item> + <el-form-item label="涓婁紶鍏憡锛�"> + <el-button + :disabled="!!state.nowInfo.zhaobiaowenjian" + type="primary" + plain + size="small" + @click="openUploadDialog('涓婁紶')" + > + 涓婁紶鍏憡 + </el-button> + <el-button + v-if="state.nowInfo.zhaobiaowenjian" + type="primary" + plain + size="small" + @click="openUploadDialog('涓婁紶鍙樻洿', 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 + type="primary" + plain + size="small" + @click="previewPdf(state.nowInfo.zhaobiaowenjian)" + > + 鐐瑰嚮棰勮 + </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-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> </div> </template> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.el-divider--horizontal { + margin: 11px 0; +} +</style> -- Gitblit v1.9.1