web/src/views/charge/index.vue

<template>
  <div class="container">
    <div class="left">
      <chargeQueue @clickItem="clickItem" ref="chargeQueueRef"></ChargeQueue>
    </div>
    <div class="middle">
      <el-scrollbar>
        <div>
          <Panel title="医疗诊断">
            <template #tools>
              <el-cascader
                  v-model="formData.doctorId"
                  :options="sectionDoctorOption"
                  :props="props"
                  @change="handleChange"
                  clearable
              />
            </template>
            <template #default>
              <div style="height:64px;padding:0 24px 24px">
                <DiagnosisSearchInput
                    v-model="diagnosisKeyword"
                    :request-api="diagnosisSearchApi"
                    :show-config="diagnosisShowConfig"
                    @selectedCallBack="diagnosisSelect"
                    ref="diagnosisSearchRef"
                    :show-header="false"
                    :disabled="statusDisabled==1"

                >
                </DiagnosisSearchInput>
              </div>
            </template>
          </Panel>
        </div>
        <div style="margin-top: 24px">
          <Panel title="服务项目">
            <ServiceDetail v-model="formData" @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
          </Panel>
        </div>
        <div style="margin-top: 24px">
          <Panel title="药品耗材">
            <GoodsDetail v-model="formData" @totalPriceChange="getOrderTotalPrice"></GoodsDetail>
          </Panel>
        </div>
        <div class="bottom">
          <TotalPrice v-model="formData.totalPrice" @edit="saveAndCharge"></TotalPrice>
        </div>
      </el-scrollbar>
    </div>
    <div class="right">
      <div class="top">
        <PatientCard v-model="formData.patientInfo"></PatientCard>
      </div>
      <div class="bottom">
          <RecordsLog ref="recordsConsumptionRef"></RecordsLog>
      </div>
    </div>
  </div>
  <Settlement
      :money="formData.totalPrice"
      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/charge/ServiceDetail.vue";
import GoodsDetail from "@/components/charge/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";

const socialCard = ref<any>({payInfo: {}})
const formData = ref<any>({
  patientInfo: {},
  diagnosisMedicalRecord: {},
})
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 clickItem = async (item: any, status: any) => {

  formData.value = await post('medical/record/getByDiagnosisCode', {diagnosisCode: item.code})
  statusDisabled.value = status
  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);
  })
}
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.goodsDetail.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 sectionList = ref<any>([])
const doctorList = ref<any>([])
const sectionDoctorOption = ref<any>('')
const list = () => {
  post('organization/section/allList').then((res: any) => {
    sectionList.value = res
    post('organization/member/search', {query: {role: 1}}).then((res: any) => {
      doctorList.value = res
      nextTick(() => {
        generateOptions()
      })
    })
  })

}
const generateOptions = () => {
  if (!sectionList.value || !doctorList.value) return [];
  sectionDoctorOption.value = sectionList.value.map((section: any) => {
    console.log(section)
    // 过滤出属于当前科室的医生
    const doctors = doctorList.value.filter((doc: any) => doc.sectionId === section.id);
    console.log(doctors)
    return {
      value: section.id,
      label: section.name,
      children: doctors.map((doc: any) => ({
        value: doc.id,
        label: doc.name,
      })),
    };
  });
};
</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;

    .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: 312px;
    }

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