web/src/views/charge/index.vue

<template>
  <div class="container">
    <div class="left">
      <Panel title="收费队列">
        <ChargeQueue @clickItem="clickItem" ref="chargeQueue"></ChargeQueue>
      </Panel>
    </div>
    <div class="middle">
      <Panel title="零售收费">
        <template #tools>
          <span>{{formData.totalPrice}}</span>
          <el-button type="primary" @click="delDraft()" v-if="formData.id == -1" >删除</el-button>
          <el-button type="primary" @click="saveAndCharge" >收费</el-button>
          <el-button type="primary" >追溯码</el-button>
          <el-button type="primary" >挂单</el-button>
        </template>
        <el-form :model="formData" inline label-width="0">
          <el-form-item>
            <el-input v-model="formData.patientInfo.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.patientInfo.sex" style="width: 80px;">
              <el-option :label="'男'" :value="'男'"></el-option>
              <el-option :label="'女'" :value="'女'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formData.patientInfo.age">
              <template #suffix>
                岁
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formData.patientInfo.phone" placeholder="手机号">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button>卡</el-button>
            <el-button>+</el-button>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.diagnosisMedicalRecord.dockerId" placeholder="医生" style="width: 100px">
              <el-option v-for="item in dockerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <DiagnosisSearchInput
            v-model="diagnosisKeyword"
            :request-api="diagnosisSearchApi"
            :show-config="diagnosisShowConfig"
            @selectedCallBack="diagnosisSelect"
            ref="diagnosisSearchRef"
            :show-header="false">
        </DiagnosisSearchInput>

      </Panel>
      <Panel title="服务项目">
        <ServiceDetail v-model="formData.itemDetail" @selectedCallBack =getOrderTotalPrice> </ServiceDetail>

      </Panel>
      <Panel title="药品耗材">
        <GoodsDetail v-model="formData.goodsDetail" @totalPriceChange="getOrderTotalPrice"></GoodsDetail>
      </Panel>
    </div>
    <div class="right">
      <div class="top">
      </div>
      <div class="bottom">
      </div>
    </div>
  </div>
  <Settlement
      :money="formData.totalPrice"
      ref="settlementRef"
      v-model="socialCard"
  ></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";

const socialCard = ref<any>({payInfo:{}})
const formData = ref<any>({
  patientInfo:{},
  diagnosisMedicalRecord:{},
})
const diagnosisKeyword = ref("")
const chargeQueue = ref()
const delDraft = () => {
  nextTick(() => {
    chargeQueue.value?.delDraft()
  })
}
const settlementRef = ref()
const saveAndCharge = () => {
  post('charge/save', {data:formData.value}).then((res: any) => {
    formData.value.code = res
    nextTick(()=>{
      settlementRef.value?.init(formData.value)
    })
  })
}
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 clickItem = (item: any) => {
  formData.value = item
  getOrderTotalPrice()
  nextTick(() => {
    let list = JSON.parse(formData.value.diagnosisMedicalRecord.diagnosisDetail)
    let nList = formData.value.diagnosisMedicalRecord.diagnosisSummary.split(',')
    diagnosisSearchRef.value?.init(list,nList);
  })
}
const dockerList = ref<any[]>([])
const getDockerList = () => {
  post('organization/member/allDoctorList').then((res: any) => {
    dockerList.value = res
  })
}
onMounted(()=>{
  getDockerList()
})
const getOrderTotalPrice = () => {
  let totalPrice = 0
  formData.value.itemDetail.forEach((item: any) => {
    totalPrice += item.unitPrice * item.number
  })
  formData.value.goodsDetail.forEach((item: any) => {
    totalPrice += item.selectedPrice * item.selectedNum
  })
  formData.value.preTotalPrice = totalPrice
  formData.value.totalPrice = totalPrice
}
</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;
    }

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

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