朱兆平 / vue_cli · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 2 个修改的文件 包含 265 行增加 和 100 行删除
@@ -4,56 +4,96 @@ @@ -4,56 +4,96 @@
4 <el-row class="row-bg"> 4 <el-row class="row-bg">
5 <el-col :span="24"><div class="grid-content content co">分拨运抵管理</div></el-col> 5 <el-col :span="24"><div class="grid-content content co">分拨运抵管理</div></el-col>
6 </el-row> 6 </el-row>
7 - <el-row>  
8 - <el-col :span="12">  
9 - <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm":label-position="labelPosition">  
10 - <el-form-item label="运单号" prop="awba">  
11 - <el-input v-model="ruleForm.awba"></el-input>  
12 - </el-form-item>  
13 - <el-form-item label="承运人" prop="carrier">  
14 - <el-input v-model="ruleForm.carrier"></el-input>  
15 - </el-form-item>  
16 - <el-form-item label="航班号" prop="flightno">  
17 - <el-input v-model="ruleForm.flightno"></el-input>  
18 - </el-form-item>  
19 - <el-form-item label="航班日期" required>  
20 - <el-col :span="24">  
21 - <el-form-item prop="flightdate">  
22 - <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker> 7 + <el-row class="row-bg">
  8 + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm":label-position="labelPosition">
  9 + <el-row>
  10 + <el-col :span="6">
  11 + <el-form-item label="" prop="awba">
  12 + <el-input v-model="ruleForm.awba" style="width: 200px">
  13 + <template slot="prepend">运&nbsp;单&nbsp;号</template>
  14 + </el-input>
  15 + </el-form-item>
  16 + </el-col>
  17 + </el-row>
  18 + <el-row>
  19 + <el-col :span="5">
  20 + <el-form-item label="" prop="carrier">
  21 + <el-input v-model="ruleForm.carrier" style="width: 160px" onkeyup="this.value=this.value.toUpperCase()">
  22 + <template slot="prepend">承&nbsp;运&nbsp;人</template>
  23 + </el-input>
  24 + </el-form-item>
  25 + </el-col>
  26 + <el-col :span="5">
  27 + <el-form-item label="" prop="flightno">
  28 + <el-input v-model="ruleForm.flightno" style="width: 160px">
  29 + <template slot="prepend">航&nbsp;班&nbsp;号</template>
  30 + </el-input>
23 </el-form-item> 31 </el-form-item>
24 </el-col> 32 </el-col>
25 - </el-form-item>  
26 - <el-form-item label="运抵件数" prop="turnpiece">  
27 - <el-input v-model="ruleForm.turnpiece"></el-input>  
28 - </el-form-item>  
29 - <el-form-item label="运抵重量" prop="turnweight">  
30 - <el-input v-model="ruleForm.turnweight"></el-input>  
31 - </el-form-item>  
32 - <el-form-item label="海关关区" prop="customcode">  
33 - <el-col :span="24">  
34 - <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:100%">  
35 - <el-option v-for="item in options2" :key="item.value" :label="item.label"  
36 - :value="item.value" ></el-option>  
37 - </el-select> 33 + <el-col :span="7">
  34 + <el-form-item label="" required>
  35 + <el-form-item prop="flightdate">
  36 + <div class="ip">
  37 + 航班日期
  38 + </div>
  39 + <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 125px;"></el-date-picker>
  40 + </el-form-item>
  41 + </el-form-item>
38 </el-col> 42 </el-col>
39 - </el-form-item>  
40 - <el-form-item label="运抵到达" prop="turnunloading">  
41 - <el-col :span="24">  
42 - <el-select v-model="ruleForm.turnunloading" placeholder="请选择运抵到达地" style="width:100%">  
43 - <el-option v-for="item in options" :key="item.value" :label="item.label"  
44 - :value="item.value" ></el-option>  
45 - </el-select> 43 + <el-col :span="7">
  44 + <el-form-item label="" prop="customcode">
  45 + <div class="ip">
  46 + 海关关区
  47 + </div>
  48 + <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:125px">
  49 + <el-option v-for="item in options2" :key="item.value" :label="item.label"
  50 + :value="item.value" ></el-option>
  51 + </el-select>
  52 + </el-form-item>
  53 + </el-col>
  54 + </el-row>
  55 + <el-row>
  56 + <el-col :span="5" style="margin-top: -20px">
  57 + <el-form-item label="" prop="turnpiece">
  58 + <el-input v-model="ruleForm.turnpiece" style="width: 160px">
  59 + <template slot="prepend">运抵件数</template>
  60 + </el-input>
  61 + </el-form-item>
