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

WXL

2025-09-24 c09b09a73a7905f980f5ebb8f25df0500d7c8ccb

 src/views/project/donationdetails/index.vue

@@ -278,7 +278,11 @@
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="form.age" placeholder="请输入年龄" />
                  <el-input
                    disabled
                    v-model="form.andAge"
                    placeholder="请输入年龄"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
@@ -377,7 +381,7 @@
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <!-- <el-col :span="6">
              <el-form-item label="民族" prop="nation">
                <el-select v-model="form.nation" placeholder="请选择民族">
                  <el-option
@@ -393,14 +397,14 @@
              <el-form-item label="籍贯" prop="nativeplace">
                <el-input v-model="form.nativeplace" placeholder="请输入国籍" />
              </el-form-item>
            </el-col>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="国籍" prop="nationality">
                <el-input v-model="form.nationality" placeholder="请输入国籍" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          <!-- <el-row>
            <el-col :span="6">
              <el-form-item label="职业" prop="occupation">
                <el-select v-model="form.occupation" placeholder="请选择职业">
@@ -425,15 +429,22 @@
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          </el-row> -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="当前医疗机构" prop="occupation">
                <el-input v-model="form.currentMedicalInstitution" placeholder="请输入" />
              <el-form-item label="所在医疗机构" prop="occupation">
                <el-input
                  v-model="form.currentMedicalInstitution"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="130px" label="当前医疗机构科室" prop="education">
              <el-form-item
                label-width="130px"
                label="所在医疗机构科室"
                prop="education"
              >
                <el-input v-model="form.currentDept" placeholder="请输入" />
              </el-form-item>
            </el-col>
@@ -441,18 +452,25 @@
          <el-row>
            <el-col :span="6">
              <el-form-item label="首次医疗机构" prop="occupation">
                <el-input v-model="form.firstMedicalInstitution" placeholder="请输入" />
                <el-input
                  v-model="form.firstMedicalInstitution"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="130px" label="首次医疗机构科室" prop="education">
              <el-form-item
                label-width="130px"
                label="首次医疗机构科室"
                prop="education"
              >
                <el-input v-model="form.firstDept" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="住址" prop="residenceaddress">
              <el-form-item label="住址(与身份证一致)" prop="residenceaddress">
                <div>
                  <li_area_select
                    ref="residenceSelect"
@@ -695,7 +713,7 @@
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <!-- <el-col :span="8">
              <el-form-item label="信息员" prop="infoname">
                <el-input v-model="form.infoname" placeholder="请输入信息员" />
              </el-form-item>
@@ -707,9 +725,9 @@
                  placeholder="请输入信息员联系电话"
                />
              </el-form-item>
            </el-col>
            </el-col> -->
          </el-row>
          <el-row>
          <!-- <el-row>
            <el-col :span="8">
              <el-form-item align="left" label="红十字会" prop="redorganno">
                <org-selecter
@@ -741,7 +759,7 @@
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          </el-row> -->
        </el-form>
        <div class="dialog-footer">
          <el-button
@@ -1000,6 +1018,50 @@
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="捐赠者民族" prop="nation">
                <el-select v-model="affirmform.nation" placeholder="请选择民族">
                  <el-option
                    v-for="dict in dict.type.sys_nation || []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="捐赠者学历" prop="education">
                <el-select
                  v-model="affirmform.education"
                  placeholder="请选择学历"
                >
                  <el-option
                    v-for="dict in dict.type.sys_education || []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="捐赠者职业" prop="occupation">
                <el-select
                  v-model="affirmform.occupation"
                  placeholder="请选择职业"
                >
                  <el-option
                    v-for="dict in dict.type.sys_occupation || []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="亲属姓名" prop="name">
                <el-input v-model="affirmform.name" placeholder="请输入姓名" />
              </el-form-item>
@@ -1024,7 +1086,7 @@
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号" prop="idcardno">
              <el-form-item label="亲属身份证" prop="idcardno">
                <el-input
                  ref="updateBSvalue"
                  class="sfzcode"
@@ -1034,7 +1096,7 @@
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="phone">
              <el-form-item label="亲属电话" prop="phone">
                <el-input
                  v-model="affirmform.phone"
                  placeholder="请输入联系电话"
@@ -1042,56 +1104,18 @@
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="民族" prop="nation">
                <el-select v-model="affirmform.nation" placeholder="请选择民族">
                  <el-option
                    v-for="dict in dict.type.sys_nation || []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历" prop="education">
                <el-select v-model="affirmform.education" placeholder="请选择学历">
                  <el-option
                    v-for="dict in dict.type.sys_education || []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
           <el-col :span="6">
              <el-form-item label="职业" prop="occupation">
                <el-select v-model="affirmform.occupation" placeholder="请选择职业">
                  <el-option
                    v-for="dict in dict.type.sys_occupation || []"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <!-- <el-col :span="12">
              <el-form-item label="亲属籍贯" prop="residenceaddresss">
                <div>
                  <li_area_select
                    v-model="defultAddresss"
                    ref="residenceaddresss"
                  ></li_area_select>
                  <!-- <div>{{defultAddress}}</div> -->
                </div>
              </el-form-item>
            </el-col>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="现住地址" prop="residenceaddress">
                <el-input
