Importallocation.vue 16.3 KB
<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">运&nbsp;单&nbsp;号</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">承&nbsp;运&nbsp;人</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">航&nbsp;班&nbsp;号</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="7">
                                            <el-form-item label="" prop="flightdate">
                                                <div class="ip">
                                                    &nbsp;航班日期&nbsp;
                                                </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">拖&nbsp;车&nbsp;号</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>