web_dist/src/views/medical-advice/execute-item/PrintExecuteDetail.vue

<template>
  <page-layer>
    <template #header>
      <el-select filterable v-model="queryParam.wardCode" @change="initPatintBedNo"
                 style="width: 130px;margin-right: 10px" size="small">
        <el-option v-for="item in ward" :key="item.code" :label="item.name" :value="item.code">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      执行时间：
      <el-date-picker
          v-model="queryParam.executeTime"
          type="datetime"
          size="small"
          :clearable="false"
          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 150px;margin-right: 10px"/>
      床位范围：
      <el-select v-model="queryParam.startBedNo"
                 clearable
                 style="width: 70px">
        <el-option v-for="item in patintList"
                   :key="item.bedNo"
                   :label="item.bedNo"
                   :value="item.bedNo">
          <span>{{ item.bedNo }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.inpatientNo }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      至
      <el-select v-model="queryParam.endBedNo"
                 style="width: 70px;margin-right: 10px"
                 clearable>
        <el-option v-for="item in reverPatintList"
                   :key="item.bedNo"
                   :label="item.bedNo"
                   :value="item.bedNo">
          <span>{{ item.bedNo }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.inpatientNo }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      频率：
      <el-select v-model="queryParam.frequCodeFlag"
                 style="width: 70px;margin-right: 10px"
      >
        <el-option label="全部" value="0"></el-option>
        <el-option label="临时" value="1"></el-option>
        <el-option label="长期" value="2"></el-option>
      </el-select>
      打印范围：
      <el-select v-model="queryParam.printFlag"
                 style="width: 70px;margin-right: 10px"
      >
        <el-option label="全部" value="0"></el-option>
        <el-option label="新增" value="1"></el-option>
        <el-option label="已打印" value="2"></el-option>
      </el-select>
      <el-radio-group v-model="queryParam.pageClass" size="small" @change="pageClassChange" style="margin-right: 20px">
        <el-radio @click="pageClassChange" label="0">选择分类</el-radio>
        <el-radio label="1">全部分类</el-radio>
      </el-radio-group>
      <el-button icon="Search" type="primary" @click="queryInfo">查询</el-button>
      <el-button icon="Printer" type="success" @click="printInfo">打印</el-button>
    </template>
    <template #main>
      <el-scrollbar class="scrollbar" :max-height="(getWindowSize.h/1.2-100)+'px'" noresize="true">
        <div id="printId">
          <table class="pageTable">
            <thead>
            <tr>
              <td colspan="10" style="width: 100%;border: none;text-align: center;font-size: 25px;font-weight:bold">
                执行项目表
              </td>
            </tr>
            <tr>
              <td colspan="10" style="width: 753px;border: none;">
                <div style="float: left;width: 25%">
                  病房：{{ getWardName(queryParam.wardCode) }}
                </div>
                <div style="float: left;width: 50%">
                  日期：{{ queryParam.executeTime }}至
                  {{ getDiffDays(queryParam.executeTime.split(" ")[0], 1) + " " + queryParam.executeTime.split(" ")[1] }}
                </div>
                <div style="float: left;width: 25%">
                  打印日期：{{ getFormatDatetime(new Date(), 'YYYY-MM-DD') }}
                </div>
              </td>
            </tr>
            <tr>
              <th style="height: 30px">床号</th>
              <th>姓名</th>
              <th>执行项目名称</th>
              <th>频率</th>
              <th>剂量</th>
              <th>给药方式</th>
              <th>执行时间</th>
              <th>嘱托</th>
              <th>执行</th>
              <th>核对</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in resData">
              <td style="width: 5%">{{ item.bedNo }}</td>
              <td style="width: 8%">{{ item.name }}</td>
              <td style="width: 25%">{{ item.orderName }}</td>
              <td style="width: 10%">{{ item.frequCode }}</td>
              <td style="width: 10%">&nbsp;{{ item.dose ? item.dose : item.drugQuan }} {{item.doseUnit}} &nbsp; {{item.unit}}</td>
              <td style="width: 10%;text-align: center">{{ item.supplyName }}</td>
              <td style="width: 10%">{{ item.occTimeStr }}</td>
              <td style="width: 10%">{{ item.instruction }}</td>
              <td style="width: 5%"></td>
              <td style="width: 5%"></td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-scrollbar>
      <el-dialog
          v-model="dialogVisible"
          title="选择分类"
          width="50%"
      >
        <ItemClass ref="itemClassRef" :wardCode="queryParam.wardCode" @closeDiag="closeDiag"
                   @selectionPageClass="selectionPageClass"></ItemClass>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script setup lang="ts" name='PrintExecuteItem'>
