Vue_New/src/xt_pages/outpatientCharges/statementTemplate/printThree.vue

<template>
  <div>
      <div v-if="paramsObj.balance_accounts_type != 2" id='prescription-print' class="prescription-print"
           style="position: relative;">
          <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id == 10138" src="https://kuyi.shengws.com/bailin/bltotle.jpg" alt="">
          <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id==10278" src="https://kuyi.shengws.com/beierlog.png" alt="">
        <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id==10610" src="https://kuyi.shengws.com/156.jpg" alt="">
        <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id==10537" src="https://kuyi.shengws.com/xuwenshou.jpg" alt="">

          <div class="printTitle" style="position: absolute;left: 40%;top: 50px;">门诊收费清单</div>
          <div style="display:flex;">
              <div>单据号：<span
                      style="display:inline-block;width:200px;">{{info.order_number ? info.order_number : ''}}</span>
              </div>
              <div>透析号：<span style="display:inline-block;width:200px;">{{info.patient.dialysis_no ? info.patient.dialysis_no : ''}}</span>
              </div>
              <div style="margin-left:2px;">电脑号：<span
                      style="display:inline-block;">{{info.new_order.psn_no ? info.new_order.psn_no : ''}}</span></div>
          </div>
          <div style="display:flex;justify-content: space-between;">
              <div style="display:flex;">
                  <div>姓名：<span style="display:inline-block;width:50px;">{{info.patient.name ? info.patient.name.indexOf('（') > -1 ? info.patient.name.substring(0,info.patient.name.indexOf('（')) : info.patient.name : ''}}</span>
                  </div>
                  <div>性别：<span
                          style="display:inline-block;width:30px;">{{info.patient.gender == '1' ? '男' : '女'}}</span>
                  </div>
                  <div>年龄：<span
                          style="display:inline-block;width:50px;">{{info.patient.age ? info.patient.age : ''}}岁</span>
                  </div>
                  <div>费别：<span style="display:inline-block;min-width:80px;">医保</span>
                  </div>
                  <div>收费日期：<span style="display:inline-block;width:100px;">{{info.new_order.setl_time ? info.new_order.setl_time.split(' ')[0] : ''}}</span>
                  </div>
              </div>
              <div style="float:right">金额单位：元</div>
          </div>
          <div style="min-height: 300px;">
              <table border='1' style="width:100%;" cellspacing="0">
                  <tr>
                      <td width="70">类别</td>
                      <td>项目</td>
                      <td min-width="180" style="min-width:60px;">规格</td>
                      <td width="40">单位</td>
                      <td width="40">数量</td>
                      <td width="60">单价</td>
                      <td width="70">总额</td>
                      <td width="130">小计</td>
                  </tr>
                  <div v-for="(item,i) in info.new_detail_list" :key="i" style="width:100%;display: table-row-group;">
                      <tr v-for="(subItem,index) in item.details" :key="index">
                          <td>
                              <span v-if="item.type == 1">药品费</span>
                              <span v-if="item.type == 2">诊疗费</span>
                              <span v-if="item.type == 3">耗材费</span>
                              <span v-if="item.type == 4">诊疗费</span>

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.advice.advice_name }}</span>
                              <span v-if="item.type == 2">{{ subItem.project.project.project_name }}</span>
                              <span v-if="item.type == 3">{{ subItem.project.good_info.good_name }}</span>
                              <span v-if="item.type == 4">{{ subItem.project.project.team_name }}</span>

                          </td>
                          <td>
                              <span v-if="item.type == 1"><span
                                      v-if="subItem.advice.drug.min_unit != subItem.advice.drug.dose_unit">{{subItem.advice.drug.dose}}{{subItem.advice.drug.dose_unit}}&nbsp;* &nbsp;</span>{{subItem.advice.drug.min_number}}{{subItem.advice.drug.min_unit}}/{{subItem.advice.drug.max_unit}}</span>
                              <span v-if="item.type == 2"></span>
                              <span v-if="item.type == 3">{{ subItem.project.good_info.specification_name }}</span>
                              <span v-if="item.type == 4"></span>

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.advice.drug.prescribing_number_unit }}</span>
                              <span v-if="item.type == 2">{{ subItem.project.unit }}</span>
                              <span v-if="item.type == 3">{{ subItem.project.unit }}</span>
                              <span v-if="item.type == 4"></span>

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.advice.prescribing_number }}</span>
                              <span v-if="item.type == 2">{{ subItem.project.count }}</span>
                              <span v-if="item.type == 3">{{ subItem.project.count }}</span>
                              <span v-if="item.type == 4"></span>

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.pric.toFixed(2) }}</span>
                              <span v-if="item.type == 2">{{ subItem.pric.toFixed(2) }}</span>
                              <span v-if="item.type == 3">{{ subItem.pric.toFixed(2) }}</span>
                              <span v-if="item.type == 4">{{subItem.Total}}</span>


                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ (subItem.advice.prescribing_number * subItem.pric).toFixed(2) }}</span>
                              <span v-if="item.type == 2">{{ (subItem.project.count * subItem.pric).toFixed(2) }}</span>
                              <span v-if="item.type == 3">{{ (subItem.project.count * subItem.pric).toFixed(2) }}</span>
                              <span v-if="item.type == 4">{{subItem.Total}}</span>

                              <!--<span v-if="item.type == 4"></span>-->

                          </td>
                          <td :rowspan="item.details.length" v-if="index == 0"
                              style="vertical-align: middle;text-align: center;">{{ item.total.toFixed(2) }}
                          </td>
                      </tr>
                  </div>
                  <tr>
                      <td colspan="7">
                          <div style="display:flex;flez-wrap:wrap;">
                              <div style="width:33%;" v-for="(item,index) in info.new_detail_list" :key="index">
                                  <span v-if="item.type == 1">药品费: {{ item.total.toFixed(2) }}</span>
                                  <span v-if="item.type == 2">诊疗费: {{ item.total.toFixed(2) }}</span>
                                  <span v-if="item.type == 3">耗材费: {{ item.total.toFixed(2) }}</span>
                                  <span v-if="item.type == 4">诊疗费: {{ item.total.toFixed(2) }}</span>

                                  <!--<span v-if="item.type == 4">检验费: {{ item.total.toFixed(4) }}</span>-->

                              </div>
                          </div>
                      </td>
                      <td>合计: {{info.medfee_sumamt?info.medfee_sumamt:info.new_order.medfee_sumamt}}元</td>
                  </tr>
                  <tr>
                      <td colspan="7">
                          <div style="display:flex;flez-wrap:wrap;margin-bottom:10px;font-size:16px;">
                              <div style="width:33%;">医疗费总额：{{info.medfee_sumamt?info.medfee_sumamt:info.new_order.medfee_sumamt}}元</div>
                              <div style="width:33%;">基金支付金额：{{ (info.new_order.hifp_pay + info.new_order.maf_pay + info.new_order.hifmi_pay + info.new_order.hifob_pay).toFixed(2)}}元</div>
                              <div style="width:33%;">个人账户支付金额：{{info.acct_pay?info.acct_pay:info.new_order.acct_pay}}元</div>

                          </div>
                          <div style="display:flex;flez-wrap:wrap;font-size:16px;">
                              <div style="width:33%;">医疗救助基金金额：{{info.maf_pay?info.maf_pay:info.new_order.maf_pay}}元</div>
                              <div style="width:33%;">个人支付金额：{{ info.new_order.psn_cash_pay}}元</div>
                              <div style="width:33%;">个人账户金额：{{info.new_order.balc}}元</div>
                          </div>
