web/src/views/outpatient/index.vue

<template>
  <div class="container">
    <div class="left">
      <MedicalQueue v-model="itemId" :status="status" @getId="getId" @getStatus="getStatus"></MedicalQueue>
    </div>
    <div class="middle">
      <el-scrollbar>
        <div class="case">
          <CaseDetail v-if="patientRegistration.status==3" v-model="formData" ></CaseDetail>
          <Case ref="caseRef" v-else v-model="formData" :status="status"></Case>
        </div>
        <div class="service-items">
          <ServiceItemsDetail v-if="patientRegistration.status==3" v-model="itemList"></ServiceItemsDetail>
          <ServiceItems v-else v-model="itemList" :status="status"></ServiceItems>
        </div>
        <div class="pharmaceutical-consumables">
          <PharmaceuticalConsumablesDetail v-if="patientRegistration.status==3"
                                           v-model="goodsList" ></PharmaceuticalConsumablesDetail>
          <PharmaceuticalConsumables v-else v-model="goodsList" :status="status"></PharmaceuticalConsumables>
        </div>
        <div class="bottom">
          <Settlement v-if="status!=1" v-model="totalAmount" @deleteItem="deleteItem" @save="save" :status="status"
                      @edit="edit"></Settlement>
        </div>
      </el-scrollbar>
    </div>
    <div class="right">
      <div class="top">
        <MedicalInformation v-model="patientRegistration" ref="medicalInformationRef"></MedicalInformation>
      </div>
      <div class="bottom">
        <MedicalHistory ref="medicalHistoryRef" @copy="copyForm" @copyItem="copyItemList" @copyGoods="copyGoodsList"></MedicalHistory>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import MedicalQueue from "@/components/outpatient/MedicalQueue.vue";
import MedicalInformation from "@/components/outpatient/MedicalInformation.vue";
import MedicalHistory from "@/components/outpatient/MedicalHistory.vue";
import Case from "@/components/outpatient/Case.vue";


import ServiceItems from "@/components/outpatient/ServiceItems.vue";
import PharmaceuticalConsumables from "@/components/outpatient/PharmaceuticalConsumables.vue";
import {ref, watch, nextTick, onMounted} from "vue";
import Settlement from "@/components/outpatient/Settlement.vue";
import {post} from "@/utils/request.ts";
import {type Action, ElMessage, ElMessageBox} from "element-plus";
import ServiceItemsDetail from "@/components/outpatient/ServiceItemsDetail.vue";
import PharmaceuticalConsumablesDetail from "@/components/outpatient/PharmaceuticalConsumablesDetail.vue";
import CaseDetail from "@/components/outpatient/CaseDetail.vue";
import {apiConfig} from "@/assets/config/apiConfig.ts";

