elizebeth/src/xt_pages/outpatientCharges/components/chargeDialog.vue

<template>
  <el-dialog width="854px" title="收费单" class="chargeDialog" :visible.sync="visibility" :close-on-click-modal="isClose"
             :close-on-press-escape="isClose">

    <el-form :model="form"  ref="formValue" label-width="100px">

      <el-form-item label="日期：" style="width:100%;">
        <div>{{record_date}}</div>
      </el-form-item>

      <el-form-item label="总计：" prop="name" :validate-event="is_Name" style="width:33%;">
        <el-input type="number" v-model="form.total" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="医保：" prop="name" :validate-event="is_Name" style="width:33%;">
        <el-input type="number" v-model="form.medical_insurance_price" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item label="自费：" prop="age" :validate-event="is_Name" style="width:33%;">
        <el-input type="number" v-model="form.private_price" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item label="支付方式：" style="width:100%;">
        <!-- <el-select v-model="form.pay_way" placeholder="请选择">
          <el-option
            v-for="(item,index) in payWays"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->
        <el-radio-group v-model="form.pay_way">
          <el-radio :label="index" v-for="(item,index) in payWays" :key="index">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="付款金额：" prop="id_card" :validate-event="is_Name">
        <el-input type="number" v-model="form.pay_price" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item label="付款卡号：" prop="id_card" :validate-event="is_Name">
        <el-input v-model="form.pay_card_no"></el-input>
      </el-form-item>

      <el-form-item class="specialFormItem" label="折扣金额：">
        <div style="display:flex;">
          <el-input v-model="form.discount_price" :disabled="form.preferential_price != 0" @change="changeDiscountPrice"></el-input>
        </div>
      </el-form-item>
      <el-form-item class="specialFormItem" label="优惠金额：">
        <div style="display:flex;">
          <el-input v-model="form.preferential_price" :disabled="form.discount_price != 0" @change="changePreferentialPrice"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="实收金额：">
        <div style="display:flex;">
          <el-input v-model="form.reality_price" @change="realityPrice"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="找回金额：">
        <div style="display:flex;">
          <el-input v-model.number="form.found_price"></el-input>
        </div>
      </el-form-item>

      <el-form-item label="发票编码：">
        <div style="display:flex;">
          <el-input v-model.number="form.fapiao_code"></el-input>
        </div>
      </el-form-item>


      <el-form-item label="发票号码：">
        <div style="display:flex;">
          <el-input v-model.number="form.fapiao_number"></el-input>
        </div>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="cancel('formValue')">取 消</el-button>
    <el-button type="primary" @click="confirm('formValue')">确 定</el-button>
  </span>
  </el-dialog>

</template>

<script>
  import { uParseTime } from '@/utils/tools'

  export default {
    name: 'chargeDialog',

    data() {

      return {
        record_date:'',
        form: {
          medical_insurance_price:0,
          private_price:'',
          pay_way:'',
          pay_price:'',
          pay_card_no:'',
          discount_price:'',
          preferential_price:'',
          reality_price:'',
          found_price:'',
          total:0,
          fapiao_code:"",
          fapiao_number:"",
          order:null


        },
        payWays: [
          {value: 1, label: '现金'},
          {value: 2, label: '银行卡'},
          {value: 3, label: '微信'},
          {value: 4, label: '支付宝'},
        ],
        total:"",

        visibility: false,
        labelPosition: 'right',
        isClose: false,

        resetForm: {
          medical_insurance_price:'',
          private_price:'',
          pay_way:'',
          pay_price:'',
          pay_card_no:'',
          discount_price:'',
          preferential_price:'',
          reality_price:'',
          found_price:'',
          fapiao_code:"",
          fapiao_number:""
        },

      }
    },
    props: {

      titles: {
        type: String,
        default: ''
      },
      formValue: {
        type: Object
      },
      type: {
        type: Number,
        default: 1

      },
      isCreated: {
        type: Number,
        default: 1

      }
    },
    methods: {
      show: function (total,order) {
        this.form.total = total
        this.form.private_price = total
        this.form.pay_price = total
        this.form.total = total + this.form.medical_insurance_price
        this.form.discount_price = 0.0
        this.form.preferential_price = 0.0

        this.form.fapiao_code =""
        this.form.fapiao_number = ""
        this.order = order

        if(this.order && this.order.id > 0){
          this.form.total = this.order.medfee_sumamt
          this.form.pay_price = this.order.medfee_sumamt
          this.form.medical_insurance_price = this.order.fund_pay_sumamt
          this.form.private_price =  this.order.psn_part_amt
        }

        this.visibility = true

      }, hide: function () {
        this.form = Object.assign({}, this.resetForm)
        this.loadingtwo = false
        this.visibility = false
      }, cancel: function (formName) {
        this.$emit('cancel', this.getValue())
        this.$refs['formValue'].resetFields()
      },
      confirm: function (formName) {
        this.$refs['formValue'].validate((valid) => {
          if (valid) {
            let value = {}
            value = this.getValue()
            this.$emit('confirm', value)
            this.loadingtwo = true
          }
        })
      },
      getValue: function () {
        let form = {}
        form = this.form
        return form
      },
      realityPrice(val){
        if(val < (this.form.total - this.form.discount_price - this.form.preferential_price)){
          this.$message.error('实收金额不能小于收费金额')
          return
        }
        this.form.found_price = parseInt(val) - parseInt(this.form.total) + parseInt(this.form.discount_price) + parseInt(this.form.preferential_price)
      },
      changeDiscountPrice(val){
        if(val > this.form.total){
          this.$message.error('折扣金额不能超过费用总额')
          return
        }
        this.form.reality_price = parseInt(this.form.total) - parseInt(val) - parseInt(this.form.preferential_price)
      },
      changePreferentialPrice(val){
        if(val > this.form.total){
          this.$message.error('优惠金额不能超过费用总额')
          return
        }
        this.form.reality_price = parseInt(this.form.total) - parseInt(val) - parseInt(this.form.discount_price)
      }
    },mounted() {
      var nowDate = new Date()
      var nowYear = nowDate.getFullYear()
      var nowMonth = nowDate.getMonth() + 1
      var nowDay = nowDate.getDate()

      var nowHours = nowDate.getHours()
      var nowMin = nowDate.getMinutes()
      var nowSecond = nowDate.getSeconds()

      this.record_date =
        nowYear +
        '-' +
        (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
        '-' +
        (nowDay < 10 ? '0' + nowDay : nowDay)+" "+(nowHours < 10 ? '0' + nowHours : nowHours)+":"+(nowMin < 10 ? '0' + nowMin : nowMin)
    }

  }
</script>

<style lang="scss" scoped>
.chargeDialog{
  .el-form{
    display: flex;
    flex-wrap: wrap;
  }
  .el-form-item{
    width:50%;
  }
}
</style>