<!--                          <div style="display:flex;flez-wrap:wrap;font-size:16px;margin-top: 10px">-->
<!--&lt;!&ndash;                            <div style="width:33%;">基金统筹支付金额：{{info.hifp_pay?info.hifp_pay:info.new_order.hifp_pay}}元</div>&ndash;&gt;-->
<!--                          </div>-->
                        <div style="display:flex;flez-wrap:wrap;font-size:16px;">
                          <div style="width:33%;">公务员医疗补助：{{info.new_order.cvlserv_pay?info.new_order.cvlserv_pay:0}}元</div>
                          <div style="width:33%;">企业补充医疗保险基金支出：{{info.new_order.cvlserv_pay?info.new_order.cvlserv_pay:0}}元</div>
                        </div>
                      </td>
                      <td style="font-size:16px;">合计：{{info.new_order.medfee_sumamt}}元</td>
                  </tr>

              </table>
          </div>
          <div style="float:right;margin:10px 0;display:flex;">
              <div>操作人：<span style="width:100px;display:inline-block;">{{info.p_admin.user_name}}</span></div>
              <div>操作日期：<span style="width:100px;display:inline-block;">{{info.new_order.setl_time ? info.new_order.setl_time.split(' ')[0] : ''}}</span>
              </div>
          </div>
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10138" src="https://kuyi.shengws.com/bailin/blend.jpg" alt="">
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10278" src="https://kuyi.shengws.com/bailinbeier.png" alt="">
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10610"src="https://kuyi.shengws.com/157.jpg" alt="">
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10537"src="https://kuyi.shengws.com/xuwenwei.jpg" alt="">
      </div>
      <div v-else id='prescription-print' class="prescription-print" style="position: relative;">
          <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id == 10138" src="https://kuyi.shengws.com/bailin/bltotle.jpg" alt="">
          <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id == 10278" src="https://kuyi.shengws.com/beierlog.png" alt="">
        <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id==10610" src="https://kuyi.shengws.com/156.jpg" alt="">
        <img style="width:100%;height:80px" v-if="$store.getters.xt_user.org_id==10537" src="https://kuyi.shengws.com/xuwenshou.jpg" alt="">





          <div class="printTitle" style="position: absolute;left: 40%;top: 50px;">门诊收费清单</div>
          <div style="display:flex;">
              <div>单据号：<span style="display:inline-block;width:200px;">{{balanceAccounts.order ? balanceAccounts.order.mdtrt_id : ''}}</span>
              </div>
              <div>透析号：<span style="display:inline-block;width:200px;">{{balanceAccounts.patient ? balanceAccounts.patient.dialysis_no : ''}}</span>
              </div>
              <div>电脑号：<span style="display:inline-block;width:80px;"></span></div>
          </div>
          <div style="display:flex;justify-content: space-between;">
              <div style="display:flex;">
                  <div>姓名：<span style="display:inline-block;width:50px;">{{balanceAccounts.patient ? balanceAccounts.patient.name.indexOf('（') > -1 ? balanceAccounts.patient.name.substring(0,balanceAccounts.patient.name.indexOf('（')) : balanceAccounts.patient.name : ''}}</span>
                  </div>
                  <div>性别：<span style="display:inline-block;width:30px;">{{balanceAccounts.patient && balanceAccounts.patient.gender == '1' ? '男' : '女'}}</span>
                  </div>
                  <div>年龄：<span style="display:inline-block;width:50px;">{{balanceAccounts.patient ? balanceAccounts.patient.age : ''}}岁</span>
                  </div>
                  <div>费别：<span style="display:inline-block;width:80px;">自费</span>
                  </div>
                  <div>收费日期：<span style="display:inline-block;width:100px;">{{getTime(balanceAccounts.order.settle_accounts_date,"{y}-{m}-{d}")?getTime(balanceAccounts.order.settle_accounts_date,'{y}-{m}-{d}'):''}}</span>
                  </div>
              </div>
              <div style="float:right">金额单位：元</div>
          </div>
          <div style="min-height: 300px;">
              <table border='1' style="width:100%;" cellspacing="0">
                  <tr>
                      <td width="70">类别</td>
                      <td>项目</td>
                      <td min-width="180" style="min-width:60px;">规格</td>
                      <td width="40">单位</td>
                      <td width="40">数量</td>
                      <td width="60">单价</td>
                      <td width="70">总额</td>
                      <td width="130">小计</td>
                  </tr>
                  <div v-for="(item,i) in balanceAccounts.new_detail_list" :key="i"
                       style="width:100%;display: table-row-group;">
                      <tr v-for="(subItem,index) in item.details" :key="index">
                          <td>
                              <span v-if="item.type == 1">药品费</span>
                              <span v-if="item.type == 2">诊疗费</span>
                              <span v-if="item.type == 3">耗材费</span>
