作者 小范

车辆备案管理界面优化

@@ -6,48 +6,50 @@ @@ -6,48 +6,50 @@
6 <el-form-item> 6 <el-form-item>
7 <el-input v-model="filters.trailerFrameNo" placeholder="车牌号查询"></el-input> 7 <el-input v-model="filters.trailerFrameNo" placeholder="车牌号查询"></el-input>
8 </el-form-item> 8 </el-form-item>
9 - <el-form-item>  
10 - <el-button type="primary" v-on:click="getReCord(1)">查询</el-button> 9 + <el-form-item style="margin-left: 50px">
  10 + <el-button type="warning" style="width:150px" size="medium" icon="el-icon-plus" v-on:click="getReCord(1)">查询</el-button>
11 </el-form-item> 11 </el-form-item>
12 <el-form-item> 12 <el-form-item>
13 - <el-button type="primary" @click="companyAdd">新增</el-button> 13 + <el-button type="primary" style="width:150px" size="medium" icon="el-icon-plus" @click="companyAdd">新增</el-button>
14 </el-form-item> 14 </el-form-item>
15 </el-form> 15 </el-form>
16 </el-col> 16 </el-col>
17 <!--列表--> 17 <!--列表-->
18 - <el-table :data="recordList" highlight-current-row v-loading="listLoading" style="width: 100%;">  
19 - <el-table-column type="selection" width="55"> 18 + <el-table :data="recordList" highlight-current-row v-loading="listLoading"
  19 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
  20 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;" size="small">
  21 + <el-table-column type="selection" width="55" fixed="left" align="center">
20 </el-table-column> 22 </el-table-column>
21 - <el-table-column prop="coCode" label="运输公司名称" width="120px" > 23 + <el-table-column prop="coCode" label="运输公司名称" width="120px" align="center" >
22 </el-table-column> 24 </el-table-column>
23 - <el-table-column prop="proposer" label="挂靠单位" width="120px" > 25 + <el-table-column prop="proposer" label="挂靠单位" width="120px" align="center">
24 </el-table-column> 26 </el-table-column>
25 - <el-table-column prop="veTargetNo" label="备案单位" width="130px" > 27 + <el-table-column prop="veTargetNo" label="备案单位" width="130px" align="center" >
26 </el-table-column> 28 </el-table-column>
27 - <el-table-column prop="domesticLisenceNo" label="国内车牌" width="100px"> 29 + <el-table-column prop="domesticLisenceNo" label="国内车牌" width="100px" align="center">
28 </el-table-column> 30 </el-table-column>
29 - <el-table-column prop="veOwnerName" label="车主姓名" width="100px" > 31 + <el-table-column prop="veOwnerName" label="车主姓名" width="100px" align="center">
30 </el-table-column> 32 </el-table-column>
31 - <el-table-column prop="ownerInsideTel" label="车主联系方式" width="110px" > 33 + <el-table-column prop="ownerInsideTel" label="车主联系方式" width="110px" align="center">
32 </el-table-column> 34 </el-table-column>
33 - <el-table-column prop="mainPort" label="本地关代码" width="100px" > 35 + <el-table-column prop="mainPort" label="本地关代码" width="100px" align="center">
34 </el-table-column> 36 </el-table-column>
35 - <el-table-column prop="selfWt" label="自重" width="90px"> 37 + <el-table-column prop="selfWt" label="自重" width="90px" align="center">
36 </el-table-column> 38 </el-table-column>
37 - <el-table-column prop="veTon" label="载重" width="90px"> 39 + <el-table-column prop="veTon" label="载重" width="90px" align="center">
38 </el-table-column> 40 </el-table-column>
39 - <el-table-column prop="returnmessage" label="备案结果" width="100px"> 41 + <el-table-column prop="returnmessage" label="备案结果" width="100px" align="center">
40 </el-table-column> 42 </el-table-column>
41 - <el-table-column prop="apprNo" label="备案编号" width="140px"> 43 + <el-table-column prop="apprNo" label="备案编号" width="140px" align="center">
42 </el-table-column> 44 </el-table-column>
43 - <el-table-column prop="operationType" :formatter="operationType" label="申报状态" width="110px"> 45 + <el-table-column prop="operationType" :formatter="operationType" label="申报状态" width="110px" align="center">
44 </el-table-column> 46 </el-table-column>
45 - <el-table-column prop="updateDate" label="更新时间" width="160px"> 47 + <el-table-column prop="updateDate" label="更新时间" width="160px" align="center">
46 </el-table-column> 48 </el-table-column>
47 - <el-table-column label="操作" min-width="150"> 49 + <el-table-column label="操作" min-width="200" fixed="right" align="center">
48 <template slot-scope="scope"> 50 <template slot-scope="scope">
49 - <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>  
50 - <el-button type="small" size="small" @click="handlEdit(scope.$index, scope.row)">修改</el-button> 51 + <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlEdit(scope.$index, scope.row)">修改</el-button>
  52 + <el-button type="danger" icon="el-icon-minus" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
