web/src/components/charge/ServiceDetail.vue

84 lines
2.4 KiB
Vue

<template>
<el-table :data="data.itemDetail" max-height="150">
<el-table-column prop="itemName" label="项目名称" show-overflow-tooltip></el-table-column>
<el-table-column label="单价">
<template #default="scope">
{{scope.row.selectedPrice}}
</template>
</el-table-column>
<el-table-column label="数量">
<template #default="scope">
<el-input-number v-model="scope.row.selectedNum" min="0"
@change="handleNumChange" v-if="data.status == 0" size="small"></el-input-number>
<span v-else>{{scope.row.selectedNum}}</span>
{{scope.row.selectedUnit}}
</template>
</el-table-column>
<el-table-column label="小计">
<template #default="scope">
¥{{scope.row.selectedNum*scope.row.selectedPrice}}
</template>
</el-table-column>
<el-table-column label="操作" v-if="data.status ==0">
<template #default="scope">
<el-button type="danger" link @click="delService(scope.row)">X</el-button>
</template>
</el-table-column>
</el-table>
<div class="bottom">
<SearchInput v-if="data.status == 0" :request-api="serviceSearchApi" :show-config="serviceShowConfig"
@selectedCallBack="serviceSelect"></SearchInput>
<span>合计:¥{{getTotalPrice()}}</span>
</div>
</template>
<script setup lang="ts">
import SearchInput from "@/components/SearchInput.vue";
const data = defineModel<any>();
const delService = (item: any) => {
data.value.itemDetail = data.value.itemDetail.filter((i: any) => i.id != item.id)
}
const serviceSearchApi = "item/search";
const serviceShowConfig = [
{
label: "服务名称",
prop: "itemName",
},
{
label: "服务医保码",
prop: "itemSocialCode",
},
{
label: "售价",
prop: "unitPrice",
},
]
const emit = defineEmits(['totalPriceChange'])
const serviceSelect = (row: any) => {
row.selectedNum = 1
row.selectedUnit = row.unit
row.selectedPrice = row.unitPrice
data.value.itemDetail.push(row)
emit('totalPriceChange', row)
}
const handleNumChange = () => {
emit('totalPriceChange')
}
const getTotalPrice =()=>{
let totalPrice = 0;
data.value.itemDetail?.forEach((item:any)=>{
totalPrice += item.selectedNum*item.selectedPrice
})
return totalPrice;
}
</script>
<style scoped lang="scss">
:deep(.el-table__cell){
padding: 0 4px;
}
.bottom{
text-align: right;
}
</style>