12病历首页

前置准备

修改components/index.vue
注释掉： line-height: 160px;

.el-main {
height: 100%;
background-color: #E9EEF3;
color: #333;
text-align: center;
/* line-height: 160px; */
}

医生病历首页

1、路由 ：

{
path: '/MedicalRecordIndex',
name: 'MedicalRecordIndex',
component: DocIndex
}

2、doc/index.vue

<template>
  <el-card class="box-card">
    <el-row>
      <!--左侧 患者信息-->
      <el-col :span="8">
        <patient @getPatient="getPatient"></patient>
      </el-col>

      <!--右侧 病历信息 -->
      <el-col :span="16">
        <el-card class="box-card-child">
          <!--头-->
          <div slot="header" class="clearfix">
            <span style="float: left;font-size: 12px;">隐藏患者栏</span>
            <span style="float: left;font-size: 12px;">&nbsp; </span>
            <strong>患者姓名：</strong><span>{{this.patient.realName}}</span>
            <strong>病历号:</strong><span> {{this.patient.caseNumber}}</span>
            <strong> 性别： </strong><span>{{this.patient.gender}}</span>
            <el-button style="float: right; padding: 3px 0;font-size: 12px;" type="text">诊毕</el-button>
          </div>
          <!--体  registerId是挂号的编号，对应register表的主键-->
          <medicalRecord :registerId="registerId" :caseNumber="caseNumber"></medicalRecord>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>
<style>
  .clearfix {
    font-size: 12px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;

  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  #app {
    margin: 0;
  }
</style>


<script>
  import patient from '@/components/doc/patient'
  import medicalRecord from '@/components/doc/medicalRecord'
  export default {
    data() {
      return {
        patient: {
          id: '', //挂号主键
          realName: '', //挂号人的姓名
          gender: '', //性别
          caseNumber: '' //病历号
        },
        registerId:'',
        caseNumber:''
      }
    },

    components: {
      patient,
      medicalRecord
    },
    methods: {
      getPatient(data) {
        this.patient = data;
        this.registerId=data.id;
        this.caseNumber=data.caseNumber;
      }
    }
  }
</script>

<style>
</style>

3、左侧

<template>
  <el-card class="box-card-child">
    <div slot="header" class="clearfix">
      <span style="float: left;font-size: 10px;">患者选择</span>
      <el-button style="float: right; padding: 3px 0;font-size: 10px;" type="text">刷新</el-button>
    </div>


      <el-form ref="form" label-width="60px">
        <el-row>
          <el-col :span="16">
            <el-form-item prop="realName" label="患者名">
              <el-input v-model="form.realName" size="mini" ></el-input>
            </el-form-item>

           </el-col>
          <el-col :span="8">
             <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="getPatient"></el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


   <el-row>
      <el-col :span="24" style="align:left;" ><el-tag size="medium">已诊患者</el-tag></el-col>
    <el-table
       ref="singleTable"
       :data="tableData1"
       highlight-current-row
      @current-change="handleCurrentChange"
       style="width: 100%">
       <el-table-column
         type="index"
         width="30">
       </el-table-column>
       <el-table-column
         property="caseNumber"
         label="病历号"
         width="70">
       </el-table-column>
       <el-table-column
         property="realName"
         label="姓名"
         width="70">
       </el-table-column>
       <el-table-column
         property="gender"
         label="性别">
       </el-table-column>
     </el-table>
      </el-row>
  <el-row>
      <el-col :span="24" style="align:left;" ><el-tag>未诊患者</el-tag></el-col>
     <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
       @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
          type="index"
          width="30">
        </el-table-column>
        <el-table-column
          property="caseNumber"
          label="病历号"
          width="70">
        </el-table-column>
        <el-table-column
          property="realName"
          label="姓名"
          width="70">
        </el-table-column>
        <el-table-column
          property="gender"
          label="性别">
        </el-table-column>
      </el-table>
      </el-row>

  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          realName: ''
        },
        tableData: [],
        currentRow: null
      }
    },
    methods:{
      getPatient(){
        alert("开始搜索");
      },
       handleCurrentChange(val) {
        this.currentRow = val;
        console.log("选中的行：",this.currentRow);
        this.$emit("getPatient",this.currentRow);
      }
    },
    mounted() {
      //页面加载时显示未诊患者
      this.$axios.get("http://localhost:8080/register/findRegisterByParams?visitState=1")
      .then(response=>{
        this.tableData=response.data;
      })
       //页面加载时显示已诊患者
      this.$axios.get("http://localhost:8080/register/findRegisterByParams?visitState=2")
      .then(response=>{
        this.tableData1=response.data;
      })
    }
  }
</script>

<style>
  .text {
    font-size: 12px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card-child {
    width: 100%;
  }
</style>

4、doc/medicalRecord.vue 右侧

<template>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="病历首页" name="one">病历首页{{registerId}}{{caseNumber}}</el-tab-pane>
        <el-tab-pane label="检查申请" name="two">检查申请</el-tab-pane>
        <el-tab-pane label="检验申请" name="three">检验申请</el-tab-pane>
        <el-tab-pane label="处置申请" name="foure">处置申请</el-tab-pane>
        <el-tab-pane label="门诊确诊" name="five">门诊确诊</el-tab-pane>
      <el-tab-pane label="成药处方" name="six">成药处方</el-tab-pane>
        <el-tab-pane label="草药处方" name="seven">草药处方</el-tab-pane>
        <el-tab-pane label="费用查询" name="eight">费用查询</el-tab-pane>
     </el-tabs>
</template>

<script>
  export default{
    data(){
      return {
activeName: 'one'
      }

    },
    props:['registerId',"caseNumber"],
    methods:{
      handleClick(tab, event) {
        //alert("切换到："+tab.name);
        console.log("tab:",tab);
              console.log(tab, event);
         }
    }
  }
</script>

<style>
</style>