2025-11-13 18:32:03 +08:00

741 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" :size="aotuSize" :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" style="width: 25rem;" />
</el-form-item>
<!-- <el-form-item label="医疗机构:" prop="yljg">
<el-select v-model="queryParams.yljg" placeholder="请选择" style="width: 9.37rem;">
<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: 6.25rem;">
<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:8.75rem">
<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" :size="aotuSize"> 搜索 </el-button>
<el-button icon="Refresh" @click="resetQuery" :size="aotuSize">重置</el-button>
</el-form-item>
</el-form>
</el-row>
</div>
<el-row :gutter="10">
<el-col :span="16" class="right-table">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" :size="aotuSize" plain icon="Plus" @click="printHandle">生成条码</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" :size="aotuSize" plain icon="Edit" @click="selectStatusRows">选中所有未打印</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" :size="aotuSize" plain @click="printPdf">打印</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" :size="aotuSize" plain icon="Upload" @click="openBlock('采样登记')">采样登记</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :size="aotuSize" plain @click="openBlock('送检登记')">送检登记</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :size="aotuSize" plain @click="goReport">报告查询</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :size="aotuSize" plain @click="cancelHandle">条码作废</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :size="aotuSize" plain>打印机设置</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :size="aotuSize" 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" :enable-column-drag="true"
@column-drag-end="handleColumnDragEnd">
<template #dy="{ row }">
<svg-icon v-if="row.zt != 1" icon-class="lvgou" />
</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="primary" plain class="mb8" :size="aotuSize">拆分选中项目</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>
<!-- 样本流程 -->
<div class="time-line-box">
<div v-for="(item, i) in timelineItems" :key="i" class="time-line-item">
<div v-if="i != 0" class="timeline-connector">
<img class="timg" src="@/assets/images/yjt.png" alt="">
</div>
<div :class="['timeline-content', i > lastTimeIndex ? 'no_active' : '']">
<div :class="['index', lastTimeIndex == i ? 'active' : '']">{{ i + 1 }}</div>
<div class="timeline-title">{{ item.title }}</div>
<div class="timeline-time">{{ item.time }}</div>
</div>
</div>
</div>
<!-- 采样登记 -->
<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/elTable/index.vue'
import { useRouter } from 'vue-router'
import { usePrintStore } from '@/store/modules/printStore'
import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index'
const aotuSize = classCom.useAutoSize();
//@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([
{ type: 'selection', visible: true, align: 'center', width: 35, label: '多选框' },
// { type: 'index', visible: true, align: 'center', width: 60, label: '序号' },
{ prop: 'zt', label: '打印', visible: true, align: 'center', slot: 'dy', width: 40 },
{ prop: 'jzbz', label: '急', align: 'center', visible: true, slot: 'jzbz', width: 30 },
{ prop: 'ch', label: '床号', visible: true, align: 'center', width: 40 },//sortable: true,
{ prop: 'brxm', label: '姓名', align: 'center', visible: true, width: 50 },
{ prop: 'brxbname', label: '性别', align: 'center', visible: true, width: 30 },
{ prop: 'jymd', label: '项目名称', visible: true, width: 130 },
{ prop: 'bgddhname', label: '类别', align: 'center', visible: true, width: 80 },
{ prop: 'sampletips', label: '采样提示', align: 'center', visible: true, width: 60 },
{ prop: 'yblx', label: '样本类型', align: 'center', visible: true, width: 60 },
{ prop: 'brdh', label: '病人号', align: 'center', visible: true, width: 90 },
{ prop: 'ksname', label: '科室名称', align: 'center', visible: true, width: 100 },
{ prop: 'sqh', label: '申请号/条码', align: 'center', visible: true, width: 100 },
{ prop: 'zt', label: '状态', align: 'center', visible: true, slot: 'zt', width: 40 },
{ prop: 'brly', label: '病人来源', align: 'center', visible: true, slot: 'brly', width: 60 },
{ prop: 'sqysname', label: '申请医生', align: 'center', visible: true, width: 60 },
{ prop: 'sqsj', label: '申请时间', align: 'center', visible: true, width: 150 },
{ prop: 'jjzt', label: '计价标志', align: 'center', visible: true, slot: 'jjzt', width: 60 },
{ prop: 'zxysname', label: '执行医生', align: 'center', visible: true, width: 60 },
{ prop: 'bbsjrname', label: '送检人', align: 'center', visible: true, width: 50 },
{ prop: 'yljg', label: '医疗机构', align: 'center', visible: true, slot: 'yljg', width: 150 },
])
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 { color: '#f00' };
}
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 timelineItems = ref(
[
{ title: '检验申请', time: '' },
{ title: '标本采集', time: '' },
{ title: '上机检验', time: '' },
{ title: '标本送检', time: '' },
// { title: '检验接收', time: '' },
{ title: '标本签收', time: '' },
{ title: '结果审核', time: '' },
]
);
// 计算最后一个有时间的节点索引
const lastTimeIndex = computed(() => {
const lastIndex = timelineItems.value.findLastIndex(item => item.time);
if (lastIndex === -1) {
return -1
} else {
return lastIndex;
}
});
// 点击行
const rowHandle = (row: any) => {
timelineItems.value =
[
{ title: '检验申请', time: row.sqsj },
{ title: '标本采集', time: row.cysj },
{ title: '上机检验', time: row.zxsj },
{ title: '标本送检', time: row.bbsjsj },
// { title: '检验接收', time: row.jssj},
{ title: '标本签收', time: row.jssj },
{ title: '结果审核', time: row.confirmtime },
]
getRightTable(row)
};
const selectionChange = (selection: any) => {
sqhs.value = selection;
single.value = selection.length != 1;
multiple.value = !selection.length;
}
const handleColumnDragEnd = (data: any) => {
// 更新列配置
columns.value = data.columns;
// 可以在这里保存列顺序到本地存储等
// localStorage.setItem('tableColumnOrder', JSON.stringify(data.columns));
};
// 左侧表格配置
const tableConfig = ref({
// stripe: true, // 斑马纹
border: true, // 边框
index: true, // 序号
height: '', // 高度
highlightCurrentRow: true, // 高亮当前行
cellStyle: cellStyleHd,
rowClassName: rowClassNameHd,
fit: true
})
// 右侧数据源
const rightTableData = ref([])
// 配置项
const rightColumns = ref([
{ prop: 'sqxmdh', label: '项目代号', visible: true, sortable: true, width: '110px' },
{ prop: 'sqxmmc', label: '项目名称', visible: true, width: '120px' },
{ prop: 'dj', label: '单价', align: 'center', visible: true, },
{ prop: 'sl', label: '数量', align: 'center', visible: true, },
{ prop: 'zt', label: '状态', align: 'center', visible: true, slot: 'zt', },
{ prop: 'jjzt', label: '计价标志', align: 'center', visible: true, slot: 'jjzt', },
])
// 表格配置
const rightTableConfig = ref({
// stripe: true, // 斑马纹
border: true, // 边框
height: '', // 高度
highlightCurrentRow: true, // 高亮当前行
})
// 采样数据源
const cyTableData = ref([])
// 配置项
const cyColumns = ref([
{ prop: 'sqh', label: '申请号/条形码', align: 'center', visible: true, sortable: true, width: 140 },
{ prop: 'ksdh', label: '科室病区', align: 'center', visible: true, width: 120 },
{ prop: 'ch', label: '床号', align: 'center', visible: true, sortable: true, },
{ prop: 'brxm', label: '姓名', align: 'center', visible: true, },
{ prop: 'brdh', label: '病人号', align: 'center', visible: true, },
{ prop: 'brxb', label: '性别', align: 'center', visible: true, },
{ prop: 'yblx', label: '样本类型', align: 'center', visible: true, },
{ prop: 'zt', label: '状态', align: 'center', visible: true, slot: 'zt', },
{ prop: 'jzbz', label: '急诊', align: 'center', visible: true, },
{ prop: 'jjzt', label: '采样人', align: 'center', visible: true, },
{ prop: 'cysj', label: '采样时间', align: 'center', visible: true, },
{ prop: 'zxysname', label: '执行医生', align: 'center', visible: true, },
{ prop: 'zxsj', label: '执行时间', align: 'center', visible: true, },
])
// 表格配置
const cyTableConfig = ref({
border: true, // 边框
height: '100%', // 高度
highlightCurrentRow: true, // 高亮当前行
})
// 采样登记
const openBlock = (value: string) => {
if (sqhs.value.length > 0) {
ElMessageBox.confirm(`确定操作选中的数据吗?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
beforeClose: async (action, instance, done) => {
if (action === "confirm") {
// 生成请求Promise数组
const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({
sqh: requests.join(','),
userid: 'lis',
status: value == '采样登记' ? 12 : 13,
yljg: 1
}).then((res: any) => {
if (res.code == 0) {
ElMessage.success('调用成功');
done();
getList()
} else {
ElMessage.error('调用失败');
}
})
} else {
done();
}
},
}).catch(() => { });
} 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?startdate=2025-08-19&endate=2025-08-19&deptcode=0210&userid=00910&brdh=')
};
const cancelHandle = () => {
if (sqhs.value.length <= 0) return ElMessage.warning('请选择数据!')
ElMessageBox.confirm(`确定作废选中的数据吗?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
beforeClose: async (action, instance, done) => {
if (action === "confirm") {
const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({
sqh: requests.join(','),
userid: 'lis',
status: 9,
yljg: 1
}).then((res: any) => {
if (res.code == 0) {
ElMessage.success('调用成功');
done();
getList()
} else {
ElMessage.error('调用失败');
}
})
} else {
done();
}
},
}).catch(() => { });
}
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 || v;
};
// 计算table高度
watch(showSearch, () => {
nextTick(() => {
adjustTableHeight();
})
}, { immediate: true });
function adjustTableHeight() {
if (compactForm.value) {
// 获取高度
heightForm.value = compactForm.value.offsetHeight;
tableConfig.value.height = `calc(74vh - ${heightForm.value}px)`; // 设置表格容器的高度
rightTableConfig.value.height = `calc(74vh - ${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
if (tableData.value.length > 0) {
rowHandle(response.data[0])
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)
}
})
}
// 打印pdf
const printPdf = () => {
if (sqhs.value.length <= 0) return ElMessage.warning('请选择数据!')
ElMessageBox.confirm(`确定打印选中的数据吗?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
beforeClose: async (action, instance, done) => {
if (action === "confirm") {
const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({
sqh: requests.join(','),
userid: 'lis',
status: 11,
yljg: 1
}).then((res: any) => {
if (res.code == 0) {
done();
getList()
HiprintPrinter.silentPrint(res.data);
}
})
} else {
done();
}
},
}).catch(() => { });
}
</script>
<style scoped lang="scss">
.custom-row-class {
background-color: #c6c3ff !important;
/* 设置行背景色 */
}
.right-table {
border: 1px solid #E1E9F7;
padding-top: .3125rem;
}
.title {
border-bottom: 1px solid #E1E9F7;
margin-bottom: .625rem;
padding: .625rem;
font-weight: 700;
}
.time-line-box {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: .35rem;
background-color: #f0f3f8;
padding: .3rem 2.5rem;
}
.time-line-item {
display: flex;
align-items: center;
justify-content: space-around;
width: 16.6%;
// padding: 0 30px;
.timeline-content {
display: flex;
flex-direction: column;
align-items: center;
.index {
width: 1.875rem;
height: 1.875rem;
line-height: 1.875rem;
background: #E1E9F7;
border-radius: 50%;
text-align: center;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 1.125rem;
color: #4767A3;
}
.active {
background-color: #4096ff;
box-shadow: 0 0 0 .25rem rgba(64, 150, 255, 0.2);
color: #FFF;
}
.timeline-title {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 1rem;
color: #4767A3;
}
.timeline-time {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: .875rem;
color: #4767A3;
}
}
.timg {
width: 3.125rem;
}
}
</style>