emis-frontend/src/views/emis/emisElectronicPagApply/applyForm.vue

<template>
  <div >
      <el-form ref="form" :model="form" size="mini" :rules="rules" label-width="100px">
        <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
          <el-col :span="12">
            <el-form-item label="申购序号" prop="applySeq">
              <el-input v-model="form.applySeq" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="申购时间" prop="applyDate">
              <el-input v-model="form.applyDate" placeholder="" disabled  />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="物料品名" prop="materialCode">
              <el-select clearable v-model="form.materialCode" placeholder="请选择" @change="handleMaterialCodeChange">
                <el-option
                  v-for="dict in dict.type.emis_material_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请数量" prop="applyCount">
              <el-select clearable v-model="form.applyCount" placeholder="请选择" @change="handleApplyCountInput">
                <el-option :label="1000" :value="1000"></el-option>
                <el-option :label="2000" :value="2000"></el-option>
                <el-option :label="3000" :value="3000"></el-option>
                <el-option :label="5000" :value="5000"></el-option>
                <el-option :label="8000" :value="8000"></el-option>
                <el-option :label="10000" :value="10000"></el-option>
              </el-select>
              <!-- <el-input v-model="form.applyCount" @input="handleApplyCountInput" maxlength="5" placeholder="请输入申请数量" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价" prop="unitMoney">
              <el-input v-model="form.unitMoney" placeholder="" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="总金额" prop="sumMoney">
              <el-input v-model="form.sumMoney" placeholder="" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="申购人" prop="applyManCode">
              <el-input v-model="form.applyManName" placeholder="" disabled  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购站点" prop="applySiteCode">
              <el-input v-model="form.applySiteName" placeholder="" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" 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 { listEmisElectronicPagApply, getEmisElectronicPagApply, delEmisElectronicPagApply, addEmisElectronicPagApply, updateEmisElectronicPagApply } from "@/api/emis/emisElectronicPagApply";
import { parseTime,genJsSeqNo } from "@/utils/custom";
export default {
  name: "ApplyForm",
  props:{
    id:undefined
  },
  components: {  },
  dicts: ['emis_material_type','emis_cancel_status','emis_proc_send_status'],
  data() {
    return {
      emisElectronicPagApplyOptions: [],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        materialCode: [
          { required: true, message: "物料品名不能为空", trigger: ["blur",'change'] }
        ],
        applyCount: [
          { required: true, message: "申请数量不能为空", trigger: "blur" }
        ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {
        this.reset();
        // this.form.applyDate =  parseTime(new Date());
        this.form.provideType='1';
        this.form.unitMoney="1";
        this.form.prefix="T7080";
        this.form.applyManName=this.$store.getters.empName;
        this.form.applySiteName=this.$store.getters.ownerSiteName;
        this.form.applySeq=genJsSeqNo();
    },
    handleMaterialCodeChange(){
        if(this.form.materialCode=='1001'){
          this.form.unitMoney="1";
        }else{
          this.form.unitMoney="0";
        }
    },
    handleApplyCountInput(value, item, type){
      // console.log(this.form.applyCount);
        // value = value.replace(/[^\d]/g, '')

        this.form.sumMoney=parseFloat(this.form.applyCount)*parseFloat(this.form.unitMoney);
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        prefix: null,
        applySeq: null,
        applyDate: null,
        provideType: null,
        materialCode: null,
        materialName: null,
        applyManCode: null,
        applySiteCode: null,
        applyCount: null,
        unitMoney: null,
        sumMoney: null,
        blSend: null,
        sendDate: null,
        sendManCode: null,
        sendSiteCode: null,
        sendCenterManCode: null,
        sendCenterSiteCode: null,
        blCancel: null,
        cancelManCode: null,
        cancelDate: null,
        cancelSiteCode: null,
        userSiteCode: null,
        provideFlag: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        createSite: null,
        updateSite: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addEmisElectronicPagApply(this.form).then(response => {
               this.$modal.msgSuccess("新增申请成功");
               this.$emit("on-changed");
            });

          // if (this.form.id != null) {
          //   // updateEmisElectronicPagApply(this.form).then(response => {
          //   //   this.$modal.msgSuccess("修改成功");
          //   //   this.$emit("on-changed");
          //   // });
          // } else {

          // }
        }
      });
    },

  }
};
</script>