web_dist/src/views/examination/TjReportInfo.vue

<template>
  <el-container>
    <el-header>
      <el-input v-model="tjid" style="width: 260px" clearable placeholder="请输入患者体检编号"><template #prepend>体检号</template></el-input>
      <el-button type="primary" icon="Search" style="margin-left: 16px" @click="queryTjData">查询</el-button>
    </el-header>
    <el-main>
      <el-row :gutter="6">
        <el-col :span="6">
          <el-table :data="inspectionIndex" :height="tableHeight" stripe highlight-current-row @row-click="queryDetail">
            <el-table-column prop="time" label="报告日期" width="140"></el-table-column>
            <el-table-column prop="name" label="报告内容"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="18">
          <div id="reportDetail" style="width: 100%; height: 100%; padding: 0 2px; background-color: white">
            <div v-if="tjxm === '首页'">
              <div style="text-align: right; height: 77px; margin-bottom: 20px">
                <svg id="barcode" v-if="tjid"></svg>
              </div>
              <div style="text-align: right; margin-bottom: 200px">
                <h1 style="width: 100%; text-align: center; font-weight: bold; height: 30px; line-height: 30px">长&emsp;沙&emsp;泰&emsp;和&emsp;医&emsp;院</h1>
                <h1 style="width: 100%; text-align: center; font-weight: bold; height: 30px; line-height: 30px">体&emsp;检&emsp;报&emsp;告</h1>
              </div>
              <div style="width: 100%; font-size: 18px">
                <el-row :gutter="6">
                  <el-col :span="6"></el-col>
                  <el-col :span="6">体检编号：{{ tjReportDetail.reportHeader.条码号 }}</el-col>
                  <el-col :span="6">
                    <el-checkbox-group v-model="checkboxList"><el-checkbox label="个人"></el-checkbox><el-checkbox label="团体"></el-checkbox></el-checkbox-group>
                  </el-col>
                  <el-col :span="6"></el-col>
                </el-row>
                <el-row :gutter="6" style="margin-bottom: 8px">
                  <el-col :span="6"></el-col>
                  <el-col :span="4">姓&emsp;&emsp;名：{{ tjReportDetail.reportHeader.姓名 }}</el-col>
                  <el-col :span="4">性&emsp;&emsp;别：{{ filterSex(tjReportDetail.reportHeader.性别) }}</el-col>
                  <el-col :span="4">年&emsp;&emsp;龄：{{ tjReportDetail.reportHeader.年龄 }}</el-col>
                  <el-col :span="6"></el-col>
                </el-row>
                <el-row :gutter="6" style="margin-bottom: 8px">
                  <el-col :span="6"></el-col>
                  <el-col :span="12">单&emsp;&emsp;位：{{ tjReportDetail.reportHeader.工作单位 }}</el-col>
                  <el-col :span="6"></el-col>
                </el-row>
                <el-row :gutter="6" style="margin-bottom: 8px">
                  <el-col :span="6"></el-col>
                  <el-col :span="12">部&emsp;&emsp;门：{{ tjReportDetail.reportHeader.所在部门 }}</el-col>
                  <el-col :span="6"></el-col>
                </el-row>
                <el-row :gutter="6" style="margin-bottom: 160px">
                  <el-col :span="6"></el-col>
                  <el-col :span="6">体检日期：{{ filterDate(tjReportDetail.reportHeader.登记日期) }}</el-col>
                  <el-col :span="6">电&emsp;&emsp;话：{{ tjReportDetail.reportHeader.手机 }}</el-col>
                  <el-col :span="6"></el-col>
                </el-row>
                <div style="margin: 5px 0; border-top: 1px solid gray"></div>
                <h5 style="width: 100%; text-align: center; height: 5px; line-height: 5px">长沙泰和医院</h5>
                <h5 style="width: 100%; text-align: center; height: 5px; line-height: 5px">咨询电话：0731-88518508</h5>
                <h4 style="width: 100%; text-align: center; font-weight: bold; height: 5px; line-height: 5px">本体检报告仅供临床参考，不作为诊断依据，谢谢你的光临！</h4>
              </div>
            </div>
            <div v-else-if="tjxm === '体检总结'">
              <el-row :gutter="6" style="text-align: center; padding-top: 10px">
                <el-col :span="6">条码号：{{ tjReportDetail.reportSummary.条码 }}</el-col>
                <el-col :span="6">姓名：{{ tjReportDetail.reportHeader.姓名 }}</el-col>
                <el-col :span="6">年龄：{{ tjReportDetail.reportHeader.年龄 }}</el-col>
                <el-col :span="6">日期：{{ filterDate(tjReportDetail.reportSummary.汇总日期) }}</el-col>
              </el-row>
              <div style="margin: 5px 0; border-top: 1px solid gray"></div>
              <el-row :gutter="6" style="padding-bottom: 6px; margin: 0 20px 0 20px">
                <span style="font-weight: bold">
                  尊敬的用户：<br />
                  &emsp;&emsp;您好! 欢迎您莅临长沙泰和医院体检中心。身体健康是学习和工作的基础，注意健康是生活和事业发展的必须。世界卫生组织(WHO)提出：“健康是人的生
                  理、心里和社会的完美状态，而不仅仅是指无疾病或非体弱的状态”。通过体检，检查和发现影响健康的有关因素，成为促进您身心健康的重要措施和保证。为了
                  您的健康，我们真诚的建议您定期进行健康体检。
                </span>
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 22px; margin: 0 20px 0 20px">
                <span style="font-weight: bold"> 祝您身体健康，工作顺利！ </span>
              </el-row>
              <div style="margin: 5px 0; border-top: 1px solid gray"></div>
              <el-row :gutter="6" style="padding-bottom: 22px; margin: 0 20px 0 20px">
                <div>
                  <span style="font-size: 18px"><b>一丶体检结论及健康建议</b></span>
                </div>
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 240px; margin: 0 20px 0 40px">
                <el-col :span="24">
                  <span style="font-size: 16px">
                    <b>
                      <p v-html="tjReportDetail.reportSummary.汇总建议"></p>
                    </b>
                  </span>
                </el-col>
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 8px; margin: 0 20px 0 20px">
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"
                  ><span style="font-size: 18px"
                    ><b>汇总：{{ tjReportDetail.reportSummary.汇总医生 }}</b></span
                  ></el-col
                >
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 8px; margin: 0 20px 0 20px">
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"
                  ><span style="font-size: 18px"
                    ><b>主检：{{ tjReportDetail.reportSummary.审核医生 }}</b></span
                  ></el-col
                >
              </el-row>
            </div>
            <div v-else>
              <el-row :gutter="6" style="text-align: center; padding-top: 10px">
                <el-col :span="6">条码号：{{ tjReportDetail.reportSummary.条码 }}</el-col>
                <el-col :span="6">姓名：{{ tjReportDetail.reportHeader.姓名 }}</el-col>
                <el-col :span="6">年龄：{{ tjReportDetail.reportHeader.年龄 }}</el-col>
                <el-col :span="6">日期：{{ filterDate(tjReportDetail.reportSummary.汇总日期) }}</el-col>
              </el-row>
              <div style="margin: 5px 0; border-top: 1px solid gray"></div>
              <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px">
                <div style="text-align: center">
                  <h2>{{ tjxm }}</h2>
                </div>
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 8px; margin: 0 20px 0 20px">
                <el-table :data="inspectionItems.slice(pageSize * (currentPage - 1), pageSize * currentPage)" :height="tableHeight1" stripe highlight-current-row>
                  <el-table-column prop="no" label="序号" width="70px"></el-table-column>
                  <el-table-column prop="item" label="体检项目"></el-table-column>
                  <el-table-column label="体检结果">
                    <template #default="scope">
                      {{ scope.row.result }}
                      <span style="color: #f56c6c; font-size: 18px">
                        <b>{{ scope.row.diffset }} </b>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit" label="单位"></el-table-column>
                  <el-table-column prop="norm" label="参考值或范围"></el-table-column>
                </el-table>
                <el-pagination
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :page-sizes="[15, 30, 45, 60]"
                  :total="inspectionItems.length"
                  layout="total, sizes, prev, pager, next, jumper"
                  style="margin-top: 5px"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                ></el-pagination>
              </el-row>
              <div style="margin: 5px 0; border-top: 1px solid gray"></div>
              <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px" v-if="itemResult.诊断内容">
                <h3>
                  科室小结：<span style="color: blue">{{ itemResult.诊断内容 }}</span>
                </h3>
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px">
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6">检验：{{ itemResult.检查医生签名 }}</el-col>
                <el-col :span="6">审核：{{ itemResult.审核医生签名 }}</el-col>
              </el-row>
              <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px">
                <h5>注：此检验报告只对本次标本负责，如有疑问请七日内复查。</h5>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import { reactive, ref, onMounted } from 'vue'
