xt_vue/src/xt_pages/user/components/PatientSidebar.vue

<template>
  <div>
    <div class="patient-menu">
      <el-autocomplete
        style="margin:16px 5px"
        popper-class="my-autocomplete"
        v-model="value"
        :fetch-suggestions="querySearchAsync"
        :trigger-on-focus="false"
        placeholder="病人名字或者透析号"
        @select="handleSelect"
       >
        <i class="el-icon-search el-input__icon" slot="suffix" > </i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.name }}</div>
        </template>
      </el-autocomplete>
      <el-select v-model="selectID" style="margin:0 5px 0px 5px;text-align: center;" @change="changePatient" placeholder="请选择">
        <el-option
          v-for="item in patientsList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>

      <el-tree
        :data="treeData"
        accordion
        node-key="name" 
        :key="treeKey" 
        :current-node-key="treeKey" 
        :default-expanded-keys="[defaultActive]"
        @node-click="handleNodeClick"
        >
      </el-tree>
    </div>
    <div class="patient-app-container ">
      <span class="patient-name">姓名：{{currentPatient.name}} &nbsp;&nbsp; 性别：{{tranSex(currentPatient.gender)}} &nbsp;&nbsp; 年龄：{{tranAge(currentPatient.birthday)}} &nbsp;&nbsp; 透析号：{{currentPatient.dialysis_no}} </span>
    </div>
  </div>

</template>
<script>
import { fetchAllList, PostSearch } from "@/api/patient";
import { jsGetAge, uParseTime } from "@/utils/tools";

export default {
  name: "patientSidebar",
  value: "",
  searchArray: [],
  props: {
    id: 0,
    defaultActive: {
      type: String,
      default: "1-1"
    }
  },
  data() {
    return {
      thedefaultActive: 1,
      patientsList: null,
      currentPatient: {},
      selectID: 0,
      keyword: "",
      value: "",
      treeKey: "",
      treeData: [
        {
          name: "1",
          label: "电子病历",
          children: [
            {
              name: "1-1",
              label: "基本信息"
            },
            {
              name: "1-4",
              label: "医嘱管理"
            },
            {
              name: "1-2",
              label: "病程管理"
            },
            {
              name: "1-3",
              label: "检验检查"
            },
            {
              name: "1-5",
              label: "抢救记录"
            }
          ]
        },
        {
          name: "2",
          label: "透析管理",
          children: [
            {
              name: "2-1",
              label: "长期透析处方"
            },
            {
              name: "2-2",
              label: "透析记录"
            },
            {
              name: "2-4",
              label: "排班信息"
            },
            {
              name: "2-5",
              label: "宣教信息"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleNodeClick(data) {
      var name = data.name;
      if (name == "1-1") {
        this.$router.push({ path: "/patients/patient/" + this.id });
      } else if (name == "1-2") {
        this.$router.push({ path: "/patients/course?id=" + this.id });
      } else if (name == "1-3") {
        this.$router.push({ path: "/patients/inspection?id=" + this.id });
      } else if (name == "1-4") {
        this.$router.push({
          path: "/patients/patient/" + this.id + "/doctorAdvice"
        });
      } else if (name == "1-5") {
        this.$router.push({ path: "/patients/rescue?id=" + this.id });
      } else if (name == "2-1") {
        this.$router.push({
          path: "/patients/patient/" + this.id + "/dialysisSolution"
        });
      } else if (name == "2-2") {
        this.$router.push({
          path: "/patients/patient/" + this.id + "/dialysisRecord"
        });
      } else if (name == "2-4") {
        this.$router.push({
          path: "/patients/patient/" + this.id + "/scheduling"
        });
      } else if (name == "2-5") {
        this.$router.push({
          path: "/patients/patient/" + this.id + "/proeducation"
        });
      }
    },
    changePatient(value) {
      console.log(value);
      this.$router.push("/patients/patient/" + value);
    },
    getList() {
      fetchAllList().then(response => {
        if (response.data.state == 1) {
          this.patientsList = response.data.data.patients;
          var len = this.patientsList.length;
          if (len > 0) {
            for (let index = 0; index < len; index++) {
              if (this.patientsList[index].id == this.id) {
                this.currentPatient = this.patientsList[index];

                this.selectID = this.patientsList[index].id;
                this.$emit("tran-patient", this.currentPatient);
                break;
              }
            }
          }
        }
      });
    },
    tranAge(birthday) {
      var birth = uParseTime(birthday, "{y}-{m}-{d}");
      return jsGetAge(birth, "-");
    },
    tranSex(gender) {
      var sex = "未知";
      switch (gender) {
        case 1:
          sex = "男";
          break;
        case 2:
          sex = "女";
          break;
        default:
          break;
      }
      return sex;
    },
    querySearchAsync(keyword, cb) {
      let key = "";
      if (keyword != undefined) {
        key = keyword;
      }
      let searchArray = [];
      PostSearch(key).then(response => {
        if (response.data.state == 1) {
          searchArray = response.data.data.patient;
          cb(searchArray);
        } else {
          this.$message.error(response.data.msg);
          cb([]);
        }
      });
    },
    handleSelect(val) {
      this.$router.push("/patients/patient/" + val.id);
    }
  },
  created() {
    this.treeKey = this.defaultActive;
    this.getList();
  }
};
</script>

<style>
.patient-menu .el-tree-node__content {
  font-size: 14px;
  height: 40px;
  font-weight: 400;
}
.patient-menu .el-tree-node__label:hover {
  color:#409eff;
}
.patient-menu .el-tree-node:focus > .el-tree-node__content {
  color:#409eff;
}
.patient-menu .el-tree-node .el-tree-node.is-current > .el-tree-node__content {
  color:#409eff;
}
.patient-menu .el-tree {
  background: #f6f8f9;
}
.patient-menu {
  -webkit-transition: width 0.28s;
  transition: width 0.28s;
  width: 180px !important;
  height: 100%;
  position: relative;
  font-size: 0px;
  top: 0;
  float: left;
  bottom: 0;
  left: 0;
  /* z-index: 99; */
  overflow: hidden;
}

.patient-center-menu .el-icon-arrow-down:before {
  content: "";
}
</style>