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">
        <el-input class="number_style" type="number" v-model="form.total" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="医保：" prop="name" :validate-event="is_Name">
        <el-input class="number_style" type="number" v-model="form.medical_insurance_price" :disabled="true"></el-input>
      </el-form-item>


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

      <el-form-item class="number_style" label="个账支出：" prop="age" :validate-event="is_Name">
        <el-input type="number" v-model="form.acct_pay" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item class="number_style" label="个人现金支出：" prop="age" :validate-event="is_Name">
        <el-input type="number" v-model="form.psn_pay" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item class="number_style" label="完全自费：" prop="age" :validate-event="is_Name">
        <el-input type="number" v-model="form.fulamt_ownpay_amt" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item class="number_style" label="超限价：" prop="age" :validate-event="is_Name">
        <el-input type="number" v-model="form.overlmt_self_pay" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item class="number_style" label="个人共济：" prop="age" :validate-event="is_Name">
        <el-input type="number" v-model="form.acct_mulaid_pay" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item label="个人现金支付方式：" style="width:100%;"><!--门诊-->
        <el-checkbox  v-model="form.dec_way" @change="changedecimal">
                    使用押金余额抵扣（当前押金余额为￥{{decimal}}）
        </el-checkbox>
        <span v-if="form.dec_way == true">
        <el-form-item class="specialFormItem" >
          <div style="display:flex;">
