375 lines
13 KiB
Vue
375 lines
13 KiB
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.failed1" type="daterange" range-separator="-" start-placeholder="开始时间"
|
|
end-placeholder="结束时间" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="医疗机构：" prop="failed2">
|
|
<el-select v-model="queryParams.failed2" placeholder="请选择">
|
|
<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="failed3">
|
|
<el-select v-model="queryParams.failed3" placeholder="请选择" style="width: 120px;">
|
|
<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="failed4">
|
|
<el-select v-model="queryParams.failed4" placeholder="请选择">
|
|
<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">生成条码</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="danger" plain icon="Edit">选中所有未打印</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="success" plain>打印</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="openSj">送检登记</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 :data="tableData" :columns="columns" :config="tableConfig" :loading="loading">
|
|
<template #tfailed5="{ row }">
|
|
{{ row.tfailed5 }}
|
|
</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" :loading="loading">
|
|
</CustomTable>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
<!-- 采样登记 -->
|
|
<el-dialog v-model="dialogVisible" title="采样登记" draggable :close-on-click-modal="false">
|
|
<div class="flex-between">
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-input v-model="queryParams.failed5" clearable placeholder="条形码" @keyup.enter="handleQuery"
|
|
@clear="handleQuery" />
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" 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="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
|
</CustomTable>
|
|
|
|
</el-dialog>
|
|
<!-- 送检登记 -->
|
|
<el-dialog v-model="dialogSjVisible" title="送检登记" draggable :close-on-click-modal="false">
|
|
<div class="flex-between">
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-input v-model="queryParams.failed5" clearable placeholder="条形码" @keyup.enter="handleQuery"
|
|
@clear="handleQuery" />
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" 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="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
|
</CustomTable>
|
|
|
|
</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 { download } from '@/api/liswork/dict/LabInstr.js'
|
|
const router = useRouter()
|
|
const compactForm = ref<HTMLElement | null>(null);
|
|
const heightForm = ref(90);
|
|
const dialogVisible = ref(false)
|
|
const openBlock = () => {
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
const dialogSjVisible = ref(false)
|
|
const openSj = () => {
|
|
dialogSjVisible.value = true
|
|
}
|
|
// 提交表单数据
|
|
const queryParams = reactive({
|
|
failed1: [],
|
|
failed2: '',
|
|
failed3: '',
|
|
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: 'Option1',
|
|
label: 'Option1',
|
|
},
|
|
{
|
|
value: 'Option2',
|
|
label: 'Option2',
|
|
},
|
|
|
|
]
|
|
const handleQuery = async () => {
|
|
const valid = await queryRef.value.validate().catch(() => { });
|
|
if (!valid) return false;
|
|
}
|
|
// 重置
|
|
const resetQuery = () => {
|
|
queryRef.value?.resetFields();
|
|
// download([20221201167817]).then(() => {
|
|
// console.log('重置成功');
|
|
// }).catch(() => {
|
|
// console.log('重置失败');
|
|
// });
|
|
|
|
}
|
|
|
|
const loading = false;
|
|
|
|
|
|
|
|
// 数据源
|
|
const tableData = [
|
|
{
|
|
id: 1, tfailed2: '张三', tfailed1: 24, tfailed3: '男', tfailed4: '血常规', tfailed5: '常规检查',
|
|
tfailed6: '无', tfailed7: '否', tfailed8: '血液样本', tfailed9: '1234567890', tfailed10: '内科', tfailed11: 'A1234567890',
|
|
tfailed12: '待处理', tfailed13: '门诊', tfailed14: '王医生', tfailed15: '2023-10-01 10:00', tfailed16: '计价标志', tfailed17: '执行医生', tfailed18: '送检人', tfailed19: '医疗机构'
|
|
},
|
|
{
|
|
id: 2, tfailed2: '李四', tfailed1: 25, tfailed3: '男', tfailed4: '血常规', tfailed5: '常规检查',
|
|
tfailed6: '无', tfailed7: '否', tfailed8: '血液样本', tfailed9: '1234567890', tfailed10: '内科', tfailed11: 'A1234567890',
|
|
tfailed12: '待处理', tfailed13: '门诊', tfailed14: '王医生', tfailed15: '2023-10-01 10:00', tfailed16: '计价标志', tfailed17: '执行医生', tfailed18: '送检人', tfailed19: '医疗机构'
|
|
}
|
|
]
|
|
// 配置项
|
|
const columns = ref([
|
|
{ prop: 'tfailed1', label: '床号', visible: true, key: 0, sortable: true, width: '110px' },
|
|
{ prop: 'tfailed2', label: '姓名', visible: true, key: 1, width: '110px' },
|
|
{ prop: 'tfailed3', label: '性别', align: 'center', visible: true, key: 2, },
|
|
{ prop: 'tfailed4', label: '项目名称', align: 'center', visible: true, key: 3, width: '110px' },
|
|
{ prop: 'tfailed5', label: '类别', align: 'center', visible: true, key: 4, slot: 'tfailed5', width: '110px' },
|
|
{ prop: 'tfailed6', label: '采样提示', align: 'center', visible: true, key: 5, width: '110px' },
|
|
{ prop: 'tfailed7', label: '急诊', align: 'center', visible: true, key: 6, width: '110px' },
|
|
{ prop: 'tfailed8', label: '样本类型', align: 'center', visible: true, key: 7, width: '110px' },
|
|
{ prop: 'tfailed9', label: '病人号', align: 'center', visible: true, key: 8, width: '110px' },
|
|
{ prop: 'tfailed10', label: '科室名称', align: 'center', visible: true, key: 9, width: '110px' },
|
|
{ prop: 'tfailed11', label: '申请号/条码', align: 'center', visible: true, key: 10, width: '110px' },
|
|
{ prop: 'tfailed12', label: '状态', align: 'center', visible: true, key: 11, width: '110px' },
|
|
{ prop: 'tfailed13', label: '病人来源', align: 'center', visible: true, key: 12, width: '110px' },
|
|
{ prop: 'tfailed14', label: '申请医生', align: 'center', visible: true, key: 13, width: '110px' },
|
|
{ prop: 'tfailed15', label: '申请时间', align: 'center', visible: true, key: 14, width: '150px' },
|
|
{ prop: 'tfailed16', label: '计价标志', align: 'center', visible: true, key: 15, width: '110px' },
|
|
{ prop: 'tfailed17', label: '执行医生', align: 'center', visible: true, key: 16, width: '110px' },
|
|
{ prop: 'tfailed18', label: '送检人', align: 'center', visible: true, key: 17, width: '110px' },
|
|
{ prop: 'tfailed19', label: '医疗机构', align: 'center', visible: true, key: 18, width: '110px' },
|
|
])
|
|
|
|
|
|
// 单元格样式
|
|
const cellStyleHd = ({ row, column, rowIndex, columnIndex }: {
|
|
row: any;
|
|
column: any;
|
|
rowIndex: number;
|
|
columnIndex: number;
|
|
}) => {
|
|
// console.log(row, column, rowIndex, columnIndex);
|
|
if (row.tfailed5 == "常规检查" && columnIndex == 5) {
|
|
// console.log(row, column, rowIndex, columnIndex);
|
|
return { background: '#f00 !important', color: '#fff' };
|
|
}
|
|
};
|
|
|
|
const rowClassNameHd = ({ row, rowIndex }: {
|
|
row: any;
|
|
rowIndex: number;
|
|
}) => {
|
|
return 'custom-row-class'; // 返回自定义类名
|
|
};
|
|
// 表格配置
|
|
const tableConfig = ref({
|
|
// stripe: true, // 斑马纹
|
|
border: false, // 边框
|
|
selection: true, // 多选框
|
|
index: false, // 序号
|
|
height: '100%', // 高度
|
|
highlightCurrentRow: true, // 高亮当前行
|
|
cellStyle: cellStyleHd,
|
|
rowClassName: rowClassNameHd,
|
|
fit: true
|
|
})
|
|
|
|
|
|
|
|
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 rightTableData = [
|
|
{
|
|
id: 1, tfailed1: 'P001', tfailed2: '项目A', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 1, 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: false, // 边框
|
|
selection: true, // 多选框
|
|
index: false, // 序号
|
|
height: '100%', // 高度
|
|
highlightCurrentRow: true, // 高亮当前行
|
|
})
|
|
|
|
|
|
const goReport = () => {
|
|
// 跳转到报告查询页面
|
|
router.push('/report')
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
adjustTableHeight();
|
|
|
|
});
|
|
|
|
// 计算table高度
|
|
watch(showSearch, () => {
|
|
nextTick(() => {
|
|
adjustTableHeight();
|
|
})
|
|
}, { immediate: true });
|
|
|
|
function adjustTableHeight() {
|
|
if (compactForm.value) {
|
|
// 获取高度
|
|
heightForm.value = compactForm.value.offsetHeight;
|
|
tableConfig.value.height = `calc(75vh - ${heightForm.value}px)`; // 设置表格容器的高度
|
|
rightTableConfig.value.height = `calc(75vh - ${heightForm.value}px)`; // 设置表格容器的高度
|
|
}
|
|
}
|
|
</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> |