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="结束日期" size="mini"> </el-date-picker>
      <el-button @click="getHuiZhenDataClick" size="mini" type="primary" icon="el-icon-search">检索</el-button>
      <el-button icon="el-icon-upload" type="primary" size="mini" @click="baoCunHuiZhenClick">保存</el-button>
      <el-button icon="el-icon-printer" type="success" size="mini" @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">医师：{{ Cookie.get('name') }}</div>
                <div>会诊时间：{{ shiShidate }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ref } from '@vue/reactivity'
import Cookie from 'js-cookie'
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 shiShidate = ref('')

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

      getDeptName(Cookie.get('dept')).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(Cookie.get('dept'), currentPage.value, pageSize.value, riQi.stratTime, 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,
        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 {
      tableHeight,
      huanZeData,
      currentPage,
      pageSize,
      total,
      cptSex,
      handleCurrentChange,
      huanZheXinXi,
      dianJiDanYuanGe,
      dateRange,
      getHuiZhenDataClick,
      baoCunHuiZhenClick,
      mainInfo,
      daYingClick,
      hzLeiBie,
      Cookie,
      getDatetime,
      deptName,
      shiShidate,
    }
  },
}
function hzLeiBie(val) {
  switch (val) {
    case '1':
      return '常规会诊'
    case '2':
      return '疑难病例会诊'
    case '3':
      return '急救会诊'
  }
}
</script>

<style></style>