postdischarge-ui/src/views/manage/components/cardlist.vue

<template>
  <div :style="{ height: maxTableHeight + 'px' }" class="cardlist">
    <div v-for="(item, index) in patientInfoList" :key="item.id">
      <div @click="handleAuthRole(item, index)" class="cards">
        <div class="carditem">
          <div class="top">
            <img
              v-if="item.sex == 'FEMALE'"
              src="../../../assets/manage/nvtouxiang.png"
              alt=""
              class="img"
              @click="handleAuth(item, index)"
            />
            <img
              v-if="item.sex == 'MALE'"
              src="../../../assets/manage/touxiang.png"
              alt=""
              class="img"
              @click="handleAuth(item, index)"
            />
            <el-tooltip
              class="name"
              effect="dark"
              :content="item.patientName"
              placement="top"
            >
              <span @click="handleAuth(item, index)">
                {{ item.patientName }}
              </span>
            </el-tooltip>
            <div class="agesex">
              {{ item.sex == "MALE" ? "男" : "" }}
              {{ item.sex == "FEMALE" ? "女" : "" }}
              <span style="padding: 0 1px">|</span>
              <span v-if="item.age"> {{ item.age }}岁 </span>
              <span class="zy" v-if="item.patientType == 'IN_HOSPITAL_PATIENT'"
                >在院</span
              >
              <span class="cy" v-if="item.patientType == 'DISCHARGED_PATIENT'"
                >出院</span
              >
              <span
                class="yzy"
                v-if="item.patientType == 'PRE_HOSPITALIZED_PATIENT'"
                >预住院</span
              >
              <span class="mz" v-if="item.patientType == 'OUTPATIENT'"
                >门诊</span
              >
              <!-- <span class="mz" v-if="item.patientType == 'CONTRACTED_PATIENT'">签约</span> -->
            </div>
            <div class="diagnosis">诊断名称：{{ item.mainDiagnosis }}</div>
            <div class="diagnosi">诊断状态:{{ item.patientSignStatus }}</div>
            <div class="formitembutton" @click.stop="handleedit(item)">
              画像编辑
            </div>
          </div>
          <div class="bottom">
            <div class="formitem">医生：{{ item.attendingPhysician }}</div>
            <div class="formitem">科室：{{ item.departmentName }}</div>
            <div class="formitem">就诊时间：{{ item.visitDate }}</div>
            <div class="formitem flex">
              <span> 康复计划执行率：</span>
              <el-progress
                v-if="item.taskExecuteRate == 0 || item.taskExecuteRate == null"
                :percentage="0"
              ></el-progress>
              <el-progress
                v-else
                :percentage="item.taskExecuteRate"
              ></el-progress>
              <span style="flex: 0.1"
                >({{ item.taskExecuteNum }}/{{ item.taskNum }})</span
              >
            </div>
            <div class="formitem flex">
              <span> 康复计划完成率： </span>
              <el-progress
                v-if="item.taskFinishRate == 0 || item.taskFinishRate == null"
                :percentage="0"
              ></el-progress>
              <el-progress
                v-else
                :percentage="item.taskFinishRate"
              ></el-progress>
              <span style="flex: 0.1"
                >({{ item.taskFinishNum }}/{{ item.taskNum }})</span
              >
            </div>
            <div class="formitem">下次任务：</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAge } from "@/utils/age";

