kd-aiot-frontend/src/views/classifyManage/itemInformation/components/RowForm.vue

<template>
  <el-form
    :model="itemForm"
    :rules="customRule"
    ref="formCustom"
    class="row-form"
  >
    <el-row>
      <el-col
        :span="8"
        v-if="defaultNum == 'w06' || defaultNum == 'w07' || defaultNum == 'w04'"
      >
        <el-form-item
          label="牌号"
          label-width="60px"
          :prop="defaultNum == 'w06' ? 'brandNum' : ''"
        >
          <el-input v-model="itemForm.brandNum" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col
        :span="8"
        v-if="
          defaultNum == 'w08' ||
          defaultNum == 'w01' ||
          defaultNum == 'w02' ||
          defaultNum == 'w03' ||
          defaultNum == 'w05'
        "
      >
        <el-form-item label="规格" prop="specification" label-width="60px">
          <el-input
            v-model="itemForm.specification"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum != 'w06'">
        <el-form-item label="型号" prop="modelType" label-width="60px">
          <el-input
            v-model="itemForm.modelType"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w03'">
        <el-form-item label="材质" prop="texture" label-width="60px">
          <el-input
            :disabled="itemForm.isCitation"
            v-model="itemForm.info.texture"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w01'">
        <el-form-item label="标准产能" label-width="85px">
          <div class="row-col">
            <el-input
              type="number"
              v-model="itemForm.info.standardCapacity"
              placeholder="请输入"
            ></el-input>
            <span>/小时</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w07'">
        <el-form-item label="标准单重" label-width="85px">
          <el-input-number
            style="width: 80%"
            type="number"
            v-model="itemForm.info.pieceWeight"
            :min="0"
            placeholder="请输入"
          ></el-input-number>
          <span class="spanbox">KG</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w07'">
        <el-form-item label="不良品率" label-width="85px">
          <el-input-number
            style="width: 85%"
            type="number"
            v-model="itemForm.info.unqualifiedRate"
            :min="0"
            :max="100"
            placeholder="请输入"
          ></el-input-number>
          <span class="spanbox">%</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w02'">
        <el-form-item label="角度" label-width="60px">
          <el-select v-model="itemForm.info.angle" placeholder="请选择">
            <el-option
              v-for="item in angleList"
              :key="item.id"
              :label="item.value"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w02' || defaultNum == 'w03'">
        <el-form-item label="长" label-width="60px">
          <div>
            <el-input-number
              style="width: 80%; margin-right: 10px"
              type="number"
              v-model="itemForm.info.length"
              :min="0"
              placeholder="请输入"
            ></el-input-number>
            <span>mm</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w02' || defaultNum == 'w03'">
        <el-form-item label="宽" label-width="60px">
          <div>
            <el-input-number
              style="width: 80%; margin-right: 10px"
              type="number"
              v-model="itemForm.info.width"
              :min="0"
              placeholder="请输入"
            ></el-input-number>
            <span>mm</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w02' || defaultNum == 'w03'">
        <el-form-item label="高" label-width="60px">
          <div>
            <el-input-number
              style="width: 80%; margin-right: 10px"
              type="number"
              v-model="itemForm.info.high"
              :min="0"
              placeholder="请输入"
            ></el-input-number>
            <span>mm</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="大模体型号" label-width="95px">
          <el-input
            v-model="itemForm.info.dieBodyModel"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="收缩系数" label-width="85px">
          <el-input
            v-model="itemForm.info.shrinkageCoefficient"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="芯杆数量" label-width="85px">
          <el-input
            v-model="itemForm.info.mandrelNum"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            type="number"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="模孔数量" label-width="85px">
          <el-input
            v-model="itemForm.info.dieHoleNum"
            type="number"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="上冲头数量" label-width="95px">
          <el-input
            v-model="itemForm.info.upperPunchNum"
            type="number"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="下冲头数量" label-width="95px">
          <el-input
            v-model="itemForm.info.lowerPunchNum"
            type="number"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == 'w04'">
        <el-form-item label="最大冲压次数" label-width="105px">
          <el-input
            v-model="itemForm.info.maximumStampingTimes"
            type="number"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-for="(item, index) in itemForm.addList" :key="index">
        <el-form-item
          :prop="'addList.' + index + '.key'"
          :rules="{
            required: true,
            message: '自定义参数名称不能为空',
            trigger: 'blur'
          }"
        >
          <div class="add-col">
            <el-input
              class="col-input"
              v-model="item.key"
              placeholder="参数名称"
            ></el-input>
            <el-input
              class="col-input"
              v-model="item.value"
              placeholder="参数值"
            ></el-input>
            <el-button type="text" @click="delt(item, index)"> 删除 </el-button>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="itemForm.addList.length < 10">
        <el-form-item label-width="20px">
          <el-button type="primary" @click="addItem">增加自定义参数</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  export default {
    props: {
      itemForm: {
        type: Object,
        default: {}
      },
      defaultNum: {
        type: String,
        default: 'w01'
      }
    },
    components: {},
    data() {
      return {
        // customForm:{
        //   addList:[]
        // },
        customRule: {
          brandNum: [{ required: true, message: '请输入牌号', trigger: 'blur' }]
        },
        angleList: [
          { id: 0, value: '非A', name: 'notA' },
          { id: 1, value: 'A', name: 'A' }
        ]
      };
    },
    watch: {
      itemForm(val) {
        if (val) {
        }
      }
    },
    created() {},
    methods: {
      // 在 Input 值改变时触发
      handleEdit(e) {
        let value = e.replace(/^(0+)|[^\d]+/g, ''); // 以0开头或者输入非数字，会被替换成空
      },
      // 添加自定义参数
      addItem() {
        if (this.itemForm.addList.length < 10) {
          let item = { key: '', value: '' };
          this.itemForm.addList.push(item);
        } else {
          this.$message.warning('自定义参数最多添加10条');
        }
      },

      // 删除自定义参数
      delt(item, index) {
        this.itemForm.addList.splice(index, 1);
      },

      //子组件接收callback为父组件传过来的next()方法
      validateForm(callback) {
        // let flag = true;
        //开始表单校验
        this.$refs.formCustom.validate((valid) => {
          callback(valid);
          // if (valid) {
          //   flag = true
          // } else {
          //   return false;
          // }
        });
        // 如果flag为true，则执行callback()
        // if (flag) {
        // callback();
        // }
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.row-form) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px dashed #ccc;
    .el-row {
      width: 100%;
    }
    .el-form-item {
      margin-bottom: 15px;
    }
    .row-col {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .el-input--medium {
        width: 75%;
        margin-right: 10px;
      }
    }
    .spanbox {
      display: inline-block;
      margin-left: 10px;
    }
    .add-col {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .col-input {
        margin-right: 5px;
      }
    }
  }
</style>