const registerId = ref()
const patientId = ref()
const itemList = ref([])
const goodsList = ref([])
const formData = ref<any>({diagType: 1})
const save = () => {
  let json = {
    chinaAdjunctCheck: formData.value.chinaAdjunctCheck,
    chinaDeal: formData.value.chinaDeal,
    mouthCheck: formData.value.mouthCheck,
    adjunctCheck: formData.value.adjunctCheck,
    deal: formData.value.deal,
  }
  let medicalRecord = {
    json: JSON.stringify(json),
    mainAppeal: formData.value.mainAppeal,
    nowMedicalHistory: formData.value.nowMedicalHistory,
    beforeMedicalHistory: formData.value.beforeMedicalHistory,
    allergyHistory: formData.value.allergyHistory,
    exam: formData.value.exam,
    diagnosisDetail: formData.value.diagnosisDetail,
    diagnosisSummary: formData.value.diagnosisSummary,
    diagType: formData.value.diagType
  }
  const data = {
    registrationId: registerId.value,
    patientId: patientId.value,
    itemList: itemList.value,
    goodsList: goodsList.value,
    diagnosisMedicalRecord: medicalRecord,

  }
  post('medical/record/save', {data: data}).then(() => {
    ElMessage.success("保存成功")
  })
}
const totalAmount = ref(0)
const medicalInformationRef = ref()
const medicalHistoryRef = ref()
const patientRegistration = ref<any>({})
const getId = (item: any) => {
  registerId.value = item.id
  itemId.value = item.id
  patientId.value = item.patientInfoId
  status.value = item.status
  nextTick(() => {
    medicalHistoryRef.value?.init(patientId.value);
  })
  if (item.status == 1) {
    ElMessageBox.confirm(`您将要接诊${item.name}`, "提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      callback: (action: any) => {
        if (action == "confirm") {
          post('registration/changeStatus', {id: item.id, status: 2}).then((res: any) => {
            status.value = 2
          })
        }
      },
    })
  }
  if (item.status == 3) {
    post(apiConfig.DoctorDetail, {
      regisId: item.id
    }).then((res: any) => {
      formData.value = res.diagnosisMedicalRecord
      goodsList.value = res.goodsDetail
      itemList.value = res.itemDetail
      patientRegistration.value = res.patientRegistration
    })
  }
}
const status = ref<any>(1)
const deleteItem = () => {
  post('registration/changeStatus', {id: registerId.value, status: 1}).then((res: any) => {
    status.value = 1
  })
}
const getStatus = (e: any) => {
  status.value = e
  formData.value = {}
  goodsList.value = []
  itemList.value = []
  patientRegistration.value = {}
  nextTick(() => {
    medicalHistoryRef.value?.clearList();
  })
}
const itemId = ref<any>('')
const edit = () => {
  post('registration/changeStatus', {id: registerId.value, status: 2}).then((res: any) => {
    status.value = 2
  })
}
// 使用 watch 监听 goodsList 和 itemList 的变化
watch([() => goodsList.value, itemList], ([newGoodsList, newItemList]) => {
  const pharmaceuticalTotalAmount = newItemList.reduce((pre: any, cur: any) => {
    return pre + cur.unitPrice * cur.selectedNum
  }, 0);
  const serviceTotalAmount = newGoodsList.reduce((pre: any, cur: any) => {
    return pre + cur.selectedNum * cur.selectedPrice
  }, 0);
  totalAmount.value = pharmaceuticalTotalAmount + serviceTotalAmount;
}, {deep: true});
const caseRef= ref<any>("")
const copyForm=(item:any) => {
  formData.value = item.diagnosisMedicalRecord
  const diagnosisList =JSON.parse(item.diagnosisMedicalRecord.diagnosisDetail)
  const nList = item.diagnosisMedicalRecord.diagnosisSummary.split(',')
  nextTick(()=>{
    caseRef.value?.initDiagnosisSearch(diagnosisList,nList)
  })
}
const copyItemList=(item:any) => {
  console.log(item)
  itemList.value = item.itemDetail
}
const copyGoodsList=(item:any) => {
  goodsList.value = item.goodsDetail
}
</script>
<style scoped lang="scss">
.container {
  display: flex;
  padding: 0 24px;
  height: 100%;

  .left {
    width: 320px;
    margin-right: 24px;
  }

  .middle {
    flex: 1;
    display: flex;
    flex-direction: column;

    .case {
      background: #FFFFFF;
      border-radius: 8px;
      padding-bottom: 24px;
    }

    .service-items {
      margin-top: 24px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .pharmaceutical-consumables {
      margin-top: 24px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .bottom {
      margin-top: 24px;
      height: 86px;
      border-radius: 8px;
    }
  }

  .right {
    width: 364px;
    display: flex;
    margin-left: 24px;
    flex-direction: column;

    .top {
      width: 100%;
      height: 240px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .bottom {
      flex: 1;
      width: 100%;
      background: #fff;
      margin-top: 24px;
      border-radius: 8px;
      min-height: 0;


    }

  }

}


</style>