klp-oa/klp-ui/src/views/wms/coil/components/AbnormalForm.vue

<template>
  <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
    <el-form-item label="钢卷ID" prop="coilId" v-if="!formData.abnormalId && showCoilSelector">
      <coil-selector v-model="formData.coilId"></coil-selector>
    </el-form-item>
    <el-form-item label="缺陷描述" prop="remark">
      <el-input type="textarea" v-model="formData.remark" placeholder="请输入缺陷描述" />
    </el-form-item>
    <el-form-item label="上下板面" prop="plateSurface">
      <muti-select v-model="formData.plateSurface" :options="[
        {label: '上板面', value: '上'},
        {label: '下板面', value: '下'}]" type="checkbox">
      </muti-select>
    </el-form-item>
    <el-form-item label="断面位置" prop="position">
      <muti-select v-model="formData.position" :options="dict.type.coil_abnormal_position" type="checkbox">
      </muti-select>
    </el-form-item>
    <el-form-item>
      <el-alert title="异常位置为内圈算起" type="info" :closable="false" show-icon size="small" />
    </el-form-item>
    <el-form-item label="异常区间" required>
      <div style="display: flex; align-items: center;">
        <el-form-item prop="startPosition">
          <el-input v-model="formData.startPosition" type="number" placeholder="请输入开始位置" />
        </el-form-item>
        <el-form-item prop="endPosition">
          <el-input v-model="formData.endPosition" type="number" placeholder="请输入结束位置" />
        </el-form-item>
      </div>
    </el-form-item>

    <el-form-item label="缺陷代码" prop="defectCode">
      <el-radio-group v-model="formData.defectCode">
        <el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{
          dict.label }}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="程度" prop="degree">
      <el-radio-group v-model="formData.degree">
        <el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{
          dict.label }}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="产线" prop="productionLine">
      <el-select v-model="formData.productionLine" placeholder="请选择产线">
        <el-option v-for="dict in dict.type.sys_lines" :key="dict.value" :label="dict.label"
          :value="dict.value"></el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="主缺陷" prop="mainMark">
      <!-- 0表示否，1表示是 -->
      <el-checkbox v-model="formData.mainMark" :true-label="1" :false-label="0">是否为主缺陷</el-checkbox>
    </el-form-item>
    <el-form-item label="缺陷图片" v-if="formData.mainMark === 1">
      <image-upload v-model="formData.attachmentFiles" value-mode="url" :limit="3" />
    </el-form-item>
    
  </el-form>
</template>

<script>
import CoilSelector from '@/components/CoilSelector'
import ImageUpload from '@/components/ImageUpload'

export default {
  name: "AbnormalForm",
  components: {
    CoilSelector,
    ImageUpload
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    showCoilSelector: {
      type: Boolean,
      default: false
    }
  },
  dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'sys_lines'],
  data() {
    return {
      rules: {
        position: [
          { required: true, message: '请选择位置', trigger: 'change' },
          { validator: this.validateArray, trigger: 'change' }
        ],
        // plateSurface: [
        //   { required: true, message: '请选择上下板面', trigger: 'change' },
        //   { validator: this.validateArray, trigger: 'change' }
        // ],
        startPosition: [
          { required: true, message: '请输入开始位置', trigger: ['blur', 'change'] },
          { validator: this.validateStartPosition, trigger: ['blur', 'change'] }
        ],
        endPosition: [
          { required: true, message: '请输入结束位置', trigger: ['blur', 'change'] },
          { validator: this.validateEndPosition, trigger: ['blur', 'change'] }
        ],
        defectCode: [
          { required: true, message: '请选择缺陷代码', trigger: 'change' }
        ],
        degree: [
          { required: true, message: '请选择程度', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    formData: {
      get() {
        const data = this.value || {};
        return data;
      },
      set(newVal) {
        // 发送时将数组转为CSV
        const data = { ...newVal };
        this.$emit('input', data);
      }
    }
  },
  methods: {
    /** 表单验证 */
    validate(callback) {
      if (parseInt(this.formData.startPosition) > parseInt(this.formData.endPosition)) {
        this.$message.error('开始位置必须小于结束位置');
        return false;
      }
      return this.$refs.form.validate(callback);
    },
    /** 重置表单 */
    resetFields() {
      this.$refs.form.resetFields();
      const currentCoilId = this.formData.coilId;
      this.formData = {
        abnormalId: undefined,
        coilId: currentCoilId,
        position: undefined,
        plateSurface: undefined,
        startPosition: undefined,
        endPosition: undefined,
        length: undefined,
        mainMark: 0,
        productionLine: undefined,
        defectCode: undefined,
        degree: undefined,
        remark: undefined,
        attachmentFiles: undefined
      };
    },
    /** 计算缺陷长度 */
    calculateLength() {
      if (this.formData.startPosition && this.formData.endPosition) {
        this.formData.length = this.formData.endPosition - this.formData.startPosition;
      }
    },
    /** 校验开始位置 */
    validateStartPosition(rule, value, callback) {
      if (value < 0) {
        callback(new Error('开始位置必须为正数'));
      } else {
        callback();
      }
    },
    /** 校验结束位置 */
    validateEndPosition(rule, value, callback) {
      if (value < 0) {
        callback(new Error('结束位置必须为正数'));
      } else {
        callback();
      }
    },
    /** 校验数组 */
    validateArray(rule, value, callback) {
      if (!value || value.length === 0) {
        callback(new Error('请至少选择一个选项'));
      } else {
        callback();
      }
    }
  }
};
</script>