79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
|
<div class="kpi-info card-item">
|
|
<div v-for="(item, index) in props.itemList"
|
|
:key="index" class="kpi-item"
|
|
@click="editClick(item)">
|
|
<span>{{ item.patientName }}</span>
|
|
<span>{{ item.project }}</span>
|
|
<span class="price">{{ item.price }} 元</span>
|
|
</div>
|
|
|
|
<el-divider />
|
|
<span class="total">总计: {{ totalPrice }} 元</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType, defineProps, computed } from 'vue'
|
|
import { useKpiStore } from '@/store/kpi.ts'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { useRouter } from 'vue-router'
|
|
import { IKpi } from '@/types/kpi.ts'
|
|
|
|
const props = defineProps({
|
|
itemList: {
|
|
required: true,
|
|
type: Object as PropType<IKpi[]>
|
|
}
|
|
})
|
|
|
|
const kpiStore = useKpiStore()
|
|
const appStore = useAppStore()
|
|
const router = useRouter()
|
|
|
|
const totalPrice = computed(() => {
|
|
return props.itemList.reduce((acc, item) => acc + item.price, 0)
|
|
})
|
|
|
|
const editClick = async (kpi: IKpi) => {
|
|
const { id } = kpi
|
|
kpiStore.kpiApiType = 'UPDATE'
|
|
kpiStore.currentKpi = kpi
|
|
|
|
appStore.isShowMobileBack = true
|
|
await router.push({ name: 'KpiDetailId', params: { id } })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.kpi-info {
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
|
|
.kpi-item {
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr 50px;
|
|
align-items: center;
|
|
gap: 5px;
|
|
|
|
.price {
|
|
justify-self: right;
|
|
}
|
|
}
|
|
|
|
.el-divider {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.total {
|
|
padding: 10px;
|
|
align-self: flex-end;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|