Vue_New/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.trim="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; 年龄：{{ getAge(currentPatient) }} &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-6',
              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-6') {
        this.$router.push({
          path: '/patients/patient/' + this.id + '/dryWeight'
        })
      } 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]
                // console.log("curr", this.currentPatient);
                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)
    },
    getAge: function(val) {
      if (val.id_card_no == undefined) {
        return false
      }
      var thisLen = val.id_card_no.length
      var birth = ''
      if (thisLen == 15) {
        birth = '19' + val.id_card_no.substr(6, 6)
      } else {
        birth = val.id_card_no.substr(6, 8)
      }
      var birthtwo =
        birth.substr(0, 4) +
        '-' +
        birth.substr(4, 2) +
        '-' +
        birth.substr(6, 2)

      var age = jsGetAge(birthtwo, '-')
      return age
    }
  },
  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>