<!--                                <span v-if="item.type == 4">诊疗费</span>-->

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.advice.advice_name }}</span>
                              <span v-if="item.type == 2">{{ subItem.project.project.project_name }}</span>
                              <span v-if="item.type == 3">{{ subItem.project.good_info.good_name }}</span>
<!--                                <span v-if="item.type == 4">{{ subItem.Name }}</span>-->

                          </td>
                          <td>
                              <span v-if="item.type == 1"><span
                                      v-if="subItem.advice.drug.min_unit != subItem.advice.drug.dose_unit">{{subItem.advice.drug.dose}}{{subItem.advice.drug.dose_unit}}&nbsp;* &nbsp;</span>{{subItem.advice.drug.min_number}}{{subItem.advice.drug.min_unit}}/{{subItem.advice.drug.max_unit}}</span>
                              <span v-if="item.type == 2"></span>
                              <span v-if="item.type == 3">{{ subItem.project.good_info.specification_name }}</span>
<!--                                <span v-if="item.type == 4"></span>-->

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.advice.drug.prescribing_number_unit }}</span>
                              <span v-if="item.type == 2">{{ subItem.project.unit }}</span>
                              <span v-if="item.type == 3">{{ subItem.project.unit }}</span>
<!--                                <span v-if="item.type == 4"></span>-->

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.advice.prescribing_number }}</span>
                              <span v-if="item.type == 2">{{ subItem.project.count }}</span>
                              <span v-if="item.type == 3">{{ subItem.project.count }}</span>
