yos_web/src/HDrpManagement/collectionRule/components/edit.vue

<template>
  <div>
    <el-button size="mini" type="text" @click="editBtn">编 辑</el-button>
    <el-dialog title="编辑收款条件" append-to-body :visible.sync="dialogFormVisible" width="40%" @close="dialogFormVisible = false;$refs.form.resetFields();$emit('onSuccess');isErrorInvoiceapply=false;isErrorLogistics=false;isErrorOrder=false">
      <el-row :gutter="20">
        <el-form :model="form" :rules="rules" ref="form" label-width="140px" label-position="right" size="mini">
          <el-col :span="24">
            <el-form-item label="立账节点" prop="accountingnodes">
              <div>
                <div style="float: left;margin-bottom: 10px">
                  <el-checkbox v-model="form.accountingnodes.ordercheck.isused" true-label="1" false-label="0">订单审核</el-checkbox>
                  <span style="margin-left: 50px">后置天数：</span>
                  <el-input type="number" style="width: 100px" v-model="form.accountingnodes.ordercheck.days" placeholder="请输入" ></el-input>
                  <span style="margin-left: 5px">天</span>
                  <span style="margin-left: 50px">立账额度：</span>
                </div>
                <div style="float: left;margin-bottom: 10px">
                  <el-input type="number" style="width: 100px" v-model="form.accountingnodes.ordercheck.amountrate" placeholder="请输入" :class="{ 'is-error': isErrorOrder }"  @change="checkAmountrate(form.accountingnodes.ordercheck.amountrate,'订单审核')"></el-input>
                  <span style="margin-left: 5px">%</span>
                  <p v-if="isErrorOrder" style="color: red;font-size: 12px">立账额度范围(0-100)</p>
                </div>
              </div>
              <div>
                <div style="float: left;margin-bottom: 10px">
                  <el-checkbox v-model="form.accountingnodes.logisticscheck.isused" true-label="1" false-label="0">订单出货</el-checkbox>
                  <span style="margin-left: 50px">后置天数：</span>
                  <el-input type="number" style="width: 100px" v-model="form.accountingnodes.logisticscheck.days" placeholder="请输入"></el-input>
                  <span style="margin-left: 5px">天</span>
                  <span style="margin-left: 50px">立账额度：</span>
                </div>
                <div style="float: left;margin-bottom: 10px">
                  <el-input type="number" style="width: 100px" v-model="form.accountingnodes.logisticscheck.amountrate" placeholder="请输入" :class="{ 'is-error': isErrorLogistics }"  @change="checkAmountrate(form.accountingnodes.logisticscheck.amountrate,'订单出货')"></el-input>
                  <span style="margin-left: 5px">%</span>
                  <p v-if="isErrorLogistics" style="color: red;font-size: 12px">立账额度范围(0-100)</p>
                </div>

              </div>
              <div>
                <div style="float: left">
                  <el-checkbox v-model="form.accountingnodes.invoiceapplycheck.isused" true-label="1" false-label="0">订单开票</el-checkbox>
                  <span style="margin-left: 50px">后置天数：</span>
                  <el-input type="number" style="width: 100px" v-model="form.accountingnodes.invoiceapplycheck.days" placeholder="请输入"></el-input>
                  <span style="margin-left: 5px">天</span>
                  <span style="margin-left: 50px">立账额度：</span>
                </div>
                <div style="float: left">
                  <el-input type="number" style="width: 100px" v-model="form.accountingnodes.invoiceapplycheck.amountrate" placeholder="请输入" :class="{ 'is-error': isErrorInvoiceapply }"  @change="checkAmountrate(form.accountingnodes.invoiceapplycheck.amountrate,'订单开票')"></el-input>
                  <span style="margin-left: 5px">%</span>
                  <p v-if="isErrorInvoiceapply" style="color: red;font-size: 12px">立账额度范围(0-100)</p>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="remarks">
              <el-input type="textarea" v-model="form.remarks" placeholder="请输入描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否默认条件" prop="isdefault">
              <el-checkbox :true-label="1" :false-label="0" v-model="form.isdefault"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false;$refs.form.resetFields();$emit('onSuccess');isErrorInvoiceapply=false;isErrorLogistics=false;isErrorOrder=false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "edit",
  props:['data'],
  data(){
    var NumberSize = (rule, value, callback) => {
      if (+value >= 0 && +value <= 100) {
        callback()
      } else {
        return callback(new Error('额度比率范围(0-100)'));
      }
    }
    return {
      dialogFormVisible:false,
      form:{
        "sa_receivableruleid":0,
        "days":"10",
        "amountrate":'',
        "point":"",
        "remarks":"",
        "isdefault":1,
        "accountingnodes": {
          "ordercheck": {//订单审核
            "days": "",//后置天数
            "amountrate": "",//立账额度
            "isused": "0"//是否勾选
          },
          "logisticscheck": {//订单出货
            "days": "",
            "amountrate": "",
            "isused": "0"
          },
          "invoiceapplycheck": {//订单开票
            "days": "",
            "amountrate": "",
            "isused": "0"
          }
        }
      },
      rules:{
        point:[
          { required: false, message: '请选择账期依据', trigger: 'change'},
        ],
        amountrate:[
          { required: false, message: '请输入立账额度比率', trigger: 'blur'},
          { validator: NumberSize , trigger:'blur'}
        ],
        days:[
          { required: false, message: '请输入后置天数', trigger: 'blur'}
        ],
        isdefault:[
          { required: false, message: '请选择是否默认条件', trigger: 'blur'}
        ],
        remarks:[
          { required: false, message: '请输入描述', trigger: 'blur'}
        ],
      },
      isErrorOrder: false,
      isErrorLogistics:false,
      isErrorInvoiceapply:false
    }
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      console.log(this.form,'form1')
      if (this.form.accountingnodes){
       /* this.form.accountingnodes.ordercheck.amountrate = Math.round((this.form.accountingnodes.ordercheck.amountrate*100)*100)/100
        this.form.accountingnodes.logisticscheck.amountrate = Math.round((this.form.accountingnodes.logisticscheck.amountrate*100)*100)/100
        this.form.accountingnodes.invoiceapplycheck.amountrate = Math.round((this.form.accountingnodes.invoiceapplycheck.amountrate*100)*100)/100*/
      }else {
        this.form.accountingnodes.ordercheck.amountrate = ''
        this.form.accountingnodes.logisticscheck.amountrate = ''
        this.form.accountingnodes.invoiceapplycheck.amountrate = ''
      }

    },
    checkAmountrate(val,key){
      if (val > 100 || val < 0){
        if (key === '订单审核'){
          this.isErrorOrder = true
        }else if (key === '订单出货'){
          this.isErrorLogistics = true
        }else {
          this.isErrorInvoiceapply = true
        }
      }else {
        if (key === '订单审核'){
          this.isErrorOrder = false
        }else if (key === '订单出货'){
          this.isErrorLogistics = false
        }else {
          this.isErrorInvoiceapply = false
        }
      }
    },
    onSubmit(){
      console.log(this.form)
      const order = this.form.accountingnodes.ordercheck.isused == '1'?this.form.accountingnodes.ordercheck.amountrate:0
      const logistics = this.form.accountingnodes.logisticscheck.isused == '1'?this.form.accountingnodes.logisticscheck.amountrate:0
      const invoiceapply = this.form.accountingnodes.invoiceapplycheck.isused == '1'?this.form.accountingnodes.invoiceapplycheck.amountrate:0
      console.log(order + logistics + invoiceapply)
      if (parseFloat(order) + parseFloat(logistics) + parseFloat(invoiceapply) !== 100 ){
        this.$message.error('已选节点立账额度合计需等于100%');
      }else {
        this.$refs['form'].validate(async (valid) => {
          if (!valid) return false
          /*this.form.amountrate = (this.form.amountrate /100).toFixed(4)*/
          this.form.accountingnodes.ordercheck.amountrate = (this.form.accountingnodes.ordercheck.amountrate/100).toFixed(4)
          this.form.accountingnodes.logisticscheck.amountrate = (this.form.accountingnodes.logisticscheck.amountrate/100).toFixed(4)
          this.form.accountingnodes.invoiceapplycheck.amountrate = (this.form.accountingnodes.invoiceapplycheck.amountrate/100).toFixed(4)
          const res = await this.$api.requested({
            "id": "20230110095903",
            "content": this.form
          })
          this.tool.showMessage(res,()=>{
            this.$emit('onSuccess')
            this.$refs['form'].resetFields();
            this.dialogFormVisible = false
          })
        })
      }
     /* console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.amountrate = (this.form.amountrate /100).toFixed(4)
        const res = await this.$api.requested({
          "id": "20230110095903",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })*/
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select {
  width: 100% !important;
}
</style>