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

WXL

2025-09-24 c09b09a73a7905f980f5ebb8f25df0500d7c8ccb

 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 在列表中，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) {