lis8.0-vue3/src/views/liswork/batchPrint/index.vue

<template>
  <div class="app-container ">
    <el-row :gutter="20" class="top-area">
      <el-col :span="16" class="top-left-col">
        <el-form :model="queryForm" label-width="100px" class="query-form">
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="样本日期：">
                <el-date-picker v-model="queryForm.jyrq" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  placeholder="选择日期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="组别：">
                <SelectTable v-model:data="queryForm.yqz" :tableData="instrGroupOptions" placeholder=""
                  @getDataValue="handleinstrGroupChange" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验仪器：">
                <SelectTable v-model:data="queryForm.yq" :tableData="instrOptions" clearable placeholder=""
                  @getDataValue="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="标本号：">
                <el-input v-model="queryForm.ybh" placeholder="可以输入如:1,2,5-6等格式" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="病人类型：">
                <SelectTable v-model:data="queryForm.brly" :tableData="dictData.PT" placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="科室：">
                <SelectTable v-model:data="queryForm.ksdh" :tableData="dictData.DP" placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="16">
            <el-form-item label="打印顺序：" class="print-order-item">
              <el-radio-group v-model="queryForm.sorttype">
                <el-radio v-for="order in printOrders" :key="order.value" :label="order.value">
                  {{ order.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
        </el-form>
        <div>
          <el-button type="primary" icon="search" @click="searchHandle">查询</el-button>
          <el-button type="warning" icon="Printer" :loading="printLoading" plain @click="printHandle">打印</el-button>
        </div>
      </el-col>
      <el-col :span="8" class="top-right-col">
        <div class="option-panel">
          <div class="option-title">过滤选项</div>
          <el-row :gutter="12" class="option-list">
            <el-col :span="12" v-for="option in optionItems">
              <el-checkbox v-model="queryForm[option.key]" :label="option.label" :true-value="1" :false-value="0"
                :disabled="option.disabled" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <div class="bottom-card mt10">
      <el-table :data="tableData" border style="width: 100%" height="100%" v-loading="loading" show-overflow-tooltip>
        <el-table-column label="样本号" prop="ybh" width="120" align="center" />
        <el-table-column label="病人姓名" prop="brxm" width="120" align="center" />
        <el-table-column label="病人类型" prop="brly" width="120" align="center">
          <template #default="scope">
            {{ formatDict(scope.row.brly, 'PT') }}
          </template>
        </el-table-column>
        <el-table-column label="科室" prop="ksdh" width="200" align="center">
          <template #default="scope">
            {{ formatDict(scope.row.ksdh, 'DP') }}
          </template>
        </el-table-column>
        <el-table-column label="床号" prop="ch" width="120" />
        <el-table-column label="消息提示" prop="cp_msg">
          <template #default="scope">
            <span v-if="scope.row.flag == 0" style="color:#f00"> {{ scope.row.cp_msg }} </span>
            <span> {{ scope.row.cp_msg }} </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 打印进度遮罩 -->
    <PrintReportMask ref="printMaskRef" :ws-data="printWsData" />
  </div>
</template>

<script setup lang="ts">
import { getComDicts } from '@/api/liswork/dict/ComDict';
import { getGroupInstrdList } from '@/api/liswork/work/LisWork';
import dayjs from 'dayjs';
import { queryBatchPrintService, batchPrintAll } from '@/api/liswork/batch/index';
import { getDictData, formatDict, dictData } from '@/hooks'
import { useCommonStore } from '@/store/modules/commonStore';
import { ElMessage, ElNotification } from 'element-plus';
import PrintReportMask from '@/components/PrintReportMask/index.vue'
import emitter from '@/utils/mitt';
import { classCom } from '@/utils/classCom';
const mbStore = useCommonStore();

const queryForm = reactive({
  jyrq: dayjs().format('YYYY-MM-DD'),
  yqz: '',
  yq: mbStore.defaultConfig.defaultinstr || '',
  ybh: '',
  brly: '',
  ksdh: '',
  sorttype: 1,
  notbrly: null,
  notksdh: null,
  pcyx: null,
  dyyx: null,
  nobrxm: null,
  nocsjg: null,
  fzdy: null,
  dybz: null,
  jgbz: null,
  jgbz2: 1,
});

const printWsData = ref('');

const printLoading = ref(false);
const loading = ref(false);

const tableData = ref([]);

const printOrders = ref([
  { label: '样本号', value: 1 },
  { label: '科室+床号+样本号', value: 2 },
  { label: '病人类型+科室+床号+样本号', value: 3 },
  { label: '病人类型+科室+样本号', value: 4 },
  { label: '阳性结果', value: 5 }
]);

const optionItems = ref([
  { key: 'notbrly', label: '排除选择的病人类型', disabled: false },
  { key: 'notksdh', label: '排除选择的科室', disabled: false },
  { key: 'pcyx', label: '排除阴性报告', disabled: false },
  { key: 'dyyx', label: '仅打印阳性报告', disabled: false },
  { key: 'nobrxm', label: '无病人姓名不打印', disabled: false },
  { key: 'nocsjg', label: '无检验结果不打印', disabled: false },
  { key: 'fzdy', label: '分组打印报告', disabled: false },
  { key: 'dybz', label: '打印未打印报告', disabled: false },
  { key: 'jgbz', label: '打印未审核报告', disabled: true },
  { key: 'jgbz2', label: '打印已审核报告', disabled: true }
])
// 查询
const searchHandle = () => {
  if (!queryForm.yq) return ElMessage.warning('检验仪器不能为空！')
  loading.value = true
  queryForm.jyrq = dayjs(queryForm.jyrq).format('YYYY-MM-DD') + ' 00:00:00'
  queryBatchPrintService(queryForm).then((res) => {
    loading.value = false
    if (res.code == 0) {
      tableData.value = res.data
    } else {
      tableData.value = []
    }
  })
}
// 打印
const printHandle = () => {
  if (!tableData.value.length) return ElMessage.warning('样本打印数据为空')
  printLoading.value = true
  batchPrintAll(queryForm).then((res) => {
    printLoading.value = false
  }).finally(() => {
    printLoading.value = false
  })
}

const handleinstrGroupChange = () => {
  queryForm.yq = ''
  getYqConfig()
}

const instrGroupOptions = ref<{ value: string, label: string }[]>([])
const instrOptions = ref<{ value: string, label: string }[]>([])

const getYqConfig = () => {
  getGroupInstrdList({ lisgroup: queryForm.yqz })
    .then((res: any) => {
      if (res.code == 0) {
        instrOptions.value = res.data.map((item: any) => ({
          value: item.yq.trim(),
          label: item.yqmc
        }))
      }
    })
}

// 监听打印消息处理函数
const handlePrintMsg = (msg) => {
  console.log('打印进度消息', msg)
  const info = JSON.parse(msg.data)
  // 匹配表格，更新cp_msg
  const matchrow: any = tableData.value.find((item: any) => item.ybh == info.ybh)
  if (matchrow) {
    matchrow.cp_msg = info.errorMsg
  }
  // 传递给进度弹窗
  printWsData.value = msg.data
}

onMounted(() => {
  getComDicts({ zdlb: 'GROUP' }).then((res: any) => {
    instrGroupOptions.value = res.data.map((item: any) => ({
      value: item.zddh.trim(),
      label: item.zdmc
    }))
    instrGroupOptions.value.push({ value: 'ALL', label: '所有仪器' })
    getYqConfig()

    getDictData('PT', 'DP')
  });
  // 监听打印消息
  emitter.on('printReport', handlePrintMsg)
});

onBeforeUnmount(() => {
  emitter.off('printReport', handlePrintMsg)
})
</script>


<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
}

.query-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.option-panel {
  padding: 5px 12px;
  background: #f8fbff;
  border: 1px solid #d9e8fb;
  border-radius: 8px;

  .option-title {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 3px;
      width: 4px;
      height: 16px;
      border-radius: 2px;
      background: #3282F6;
    }
  }
}

.bottom-card {
  border-top: 1px solid #d9e8fb;
  padding: 10px 0;
  flex: 1;
  overflow: hidden;
}

.action-buttons {
  text-align: center;
}
</style>