@@ -1103,7 +1127,7 @@
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="签字亲属" prop="kinshipconfirmationsign">
              <el-form-item label="亲属关系" prop="kinshipconfirmationsign">
                <el-checkbox-group v-model="kinship">
                  <el-checkbox
                    v-for="dict in dict.type.sys_kinshipConfirm || []"
@@ -1235,7 +1259,7 @@
                  size="small"
                  v-model="affirmform.signdate"
                  type="date"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  value-format="yyyy-MM-dd"
                  placeholder="选择签字日期"
                >
                </el-date-picker>
@@ -1379,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"
@@ -1433,7 +1457,7 @@
                  <el-table-column
                    label="移植医院"
                    align="center"
                    width="230"
                    width="280"
                    prop="transplanthospitalno"
                  >
                    <template slot-scope="scope">
@@ -1666,7 +1690,7 @@
            <el-col :span="6">
              <el-form-item
                align="left"
                label="签字时间"
                label="签字日期"
                label-width="120px"
                prop="coordinatorSignTime"
              >
@@ -1674,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>
@@ -1840,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"
@@ -1855,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"
@@ -1875,7 +1904,7 @@
                    </template>
                  </el-table-column> -->
                  <el-table-column
                    label="器官离体时间"
                    label="获取开始时间"
                    align="center"
                    width="200"
                    prop="organgettime"
@@ -1888,7 +1917,7 @@
                        v-model="scope.row.organgettime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请输入器官离体时间"
                        placeholder="请输入获取开始时间"
                      >
                      </el-date-picker>
                    </template>
@@ -1896,7 +1925,7 @@
                  <el-table-column
                    label="获取医院"
                    align="center"
                    width="230"
                    width="280"
                    prop="gainhospitalno"
                  >
                    <template slot-scope="scope">
@@ -2115,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"
@@ -2137,7 +2166,7 @@
                  <el-table-column
                    label="移植医院"
                    align="center"
                    width="220"
                    width="280"
                    prop="hospitalno"
                  >
                    <template slot-scope="scope">
@@ -2671,6 +2700,20 @@
        contacttime: "",
        reporttime: ""
      },
      organOrder: [
        "肝脏",
        "左肾",
        "右肾",
        "心脏",
        "左肺",
        "右肺",
        "胰腺",
        "小肠",
        "左眼角膜",
        "右眼角膜"
      ], // 指定的器官顺序
      isSorting: false, // 标志位，表示是否正在排序
      tableKey: 0,
      istb: false,
      activeName: "",
      tableDatafile: [
@@ -2811,13 +2854,7 @@
        residenceaddress: [
          { required: true, message: "请输入住址", trigger: "blur" }
        ],
        contacttime: [
          {
            required: true,
            message: "请输入红十字会联系时间",
            trigger: "blur"
          }
        ],

        idcardno: [
          { required: true, message: "请正确输入证件号码", trigger: "blur" }
        ],
@@ -2846,16 +2883,6 @@
        infophone: [
          { required: true, message: "请输入信息员联系电话", trigger: "blur" }
        ],
        redorganno: [
          { required: true, message: "请选择红十字会机构", trigger: "blur" }
        ],
        contactperson: [
          {
            required: true,
            message: "红十字会联系人不能为空",
            trigger: "blur"
          }
        ],
        acquisitiontissueno: [
          { required: true, message: "器官获取组织不能为空", trigger: "blur" }
        ],
@@ -2876,6 +2903,15 @@
          { required: true, message: "亲属姓名不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "家属联系电话不为空", trigger: "blur" }
        ],
        nation: [
          { required: true, message: "亲属姓名不能为空", trigger: "blur" }
        ],
        education: [
          { required: true, message: "家属联系电话不为空", trigger: "blur" }
        ],
        occupation: [
          { required: true, message: "家属联系电话不为空", trigger: "blur" }
        ],
        signfamilyrelations: [
@@ -2958,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: {
@@ -2982,7 +3040,15 @@
      // 表单数据
      getDonatebaseinfo(this.infoid).then(response => {
        this.form = response.data;
        console.log(this.form, "form");
        this.form.andAge = `${
          this.form.age && this.form.age !== 0
            ? `${this.form.age}${this.form.ageunit}`
            : ""
        } ${
          this.form.age2 && this.form.age2 !== 0
            ? `${this.form.age2}${this.form.ageunit2}`
            : ""
        }`.trim();

        if (response.data.terminationCase) {
          this.showTerminationBtn = response.data.terminationCase;
@@ -3542,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) {