<!--            这里不要改成el-input，因为使用el-input会导致一个奇怪的bug，千万不要改！！！！！！！！！！！！！！！！！！！！-->
            <input  class="input_style" v-model="form.tmp_decimal"  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" @input="lilili"></input>元
          </div>
        </el-form-item>
        </span>
      </el-form-item>


      <el-form-item label="个账使用标识：" prop="acct_used_flag" >
        <el-select style="margin-right:5px;width:100px;"
                   v-model="form.acct_used_flag"  placeholder="">
          <el-option
            v-for="(item,index) in acct_used_flags"
            :key="index"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="" style="width:100%;" v-if="this.$store.getters.xt_user.org.id != 10138 && this.$store.getters.xt_user.org.id != 10278 && this.$store.getters.xt_user.org.id != 0 ">

        <el-radio-group v-model="form.pay_way">
          <el-radio :label="item.value" v-for="(item,index) in payWays" :key="index">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="" style="width:100%;" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278 || this.$store.getters.xt_user.org.id == 0">

        <el-checkbox-group v-model="form.pay_wayss">
          <el-checkbox :label="item.value" v-for="(item,index) in payWays" :key="item.value">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="现金支付金额：" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278  || this.$store.getters.xt_user.org.id == 0  ">
        <el-input class="number_style" v-model="form.cash_pay" ></el-input>
      </el-form-item>

      <el-form-item label="微信支付金额：" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278  || this.$store.getters.xt_user.org.id == 0  ">
        <el-input class="number_style" v-model="form.wechat_pay" ></el-input>
      </el-form-item>
      <el-form-item label="银行卡支付金额：" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278  || this.$store.getters.xt_user.org.id == 0  ">
        <el-input class="number_style" v-model="form.band_card_pay" ></el-input>
      </el-form-item>
      <el-form-item label="支付宝支付金额：" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278  || this.$store.getters.xt_user.org.id == 0  ">
        <el-input class="number_style" v-model="form.ali_pay" ></el-input>
      </el-form-item>
      <el-form-item label="积分支付：" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278  || this.$store.getters.xt_user.org.id == 0  ">
        <el-input class="number_style" v-model="form.jifen_pay" ></el-input>
      </el-form-item>
      <el-form-item label="其他说明：" v-if="this.$store.getters.xt_user.org.id == 10138 || this.$store.getters.xt_user.org.id == 10278  || this.$store.getters.xt_user.org.id == 0  ">
        <el-input class="number_style" v-model="form.oth_desc" ></el-input>
      </el-form-item>

      <el-form-item label="付款金额：" prop="id_card" :validate-event="is_Name">
        <el-input class="number_style" 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 class="number_style" 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 class="number_style" 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 class="number_style" v-model="form.reality_price" @change="realityPrice"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="找回金额：">
        <div style="display:flex;">
          <el-input class="number_style" 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'
  import {
    idtobalance
  }from "@/api/deposit";

  export default {
    name: 'chargeDialog',

    data() {

      return {
        IsShow:false,
        tmp_pay:"",//临时付款金额
        isshow:false,
        id:0,
        decimal:0,//当前押金余额
        record_date:'',
        acct_used_flags: [
          { id: 0, name: '不使用' },
          { id: 1, name: '使用本人个账' },
          { id: 2, name: '使用共济个账' },
        ],
        form: {
          medical_insurance_price:0,
          private_price:'',//自费12
          pay_way:"",
          pay_wayss:[],
          dec_way:'false',//是否使用押金支付
          tmp_decimal:"",//本次使用的押金
          pay_price:'',
          oth_desc:"",
          pay_card_no:'',
          discount_price:'',
          preferential_price:'',
          reality_price:'',
          found_price:'',
          total:0,
          fapiao_code:"",
          fapiao_number:"",
          order:null,
          acct_pay:'',
          psn_pay:'',
          overlmt_self_pay:'',
          acct_mulaid_pay:'',
          fulamt_ownpay_amt:'',
          acct_used_flag:0,
          cash_pay:"",
          band_card_pay:"",
          wechat_pay:"",
          ali_pay:"",
          jifen_pay:"",
        },
        payWays: [
          {value: "1", label: '现金'},
          {value: "2", label: '银行卡'},
          {value: "3", label: '微信'},
          {value: "5", label: '支付宝'},
          {value: "7", label: '积分'},
          {value: "4", label: '医保卡'},
          {value: "8", 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:"",
          acct_pay:"",
          psn_pay:"",
          overlmt_self_pay:"",
          acct_mulaid_pay:"",
          fulamt_ownpay_amt:"",
          pay_wayss: [],
          acct_used_flag:0,
          cash_pay:"",
          band_card_pay:"",
          wechat_pay:"",
          ali_pay:"",
          jifen_pay:"",
        },

      }
    },
    props: {

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

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

      }
    },
    created(){
    },
    methods: {
      init(){
        console.log("this.tmp_decimal",this.tmp_decimal)
        console.log("this.tmp_decimal",this.tmp_decimal)
        console.log("this.tmp_decimal",this.tmp_decimal)
      },
      lilili(val){
        console.log("this.form.tmp_decimal",this.form.tmp_decimal)
        //null undefined
        if(this.form.tmp_decimal == ""){
          this.form.pay_price = this.tmp_pay
          return
        }
        console.log("val",val)
        if (parseFloat(this.form.tmp_decimal) > parseFloat(this.form.private_price)){
          // alert("押金不得大于自费金额")
          this.$message.error("押金不得大于自费金额");
          this.form.tmp_decimal = ""
          this.form.pay_price = this.tmp_pay
          return
        }
        // this.form.private_price = parseFloat(this.form.tmp_decimal) + parseFloat(this.form.pay_price)

        this.form.pay_price = ((parseFloat(this.form.private_price)*10000 - parseFloat(this.form.tmp_decimal)*10000)/10000).toFixed(2)
      },
      changedecimal(){
        console.log("this.form.dec_way前",this.form.dec_way)
        this.$forceUpdate();
        this.isshow = this.form.dec_way
        // console.log("this.form.dec_way后",this.form.dec_way)
        if (this.isshow == false){
          // this.form.private_price = parseFloat(this.form.pay_price)
          this.form.tmp_decimal = 0
           this.form.pay_price = this.tmp_pay
        }else {
          //储存临时押金
          this.tmp_pay = this.form.pay_price
          if (parseFloat(this.form.tmp_decimal) > parseFloat(this.form.private_price)){
            this.form.tmp_decimal = 0
                // alert("押金不得大于自费金额")
            this.$message.error("押金不得大于自费金额");
            return
          }
          // this.form.private_price = parseFloat(this.form.tmp_decimal) + parseFloat(this.form.pay_price)
          this.tmp_pay = this.form.pay_price
          this.form.pay_price = ((parseFloat(this.form.private_price)*10000 - parseFloat(this.form.tmp_decimal)*10000)/10000).toFixed(2)
        }
      },
      //查询用户当前的余额
      updateconfig(){
        var params = {
          his_patient_id: this.id,
        }
        idtobalance(params).then((res) => {
          if (res.data.state == 1){
            this.decimal = res.data.data.list;
          }
        })
      },
      show: function (total,order,id) {
        // alert("total",total)
        // console.log("===========")
        // console.log(total)
        // alert("order",orde
        // console.log(order)
        // alert("id",id)
        // console.log("wwwwwwwwwwwwww")
        // console.log(id)
        // console.log("++++++++++++")
        //初始化
        this.form.tmp_decimal = 0
        this.tmp_pay = 0
        this.id = id
        this.form.dec_way = false
        this.updateconfig()
        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.acct_used_flag = 0
        this.form.fapiao_code =""
        this.form.fapiao_number = ""
        this.order = order

        if(this.order && this.order.id > 0){
          this.form.acct_pay = this.order.acct_pay
          this.form.psn_pay = this.order.psn_cash_pay
          this.form.total = this.order.medfee_sumamt
          this.form.pay_price = (this.order.medfee_sumamt).toFixed(2)
          this.form.medical_insurance_price = this.order.fund_pay_sumamt
          this.form.private_price =  this.order.psn_part_amt
          this.form.overlmt_self_pay = this.order.overlmt_self_pay
          this.form.acct_mulaid_pay = this.order.acct_mulaid_pay
          this.form.fulamt_ownpay_amt = this.order.fulamt_ownpay_amt

        }

        this.visibility = true

      }, hide: function () {
        this.form = Object.assign({}, this.resetForm)
        this.loadingtwo = false
        this.visibility = false
      }, cancel: function (formName) {
        this.form.tmp_decimal = 0
        this.tmp_pay = 0
        this.form.dec_way = false
        this.$emit('cancel', this.getValue())
        this.$refs['formValue'].resetFields()
      },
      confirm: function (formName) {
        if (parseFloat(this.form.tmp_decimal) > parseFloat(this.decimal)){
          this.$message.error("押金余额不足");
          return
        }
        this.$refs['formValue'].validate((valid) => {
          if (valid) {
            let value = {}
            value = this.getValue()
            console.log(value)
            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%;
  }
}
.input_style {
  border-radius: 5px;
  border: 1px solid #dddddd;
}
.input_style:focus {
outline:none;
border: 1px solid #66b1ff;
}

/deep/ .number_style{
  .el-input__inner{
    font-weight: bolder;
  }

}
</style>