出勤车辆新增上传图片功能（未完善）

@@ -47,9 +47,10 @@
                         <el-table-column
                         <el-table-column
                                 fixed="right"
                                 fixed="right"
                                 label="操作"
                                 label="操作"
-                                width="120">
+                                width="220">
                             <template slot-scope="scope">
                             <template slot-scope="scope">
                                 <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button>
                                 <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button>
+                                <el-button type="success"  @click="centerDialogVisible = true">图片上传</el-button>
                             </template>
                             </template>
                         </el-table-column>
                         </el-table-column>
                     </el-table>
                     </el-table>
@@ -65,6 +66,31 @@
                         :total="total">
                         :total="total">
                 </el-pagination>
                 </el-pagination>
             </el-row>
             </el-row>
+
+            <el-dialog
+                    title="提示"
+                    :visible.sync="centerDialogVisible"
+                    width="30%"
+                    center>
+                <div>
+                    <el-upload
+                            class="avatar-uploader"
+                            action="https://jsonplaceholder.typicode.com/posts/"
+                            :show-file-list="false"
+                            :on-success="handleAvatarSuccess"
+                            :before-upload="beforeAvatarUpload">
+                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                    <el-input v-model="description" placeholder="请输入图片描述"></el-input>
+                </div>
+
+
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="centerDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+                </span>
+            </el-dialog>
         </el-card>
         </el-card>
     </el-row>
     </el-row>
 </template>
 </template>
@@ -75,18 +101,39 @@
     export default {
     export default {
         data() {
         data() {
             return {
             return {
+                centerDialogVisible: false,
                 queryInfo: {
                 queryInfo: {
-                    lisenceNo:'',
+                    lisenceNo: '',
                     // 当前页数
                     // 当前页数
                     pageNum: 1,
                     pageNum: 1,
                     // 每页几条数据
                     // 每页几条数据
                     pageSize: 10,
                     pageSize: 10,
                 },
                 },
                 total: 0,
                 total: 0,
-                tableData:[],
+                tableData: [],
+                formInline: {
+                    user: '',
+                },
+                imageUrl: '',
+                description:''
             }
             }
         },
         },
         methods: {
         methods: {
+            handleAvatarSuccess(res, file) {
+                this.imageUrl = URL.createObjectURL(file.raw);
+            },
+            beforeAvatarUpload(file) {
+                const isJPG = file.type === 'image/jpeg';
+                const isLt2M = file.size / 1024 / 1024 < 2;
+
+                if (!isJPG) {
+                    this.$message.error('上传头像图片只能是 JPG 格式!');
+                }
+                if (!isLt2M) {
+                    this.$message.error('上传头像图片大小不能超过 2MB!');
+                }
+                return isJPG && isLt2M;
+            },
                 handleSizeChange(val) {
                 handleSizeChange(val) {
                     this.queryInfo.pageSize = val
                     this.queryInfo.pageSize = val
                     this.getList()
                     this.getList()
@@ -133,10 +180,35 @@
                     })
                     })
                 },
                 },
             },
             },
+
         mounted() {
         mounted() {
             this.getList();
             this.getList();
         }
         }
 
 
     }
     }
 </script>
 </script>
-
+<style>
+    .avatar-uploader .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+        border-color: #409EFF;
+    }
+    .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+</style>