朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 dbee94b469cad538f14952d85af80c2a6f318d53 2 个父辈 a0064a7b 5484016c

Merge remote-tracking branch 'origin/master_dev' into master_dev

内嵌 并排对比
正在显示 1 个修改的文件 包含 116 行增加 和 44 行删除
@@ -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,68 +101,114 @@ @@ -75,68 +101,114 @@
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: {
90 - handleSizeChange(val) {  
91 - this.queryInfo.pageSize = val  
92 - this.getList() 122 + handleAvatarSuccess(res, file) {
  123 + this.imageUrl = URL.createObjectURL(file.raw);
93 }, 124 },
94 - handleCurrentChange(val) {  
95 - this.queryInfo.pageNum = val  
96 - this.getList()  
97 - },  
98 - getList() {  
99 - const _this = this  
100 - selectList(this.queryInfo).then((response) => {  
101 - const res = response.data  
102 - console.log(response.data)  
103 - if (res.code !== '200') {  
104 - return _this.$message.error('获取消息收发记录，失败！')  
105 - }  
106 - // 获取列表数据  
107 - _this.tableData = res.data.list;  
108 - // 获取列表的总记录数  
109 - _this.total = res.data.total  
110 - _this.$message.success('获取消息收发记录，成功！')  
111 - }).catch(error => {  
112 - // 关闭加载  
113 - _this.$message.error(error.toString())  
114 - }) 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;
115 }, 136 },
116 - // 结束出勤  
117 - applyEnd(row) {  
118 - // 弹框询问是否结束？  
119 - this.$confirm('是否继续?', '警告', {  
120 - confirmButtonText: '确定结束',  
121 - cancelButtonText: '取消',  
122 - type: 'warning'  
123 - }  
124 - ).then(() => {  
125 - DoneTask(row).then((response) => { 137 + handleSizeChange(val) {
  138 + this.queryInfo.pageSize = val
  139 + this.getList()
  140 + },
  141 + handleCurrentChange(val) {
  142 + this.queryInfo.pageNum = val
  143 + this.getList()
  144 + },
  145 + getList() {
  146 + const _this = this
  147 + selectList(this.queryInfo).then((response) => {
126 const res = response.data 148 const res = response.data
127 - this.$message.success(res.msg)  
128 - this.getList() 149 + console.log(response.data)
  150 + if (res.code !== '200') {
  151 + return _this.$message.error('获取消息收发记录，失败！')
  152 + }
  153 + // 获取列表数据
  154 + _this.tableData = res.data.list;
  155 + // 获取列表的总记录数
  156 + _this.total = res.data.total
  157 + _this.$message.success('获取消息收发记录，成功！')
129 }).catch(error => { 158 }).catch(error => {
130 - this.$message.error(error) 159 + // 关闭加载
  160 + _this.$message.error(error.toString())
131 }) 161 })
132 - }).catch(() => {  
133 - }) 162 + },
  163 + // 结束出勤
  164 + applyEnd(row) {
  165 + // 弹框询问是否结束？
  166 + this.$confirm('是否继续?', '警告', {
  167 + confirmButtonText: '确定结束',
  168 + cancelButtonText: '取消',
  169 + type: 'warning'
  170 + }
  171 + ).then(() => {
  172 + DoneTask(row).then((response) => {
  173 + const res = response.data
  174 + this.$message.success(res.msg)
  175 + this.getList()
  176 + }).catch(error => {
  177 + this.$message.error(error)
  178 + })
  179 + }).catch(() => {
  180 + })
  181 + },
134 }, 182 },
135 - }, 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>