51 </template> 53 </template>
52 </el-table-column> 54 </el-table-column>
53 </el-table> 55 </el-table>
@@ -63,8 +65,8 @@ @@ -63,8 +65,8 @@
63 :total="this.total"> 65 :total="this.total">
64 </el-pagination> 66 </el-pagination>
65 </div> 67 </div>
66 - <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">  
67 - <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm"> 68 + <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" width="50%">
  69 + <el-form :model="addForm" style="margin-top: -10px;" label-width="150px" align="center" :rules="addFormRules" ref="addForm">
68 <el-row> 70 <el-row>
69 <el-col :span="10"> 71 <el-col :span="10">
70 <el-row> 72 <el-row>
@@ -78,7 +80,7 @@ @@ -78,7 +80,7 @@
78 </el-form-item> 80 </el-form-item>
79 </el-row> 81 </el-row>
80 <el-row> 82 <el-row>
81 - <el-form-item label="运输公司名称" label-width="130px" prop="coCode"> 83 + <el-form-item label="运输公司名称" prop="coCode">
82 <el-input v-model="addForm.coCode" auto-complete="on" placeholder="运输公司名称"></el-input> 84 <el-input v-model="addForm.coCode" auto-complete="on" placeholder="运输公司名称"></el-input>
83 </el-form-item> 85 </el-form-item>
84 </el-row> 86 </el-row>
@@ -93,12 +95,12 @@ @@ -93,12 +95,12 @@
93 </el-form-item> 95 </el-form-item>
94 </el-row> 96 </el-row>
95 <el-row> 97 <el-row>
96 - <el-form-item label="车主联系电话" label-width="130px" prop="ownerInsideTel"> 98 + <el-form-item label="车主联系电话" prop="ownerInsideTel">
97 <el-input v-model="addForm.ownerInsideTel" auto-complete="on" placeholder="车主联系电话"></el-input> 99 <el-input v-model="addForm.ownerInsideTel" auto-complete="on" placeholder="车主联系电话"></el-input>
98 </el-form-item> 100 </el-form-item>
99 </el-row> 101 </el-row>
100 <el-row> 102 <el-row>
101 - <el-form-item label="行驶证有效期" label-width="130px" prop="veFactoryDate"> 103 + <el-form-item label="行驶证有效期" prop="veFactoryDate">
102 <el-date-picker 104 <el-date-picker
103 v-model="addForm.veFactoryDate" 105 v-model="addForm.veFactoryDate"
104 type="date" 106 type="date"
@@ -109,7 +111,7 @@ @@ -109,7 +111,7 @@
109 </el-col> 111 </el-col>
110 <el-col :span="10"> 112 <el-col :span="10">
111 <el-row> 113 <el-row>
112 - <el-form-item label="自重(空车重量)" label-width="140px" prop="selfWt"> 114 + <el-form-item label="自重(空车重量)" prop="selfWt">
113 <el-input v-model="addForm.selfWt" auto-complete="on" placeholder="自重(空车重量)"></el-input> 115 <el-input v-model="addForm.selfWt" auto-complete="on" placeholder="自重(空车重量)"></el-input>
114 </el-form-item> 116 </el-form-item>
115 </el-row> 117 </el-row>
@@ -129,12 +131,12 @@ @@ -129,12 +131,12 @@
129 </el-form-item> 131 </el-form-item>
130 </el-row> 132 </el-row>
131 <el-row> 133 <el-row>
132 - <el-form-item label="车辆备案编号" label-width="110px" prop="apprNo"> 134 + <el-form-item label="车辆备案编号" prop="apprNo">
133 <el-input v-model="addForm.apprNo" auto-complete="on" placeholder="车辆备案编号"></el-input> 135 <el-input v-model="addForm.apprNo" auto-complete="on" placeholder="车辆备案编号"></el-input>
134 </el-form-item> 136 </el-form-item>
135 </el-row> 137 </el-row>
136 <el-row> 138 <el-row>
137 - <el-form-item label="车辆属性" label-width="100px" prop="veClassFlag"> 139 + <el-form-item label="车辆属性" prop="veClassFlag">
138 <el-select v-model="addForm.veClassFlag" placeholder="请选择"> 140 <el-select v-model="addForm.veClassFlag" placeholder="请选择">
139 <el-option 141 <el-option
140 v-for="item in options" 142 v-for="item in options"
@@ -144,20 +146,20 @@ @@ -144,20 +146,20 @@
144 </el-option> 146 </el-option>
145 </el-select> 147 </el-select>
146 </el-form-item> 148 </el-form-item>
147 - <el-form-item label="备注" label-width="100px" prop="memo"> 149 + <el-form-item label="备注" prop="memo">
148 <el-input v-model="addForm.memo" auto-complete="on" placeholder="备注"></el-input> 150 <el-input v-model="addForm.memo" auto-complete="on" placeholder="备注"></el-input>
149 </el-form-item> 151 </el-form-item>
150 </el-row> 152 </el-row>
151 </el-col> 153 </el-col>
152 </el-row> 154 </el-row>
153 </el-form> 155 </el-form>
154 - <div slot="footer" class="dialog-footer">  
155 - <el-button type="primary" @click.native="addSubmit()">保存</el-button> 156 + <div slot="footer" class="dialog-footer" style="text-align: center">
  157 + <el-button type="primary" size="medium" style="width: 100px" @click.native="addSubmit()">保存</el-button>
