chenqi
14cb913943
- 将所有表格的单元格合并方法从数组格式 [rowspan, colspan] 改为对象格式 { rowspan, colspan }
- 为 vxe-table 组件添加 checkbox-config 配置以支持复选框保留选择功能
- 移除复选框的 :reserve-selection 属性并改用 checkbox-config 配置
- 全局注册 VxeTableCompat 组件来归一化 cell-click 和 current-change 事件参数
- 更新技术执行和技术审批页面的表格组件配置和操作逻辑
- 优化
440 lines
9.9 KiB
Vue
Executable File
440 lines
9.9 KiB
Vue
Executable File
<!--
|
||
* @Author: sjjh
|
||
* @Date: 2025-09-09 13:49:40
|
||
* @Description: 药品发送
|
||
-->
|
||
<template>
|
||
<div class="medicineCollect-container">
|
||
<div class="patientList-container">
|
||
<el-input
|
||
v-model="searchValue"
|
||
style="width: 240px"
|
||
placeholder="床号/姓名"
|
||
/>
|
||
<el-tree
|
||
ref="treeRef"
|
||
style="max-width: 600px"
|
||
default-expand-all
|
||
:data="data"
|
||
show-checkbox
|
||
node-key="id"
|
||
@node-click="handleNodeClick"
|
||
/>
|
||
</div>
|
||
<div class="medicineList-container">
|
||
<div class="filter-container">
|
||
<el-space>
|
||
<el-select
|
||
v-model="tableFilterForm.type"
|
||
placeholder="药品类型"
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
key="1"
|
||
label="西药"
|
||
value="1"
|
||
/>
|
||
<el-option
|
||
key="2"
|
||
label="中药"
|
||
value="2"
|
||
/>
|
||
</el-select>
|
||
<el-select
|
||
v-model="tableFilterForm.type"
|
||
placeholder="医嘱类型"
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
key="0"
|
||
label="全部"
|
||
value="0"
|
||
/>
|
||
<el-option
|
||
key="1"
|
||
label="长期"
|
||
value="1"
|
||
/>
|
||
<el-option
|
||
key="2"
|
||
label="临时"
|
||
value="2"
|
||
/>
|
||
</el-select>
|
||
<span>截止时间</span>
|
||
<el-date-picker
|
||
v-model="tableFilterForm.endTime"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="选择日期"
|
||
/>
|
||
<el-select
|
||
v-model="tableFilterForm.dept"
|
||
placeholder="领药科室"
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
key="0"
|
||
label="住院西药房"
|
||
value="0"
|
||
/>
|
||
<el-option
|
||
key="1"
|
||
label="住院东药房"
|
||
value="1"
|
||
/>
|
||
<el-option
|
||
key="2"
|
||
label="住院北药房"
|
||
value="2"
|
||
/>
|
||
<el-option
|
||
key="3"
|
||
label="住院南药房"
|
||
value="3"
|
||
/>
|
||
</el-select>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleSearch"
|
||
>
|
||
查询
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="collectDrug"
|
||
>
|
||
领药申请
|
||
</el-button>
|
||
</el-space>
|
||
<el-space />
|
||
</div>
|
||
<vxe-table
|
||
:data="collectTsableData"
|
||
:row-config="{ keyField: 'id' }"
|
||
style="width: 100%; height: 100%"
|
||
border
|
||
:span-method="arraySpanMethod"
|
||
>
|
||
<vxe-column type="checkbox" />
|
||
<vxe-column
|
||
title="类型"
|
||
field="name"
|
||
width="140"
|
||
>
|
||
<template #default="{ row }">
|
||
<span v-if="!row.children">长期/西药</span>
|
||
<template v-else>
|
||
{{ row.name }} 11 床【000000001】 林俊杰 女/24 重 1级 自费 主诊断 医生：医生甲 预交金：1990.3
|
||
</template>
|
||
</template>
|
||
</vxe-column>
|
||
|
||
<vxe-column
|
||
title="医嘱内容"
|
||
field="content"
|
||
min-width="300px"
|
||
>
|
||
<template #default="{ row }">
|
||
<span v-if="row.children">{{ row.content }}</span>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
title="用法"
|
||
field="gender"
|
||
/>
|
||
<vxe-column
|
||
title="数量"
|
||
field="gender"
|
||
/>
|
||
<vxe-column
|
||
title="金额"
|
||
field="gender"
|
||
/>
|
||
<vxe-column
|
||
title="领取科室"
|
||
field="gender"
|
||
/>
|
||
<vxe-column
|
||
title="执行时间"
|
||
field="gender"
|
||
min-width="300"
|
||
>
|
||
<template #default="{ row }">
|
||
<template v-if="!row.children">
|
||
<div
|
||
v-for="item in row.dates"
|
||
:key="item.id"
|
||
>
|
||
<el-space :size="10">
|
||
<span>{{ item.date }}</span>
|
||
<span
|
||
v-for="time in item.times"
|
||
:key="time.id"
|
||
>
|
||
|
||
<el-checkbox
|
||
v-model="time.checked"
|
||
:value="`${time.time}`"
|
||
border
|
||
/>
|
||
</span>
|
||
</el-space>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import {onBeforeMount, onMounted, reactive, ref} from 'vue'
|
||
// const { proxy } = getCurrentInstance();
|
||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||
|
||
const emits = defineEmits([])
|
||
const props = defineProps({
|
||
|
||
})
|
||
const state = reactive({
|
||
|
||
})
|
||
|
||
const data = ref([
|
||
{
|
||
label: '内科',
|
||
id:1,
|
||
children: [
|
||
{
|
||
label: '唐僧',
|
||
id:11
|
||
},
|
||
],
|
||
},
|
||
])
|
||
|
||
const searchValue = ref('')
|
||
const handleNodeClick=(data)=>{
|
||
console.log(data)
|
||
treeRef.value.setCheckedKeys([data.id])
|
||
}
|
||
|
||
const treeRef = ref()
|
||
|
||
// ====表格
|
||
const tableFilterForm = ref({
|
||
type: '',
|
||
name: '',
|
||
})
|
||
|
||
const arraySpanMethod = ({
|
||
row,
|
||
column,
|
||
rowIndex,
|
||
columnIndex
|
||
}) => {
|
||
console.log(row, column, rowIndex, columnIndex);
|
||
// 如果是父级行
|
||
if (row.children && row.children.length > 0) {
|
||
if (columnIndex === 0) {
|
||
return { rowspan: 1, colspan: 1 }
|
||
}
|
||
// 如果是患者列
|
||
if (columnIndex === 1) {
|
||
return { rowspan: 1, colspan: 7 }
|
||
} else {
|
||
return { rowspan: 1, colspan: 0 }
|
||
}
|
||
}
|
||
// 如果是子级行，显示其他列
|
||
if (!row.children || row.children.length == 0) {
|
||
return { rowspan: 1, colspan: 1 }
|
||
}
|
||
// 如果是父级行，隐藏其他列
|
||
return { rowspan: 1, colspan: 1 }
|
||
}
|
||
const collectTsableData = ref([
|
||
// {
|
||
// id: 1,
|
||
// name: '唐僧',
|
||
// age: 20,
|
||
// gender: '男',
|
||
|
||
// children: [
|
||
// {
|
||
// name: '',
|
||
// age: 10,
|
||
// gender: '男',
|
||
// content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||
// dates: [{
|
||
// date: '05/04',
|
||
// times: [{
|
||
// time: '08:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }, {
|
||
// time: '12:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }]
|
||
// }, {
|
||
// date: '05/05',
|
||
// times: [{
|
||
// time: '08:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }, {
|
||
// time: '12:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }]
|
||
// }]
|
||
// }, {
|
||
// name: '',
|
||
// age: 10,
|
||
// gender: '男',
|
||
// content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||
// dates: [{
|
||
// date: '05/04',
|
||
// times: [{
|
||
// time: '08:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }, {
|
||
// time: '12:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }]
|
||
// }, {
|
||
// date: '05/05',
|
||
// times: [{
|
||
// time: '08:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }, {
|
||
// time: '12:00',
|
||
// nurse: '刘护士',
|
||
// checked: false
|
||
// }]
|
||
// }]
|
||
// }]
|
||
// },
|
||
])
|
||
|
||
const handleSearch = () => {
|
||
collectTsableData.value=[{
|
||
id: 1,
|
||
name: '唐僧',
|
||
age: 20,
|
||
gender: '男',
|
||
|
||
children: [
|
||
{
|
||
name: '',
|
||
age: 10,
|
||
gender: '男',
|
||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||
dates: [{
|
||
date: '05/04',
|
||
times: [{
|
||
time: '08:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}, {
|
||
time: '12:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}]
|
||
}, {
|
||
date: '05/05',
|
||
times: [{
|
||
time: '08:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}, {
|
||
time: '12:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}]
|
||
}]
|
||
}, {
|
||
name: '',
|
||
age: 10,
|
||
gender: '男',
|
||
content: '维生素B12注射液【1ml：0.5mg*1】 ',
|
||
dates: [{
|
||
date: '05/04',
|
||
times: [{
|
||
time: '08:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}, {
|
||
time: '12:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}]
|
||
}, {
|
||
date: '05/05',
|
||
times: [{
|
||
time: '08:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}, {
|
||
time: '12:00',
|
||
nurse: '刘护士',
|
||
checked: false
|
||
}]
|
||
}]
|
||
}]
|
||
},
|
||
]
|
||
}
|
||
// ====collectDrug
|
||
const collectDrug=()=>{
|
||
ElMessageBox.confirm(
|
||
'是否确认领药申请？',
|
||
'提醒',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
.then(() => {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '申请成功！',
|
||
})
|
||
collectTsableData.value=[]
|
||
})
|
||
.catch(() => {
|
||
})
|
||
}
|
||
onBeforeMount(() => {
|
||
|
||
})
|
||
onMounted(() => {
|
||
|
||
})
|
||
defineExpose({ state })
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.medicineCollect-container{
|
||
display: flex;
|
||
height: 100%;
|
||
padding: 8px;
|
||
.patientList-container{
|
||
width: 300px;
|
||
height: 100%;
|
||
}
|
||
.medicineList-container{
|
||
flex: auto;
|
||
.filter-container{
|
||
height: 44px;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |