器官编辑的比对国家表自动排序功能和新写了个附件预览的组件

WXL

2025-09-24 c09b09a73a7905f980f5ebb8f25df0500d7c8ccb

器官编辑的比对国家表自动排序功能和新写了个附件预览的组件

 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>

 src/views/project/donationdetails/index.vue

@@ -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: [
@@ -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 åœ¨åˆ—表中，b ä¸åœ¨ï¼Œa æŽ’前面
        if (indexA !== -1) {
          return -1;
        }
        // å¦‚æžœ b åœ¨åˆ—表中，a ä¸åœ¨ï¼Œ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 åœ¨åˆ—表中，b ä¸åœ¨ï¼Œa æŽ’前面
        if (indexA !== -1) {
          return -1;
        }
        // å¦‚æžœ b åœ¨åˆ—表中，a ä¸åœ¨ï¼Œ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) {

 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>
            <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];

 src/views/project/travelexpenseapply/travelexpensedetail/index.vue

@@ -1115,12 +1115,16 @@
                  ref="imagePreview"
                  style="width: 95%; height: 90%"
                  :src="pdfimg"
                  :preview-src-list="pdfimgsrcList"
                  :initial-index="initialIndex"
                  @error="handleImageError"
                  @load="handleImageLoad"
                @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> -->
@@ -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("图片加载失败");
    },