export default {
  name: "cardlist",
  props: {
    maxTableHeight: {
      type: Number,
      default: 0,
    },
    patientInfoList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      isDoubleClicked: false,
    };
  },
  mounted() {},
  methods: {
    // 单机头像和姓名进入详情
    handleAuth(item, index) {
      this.$router.push({
        path: "/patient/patientdetails",
        query: {
          path: "/patient/patientInfo",
          patientId: item.id,
          cardNo: item.cardNo,
          patientName: item.patientName,
          patientPhone: item.patientPhone,
          sex: item.sex,
          birthDate: item.birthDate,
          familyMemberPhone: item.familyMemberPhone,
          address: item.address,
          patientSource: item.patientSource,
          createTime: item.createTime,
          age: item.birthDate ? getAge(item.birthDate) : "",
        },
      });
    },
    // 双击进入详情
    handleAuthRole(item, index) {
      if (this.isDoubleClicked) {
        //这里写你实现双击后的逻辑代码
        console.log("实现双击！");
        this.$router.push({
          path: "/patient/patientdetails",
          query: {
            path: "/patient/patientInfo",
            patientId: item.id,
            cardNo: item.cardNo,
            patientName: item.patientName,
            patientPhone: item.patientPhone,
            sex: item.sex,
            birthDate: item.birthDate,
            familyMemberPhone: item.familyMemberPhone,
            address: item.address,
            patientSource: item.patientSource,
            createTime: item.createTime,
            age: item.birthDate ? getAge(item.birthDate) : "",
          },
        });
      } else {
        this.isDoubleClicked = true;
        setTimeout(() => {
          this.isDoubleClicked = false;
        }, 250);
      }
    },
    // 画像编辑
    handleedit(item) {
      this.$router.push({
        path: "/patient/Portraitedit",
        query: {
          path: "/patient/patientInfo",
          patientId: item.id,
          cardNo: item.cardNo,
          patientName: item.patientName,
          patientPhone: item.patientPhone,
          sex: item.sex,
          birthDate: item.birthDate,
          familyMemberPhone: item.familyMemberPhone,
          address: item.address,
          patientSource: item.patientSource,
          createTime: item.createTime,
          hospitalAgencyName: item.hospitalAgencyName,
          mainDiagnosis: item.mainDiagnosis,
          age: item.birthDate ? getAge(item.birthDate) : "",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.cards {
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 263px;
  height: 262px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
}
.cards:hover {
  border: 2px solid #1890ff;
  cursor: pointer;
}
.cardlist {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;

  .carditem {
    margin-right: 10px;
    margin-bottom: 10px;
    width: 260px;
    min-height: 200px;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;

    .bottom {
      height: 165px;
      padding: 0 6px;

      .formitem {
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        color: #756a5e;
        font-weight: 550;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        overflow: hidden;
      }

      .flex {
        display: flex;
        align-items: center;

        ::v-deep .el-progress-bar {
          flex: 1;
        }

        ::v-deep .el-progress__text {
          font-size: 12px !important;
          flex: 0.5;
          text-align: right;
        }

        span {
          flex: 0.5;
          max-width: 50%;
        }

        ::v-deep .el-progress {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }

    .top {
      height: 85px;
      background-color: #f7f8fa;
      position: relative;
      border-radius: 10px 10px 0 0;
      margin-bottom: 10px;

      .img {
        margin: 10px 0 0 10px;
        width: 50px;
        height: 50px;
      }

      .agesex {
        position: absolute;
        right: 10px;
        top: 16px;

        //预住院
        .yzy {
          background-color: #e8f4ec;
          color: #2fb844;
          border: 1.5px solid #2fb844;
          border-radius: 2px;
          padding: 3px 5px;
          margin-left: 4px;
        }

        //门诊
        .mz {
          background-color: #dfe4f6;
          color: #2d56fb;
          border: 1.5px solid #2d56fb;
          border-radius: 2px;
          padding: 3px 5px;
          margin-left: 4px;
        }

        // 在院
        .zy {
          background-color: #deedf4;
          color: #1d98c6;
          border: 1.5px solid #1d98c6;
          border-radius: 2px;
          padding: 3px 5px;
          margin-left: 4px;
        }

        // 出院
        .cy {
          background-color: #deefee;
          color: #2a9a82;
          border: 1.5px solid #2a9a82;
          border-radius: 2px;
          padding: 3px 5px;
          margin-left: 4px;
        }
      }

      .diagnosis {
        position: absolute;
        color: #756a5e;
        font-weight: 550;
        left: 70px;
        top: 42px;
        font-size: 12px;
        height: 32px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-right: 4px;
      }
      .diagnosi {
        position: absolute;
        color: #756a5e;
        font-weight: 550;
        left: 70px;
        top: 60px;
        font-size: 12px;
        height: 32px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-right: 4px;
      }
      .formitembutton {
        position: absolute;
        color: #756a5e;
        font-weight: 550;
        left: 200px;
        top: 60px;
        font-size: 12px;
        height: 19px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-right: 4px;
      }
      .formitembutton:hover {
        color: #2d56fb;
        border-bottom: 1px solid #2d56fb;
      }

      .name {
        position: absolute;
        left: 70px;
        top: 16px;
        width: 76px;
        white-space: nowrap; /* 确保文本在一行内显示 */
        overflow: hidden; /* 超出容器部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }
    }
  }
}
</style>