<!--                                <span v-if="item.type == 4">1</span>-->

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ subItem.pric }}</span>
                              <span v-if="item.type == 2">{{ subItem.pric }}</span>
                              <span v-if="item.type == 3">{{ subItem.pric }}</span>
<!--                                <span v-if="item.type == 4">{{subItem.Total}}</span>-->

                          </td>
                          <td>
                              <span v-if="item.type == 1">{{ (subItem.advice.prescribing_number * subItem.pric).toFixed(2) }}</span>
                              <span v-if="item.type == 2">{{ (subItem.project.count * subItem.pric).toFixed(2) }}</span>
                              <span v-if="item.type == 3">{{ (subItem.project.count * subItem.pric).toFixed(2) }}</span>
<!--                                <span v-if="item.type == 4">{{subItem.Total}}</span>-->

                          </td>
                          <td :rowspan="item.details.length" v-if="index == 0"
                              style="vertical-align: middle;text-align: center;">{{ item.total.toFixed(2) }}
                          </td>
                      </tr>
                  </div>
                  <tr>
                      <td colspan="7">
                          <div style="display:flex;flez-wrap:wrap;">
                              <div style="width:33%;" v-for="(item,index) in balanceAccounts.new_detail_list"
                                   :key="index">
                                  <span v-if="item.type == 1">药品费: {{ item.total.toFixed(2) }}</span>
                                  <span v-if="item.type == 2">诊疗费: {{ item.total.toFixed(2) }}</span>
                                  <span v-if="item.type == 3">耗材费: {{ item.total.toFixed(2) }}</span>