156 </div> 158 </div>
157 </el-dialog> 159 </el-dialog>
158 160
159 - <el-dialog title="修改" :visible.sync="editFormVisible" :close-on-click-modal="false">  
160 - <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm"> 161 + <el-dialog title="修改" :visible.sync="editFormVisible" :close-on-click-modal="false" width="50%">
  162 + <el-form :model="editForm" style="margin-top: -10px;" label-width="150px" align="center" :rules="editFormRules" ref="editForm">
161 <el-row> 163 <el-row>
162 <el-col :span="10"> 164 <el-col :span="10">
163 <el-row> 165 <el-row>
@@ -171,7 +173,7 @@ @@ -171,7 +173,7 @@
171 </el-form-item> 173 </el-form-item>
172 </el-row> 174 </el-row>
173 <el-row> 175 <el-row>
174 - <el-form-item label="运输公司名称" label-width="130px" prop="coCode"> 176 + <el-form-item label="运输公司名称" prop="coCode">
175 <el-input v-model="editForm.coCode" auto-complete="on" placeholder="运输公司名称"></el-input> 177 <el-input v-model="editForm.coCode" auto-complete="on" placeholder="运输公司名称"></el-input>
176 </el-form-item> 178 </el-form-item>
177 </el-row> 179 </el-row>
@@ -186,12 +188,12 @@ @@ -186,12 +188,12 @@
186 </el-form-item> 188 </el-form-item>
187 </el-row> 189 </el-row>
188 <el-row> 190 <el-row>
189 - <el-form-item label="车主联系电话" label-width="130px" prop="ownerInsideTel"> 191 + <el-form-item label="车主联系电话" prop="ownerInsideTel">
190 <el-input v-model="editForm.ownerInsideTel" auto-complete="on" placeholder="车主联系电话"></el-input> 192 <el-input v-model="editForm.ownerInsideTel" auto-complete="on" placeholder="车主联系电话"></el-input>
191 </el-form-item> 193 </el-form-item>
192 </el-row> 194 </el-row>
193 <el-row> 195 <el-row>
194 - <el-form-item label="行驶证有效期" label-width="130px" prop="veFactoryDate"> 196 + <el-form-item label="行驶证有效期" prop="veFactoryDate">
195 <el-date-picker 197 <el-date-picker
196 v-model="editForm.veFactoryDate" 198 v-model="editForm.veFactoryDate"
197 type="date" 199 type="date"
@@ -202,7 +204,7 @@ @@ -202,7 +204,7 @@
202 </el-col> 204 </el-col>
203 <el-col :span="10"> 205 <el-col :span="10">
204 <el-row> 206 <el-row>
205 - <el-form-item label="自重(空车重量)" label-width="140px" prop="selfWt"> 207 + <el-form-item label="自重(空车重量)" prop="selfWt">
206 <el-input v-model="editForm.selfWt" auto-complete="on" placeholder="自重(空车重量)"></el-input> 208 <el-input v-model="editForm.selfWt" auto-complete="on" placeholder="自重(空车重量)"></el-input>
207 </el-form-item> 209 </el-form-item>
208 </el-row> 210 </el-row>
@@ -222,12 +224,12 @@ @@ -222,12 +224,12 @@
222 </el-form-item> 224 </el-form-item>
223 </el-row> 225 </el-row>
224 <el-row> 226 <el-row>
225 - <el-form-item label="车辆备案编号" label-width="110px" prop="apprNo"> 227 + <el-form-item label="车辆备案编号" prop="apprNo">
226 <el-input v-model="editForm.apprNo" auto-complete="on" placeholder="车辆备案编号"></el-input> 228 <el-input v-model="editForm.apprNo" auto-complete="on" placeholder="车辆备案编号"></el-input>
227 </el-form-item> 229 </el-form-item>
228 </el-row> 230 </el-row>
229 <el-row> 231 <el-row>
230 - <el-form-item label="车辆属性" label-width="100px" prop="veClassFlag"> 232 + <el-form-item label="车辆属性" prop="veClassFlag">
231 <el-select v-model="editForm.veClassFlag" placeholder="请选择"> 233 <el-select v-model="editForm.veClassFlag" placeholder="请选择">
232 <el-option 234 <el-option
233 v-for="item in options" 235 v-for="item in options"
@@ -237,15 +239,15 @@ @@ -237,15 +239,15 @@
237 </el-option> 239 </el-option>
238 </el-select> 240 </el-select>
239 </el-form-item> 241 </el-form-item>
240 - <el-form-item label="备注" label-width="100px" prop="memo"> 242 + <el-form-item label="备注" prop="memo">
241 <el-input v-model="editForm.memo" auto-complete="on" placeholder="备注"></el-input> 243 <el-input v-model="editForm.memo" auto-complete="on" placeholder="备注"></el-input>
242 </el-form-item> 244 </el-form-item>
243 </el-row> 245 </el-row>
244 </el-col> 246 </el-col>
245 </el-row> 247 </el-row>
246 </el-form> 248 </el-form>
247 - <div slot="footer" class="dialog-footer">  
248 - <el-button type="primary" @click.native="editSubmit()">保存</el-button> 249 + <div slot="footer" class="dialog-footer" style="text-align: center">
  250 + <el-button type="primary" size="medium" style="width: 100px"@click.native="editSubmit()">保存</el-button>
249 </div> 251 </div>
250 </el-dialog> 252 </el-dialog>
251 </section> 253 </section>
@@ -512,4 +514,4 @@ @@ -512,4 +514,4 @@
512 }, 514 },
513 515
514 } 516 }
515 -</script>  
  517 +</script>