lis8.0-vue3/src/views/checkCode/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="failed1">
            <el-date-picker v-model="queryParams.times" type="datetimerange" range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" @change="handletime" />
          </el-form-item>

          <el-form-item label="医疗机构：" prop="yljg">
            <el-select v-model="queryParams.yljg" placeholder="请选择">
              <el-option v-for="item in dictData.HOS" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="条码状态：" prop="zt">
            <el-select v-model="queryParams.zt" placeholder="请选择" style="width: 100px;">
              <el-option v-for="item in dictData.ST" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="failed4">
            <el-select v-model="queryParams.failed4" placeholder="请选择" style="width:140px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="failed5">
            <el-input v-model="queryParams.failed5" clearable placeholder="条件搜索" @keyup.enter="handleQuery"
              @clear="handleQuery" />
          </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="16" class="right-table">
        <div class="title"> 条码生成 </div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="printHandle">生成条码</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 @click="printHandle1">打印</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Upload" @click="openBlock('采样登记')">采样登记</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain @click="openBlock('送检登记')">送检登记</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain @click="goReport">报告查询</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain>条码作废</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain>打印机设置</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain>清单打印</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
            :columns="columns"></right-toolbar>
        </el-row>

        <CustomTable ref="tableRef" :data="tableData" :columns="columns" :config="tableConfig" :loading="loading"
          @row-click="rowHandle" @selection-change="selectionChange">
          <template #dy="{ row }">
            {{ row.zt != 1 ? '✅' : '❌' }}
          </template>
          <template #jzbz="{ row }">
            {{ row.jzbz == '1' ? '急诊' : '非急诊' }}
          </template>
          <template #jjzt="{ row }">
            {{ row.jjzt == '1' ? '计价' : '无' }}
          </template>
          <template #brly="{ row }">
            {{ formatDict(row.brly, 'PT') }}
          </template>
          <template #zt="{ row }">
            {{ formatDict(row.zt.trim(), 'ST') }}
          </template>
          <template #yljg="{ row }">
            {{ formatDict(row.yljg, 'HOS') }}
          </template>
        </CustomTable>

      </el-col>
      <el-col :span="8" class="right-table">
        <div class="title"> 项目 </div>
        <!-- <el-button type="danger" class="mb10">拆分选中项目</el-button> -->
        <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig">
          <template #jjzt="{ row }">
            {{ row.jjzt == '1' ? '计价' : '无' }}
          </template>
          <template #zt="{ row }">
            {{ formatDict(row.zt, 'ST') }}
          </template>
        </CustomTable>
      </el-col>
    </el-row>


    <!-- 采样登记 -->
    <el-dialog v-model="dialogVisible" :title="title" draggable :close-on-click-modal="false" width="70vw"
      @close="closeDialog">
      <div class="flex-between">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-input v-model="sqhText" clearable placeholder="条形码" @keyup.enter="sqdQuery" @clear="sqdQuery" />
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="sqdQuery" plain>读取</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="delete">删除选中行</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain>打印</el-button>
          </el-col>
        </el-row>
        <!-- <el-button type="primary" plain>保存</el-button> -->
      </div>
      <CustomTable :data="cyTableData" :columns="cyColumns" :config="cyTableConfig">
        <template #zt="{ row }">
          {{ formatDict(row.zt, 'ST') }}
        </template>
      </CustomTable>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted, } from 'vue';
