<template> <el-container> <el-main> <el-row class="row-bg"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px" class="demo-ruleForm":label-position="labelPosition"> <el-row class="row-bg"> <el-col :span="24"><div class="grid-content content co">分拨运抵管理</div></el-col> </el-row> <el-row> <el-col :span="18"> <el-form-item label="" prop="awba"> <el-input v-model="ruleForm.awba" style="width: 200px"> <template slot="prepend">运 单 号</template> </el-input> </el-form-item> </el-col> </el-row> <!-- <el-form-item label="航班号" prop="flightno">--> <!-- <el-input v-model="ruleForm.flightno"></el-input>--> <!-- </el-form-item>--> <!-- <el-form-item label="拖车号" prop="pno">--> <!-- <el-input v-model="ruleForm.pno"></el-input>--> <!-- </el-form-item>--> <!-- <el-form-item label="航班日期" required>--> <!-- <el-col :span="24">--> <!-- <el-form-item prop="flightdate">--> <!-- <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker>--> <!-- </el-form-item>--> <!-- </el-col>--> <!-- </el-form-item>--> <!-- <el-form-item label="分拨件数" prop="turnpiece">--> <!-- <el-input v-model="ruleForm.turnpiece"></el-input>--> <!-- </el-form-item>--> <!-- <el-form-item label="分拨重量" prop="turnweight">--> <!-- <el-input v-model="ruleForm.turnweight"></el-input>--> <!-- </el-form-item>--> <!-- <el-form-item label="海关关区" prop="customcode">--> <!-- <el-col :span="24">--> <!-- <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:100%">--> <!-- <el-option v-for="item in options2" :key="item.value" :label="item.label"--> <!-- :value="item.value" ></el-option>--> <!-- </el-select>--> <!-- </el-col>--> <!-- </el-form-item>--> <!-- <el-form-item label="分拨到达" prop="turnunloading">--> <!-- <el-col :span="24">--> <!-- <el-select v-model="ruleForm.turnunloading" placeholder="请选择分拨到达地" style="width:100%">--> <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"--> <!-- :value="item.value" ></el-option>--> <!-- </el-select>--> <!-- </el-col>--> <!-- </el-form-item>--> <!-- <el-form-item label="卸货地" prop="ext2">--> <!-- <el-input v-model="ruleForm.ext2"></el-input>--> <!-- </el-form-item>--> <!-- <el-form-item label="车辆所发属" prop="ext1">--> <!-- <el-input v-model="ruleForm.ext1"></el-input>--> <!-- </el-form-item>--> <el-row class="row-bg"> <el-col :span="24"><div class="grid-content content co">货物信息</div></el-col> </el-row> <el-row class="row-bg"> <el-row> <el-col :span="5"> <el-form-item label="" prop="carrier"> <el-input v-model="ruleForm.carrier" style="width: 160px" onkeyup="this.value=this.value.toUpperCase()"> <template slot="prepend">承 运 人</template> </el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="" prop="flightno"> <el-input v-model="ruleForm.flightno" style="width: 160px"> <template slot="prepend">航 班 号</template> </el-input> </el-form-item> </el-col> <el-col :span="7"> <el-form-item label="" prop="flightdate"> <div class="ip"> 航班日期 </div> <el-date-picker v-model="ruleForm.flightdate" value-format="yyyy-MM-dd" type="date" style="width: 125px" placeholder="航班日期"> </el-date-picker> </el-form-item> </el-col> <el-col :span="7"> <el-form-item label="" prop="customcode"> <div class="ip"> 海关关区 </div> <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:115px"> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="5"> <el-form-item label="" prop="turnpiece"> <el-input v-model="ruleForm.turnpiece" style="width: 160px"> <template slot="prepend">分拨件数</template> </el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="" prop="turnweight"> <el-input v-model="ruleForm.turnweight" style="width: 160px"> <template slot="prepend">分拨重量</template> </el-input> </el-form-item> </el-col> <el-col :span="7"> <el-form-item label="" prop="turnunloading"> <div class="ip"> 分拨到达地 </div> <el-select v-model="ruleForm.turnunloading" placeholder="请选择分拨到达地" style="width:125px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="7"> <el-form-item label="" prop="pno"> <el-input v-model="ruleForm.pno" style="width: 200px"> <template slot="prepend">拖 车 号</template> </el-input> </el-form-item> </el-col> </el-row> </el-row> </el-form> <el-col :span="8" :offset="10" style="margin-bottom: 20px;margin-top: 10px"> <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button> <!-- <el-button type="primary" @click="submitForm('ruleForm')">保存并发送</el-button>--> <el-button @click="back">返回</el-button> </el-col> </el-row> <!--对话提示框--> <el-row> <el-dialog title="系统提示" :visible.sync="centerDialogVisible" width="30%" center> <span>{{msg}}</span> <span slot="footer" class="dialog-footer"> <el-button @click="DialogVisible">取 消</el-button> <el-button type="primary" @click="DialogVisible">确 定</el-button> </span> </el-dialog> </el-row> </el-main> </el-container> </template> <style scoped> .ip{ max-width: 100px; margin-right: -5px; display: inline-block; background-color: #6F8294; color: #ffffff; border: 1px solid #DCDFE6; vertical-align: middle; padding: 0 18px; white-space: nowrap; border-top-right-radius: 0px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0px; font-size: 10px; } .co{height: 36px;line-height: 36px;} .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px} .row-bg{background-color: white;padding:0px;} </style> <script> import { addAllocatImport } from '../../api/Allocat' export default { data(){ return{ ruleForm: { awba: '', carrier: '', flightno: '', flightdate:'', turnpiece:'', turnweight:'', customcode:'', turnunloading:'', pno:'', ext2:'', ext1:'', status:'22' }, rules: { awba: [ { required: true, message: '请输入运单号', trigger: 'blur' }, ], carrier: [ { required: true, message: '请输入承运人', trigger: 'blur' } ], flightno: [ { required: true, message: '请输入航班号', trigger: 'blur' } ], turnpiece: [ { required: true, message: '请输入分拨件数', trigger: 'blur' } ], turnweight: [ { required: true, message: '请输入分拨重量', trigger: 'blur' } ], flightdate: [ {required: true, message: '航班日期必须选择', trigger: 'change'} ], customcode: [ { required: true, message: '请选择海关关区', trigger: 'change' } ], turnunloading: [ { required: true, message: '请选择分拨到达地', trigger: 'change' } ], ext2: [ { required: true, message: '请输入卸货地', trigger: 'change' } ], ext1: [ { required: true, message: '请输入运输车辆所属承运人代码', trigger: 'change' } ] }, options2: [ { value: '4604', label: '4604' }, { value: '4620', label: '4620' }, { value: '4613', label: '4613' }], options: [ { value: 'CNZGZ460044/4620', label: 'CNZGZ460044/4620' }, { value: 'CNCGO460011/4604', label: 'CNCGO460011/4604' }, { value: 'CNCGO460011/4613', label: 'CNCGO460011/4613' }], labelPosition:'left', centerDialogVisible:false, msg:'', code:'' } }, methods:{ //保存 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { addAllocatImport(this.ruleForm).then(res=>{ let response=res.data; console.log(res); this.code=response.code; if(this.code=='200'){ this.centerDialogVisible=true; this.msg=response.msg; }else{ this.centerDialogVisible=true; this.msg=response.msg; } }); } else { console.log('error submit!!'); return false; } }); }, // 过滤中英文 inputMe(e){ return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase(); }, getDefaultData(){ this.ruleForm=this.$route.params; }, DialogVisible(){ this.centerDialogVisible=false; this.$router.push({name:'运单分拨申报',params:{awba:this.ruleForm.awba}}); }, back(){ this.$router.go(-1);//返回上一层 }, }, activated(){ this.getDefaultData(); } } </script>