elizebeth/src/xt_pages/hospitalStation/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
          class="number_style"
          style="color: black;font-weight:bolder;"
          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
         class="number_style"
          style="color: black"
          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
        class="number_style"
          style="color: black"
          type="number"
          v-model="form.private_price"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item

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

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

    <el-form-item label="支付方式：" style="width:100%;">
         <el-radio-group v-model="form.pay_way">
          <el-radio :label="item.value" :value="item.value" v-for="(item,index) in payWays" :key="index">{{ item.label }}</el-radio>
           <el-button type="primary" v-if="form.pay_way == 4 || form.pay_way == 6" @click="reading()">读卡</el-button>

         </el-radio-group>
      </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  v-model="form.tmp_decimal" class="input_style" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" @change="lilili">元
            </div>
          </el-form-item>
        </span>
      </el-form-item>


      <el-form-item label="付款金额：" prop="id_card">
        <el-input
         class="number_style"
          style="color: black"
          type="number"
          v-model="form.pay_price"
          :disabled="true"
        ></el-input>
      </el-form-item>


      <el-form-item label="付款卡号：" prop="id_card">
        <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
            style="color: black"
            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"
            style="color: black"
            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"
            style="color: black"
            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"
            style="color: black"
            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 @click="init">调试</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";
  import axios from "axios";
  const moment = require('moment')
  export default {
    name: 'chargeDialog',

    data() {

      return {
        tmp_pay: "",
        isshow: false,
        id: 0,
        decimal: 0,//当前押金余额
        record_date: '',
        form: {
          medical_insurance_price: 0,
          private_price: '',//自费12
          pay_way: '',
          dec_way: 'false',//是否使用押金支付
          tmp_decimal: "",//本次使用的押金
          pay_price: '',
          pay_card_no: '',
          discount_price: '',
          preferential_price: '',
          reality_price: '',
          found_price: '',
          total: 0,
          fapiao_code: "",
          fapiao_number: "",
          order: null,
          acct_pay: '',
          psn_pay: '',

        },
        payWays: [
          { value: 1, label: '现金' },
          { value: 2, label: '银行卡'},
          { value: 3, label: '微信'},
          { value: 5, label: '支付宝'},
          { value: 7, label: '积分'},
          { value: 4, label: '医保卡' },
          { value: 6, 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: "",
        },
      };
    },
    props: {
      titles: {
        type: String,
        default: "",
      },
      formValue: {
        type: Object,
      },
      type: {
        type: Number,
        default: 1,
      },
      isCreated: {
        type: Number,
        default: 1,
      },
    },
      created() {
      },
      methods: {
        reading() {
          var that = this

          let id_card_type = 1
          if (this.form.pay_way == 6){
            id_card_type = 4
          }
          let params = {
            'id_card_type': id_card_type,
            'admin_user_id': this.$store.getters.xt_user.user.id,
            'certificates':1,
          }

          axios.get('http://127.0.0.1:9532/zh/api/readcard', {
            params: params
          })
              .then(function(response) {
                if (response.data.state == 0) {
                  that.$message.error(response.data.msg)
                  return false
                } else {
                  that.$message({ message: '读卡成功', type: 'success' })
                }
              })
              .catch(function(error) {

              })
        },

        init() {
          console.log("====this.form.dec_way===", this.form.dec_way)
        },
        lilili(val) {
          console.log("val", val)
          if (this.form.tmp_decimal == "") {
            this.form.pay_price = this.tmp_pay
            return
          }
          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.isshow前",this.isshow)
          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(total,order,id) {
          this.record_date = moment(new Date()).add('year', 0).format("YYYY-MM-DD HH:mm")
          //初始化
          this.form.tmp_decimal = 0
          this.tmp_pay = 0
          this.id = id
          this.updateconfig()
          this.form.dec_way = false
          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.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.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();
              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>
/deep/input::-webkit-input-placeholder {
  color: red;
  font-size: 15px;
}

/deep/.el-input__inner {
  background-color: transparent !important;
  border: 1px solid red;
}
.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>