lis8.0-vue3/src/views/checkCode/report/index.vue

<template>
  <div class="app-container">
    <div ref="compactForm">
      <el-row :gutter="10" class="compact-form" v-show="showSearch">
        <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="queryRules">
          <el-form-item label="日期：" prop="times">
            <el-date-picker v-model="queryParams.times" type="daterange" range-separator="-" start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </el-form-item>

          <el-form-item label="病人状态：" prop="dybz">
            <el-select v-model="queryParams.dybz" placeholder="请选择">
              <el-option label="已打印" value="1" />
              <el-option label="未打印" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="科室：" prop="ksdh">
            <el-select v-model="queryParams.ksdh" placeholder="请选择" filterable>
              <el-option v-for="item in dictData.DP" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="病人类型：" prop="brly">
            <el-select v-model="queryParams.brly" placeholder="请选择" style="width: 120px;">
              <el-option v-for="item in dictData.PT" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-checkbox v-model="queryParams.alarmflag" label="仅危急值" @change="alarmHandle" size="large" />
            <el-checkbox v-model="queryParams.jzbz" label="仅急诊" @change="jzbzHandle" size="large" />
          </el-form-item>
          <el-form-item label="姓名" prop="brxm">
            <el-col :span="1.5">
              <el-input v-model="queryParams.brxm" clearable placeholder="姓名" @keyup.enter="handleQuery"
                @clear="handleQuery" />
            </el-col>
          </el-form-item>
          <el-form-item label="病人号" prop="brdh">
            <el-col :span="1.5">
              <el-input v-model="queryParams.brdh" clearable placeholder="病人号" @keyup.enter="handleQuery"
                @clear="handleQuery" />
            </el-col>
          </el-form-item>
          <el-form-item label="条形码" prop="sqh">
            <el-col :span="1.5">
              <el-input v-model="queryParams.sqh" clearable placeholder="条形码" @keyup.enter="handleQuery"
                @clear="handleQuery" />
            </el-col>
          </el-form-item>
          <el-form-item label="">
            <el-button icon="search" type="primary" @click="handleQuery">
              搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <el-row :gutter="10">
      <el-col :span="14" class="right-table">
        <el-row :gutter="10" class="mb8 mt10">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus">打印</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Edit" @click="selectStatusRows">勾选中所有未打印</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain>打印单张PDF报告</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Upload">GUID打印报告</el-button>
          </el-col>

          <right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
            :columns="columns"></right-toolbar>
        </el-row>

        <CustomTable ref="tableRefs" :data="tableData" :columns="columns" :config="tableConfig" :loading="loading">
          <template #dybz="{ row }">
            {{ row.dybz == 1 ? '✅' : '❌' }}
          </template>
          <template #jzbz="{ row }">
            {{ row.jzbz == 1 ? '急诊' : '危急诊' }}
          </template>
        </CustomTable>

      </el-col>
      <el-col :span="10" class="right-table">
        <div class="title">检验结果</div>
        <div class="mb10">
          <el-button type="primary" @click="openDB">对比历史</el-button>
          <el-button type="primary">复制全部数据</el-button>
          <el-button type="primary">复制异常数据</el-button>
          <el-button type="primary">复制正常数据</el-button>
          <el-button type="primary">知识库</el-button>
        </div>

        <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
        </CustomTable>

        <div class="title mt10">检验结果</div>
        <CustomTable :data="rightTableData" :columns="rightColumns" :config="bottomTableConfig" :loading="loading">
        </CustomTable>
      </el-col>
    </el-row>


    <!-- 结果对比 -->
    <el-dialog v-model="dialogVisible" title="结果对比" draggable :close-on-click-modal="false">
      <div class="flex-between">

      </div>
      <el-table :data="compareTableData" border style="width: 100%" @row-click="handleRowClick" highlight-current-row>
        <el-table-column prop="itemName" label="项目名称" fixed />
        <el-table-column prop="itemCode" label="项目编号" fixed />
        <template v-for="(period, idx) in periods" :key="period.key">
          <el-table-column :label="period.label" prop="period1_value" :width="150" />
        </template>
        <el-table-column label="合计" prop="total" width="100" fixed="right" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted } from 'vue';
