web/src/views/outpatient/index.vue

<template>
  <div class="container">
    <div class="left">
      <MedicalQueue v-model="itemId" @clickItem="clickItem" @changeTab="changeTab" ref="medicalQueueRef"></MedicalQueue>
    </div>
    <div class="middle">
      <el-scrollbar>
        <div class="case">
          <Case ref="caseRef" v-model="formData" :disabled="curRegister?.status !=2" :isShowFrom="isShowFrom"
                @focus="focus"></Case>
        </div>
        <div class="service-items">
          <ServiceDetail v-model="formData.itemDetail" @focus="focus" @totalPriceChange="getOrderTotalPrice"
                         :status="curRegister?.status ==2"></ServiceDetail>
        </div>
        <div class="pharmaceutical-consumables">
          <GoodsDetail v-model="formData.goodsDetail" @focus="focus" @totalPriceChange="getOrderTotalPrice"
                       :status="curRegister?.status ==2"></GoodsDetail>
        </div>
      </el-scrollbar>
      <div class="bottom">
        <Settlement v-model="formData.preTotalPrice" @cancelReception="cancelReception" @save="save"
                    :status="curRegister?.status ==2"
                    @edit="edit"></Settlement>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <PatientCard ref="patientCardRef"></PatientCard>
      </div>
      <div class="bottom">
        <MedicalHistory :status="patientRegistration.status" 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 MedicalHistory from "@/components/outpatient/MedicalHistory.vue";
import Case from "@/components/outpatient/Case.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 {apiConfig} from "@/assets/config/apiConfig.ts";
import PatientCard from "@/components/charge/PatientCard.vue";
import ServiceDetail from "@/components/common/service/ServiceDetail.vue";
import GoodsDetail from "@/components/common/goods/GoodsDetail.vue";

const curRegister = ref<any>()
const registerId = ref()
const patientId = ref()
const itemDetail = ref([])
const goodsList = ref([])
const formData = ref<any>({
  diagType: 0,
  itemDetail: [],
  goodsDetail: [],
})
const initFormData = () => {
  formData.value = {
    diagType: 0,
    itemDetail: [],
    goodsDetail: [],
  }
  nextTick(() => {
    caseRef.value?.clearDiagnosis()
    patientCardRef.value?.clear()
  })

}
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: formData.value.itemDetail,
    goodsList: formData.value.goodsDetail,
    diagnosisMedicalRecord: medicalRecord,

  }

  if (!formData.value.diagnosisDetail || JSON.parse(formData.value.diagnosisDetail).length == 0) {
    ElMessage.error("请填写诊断信息")
  } else {
    post('medical/record/save', {data: data}).then((res: any) => {
      ElMessage.success("接诊完毕,请到收费页面收费")
      medicalQueueRef.value?.changeCurItemOrStatus(null, 2);
    })
  }
}
const totalAmount = ref(0)
const medicalHistoryRef = ref()
const patientCardRef = ref()
const patientRegistration = ref<any>({})//  当前挂号信息
const clickItem = (item: any) => {
  initFormData()
  if (!item) {
    medicalHistoryRef.value?.clearList();
    return
  }
  curRegister.value = item
  registerId.value = item.id
  itemId.value = item.id
  patientId.value = item.patientInfoId
  if (item.status == 1) {
    initFormData()
  }
  if (item.status == 3) {
    post(apiConfig.RegistrationDetail, {
      regisId: item.id
    }).then((res: any) => {
      formData.value = res.diagnosisMedicalRecord
      formData.value.goodsDetail = res.goodsDetail
      formData.value.itemDetail = res.itemDetail
      formData.value.diagType = Number(formData.value.diagType)
      patientRegistration.value = res.patientRegistration
      getOrderTotalPrice()
      const diagnosisList = JSON.parse(formData.value.diagnosisDetail)
      const nList = formData.value.diagnosisSummary.split(',')
      caseRef.value?.initDiagnosisSearch(diagnosisList, nList);
    })

  }

  nextTick(() => {

    medicalHistoryRef.value?.init(patientId.value);
    patientCardRef.value?.init(curRegister.value?.id)
  })

}
const medicalQueueRef = ref();
const cancelReception = () => {
  post(apiConfig.RegistrationChangeStatus, {id: registerId.value, status: 1}).then((res: any) => {
    medicalQueueRef.value?.changeCurItemOrStatus(res, 1);
  })
}
const changeTab = (e: any) => {
  initFormData()
  patientRegistration.value = {}
  itemId.value = null
  isShowFrom.value = false
  if (curRegister.value) {
    curRegister.value.status = e
  }
  nextTick(() => {
    medicalHistoryRef.value?.clearList();
  })
}
const itemId = ref<any>('')
const edit = () => {
  post('registration/changeStatus', {id: registerId.value, status: 2}).then((res: any) => {
    medicalQueueRef.value?.changeCurItemOrStatus(res, 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.toFixed(2);
}
const caseRef = ref<any>("")
const copyForm = (item: any) => {
  formData.value.diagnosisMedicalRecord = item.diagnosisMedicalRecord
  formData.value.diagType = Number(item.diagnosisMedicalRecord.diagType)
  const diagnosisList = JSON.parse(item.diagnosisMedicalRecord.diagnosisDetail)
  const nList = item.diagnosisMedicalRecord.diagnosisSummary.split(',')
  nextTick(() => {
    caseRef.value?.initDiagnosisSearch(diagnosisList, nList)
  })
}
const copyItemList = (item: any) => {
  formData.value.itemDetail = item.itemDetail
  getOrderTotalPrice()
}
const copyGoodsList = (item: any) => {
  formData.value.goodsDetail = item.goodsDetail
  getOrderTotalPrice()
}

const seeDockerInfo = ref<any>()
const getSeeDockerInfo = (newValue: any) => {
  if (!registerId.value) return;
  post('medical/record/getSeeDockerInfo', {regisId: newValue}).then((res: any) => {
    seeDockerInfo.value = res
    formData.value.allergyHistory = res.patientInfo.allergyHistory;
    formData.value.beforeMedicalHistory = res.patientInfo.beforeMedicalHistory;
  })
}
const isShowFrom = ref<any>(false)
const focus = (e: any) => {
  isShowFrom.value = e
}
watch(() => registerId.value, (newValue) => {
  if (!newValue) {
    seeDockerInfo.value = {}
    return
  }
  getSeeDockerInfo(newValue)
})

watch(
    [() => formData.value.goodsDetail, () => formData.value.itemDetail],
    ([newGoodsDetail, newItemDetail]) => {
      if (newGoodsDetail || newItemDetail) {
        getOrderTotalPrice()
      }
    },
    {deep: true}
)
</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;
    min-width: 0;

    .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>