Merge remote-tracking branch 'origin/master_dev' into master_dev
正在显示
1 个修改的文件
包含
76 行增加
和
4 行删除
| @@ -47,9 +47,10 @@ | @@ -47,9 +47,10 @@ | ||
| 47 | <el-table-column | 47 | <el-table-column |
| 48 | fixed="right" | 48 | fixed="right" |
| 49 | label="操作" | 49 | label="操作" |
| 50 | - width="120"> | 50 | + width="220"> |
| 51 | <template slot-scope="scope"> | 51 | <template slot-scope="scope"> |
| 52 | <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button> | 52 | <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button> |
| 53 | + <el-button type="success" @click="centerDialogVisible = true">图片上传</el-button> | ||
| 53 | </template> | 54 | </template> |
| 54 | </el-table-column> | 55 | </el-table-column> |
| 55 | </el-table> | 56 | </el-table> |
| @@ -65,6 +66,31 @@ | @@ -65,6 +66,31 @@ | ||
| 65 | :total="total"> | 66 | :total="total"> |
| 66 | </el-pagination> | 67 | </el-pagination> |
| 67 | </el-row> | 68 | </el-row> |
| 69 | + | ||
| 70 | + <el-dialog | ||
| 71 | + title="提示" | ||
| 72 | + :visible.sync="centerDialogVisible" | ||
| 73 | + width="30%" | ||
| 74 | + center> | ||
| 75 | + <div> | ||
| 76 | + <el-upload | ||
| 77 | + class="avatar-uploader" | ||
| 78 | + action="https://jsonplaceholder.typicode.com/posts/" | ||
| 79 | + :show-file-list="false" | ||
| 80 | + :on-success="handleAvatarSuccess" | ||
| 81 | + :before-upload="beforeAvatarUpload"> | ||
| 82 | + <img v-if="imageUrl" :src="imageUrl" class="avatar"> | ||
| 83 | + <i v-else class="el-icon-plus avatar-uploader-icon"></i> | ||
| 84 | + </el-upload> | ||
| 85 | + <el-input v-model="description" placeholder="请输入图片描述"></el-input> | ||
| 86 | + </div> | ||
| 87 | + | ||
| 88 | + | ||
| 89 | + <span slot="footer" class="dialog-footer"> | ||
| 90 | + <el-button @click="centerDialogVisible = false">取 消</el-button> | ||
| 91 | + <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> | ||
| 92 | + </span> | ||
| 93 | + </el-dialog> | ||
| 68 | </el-card> | 94 | </el-card> |
| 69 | </el-row> | 95 | </el-row> |
| 70 | </template> | 96 | </template> |
| @@ -75,18 +101,39 @@ | @@ -75,18 +101,39 @@ | ||
| 75 | export default { | 101 | export default { |
| 76 | data() { | 102 | data() { |
| 77 | return { | 103 | return { |
| 104 | + centerDialogVisible: false, | ||
| 78 | queryInfo: { | 105 | queryInfo: { |
| 79 | - lisenceNo:'', | 106 | + lisenceNo: '', |
| 80 | // 当前页数 | 107 | // 当前页数 |
| 81 | pageNum: 1, | 108 | pageNum: 1, |
| 82 | // 每页几条数据 | 109 | // 每页几条数据 |
| 83 | pageSize: 10, | 110 | pageSize: 10, |
| 84 | }, | 111 | }, |
| 85 | total: 0, | 112 | total: 0, |
| 86 | - tableData:[], | 113 | + tableData: [], |
| 114 | + formInline: { | ||
| 115 | + user: '', | ||
| 116 | + }, | ||
| 117 | + imageUrl: '', | ||
| 118 | + description:'' | ||
| 87 | } | 119 | } |
| 88 | }, | 120 | }, |
| 89 | methods: { | 121 | methods: { |
| 122 | + handleAvatarSuccess(res, file) { | ||
| 123 | + this.imageUrl = URL.createObjectURL(file.raw); | ||
| 124 | + }, | ||
| 125 | + beforeAvatarUpload(file) { | ||
| 126 | + const isJPG = file.type === 'image/jpeg'; | ||
| 127 | + const isLt2M = file.size / 1024 / 1024 < 2; | ||
| 128 | + | ||
| 129 | + if (!isJPG) { | ||
| 130 | + this.$message.error('上传头像图片只能是 JPG 格式!'); | ||
| 131 | + } | ||
| 132 | + if (!isLt2M) { | ||
| 133 | + this.$message.error('上传头像图片大小不能超过 2MB!'); | ||
| 134 | + } | ||
| 135 | + return isJPG && isLt2M; | ||
| 136 | + }, | ||
| 90 | handleSizeChange(val) { | 137 | handleSizeChange(val) { |
| 91 | this.queryInfo.pageSize = val | 138 | this.queryInfo.pageSize = val |
| 92 | this.getList() | 139 | this.getList() |
| @@ -133,10 +180,35 @@ | @@ -133,10 +180,35 @@ | ||
| 133 | }) | 180 | }) |
| 134 | }, | 181 | }, |
| 135 | }, | 182 | }, |
| 183 | + | ||
| 136 | mounted() { | 184 | mounted() { |
| 137 | this.getList(); | 185 | this.getList(); |
| 138 | } | 186 | } |
| 139 | 187 | ||
| 140 | } | 188 | } |
| 141 | </script> | 189 | </script> |
| 142 | - | 190 | +<style> |
| 191 | + .avatar-uploader .el-upload { | ||
| 192 | + border: 1px dashed #d9d9d9; | ||
| 193 | + border-radius: 6px; | ||
| 194 | + cursor: pointer; | ||
| 195 | + position: relative; | ||
| 196 | + overflow: hidden; | ||
| 197 | + } | ||
| 198 | + .avatar-uploader .el-upload:hover { | ||
| 199 | + border-color: #409EFF; | ||
| 200 | + } | ||
| 201 | + .avatar-uploader-icon { | ||
| 202 | + font-size: 28px; | ||
| 203 | + color: #8c939d; | ||
| 204 | + width: 178px; | ||
| 205 | + height: 178px; | ||
| 206 | + line-height: 178px; | ||
| 207 | + text-align: center; | ||
| 208 | + } | ||
| 209 | + .avatar { | ||
| 210 | + width: 178px; | ||
| 211 | + height: 178px; | ||
| 212 | + display: block; | ||
| 213 | + } | ||
| 214 | +</style> |
-
请 注册 或 登录 后发表评论