<!--                                    <span v-if="item.type == 4">诊疗费: {{ item.total.toFixed(2) }}</span>-->

                              </div>
                          </div>
                      </td>
                      <td>合计: {{balanceAccounts.order.medfee_sumamt?balanceAccounts.order.medfee_sumamt:0}}元</td>
                  </tr>
                  <tr>
                      <td colspan="7">
                          <div style="display:flex;flez-wrap:wrap;">
                              <div style="width:33%;">
                                  医疗费总额：{{balanceAccounts.order.medfee_sumamt?balanceAccounts.order.medfee_sumamt:0}}元
                              </div>
                              <div style="width:33%;">基金支付金额：0元</div>
                              <div style="width:33%;">个人账户支付金额：0元</div>

                          </div>
                          <div style="display:flex;flez-wrap:wrap;">
                            <div style="width:33%;">医疗救助基金金额：0元</div>
                            <div style="width:33%;">
                                  个人支付金额：{{balanceAccounts.order.medfee_sumamt?balanceAccounts.order.medfee_sumamt:0}}元
                              </div>
                              <div style="width:33%;">个人账户金额：0元</div>
                          </div>


                      </td>
                      <td>合计：{{balanceAccounts.order.medfee_sumamt?balanceAccounts.order.medfee_sumamt:0}}元</td>
                  </tr>

              </table>
          </div>
          <div style="float:right;margin:10px 0;display:flex;">
              <div>操作人：<span
                      style="width:100px;display:inline-block;">{{balanceAccounts.current_admin.user_name}}</span>
              </div>
              <div>操作日期：<span style="width:100px;display:inline-block;">{{getTime(new Date(),'{y}-{m}-{d}')?getTime(new Date(),'{y}-{m}-{d}'):''}}</span>
              </div>
          </div>
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10138" src="https://kuyi.shengws.com/bailin/blend.jpg" alt="">
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10278"src="https://kuyi.shengws.com/bailinbeier.png" alt="">
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10610"src="https://kuyi.shengws.com/157.jpg" alt="">
          <img style="width:100%;" v-if="$store.getters.xt_user.org_id == 10537"src="https://kuyi.shengws.com/xuwenwei.jpg" alt="">

      </div>
  </div>

</template>
<script>
import { getChargePrint } from '@/api/project/project'
import { uParseTime } from '@/utils/tools'