import CustomTable from '@/components/tableCom/index.vue'
import { useRouter } from 'vue-router'
import { reportList } from '@/api/checkCode/index'
//@ts-ignore 
import { comDict } from '@/utils/dict'
const router = useRouter()

const compactForm = ref<HTMLElement | null>(null);
const heightForm = ref(90);
const dialogVisible = ref(false)

const tableRefs = ref()
const openDB = () => {
  dialogVisible.value = true
}


const handleRowClick = (row: any) => {
}
const periods = [
  {
    key: 'period1',
    label: '2024-01-01~2024-01-07',

  },
  {
    key: 'period2',
    label: '2024-01-08~2024-01-14',

  }
]

const compareTableData = [
  {
    itemName: '血糖',
    itemCode: 'GLU',
    period1_value: 5.6,
    period1_status: '正常',
    period2_value: 6.2,
    period2_status: '偏高'
  },
  {
    itemName: '血脂',
    itemCode: 'CHOL',
    period1_value: 4.8,
    period1_status: '正常',
    period2_value: 5.1,
    period2_status: '正常'
  }
]

interface QueryParams {
  times: string[]; // 明确类型为字符串元组
  alarmflag: boolean,
  jzbz: boolean,
  ksdh: string,
  brly: string,
  brxm: string,
  brdh: string,
  sqh: string,
  dybz: string,
}

// 提交表单数据
const queryParams = reactive<QueryParams>({
  times: ['2025-07-18 00:00:00', '2025-07-18 23:59:59'],
  ksdh: '',
  brly: '',
  alarmflag: false,
  jzbz: false,
  brxm: '',
  brdh: '',
  sqh: '',
  dybz: '',
});

const alarmflag = ref('0')
const jzbz = ref('0')
const showSearch = ref(true);
const queryRef = ref()
// 定义校验规则
const queryRules = ref({
  // clientId: [
  //   { required: true, message: '编号不能为空', trigger: 'blur' },

  // ],

  // failed3: [
  //   { required: true, message: '条码状态不能为空', trigger: 'change' },
  // ],
})

const handleQuery = async () => {
  const valid = await queryRef.value.validate().catch(() => { });
  if (!valid) return false;
  getList()
}
// 重置
const resetQuery = () => {
  queryRef.value?.resetFields();
  getList()
}

const loading = false;

// 数据源
const tableData = ref([])
// 配置项
const columns = ref<ColumnItem[]>([
  { prop: 'dybz', label: '打印', visible: true, key: 0, slot: 'dybz', },
  { prop: 'jzbz', label: '急诊', visible: true, key: 1, slot: 'jzbz', },
  { prop: 'alarmflag', label: '危急值', align: 'center', visible: true, key: 2, },
  { prop: 'jyrq', label: '检验日期', align: 'center', visible: true, key: 3, width: '150px' },
  { prop: 'brdh', label: '病人代号', align: 'center', visible: true, key: 4, width: '110px' },
  { prop: 'ch', label: '床号', align: 'center', visible: true, key: 5, sortable: true, },
  { prop: 'yqdl', label: '仪器', align: 'center', visible: true, key: 6, width: '110px' },
  { prop: 'ybh', label: '样本号', align: 'center', visible: true, key: 7, },
  { prop: 'yblxname', label: '样本类型', align: 'center', visible: true, key: 8, },
  { prop: 'jymd', label: '检验目的', align: 'center', visible: true, key: 9, },
  { prop: 'brlyname', label: '病人类型', align: 'center', visible: true, key: 10, },
  { prop: 'brxbname', label: '性别', align: 'center', visible: true, key: 11, },
  { prop: 'yqmc', label: '仪器名称', align: 'center', visible: true, key: 12, width: '150px' },
  { prop: 'yljg', label: '医疗机构', align: 'center', visible: true, key: 13, width: '150px' },
])

// 单元格样式
const cellStyleHd = ({ row, column, rowIndex, columnIndex }: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}) => {
  // console.log(row, column, rowIndex, columnIndex);
  if (column.label == "急诊" && row.jzbz == "1") {
    return { background: '#f00  !important', color: '#fff' };
  }


};

// 表格配置
const tableConfig = ref(
  {
    // stripe: true, // 斑马纹
    // border: true, // 边框
    selection: true, // 多选框
    index: false, // 序号
    height: '100%', // 高度
    highlightCurrentRow: true, // 高亮当前行
    fit: true,
    cellStyle: cellStyleHd
  }
)

