Vue_New/src/xt_pages/outpatientCharges/summaryDetail.vue

<template>
    <div class="main-contain summaryDetail">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container" style="display:flex;flex: 1;padding: 20px 20px 0px 20px;">
            <div class="mainCenter">
                <div class="centerLeft">
                    <div class="tabsBox">
                      <el-tabs class="preTabs" v-model="editableTabsValue" type="card" @tab-click="tabclickEvent">
                        <el-tab-pane
                          v-for="(item, index) in prescriptions"
                          :key="index"
                          :label="item.name"
                          :name="item.name"
                        >
                        </el-tab-pane>

                        <div class="RP">
                          Rp
                        </div>
                        <prescription-table ref="prescription_tables"
                                            :prescription="curPrescriptions"></prescription-table>

                      </el-tabs>

                    </div>
                    <div class="costBox">
                      <span>当前处方总费用：<span style="color:red;">{{ getTotal() }}元</span></span>
                      <span>{{ state }}</span>
                    </div>
                </div>
                <div class="centerRight">
                    <p class="centerRightTitle">人员信息</p>
                    <ul class="basicUl">
                        <li style="width:50%;">姓名：{{patientInfo.name}}</li>
                        <li style="width:50%;">性别：{{patientInfo.gender == 1 ? '男' : '女' }}</li>
                        <li style="width:50%;">年龄：{{patientInfo.age }}</li>
                        <li style="width:50%;">身高：{{patientInfo.height?patientInfo.height:''}}</li>
                        <li style="width:50%;">体重：{{patientInfo.weight?patientInfo.weight:''}}</li>
                        <li style="width:50%;">电话：{{patientInfo.phone}}</li>
                    </ul>
                    <p class="centerRightTitle">收费信息</p>
                    <ul class="basicUl">
                        <li style="width:50%;">应收金额：0.00元</li>
                        <li style="width:50%;">实收金额：0.00元</li>
                        <li style="width:50%;">舍入金额：0.00元</li>
                        <li style="width:50%;">优惠金额：0.00元</li>
                        <li style="width:50%;">总金额</li>
                        <li style="width:50%;">0.00元</li>
                    </ul>
                    <p class="centerRightTitle">发票费用</p>
                    <ul class="basicUl">
                        <li style="width:100%;">西药费：0.00元</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { getHisOrder } from '@/api/his/his'
import prescriptionTable from './components/prescriptionTable'

