feat:重构模块

src/components/kpi/KpiCard.vue

@@ -0,0 +1,88 @@
+<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 { isMobile } from 'vue3-common/utils/layoutUtil'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+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
+
+  if (isMobile()) {
+    appStore.isShowMobileBack = true
+    await router.push({ name: 'KpiDetailId', params: { id } })
+  } else {
+    kpiStore.kpiDialog = {
+      title: '编辑绩效',
+      visible: true,
+      data: deepCopyObject(kpiStore.currentKpi)
+    }
+  }
+}
+</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>