46 </el-col> 62 </el-col>
47 - </el-form-item>  
48 - <el-form-item label="货物描述" prop="goodsname">  
49 - <el-input v-model="ruleForm.goodsname"></el-input>  
50 - </el-form-item> 63 + <el-col :span="5" style="margin-top: -20px">
  64 + <el-form-item label="" prop="turnweight">
  65 + <el-input v-model="ruleForm.turnweight" style="width: 160px">
  66 + <template slot="prepend">运抵重量</template>
  67 + </el-input>
  68 + </el-form-item>
  69 + </el-col>
  70 +
  71 + <el-col :span="7" style="margin-top: -20px">
  72 + <el-form-item label="" prop="turnunloading">
  73 + <div class="ip">
  74 + 运抵到达
  75 + </div>
  76 + <el-select v-model="ruleForm.turnunloading" placeholder="请选择运抵到达地" style="width:125px">
  77 + <el-option v-for="item in options" :key="item.value" :label="item.label"
  78 + :value="item.value" ></el-option>
  79 + </el-select>
  80 + </el-form-item>
  81 + </el-col>
  82 + <el-col :span="7" style="margin-top: -20px">
  83 + <el-form-item label="" prop="goodsname">
  84 + <el-input v-model="ruleForm.goodsname" style="width: 200px">
  85 + <template slot="prepend">货物描述</template>
  86 + </el-input>
  87 + </el-form-item>
  88 + </el-col>
  89 + </el-row>
  90 + <el-row>
  91 + <el-col :span="4" :offset="10" style="margin-bottom: 10px">
  92 + <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
  93 + <el-button @click="back">返回</el-button>
  94 + </el-col>
  95 + </el-row>
51 </el-form> 96 </el-form>
52 - </el-col>  
53 - <el-col :span="12">  
54 - <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>  
55 - <el-button type="primary" @click="back">返回</el-button>  
56 - </el-col>  
57 </el-row> 97 </el-row>
58 <!--对话提示框--> 98 <!--对话提示框-->
59 <el-row> 99 <el-row>
@@ -73,6 +113,22 @@ @@ -73,6 +113,22 @@
73 </el-container> 113 </el-container>
74 </template> 114 </template>
75 <style scoped> 115 <style scoped>
  116 + .ip{
  117 + max-width: 100px;
  118 + margin-right: -5px;
  119 + display: inline-block;
  120 + background-color: #6F8294;
  121 + color: #ffffff;
  122 + border: 1px solid #DCDFE6;
  123 + vertical-align: middle;
  124 + padding: 0 18px;
  125 + white-space: nowrap;
  126 + border-top-right-radius: 0px;
  127 + border-top-left-radius: 4px;
  128 + border-bottom-left-radius: 4px;
  129 + border-bottom-right-radius: 0px;
  130 + font-size: 10px;
  131 + }
76 .co{height: 36px;line-height: 36px;} 132 .co{height: 36px;line-height: 36px;}
77 .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px} 133 .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px}
78 .row-bg{background-color: white;padding:0px;} 134 .row-bg{background-color: white;padding:0px;}
@@ -173,6 +229,10 @@ @@ -173,6 +229,10 @@
173 } 229 }
174 }); 230 });
175 }, 231 },
  232 + // 过滤中英文
  233 + inputMe(e){
  234 + return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
  235 + },
176 getDefaultData(){ 236 getDefaultData(){
177 this.ruleForm=this.$route.params; 237 this.ruleForm=this.$route.params;
178 }, 238 },
1 <template> 1 <template>
2 <el-container> 2 <el-container>
3 <el-main> 3 <el-main>
  4 +
