xt_vue/src/xt_pages/upload/fast/FastPatientsSidebar.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>
</template>
<script>
import { fetchAllList, PostSearch } from "@/api/patient";
import { jsGetAge, uParseTime } from "@/utils/tools";

export default {
  name: "FastPatientsSidebar",
  props: {
    id: 0,
    defaultActive: {
      type: String,
      default: "1-1"
    }
  },
  data() {
    return {
      value: "",
      searchArray: [],
      patientsList: null,
      thedefaultActive: 1,
      currentPatient: {},
      selectID: 0,
      keyword: "",
      treeKey: "",
      treeData: [
        {
          name: "1",
          label: "质控数据",
          children: [
            {
              name: "1-1",
              label: "基本信息"
            },
            {
              name: "1-2",
              label: "检验检查"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleNodeClick(data) {
      var name = data.name;
      if (name == "1-1") {
        this.$emit("patient",this.selectID);
      } else if (name == "1-2") {
        this.$emit("inspection",this.selectID);
      }
    },

    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;

              }
            }
          }
        }
      });
    },
    changePatient(value) {
      this.$router.push("/upload/fast?id=" + value);
    },
    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("/upload/fast?id=" + val.id);
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style>
.patient-menu {
  float: left;
  width: 14%;
}
.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;
  overflow: hidden;
} */

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