ProductionOrderWaterLevelModal.vue 3.55 KB
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="加工单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input placeholder="请输入加工单号" :disabled="true" v-model="model.code"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="预设水位值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterLevel">
              <a-input
                placeholder="请输入预设水位值(0-8)"
                v-model="model.waterLevel"
                @keypress="handleNumberInput"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import {postAction} from '@/api/manage'

export default {
  name: "ProductionOrderWaterLevelModal",
  data() {
    return {
      title: "编辑水位",
      width: 500,
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },

      confirmLoading: false,
      validatorRules: {
        waterLevel: [
          { required: true, message: '请输入预设水位值' },
          {
            validator: (rule, value, callback) => {
              if (value === '' || value === null || value === undefined) {
                callback()
                return
              }
              const num = Number(value)
              if (isNaN(num)) {
                callback('请输入有效的数字')
                return
              }
              if (num < 0) {
                callback('水位值不能小于0')
              } else if (num > 8) {
                callback('水位值不能大于8')
              } else {
                callback()
              }
            }
          }
        ]
      },
      url: {
        edit: "/shipment/productionOrderHeader/editWaterLever"
      }
    }
  },
  methods: {
    handleNumberInput(e) {
      const key = e.key
      if (!/[\d.]/.test(key) && key !== 'Backspace' && key !== 'Delete' && key !== 'Tab') {
        e.preventDefault()
      }
    },

    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.confirmLoading = false
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          const submitData = {
            ...that.model,
            waterLevel: Number(that.model.waterLevel)
          }
          postAction(this.url.edit, submitData).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.$emit('ok')
            that.confirmLoading = false;
            that.close();
          })
        } else {
          console.log('验证失败')
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>