4 <el-row class="row-bg"> 5 <el-row class="row-bg">
5 - <el-col :span="24"><div class="grid-content content co">分拨运单管理</div></el-col>  
6 - </el-row>  
7 - <el-row>  
8 - <el-col :span="12">  
9 - <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm":label-position="labelPosition">  
10 - <el-form-item label="运单号" prop="awba">  
11 - <el-input v-model="ruleForm.awba"></el-input>  
12 - </el-form-item>  
13 - <el-form-item label="承运人" prop="carrier">  
14 - <el-input v-model="ruleForm.carrier"></el-input>  
15 - </el-form-item>  
16 - <el-form-item label="航班号" prop="flightno">  
17 - <el-input v-model="ruleForm.flightno"></el-input>  
18 - </el-form-item>  
19 - <el-form-item label="拖车号" prop="pno">  
20 - <el-input v-model="ruleForm.pno"></el-input>  
21 - </el-form-item>  
22 - <el-form-item label="航班日期" required>  
23 - <el-col :span="24">  
24 - <el-form-item prop="flightdate">  
25 - <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker> 6 + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px" class="demo-ruleForm":label-position="labelPosition">
  7 + <el-row class="row-bg">
  8 + <el-col :span="24"><div class="grid-content content co">分拨运抵管理</div></el-col>
  9 + </el-row>
  10 + <el-row>
  11 + <el-col :span="18">
  12 + <el-form-item label="" prop="awba">
  13 + <el-input v-model="ruleForm.awba" style="width: 200px">
  14 + <template slot="prepend">运&nbsp;单&nbsp;号</template>
  15 + </el-input>