// 勾选未打印
const selectStatusRows = () => {
  tableData.value.forEach((item: any) => {
    if (item.dybz != 1) {
      tableRefs.value.toggleRowSelection(item, true)
    }
  })
}
const alarmHandle = (val: boolean) => {
  if (val) {
    queryParams.jzbz = false
    alarmflag.value = '1'
  } else {
    alarmflag.value = '0'
  }

}
const jzbzHandle = (val: boolean) => {
  if (val) {
    queryParams.alarmflag = false
    jzbz.value = '1'
  } else {
    jzbz.value = '0'
  }
}


interface ColumnItem {
  prop: string;
  label: string;
  visible: boolean;
  key: number;
  align?: string;
  slot?: string;
  width?: string;
  sortable?: boolean;
}
// 更新列
const updateColumns = (arr: Array<ColumnItem>) => {
  columns.value = arr
};


// 右侧数据源
const rightTableData = [
  {
    id: 1, tfailed1: 'P001', tfailed2: '项目A', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
]
// 配置项
const rightColumns = ref([
  { prop: 'tfailed1', label: '项目代号', visible: true, key: 0, sortable: true, width: '110px' },
  { prop: 'tfailed2', label: '项目名称', visible: true, key: 1 },
  { prop: 'tfailed3', label: '单价', align: 'center', visible: true, key: 2 },
  { prop: 'tfailed4', label: '数量', align: 'center', visible: true, key: 3 },
  { prop: 'tfailed5', label: '状态', align: 'center', visible: true, key: 4 },
  { prop: 'tfailed6', label: '计价标志', align: 'center', visible: true, key: 5 },

])
// 表格配置
const rightTableConfig = ref(
  {
    // stripe: true, // 斑马纹
    // border: true, // 边框
    selection: false, // 多选框
    index: false, // 序号
    height: '28vh', // 高度
    highlightCurrentRow: true, // 高亮当前行
    fit: true
  }
)

// 表格配置
const bottomTableConfig = ref(
  {
    // stripe: true, // 斑马纹
    // border: true, // 边框
    selection: false, // 多选框
    index: false, // 序号
    height: '28vh', // 高度
    highlightCurrentRow: true, // 高亮当前行
    fit: true,
  }
)
interface DictData {
  DP?: Array<any>;
  PT?: Array<any>;
  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
}


// 字典数据存储
const dictData = ref<DictData>({});

onMounted(async () => {
  getList()
  adjustTableHeight();

  // 加载病人来源字典
  const dictRefs = await comDict('PT', 'DP');

  // 从 ref 中获取实际数据
  dictData.value = {
    PT: toRaw(dictRefs.PT.value) || [],
    DP: toRaw(dictRefs.DP.value) || [],
  };
});


const getList = () => {
  const data = {
    // dept: '0235',
    // userid: 'lis',
    alarmflag: alarmflag.value,
    jzbz: jzbz.value,
    dybz: queryParams.dybz,
    ksdh: queryParams.ksdh,
    brly: queryParams.brly,
    brxm: queryParams.brxm,
    brdh: queryParams.brdh,
    sqh: queryParams.sqh,
    st: queryParams.times[0],
    et: queryParams.times[1],
    yljg: 1
  }
  reportList(data).then((res: any) => {
    if (res.code == 200) {
      tableData.value = res.rows
      tableRefs.value.setCurrentRow(res.rows[0])
    }
  })
}

// 计算table高度
watch(showSearch, () => {
  nextTick(() => {
    adjustTableHeight();
  })
}, { immediate: true });

function adjustTableHeight() {
  if (compactForm.value) {
    // 获取高度
    heightForm.value = compactForm.value.offsetHeight;
    tableConfig.value.height = `calc(80vh - ${heightForm.value}px)`;
    rightTableConfig.value.height = `calc(38vh - ${heightForm.value}px)`;
    bottomTableConfig.value.height = `calc(35vh - ${heightForm.value} }px)`;
  }
}

</script>

<style scoped lang="scss">
.right-table {
  border: 1px solid #dcdfe6;
}

.title {
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 10px;
  padding: 10px;
  font-weight: 700;
}
</style>