elizebeth/src/xt_pages/outpatientDoctorStation/components/deskPrescription.vue

<template>
  <div style="height: calc(100% - 56px);display: flex;flex-direction: column;margin-top: 56px;">
    <!-- <div style="border-top:1px solid #e5e5e5;margin-top:5px;">
      <div class="mainCell" style="margin-bottom:10px;float:right">
        <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">保存</el-button>
        <el-button size="small" @click="open(2)" type="primary">打印</el-button>
        <el-button size="small" @click="open(4)" type="primary">选择模板</el-button>
        <el-button size="small" @click="open(5)" type="primary">存模板</el-button>
      </div>
    </div> -->
    <!-- <div class="backColor"></div> -->
    <div class="mainCenter">
      <div class="centerLeft">
        <el-form :model="form" ref="form" label-width="80px"
                 style="display: flex;flex-wrap: wrap;justify-content: space-between;">
          <el-form-item label="姓名:" prop="name" label-position="right">
            <el-input v-model="patientInfo.name" placeholder="" readonly></el-input>
          </el-form-item>
          <el-form-item label="证件号: " prop="name" label-position="right">
            <el-input v-model="patientInfo.id_card_no" placeholder="" readonly></el-input>
          </el-form-item>
          <!--<el-form-item label="挂号类型: " prop="name">-->
          <!--<el-input v-model="hisPatientInfo.register_type" placeholder="" readonly></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="处方类型: " prop="name" label-position="right">
            <el-select style="width:100%;" v-model="register_type" placeholder="">
              <el-option
                v-for="(item,index) in register"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="疾病类型:" prop="name" label-position="right">

            <el-select style="width:100%;" v-model="state1" placeholder="">
              <el-option
                v-for="(item,index) in sick"
                :key="index"
                :label="item.class_name"
                :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>

          <el-form-item label="诊断:" prop="name" label-position="right">

            <el-select style="width:100%;" v-model="diagnose" placeholder="">
              <el-option
                v-for="(item,index) in diagnoses"
                :key="index"
                :label="item.class_name"
                :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>


          <el-form-item label="过敏病史: " prop="name" label-position="right">
            <el-autocomplete
              style="width:100%;"
              class="inline-input"
              v-model="state2"
              :fetch-suggestions="querySearch2"
              placeholder="请输入内容"
            ></el-autocomplete>
          </el-form-item>
        </el-form>
        <div class="tabsBox">

          <el-button type="text" class="addTab" @click="addCharges" icon="el-icon-circle-plus">附加收费</el-button>
          <el-tabs class="preTabs" v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab"
                   :before-leave="moreState" @tab-click="tabclickEvent">
            <el-tab-pane
              v-for="(item, index) in prescriptions"
              :key="index"
              :label="item.name"
              :name="item.name"
            >
            <div class="RP">Rp
              <el-date-picker
                v-model="item.pre_time"
                type="datetime"
                :clearable="false"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                placeholder="选择日期">
              </el-date-picker>
              <div style="float: right;margin-bottom:5px;margin-right:1%;">
                <el-button
                  round
                  size="small"
                  @click="openLast(3)"
                >上一方
                </el-button>

                <el-button
                  round
                  size="small"
                  @click="openNext(4)"
                >下一方
                </el-button>
              </div>
            </div>


            </el-tab-pane>
            <el-tab-pane name="more" closable><span slot="label"><i class="el-icon-plus" @click="addTab"></i></span>
            </el-tab-pane>

            <prescription-table ref="prescription_tables" :prescription="curPrescriptions" :preDrugs="preDrugs"
                                :activeType="customTabIndex"></prescription-table>
          </el-tabs>

        </div>
        <div class="costBox">
          <div>
            <span><span style="color: red">*</span>医生：</span>
            <el-select style="margin-right:5px;width:140px;" v-model="doctorValue" placeholder=""
                       @change="changeDoctor">
              <el-option
                v-for="(item,index) in doctors"
                :key="index"
                :label="item.user_name"
                :value="item.admin_user_id">
              </el-option>
            </el-select>
            <span> <span style="color: red">*</span>科室：</span>
            <el-select style="margin-right:5px;width:140px;" v-model="departmentValue" placeholder="">
              <el-option
                v-for="(item,index) in department"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <span>当前处方总价：</span>
            <span style="color:red;">{{getTotalOne()?getTotalOne():''}}</span>元
            <span style="margin-left:10px;">总价：</span>
            <span style="color:red;">{{ getTotal()?getTotal():''}}</span>元
          </div>
          <span :class="order_status == '未收费' ? 'statusRed' : ''">{{order_status}}</span>

        </div>
      </div>
      <div class='centerRight'>
        <!-- <div class="rightTab">
          <p :class="rightTab == 1 ? 'activeP' : ''" @click="clickTab(1)">药品</p>
          <p :class="rightTab == 2 ? 'activeP' : ''" @click="clickTab(2)">项目</p>
        </div> -->
        <el-tabs class="borderCard" type="border-card" v-model="rightTab" @tab-click="clickTab"
                 :before-leave='beforeLeave'>
          <el-tab-pane label="药品" :name="1">

          </el-tab-pane>
          <el-tab-pane label="项目" :name="2">

          </el-tab-pane>
          <div style="height:100%;" v-show="showOne">
            <el-tabs class="rightTabs" v-model="activeName">
              <el-tab-pane label="药品列表" name="1">
                <div style="margin-bottom:5px;display:flex;">
                  <el-input style="width:50%;" @input="searchAction" @keyup.enter.native='searchAction'
                            v-model.trim="search_keyword"
                            placeholder="请输入药品名字"></el-input>
                  <el-select style="margin-left:5px;width:50%;" v-model="value" placeholder="" @change="changeKind">
                    <el-option
                      label="全部"
                      value="0">
                    </el-option>
                    <el-option
                      v-for="(item,index) in getDictionaryDataConfig('system','drug_type')"
                      :key="index"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div style="width: 100%;flex:1;overflow: hidden;" ref="rightTable">
                  <el-table ref="multipleTable" :height="multipleTableHeight != '' ? multipleTableHeight : '200'"
                            :data="drugs" border @select='selectDrugs'
                            :row-style="{ color: '#303133' }"
                            @select-all="changeAllGoodInfoTableData"
                            :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                            highlight-current-row>
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column label="名称">
                      <template slot-scope="scope">{{ scope.row.drug_name }}</template>
                    </el-table-column>
                    <el-table-column label="规格" width="60">
                      <template slot-scope="scope">{{ scope.row.drug_spec }}</template>
                    </el-table-column>
                    <el-table-column label="库存" width="60">
                      <template slot-scope="scope">{{
                        stockInCount(scope.row) -
                        salesReturnCount(scope.row) -
                        stockOutCount(scope.row) +
                        cancelStockCount(scope.row)
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column label="单价" width="40">
                      <template slot-scope="scope">{{ scope.row.retail_price }}</template>
                    </el-table-column>
                  </el-table>
                </div>

              </el-tab-pane>
              <!--<el-tab-pane label="医嘱模板" name="2">-->
                <!--<div style="margin-bottom:5px;">-->
                  <!--&lt;!&ndash;<el-input style="width:50%;" v-model="input" placeholder=""></el-input>&ndash;&gt;-->
                  <!--<el-select style="float: right;width: 49%;" v-model="value" placeholder="">-->
                    <!--<el-option-->
                      <!--v-for="item in options"-->
                      <!--:key="item.value"-->
                      <!--:label="item.label"-->
                      <!--:value="item.value">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</div>-->
                <!--<div style="width: 100%;flex:1;overflow-y: auto;">-->
                  <!--<el-table ref="multipleTableTwo" :height="multipleTableHeight != '' ? multipleTableHeight : '200'"-->
                            <!--:data="advices_template" border-->
                            <!--:row-style="{ color: '#303133' }"-->
                            <!--:header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"-->
                            <!--highlight-current-row-->
                            <!--@select='selectTemplate'-->
                            <!--@select-all="changeTemplateData"-->

                  <!--&gt;-->
                    <!--<el-table-column type="selection" width="40" align="center"></el-table-column>-->
                    <!--<el-table-column prop="name" label="名称">-->
                      <!--<template slot-scope="scope">{{scope.row.name}}</template>-->
                    <!--</el-table-column>-->
                    <!--&lt;!&ndash;<el-table-column label="规格" width="60">&ndash;&gt;-->
                    <!--&lt;!&ndash;<template slot-scope="scope">33</template>&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
                    <!--&lt;!&ndash;<el-table-column label="库存" width="60">&ndash;&gt;-->
                    <!--&lt;!&ndash;<template slot-scope="scope">22</template>&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
                    <!--&lt;!&ndash;<el-table-column label="单价" width="40">&ndash;&gt;-->
                    <!--&lt;!&ndash;<template slot-scope="scope">12</template>&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
                  <!--</el-table>-->
                <!--</div>-->
              <!--</el-tab-pane>-->
            </el-tabs>
          </div>
          <div style="height:100%;" v-show="showTwo">
            <el-tabs class="rightTabs" v-model="activeName">
              <el-tab-pane label="项目列表" name="1">
                <div style="width: 100%;flex:1;overflow-y: auto;">
                  <el-table ref="tables" :height="multipleTableHeight != '' ? multipleTableHeight : '200'"
                            :data="tabProject" border @select='selectChange'
                            :row-style="{ color: '#303133' }"
                            @select-all="changeAllGoodInfoTableDataTwo"
                            :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                            highlight-current-row>
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column prop="name" label="名称">
                      <template slot-scope="scope">{{ scope.row.project_name }}</template>
                    </el-table-column>
                    <el-table-column label="规格" width="60">
                      <template slot-scope="scope">{{ scope.row.single_dose }}</template>
                    </el-table-column>
                    <el-table-column label="单价" width="40">
                      <template slot-scope="scope">{{ scope.row.price }}</template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="项目组套" name="2">
                <div style="width: 100%;flex:1;overflow-y: auto;">
                  <el-table :data="tabPrjectTeam" border
                            :height="multipleTableHeight != '' ? multipleTableHeight : '200'"
                            :row-style="{ color: '#303133' }"
                            :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                            highlight-current-row
                            @select='selectTeam'>
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column prop="name" label="名称">
                      <template slot-scope="scope">{{scope.row.project_team}}</template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tabs>
        <template>


          <div class="comfirmBox">
            <!-- <div>
              <span>药品类型：</span>
              <el-select style="margin-right:5px;width:100px;" v-model="value" placeholder="" @change="changeKind">
                <el-option
                  label="全部"
                  value="0">
                </el-option>
                <el-option
                  v-for="(item,index) in getDictionaryDataConfig('system','drug_type')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div> -->
            <el-button type="primary" style="width:100%;" @click="comfirm">确定添加</el-button>
          </div>
        </template>
      </div>
    </div>
    <additionalCharges v-on:setData="setCharge" ref='additionalCharges' :hisPatientInfo="hisPatientInfo"
                       :patientInfo="patientInfo" :additions="additions"></additionalCharges>
    <select-template ref='selectTemplate'></select-template>
    <save-template ref='saveTemplate'></save-template>
    <next-or-last-prescription ref='next_or_last_prescription' v-on:save="setValue"
                               v-on:cancel="cancel"></next-or-last-prescription>

    <!--<next-or-last-prescription ref='next_or_last_prescription' v-on:save="setValue" v-on:cancel="cancel"></next-or-last-prescription>-->
    <call-prescription ref='call_prescription' v-on:call="call" v-on:call-cancel="callCancel"></call-prescription>

  </div>
</template>


<script>
  const moment = require('moment')

  import {
    createHisPrescription,
    delHisPrescription,
    getCallHisPrescription,
    getInitData,
    getNextOrLastHisPrescription,
    getPatientInfo,
    getSchedulePatientList
  } from '@/api/his/his'
  import {getDictionaryDataConfig} from '@/utils/data'
  import prescriptionTable from './prescriptionTable'
  import selectTemplate from './selectTemplate'
  import saveTemplate from './saveTemplate'
  import additionalCharges from './additionalCharges'
  import {addProjectTeam, getAllProjectTeam, getHisProject, getPojectListById} from '@/api/project/project'
  import {uParseTime} from '@/utils/tools'
  import NextOrLastPrescription from "./nextOrLastPrescription";
  import CallPrescription from "./callPrescription";

  export default {
    props: {
      patientInfo: Object,
      hisPatientInfo: Object,
      prescriptions: Array,
      record_date: String,
      search_keyword: '',
      addtions_charge: {
        type: Array,
        default: []
      },

      other_sick: {
        type: Array,
        default: []
      },
    },
    components: {
      CallPrescription,
      NextOrLastPrescription,
      selectTemplate,
      saveTemplate,
      prescriptionTable,
      additionalCharges
    },
    data() {
      return {
        register: [
          {value: 11, label: "普通门诊"},
          {value: 12, label: '门诊挂号'},
          {value: 13, label: "急诊"},
          {value: 14, label: "门诊特殊病"},
          {value: 15, label: "门诊统筹"},
          {value: 16, label: "门诊慢性病"},
          {value: 21, label: "普通住院"},

        ],
        isLastOrNextVisible: false,
        multipleTableHeight: '',
        register_type: '',
        value: '0',
        form: {
          name: ''
        },
        drugs: [],
        allDrugs: [],
        advices_template: [],
        additions: [],
        editableTabsValue: '处方1',
        editableTabs: [{
          title: '处方1',
          name: '1'
        }],
        tabIndex: this.prescriptions.length,
        currenet_inedx: 0,
        rightTab: 1,
        activeName: '1',
        curPrescriptions: this.prescriptions[0],
        drugTableData: [],
        preDrugs: [],
        curDrugs: [],
        doctorOptions: [],
        doctorValue: '',
        departmentOptions: [],
        departmentValue: '',
        total: 0,
        state1: '',
        request_record_date: '',
        state2: '',
        customTabIndex: 1,
        options: [],
        tabProject: [],
        strids: '',
        showOne: true,
        showTwo: false,
        tableData: [],
        tabPrjectTeam: [],
        teamList: [],
        doctors: [],
        departMent: [],
        curStatus: 0,
        order_status: '',
        register_types: [
          {id: 1, name: '医保'},
          {id: 2, name: '自费'}

        ],
        department: [],
        sick: [],
        diagnoses: [],
        diagnose: '',
        curTotal: 0,
        prescription_id: 0,
        tempDrugs: []

      }
    },
    methods: {
      call(val){
        this.prescriptions = []
        this.prescriptions = val
        for (let i = 0; i < this.prescriptions.length; i++) {
          var nowDate = new Date()
          var nowYear = nowDate.getFullYear()
          var nowMonth = nowDate.getMonth() + 1
          var nowDay = nowDate.getDate()

          var hours = nowDate.getHours()
          var min = nowDate.getMinutes()

          var nowTime =
            nowYear +
            '-' +
            (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
            '-' +
            (nowDay < 10 ? '0' + nowDay : nowDay) + " "+(hours < 10 ? '0' + hours : hours) +
            ':' + (min < 10 ? '0' + min : min)
          this.prescriptions[i]['pre_time'] = nowTime
          this.prescriptions[i].name = "处方" + (i + 1)
          if (i == 0) {
            if (this.prescriptions[0].advices.length > 0 && this.prescriptions[0].project.length == 0) {
              this.customTabIndex = 1
              this.curStatus = 1
              this.rightTab = 1
              this.showOne = true
              this.showTwo = false
            }
            if (this.prescriptions[0].advices.length == 0 && this.prescriptions[0].project.length > 0) {
              this.customTabIndex = 2
              this.curStatus = 2
              this.rightTab = 2
              this.showTwo = true
              this.showOne = false
            }
          }
        }
        this.curPrescriptions = this.prescriptions[0]
        this.$refs.call_prescription.close()
        this.$emit('setData',this.prescriptions)

      },
      callCancel(){
        this.$refs.call_prescription.close()
      },
      cancel() {
        this.$refs.next_or_last_prescription.close()
        this.request_record_date = this.record_date
      },
      setValue(val) {
        this.prescriptions = []
        this.prescriptions = val
        this.$refs.next_or_last_prescription.close()
        for (let i = 0; i < this.prescriptions.length; i++) {
          this.prescriptions[i].name = "处方" + (i + 1)
          if (i == 0) {
            if (this.prescriptions[0].advices.length > 0 && this.prescriptions[0].project.length == 0) {
              this.customTabIndex = 1
              this.curStatus = 1
              this.rightTab = 1
              this.showOne = true
              this.showTwo = false
            }

            if (this.prescriptions[0].advices.length == 0 && this.prescriptions[0].project.length > 0) {
              this.customTabIndex = 2
              this.curStatus = 2
              this.rightTab = 2
              this.showTwo = true
              this.showOne = false
            }
          }
        }
        this.curPrescriptions = this.prescriptions[0]
        this.request_record_date = this.record_date
        this.$emit('setData',this.prescriptions)

      },
      GetNextOrLastHisPrescription(params) {
        getNextOrLastHisPrescription(params).then(response => {
          if (response.data.state == 1) {
            this.$refs.next_or_last_prescription.show(response.data.data.prescriptions, this.patientInfo.name, this.patientInfo.id, this.prescriptions)
            this.request_record_date = uParseTime(response.data.data.prescriptions[0].record_date, '{y}-{m}-{d}')
          } else {
            this.$message.error(response.data.msg)

          }
        })


      },
      openLast(val) {
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('处方已经结算,无法添加')
          return
        }
        if (this.patientInfo.id == 0) {
          this.$message.error('请选择患者')
          return
        }


        if (val == 1) {
          this.isVisibility = false
          this.request_record_date = this.record_date

          let params = {
            patient_id: this.patientInfo.id,
            record_time: this.request_record_date,
            type: 1
          }

          this.GetNextOrLastHisPrescription(params)
        } else if (val == 3) {
          let params = {
            patient_id: this.patientInfo.id,
            record_time: this.request_record_date,
            type: 1
          }

          this.GetNextOrLastHisPrescription(params)

        }
      },
      openNext(val) {
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('处方已经结算,无法添加')
          return
        }
        if (this.patientInfo.id == 0) {
          this.$message.error('请选择患者')
          return
        }
        if (val == 2) {
          this.isVisibility = false
          this.request_record_date = this.record_date

          let params = {
            patient_id: this.patientInfo.id,
            record_time: this.request_record_date,
            type: 2
          }

          this.GetNextOrLastHisPrescription(params)
        } else if (val == 4) {
          let params = {
            patient_id: this.patientInfo.id,
            record_time: this.request_record_date,
            type: 2
          }
          this.GetNextOrLastHisPrescription(params)

        }
      },

      selectTemplate(selection, row) {
        this.tempDrugs = selection

      }, changeTemplateData(selection) {
        this.tempDrugs = selection
      },
      stockInCount: function (row) {
        let total = 0;
        if (row.stock_in != null) {
          for (let i = 0; i < row.stock_in.length; i++) {
            total = total + row.stock_in[i].warehousing_count;
          }
        }
        return total;
      },
      salesReturnCount: function (row) {
        let total = 0;
        if (row.sales_return != null) {

          for (let i = 0; i < row.sales_return.length; i++) {
            total = total + row.sales_return[i].count;
          }
        }
        return total;
      },
      stockOutCount: function (row) {
        let total = 0;
        if (row.stock_out != null) {

          for (let i = 0; i < row.stock_out.length; i++) {
            total = total + row.stock_out[i].count;
          }
        }
        return total;
      },
      cancelStockCount: function (row) {
        let total = 0;
        if (row.cancel_stock != null) {
          for (let i = 0; i < row.cancel_stock.length; i++) {
            total = total + row.cancel_stock[i].count;
          }
        }
        return total;
      },

      setCharge(additional_charges) {
        for (let i = 0; i < additional_charges.length; i++) {
          additional_charges[i].count = 1
          this.curPrescriptions.addition.push(additional_charges[i])
        }
        this.$refs.additionalCharges.hide()

      },
      searchAction() {
        if (this.search_keyword.length == 0) {
          this.drugs = this.allDrugs
        } else {
          let arr = []
          for (let i = 0; i < this.drugs.length; i++) {
            if (this.drugs[i].drug_name.indexOf(this.search_keyword) != -1) {
              arr = arr.concat(this.drugs[i])
            }
          }
          this.drugs = arr

        }

      },
      getTotalOne() {
        var total = 0
        console.log(this.prescriptions)
        for (let i = 0; i < this.prescriptions.length; i++) {

          if (this.prescriptions[i].name == this.editableTabsValue) {

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

            if (this.prescriptions[i].addition != null) {
              for (let b = 0; b < this.prescriptions[i].addition.length; b++) {
                total = total + this.prescriptions[i].addition[b].price * this.prescriptions[i].addition[b].count
              }
            }


            total = Math.floor(total * 100) / 100
          }
        }
        return total

      },
      getCurTotal() {
        var total = 0

        if (this.curPrescriptions.type == 1) {
          for (let a = 0; a < this.curPrescriptions.advices.length; a++) {
            total = total + this.curPrescriptions.advices[a].retail_price * this.curPrescriptions.advices[a].prescribing_number
          }
          return Math.floor(total * 100) / 100
        } else {
          for (let a = 0; a < this.curPrescriptions.project.length; a++) {
            total = total + this.curPrescriptions.project[a].price * this.curPrescriptions.project[a].total
          }
          return Math.floor(total * 100) / 100
        }

      },
      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
            }
          }

          if (this.prescriptions[i].addition != null) {
            for (let b = 0; b < this.prescriptions[i].addition.length; b++) {
              total = total + this.prescriptions[i].addition[b].price * this.prescriptions[i].addition[b].count
            }
          }
        }

        return Math.floor(total * 100) / 100
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },


      querySearch2(queryString, cb) {
        var restaurants = this.other_sick
        restaurants.map(item => {
          item.value = item.name
        })
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      changeKind(val) {
        this.drugs = []

        if (val == 0) {
          this.drugs = this.allDrugs
        } else {
          for (let i = 0; i < this.allDrugs.length; i++) {
            if (this.allDrugs[i].drug_type == val) {
              this.drugs.push(this.allDrugs[i])
            }
          }
        }
      },
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)

      },
      getInitData() {
        getInitData().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.drugs = response.data.data.drugs
            this.allDrugs = response.data.data.drugs
            this.advices_template = response.data.data.advices_template
            this.doctors = response.data.data.doctors
            this.department = response.data.data.department
            this.sick = response.data.data.sick
            this.diagnoses = response.data.data.diagnose
            this.additions = response.data.data.additions

            // var info = response.data.data.info
            // if (info.user_type == 2 || info.user_type == 1) {
            //   this.doctorValue = info.admin_user_id
            //   if (info.department_id == 0) {
            //     if (this.department.length > 0) {
            //       this.departmentValue = this.department[0].id
            //     } else {
            //       this.departmentValue = ''
            //
            //     }
            //   } else {
            //     this.departmentValue = info.department_id
            //   }
            // }else{
            //   this.doctorValue = this.doctors[0].admin_user_id
            // }
          }
        })

      },
      tabclickEvent(val) {
        for (let i = 0; i < this.prescriptions.length; i++) {
          console.log(this.prescriptions[i].name)
          if (this.prescriptions[i].name == val.name) {
            console.log("2323323", this.prescriptions)
            this.prescription_id = this.prescriptions[i].id
            this.$emit('event1', this.prescription_id)
            this.curPrescriptions = this.prescriptions[i]
            this.teamList = []
            this.curDrugs = []
            this.$refs.multipleTable.clearSelection()
            this.$refs.tables.clearSelection()

            //用来区分处方属于项目还是药品
            if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
              this.customTabIndex = 1
              this.curStatus = 1
              this.rightTab = 1
              this.showOne = true
              this.showTwo = false
            }
            if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {

              this.customTabIndex = 2
              this.curStatus = 2
              this.rightTab = 2

              this.showTwo = true
              this.showOne = false
            }

            if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length == 0) {
              this.customTabIndex = this.rightTab
              this.curStatus = 0
            }

          }

        }

      },
      clearData() {
        this.curPrescriptions = []
        this.curStatus = 0
        this.curDrugs = []
        this.preDrugs = []
        this.teamList = []

      },
      setData(data, info, admin_info, doctors, department, hisPatientInfo) {
        console.log(data)
        this.prescription_id = data[0].id
        this.editableTabsValue = "处方1"
        this.$emit('event1', this.prescription_id)
        this.curStatus = 0
        this.prescriptions = data
        this.curPrescriptions = this.prescriptions[0]
        this.diagnose = info.diagnosis

        if (this.diagnose == 0) {
          this.diagnose = ""
        }

        if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
          this.curStatus = 1
          this.customTabIndex = 1
          this.rightTab = 1
          this.showOne = true
          this.showTwo = false
        }

        if (this.curPrescriptions.project.length > 0 && this.curPrescriptions.advices.length == 0) {
          this.curStatus = 2
          this.customTabIndex = 2
          this.rightTab = 2
          this.showOne = false
          this.showTwo = true
        }
        this.state1 = info.sick_type
        if (this.state1 == 0) {

          this.state1 = ""
        }
        this.state2 = info.sick_history
        if (this.state2 == 0) {
          this.state2 = ""
        }

        // this.register_type = info.register_type

        if (info.prescription_status == 0) {
          this.order_status = ''
        }

        if (info.prescription_status == 1 || info.prescription_status == 2) {
          this.order_status = '未收费'
        }
        if (info.prescription_status == 3) {
          this.order_status = '已结算'
        }

        if (info.prescription_status == 4) {
          this.order_status = '已退费'
        }

        console.log(info)


        if (info.id > 0) {
          this.doctorValue = info.doctor_id
          this.departmentValue = info.departments
        } else {
          if (hisPatientInfo.doctor != 0 && hisPatientInfo.department != 0) {
            this.doctorValue = hisPatientInfo.doctor
            this.departmentValue = hisPatientInfo.department
          } else {
            if (admin_info.user_type == 2 || admin_info.user_type == 1) {
              this.doctorValue = admin_info.admin_user_id
              if (admin_info.department_id == 0) {
                if (this.department.length > 0) {
                  if (department && department.length > 0) {
                    this.departmentValue = department[0].id

                  } else {

                    this.departmentValue = ''

                  }
                } else {
                  this.departmentValue = ''
                }
              } else {
                this.departmentValue = admin_info.department_id
              }
            } else {
              this.doctorValue = doctors[0].admin_user_id
            }
            if (this.doctorValue == 0) {
              this.doctorValue = ''
            }
          }
        }
        if (info.register_type == 0) {
          // if(hisPatientInfo.register_type != 0){
          //   this.register_type = hisPatientInfo.register_type
          // }else{
          this.register_type = ''
          // }
        } else {
          this.register_type = info.register_type
        }
      },
      moreState(tab, event) {
        if (tab == 'more') {
          return false
        }
      },open_two(){
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('处方已经结算,无法添加')
          return
        }
        if (this.patientInfo == null || this.patientInfo.id == 0) {
          this.$message.error('请选择患者')
          return
        }
        let params = {
          end_time: this.record_date,
          start_time: moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
          patient_id: this.patientInfo.id
        }
        getCallHisPrescription(params).then(response => {
          if (response.data.state == 1) {
            this.$refs.call_prescription.show(this.patientInfo.name, this.patientInfo.id,params.end_time, params.start_time,this.prescriptions,response.data.data.prescriptions)
          } else {
            this.$message.error(response.data.msg)

          }
        })
      },
      open(index, isLoading) {
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('当前处方已经结算,无法保存')
          return
        }
        if (this.doctorValue.length <= 0) {
          this.$message.error('医生不能为空')
          return
        }

        if (this.departmentValue.length <= 0) {
          this.$message.error('科室不能为空')
          return
        }

        if (index == 1) {
          let params = {
            patient_id: this.patientInfo.id,
            diagnose: this.diagnose,
            sick_type: this.state1,
            sick_history: this.state2,
            doctor: this.doctorValue,
            department: this.departmentValue,
            record_date: this.record_date,
            his_patient_id: this.hisPatientInfo.id,
            reg_type: this.register_type
          }

          for (let i = 0; i < this.prescriptions.length; i++) {
            if (this.prescriptions[i].advices.length > 0 && this.prescriptions[i].project.length == 0) {
              this.prescriptions[i]['type'] = 1
            }
            if (this.prescriptions[i].advices.length == 0 && this.prescriptions[i].project.length > 0) {
              this.prescriptions[i]['type'] = 2
            }


            for (let b = 0; b < this.prescriptions[i].advices.length; b++) {
              this.prescriptions[i].advices[b].single_dose = this.prescriptions[i].advices[b].single_dose.toString()
              this.prescriptions[i].advices[b].prescribing_number = this.prescriptions[i].advices[b].prescribing_number.toString()
              this.prescriptions[i].advices[b].retail_price = this.prescriptions[i].advices[b].retail_price.toString()
              this.prescriptions[i].advices[b].day = parseInt(this.prescriptions[i].advices[b].day)

            }

            for (let b = 0; b < this.prescriptions[i].project.length; b++) {
              this.prescriptions[i].project[b].price = this.prescriptions[i].project[b].price.toString()
              this.prescriptions[i].project[b].total = this.prescriptions[i].project[b].total.toString()
              this.prescriptions[i].project[b].delivery_way = this.prescriptions[i].project[b].delivery_way.toString()

            }

            for (let b = 0; b < this.prescriptions[i].addition.length; b++) {
              this.prescriptions[i].addition[b].id = parseInt(this.prescriptions[i].addition[b].id)
              this.prescriptions[i].addition[b].item_id = parseInt(this.prescriptions[i].addition[b].item_id)
              this.prescriptions[i].addition[b].price = this.prescriptions[i].addition[b].price.toString()
              this.prescriptions[i].addition[b].count = this.prescriptions[i].addition[b].count.toString()
            }
          }
          let data = {
            'prescriptions': this.prescriptions
          }
          isLoading = true
          console.log("prescriptions9999",this.prescriptions)
          console.log("params---",params)
          console.log("data",data)
          createHisPrescription(data, params).then(response => {
            if (response.data.state == 1) {
              this.$emit("change")
              this.$message.success('保存成功')
            }
          })
        } else if (index == 2) {
          this.$router.push('/outpatientDoctorStation/print')
        } else if (index == 4) {


        } else if (index == 5) {
          this.$refs.saveTemplate.show()
        }

      },
      addTab(targetName) {
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('该处方已经结算或者退费，无法继续添加处方')
          return
        }
        if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length == 0) {
          this.$message.error('当前处方无数据，新增数据后才能新增处方')
          return
        }

        this.tabIndex = this.prescriptions.length

        ++this.tabIndex
        let newTabName = '处方' + this.tabIndex

        var nowDate = new Date()
        var nowYear = nowDate.getFullYear()
        var nowMonth = nowDate.getMonth() + 1
        var nowDay = nowDate.getDate()

        var hours = nowDate.getHours()
        var min = nowDate.getMinutes()

        var nowTime =
          nowYear +
          '-' +
          (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
          '-' +
          (nowDay < 10 ? '0' + nowDay : nowDay) + " "+(hours < 10 ? '0' + hours : hours) +
          ':' + (min < 10 ? '0' + min : min)

        this.prescriptions.push({
          id: 0,
          name: newTabName,
          order_status: 0,
          advices: [],
          project: [],
          addition: [],
          pre_time:nowTime,

        })
        this.editableTabsValue = newTabName
        this.curPrescriptions = this.prescriptions[this.prescriptions.length - 1]
        this.curStatus = 0
      },
      removeTab(targetName) {
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('该处方已经结算，无法删除')
          return
        }
        if (targetName == '处方1') {
          this.$message.error('该处方无法删除')
          return
        }
        this.$confirm('处方删除后不可恢复，是否确认删除', '删除', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        }).then(() => {
          let id = 0
          for (let i = 0; i < this.prescriptions.length; i++) {
            if (this.prescriptions[i].name == targetName) {
              id = this.prescriptions[i].id
            }
          }

          if (id == 0) {
            let tabs = this.prescriptions
            let activeName = this.editableTabsValue
            if (activeName === targetName) {
              tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                  let nextTab = tabs[index + 1] || tabs[index - 1]
                  if (nextTab) {
                    activeName = nextTab.name

                  }
                }
              })
            }
            this.editableTabsValue = activeName
            this.prescriptions = tabs.filter(tab => tab.name !== targetName)

            for (let i = 0; i < this.prescriptions.length; i++) {
              if (activeName == this.prescriptions[i].name) {
                this.curPrescriptions = this.prescriptions[i]
                if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
                  this.curStatus = 1
                }
                if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {
                  this.curStatus = 2
                }
              }
            }
            if (this.prescriptions.length == 0) {
              this.curPrescriptions = []
              this.curStatus = 0
            }
          } else {
            let params = {
              'id': id
            }
            delHisPrescription(params).then(response => {
              if (response.data.state == 1) {
                this.$message.success('删除成功')
                let tabs = this.prescriptions
                let activeName = this.editableTabsValue
                if (activeName === targetName) {
                  tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                      let nextTab = tabs[index + 1] || tabs[index - 1]
                      if (nextTab) {
                        activeName = nextTab.name

                      }
                    }
                  })
                }
                this.editableTabsValue = activeName
                this.prescriptions = tabs.filter(tab => tab.name !== targetName)

                for (let i = 0; i < this.prescriptions.length; i++) {
                  if (activeName == this.prescriptions[i].name) {
                    this.curPrescriptions = this.prescriptions[i]
                    if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
                      this.curStatus = 1
                    }
                    if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {
                      this.curStatus = 2
                    }
                  }
                }
                if (this.prescriptions.length == 0) {
                  this.curPrescriptions = []
                  this.curStatus = 0
                }
              } else {
                this.$message.success(response.data.msg)
              }
            })
          }

        }).catch(() => {

        })

      },
      beforeLeave(activeName, oldActiveName) {
        let index = activeName
        if (index == 1) {
          if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {
            return false
          }
        } else {
          if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
            return false
          }

        }
      },
      clickTab(tab) {
        let index = parseInt(tab.name)
        if (index == 1) {
          if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {
            this.$message.error('当前处方为项目，无法切换为药品，需要新开处方')
            return
          }
        } else {
          if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
            this.$message.error('当前处方为药品，无法切换为项目，需要新开处方')
            return
          }

        }

        if (index == 1) {

          this.teamList = []
          this.$refs.tables.clearSelection()

          this.showOne = true
          this.showTwo = false
          this.$nextTick(() => {
            this.$refs.prescription_tables.setNewData(this.prescriptions[this.prescriptions.length - 1])
          })
          this.customTabIndex = 1
        }
        if (index == 2) {
          this.curDrugs = []
          this.$refs.multipleTable.clearSelection()

          this.showTwo = true
          this.showOne = false
          this.$nextTick(() => {
            this.$refs.prescription_tables.setNewData(this.prescriptions[this.prescriptions.length - 1])
          })
          this.customTabIndex = 2
        }
        this.rightTab = index

        //用来区分处方属于项目还是药品
        if (this.curPrescriptions.advices.length > 0 && this.curPrescriptions.project.length == 0) {
          this.customTabIndex = 1
          this.curStatus = 1

        }
        if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {
          this.customTabIndex = 2
          this.curStatus = 2
        }
        if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length == 0) {
          // this.customTabIndex = this.rightTab
          this.customTabIndex = index
          this.curStatus = 0

        }

      }, changeAllGoodInfoTableData: function (selection) {
        this.curDrugs = selection
      }, addCharges() {
        this.$refs.additionalCharges.show()
      },
      selectDrugs(selection, row) {
        this.curDrugs = selection
      },
      comfirm() {
        if (this.curPrescriptions.order_status == 2) {
          this.$message.error('该处方已经结算，无法继续添加药品或者项目')
          this.teamList = []
          this.curDrugs = []
          this.tempDrugs = []
          this.$refs.tables.clearSelection()
          this.$refs.multipleTableTwo.clearSelection()
          this.$refs.multipleTable.clearSelection()
          return
        }

        if (this.curStatus == 1 && this.rightTab == 2) {
          this.$message.error('改处方是药品，无法添加项目')
          this.teamList = []
          this.$refs.tables.clearSelection()

          return
        }

        if (this.curStatus == 2 && this.rightTab == 1) {
          this.$message.error('改处方是项目，无法添加药品')
          this.curDrugs = []
          this.tempDrugs = []
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTableTwo.clearSelection()

          return
        }

        for (let i = 0; i < this.teamList.length; i++) {
          for (let a = 0; a < this.curPrescriptions.project.length; a++) {
            if (this.teamList[i].id == this.curPrescriptions.project[a].project_id) {
              this.$message.error('改处方存在相同的项目，无法添加相同的项目')
              return
            }
          }
        }


        for (let i = 0; i < this.curDrugs.length; i++) {
          for (let a = 0; a < this.curPrescriptions.advices.length; a++) {
            if (this.curDrugs[i].id == this.curPrescriptions.advices[i].id) {
              this.$message.error('改处方存在相同的药品，无法添加相同的药品')
              return

            }
          }
        }
        let templateDrugs = []

        for (let i = 0; i < this.tempDrugs.length; i++) {
          for (let a = 0; a < this.tempDrugs[i].advices.length; a++) {
            templateDrugs.push(this.tempDrugs[i].advices[a])
          }
        }

        // for (let i = 0; i < templateDrugs.length; i++) {
        //   for (let a = 0; a < this.curPrescriptions.advices.length; a++) {
        //     if (this.templateDrugs[i].drug_id == this.curPrescriptions.advices[i].id) {
        //       this.$message.error('改处方存在相同的药品，无法添加相同的药品')
        //       return
        //
        //     }
        //   }
        // }


        for (let i = 0; i < this.prescriptions.length; i++) {
          if (this.prescriptions[i].name == this.editableTabsValue) {
            var temp = this.deepClone(this.curDrugs)
            var temp2 = this.deepClone(this.teamList)

            var temp3 = this.deepClone(templateDrugs)

            if (temp3.length > 0) {
              for (let b = 0; b < temp3.length; b++) {
                let obj = {
                  advice_id: 0,
                  id: temp3[b].id,
                  drug_name: temp3[b].advice_name,
                  single_dose: temp3[b].single_dose,
                  delivery_way: temp3[b].delivery_way,
                  execution_frequency: temp3[b].execution_frequency,
                  retail_price: temp3[b].drug.retail_price.toString(),
                  remark: '',
                  day: 1,
                  prescribing_number: temp3[b].prescribing_number,
                  single_dose_unit: temp3[b].drug.min_unit,
                  prescribing_number_unit: temp3[b].drug.max_unit,
                  medical_insurance_number: temp3[b].drug.medical_insurance_number
                }

                if (obj.prescribing_number == 0 || obj.prescribing_number.length == 0) {
                  obj.prescribing_number = 1
                }
                this.prescriptions[i].advices.push(obj)
              }
              this.curStatus = 1
            }


            if (temp.length > 0) {
              for (let b = 0; b < temp.length; b++) {
                let obj = {
                  advice_id: 0,
                  id: temp[b].id,
                  drug_name: temp[b].drug_name,
                  single_dose: temp[b].single_dose,
                  delivery_way: temp[b].delivery_way,
                  execution_frequency: temp[b].execution_frequency,
                  retail_price: temp[b].retail_price.toString(),
                  remark: '',
                  day: 1,
                  prescribing_number: temp[b].prescribing_number,
                  single_dose_unit: temp[b].min_unit,
                  prescribing_number_unit: temp[b].max_unit,
                  medical_insurance_number: temp[b].medical_insurance_number

                }

                if (obj.prescribing_number == 0 || obj.prescribing_number.length == 0) {
                  obj.prescribing_number = 1
                }
                this.prescriptions[i].advices.push(obj)
              }
              this.curStatus = 1
            }

            if (temp2.length > 0) {
              for (let b = 0; b < temp2.length; b++) {
                let obj = {
                  id: 0,
                  project_id: temp2[b].id,
                  project_name: temp2[b].project_name,
                  statistical_classification: temp2[b].statistical_classification,
                  single_dose: temp2[b].single_dose,
                  delivery_way: temp2[b].delivery_way,
                  execution_frequency: temp2[b].execution_frequency,
                  number_days: temp2[b].number_days,
                  total: temp2[b].total,
                  price: temp2[b].price,
                  remark: '',
                  medical_code: temp2[b].medical_code,
                  unit: temp2[b].unit
                }
                if (obj.total == 0) {
                  obj.total = 1
                }
                this.prescriptions[i].project.push(obj)
              }
              this.curStatus = 2
            }

            this.curPrescriptions = this.prescriptions[i]
            this.$refs.multipleTable.clearSelection()
            this.$refs.tables.clearSelection()

          }
        }
        this.curDrugs = []
        this.preDrugs = []
        this.teamList = []

      }, changeAllGoodInfoTableDataTwo(row) {
        this.teamList = row
      },
      selectChange(row) {
        this.teamList = row
      },
      getlist() {
        getHisProject().then(response => {
          if (response.data.state == 1) {
            var project = response.data.data.project
            console.log('project', project)
            this.tabProject = project
          }
        })
      }, 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
      },
      getAllProjectTeam() {
        getAllProjectTeam().then(response => {
          if (response.data.state == 1) {
            var team = response.data.data.team
            console.log('team', team)
            this.tabPrjectTeam = team
          }
        })
      },
      selectTeam(row) {
        console.log('row------', row)
        var arr = []
        for (let i = 0; i < row.length; i++) {
          arr.push(row[i].project_id)
        }
        var ids = arr.join(',')
        var strArr = ids.split(',')
        var res = []//接收不重复的数据

        for (var i = 0; i < strArr.length; i++) {
          var flag = true

          for (var j = 0; j < i; j++) {
            if (strArr[i] === strArr[j]) {
              flag = false
              break
            }
          }
          if (flag) {
            res.push(strArr[i])
          }
        }
        var idstr = res.join(',')
        const params = {
          project_id: idstr
        }
        console.log('params', params)
        getPojectListById(params).then(response => {
          if (response.data.state == 1) {
            var project = response.data.data.project
            console.log('project222', project)
            this.teamList = []
            this.teamList = project
          }
        })
      }, changeDoctor(val) {
        for (let i = 0; i < this.doctors.length; i++) {
          if (this.doctors[i].admin_user_id == this.doctorValue) {
            this.departmentValue = this.doctors[i].department_id
          }
        }

        if (this.departmentValue == 0) {
          this.departmentValue = ""
        }
      }
    }, mounted() {
      this.request_record_date = this.record_date
      this.getInitData()
      //获取所有项目
      this.getlist()
      //获取所以项目组套
      this.getAllProjectTeam()
      this.$nextTick(() => {
        this.multipleTableHeight = parseInt(this.$refs.rightTable.offsetHeight)
      })

    },
    watch: {
      fullHeight(val) {
        if (!this.timer) {
          this.fullHeight = val
          let tableHeight = val - 263
          this.tableHeight = tableHeight
          this.multipleTableHeight = parseInt(this.$refs.rightTable.offsetHeight)
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },

  }
</script>

<style lang="scss" scoped>
  .new-main-contain {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .app-container {
    height: 100%;
  }

  .mainCell {
    height: 36px;
    display: flex;
    align-items: center;
  }

  .mainLeft {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 2px;

  .el-radio {
    margin-right: 5px;
  }

  }
  .mainRight {
    margin-left: 20px;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;

  .cellSpan {
    min-width: 80px;
    display: inline-block;
    margin-right: 10px;
  }

  }
  .mainCenter {
    display: flex;
    flex: 1;
    height: 100%;
  }

  .centerLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;

  .el-form-item {
    width: 33%;
    margin-bottom: 14px;
  }

  .el-form-item__label {
    text-align: left;
  }

  }
  .backColor {
    background: #f6f8f9;
    height: 5px;
    margin-bottom: 5px;
  }

  .RP {
    color: #409EFF;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .tabsBox {
    position: relative;

    flex: 1;
    overflow-y: auto;
    margin-bottom: 60px;
    margin-top: 4px;

  .el-tabs__item {
    padding: 0 10px;
  }

  }
  .preTabs {
    height: 100%;
    display: flex;
    flex-direction: column;

  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }

  }

  .costBox {
    width: 100%;
    height: 60px;
    background: #fff;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .statusRed {
    color: red;
  }

  .addTab {
    position: absolute;
    right: 8px;
    top: 3px;
    z-index: 20;
  }

  .centerRight {
    width: 300px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .rightTab {
    height: 40px;
    width: 100%;
    border: 1px solid #d2d2d2;
    box-sizing: border-box;

  p {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #eee;
    float: left;
  }

  > p:last-child {
    border-left: 1px solid #d2d2d2;
    float: right;
  }

  .activeP {
    background: #409EFF;
    color: #fff;
  }

  }
  .rightTabs {
    display: flex;
    flex-direction: column;
  }

  .comfirmBox {
    width: 100%;
    height: 60px;
    background: #fff;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
  }

  .borderCard {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;

  .el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }

  }
