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

@@ -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,68 +101,114 @@
     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: {
-            handleSizeChange(val) {
-                this.queryInfo.pageSize = val
-                this.getList()
+            handleAvatarSuccess(res, file) {
+                this.imageUrl = URL.createObjectURL(file.raw);
             },
             },
-            handleCurrentChange(val) {
-                this.queryInfo.pageNum = val
-                this.getList()
-            },
-            getList() {
-                const _this = this
-                selectList(this.queryInfo).then((response) => {
-                    const res = response.data
-                    console.log(response.data)
-                    if (res.code !== '200') {
-                        return _this.$message.error('获取消息收发记录，失败！')
-                    }
-                    // 获取列表数据
-                    _this.tableData = res.data.list;
-                    // 获取列表的总记录数
-                    _this.total = res.data.total
-                    _this.$message.success('获取消息收发记录，成功！')
-                }).catch(error => {
-                    // 关闭加载
-                    _this.$message.error(error.toString())
-                })
+            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;
             },
             },
-            // 结束出勤
-            applyEnd(row) {
-                // 弹框询问是否结束？
-                this.$confirm('是否继续?', '警告', {
-                        confirmButtonText: '确定结束',
-                        cancelButtonText: '取消',
-                        type: 'warning'
-                    }
-                ).then(() => {
-                    DoneTask(row).then((response) => {
+                handleSizeChange(val) {
+                    this.queryInfo.pageSize = val
+                    this.getList()
+                },
+                handleCurrentChange(val) {
+                    this.queryInfo.pageNum = val
+                    this.getList()
+                },
+                getList() {
+                    const _this = this
+                    selectList(this.queryInfo).then((response) => {
                         const res = response.data
                         const res = response.data
-                        this.$message.success(res.msg)
-                        this.getList()
+                        console.log(response.data)
+                        if (res.code !== '200') {
+                            return _this.$message.error('获取消息收发记录，失败！')
+                        }
+                        // 获取列表数据
+                        _this.tableData = res.data.list;
+                        // 获取列表的总记录数
+                        _this.total = res.data.total
+                        _this.$message.success('获取消息收发记录，成功！')
                     }).catch(error => {
                     }).catch(error => {
-                        this.$message.error(error)
+                        // 关闭加载
+                        _this.$message.error(error.toString())
                     })
                     })
-                }).catch(() => {
-                })
+                },
+                // 结束出勤
+                applyEnd(row) {
+                    // 弹框询问是否结束？
+                    this.$confirm('是否继续?', '警告', {
+                            confirmButtonText: '确定结束',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }
+                    ).then(() => {
+                        DoneTask(row).then((response) => {
+                            const res = response.data
+                            this.$message.success(res.msg)
+                            this.getList()
+                        }).catch(error => {
+                            this.$message.error(error)
+                        })
+                    }).catch(() => {
+                    })
+                },
             },
             },
-        },
+
         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>