朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 9ac1b80aa78ee5826521be333de0462b19346893 1 个父辈 0a28fd11

进港分拨和分拨运抵界面优化

内嵌 并排对比
正在显示 2 个修改的文件 包含 265 行增加 和 100 行删除
... ... @@ -4,56 +4,96 @@
<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="12">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm":label-position="labelPosition">
<el-form-item label="运单号" prop="awba">
<el-input v-model="ruleForm.awba"></el-input>
</el-form-item>
<el-form-item label="承运人" prop="carrier">
<el-input v-model="ruleForm.carrier"></el-input>
</el-form-item>
<el-form-item label="航班号" prop="flightno">
<el-input v-model="ruleForm.flightno"></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-row class="row-bg">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm":label-position="labelPosition">
<el-row>
<el-col :span="6">
<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-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-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 :span="7">
<el-form-item label="" required>
<el-form-item prop="flightdate">
<div class="ip">
航班日期
</div>
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 125px;"></el-date-picker>
</el-form-item>
</el-form-item>
</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 :span="7">
<el-form-item label="" prop="customcode">
<div class="ip">
海关关区
</div>
<el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:125px">
<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" style="margin-top: -20px">
<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-form-item>
<el-form-item label="货物描述" prop="goodsname">
<el-input v-model="ruleForm.goodsname"></el-input>
</el-form-item>
<el-col :span="5" style="margin-top: -20px">
<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" style="margin-top: -20px">
<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" style="margin-top: -20px">
<el-form-item label="" prop="goodsname">
<el-input v-model="ruleForm.goodsname" style="width: 200px">
<template slot="prepend">货物描述</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" :offset="10" style="margin-bottom: 10px">
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button @click="back">返回</el-button>
</el-col>
</el-row>
</el-form>
</el-col>
<el-col :span="12">
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button type="primary" @click="back">返回</el-button>
</el-col>
</el-row>
<!--对话提示框-->
<el-row>
... ... @@ -73,6 +113,22 @@
</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;}
... ... @@ -173,6 +229,10 @@
}
});
},
// 过滤中英文
inputMe(e){
return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
},
getDefaultData(){
this.ruleForm=this.$route.params;
},
... ...
<template>
<el-container>
<el-main>
<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="12">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm":label-position="labelPosition">
<el-form-item label="运单号" prop="awba">
<el-input v-model="ruleForm.awba"></el-input>
</el-form-item>
<el-form-item label="承运人" prop="carrier">
<el-input v-model="ruleForm.carrier"></el-input>
</el-form-item>
<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 :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-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>
<!-- <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>
<el-col :span="12">
<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="back">返回</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="系统提示"
... ... @@ -79,6 +163,22 @@
</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;}
... ... @@ -163,12 +263,13 @@
}
},
methods:{
//保存
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
addAllocatImport(this.ruleForm).then(res=>{
let response=res.data;
//console.log(res);
console.log(res);
this.code=response.code;
if(this.code=='200'){
this.centerDialogVisible=true;
... ... @@ -184,6 +285,10 @@
}
});
},
// 过滤中英文
inputMe(e){
return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
},
getDefaultData(){
this.ruleForm=this.$route.params;
},
... ...