web/src/views/charge/index.vue

<template xmlns="http://www.w3.org/1999/html">
  <div class="container">
    <div class="left">
      <chargeQueue @clickItem="clickItem" ref="chargeQueueRef"></ChargeQueue>
    </div>
    <div class="middle">
      <el-scrollbar>
        <div>
          <Panel title="医疗诊断">
            <template #default>
              <div class="diagnosis-content">
                <div class="diagnosis">
                  诊断：
                  <DiagnosisSearchInput
                      v-model="diagnosisKeyword"
                      :request-api="diagnosisSearchApi"
                      :show-config="diagnosisShowConfig"
                      :width="600"
                      @selectedCallBack="diagnosisSelect"
                      ref="diagnosisSearchRef"
                      :show-header="false"
                      :disabled="statusDisabled==1"

                  >
                  </DiagnosisSearchInput>
                </div>
                <div class="doctor">
                  医生：
                  <el-select
                      v-model="formData.doctorId"
                      @change="handleChange"
                      clearable
                      size="large">
                  <el-option
                      v-for="item in doctorList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                  </el-select>
                </div>


              </div>
            </template>
          </Panel>
        </div>
        <div style="margin-top: 24px">
            <ServiceDetail v-model="formData.itemDetail" :status="statusDisabled" @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
        </div>
        <div style="margin-top: 24px">
            <GoodsDetail v-model="formData.goodsDetail" :status="statusDisabled" @totalPriceChange="getOrderTotalPrice"></GoodsDetail>
        </div>
        <div class="bottom" >
          <TotalPrice v-model="formData.totalPrice" @edit="saveAndCharge" :status="formData.status" ></TotalPrice>
        </div>
      </el-scrollbar>
    </div>
    <div class="right">
      <div class="top">
        <PatientCard ref="patientCardRef"></PatientCard>
      </div>
      <div class="bottom">
          <RecordsLog ref="recordsConsumptionRef"></RecordsLog>
      </div>
    </div>
  </div>
    <Settlement
        ref="settlementRef"
        v-model="socialCard"
        @orderCompleted="orderCompleted"
        @orderCanceled="orderCanceled"
    ></Settlement>

</template>
<script setup lang="ts">

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 GoodsDetail from "@/components/common/goods/GoodsDetail.vue";
import DiagnosisSearchInput from "@/components/outpatient/DiagnosisSearchInput.vue";
import Settlement from "@/components/charge/Settlement.vue";
import TotalPrice from "@/components/charge/TotalPrice.vue";
import psnCertTypes from "@/assets/config/directory/psnCertTypes.json"
import {getKey} from "@/utils/discrotyUtil.ts";
import antys from "@/assets/config/directory/antys.json"
import RecordsLog from "@/components/charge/RecordsLog.vue";
import PatientCard from "@/components/charge/PatientCard.vue";
import {apiConfig} from "@/assets/config/apiConfig.ts";

const socialCard = ref<any>({payInfo: {}})
const formData = ref<any>({
  patientInfo: {},
  diagnosisMedicalRecord: {},
  goodsDetail: [],
  itemDetail: [],
})
const statusDisabled = ref(0)
const diagnosisKeyword = ref("")
const chargeQueueRef = ref()
const delDraft = () => {
  nextTick(() => {
    chargeQueueRef.value?.delDraft()
  })
}
const settlementRef = ref()
const saveAndCharge = () => {
  post('charge/save', {data: {...formData.value,doctorId: doctorId.value}}).then((res: any) => {
    formData.value.code = res
    nextTick(() => {
      settlementRef.value?.init(res)
    })
  })
}
const diagnosisSearchRef = ref()
const diagnosisSearchApi = "social/diagnose/search"
const diagnosisShowConfig = [
  {
    label: "诊断名称",
    prop: "name",
  },
  {
    label: "诊断编码",
    prop: "code",
  }
]
const diagnosisSelect = (list: any) => {
  const diagnosisNames = list.map((item: any) => item.name).join(',')
  formData.value.diagnosisMedicalRecord.diagnosisDetail = JSON.stringify(list)
  formData.value.diagnosisMedicalRecord.diagnosisSummary = diagnosisNames
}
const recordsConsumptionRef= ref<any>("")
const patientCardRef = ref()
const clickItem = async (item: any, status: any) => {
  statusDisabled.value = status
  formData.value = await post('medical/record/getByDiagnosisCode', {diagnosisCode: item.code})
  getOrderTotalPrice()
  nextTick(() => {
    let list = JSON.parse(formData.value.diagnosisMedicalRecord.diagnosisDetail)
    let nList = formData.value.diagnosisMedicalRecord.diagnosisSummary.split(',')
    diagnosisSearchRef.value?.init(list, nList);
    recordsConsumptionRef.value?.init(formData.value.patientInfo.id);
    patientCardRef.value?.init(formData.value.registrationId);
  })
}
const dockerList = ref<any[]>([])
const getDockerList = () => {
  let query = {
    role: 1
  }
  post('organization/member/search', {query: query}).then((res: any) => {
    dockerList.value = res
  })
}
const orderCompleted = () => {
  nextTick(() => {
    chargeQueueRef.value?.getOrderList()
  })
}
const orderCanceled = () => {
  nextTick(() => {
    chargeQueueRef.value?.getOrderList()
  })

}


onMounted(() => {
  getDockerList()
  list()
})
const getOrderTotalPrice = () => {
  let totalPrice = 0
  formData.value.itemDetail?.forEach((item: any) => {
    totalPrice += item.selectedPrice * item.selectedNum
  })
  formData.value.goodsList.forEach((item: any) => {
    totalPrice += item.selectedPrice * item.selectedNum
  })
  formData.value.preTotalPrice = totalPrice
  formData.value.totalPrice = totalPrice
}


const props = {
  expandTrigger: 'hover' as const,
}

const doctorId=ref<any>('')
const handleChange = (value: any) => {
  doctorId.value = value[value.length - 1]
}

const cardTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => ({id, name})))
const doctorList = ref<any>([])
const sectionDoctorOption = ref<any>('')
const list = () => {
    post(apiConfig.organizationMemberSearch, {query: {role: 1}}).then((res: any) => {
      doctorList.value = res
    })
}
</script>

<style scoped lang="scss">
.container {
  padding: 0 24px;
  height: 100%;
  width: 100%;
  display: flex;

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

  }

  .middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .diagnosis-content{
      height:64px;
      padding:0 24px 24px;
      display: flex;
      justify-content: left;
    }

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

    .el-form-item {
      margin-right: 0;
    }
  }

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

    .top {
      height: 240px;
    }

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


    }

  }


}
.bottom {
  margin-top: 24px;
  height: 86px;
  background: #FFFFFF;
  border-radius: 8px;
}
</style>