src/components/SearchInput.vue

@@ -29,6 +29,7 @@
             v-for="item in showConfig"
             :prop="item.prop"
             :label="item.label"
+            show-overflow-tooltip
         ></el-table-column>
       </el-table>
     </div>
@@ -57,7 +58,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: 800
+    default: 600
   },
   showConfig: {
     type: Array as () => showConfig[],

src/components/charge/ServiceDetail.vue

@@ -0,0 +1,84 @@
+<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>

src/components/common/service/ServiceDetail.vue

@@ -1,110 +0,0 @@
-<template>
-  <Panel title="服务项目">
-    <el-table v-if="itemDetail.length>0" :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-if="disabled||props.status==0" v-model="scope.row.selectedNum" min="0"
-                           @change="handleNumChange" 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="操作">
-        <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 :request-api="serviceSearchApi"
-                   :show-config="serviceShowConfig"
-                   :disabled="!disabled"
-                   @selectedCallBack="serviceSelect"></SearchInput>
-      <span>合计：￥{{ getTotalPrice() || 0 }}</span>
-    </div>
-  </Panel>
-</template>
-<script setup lang="ts">
-import {defineProps, watchEffect, ref} from "vue";
-import SearchInput from "@/components/SearchInput.vue";
-import Panel from "@/components/common/Panel.vue";
-
-const props = defineProps({
-  status: {
-    type: Number,
-    default: 0
-  }
-})
-const itemDetail = defineModel<any>();
-
-const delService = (item: any) => {
-  itemDetail.value = itemDetail.value.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
-  itemDetail.value.push(row)
-  emit('totalPriceChange')
-}
-const handleNumChange = () => {
-  emit('totalPriceChange')
-}
-
-const getTotalPrice = () => {
-  let totalPrice = 0;
-  if (itemDetail.value) {
-    itemDetail.value.forEach((item: any) => {
-      totalPrice += item.selectedNum * item.selectedPrice
-    })
-  }
-
-  return totalPrice;
-}
-const disabled = ref<any>(false)
-
-watchEffect(() => {
-      if (props.status == 2 || props.status == 0) {
-        disabled.value = true
-      } else {
-        disabled.value = false
-      }
-    }
-)
-</script>
-<style scoped lang="scss">
-:deep(.el-table__cell) {
-  padding: 0 4px;
-}
-
-.bottom {
-  text-align: right;
-}
-</style>

src/views/charge/index.vue

@@ -47,7 +47,9 @@
           </Panel>
         </div>
         <div style="margin-top: 24px">
-            <ServiceDetail v-model="formData.itemDetail" :status="statusDisabled" @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
+          <Panel title="服务项目">
+            <ServiceDetail v-model="formData" @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
+          </Panel>
         </div>
         <div style="margin-top: 24px">
           <Panel title="药品耗材">
@@ -82,7 +84,7 @@ import Panel from "@/components/common/Panel.vue";
 import ChargeQueue from "@/components/charge/ChargeQueue.vue";
 import {nextTick, onMounted, ref} from "vue";
 import {post} from "@/utils/request.ts";
-import ServiceDetail from "@/components/common/service/ServiceDetail.vue";
+import ServiceDetail from "@/components/charge/ServiceDetail.vue";
 import GoodsDetail from "@/components/charge/GoodsDetail.vue";
 import DiagnosisSearchInput from "@/components/outpatient/DiagnosisSearchInput.vue";
 import Settlement from "@/components/charge/Settlement.vue";
@@ -98,8 +100,6 @@ const socialCard = ref<any>({payInfo: {}})
 const formData = ref<any>({
   patientInfo: {},
   diagnosisMedicalRecord: {},
-  goodsList: [],
-  itemDetail: [],
 })
 const statusDisabled = ref(0)
 const diagnosisKeyword = ref("")
@@ -177,10 +177,10 @@ onMounted(() => {
 })
 const getOrderTotalPrice = () => {
   let totalPrice = 0
-  formData.value.itemDetail?.forEach((item: any) => {
+  formData.value.itemDetail.forEach((item: any) => {
     totalPrice += item.selectedPrice * item.selectedNum
   })
-  formData.value.goodsList.forEach((item: any) => {
+  formData.value.goodsDetail.forEach((item: any) => {
     totalPrice += item.selectedPrice * item.selectedNum
   })
   formData.value.preTotalPrice = totalPrice

src/views/outpatient/index.vue

@@ -10,8 +10,8 @@
           <Case  ref="caseRef" v-else v-model="formData" :status="status" :isShowFrom="isShowFrom" @focus="focus"></Case>
         </div>
         <div class="service-items">
-<!--          <ServiceItemsDetail v-if="patientRegistration.status==3" v-model="itemList"></ServiceItemsDetail>-->
+          <ServiceItemsDetail v-if="patientRegistration.status==3" v-model="itemList"></ServiceItemsDetail>
-          <ServiceDetail v-model="formData.itemDetail" :status="status" @focus="focus" @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
+          <ServiceItems v-else v-model="itemList" :status="status" @focus="focus"></ServiceItems>
         </div>
         <div class="pharmaceutical-consumables">
           <PharmaceuticalConsumablesDetail v-if="patientRegistration.status==3"
@@ -53,17 +53,12 @@ import PharmaceuticalConsumablesDetail from "@/components/outpatient/Pharmaceuti
 import CaseDetail from "@/components/outpatient/CaseDetail.vue";
 import {apiConfig} from "@/assets/config/apiConfig.ts";
 import PatientCard from "@/components/charge/PatientCard.vue";
-import ServiceDetail from "@/components/common/service/ServiceDetail.vue";
 
 const registerId = ref()
 const patientId = ref()
-const itemDetail = ref([])
+const itemList = ref([])
 const goodsList = ref([])
-const formData = ref<any>({
+const formData = ref<any>({diagType: 1})
-  diagType: 1,
-  itemDetail: [],
-  goodsDetail: [],
-})
 const save = () => {
   let json = {
     chinaAdjunctCheck: formData.value.chinaAdjunctCheck,
@@ -86,7 +81,7 @@ const save = () => {
   const data = {
     registrationId: registerId.value,
     patientId: patientId.value,
-    itemList: itemDetail.value,
+    itemList: itemList.value,
     goodsList: goodsList.value,
     diagnosisMedicalRecord: medicalRecord,
 
@@ -127,7 +122,7 @@ const getId = (item: any) => {
     }).then((res: any) => {
       formData.value = res.diagnosisMedicalRecord
       goodsList.value = res.goodsDetail
-      itemDetail.value = res.itemDetail
+      itemList.value = res.itemDetail
       patientRegistration.value = res.patientRegistration
     })
 
@@ -146,10 +141,9 @@ const deleteItem = () => {
 }
 const getStatus = (e: any) => {
   status.value = e
-
+  formData.value = {}
-  formData.value.itemDetail = []
+  goodsList.value = []
-  // goodsList.value = []
+  itemList.value = []
-  // itemDetail.value = []
   patientRegistration.value = {}
   nextTick(() => {
     medicalHistoryRef.value?.clearList();
@@ -161,19 +155,8 @@ const edit = () => {
     status.value = 2
   })
 }
-const getOrderTotalPrice = () => {
-  let totalPrice = 0
-  formData.value.itemDetail?.forEach((item: any) => {
-    totalPrice += item.selectedPrice * item.selectedNum
-  })
-  formData.value.goodsDetail?.forEach((item: any) => {
-    totalPrice += item.selectedPrice * item.selectedNum
-  })
-  formData.value.preTotalPrice = totalPrice
-  formData.value.totalPrice = totalPrice
-}
 // 使用 watch 监听 goodsList 和 itemList 的变化
-watch([() => goodsList.value, itemDetail], ([newGoodsList, newItemList]) => {
+watch([() => goodsList.value, itemList], ([newGoodsList, newItemList]) => {
   const pharmaceuticalTotalAmount = newItemList.reduce((pre: any, cur: any) => {
     return pre + cur.unitPrice * cur.selectedNum
   }, 0);
@@ -193,7 +176,7 @@ const copyForm=(item:any) => {
 }
 const copyItemList=(item:any) => {
   console.log(item)
-  itemDetail.value = item.itemDetail
+  itemList.value = item.itemDetail
 }
 const copyGoodsList=(item:any) => {
   goodsList.value = item.goodsDetail