From c09b09a73a7905f980f5ebb8f25df0500d7c8ccb Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期三, 24 九月 2025 16:15:26 +0800
Subject: [PATCH] 器官编辑的比对国家表自动排序功能和新写了个附件预览的组件
---
src/components/CustomImageViewer/index.vue | 214 ++++++++++++++++++++++++++
src/views/project/donationdetails/index.vue | 136 +++++++++++++++-
src/views/project/fund/applyDetail/index.vue | 51 ++++-
src/views/project/travelexpenseapply/travelexpensedetail/index.vue | 37 +++-
4 files changed, 399 insertions(+), 39 deletions(-)
diff --git a/src/components/CustomImageViewer/index.vue b/src/components/CustomImageViewer/index.vue
new file mode 100644
index 0000000..0457395
--- /dev/null
+++ b/src/components/CustomImageViewer/index.vue
@@ -0,0 +1,214 @@
+<template>
+ <div v-if="visible" class="custom-image-viewer">
+ <!-- 閬僵灞� -->
+ <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
+
+ <!-- 鍥剧墖棰勮涓讳綋 -->
+ <div class="el-image-viewer__btn el-image-viewer__close" @click="close">
+ <i class="el-icon-close"></i>
+ </div>
+
+ <!-- 涓婁竴寮犳寜閽� -->
+ <div
+ class="el-image-viewer__btn el-image-viewer__prev"
+ :class="{ 'is-disabled': isFirst }"
+ @click="goPrev"
+ >
+ <i class="el-icon-arrow-left"></i>
+ </div>
+
+ <!-- 涓嬩竴寮犳寜閽� -->
+ <div
+ class="el-image-viewer__btn el-image-viewer__next"
+ :class="{ 'is-disabled': isLast }"
+ @click="goNext"
+ >
+ <i class="el-icon-arrow-right"></i>
+ </div>
+
+ <!-- 鍥剧墖灞曠ず -->
+ <div class="el-image-viewer__canvas">
+ <img
+ v-if="currentUrl"
+ :src="currentUrl"
+ :key="currentIndex"
+ @error="handleError"
+ class="el-image-viewer__img"
+ />
+ </div>
+
+ <!-- 鑷畾涔夋彁绀轰俊鎭� -->
+ <div v-if="showTip" class="custom-viewer-tip">
+ {{ tipMessage }}
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'CustomImageViewer',
+ props: {
+ urlList: {
+ type: Array,
+ default: () => []
+ },
+ initialIndex: {
+ type: Number,
+ default: 0
+ },
+ visible: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ currentIndex: this.initialIndex,
+ showTip: false,
+ tipMessage: ''
+ };
+ },
+ computed: {
+ currentUrl() {
+ return this.urlList[this.currentIndex];
+ },
+ isFirst() {
+ return this.currentIndex === 0;
+ },
+ isLast() {
+ return this.currentIndex === this.urlList.length - 1;
+ }
+ },
+ watch: {
+ initialIndex(newVal) {
+ this.currentIndex = newVal;
+ },
+ visible(newVal) {
+ if (!newVal) {
+ this.showTip = false;
+ this.tipMessage = '';
+ }
+ }
+ },
+ methods: {
+ close() {
+ this.$emit('update:visible', false);
+ this.$emit('close');
+ },
+ handleMaskClick() {
+ this.close();
+ },
+ goPrev() {
+ if (this.isFirst) {
+ this.showTipMessage('杩欏凡缁忔槸绗竴寮犱簡');
+ return;
+ }
+ this.currentIndex--;
+ this.hideTip();
+ },
+ goNext() {
+ if (this.isLast) {
+ this.showTipMessage('杩欏凡缁忔槸鏈�鍚庝竴寮犱簡');
+ return;
+ }
+ this.currentIndex++;
+ this.hideTip();
+ },
+ showTipMessage(message) {
+ this.tipMessage = message;
+ this.showTip = true;
+ // 2绉掑悗鑷姩闅愯棌鎻愮ず
+ setTimeout(() => {
+ this.hideTip();
+ }, 2000);
+ },
+ hideTip() {
+ this.showTip = false;
+ this.tipMessage = '';
+ },
+ handleError() {
+ console.error(`鍥剧墖鍔犺浇澶辫触: ${this.currentUrl}`);
+ }
+ }
+};
+</script>
+
+<style scoped>
+.custom-image-viewer {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 2000; /* 纭繚 z-index 瓒冲楂� */
+}
+
+.el-image-viewer__mask {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.el-image-viewer__btn {
+ position: absolute;
+ z-index: 1;
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ user-select: none;
+}
+
+.el-image-viewer__btn.is-disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.el-image-viewer__close {
+ top: 20px;
+ right: 20px;
+}
+
+.el-image-viewer__prev {
+ left: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.el-image-viewer__next {
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.el-image-viewer__canvas {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+
+.el-image-viewer__img {
+ max-width: 90%;
+ max-height: 90%;
+ object-fit: contain;
+}
+
+.custom-viewer-tip {
+ position: absolute;
+ bottom: 50px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(0, 0, 0, 0.7);
+ color: #fff;
+ padding: 10px 20px;
+ border-radius: 4px;
+ z-index: 2001;
+}
+</style>
diff --git a/src/views/project/donationdetails/index.vue b/src/views/project/donationdetails/index.vue
index 4038f30..2d69c3d 100644
--- a/src/views/project/donationdetails/index.vue
+++ b/src/views/project/donationdetails/index.vue
@@ -1016,7 +1016,7 @@
label-width="100px"
label-position="right"
>
- <el-row>
+ <el-row>
<el-col :span="6">
<el-form-item label="鎹愯禒鑰呮皯鏃�" prop="nation">
<el-select v-model="affirmform.nation" placeholder="璇烽�夋嫨姘戞棌">
@@ -1403,12 +1403,12 @@
/>
</template>
</el-table-column>
- <el-table-column
+ <!-- <el-table-column
label="鍣ㄥ畼缂栧彿"
align="center"
width="90"
prop="organno"
- />
+ /> -->
<el-table-column
label="鍒嗛厤绯荤粺缂栧彿"
align="center"
@@ -1457,7 +1457,7 @@
<el-table-column
label="绉绘鍖婚櫌"
align="center"
- width="230"
+ width="280"
prop="transplanthospitalno"
>
<template slot-scope="scope">
@@ -1690,7 +1690,7 @@
<el-col :span="6">
<el-form-item
align="left"
- label="绛惧瓧鏃堕棿"
+ label="绛惧瓧鏃ユ湡"
label-width="120px"
prop="coordinatorSignTime"
>
@@ -1698,7 +1698,7 @@
clearable
v-model="witnessform.coordinatorSignTime"
type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd"
placeholder="閫夋嫨鎵嬫湳缁撴潫鏃堕棿"
>
</el-date-picker>
@@ -1864,7 +1864,12 @@
<el-row>
<el-col>
<el-form-item>
- <el-table v-loading="loading" border :data="procureddata">
+ <el-table
+ v-loading="loading"
+ border
+ :key="tableKey"
+ :data="procureddata"
+ >
<el-table-column
label="鍣ㄥ畼鍚嶇О"
align="center"
@@ -1879,12 +1884,12 @@
/>
</template>
</el-table-column>
- <el-table-column
+ <!-- <el-table-column
label="鍣ㄥ畼缂栧彿"
align="center"
width="90"
prop="organno"
- />
+ /> -->
<!-- <el-table-column
label="绯荤粺缂栧彿"
align="center"
@@ -1920,7 +1925,7 @@
<el-table-column
label="鑾峰彇鍖婚櫌"
align="center"
- width="230"
+ width="280"
prop="gainhospitalno"
>
<template slot-scope="scope">
@@ -2139,12 +2144,12 @@
/>
</template>
</el-table-column>
- <el-table-column
+ <!-- <el-table-column
label="鍣ㄥ畼缂栧彿"
align="center"
width="90"
prop="organno"
- />
+ /> -->
<el-table-column
label="绯荤粺缂栧彿"
align="center"
@@ -2161,7 +2166,7 @@
<el-table-column
label="绉绘鍖婚櫌"
align="center"
- width="220"
+ width="280"
prop="hospitalno"
>
<template slot-scope="scope">
@@ -2695,6 +2700,20 @@
contacttime: "",
reporttime: ""
},
+ organOrder: [
+ "鑲濊剰",
+ "宸﹁偩",
+ "鍙宠偩",
+ "蹇冭剰",
+ "宸﹁偤",
+ "鍙宠偤",
+ "鑳拌吅",
+ "灏忚偁",
+ "宸︾溂瑙掕啘",
+ "鍙崇溂瑙掕啘"
+ ], // 鎸囧畾鐨勫櫒瀹橀『搴�
+ isSorting: false, // 鏍囧織浣嶏紝琛ㄧず鏄惁姝ｅ湪鎺掑簭
+ tableKey: 0,
istb: false,
activeName: "",
tableDatafile: [
@@ -2892,7 +2911,7 @@
education: [
{ required: true, message: "瀹跺睘鑱旂郴鐢佃瘽涓嶄负绌�", trigger: "blur" }
],
- occupation: [
+ occupation: [
{ required: true, message: "瀹跺睘鑱旂郴鐢佃瘽涓嶄负绌�", trigger: "blur" }
],
signfamilyrelations: [
@@ -2975,6 +2994,28 @@
listReportname("fzr").then(res => {
this.leaderlist = res.data;
});
+ // this.customOrganSort();
+ },
+ watch: {
+ // 鐩戝惉 procureddata 鐨勫彉鍖栵紝鏁版嵁鏇存柊鍚庨噸鏂版帓搴�
+ procureddata: {
+ handler(newVal) {
+ if (this.isSorting) {
+ return;
+ }
+ this.customOrganSort();
+ },
+ deep: true // 娣卞害鐩戝惉锛屽洜涓烘暟缁勫唴瀹瑰彲鑳藉彉鍖�
+ },
+ allocateddata: {
+ handler(newVal) {
+ if (this.isSorting) {
+ return;
+ }
+ this.allocateddataSort();
+ },
+ deep: true // 娣卞害鐩戝惉锛屽洜涓烘暟缁勫唴瀹瑰彲鑳藉彉鍖�
+ }
},
methods: {
@@ -3567,6 +3608,73 @@
});
}
},
+
+ customOrganSort() {
+ console.log("璋冪敤");
+
+ // 1. 鍔犻攣锛岄樆姝㈢洃鍚櫒鎵ц
+ this.isSorting = true;
+ // 鑷畾涔夋帓搴忓嚱鏁�
+ this.procureddata.sort((a, b) => {
+ const indexA = this.organOrder.indexOf(a.organname);
+ const indexB = this.organOrder.indexOf(b.organname);
+
+ // 濡傛灉涓や釜閮藉湪鍒楄〃涓紝鎸夊垪琛ㄤ腑鐨勯『搴忔帓搴�
+ if (indexA !== -1 && indexB !== -1) {
+ return indexA - indexB;
+ }
+ // 濡傛灉 a 鍦ㄥ垪琛ㄤ腑锛宐 涓嶅湪锛宎 鎺掑墠闈�
+ if (indexA !== -1) {
+ return -1;
+ }
+ // 濡傛灉 b 鍦ㄥ垪琛ㄤ腑锛宎 涓嶅湪锛宐 鎺掑墠闈�
+ if (indexB !== -1) {
+ return 1;
+ }
+ // 涓や釜閮戒笉鍦ㄥ垪琛ㄤ腑锛屼繚鎸佸師椤哄簭锛堟垨鎸夊叾浠栬鍒欙紝姣斿鎸夊瓧姣嶆帓搴忥紝杩欓噷鎸夊師濮嬮『搴忥級
+ return 0;
+ });
+ console.log(this.procureddata, "椤哄簭");
+ this.tableKey += 1; // 鏀瑰彉 key 杩娇琛ㄦ牸閲嶆柊娓叉煋
+ // 浣犲彲浠ヤ娇鐢� this.$forceUpdate() 鎴栬�呴噸鏂拌祴鍊兼暟缁勬潵瑙﹀彂鏇存柊
+ this.procureddata = [...this.procureddata];
+ this.$nextTick(() => {
+ this.isSorting = false;
+ });
+ },
+ allocateddataSort() {
+ console.log("璋冪敤");
+
+ // 1. 鍔犻攣锛岄樆姝㈢洃鍚櫒鎵ц
+ this.isSorting = true;
+ // 鑷畾涔夋帓搴忓嚱鏁�
+ this.allocateddata.sort((a, b) => {
+ const indexA = this.organOrder.indexOf(a.organname);
+ const indexB = this.organOrder.indexOf(b.organname);
+
+ // 濡傛灉涓や釜閮藉湪鍒楄〃涓紝鎸夊垪琛ㄤ腑鐨勯『搴忔帓搴�
+ if (indexA !== -1 && indexB !== -1) {
+ return indexA - indexB;
+ }
+ // 濡傛灉 a 鍦ㄥ垪琛ㄤ腑锛宐 涓嶅湪锛宎 鎺掑墠闈�
+ if (indexA !== -1) {
+ return -1;
+ }
+ // 濡傛灉 b 鍦ㄥ垪琛ㄤ腑锛宎 涓嶅湪锛宐 鎺掑墠闈�
+ if (indexB !== -1) {
+ return 1;
+ }
+ // 涓や釜閮戒笉鍦ㄥ垪琛ㄤ腑锛屼繚鎸佸師椤哄簭锛堟垨鎸夊叾浠栬鍒欙紝姣斿鎸夊瓧姣嶆帓搴忥紝杩欓噷鎸夊師濮嬮『搴忥級
+ return 0;
+ });
+ console.log(this.allocateddata, "椤哄簭");
+ this.tableKey += 1; // 鏀瑰彉 key 杩娇琛ㄦ牸閲嶆柊娓叉煋
+ // 浣犲彲浠ヤ娇鐢� this.$forceUpdate() 鎴栬�呴噸鏂拌祴鍊兼暟缁勬潵瑙﹀彂鏇存柊
+ this.allocateddata = [...this.allocateddata];
+ this.$nextTick(() => {
+ this.isSorting = false;
+ });
+ },
// 鍒囨崲tab
on_click(e) {
// if (e != "" || e != null) {
diff --git a/src/views/project/fund/applyDetail/index.vue b/src/views/project/fund/applyDetail/index.vue
index 34ba88e..f5a64fc 100644
--- a/src/views/project/fund/applyDetail/index.vue
+++ b/src/views/project/fund/applyDetail/index.vue
@@ -817,8 +817,13 @@
</el-form-item>
</el-col>
</el-row>
- <el-row v-if="selectionType == 'account' && accountfrom == '2'&&
- accountselectform.usertype == 'org'">
+ <el-row
+ v-if="
+ selectionType == 'account' &&
+ accountfrom == '2' &&
+ accountselectform.usertype == 'org'
+ "
+ >
<el-col :span="24">
<el-form-item label="绋庡彿" prop="unitTaxNo">
<el-input
@@ -1125,16 +1130,22 @@
>
<!-- <img :src="pdfimg" /> -->
<el-image
+ ref="imagePreview"
style="width: 95%; height: 90%"
- @error="handleImageError"
- @load="handleImageLoad"
:src="pdfimg"
- :preview-src-list="pdfimgsrcList"
+ @click="handleImageClick(initialIndex)"
>
- <!-- <div slot="error" class="image-slot">
- <i class="el-icon-picture-outline"></i>
- </div> -->
- </el-image>
+ <!-- <div slot="error" class="image-slot">
+ <i class="el-icon-picture-outline"></i>
+ </div> -->
+ </el-image>
+ <custom-image-viewer
+ :url-list="pdfimgsrcList"
+ :initial-index="currentIndex"
+ :visible="viewerVisible"
+ @update:visible="viewerVisible = $event"
+ @close="handleViewerClose"
+ />
</div>
<div v-else class="pdfimgmins">{{ hintitle }}</div>
</div>
@@ -1375,12 +1386,15 @@
import Li_area_select from "@/components/Address";
import OrgSelecter from "@/views/project/components/orgselect";
import { getToken } from "@/utils/auth";
+import CustomImageViewer from "@/components/CustomImageViewer"; // 鏍规嵁浣犵殑璺緞璋冩暣
+
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
Li_area_select,
- OrgSelecter
+ OrgSelecter,
+ CustomImageViewer,
},
name: "fundApply",
@@ -1527,9 +1541,7 @@
username: [
{ required: true, message: "璇疯緭鍏ヨ处鎴峰悕绉�", trigger: "blur" }
],
- unitTaxNo: [
- { required: true, message: "璇疯緭鍏ョ◣鍙�", trigger: "blur" }
- ],
+ unitTaxNo: [{ required: true, message: "璇疯緭鍏ョ◣鍙�", trigger: "blur" }],
idcardno: [
{ required: true, message: "璇疯緭鍏ヨ韩浠借处鍙�", trigger: "blur" }
],
@@ -1673,6 +1685,9 @@
pdftitle: "",
pdfimg: "",
pdfimgsrcList: [],
+ currentIndex: 0, // 鍒濆绱㈠紩
+ initialIndex: 0, // 鍒濆绱㈠紩
+ viewerVisible: false, // 鎺у埗棰勮缁勪欢鏄剧ず
pdfVisible: false,
previewpdf: false,
hintitle: "璇蜂笂浼犳枃浠跺悗鏌ョ湅",
@@ -2337,7 +2352,8 @@
if (
this.userprofile.userName == "admin" ||
this.userprofile.userName == "053" ||
- this.userprofile.userName == "047"|| store.getters.rolesor[0].roleSort=='13'
+ this.userprofile.userName == "047" ||
+ store.getters.rolesor[0].roleSort == "13"
) {
this.ismanager = true;
} else {
@@ -3181,6 +3197,13 @@
// 鍥剧墖鍔犺浇鎴愬姛鏃舵墽琛岀殑鎿嶄綔
console.log("Image loaded successfully");
},
+ handleImageClick(index) {
+ this.currentIndex = index;
+ this.viewerVisible = true;
+ },
+ handleViewerClose() {
+ this.viewerVisible = false;
+ },
handleUploadError() {},
remove(file, fileList) {
const rbDetails = [...this.rbDetails];
diff --git a/src/views/project/travelexpenseapply/travelexpensedetail/index.vue b/src/views/project/travelexpenseapply/travelexpensedetail/index.vue
index 75a7a06..f24c82e 100644
--- a/src/views/project/travelexpenseapply/travelexpensedetail/index.vue
+++ b/src/views/project/travelexpenseapply/travelexpensedetail/index.vue
@@ -1111,17 +1111,21 @@
:src="pdfimg"
:preview-src-list="pdfimgsrcList" -->
>
- <el-image
- ref="imagePreview"
- style="width: 95%; height: 90%"
- :src="pdfimg"
- :preview-src-list="pdfimgsrcList"
- :initial-index="initialIndex"
- @error="handleImageError"
- @load="handleImageLoad"
- >
- </el-image>
- <!-- <div slot="error" class="image-slot">
+ <el-image
+ ref="imagePreview"
+ style="width: 95%; height: 90%"
+ :src="pdfimg"
+ @click="handleImageClick(initialIndex)"
+ >
+ </el-image>
+ <custom-image-viewer
+ :url-list="pdfimgsrcList"
+ :initial-index="currentIndex"
+ :visible="viewerVisible"
+ @update:visible="viewerVisible = $event"
+ @close="handleViewerClose"
+ />
+ <!-- <div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div> -->
<!-- </el-image> -->
@@ -1281,6 +1285,7 @@
import { getInfoBytheUserNo } from "@/api/project/externalperson";
import { regionDataPlus, CodeToText } from "element-china-area-data";
import Li_area_select from "@/components/Address";
+import CustomImageViewer from "@/components/CustomImageViewer"; // 鏍规嵁浣犵殑璺緞璋冩暣
import { getUser, getUserProfile } from "@/api/system/user";
import { treeselect } from "@/api/system/dept";
import { getSubsidy } from "@/api/project/travelcity";
@@ -1291,6 +1296,7 @@
components: {
Treeselect,
Li_area_select,
+ CustomImageViewer,
pdf
},
name: "Funddetail",
@@ -1453,7 +1459,9 @@
invoicefileListto: [],
invoicepdfimg: "",
invoicepdfimgsrcList: [],
+ currentIndex: 0, // 鍒濆绱㈠紩
initialIndex: 0, // 鍒濆绱㈠紩
+ viewerVisible: false, // 鎺у埗棰勮缁勪欢鏄剧ず
//浜哄憳绫诲埆
persontype: null,
//鍒拌揪鍦�
@@ -1603,6 +1611,13 @@
}
return 0;
},
+ handleImageClick(index) {
+ this.currentIndex = index;
+ this.viewerVisible = true;
+ },
+ handleViewerClose() {
+ this.viewerVisible = false;
+ },
handleImageError() {
console.error("鍥剧墖鍔犺浇澶辫触");
},
--
Gitblit v1.9.3