web_dist/src/views/hospitalization/case-front-sheet/JieShouHuiZhen.vue

<template>
  <el-container>
    <el-header height="36px" style="margin-top: 8px">
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                      end-placeholder="结束日期"></el-date-picker>
      <el-button @click="getHuiZhenDataClick" type="primary" icon="el-icon-search">检索</el-button>
      <el-button icon="el-icon-upload" type="primary" @click="baoCunHuiZhenClick">保存</el-button>
      <el-button icon="el-icon-printer" type="success" @click="daYingClick">打印</el-button>
      <el-tag type="danger">会诊意见限制 1100 个字</el-tag>
    </el-header>
    <el-container>
      <el-aside width="400px">
        <el-table :data="huanZeData" :height="tableHeight" @row-click="dianJiDanYuanGe" stripe highlight-current-row>
          <el-table-column label="床号" prop="bedNo" width="40px"></el-table-column>
          <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
          <el-table-column label="住院次数" prop="admissTimes"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="申请次数" prop="reqTimes"></el-table-column>
        </el-table>
        <el-pagination
            :pager-count="5"
            small
            :total="total"
            layout="prev, pager, next,total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </el-aside>
      <el-main>
        <div :style="mainInfo" class="main-info-parent">
          <div id="huiZhenXinXiDaYin">
            <h1 style="text-align: center; font-size: 30px">湖南泰和医院</h1>
            <h4 style="text-align: center; font-size: 17px; margin-top: 0px">会 诊 记 录 单</h4>
            <div class="divHuanZheXinXi">
              <div class="huanZheXinXi" style="margin-left: 20px">住院号：{{ huanZheXinXi.inpatientNo }}</div>
              <div class="huanZheXinXi" style="margin-left: 25px">姓名：{{ huanZheXinXi.name }}</div>
              <div class="huanZheXinXi">性别：{{ cptSex(huanZheXinXi.sex) }}</div>
              <div class="huanZheXinXi" style="width: 90px">年龄：{{ huanZheXinXi.age }}</div>
              <div class="huanZheXinXi" style="width: 140px">科室：{{ huanZheXinXi.deptCodeName }}</div>
              <div class="huanZheXinXi">床号：{{ huanZheXinXi.bedNo }}</div>
            </div>

            <div class="huiZhenBody">
              <div>
                <div>
                  请
                  <div class="reqDept">{{ huanZheXinXi.reqDept1 }}</div>
                  会诊
                  <div class="huiZhenJiBie">会诊类别：{{ hzLeiBie(huanZheXinXi.hzType) }}</div>
                </div>
              </div>
              <!-- 病情简介 -->
              <div class="zhenDuanBianJu">
                病情简介 <br/>
                <textarea v-model="huanZheXinXi.reqComment" readonly="value" class="zhenDuanTextarea"
                          style="height: 154px"/>
              </div>

              <!-- 目前主要诊断 -->
              <div class="zhenDuanBianJu">
                目前主要诊断 <br/>
                <textarea v-model="huanZheXinXi.hzZd" readonly="value" class="zhenDuanTextarea"
                          style="height: 50px"></textarea>
              </div>

              <!-- 会诊目的 -->
              <div class="zhenDuanBianJu">
                会诊目的 <br/>
                <textarea v-model="huanZheXinXi.hzMd" readonly="value" class="zhenDuanTextarea"
                          style="height: 50px"></textarea>
              </div>
              <div class="qingQiuHuiZhenXinXi">
                <div class="div1">请求会诊科室：{{ huanZheXinXi.deptCodeName }}</div>
                <div class="div2">会诊申请医师：{{ huanZheXinXi.reqDoctor }}</div>
                <div>申请时间：{{ huanZheXinXi.reqDate }}</div>
              </div>
            </div>
            <!-- 会诊意见  -->
            <div class="huiZhenBody">
              <!-- 会诊意见 -->
              <div class="zhenDuanBianJu">
                会诊意见 <br/>
                <textarea
                    maxlength="1100"
                    autoHeight="true"
                    v-model="huanZheXinXi.hzComment"
                    class="zhenDuanTextarea"
                    style="height: 329px"
                    onkeydown="javascript:if(event.keyCode == 13)event.returnValue = false;"
                >
                </textarea>
              </div>
              <div class="qingQiuHuiZhenXinXi">
                <div class="div1">会诊科室：{{ deptName }}</div>
                <div class="div2">医师：{{ doctorName }}</div>
                <div>会诊时间：{{ shiShidate }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {ref} from '@vue/reactivity'
import {getDeptName, getHuanZheXinXi, getHuiZhenData, wanChenHuiZhen} from '@/api/case-front-sheet/jie-shou-hui-zhen'
import {cptSex} from '@/utils/computed'
import store from '@/store'
import {getDateRangeFormatDate, getDate, getDatetime} from '@/utils/date'
import {onActivated, onDeactivated, onMounted} from '@vue/runtime-core'
import {ElMessage, ElMessageBox} from 'element-plus'
import '@/css/hui-zhen-ji-lv-dan.css'
import {initLodop, getLodop} from '@/utils/c-lodop'
import {huiZhenJiLvDanCss} from '../../../data/css-for-print'

export default {
  setup() {
    ////////////////////////////// 获取屏幕高度 /////////////////////////////////////////

    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70

    const deptName = ref('')

    const doctorName = store.state.user.info.name

    const shiShidate = ref('')

    onMounted(() => {
      initLodop()
      let MoRenRiQi = getDate(new Date())
      dateRange.value[0] = MoRenRiQi
      dateRange.value[1] = MoRenRiQi
      getHuiZhenDataClick()

      getDeptName(store.state.user.info.deptCode).then((res) => {
        deptName.value = res
      })
    })

    /**
     * 实时获取 时间 先定义一个专门赋值的 函数
     * 在开启 计时器 1秒一次 在页面进入的时候 清除计时器 然后在打开
     * 在离开页面的时候也要开启
     */
    function shiJian() {
      shiShidate.value = getDatetime(new Date())
    }

    var interval = setInterval(shiJian, 1000)

    onActivated(() => {
      clearInterval(interval)
      interval = setInterval(shiJian, 1000)
    })

    onDeactivated(() => {
      clearInterval(interval)
    })

    ////////////////////////////// 获取患者信息 需分页  /////////////////////////////////////////
    const dateRange = ref([])

    const huanZeData = ref([])
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

    const getHuiZhenDataClick = () => {
      let riQi = getDateRangeFormatDate(dateRange.value)
      getHuiZhenData(store.state.user.info.deptCode, currentPage.value, pageSize.value, riQi.startTime, riQi.endTime).then((res) => {
        huanZeData.value = res.records
        total.value = res.total
      })
    }

    /// 点击下一页触发
    const handleCurrentChange = (val) => {
      currentPage.value = val
      getHuiZhenDataClick()
    }
    //////////////////////////////////////////// 点击右边的表格 ///////////////////////////////////////////////////////////
    const huanZheXinXi = ref({})

    const dianJiDanYuanGe = (val) => {
      getHuanZheXinXi(val.admissTimes, val.reqTimes, val.inpatientNo).then((res) => {
        huanZheXinXi.value = res
      })
    }

    /**
     * 点击保存 会诊信息
     * 要判断 一下 是仅保存 还是 完成会诊
     */
    const baoCunHuiZhenClick = () => {
      if (!huanZheXinXi.value.name) {
        ElMessage.error({
          message: '请先选择患者',
          showClose: true,
        })
        return
      }
      ElMessageBox.confirm('是否保存【' + huanZheXinXi.value.name + '】的会诊信息', '提示', {
        type: 'warning',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        showClose: false,
        cancelButtonText: '仅保存',
        confirmButtonText: '完成会诊',
      })
          .then(() => {
            huanZheXinXi.value.statusFlag = 2
            // 完成 会诊 发送 axios
            wanChenHuiZhen(huanZheXinXi.value)
            getHuiZhenDataClick()
            huanZheXinXi.value = []
          })
          .catch(() => {
            huanZheXinXi.value.statusFlag = 1
            wanChenHuiZhen(huanZheXinXi.value)
          })
    }

    ///////////////////////////////////////////////////////// 开启打印 ///////////////////////////////////////////////////////////////////////////////

    const daYingClick = () => {
      if (!huanZheXinXi.value.name) {
        ElMessage.error({
          message: '请先选择患者',
          showClose: true,
        })
        return
      }
      // 在vue 中使用 v-model 绑定的 都需要 这样不然没有数据
      const allTextArea = document.body.getElementsByTagName('textarea')
      const textInput = document.body.getElementsByTagName('input')
      for (var i = 0; i < textInput.length; i++) {
        textInput[i].setAttribute('value', textInput[i].value)
      }
      for (let i = 0; i < allTextArea.length; i++) {
        allTextArea[i].innerText = allTextArea[i].value
      }
      // A4: 210毫米 × 297毫米 = 793.70px *  1122.52px
      let LODOP = getLodop()

      // 导入css样式，以及 内容
      var strFormHtml = huiZhenJiLvDanCss + '<body>' + document.getElementById('huiZhenXinXiDaYin').innerHTML + '</body>'
      LODOP.PRINT_INIT('会诊记录单') // 初始化打印机 名字
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '') // 设置纸张大小  A4
      LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
      LODOP.ADD_PRINT_HTM('2mm', '5mm', '100%', '100%', strFormHtml) //要打印的内容
      LODOP.SET_PRINT_STYLE('ItemType', 3) //设置对象风格
      LODOP.ADD_PRINT_TEXT('290mm', '190mm', '20mm', '2mm', '第#页/共&页') //增加纯文本项
      LODOP.PREVIEW() // 关闭
    }

    const mainInfo = {
      height: windowSize.h - 45 + 'px',
      padding: '0 20px',
      overflowY: 'scroll',
    }

    return {
      doctorName,
      tableHeight,
      huanZeData,
      currentPage,
      pageSize,
      total,
      cptSex,
      handleCurrentChange,
      huanZheXinXi,
      dianJiDanYuanGe,
      dateRange,
      getHuiZhenDataClick,
      baoCunHuiZhenClick,
      mainInfo,
      daYingClick,
      hzLeiBie,
      getDatetime,
      deptName,
      shiShidate,
    }
  },
}

function hzLeiBie(val) {
  switch (val) {
    case '1':
      return '常规会诊'
    case '2':
      return '疑难病例会诊'
    case '3':
      return '急救会诊'
  }
}
</script>

<style></style>