export default {
    components:{
        BreadCrumb,
      prescriptionTable,

    },
    data(){
        return{
            crumbs: [
                { path: false, name: '门诊收费' },
                { path: false, name: '项目消费明细汇总详情' }
            ],
          info: {},
          curPrescriptions: {},
          prescriptions: [],
          record_date: '',
          tableData: [],
          editableTabsValue: '1',
          loadingone: false,
          editableTabs: [{
            title: '处方1',
            name: '1'
          }],
          tabIndex: 1,
          hisPatientInfo: {},
          loadingtwo: false,
          patientTableData: [{
            name: '杨美英',
            mdtrt_id: '1709946'
          }],
          patientInfo: { id: 0 },
          doctor: {},
          total: 0,
          state: '未收费',
          radio: 1,
          radioStatus: 1,
          search_input: '',
        }
    },created(){
      this.GetOrderDetail()
  },methods:{

    tabclickEvent(val) {
      for (let i = 0; i < this.prescriptions.length; i++) {
        if (this.prescriptions[i].name == val.name) {
          this.curPrescriptions = {}
          var temp = this.deepClone(this.prescriptions[i])
          this.curPrescriptions = temp
        }
      }
    },
    deepClone(source) {
      if (!source && typeof source !== 'object') {
        throw new Error('error arguments', 'shallowClone')
      }
      const targetObj = source.constructor === Array ? [] : {}
      Object.keys(source).forEach((keys) => {
        if (source[keys] && typeof source[keys] === 'object') {
          targetObj[keys] = this.deepClone(source[keys])
        } else {
          targetObj[keys] = source[keys]
        }
      })
      return targetObj
    },
    getTotal() {
      var total = 0
      for (let i = 0; i < this.prescriptions.length; i++) {
        if (this.prescriptions[i].advices != null) {
          for (let a = 0; a < this.prescriptions[i].advices.length; a++) {
            total = total + this.prescriptions[i].advices[a].retail_price * this.prescriptions[i].advices[a].prescribing_number
          }
        }
        if (this.prescriptions[i].project != null) {
          for (let b = 0; b < this.prescriptions[i].project.length; b++) {
            total = total + this.prescriptions[i].project[b].price * this.prescriptions[i].project[b].total
          }
        }
      }
      return total
    },
    moreState(tab, event) {
      if (tab == 'more') {
        return false
      }
    },
    GetOrderDetail(){
      let params={
        number:this.$route.query.number,
        patient_id:this.$route.query.patient_id,
      }
      getHisOrder(params).then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg)
          return false
        } else {
          this.patientInfo = response.data.data.order.patient
          this.hisPatientInfo = response.data.data.order.his_patient
          this.info = response.data.data.p_info
          this.prescriptions = []
          for (let i = 0; i < response.data.data.prescription.length; i++) {
            var prescription = response.data.data.prescription[i]

            let tempAdvice = []
            let tempProject = []

            for (let b = 0; b < prescription.advices.length; b++) {
              let obj = {
                advice_id: prescription.advices[b].id,
                drug_name: prescription.advices[b].advice_name,
                single_dose: prescription.advices[b].single_dose,
                delivery_way: prescription.advices[b].delivery_way,
                execution_frequency: prescription.advices[b].execution_frequency,
                retail_price: prescription.advices[b].price.toString(),
                remark: prescription.advices[b].remark,
                prescribing_number: prescription.advices[b].prescribing_number.toString(),
                single_dose_unit: prescription.advices[b].single_dose_unit,
                prescribing_number_unit: prescription.advices[b].prescribing_number_unit,
                min_unit: prescription.advices[b].single_dose_unit,
                medical_insurance_number: prescription.advices[b].med_list_codg

              }
              tempAdvice.push(obj)
            }

            for (let b = 0; b < prescription.project.length; b++) {
              console.log(prescription.project[b].project.project_name)
              let obj = {
                id: prescription.project[b].id,
                project_id: prescription.project[b].project.id,
                project_name: prescription.project[b].project.project_name,
                statistical_classification: prescription.project[b].statistical_classification,
                single_dose: prescription.project[b].single_dose,
                delivery_way: prescription.project[b].delivery_way,
                execution_frequency: prescription.project[b].execution_frequency,
                number_days: prescription.project[b].day,
                total: prescription.project[b].count.toString(),
                price: prescription.project[b].price,
                remark: prescription.project[b].remark,
                medical_code: prescription.project[b].project.medical_code
              }
              tempProject.push(obj)
            }
            let index = i + 1
            let obj = {
              id: prescription.id,
              name: '处方' + index,
              advices: tempAdvice,
              project: tempProject,
              type: response.data.data.prescription[i].type
            }
            this.prescriptions.push(obj)
            this.curPrescriptions = this.prescriptions[0]

          }
          // this.tableData = response.data.data.order

        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.summaryDetail{
    height: 100%;
    display: flex;
    flex-direction: column;
    .tabsBox{
        position: relative;
        height: 90%;
        overflow-y: auto;
        margin-bottom: 60px;
        .el-tabs__item{
            padding: 0 10px;
        }
    }
    .addTab{
        position: absolute;
        right: 0;
        top: 6px;
        z-index: 20;
    }
    .mainCenter{
        display: flex;
        flex:1;
    }
    .costBox{
        width:100%;
        height:60px;
        background:#fff;
        position: absolute;
        bottom:0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .centerLeft{
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .centerRight{
        width: 300px;
        margin-left: 5px;
        display: flex;
        flex-direction: column;
    }
    .RP{
        color:#409EFF;
        font-size: 20px;
        margin-bottom: 5px;
    }
    .centerRightTitle{
        color:#409EFF;
        padding: 10px 0;
    }
    .basicUl{
        border-top: 1px solid #e5e5e5;
        border-left: 1px solid #e5e5e5;
        display: flex;
        flex-wrap: wrap;
        li{
            border-bottom: 1px solid #e5e5e5;
            border-right: 1px solid #e5e5e5;
            width: 100%;
            height: 38px;
            line-height: 38px;
            text-indent: 5px;
            font-size: 14px;
        }
    }
}
</style>

<style lang="scss">
.summaryDetail{
    .el-table th .cell, .el-table td .cell{
        padding: 0 2px;
        white-space: pre-line;
    }
    .el-icon-delete{
        color:red;
    }
}

</style>