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.instrGroup" :tableData="instrGroupOptions" placeholder=""
                  @getDataValue="handleinstrGroupChange" :clearable="false" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验仪器：">
                <SelectTable v-model:data="queryForm.yq" :tableData="instrOptions" label="yqmc" value="yq" objKey="yq"
                  placeholder="" :clearable="false" @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="请输入样本号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="病人类型：">
                <SelectTable v-model:data="queryForm.brly" dictType="PT" placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="科室：">
                <SelectTable v-model:data="queryForm.ksdh" dictType="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.printOrder">
                <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="printHandle">查询</el-button>
          <el-button type="warning" icon="Printer" 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-checkbox-group v-model="selectedOptions" @change="updateSelectedOptions">
            <el-row :gutter="12" class="option-list">
              <el-col :span="12" v-for="option in optionItems" :key="option.key">
                <el-checkbox :label="option.key">{{ option.label }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </div>
      </el-col>
    </el-row>

    <div class="bottom-card mt10">
      <div class="table-section">
        <el-table :data="tableData" border style="width: 100%" height="60vh">
          <el-table-column label="样本号" prop="ybh" width="120" />
          <el-table-column label="病人姓名" prop="brxm" width="120" />
          <el-table-column label="病人类型" prop="brly" width="120" />
          <el-table-column label="科室" prop="ksmc" width="120" />
          <el-table-column label="床号" prop="ch" width="120" />
          <el-table-column label="消息提示" prop="msg" />
        </el-table>
      </div>
    </div>
  </div>
</template>



<script setup lang="ts">
import { getComDicts } from '@/api/liswork/dict/ComDict';
import { getGroupInstrdList } from '@/api/liswork/work/LisWork';
import { reactive, ref } from 'vue';

const queryForm = reactive({
  jyrq: '',
  instrGroup: '',
  yq: '',
  ybh: '',
  brly: '',
  ksdh: '',
  printOrder: 'ybh',
  options: {
    excludePatientType: false,
    excludeDept: false,
    excludeNegative: false,
    positiveOnly: false,
    noNameSkip: false,
    noResultSkip: false,
    groupedPrint: false,
    notPrintedOnly: false,
    pendingReview: false,
    reviewedOnly: false
  }
});

const tableData = ref([]);

const printOrders = ref([
  { label: '样本号', value: 'ybh' },
  { label: '科室+床号+样本号', value: 'deptBedSample' },
  { label: '病人类型+科室+床号+样本号', value: 'typeDeptBedSample' },
  { label: '病人类型+科室+样本号', value: 'typeDeptSample' },
  { label: '阳性结果', value: 'positiveResult' }
]);
const optionItems = ref([
  { label: '排除选择的病人类型', key: 'excludePatientType' },
  { label: '排除选择的科室', key: 'excludeDept' },
  { label: '排除阴性报告', key: 'excludeNegative' },
  { label: '仅打印阳性报告', key: 'positiveOnly' },
  { label: '无病人姓名不打印', key: 'noNameSkip' },
  { label: '无检验结果不打印', key: 'noResultSkip' },
  { label: '分组打印报告', key: 'groupedPrint' },
  { label: '打印未打印报告', key: 'notPrintedOnly' },
  { label: '打印待核报告', key: 'pendingReview' },
  { label: '打印已审核报告', key: 'reviewedOnly' }
]);

const selectedOptions = ref(Object.keys(queryForm.options).filter(key => queryForm.options[key]));

const updateSelectedOptions = () => {
  Object.keys(queryForm.options).forEach(key => {
    queryForm.options[key] = selectedOptions.value.includes(key);
  });
}

const printHandle = () => {

}

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

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

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


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()
  });
});

</script>


<style scoped lang="scss">
.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;
}

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