AvoidForm.vue 8.95 KB
<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="当前地标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="landmark">
              <a-input-number v-model="model.landmark" placeholder="请输入当前地标" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="岔道号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="crossNum">
              <a-input-number v-model="model.crossNum" placeholder="请输入岔道号" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="后置地标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="behindLandmark">
              <a-input-number v-model="model.behindLandmark" placeholder="请输入后置地标" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="前置地标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="aheadLandmark">
              <a-input-number v-model="model.aheadLandmark" placeholder="请输入前置地标" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号1" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid1">
              <a-input-number v-model="model.avoid1" placeholder="请输入避让地标号1" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号2" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid2">
              <a-input-number v-model="model.avoid2" placeholder="请输入避让地标号2" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号3" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid3">
              <a-input-number v-model="model.avoid3" placeholder="请输入避让地标号3" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号4" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid4">
              <a-input-number v-model="model.avoid4" placeholder="请输入避让地标号4" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号5" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid5">
              <a-input-number v-model="model.avoid5" placeholder="请输入避让地标号5" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号6" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid6">
              <a-input-number v-model="model.avoid6" placeholder="请输入避让地标号6" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号7" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid7">
              <a-input-number v-model="model.avoid7" placeholder="请输入避让地标号7" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号8" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid8">
              <a-input-number v-model="model.avoid8" placeholder="请输入避让地标号8" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号9" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid9">
              <a-input-number v-model="model.avoid9" placeholder="请输入避让地标号9" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号10" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid10">
              <a-input-number v-model="model.avoid10" placeholder="请输入避让地标号10" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号11" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid11">
              <a-input-number v-model="model.avoid11" placeholder="请输入避让地标号11" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号12" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid12">
              <a-input-number v-model="model.avoid12" placeholder="请输入避让地标号12" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号13" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid13">
              <a-input-number v-model="model.avoid13" placeholder="请输入避让地标号13" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号14" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid14">
              <a-input-number v-model="model.avoid14" placeholder="请输入避让地标号14" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号15" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid15">
              <a-input-number v-model="model.avoid15" placeholder="请输入避让地标号15" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="避让地标号16" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avoid16">
              <a-input-number v-model="model.avoid16" placeholder="请输入避让地标号16" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'AvoidForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           landmark: [
              { required: true, message: '请输入当前地标!'},
           ],
           crossNum: [
              { required: true, message: '请输入岔道号!'},
           ],
           behindLandmark: [
              { required: true, message: '请输入后置地标!'},
           ],
           aheadLandmark: [
              { required: true, message: '请输入前置地标!'},
           ],
           avoid1: [
              { required: true, message: '请输入避让地标号1!'},
           ],
        },
        url: {
          add: "/avoid/avoid/add",
          edit: "/avoid/avoid/edit",
          queryById: "/avoid/avoid/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>