</style>

<style lang="scss">
  .borderCard {

  .el-tabs__nav {
    width: 100%;
  }

  .el-tabs__item {
    width: 50%;
    text-align: center;
  }

  .el-tabs__content {
    padding: 5px;
    flex: 1;
  }

  }
  .centerLeft {

  .el-form-item__label {
    text-align: left;
  }

  }
  .tabsBox {

  .el-tabs__item {
    padding: 0 10px;
  }

  .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
    padding: 0 10px;
  }

  .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    padding: 0 10px;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
    padding: 0 10px;
  }

  }
  .centerRight {

  .el-tabs__nav-scroll {
    display: flex;
  }

  .el-tabs__nav {
    margin: 0 auto;
  }

  .el-table th .cell, .el-table td .cell {
    padding: 0 2px;
  }

  }
  .preTabs {

  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
    padding: 5px 0 5px 5px;
  }

  }
  .rightTabs {
    height: 100%;

  .el-tabs__nav {
    width: auto;
  }

  .el-tabs__header {
    margin-bottom: 5px;
  }

  .el-tabs__item {
    width: auto;
    text-align: inherit;
  }

  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }

  .el-tab-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  }
  #tab-more {

  .el-icon-close {
    display: none;
  }

  }
  ::-webkit-scrollbar {
    height: 15px;
  }
</style>