import {computed, onMounted, ref} from 'vue'
import {useStore} from 'vuex'
import {getFormatDatetime, getDiffDays} from "@/utils/date"
import {ElMessage, ElMessageBox} from 'element-plus'
import {getAllWards} from "@/api/zhu-yuan-yi-sheng/resident-doctor";
import {queryYpZdGroupName, queryYzYpPageNo} from "@/api/medical-advice/medical-common";
import {queryPatientInfo} from "@/api/medical-advice/medical-advice-management";
import {stringNotBlank} from "@/utils/blank-utils"
import {queryExecuteItemDetail, updateExecuteItemPrintFlag} from "@/api/medical-advice/excute-item";
import PageLayer from "@/layout/PageLayer";
import ItemClass from "@/components/medical-advice/ItemClass";
import {getLodop, initLodop} from '@/utils/c-lodop'
import {getWindowSize} from "@/utils/window-size";
import {userInfoStore} from "@/utils/store-public";

const queryParam = ref({
  wardCode: '',
  startBedNo: '',
  endBedNo: '',
  executeTime: getFormatDatetime(new Date(), 'YYYY-MM-DD' + ' 00:00:00'),
  frequCodeFlag: '0',
  printFlag: '1',
  executeFlag: '2',
  pageClass: '1',
  classCode: '',
  codes: [],
  itemCode: '',
})

//选择分类切换
const pageClassChange = () => {
  if (queryParam.value.pageClass === '0') {
    dialogVisible.value = true
  } else {
    dialogVisible.value = false
  }
}




const selectionPageClass = (val) => {
  queryParam.value.codes = val.codes
  queryParam.value.classCode = val.classCode
  queryParam.value.itemCode = val.itemCode
}

const closeDiag = () => {
  dialogVisible.value = false
}

const dialogVisible = ref(false)

const ward = ref([])

const getWardName = (code) => {
  for (let i = 0; i < ward.value.length; i++) {
    if (code === ward.value[i].code) {
      return ward.value[i].name
    }
  }
}

onMounted(() => {
  initLodop()
  getAllWards().then((res: any) => {
    if (res) {
      ward.value = res
      queryParam.value.wardCode = res[0].code
      initPatintBedNo()
    }
  })

})
const patintList = ref([])
const reverPatintList = computed(() => reverseArray(patintList.value))

function reverseArray(arr) {
  let newArr = [];
  arr.forEach(element => {
    // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
    newArr.unshift(element);
  });
  return newArr;
}

const itemClassRef = ref(null)
const resData = ref([])
const queryInfo = () => {
  queryExecuteItemDetail(queryParam.value).then((res: any) => {
    resData.value = res
  })
}

const printCss = `
.pageTable tr th {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  text-align: left;
  font-size: 12px;
  padding: 0 0;

}
 .pageTable tr td{
   border-bottom:1px dashed black;
   border-top:1px dashed black;
   text-align: left;
   font-size: 12px;
   padding: 0 0;
 }


.pageTable tr td{
  height: 27px;
}

#printId{
  padding: 0 0;
  width: 753px;
}

.pageTable {
  border-collapse: collapse;
}


`




const printInfo = () => {
  updateExecuteItemPrintFlag(resData.value).then((res: any) => {
    let LODOP = getLodop()
    LODOP.PRINT_INIT('执行项目表') // 初始化打印机 名字
    LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '') // 设置纸张大小  A4
    LODOP.ADD_PRINT_TABLE('2mm', '5mm', '205mm', '220mm', '<style>' + printCss + '</style>' + '<body>' + document.getElementById('printId').innerHTML + '</body>') //要打印的内容
    LODOP.SET_PRINT_STYLE('ItemType', 3)
    LODOP.ADD_PRINT_TEXT('250mm', '100mm', '25mm', '10mm', '第#页/共&页')
    LODOP.PREVIEW() // 关闭
  })
}

const initPatintBedNo = () => {
  itemClassRef.value ? itemClassRef.value.setWardCode(queryParam.value.wardCode) : ''
  queryPatientInfo('', queryParam.value.wardCode, '').then((res: any) => {
    patintList.value = res
  })
}
</script>
<style scoped lang="scss">
.pageTable tr th {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  text-align: left;
  font-size: 12px;
  padding: 0 0;

}

#printId .pageTable tr td {
  border-bottom: 1px dashed black;
  border-top: 1px dashed black;
  text-align: left;
  font-size: 12px;
  padding: 0 0;
}




.pageTable tr td {
  height: 27px;
}

#smalPrintId {
  padding: 0 0;
  width: 470px;
}

#printId {
  padding: 0 0;
  width: 753px;
}

.pageTable {
  border-collapse: collapse;
}
</style>