emis-frontend/src/views/emis/emisWaybill/feeItemForm.vue

<template>
   <div style="padding:8px">
       <el-form ref="form" :model="form" size="mini" :rules="rules" label-width="60px">
         <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
          <el-col :span="24">
            <el-form-item :label="$t('费用')" prop="feeCode" >
              <el-select v-model="form.feeCode" placeholder="费用"
              style="width:100%"
              @change="feeChange"
              >
                    <el-option
                    v-for="dict in feeTypeList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
             </el-select>
          </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('实收')" prop="realFee" >
              <el-input-number v-model="form.realFee" :min="1.00" :controls="false" :precision="2"></el-input-number>
              <!-- <el-input v-model="form.realFee" oninput="value=value.replace(/[^0-9.]/g,'')"  placeholder="" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('首重费')" prop="initialWeightFee" >
              <el-input-number v-model="form.initialWeightFee" :min="0.00" :controls="false" :precision="2"></el-input-number>

              <!-- <el-input v-model="form.initialWeightFee" placeholder="" oninput="value=value.replace(/[^0-9.]/g,'')"/> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('续重单价')" prop="addWeightPrice" >
              <el-input-number v-model="form.addWeightPrice" :min="0.00" :controls="false" :precision="2"></el-input-number>
              <!-- <el-input v-model="form.addWeightPrice" placeholder="" oninput="value=value.replace(/[^0-9.]/g,'')"/> -->
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item :label="$t('备注')" prop="remark">
              <el-input v-model="form.remark" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center;margin-bottom: 10px;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { listEmisWaybillFeeitem, getEmisWaybillFeeitem, delEmisWaybillFeeitem, addEmisWaybillFeeitem, updateEmisWaybillFeeitem } from "@/api/emis/emisWaybillFeeitem";

export default {
  name: "emisWaybillFeeitemForm",
  props:{
    id:{
        type:Number
    },
    feeList:{
      type:Array
    },
    triggerCount:{
     type:Number
    }
  },
  components: {  },
  dicts: ['emis_fee_type'],
  data() {
    return {
      emisWaybillFeeitemOptions: [],
      // 遮罩层
      loading: true,
      feeTypeList: [],
      feeMap:null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        feeCode: [
          { required: true, message: "费用类型必填", trigger: ["change","blur"] }
        ],
        realFee: [
          { required: true, message: "费用不能为空", trigger: "blur" }
        ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      },
      triggerCount(newVal){
        this.initData();
      }
  },
  created() {
    this.initData();
  },

  methods: {
    feeChange(value){
      let obj = {};
      obj = this.feeTypeList.find((item)=>{
          return item.value === value;
      });
      this.form.feeName=obj.label;
    },
    initData() {
        this.reset();
        this.feeTypeList=[];
        this.feeMap = new Map();
        this.feeList.forEach(item => {
          this.feeMap[item.feeCode]=item;
        });

        this.dict.type.emis_fee_type.forEach(item => {
          if(!(item.value in this.feeMap)){
            this.feeTypeList.push(item);
          }
        });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        feeCode: null,
        feeName: null,
        fee: null,
        realFee: null,
        currency: null,
        initialWeightFee: 0,
        addWeightPrice: 0,
        blAutoGen: 0,
        orderNum: 0,
        remark: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.fee=this.form.realFee;
          this.$emit("on-changed",this.form);
        }
      });
    },

  }
};
</script>