26 </el-form-item> 16 </el-form-item>
27 </el-col> 17 </el-col>
28 - </el-form-item>  
29 - <el-form-item label="分拨件数" prop="turnpiece">  
30 - <el-input v-model="ruleForm.turnpiece"></el-input>  
31 - </el-form-item>  
32 - <el-form-item label="分拨重量" prop="turnweight">  
33 - <el-input v-model="ruleForm.turnweight"></el-input>  
34 - </el-form-item>  
35 - <el-form-item label="海关关区" prop="customcode">  
36 - <el-col :span="24">  
37 - <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:100%">  
38 - <el-option v-for="item in options2" :key="item.value" :label="item.label"  
39 - :value="item.value" ></el-option>  
40 - </el-select>  
41 - </el-col>  
42 - </el-form-item>  
43 - <el-form-item label="分拨到达" prop="turnunloading">  
44 - <el-col :span="24">  
45 - <el-select v-model="ruleForm.turnunloading" placeholder="请选择分拨到达地" style="width:100%">  
46 - <el-option v-for="item in options" :key="item.value" :label="item.label"  
47 - :value="item.value" ></el-option>  
48 - </el-select>  
49 - </el-col>  
50 - </el-form-item>  
51 - <el-form-item label="卸货地" prop="ext2">  
52 - <el-input v-model="ruleForm.ext2"></el-input>  
53 - </el-form-item>  
54 - <el-form-item label="车辆所发属" prop="ext1">  
55 - <el-input v-model="ruleForm.ext1"></el-input>  
56 - </el-form-item> 18 + </el-row>
  19 +
  20 +
  21 +<!-- <el-form-item label="航班号" prop="flightno">-->
  22 +<!-- <el-input v-model="ruleForm.flightno"></el-input>-->
  23 +<!-- </el-form-item>-->
  24 +<!-- <el-form-item label="拖车号" prop="pno">-->
  25 +<!-- <el-input v-model="ruleForm.pno"></el-input>-->
  26 +<!-- </el-form-item>-->
  27 +<!-- <el-form-item label="航班日期" required>-->
  28 +<!-- <el-col :span="24">-->
  29 +<!-- <el-form-item prop="flightdate">-->
  30 +<!-- <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker>-->
  31 +<!-- </el-form-item>-->
  32 +<!-- </el-col>-->
  33 +<!-- </el-form-item>-->
  34 +<!-- <el-form-item label="分拨件数" prop="turnpiece">-->
  35 +<!-- <el-input v-model="ruleForm.turnpiece"></el-input>-->
  36 +<!-- </el-form-item>-->
  37 +<!-- <el-form-item label="分拨重量" prop="turnweight">-->
  38 +<!-- <el-input v-model="ruleForm.turnweight"></el-input>-->
  39 +<!-- </el-form-item>-->
  40 +<!-- <el-form-item label="海关关区" prop="customcode">-->
  41 +<!-- <el-col :span="24">-->
  42 +<!-- <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:100%">-->
  43 +<!-- <el-option v-for="item in options2" :key="item.value" :label="item.label"-->
  44 +<!-- :value="item.value" ></el-option>-->
  45 +<!-- </el-select>-->
  46 +<!-- </el-col>-->
  47 +<!-- </el-form-item>-->
  48 +<!-- <el-form-item label="分拨到达" prop="turnunloading">-->
  49 +<!-- <el-col :span="24">-->
  50 +<!-- <el-select v-model="ruleForm.turnunloading" placeholder="请选择分拨到达地" style="width:100%">-->
  51 +<!-- <el-option v-for="item in options" :key="item.value" :label="item.label"-->
  52 +<!-- :value="item.value" ></el-option>-->
  53 +<!-- </el-select>-->
  54 +<!-- </el-col>-->
  55 +<!-- </el-form-item>-->
  56 +<!-- <el-form-item label="卸货地" prop="ext2">-->
  57 +<!-- <el-input v-model="ruleForm.ext2"></el-input>-->
  58 +<!-- </el-form-item>-->
  59 +<!-- <el-form-item label="车辆所发属" prop="ext1">-->
  60 +<!-- <el-input v-model="ruleForm.ext1"></el-input>-->
  61 +<!-- </el-form-item>-->
  62 + <el-row class="row-bg">
  63 + <el-col :span="24"><div class="grid-content content co">货物信息</div></el-col>
  64 + </el-row>
  65 + <el-row class="row-bg">
  66 + <el-row>
  67 + <el-col :span="5">
  68 + <el-form-item label="" prop="carrier">
  69 + <el-input v-model="ruleForm.carrier" style="width: 160px" onkeyup="this.value=this.value.toUpperCase()">
  70 + <template slot="prepend">承&nbsp;运&nbsp;人</template>
  71 + </el-input>
  72 + </el-form-item>
  73 + </el-col>
  74 + <el-col :span="5">
  75 + <el-form-item label="" prop="flightno">
  76 + <el-input v-model="ruleForm.flightno" style="width: 160px">
  77 + <template slot="prepend">航&nbsp;班&nbsp;号</template>
  78 + </el-input>
  79 + </el-form-item>
  80 + </el-col>
  81 + <el-col :span="7">
  82 + <el-form-item label="" prop="flightdate">
  83 + <div class="ip">
  84 + &nbsp;航班日期&nbsp;
  85 + </div>
  86 + <el-date-picker
  87 + v-model="ruleForm.flightdate"
  88 + value-format="yyyy-MM-dd"
  89 + type="date" style="width: 125px"
  90 + placeholder="航班日期">
  91 + </el-date-picker>
  92 + </el-form-item>
  93 + </el-col>
  94 + <el-col :span="7">
  95 + <el-form-item label="" prop="customcode">
  96 + <div class="ip">
  97 + 海关关区
  98 + </div>
  99 + <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:115px">
  100 + <el-option v-for="item in options2" :key="item.value" :label="item.label"
  101 + :value="item.value" ></el-option>
  102 + </el-select>
  103 + </el-form-item>
  104 + </el-col>
  105 + </el-row>
  106 + <el-row>
  107 + <el-col :span="5">
  108 + <el-form-item label="" prop="turnpiece">
  109 + <el-input v-model="ruleForm.turnpiece" style="width: 160px">
  110 + <template slot="prepend">分拨件数</template>
  111 + </el-input>
  112 + </el-form-item>
  113 + </el-col>
  114 + <el-col :span="5">
  115 + <el-form-item label="" prop="turnweight">
  116 + <el-input v-model="ruleForm.turnweight" style="width: 160px">
  117 + <template slot="prepend">分拨重量</template>
  118 + </el-input>
  119 + </el-form-item>
  120 + </el-col>
  121 + <el-col :span="7">
  122 + <el-form-item label="" prop="turnunloading">
  123 + <div class="ip">
  124 + 分拨到达地
  125 + </div>
  126 + <el-select v-model="ruleForm.turnunloading" placeholder="请选择分拨到达地" style="width:125px">
  127 + <el-option v-for="item in options" :key="item.value" :label="item.label"
  128 + :value="item.value" ></el-option>
  129 + </el-select>
  130 + </el-form-item>
  131 + </el-col>
  132 + <el-col :span="7">
  133 + <el-form-item label="" prop="pno">
  134 + <el-input v-model="ruleForm.pno" style="width: 200px">
  135 + <template slot="prepend">拖&nbsp;车&nbsp;号</template>
  136 + </el-input>
  137 + </el-form-item>
  138 + </el-col>
  139 + </el-row>
  140 + </el-row>