import { HiprintPrinter } from '@/utils/hiprintPrinter';
import { classCom } from '@/utils/classCom';
import CustomTable from '@/components/tableCom/index.vue'
import { useRouter } from 'vue-router'
import { usePrintStore } from '@/store/modules/printStore'
import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index'
import { TableColumnCtx } from 'element-plus';
import dayjs from 'dayjs';
//@ts-ignore 
import { comDict } from '@/utils/dict'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const printStore = usePrintStore();
const compactForm = ref<HTMLElement | null>(null);
const heightForm = ref(90);
const dialogVisible = ref(false)
const title = ref('采样登记')
const sqhText = ref('')
const tableRef = ref()
interface QueryParams {
  times: string[]; // 明确类型为字符串元组
  yljg: string;
  zt: string;
  failed4: string;
  failed5: string;
}
// 提交表单数据
const queryParams = reactive<QueryParams>({
  times: ['2025-07-18 00:00:00', '2025-07-18 23:59:59'],
  // times: [],  
  yljg: '1',
  zt: '',
  failed4: '',
  failed5: '',
});
const showSearch = ref(true);
const queryRef = ref()
// 定义校验规则
const queryRules = ref({
  // clientId: [
  //   { required: true, message: '编号不能为空', trigger: 'blur' },

  // ],

  // failed3: [
  //   { required: true, message: '条码状态不能为空', trigger: 'change' },
  // ],
})
const options = [
  {
    value: '1',
    label: '通过姓名搜索',
  },
  {
    value: '2',
    label: '通过病人号搜索',
  },
  {
    value: '3',
    label: '通过床号搜索',
  },
]
interface DictData {
  SX?: Array<any>;
  HOS?: Array<any>;
  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
}
// 字典数据存储
const dictData = ref<DictData>({});
const handleQuery = async () => {
  const valid = await queryRef.value.validate().catch(() => { });
  if (!valid) return false;
  getList()
}
// 重置
const resetQuery = () => {
  queryRef.value?.resetFields();

  getList()
}

const loading = ref(true);



// 数据源
const tableData = ref([])
// 配置项
const columns = ref([
  { prop: 'zt', label: '打印', visible: true, key: 0, sortable: true, slot: 'dy', },
  { prop: 'ch', label: '床号', visible: true, key: 0, sortable: true, },
  { prop: 'brxm', label: '姓名', visible: true, key: 1, },
  { prop: 'brxbname', label: '性别', align: 'center', visible: true, key: 2, },
  { prop: 'jymd', label: '项目名称', align: 'center', visible: true, key: 3, width: '140px' },
  { prop: 'bgddhname', label: '类别', align: 'center', visible: true, key: 4, width: '120px' },
  { prop: 'sampletips', label: '采样提示', align: 'center', visible: true, key: 5, width: '110px' },
  { prop: 'jzbz', label: '急诊', align: 'center', visible: true, slot: 'jzbz', key: 6, width: '110px' },
  { prop: 'yblx', label: '样本类型', align: 'center', visible: true, key: 7, width: '110px' },
  { prop: 'brdh', label: '病人号', align: 'center', visible: true, key: 8, width: '110px' },
  { prop: 'ksname', label: '科室名称', align: 'center', visible: true, key: 9, width: '110px' },
  { prop: 'sqh', label: '申请号/条码', align: 'center', visible: true, key: 10, width: '110px' },
  { prop: 'zt', label: '状态', align: 'center', visible: true, key: 11, slot: 'zt', width: '110px' },
  { prop: 'brly', label: '病人来源', align: 'center', visible: true, key: 12, slot: 'brly', width: '110px' },
  { prop: 'sqysname', label: '申请医生', align: 'center', visible: true, key: 13, width: '110px' },
  { prop: 'sqsj', label: '申请时间', align: 'center', visible: true, key: 14, width: '170px' },
  { prop: 'jjzt', label: '计价标志', align: 'center', visible: true, key: 15, slot: 'jjzt', },
  { prop: 'zxysname', label: '执行医生', align: 'center', visible: true, key: 16, },
  { prop: 'bbsjrname', label: '送检人', align: 'center', visible: true, key: 17, },
  { prop: 'yljg', label: '医疗机构', align: 'center', visible: true, slot: 'yljg', key: 18, width: '170px' },
])

