<template>
|
<div class="doctor_advice_container" :style="{ height: height }">
|
<div class="doctor_advice_list">
|
<div
|
v-for="(item, index) in drugOrders"
|
:key="index"
|
class="doctor_advice_item"
|
>
|
<div class="doctor_advice_item_name">{{ item.name }}</div>
|
<template v-if="item?.children && item.children.length > 0">
|
<div
|
v-for="(child, childIndex) in item.children"
|
:key="childIndex"
|
class="doctor_advice_item_sub"
|
>
|
<img :src="trunImgSrc" alt="" />
|
<span>{{ child }}</span>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { PropType, computed } from "vue";
|
import type { Order } from "./type";
|
import trunImgSrc from "../../assets/turn.png";
|
|
export default {
|
name: "DoctorAdvice",
|
props: {
|
// 容器的高度
|
height: {
|
type: String,
|
default: '100%',
|
},
|
// 医嘱列表
|
list: {
|
type: Array as PropType<Order[]>,
|
default: () => [],
|
},
|
},
|
setup(props) {
|
const drugOrders = computed(() => {
|
// 格式化主医嘱数据（浅拷贝）
|
const formatList = props.list
|
.filter((e) => e.orderIsSub !== 1)
|
.map((e) => ({ ...e }));
|
|
// 处理子医嘱并挂载到对应主医嘱上
|
props.list.forEach((e) => {
|
if (e.orderIsSub === 1) {
|
const i = formatList.findIndex((v) => v.code === e.orderMainCode);
|
if (i !== -1) {
|
if (!formatList[i].subDrugOrders) {
|
formatList[i].subDrugOrders = [];
|
}
|
formatList[i].subDrugOrders.push(e);
|
}
|
}
|
});
|
|
// 构建显示用的 name 和子医嘱 children
|
return formatList.map((order) => {
|
let name = "";
|
|
if (order.orderNameInfo) {
|
name = order.orderNameInfo.itemName || "";
|
const drugSpec = order.orderNameInfo.feeDrugInfo?.drugSpec;
|
if (drugSpec) {
|
name += ` (${drugSpec})`;
|
}
|
}
|
|
if (order.orderUsage && order.orderUsage !== 0) {
|
name += ` ${order.orderUsage}${
|
order.orderNameInfo?.feeDrugInfo?.drugUnitName || ""
|
}`;
|
}
|
|
if (order.orderCount) {
|
name += ` ${order.orderCount}`;
|
const pkgUnit = order.orderNameInfo?.feeDrugInfo?.drugPackageUnitName;
|
if (pkgUnit) {
|
name += pkgUnit;
|
}
|
}
|
|
if (order.orderFromInfo?.dictText) {
|
name += ` ${order.orderFromInfo.dictText}`;
|
}
|
|
if (order.orderFreqInfo?.dictText) {
|
name += ` ${order.orderFreqInfo.dictText}`;
|
}
|
|
const children: string[] = [];
|
|
if (order.subDrugOrders?.length) {
|
order.subDrugOrders.forEach((child: any) => {
|
let subName = child.orderNameInfo?.itemName || "";
|
|
const childSpec = child.orderNameInfo?.feeDrugInfo?.drugSpec;
|
if (childSpec) {
|
subName += ` (${childSpec})`;
|
}
|
|
if (child.orderUsage) {
|
const unit = child.orderNameInfo?.feeDrugInfo?.drugUnitName || "";
|
subName += ` ${child.orderUsage}${unit}`;
|
}
|
|
if (child.orderCount) {
|
const pkgUnit =
|
child.orderNameInfo?.feeDrugInfo?.drugPackageUnitName;
|
if (pkgUnit) {
|
subName += ` ${child.orderCount}${pkgUnit}`;
|
}
|
}
|
|
children.push(subName);
|
});
|
}
|
|
return {
|
name,
|
children,
|
};
|
});
|
});
|
|
return {
|
drugOrders,
|
trunImgSrc,
|
};
|
},
|
};
|
</script>
|
|
<style scoped>
|
.doctor_advice_container {
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
.doctor_advice_container .doctor_advice_list {
|
box-sizing: border-box;
|
height: 100%;
|
background: #ffffff;
|
border-radius: 8px;
|
overflow: hidden;
|
overflow-y: auto;
|
}
|
.doctor_advice_container .doctor_advice_item {
|
box-sizing: border-box;
|
padding: 12px 24px;
|
border-bottom: 2px solid #e6e5e5;
|
}
|
.doctor_advice_container .doctor_advice_item:last-child {
|
box-sizing: border-box;
|
border-bottom: none;
|
}
|
.doctor_advice_container .doctor_advice_item .doctor_advice_item_name {
|
box-sizing: border-box;
|
font-weight: 400;
|
font-size: 26px;
|
color: #333333;
|
line-height: 35px;
|
text-align: left;
|
font-style: normal;
|
}
|
.doctor_advice_container .doctor_advice_item_sub {
|
padding-left: 15px;
|
font-weight: 400;
|
font-size: 26px;
|
color: #777777;
|
line-height: 35px;
|
text-align: left;
|
font-style: normal;
|
}
|
.doctor_advice_container .doctor_advice_item_sub img {
|
width: 24px;
|
height: 24px;
|
margin-right: 5px;
|
}
|
</style>
|