import store from '@/store'
import { getTjReportData } from '@/api/tj-report/tj-report'
import JsBarcode from 'jsbarcode'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 45
    const tableHeight1 = windowSize.h - 360
    const inspectionIndex = ref([])
    const inspectionItems = ref([])
    const itemResult = ref({})
    const barcodeValue = ref('')
    const tjid = ref('')
    const tjxm = ref('首页')
    const checkboxList = ref([])
    const pageSize = ref(30)
    const currentPage = ref(1)
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }
    const tjReportDetail = reactive({
      reportHeader: {},
      reportItems: [],
      reportSummary: {},
    })

    onMounted(() => {
      inspectionIndex.value = [{ name: '首页' }, { name: '体检总结' }]
    })

    const queryDetail = (row) => {
      let item = row.name
      tjxm.value = item

      if (tjxm.value && item === '首页') {
        nextTick(() => {
          JsBarcode('#barcode', tjid.value, {
            lineColor: '#333', //线条颜色
            width: 2, //线宽
            height: 35, //条码高度
            displayValue: true, //是否显示文字信息
          })
        })
      } else if (item != '首页' && item != '体检总结') {
        let items = []
        inspectionItems.value = []
        for (let i = 0; i < tjReportDetail.reportItems.length; i++) {
          if (tjReportDetail.reportItems[i][item]) {
            items = tjReportDetail.reportItems[i][item]
          }
        }

        // 解析获取的检查结果(过滤没有结果的检查等)
        let resultItems = []
        if (items) {
          let no = 1
          for (let i = 0; i < items.length; i++) {
            if (i == items.length - 1) {
              itemResult.value = items[i]
            }

            if (!items[i]['结果']) {
              continue
            }

            let _item = { no: '', item: '', result: '', unit: '', norm: '', diffset: '' }
            _item.no = no
            _item.item = items[i]['检查项目']
            _item.result = items[i]['结果']
            if (items[i]['阳性标识']) {
              _item.diffset = items[i]['阳性标识']
            }
            _item.unit = items[i]['单位']
            _item.norm = items[i]['参考范围显示效果']

            resultItems.push(_item)
            no = no + 1
          }
        }
        inspectionItems.value = resultItems
      }
    }

    const queryTjData = () => {
      if (!tjid.value) {
        ElMessage({
          message: '请输入患者体检编号。',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }

      JsBarcode('#barcode', tjid.value, {
        lineColor: '#333', //线条颜色
        width: 2, //线宽
        height: 35, //条码高度
        displayValue: true, //是否显示文字信息
      })

      const param = {
        tjid: tjid.value,
      }
      getTjReportData(param)
        .then((res) => {
          if (!res || res.length == 0) {
            ElMessage({
              message: '没有体检报告数据',
              type: 'warning',
              duration: 2000,
              showClose: true,
            })
            return
          }

          inspectionIndex.value = [{ name: '首页' }, { name: '体检总结' }]
          for (const key in res) {
            if (res[key].reportHeader) {
              tjReportDetail.reportHeader = res[key].reportHeader
            } else if (res[key].reportItems) {
              inspectionIndex.value = inspectionIndex.value.concat(res[key].reportItems)
            } else if (res[key].reportSummary) {
              tjReportDetail.reportSummary = res[key].reportSummary
            } else {
              tjReportDetail.reportItems.push(res[key])
            }
          }

          barcodeValue.value = tjReportDetail.reportHeader.条码号
          tjid.value = tjReportDetail.reportHeader.条码号
          if (tjReportDetail.reportHeader.团体or个人 === '0') {
            checkboxList.value = ['团体']
          } else if (tjReportDetail.reportHeader.团体or个人 === '1') {
            checkboxList.value = ['个人']
          } else {
            checkboxList.value = []
          }
        })
        .catch((e) => {
          console.log(e)
        })
    }

    return {
      barcodeValue,
      tableHeight,
      tableHeight1,
      tjid,
      tjxm,
      checkboxList,
      tjReportDetail,
      inspectionIndex,
      inspectionItems,
      itemResult,
      pageSize,
      currentPage,
      queryDetail,
      queryTjData,
      filterSex,
      filterDate,
      handleCurrentChange,
      handleSizeChange,
    }
  },
}

function filterSex(val) {
  switch (val) {
    case '0':
      return '未填'
    case '1':
      return '男'
    case '2':
      return '女'
    case '3':
      return '未知'
  }
  return ''
}

// 根据时间戳返回年月日
function filterDate(val) {
  if (val) {
    let date = new Date(val)

    if (!date) {
      return ''
    }
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    return Y + M + D
  } else {
    return ''
  }
}
</script>