57 </el-form> 141 </el-form>
58 - </el-col>  
59 - <el-col :span="12"> 142 + <el-col :span="8" :offset="10" style="margin-bottom: 20px;margin-top: 10px">
60 <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button> 143 <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
61 - <el-button type="primary" @click="back">返回</el-button> 144 +<!-- <el-button type="primary" @click="submitForm('ruleForm')">保存并发送</el-button>-->
  145 + <el-button @click="back">返回</el-button>
62 </el-col> 146 </el-col>
63 </el-row> 147 </el-row>
64 - <!--对话提示框--> 148 + <!--对话提示框-->
65 <el-row> 149 <el-row>
66 <el-dialog 150 <el-dialog
67 title="系统提示" 151 title="系统提示"
@@ -79,6 +163,22 @@ @@ -79,6 +163,22 @@
79 </el-container> 163 </el-container>
80 </template> 164 </template>
81 <style scoped> 165 <style scoped>
  166 + .ip{
  167 + max-width: 100px;
  168 + margin-right: -5px;
  169 + display: inline-block;
  170 + background-color: #6F8294;
  171 + color: #ffffff;
  172 + border: 1px solid #DCDFE6;
  173 + vertical-align: middle;
  174 + padding: 0 18px;
  175 + white-space: nowrap;
  176 + border-top-right-radius: 0px;
  177 + border-top-left-radius: 4px;
  178 + border-bottom-left-radius: 4px;
  179 + border-bottom-right-radius: 0px;
  180 + font-size: 10px;
  181 + }
82 .co{height: 36px;line-height: 36px;} 182 .co{height: 36px;line-height: 36px;}
83 .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px} 183 .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px}
84 .row-bg{background-color: white;padding:0px;} 184 .row-bg{background-color: white;padding:0px;}
@@ -163,12 +263,13 @@ @@ -163,12 +263,13 @@
163 } 263 }
164 }, 264 },
165 methods:{ 265 methods:{
  266 + //保存
166 submitForm(formName) { 267 submitForm(formName) {
167 this.$refs[formName].validate((valid) => { 268 this.$refs[formName].validate((valid) => {
168 if (valid) { 269 if (valid) {
169 addAllocatImport(this.ruleForm).then(res=>{ 270 addAllocatImport(this.ruleForm).then(res=>{
170 let response=res.data; 271 let response=res.data;
171 - //console.log(res); 272 + console.log(res);
172 this.code=response.code; 273 this.code=response.code;
173 if(this.code=='200'){ 274 if(this.code=='200'){
174 this.centerDialogVisible=true; 275 this.centerDialogVisible=true;
@@ -184,6 +285,10 @@ @@ -184,6 +285,10 @@
184 } 285 }
185 }); 286 });
186 }, 287 },
  288 +// 过滤中英文
  289 + inputMe(e){
  290 + return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
  291 + },
187 getDefaultData(){ 292 getDefaultData(){
188 this.ruleForm=this.$route.params; 293 this.ruleForm=this.$route.params;
189 }, 294 },