const single = ref(true);
const multiple = ref(true);
const sqhs = ref([]);
// 单元格样式
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' };
  }

  if (column.label == "类别") {
    const bgColor = classCom.decimalToHexColor(row.bkcolor);
    const textColor = classCom.getContrastTextColor(bgColor);
    return {
      backgroundColor: `${bgColor} !important`,
      color: textColor,
    };
  }
};


const rowClassNameHd = ({ row, rowIndex }: {
  row: any;
  rowIndex: number;
}) => {
  return 'custom-row-class'; // 返回自定义类名
};
// 点击行
const rowHandle = (row: any, column: TableColumnCtx<any>, event: Event) => {
  getRightTable(row)
};

const selectionChange = (selection: any) => {
  sqhs.value = selection;
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 左侧表格配置
const tableConfig = ref({
  // stripe: true, // 斑马纹
  border: false, // 边框
  selection: true, // 多选框
  index: false, // 序号
  height: '', // 高度
  highlightCurrentRow: true, // 高亮当前行
  cellStyle: cellStyleHd,
  rowClassName: rowClassNameHd,
  fit: true
})
// 右侧数据源
const rightTableData = ref([])
// 配置项
const rightColumns = ref([
  { prop: 'sqxmdh', label: '项目代号', visible: true, key: 0, sortable: true, width: '110px' },
  { prop: 'sqxmmc', label: '项目名称', visible: true, key: 1, width: '120px' },
  { prop: 'dj', label: '单价', align: 'center', visible: true, key: 2 },
  { prop: 'sl', label: '数量', align: 'center', visible: true, key: 3 },
  { prop: 'zt', label: '状态', align: 'center', visible: true, slot: 'zt', key: 4 },
  { prop: 'jjzt', label: '计价标志', align: 'center', visible: true, slot: 'jjzt', key: 5 },

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

// 采样数据源
const cyTableData = ref([])
// 配置项
const cyColumns = ref([
  { prop: 'sqh', label: '申请号/条形码', visible: true, key: 0, sortable: true, width: '140px' },
  { prop: 'ksdh', label: '科室病区', visible: true, key: 1, width: '120px' },
  { prop: 'ch', label: '床号', visible: true, key: 2, sortable: true, },
  { prop: 'brxm', label: '姓名', visible: true, key: 3, },
  { prop: 'brdh', label: '病人号', visible: true, key: 4, },
  { prop: 'brxb', label: '性别', align: 'center', visible: true, key: 5, },
  { prop: 'yblx', label: '样本类型', align: 'center', visible: true, key: 6 },
  { prop: 'zt', label: '状态', align: 'center', visible: true, slot: 'zt', key: 7 },
  { prop: 'jzbz', label: '急诊', align: 'center', visible: true, key: 8 },
  { prop: 'jjzt', label: '采样人', align: 'center', visible: true, key: 8 },
  { prop: 'cysj', label: '采样时间', align: 'center', visible: true, key: 8 },
  { prop: 'zxysname', label: '执行医生', align: 'center', visible: true, key: 8 },
  { prop: 'zxsj', label: '执行时间', align: 'center', visible: true, key: 8 },
])
// 表格配置
const cyTableConfig = ref({
  // stripe: true, // 斑马纹
  border: false, // 边框
  selection: true, // 多选框
  index: false, // 序号
  height: '100%', // 高度
  highlightCurrentRow: true, // 高亮当前行
})

// 采样登记
const openBlock = async (value: string) => {
  if (sqhs.value.length > 0) {
    try {
      // 生成请求Promise数组
      const requests = sqhs.value.map((item: any) => fetchCodeExec({
        sqh: item.sqh,
        userid: 'lis',
        status: 12,
        yljg: 1
      }));
      const results = await Promise.all(requests);
      console.log('results==>', results);
      if (results.some((item: any) => item.code != 0)) {
        ElMessage.error('调用失败');
      } else {
        ElMessage.success('调用成功');
      }

      return results;
    } catch (error: any) {
      ElMessage.error(error.message);
      throw error;
    }

  } else {
    title.value = value
    dialogVisible.value = true
  }


}
// 采样读取
const sqdQuery = () => {
  const index = cyTableData.value.findIndex((item: any) => item.sqh == sqhText.value)
  if (index !== -1) return ElMessage.warning('该申请单数据已存在！')

  fetchCodeReqmain({ sqh: sqhText.value }).then((res: any) => {
    if (res.code == 0 && res.data.sqh) {
      fetchCodeExec({
        sqh: res.data.sqh,
        userid: 'lis',
        status: 12,
        yljg: 1
      })
      cyTableData.value = cyTableData.value.concat(res.data)
    }
  })
}
// 关闭弹窗清空
const closeDialog = () => {
  cyTableData.value = []
  sqhText.value = ''
}


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

const getRightTable = (row: any) => {
  fetchCodeDetail({ sqh: row.sqh }).then((res: any) => {
    if (res.code == 0) {
      rightTableData.value = res.data
    }
  })
}



const goReport = () => {
  // 跳转到报告查询页面
  router.push('/report')
};

onMounted(async () => {
  // 初始化3天区间（今天-前两天）
  // const end = dayjs().format('YYYY-MM-DD HH:mm:ss');
  // const start = dayjs().subtract(2, 'day').format('YYYY-MM-DD HH:mm:ss'); //add 时间往后
  // queryParams.times = [start, end];
  // console.log(queryParams.times);
  getList()
  adjustTableHeight();
  // 加载病人来源字典
  const dictRefs = await comDict('PT', 'HOS', 'ST');

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



});

// 字典格式化方法
const formatDict = (v: string, dictType: string) => {
  return dictData.value[dictType]?.find((item: any) => item.value == v)?.label;
};

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

function adjustTableHeight() {
  if (compactForm.value) {
    // 获取高度
    heightForm.value = compactForm.value.offsetHeight;
    tableConfig.value.height = `calc(72vh - ${heightForm.value}px)`; // 设置表格容器的高度
    rightTableConfig.value.height = `calc(76vh - ${heightForm.value}px)`;

  }
}

const handletime = (val: Array<string>) => {
  // console.log('时间', val);
}

// 生成条码
const printHandle = () => {
  const data = {
    dept: '0235',
    userid: 'lis',
    st: '',
    et: '',
    yljg: queryParams.yljg
  }
  if (queryParams.times && queryParams.times.length) {
    data.st = queryParams.times[0]
    data.et = queryParams.times[1]
  }
  addObj(data).then((res: any) => {
    if (res.code == 0) {
      getList()
    }
  })

}

// 查询申请单
const getList = () => {
  loading.value = true;
  const data = {
    dept: '0235',
    userid: 'lis',
    st: queryParams.times[0],
    et: queryParams.times[1],
    yljg: queryParams.yljg
  }
  fetchCodeList(data).then((response: any) => {
    if (response.code == 0) {
      loading.value = false;
      tableData.value = response.data
      getRightTable(response.data[0])
      tableRef.value.setCurrentRow(response.data[0])
    }
  })
}

const selectStatusRows = () => {
  tableRef.value.clearSelection()
  tableData.value.forEach((item: any) => {
    if (item.zt == 1) {
      tableRef.value.toggleRowSelection(item, true)
    }
  })
}
const printHandle1 = () => {
  const url = 'http://47.97.125.165:8904/lis.pdf'
  // const url = sqhs.value[0]?.pdfUrl
  HiprintPrinter.silentPrintPdf(
    url,
    {
      // 自定义打印参数（可选）
      orientation: "portrait", // 纵向（landscape=横向）
      copies: 1,
      monochrome: false, // 是否黑白打印
      // paperName: 'A4', // 纸张大小 A2, A3, A4, A5, A6, letter, legal, tabloid, statement
    },
  );

}




</script>

<style scoped lang="scss">
.custom-row-class {
  background-color: #c6c3ff !important;
  /* 设置行背景色 */
}

.right-table {
  border: 1px solid #dcdfe6;
}

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