正在显示
2 个修改的文件
包含
66 行增加
和
3 行删除
@@ -23,6 +23,7 @@ export const updateTrailer = params =>{return http.put(`${baseUrl}/trailer/updat | @@ -23,6 +23,7 @@ export const updateTrailer = params =>{return http.put(`${baseUrl}/trailer/updat | ||
23 | export const deleteTrailer = params =>{return http.del(`${baseUrl}/trailer/delete`, params);}; | 23 | export const deleteTrailer = params =>{return http.del(`${baseUrl}/trailer/delete`, params);}; |
24 | // 挂车信息,批量删除 | 24 | // 挂车信息,批量删除 |
25 | export const batchRemoveTrailer = params =>{return http.del(`${baseUrl}/trailer/batchRemove`, params);}; | 25 | export const batchRemoveTrailer = params =>{return http.del(`${baseUrl}/trailer/batchRemove`, params);}; |
26 | +export const uploadFileImage = params =>{return http.post(`${baseUrl}/trailer/upload`,params)} | ||
26 | 27 | ||
27 | // 企业信息,分页查询 | 28 | // 企业信息,分页查询 |
28 | export const selectCorporationList = params =>{return http.get(`${baseUrl}/corporation/page`, params);}; | 29 | export const selectCorporationList = params =>{return http.get(`${baseUrl}/corporation/page`, params);}; |
@@ -134,11 +134,23 @@ | @@ -134,11 +134,23 @@ | ||
134 | placeholder="请输入数据操作类型"> | 134 | placeholder="请输入数据操作类型"> |
135 | </el-input> | 135 | </el-input> |
136 | </el-form-item> | 136 | </el-form-item> |
137 | - | ||
138 | <el-form-item label="挂车牌号图片:" prop="trailerLicenseNoPic"> | 137 | <el-form-item label="挂车牌号图片:" prop="trailerLicenseNoPic"> |
138 | + <img v-if="!trailer_config.progressFlag" style="width: 100px;height: 100px" :src="trailer_config.imageUrl"/> | ||
139 | 139 | ||
140 | + <el-upload | ||
141 | + style="display: inline; margin-left: 10px;margin-right: 10px;" | ||
142 | + action="" | ||
143 | + :show-file-list="true" | ||
144 | + :http-request="uploadFile" | ||
145 | + :limit=1 | ||
146 | + :on-preview="handPreView" | ||
147 | + :on-exceed="fileExceed" | ||
148 | + accept="image/jpeg,image/jpg,image/png" | ||
149 | + ref="fileupload"> | ||
150 | + <el-button slot="trigger" size="small" type="primary">上传图片</el-button> | ||
151 | + <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> | ||
152 | + </el-upload> | ||
140 | </el-form-item> | 153 | </el-form-item> |
141 | - | ||
142 | </el-form> | 154 | </el-form> |
143 | <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px"> | 155 | <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px"> |
144 | <el-button type="info" @click="trailer_dialog.addDialog = false" size="medium" | 156 | <el-button type="info" @click="trailer_dialog.addDialog = false" size="medium" |
@@ -184,13 +196,20 @@ | @@ -184,13 +196,20 @@ | ||
184 | insertTrailer, | 196 | insertTrailer, |
185 | updateTrailer, | 197 | updateTrailer, |
186 | deleteTrailer, | 198 | deleteTrailer, |
187 | - batchRemoveTrailer, | 199 | + batchRemoveTrailer, uploadFileImage |
188 | } from "../../api/vehicle_dispatch"; | 200 | } from "../../api/vehicle_dispatch"; |
201 | + import {Message} from "element-ui"; | ||
189 | 202 | ||
190 | export default { | 203 | export default { |
191 | name: "Trailer", | 204 | name: "Trailer", |
192 | data() { | 205 | data() { |
193 | return { | 206 | return { |
207 | + trailerUpload: '', | ||
208 | + trailer_config: { | ||
209 | + progressFlag: true, | ||
210 | + imageUrl: '', | ||
211 | + }, | ||
212 | + | ||
194 | /** | 213 | /** |
195 | * 搜索参数 | 214 | * 搜索参数 |
196 | */ | 215 | */ |
@@ -467,7 +486,27 @@ | @@ -467,7 +486,27 @@ | ||
467 | }).catch(() => { | 486 | }).catch(() => { |
468 | }); | 487 | }); |
469 | }, | 488 | }, |
489 | + // 自定义上传 | ||
490 | + uploadFile(item) { | ||
491 | + const form = new FormData() | ||
492 | + form.append('file', item.file) | ||
493 | + uploadFileImage(form).then(response => { | ||
494 | + let res = response.data; | ||
495 | + if (res.code !== '200') { | ||
496 | + this.$message.error(res.msg) | ||
497 | + } | ||
498 | + this.$message.success(res.msg); | ||
499 | + item.onSuccess() | ||
500 | + this.trailer_config.progressFlag = false; | ||
501 | + this.trailer_config.imageUrl = res.data; | ||
502 | + }) | ||
503 | + }, | ||
504 | + fileExceed() { | ||
505 | + this.$message.error('别贪心!一次只能上传一个哦~'); | ||
506 | + }, | ||
507 | + handPreView(file) { | ||
470 | 508 | ||
509 | + } | ||
471 | }, | 510 | }, |
472 | created() { | 511 | created() { |
473 | 512 | ||
@@ -479,5 +518,28 @@ | @@ -479,5 +518,28 @@ | ||
479 | </script> | 518 | </script> |
480 | 519 | ||
481 | <style scoped> | 520 | <style scoped> |
521 | + .avatar-uploader .avatar-uploader-icon { | ||
522 | + border: 1px dashed #d9d9d9; | ||
523 | + border-radius: 6px; | ||
524 | + cursor: pointer; | ||
525 | + position: relative; | ||
526 | + overflow: hidden; | ||
527 | + | ||
528 | + font-size: 28px; | ||
529 | + color: #8c939d; | ||
530 | + width: 178px; | ||
531 | + height: 178px; | ||
532 | + line-height: 178px; | ||
533 | + text-align: center; | ||
534 | + } | ||
535 | + | ||
536 | + .avatar-uploader .avatar-uploader-icon:hover { | ||
537 | + border-color: #409EFF; | ||
538 | + } | ||
482 | 539 | ||
540 | + .avatar-uploader img { | ||
541 | + width: 178px; | ||
542 | + height: 178px; | ||
543 | + display: block; | ||
544 | + } | ||
483 | </style> | 545 | </style> |
-
请 注册 或 登录 后发表评论