| 提交 | 用户 | age | ||
| 037956 | 1 | // 设备管理 |
| L | 2 | <template> |
| 3 | <div class="app-container"> | |
| 4 | <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ --> | |
| 5 | <el-row :gutter="10" class="mb8"> | |
| 6 | <el-col :span="1.5"> | |
| 7 | <el-button | |
| 8 | v-if="getAuthValueFN('banner_add')" | |
| 9 | type="primary" | |
| 10 | icon="el-icon-plus" | |
| 11 | size="mini" | |
| 12 | @click="showDialog('add')" | |
| 13 | >新增</el-button> | |
| 14 | </el-col> | |
| 15 | </el-row> | |
| 16 | <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ --> | |
| 17 | ||
| 18 | <el-table :data="list"> | |
| 19 | <el-table-column type="index" label="序号" align="center" width="60" /> | |
| 20 | <el-table-column label="图片" prop="imgUrl" align="center" min-width="120"> | |
| 21 | <template slot-scope="scope"> | |
| 22 | <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" /> | |
| 23 | </template> | |
| 24 | </el-table-column> | |
| 25 | <el-table-column prop="orderNum" label="排序号" align="center" min-width="120" /> | |
| 26 | <el-table-column prop="createTime" label="创建时间" align="center" /> | |
| 27 | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100"> | |
| 28 | <template slot-scope="scope"> | |
| 29 | <el-button | |
| 30 | v-if="getAuthValueFN('banner_edit')" | |
| 31 | size="mini" | |
| 32 | type="text" | |
| 33 | icon="el-icon-edit" | |
| 34 | @click="handleEdit(scope.row)" | |
| 35 | >编辑</el-button> | |
| 36 | <el-button | |
| 37 | v-if="getAuthValueFN('banner_del')" | |
| 38 | size="mini" | |
| 39 | type="text warn" | |
| 40 | icon="el-icon-delete" | |
| 41 | @click="handleDelete(scope.row)" | |
| 42 | >删除</el-button> | |
| 43 | </template> | |
| 44 | </el-table-column> | |
| 45 | </el-table> | |
| 46 | ||
| 47 | <pagination | |
| 48 | v-show="total>0" | |
| 49 | :total="total" | |
| 50 | :page.sync="pageNum" | |
| 51 | :limit.sync="pageSize" | |
| 52 | @pagination="getList" | |
| 53 | /> | |
| 54 | ||
| 55 | <!-- 新增&编辑 --> | |
| 56 | <el-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog"> | |
| 57 | <el-form :ref="formName" :model="dialogData" label-width="100px" :rules="rules" size="small"> | |
| 58 | <el-form-item label="排序号" prop="orderNum"> | |
| 59 | <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" /> | |
| 60 | </el-form-item> | |
| 61 | <el-form-item ref="uploadFormItem" label="轮播图" prop="uploadImgs"> | |
| 62 | <!-- 上传图片组件(单图) --> | |
| 63 | <el-upload | |
| 64 | ref="refUploadImg" | |
| 65 | accept="image/jpeg,image/jpg,image/gif,image/png" | |
| 66 | :auto-upload="false" | |
| 67 | list-type="picture-card" | |
| 68 | :class="{disabled:uploadDisabled}" | |
| 69 | action="#" | |
| 70 | :limit="1" | |
| 71 | :file-list="dialogData.uploadImgs" | |
| 72 | :on-change="addUploadImg" | |
| 73 | :on-remove="delUploadImg" | |
| 74 | :http-request="uploadImg" | |
| 75 | :on-preview="uploadPreview" | |
| 76 | :before-upload="beforeUploadImg" | |
| 77 | > | |
| 78 | <i class="el-icon-plus" /> | |
| 79 | </el-upload> | |
| 80 | </el-form-item> | |
| 81 | </el-form> | |
| 82 | <div slot="footer" class="dialog-footer"> | |
| 83 | <el-button @click="hideDialog">取消</el-button> | |
| 84 | <el-button type="primary" @click="handleSave(dialogData.type)">确定</el-button> | |
| 85 | </div> | |
| 86 | </el-dialog> | |
| 87 | ||
| 88 | <!-- upload放大图片 --> | |
| 89 | <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center"> | |
| 90 | <img style="max-width:100%" :src="uploadPreviewUrl" alt=""> | |
| 91 | </el-dialog> | |
| 92 | </div> | |
| 93 | </template> | |
| 94 | ||
| 95 | <script> | |
| 96 | ||
| 97 | import mixin_Upload from '@/mixins/upload.js' | |
| 98 | ||
| 99 | export default { | |
| 100 | name: 'Equipment', | |
| 101 | mixins: [mixin_Upload], | |
| 102 | data() { | |
| 103 | return { | |
| 104 | list: [], // 设备列表 | |
| 105 | ||
| 106 | // 分页 ↓↓↓↓↓↓↓↓↓↓ | |
| 107 | total: 0, | |
| 108 | pageNum: 1, | |
| 109 | pageSize: 20, | |
| 110 | // 分页 ↑↑↑↑↑↑↑↑↑↑ | |
| 111 | ||
| 112 | // 显示弹窗 | |
| 113 | isShowDialog: false, | |
| 114 | ||
| 115 | // 表单校验 | |
| 116 | rules: { | |
| 117 | orderNum: [ | |
| 118 | { required: true, message: '排序号不能为空', trigger: 'change' } | |
| 119 | ], | |
| 120 | uploadImgs: [ | |
| 121 | { required: true, message: '请选择轮播图片', trigger: 'change' } | |
| 122 | ] | |
| 123 | }, | |
| 124 | ||
| 125 | // 表单名称 | |
| 126 | formName: 'dialogForm', | |
| 127 | // 弹窗表单 | |
| 128 | dialogData: { | |
| 129 | // 上传图片 | |
| 130 | uploadImgs: [] | |
| 131 | } | |
| 132 | ||
| 133 | } | |
| 134 | }, | |
| 135 | computed: { | |
| 136 | // 上传禁用 | |
| 137 | uploadDisabled() { | |
| 138 | return this.dialogData.uploadImgs.length > 0 | |
| 139 | } | |
| 140 | }, | |
| 141 | mounted() { | |
| 142 | this.init() | |
| 143 | }, | |
| 144 | methods: { | |
| 145 | // 初始化 | |
| 146 | init() { | |
| 147 | // this.id = this.$route.query.id || '' | |
| 148 | this.getList() | |
| 149 | }, | |
| 150 | ||
| 151 | // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ | |
| 152 | // 上传前确认格式 | |
| 153 | beforeUploadImg(file) { | |
| 154 | const isImg = file.type.indexOf('image/') > -1 | |
| 155 | if (!isImg) { | |
| 156 | this.$message.error('必须是选择图片文件') | |
| 157 | } | |
| 158 | return isImg | |
| 159 | }, | |
| 160 | // 增加图片 | |
| 161 | addUploadImg(file, fileList) { | |
| 162 | this.$refs.uploadFormItem.resetField() | |
| 163 | this.dialogData.uploadImgs = fileList | |
| 164 | }, | |
| 165 | // 删除图片 | |
| 166 | delUploadImg(file, fileList) { | |
| 167 | this.dialogData.uploadImgs = fileList | |
| 168 | }, | |
| 169 | // 执行上传商品图 | |
| 170 | runUploadImg(suc_cb) { | |
| 171 | if (this.checkNeedUpload(this.dialogData.uploadImgs)) { | |
| 172 | this.$refs.refUploadImg.submit() | |
| 173 | } else { | |
| 174 | suc_cb && suc_cb() | |
| 175 | } | |
| 176 | }, | |
| 177 | // 上传商品图 | |
| 178 | uploadImg(res) { | |
| 179 | console.log(res) | |
| 180 | const file = res.file | |
| 181 | const formData = new FormData() | |
| 182 | formData.append('file', file) | |
| 183 | console.log(formData) | |
| 184 | this.postFN({ | |
| 185 | url: 'admin/image/upload', | |
| 186 | header: { 'Content-Type': 'multipart/form-data' }, | |
| 187 | params: formData, | |
| 188 | mockData: { | |
| 189 | code: 100, | |
| 190 | msg: '', | |
| 191 | data: { | |
| 192 | imgUrl: 'xxxx' | |
| 193 | } | |
| 194 | } | |
| 195 | }, (inf) => { | |
| 196 | console.log('上传图片成功') | |
| 197 | ||
| 198 | // 替换掉未上传的图片 | |
| 199 | this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' } | |
| 200 | this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs)) | |
| 201 | this.$set(this.dialogData, 'imgUrl', inf.imgUrl) | |
| 202 | ||
| 203 | console.log('上传图片结束') | |
| 204 | ||
| 205 | // 提交 | |
| 206 | this.submit(this.dialogData.type) | |
| 207 | }) | |
| 208 | }, | |
| 209 | // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ | |
| 210 | ||
| 211 | // 获取列表 | |
| 212 | getList() { | |
| 213 | var { pageNum, pageSize } = this | |
| 214 | const params = { | |
| 215 | pageNum: pageNum, | |
| 216 | pageSize: pageSize | |
| 217 | } | |
| 218 | ||
| 219 | this.postFN({ | |
| 220 | url: 'admin/banner/list', | |
| 221 | params: params, | |
| 222 | mockData: { | |
| 223 | code: 100, | |
| 224 | msg: '', | |
| 225 | data: { | |
| 226 | list: [{ | |
| 227 | 'imgUrl': 'https://profile.csdnimg.cn/0/1/7/3_weixin_38373875', | |
| 228 | 'jumpUrl': '123', | |
| 229 | 'jumpType': 0, | |
| 230 | 'orderNum': 1, | |
| 231 | 'createTime': '2020-02-02 02:00:00' | |
| 232 | }], | |
| 233 | total: 100 | |
| 234 | } | |
| 235 | } | |
| 236 | }, (inf) => { | |
| 237 | this.list = inf.list || [] | |
| 238 | this.total = inf.total | |
| 239 | }) | |
| 240 | }, | |
| 241 | // 重新获取列表 | |
| 242 | reGetList() { | |
| 243 | this.pageNum = 1 | |
| 244 | this.getList() | |
| 245 | }, | |
| 246 | // 删除 | |
| 247 | handleDelete(item) { | |
| 248 | // 打开二次确认弹窗 | |
| 249 | this.$confirm('是否确认删除该轮播图?', '提示', { | |
| 250 | confirmButtonText: '确定', | |
| 251 | cancelButtonText: '取消', | |
| 252 | type: 'warning' | |
| 253 | }).then(() => { | |
| 254 | // 确定回调 | |
| 255 | this.postFN({ | |
| 256 | url: 'admin/banner/del', | |
| 257 | params: { | |
| 258 | id: item.id | |
| 259 | }, | |
| 260 | mockData: { | |
| 261 | code: 100, | |
| 262 | msg: '', | |
| 263 | data: {} | |
| 264 | } | |
| 265 | }, () => { | |
| 266 | this.getList() | |
| 267 | this.$messageSuc('删除成功') | |
| 268 | }) | |
| 269 | }).catch(() => {}) | |
| 270 | }, | |
| 271 | // 编辑 | |
| 272 | handleEdit(item) { | |
| 273 | this.showDialog('edit', item) | |
| 274 | }, | |
| 275 | // 显示弹框 | |
| 276 | showDialog(type, item) { | |
| 277 | let dialogData = {} | |
| 278 | ||
| 279 | this.isShowDialog = true | |
| 280 | this.$nextTick(() => { | |
| 281 | if (type === 'add') { | |
| 282 | dialogData = { | |
| 283 | type: 'add', | |
| 284 | orderNum: 1, | |
| 285 | uploadImgs: [] | |
| 286 | } | |
| 287 | } else { | |
| 288 | dialogData = { | |
| 289 | type: 'edit', | |
| 290 | ...item | |
| 291 | } | |
| 292 | dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }] | |
| 293 | } | |
| 294 | this.dialogData = dialogData | |
| 295 | this.$refs[this.formName].resetFields() | |
| 296 | }) | |
| 297 | }, | |
| 298 | // 隐藏弹框 | |
| 299 | hideDialog() { | |
| 300 | this.$refs[this.formName].resetFields() | |
| 301 | this.isShowDialog = false | |
| 302 | }, | |
| 303 | // 提交 | |
| 304 | handleSave(type) { | |
| 305 | // 验证 | |
| 306 | this.$refs[this.formName].validate((valid) => { | |
| 307 | if (valid) { | |
| 308 | // 上传图片 | |
| 309 | this.runUploadImg(() => { | |
| 310 | this.submit(type) | |
| 311 | }) | |
| 312 | } | |
| 313 | }) | |
| 314 | }, | |
| 315 | submit(type) { | |
| 316 | const url = type === 'add' ? 'admin/banner/add' : 'admin/banner/edit' | |
| 317 | const dialogData = this.dialogData | |
| 318 | const params = { | |
| 319 | orderNum: dialogData.orderNum, | |
| 320 | imgUrl: dialogData.imgUrl | |
| 321 | } | |
| 322 | if (dialogData.type === 'edit') { | |
| 323 | params.id = dialogData.id | |
| 324 | } | |
| 325 | this.postFN({ | |
| 326 | url, | |
| 327 | params, | |
| 328 | mockData: { | |
| 329 | code: 100, data: { | |
| 330 | ||
| 331 | } | |
| 332 | } | |
| 333 | }, inf => { | |
| 334 | this.$messageSuc('保存成功') | |
| 335 | this.hideDialog() | |
| 336 | this.getList() | |
| 337 | }) | |
| 338 | } | |
| 339 | } | |
| 340 | } | |
| 341 | </script> | |
| 342 | ||
| 343 | <style lang="scss" scoped> | |
| 344 | ||
| 345 | </style> | |