export default {
  data() {
    return {
      list: {},
      prescription: [],
      patient: {},
      orgname: '',

      result: {},
      org_code: '',
      patient_name: '',
      doctor_code: '',
      doctor_name: '',

      name_arr: [],
      spec_arr: [],
      count_arr: [],
      price_arr: [],
      total_arr: []

    }
  },
  props: {
    paramsObj: Object,
    info: Object,
    balanceAccounts: Object
  },
  methods: {
    getName(list) {
      let new_list = []
      for (let i = 0; i < list.length; i++) {
        if (list[i].aac031 == '1') {
          new_list.push(list[i])
        }
      }

      switch (new_list[0].bcc334) {
        case 'A31001':
          return '深圳医保1档'
          break
        case 'A31002':
          return '深圳医保2档'

          break
        case 'A31003':
          return '深圳医保3档'

          break
        case 'A31004':
          return '二档（少儿）'

          break
        case 'A31005':
          return '学生二档'

          break
        case 'A31006':
          return '大学生二档'

          break
        case 'A32001':
          return '在职公务员'
          break
        case 'A32002':
          return '在职驻深公务员'

          break
        case 'A39301':
          return '家属统筹医疗'

          break
        case 'A41001':
          return '工伤在职'

          break
        case 'A51001':
          return '生育在职'

          break
        case 'A52001':
          return '生育医疗一档'

          break
        case 'A52002':
          return '生育医疗一档'

          break
        case 'C31001':
          return '一档医疗退休'

          break
        case 'C31002':
          return '二档医疗退休'
          break

      }

    },
    getValue(item) {
      return this.getItemName(item.aka111) + ': ' + item.bka058 + '元'
    },
    getItemName(number) {
      switch (number) {
        case '01':
          return '床位费'
          break
        case '02':
          return '西药费'

          break
        case '03':
          return '中药费'

          break
        case '04':
          return '中成药费'

          break
        case '05':
          return '中草药费'

          break
        case '06':
          return '检查费'

          break
        case '07':
          return '治疗费'

          break
        case '08':
          return '放射费'

          break
        case '09':
          return '手术费'

          break
        case '10':
          return '化验费'

          break
        case '11':
          return '输血费'

          break
        case '12':
          return '输氧费'

          break
        case '13':
          return '其它费'

          break
        case '14':
          return '麻醉费'

          break
        case '15':
          return '材料费'

          break
        case '16':
          return '特殊检查费'

          break
        case '17':
          return '特殊治疗费'

          break
        case '18':
          return '诊疗费(诊查费)'

          break
        case '19':
          return '护理费'

          break
        case '20':
          return '诊金'

          break
        case '21':
          return '检查费（CT）'

          break
        case '22':
          return '检查费（MRT）'

          break
        case '23':
          return '检查费（其他）'

          break
        case '24':
          return '特需服务费'

          break
        case '25':
          return '杂费'

          break
        case '26':
          return '挂号费'
          break
        case '99':
          return '诊疗费'
          break

      }

    },
    getChargePrint(record_date, patient_id, prescription_id) {
      var params = {
        record_date: record_date,
        patient_id: patient_id,
        prescription_id: prescription_id
      }
      console.log('params', params)
      getChargePrint(params).then(response => {
        if (response.data.state == 1) {
          var list = response.data.data.list
          console.log('list9999999999', list)
          this.list = list
          var prescription = response.data.data.prescription
          console.log('prescription', prescription)
          this.prescription = prescription
          var patient = response.data.data.patient
          console.log('patient', patient)
          this.patient = patient
          var histpatient = response.data.data.hisPatient
          console.log('hispatient', histpatient)
        }
      })
    },
    getTime(value, temp) {
      if (value != undefined) {
        return uParseTime(value, temp)
      }
      return ''
    }
  },
  mounted() {
    this.org_id = this.$store.getters.xt_user.org_id
    var record_date = this.paramsObj.record_date
    console.log('record_date', record_date)
    var patient_id = this.paramsObj.patient_id
    console.log('patient_id', patient_id)
    var prescription_id = this.paramsObj.prescription_id
    this.getChargePrint(record_date, patient_id, prescription_id)
    var xtuser = this.$store.getters.xt_user
    this.orgname = xtuser.org.org_name

  },
  watch: {
    paramsObj: {//深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        this.paramsObj = val
        this.patient_id = this.paramsObj.patient_id
        var record_date = this.paramsObj.record
        this.record_date = record_date
        var prescription_id = this.paramsObj.prescription_id
        this.prescription_id = prescription_id

      },
      deep: true
    }
  }
}
</script>


<style lang="scss" scoped>
  .prescription-print {
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
      margin-bottom: 20px;
      padding: 20px 10px;
  }

  .printTitle {
      font-size: 22px;
      text-align: center;
      font-weight: bold;
  }

  .infoMain {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
      margin-top: 10px;
  }

  .infoMain .infoP {
      width: 33%;
      line-height: 24px;
  }

  .chargeBox {
      border: 1px solid #000;
  }

  .chargeUl {
      display: flex;
      justify-content: space-between;
      text-align: center;
  }

  .chargeUl p {
      height: 40px;
      line-height: 40px;
  }

  .chargeP {
      height: 40px;
      line-height: 40px;
  }

  .moneyBox {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      background: #eee;
      height: 40px;
      align-items: center;
      border: 1px solid #000;
      border-top: none
  }

  .actionBar {
      display: flex;
      justify-content: space-between;
      line-height: 24px;
      padding: 0 10px;
  }

  .actionBar div {
      width: 150px;
  }

  table {

  td {
      padding: 10px 5px;
  }

  }
</style>