123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635 |
- <template>
- <div class="nutrition-table">
- <el-table :data="tableData" border>
- <el-table-column type="index" label="组号" width="60" align="center" />
- <el-table-column label="营养产品" min-width="300">
- <template #default="{row}">
- <div class="product-group">
- <div v-for="(product, index) in row.products" :key="index" class="product-row" style="margin-bottom:5px;">
- <el-select v-model="product.nutritionProductId" placeholder="请选择" @change="changeProductSelect">
- <el-option v-for="pn in productNutritionList" :key="pn.id" :label="pn.productName"
- :value="pn.id+'_'+row.sn+'_'+index"></el-option>
- </el-select>
- <div class="action-buttons">
- <el-button class="icon-btn" @click="addProduct(row)">
- <el-icon>
- <Plus />
- </el-icon>
- </el-button>
- <el-button class="icon-btn" @click="removeProduct(row, index)">
- <el-icon>
- <Delete />
- </el-icon>
- </el-button>
- </div>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="用量/次" width="150" align="center">
- <template #default="{row}">
- <div class="dosage-group">
- <div v-for="(product, index) in row.products" :key="index" class="dosage-input">
- <el-input v-model="product.dosePerTime" placeholder="请输入" class="input-center"
- @input="dosePerTimeInput(product.dosePerTime,row.sn+'_'+index)"/>
- <span class="unit">g</span>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="餐次时间" width="500">
- <template #default="{row}">
- <div class="time-slots">
- <div class="time-row">
- <div class="time-group">
- <el-checkbox v-model="row.timeSlots[0].checked" @change="changeTimeSelection(row.timeSlots[0].checked,row.sn)"/>
- <el-time-select v-model="row.timeSlots[0].time" start="00:00" step="00:30" end="23:30"
- placeholder="选择时间" :disabled="!row.timeSlots[0].checked"
- />
- </div>
- <div class="time-group">
- <el-checkbox v-model="row.timeSlots[1].checked" @change="changeTimeSelection(row.timeSlots[1].checked,row.sn)"/>
- <el-time-select v-model="row.timeSlots[1].time" start="00:00" step="00:30" end="23:30"
- placeholder="选择时间" :disabled="!row.timeSlots[1].checked"
- />
- </div>
- <div class="time-group">
- <el-checkbox v-model="row.timeSlots[2].checked" @change="changeTimeSelection(row.timeSlots[2].checked,row.sn)"/>
- <el-time-select v-model="row.timeSlots[2].time" start="00:00" step="00:30" end="23:30"
- placeholder="选择时间" :disabled="!row.timeSlots[2].checked"
- />
- </div>
- </div>
- <div class="time-row">
- <div class="time-group">
- <el-checkbox v-model="row.timeSlots[3].checked" @change="changeTimeSelection(row.timeSlots[3].checked,row.sn)"/>
- <el-time-select v-model="row.timeSlots[3].time" start="00:00" step="00:30" end="23:30"
- placeholder="选择时间" :disabled="!row.timeSlots[3].checked"
- />
- </div>
- <div class="time-group">
- <el-checkbox v-model="row.timeSlots[4].checked" @change="changeTimeSelection(row.timeSlots[4].checked,row.sn)"/>
- <el-time-select v-model="row.timeSlots[4].time" start="00:00" step="00:30" end="23:30"
- placeholder="选择时间" :disabled="!row.timeSlots[4].checked"
- />
- </div>
- <div class="time-group">
- <el-checkbox v-model="row.timeSlots[5].checked" @change="changeTimeSelection(row.timeSlots[5].checked,row.sn)"/>
- <el-time-select v-model="row.timeSlots[5].time" start="00:00" step="00:30" end="23:30"
- placeholder="选择时间" :disabled="!row.timeSlots[5].checked"
- />
- </div>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="频次" width="120" align="center">
- <template #default="{row}">
- <span>一天{{row.frequency}}次</span>
- </template>
- </el-table-column>
- <el-table-column label="首日" width="150" align="center">
- <template #default="{row}">
- <el-input v-model="row.firstDay" @input="firstDayInput(row.firstDay,row.sn)">
- <template #append>次</template>
- </el-input>
- </template>
- </el-table-column>
- <el-table-column label="用量/日" width="100" align="center">
- <template #default="{row}">
- <div class="daily-dosage" v-for="(product, index) in row.products" :key="index">
- <span>{{product.dosePerDay }}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="使用天数" width="200" align="center">
- <template #default="{row}">
- <div class="daily-size">
- <el-input-number v-model="row.usageDays" :min="1" @change="changeUsageDays(row.usageDays,row.sn)"/>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="用量/总" width="100" align="center">
- <template #default="{row}">
- <div class="daily-dosage" v-for="(product, index) in row.products" :key="index">
- <span>{{product.totalDose }}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="规格" width="100" align="center">
- <template #default="{row}">
- <div class="daily-dosage" v-for="(product, index) in row.products" :key="index">
- <span>{{product.specification }}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="用法" width="150" align="center">
- <template #default="{row}">
- <el-select v-model="row.usage" placeholder="请选择" >
- <el-option v-for="dict in default_usage" :key="dict.value" :label="dict.label"
- :value="dict.value"></el-option>
- </el-select>
- </template>
- </el-table-column>
- <el-table-column label="制剂液量/次" width="170" align="center">
- <template #default="{row}">
- <el-input v-model="row.preparationVolumePerTime">
- <template #append>ml</template>
- </el-input>
- </template>
- </el-table-column>
- <el-table-column label="制剂浓度/次" width="100" align="center">
- <template #default="{row}">
- <div class="daily-dosage">
- <span>{{ row.preparationConcentrationPerTime }}</span>
- <span class="unit">%</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="能量密度/次" width="200" align="center">
- <template #default="{row}">
- <el-input v-model="row.energyDensityPerTime">
- <template #append>kcal/ml</template>
- </el-input>
- </template>
- </el-table-column>
- <el-table-column label="处方备注" width="200" align="center">
- <template #default="{row}">
- <template v-for="(product, index) in row.products" >
- <el-input v-model="product.prescriptionRemark" :maxlength="100" :show-word-limit="true" />
- </template>
- </template>
- </el-table-column>
- <el-table-column label="每日热量" width="100" align="center">
- <template #default="{row}">
- <div class="daily-dosage" v-for="(product, index) in row.products" :key="index">
- <span>{{product.dailyCalories }}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="金额" width="100" align="center">
- <template #default="{row}">
- <div class="daily-dosage" v-for="(product, index) in row.products" :key="index">
- <span>{{product.amount }}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="160" align="center" fixed="right">
- <template #default="{$index}">
- <div class="operation-cell">
- <el-button type="primary" link @click="copyRow($index)">复制餐次</el-button>
- <el-button type="danger" link @click="deleteRow($index)">删除</el-button>
- </div>
- </template>
- </el-table-column>
- </el-table>
- <div class="table-footer">
- <el-button type="primary" class="add-prescription-btn" @click="addNewRow">
- <el-icon>
- <CirclePlus />
- </el-icon>
- 开具多处方
- </el-button>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import {ref} from 'vue';
- import {Plus, Delete, CirclePlus} from '@element-plus/icons-vue';
- import { listEnteralNutrition, getEnteralNutrition, delEnteralNutrition, addEnteralNutrition, updateEnteralNutrition } from '@/api/patients/nutrition';
- import { EnteralNutritionVO, EnteralNutritionQuery, EnteralNutritionForm } from '@/api/patients/nutrition/types';
- import { listNutrition, listAllNutrition } from '@/api/warehouse/productNutrition/index';
- import { NutritionVO, NutritionQuery, NutritionForm } from '@/api/warehouse/productNutrition/types';
- import { it } from 'node:test';
- const { proxy } = getCurrentInstance() as ComponentInternalInstance;
- const { default_usage } = toRefs < any > (proxy ?.useDict('default_usage'));
- let productNutritionList=ref<NutritionVO[]>([]);
- const getProductNutritionList = async () => {
- const res = await listAllNutrition();
- productNutritionList.value = res.rows;
- }
- interface TimeSlot {
- checked: boolean;
- time: string;
- }
- interface TableRow extends EnteralNutritionForm {
- products: EnteralNutritionForm[];
- timeSlots: TimeSlot[];
- sn: number;
- }
- // 创建默认行数据的函数
- const createDefaultRow = (): TableRow => ({
- products: [{specification:'g',totalDose:'g',dosePerDay:'g'}],
- timeSlots: [
- {checked: true, time: '08:00'},
- {checked: false, time: '08:30'},
- {checked: true, time: '12:00'},
- {checked: false, time: '12:30'},
- {checked: true, time: '18:00'},
- {checked: false, time: '18:30'}
- ],
- usageDays:1,
- frequency:3,
- firstDay:1,
- sn:0,
- });
- const emit = defineEmits(['change']);
- // 示例数据
- const tableData = ref<TableRow[]>([createDefaultRow()]);
- // 新增行
- const addNewRow = () => {
- let row: TableRow = createDefaultRow();
- row.sn = tableData.value.length ;
- tableData.value.push(row);
- emit('change',JSON.stringify(tableData.value))
- };
- const changeProductSelect = async (id: string) => {
- let arr=id.split('_');
- for (let item of productNutritionList.value) {
- if (item.id.toString() != arr[0]) {
- continue
- }
-
- let row = tableData.value[Number(arr[1])];
- let pt = row.products[Number(arr[2])];
- pt.specification=item.productSpec;
- pt.dosePerTime=null;
- pt.dailyCalories=null;
- pt.amount=null;
- row.usage=item.defaultUsage;
- pt.totalDose='0'+item.productSpecUnit;
- pt.dosePerDay='0'+item.productSpecUnit;
- break;
- }
- };
- // 新增产品输入框
- const addProduct = (row: TableRow) => {
- row.products.push({});
- };
- // 删除产品输入框
- const removeProduct = (row: TableRow, index: number) => {
- // 如果删除后只剩一个输入框,删除整行
- if (row.products.length <= 1) {
- const rowIndex = tableData.value.findIndex((item) => item === row);
- if (rowIndex !== -1) {
- tableData.value.splice(rowIndex, 1);
- }
- } else {
- // 否则只删除当前输入框
- row.products.splice(index, 1);
- }
- };
-
- // 复制行
- const copyRow = (index: number) => {
- const newRow = JSON.parse(JSON.stringify(tableData.value[index]));
- tableData.value.splice(index + 1, 0, newRow);
- emit('change',JSON.stringify(tableData.value))
- };
- // 删除行
- const deleteRow = (index: number) => {
- if (tableData.value.length === 1) return;
- tableData.value.splice(index, 1);
- emit('change',JSON.stringify(tableData.value))
- };
-
- const changeUsageDays = (value: string, sn:string) => {
- changeTimeSelection(value,sn);
- emit('change',JSON.stringify(tableData.value))
- }
- const firstDayInput = (value: string, sn:string) => {
- changeTimeSelection(value,sn);
- emit('change',JSON.stringify(tableData.value))
- }
- const changeTimeSelection = (value: string, sn:string) => {
- let row = tableData.value[sn];
- let frequency=0;
- let oldFrequency=row.frequency;
- row.timeSlots.forEach(item=>{
- if(item.checked){
- frequency++;
- }
- })
- row.frequency=frequency;
- if(oldFrequency!==frequency){
- emit('change',JSON.stringify(tableData.value))
- }
- row.products.forEach(pt => {
- if (!pt.dosePerTime || pt.dosePerTime.trim().length == 0) {
- return;
- }
- let arr=pt.nutritionProductId.split('_');
- for (let item of productNutritionList.value) {
- if (item.id.toString() != arr[0]) {
- continue
- }
-
-
- let val=item.calorie*row.frequency*Number(pt.dosePerTime)/100.0
- pt.dailyCalories=val.toFixed(4);
- val=(row.frequency*(row.usageDays-1)+row.firstDay)*item.configSalePrice*Number(pt.dosePerTime)
- pt.amount=Math.round(val*100)/100;
- val=(row.frequency*(row.usageDays-1)+row.firstDay)*Number(pt.dosePerTime)
- pt.totalDose=val.toFixed(4)+item.productSpecUnit;
- val=row.frequency*Number(pt.dosePerTime)
- pt.dosePerDay=val.toFixed(4)+item.productSpecUnit;
- break;
- }
- });
- };
- const dosePerTimeInput = (value: string, str:string) => {
- let arr=str.split('_');
- let row = tableData.value[Number(arr[0])];
- let pt = row.products[Number(arr[1])];
- if(!pt.dosePerTime||pt.dosePerTime.trim().length==0){
- pt.dailyCalories=null;
- pt.amount=null;
- return;
- }
- arr=pt.nutritionProductId.split('_');
- for (let item of productNutritionList.value) {
- if (item.id.toString() != arr[0]) {
- continue
- }
-
-
- let val=item.calorie*row.frequency*Number(pt.dosePerTime)/100.0
- pt.dailyCalories=val.toFixed(4);
- val=(row.frequency*(row.usageDays-1)+row.firstDay)*item.configSalePrice*Number(pt.dosePerTime)
- pt.amount=Math.round(val*100)/100;
- val=(row.frequency*(row.usageDays-1)+row.firstDay)*Number(pt.dosePerTime)
- pt.totalDose=val.toFixed(4)+item.productSpecUnit;
- val=row.frequency*Number(pt.dosePerTime)
- pt.dosePerDay=val.toFixed(4)+item.productSpecUnit;
- break;
- }
- };
- onMounted(() => {
- getProductNutritionList();
- });
- </script>
- <style lang="scss" scoped>
- .nutrition-table {
- :deep(.el-table) {
- // 表头样式
- .el-table__header {
- th {
- background-color: #f5f7fa;
- color: #606266;
- font-weight: 500;
- padding: 8px 0;
- height: 40px;
- }
- }
- // 表格行样式
- .el-table__row {
- td {
- padding: 4px 8px;
- }
- }
- }
- // 产品输入框组样式
- .product-group {
- display: flex;
- flex-direction: column;
- gap: 8px;
- .product-row {
- display: flex;
- align-items: center;
- gap: 8px;
- .el-input {
- flex: 1;
- }
- .action-buttons {
- display: flex;
- gap: 1px;
- .icon-btn {
- padding: 6px;
- height: 32px;
- border: 1px solid #dcdfe6;
- &:hover {
- border-color: var(--el-color-primary);
- color: var(--el-color-primary);
- }
- .el-icon {
- font-size: 14px;
- }
- }
- }
- }
- }
- // 用量输入框组样式
- .dosage-group {
- display: flex;
- flex-direction: column;
- gap: 8px;
- .dosage-input {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
- .input-center {
- width: 100px;
- :deep(.el-input__inner) {
- text-align: center;
- }
- }
- .unit {
- color: #909399;
- font-size: 14px;
- flex-shrink: 0;
- }
- }
- }
- // 餐次时间样式
- .time-slots {
- display: flex;
- flex-direction: column;
- gap: 8px;
- .time-row {
- display: flex;
- gap: 8px;
- .time-group {
- display: flex;
- align-items: center;
- gap: 4px;
- :deep(.el-checkbox) {
- margin-right: 0;
- .el-checkbox__label {
- display: none;
- }
- }
- :deep(.el-time-select) {
- .el-input {
- width: 120px;
- }
- .el-input__wrapper {
- padding: 0 8px;
- border-radius: 2px;
- box-shadow: 0 0 0 1px #dcdfe6 inset;
- &:hover:not(.is-disabled) {
- box-shadow: 0 0 0 1px #c0c4cc inset;
- }
- &.is-disabled {
- background-color: #f5f7fa;
- box-shadow: 0 0 0 1px #e4e7ed inset;
- .el-input__inner {
- color: #909399;
- -webkit-text-fill-color: #909399;
- }
- }
- }
- .el-input__inner {
- height: 32px;
- text-align: center;
- font-size: 14px;
- color: #606266;
- }
- }
- }
- }
- }
- .daily-dosage,
- .days {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
- .unit {
- color: #909399;
- font-size: 14px;
- }
- }
- .operation-cell {
- display: flex;
- justify-content: center;
- gap: 12px;
- .el-button {
- padding: 4px 8px;
- }
- }
- .table-footer {
- height: 50px;
- border: 1px solid var(--el-table-border-color);
- border-top: none;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #f5f7fa;
- .add-prescription-btn {
- display: flex;
- align-items: center;
- gap: 4px;
- height: 32px;
- padding: 0 16px;
- font-size: 14px;
- background-color: var(--el-color-primary-light-8);
- color: var(--el-color-primary);
- border: none;
- &:hover {
- background-color: var(--el-color-primary-light-9);
- }
- .el-icon {
- font-size: 16px;
- }
- }
- }
- .stop-date {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 16px;
- .required {
- color: #f56c6c;
- font-size: 14px;
- }
- .label {
- color: #606266;
- font-size: 14px;
- }
- .days {
- color: #f56c6c;
- font-size: 14px;
- }
- }
- }
- :deep(.daily-size div) {
- width: 100px;
- }
- </style>
|