New file |
| | |
| | | // 设备管理 |
| | | <template> |
| | | <div class="app-container"> |
| | | <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ --> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | v-if="getAuthValueFN('banner_add')" |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | @click="showDialog('add')" |
| | | >新增</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ --> |
| | | |
| | | <el-table :data="list"> |
| | | <el-table-column type="index" label="序号" align="center" width="60" /> |
| | | <el-table-column label="图片" prop="imgUrl" align="center" min-width="120"> |
| | | <template slot-scope="scope"> |
| | | <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="orderNum" label="排序号" align="center" min-width="120" /> |
| | | <el-table-column prop="createTime" label="创建时间" align="center" /> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | v-if="getAuthValueFN('banner_edit')" |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleEdit(scope.row)" |
| | | >编辑</el-button> |
| | | <el-button |
| | | v-if="getAuthValueFN('banner_del')" |
| | | size="mini" |
| | | type="text warn" |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total>0" |
| | | :total="total" |
| | | :page.sync="pageNum" |
| | | :limit.sync="pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <!-- 新增&编辑 --> |
| | | <el-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog"> |
| | | <el-form :ref="formName" :model="dialogData" label-width="100px" :rules="rules" size="small"> |
| | | <el-form-item label="排序号" prop="orderNum"> |
| | | <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" /> |
| | | </el-form-item> |
| | | <el-form-item ref="uploadFormItem" label="轮播图" prop="uploadImgs"> |
| | | <!-- 上传图片组件(单图) --> |
| | | <el-upload |
| | | ref="refUploadImg" |
| | | accept="image/jpeg,image/jpg,image/gif,image/png" |
| | | :auto-upload="false" |
| | | list-type="picture-card" |
| | | :class="{disabled:uploadDisabled}" |
| | | action="#" |
| | | :limit="1" |
| | | :file-list="dialogData.uploadImgs" |
| | | :on-change="addUploadImg" |
| | | :on-remove="delUploadImg" |
| | | :http-request="uploadImg" |
| | | :on-preview="uploadPreview" |
| | | :before-upload="beforeUploadImg" |
| | | > |
| | | <i class="el-icon-plus" /> |
| | | </el-upload> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="hideDialog">取消</el-button> |
| | | <el-button type="primary" @click="handleSave(dialogData.type)">确定</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!-- upload放大图片 --> |
| | | <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center"> |
| | | <img style="max-width:100%" :src="uploadPreviewUrl" alt=""> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import mixin_Upload from '@/mixins/upload.js' |
| | | |
| | | export default { |
| | | name: 'Equipment', |
| | | mixins: [mixin_Upload], |
| | | data() { |
| | | return { |
| | | list: [], // 设备列表 |
| | | |
| | | // 分页 ↓↓↓↓↓↓↓↓↓↓ |
| | | total: 0, |
| | | pageNum: 1, |
| | | pageSize: 20, |
| | | // 分页 ↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | // 显示弹窗 |
| | | isShowDialog: false, |
| | | |
| | | // 表单校验 |
| | | rules: { |
| | | orderNum: [ |
| | | { required: true, message: '排序号不能为空', trigger: 'change' } |
| | | ], |
| | | uploadImgs: [ |
| | | { required: true, message: '请选择轮播图片', trigger: 'change' } |
| | | ] |
| | | }, |
| | | |
| | | // 表单名称 |
| | | formName: 'dialogForm', |
| | | // 弹窗表单 |
| | | dialogData: { |
| | | // 上传图片 |
| | | uploadImgs: [] |
| | | } |
| | | |
| | | } |
| | | }, |
| | | computed: { |
| | | // 上传禁用 |
| | | uploadDisabled() { |
| | | return this.dialogData.uploadImgs.length > 0 |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.init() |
| | | }, |
| | | methods: { |
| | | // 初始化 |
| | | init() { |
| | | // this.id = this.$route.query.id || '' |
| | | this.getList() |
| | | }, |
| | | |
| | | // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ |
| | | // 上传前确认格式 |
| | | beforeUploadImg(file) { |
| | | const isImg = file.type.indexOf('image/') > -1 |
| | | if (!isImg) { |
| | | this.$message.error('必须是选择图片文件') |
| | | } |
| | | return isImg |
| | | }, |
| | | // 增加图片 |
| | | addUploadImg(file, fileList) { |
| | | this.$refs.uploadFormItem.resetField() |
| | | this.dialogData.uploadImgs = fileList |
| | | }, |
| | | // 删除图片 |
| | | delUploadImg(file, fileList) { |
| | | this.dialogData.uploadImgs = fileList |
| | | }, |
| | | // 执行上传商品图 |
| | | runUploadImg(suc_cb) { |
| | | if (this.checkNeedUpload(this.dialogData.uploadImgs)) { |
| | | this.$refs.refUploadImg.submit() |
| | | } else { |
| | | suc_cb && suc_cb() |
| | | } |
| | | }, |
| | | // 上传商品图 |
| | | uploadImg(res) { |
| | | console.log(res) |
| | | const file = res.file |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | console.log(formData) |
| | | this.postFN({ |
| | | url: 'admin/image/upload', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formData, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'xxxx' |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | console.log('上传图片成功') |
| | | |
| | | // 替换掉未上传的图片 |
| | | this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' } |
| | | this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs)) |
| | | this.$set(this.dialogData, 'imgUrl', inf.imgUrl) |
| | | |
| | | console.log('上传图片结束') |
| | | |
| | | // 提交 |
| | | this.submit(this.dialogData.type) |
| | | }) |
| | | }, |
| | | // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | // 获取列表 |
| | | getList() { |
| | | var { pageNum, pageSize } = this |
| | | const params = { |
| | | pageNum: pageNum, |
| | | pageSize: pageSize |
| | | } |
| | | |
| | | this.postFN({ |
| | | url: 'admin/banner/list', |
| | | params: params, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | list: [{ |
| | | 'imgUrl': 'https://profile.csdnimg.cn/0/1/7/3_weixin_38373875', |
| | | 'jumpUrl': '123', |
| | | 'jumpType': 0, |
| | | 'orderNum': 1, |
| | | 'createTime': '2020-02-02 02:00:00' |
| | | }], |
| | | total: 100 |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | this.list = inf.list || [] |
| | | this.total = inf.total |
| | | }) |
| | | }, |
| | | // 重新获取列表 |
| | | reGetList() { |
| | | this.pageNum = 1 |
| | | this.getList() |
| | | }, |
| | | // 删除 |
| | | handleDelete(item) { |
| | | // 打开二次确认弹窗 |
| | | this.$confirm('是否确认删除该轮播图?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | // 确定回调 |
| | | this.postFN({ |
| | | url: 'admin/banner/del', |
| | | params: { |
| | | id: item.id |
| | | }, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: {} |
| | | } |
| | | }, () => { |
| | | this.getList() |
| | | this.$messageSuc('删除成功') |
| | | }) |
| | | }).catch(() => {}) |
| | | }, |
| | | // 编辑 |
| | | handleEdit(item) { |
| | | this.showDialog('edit', item) |
| | | }, |
| | | // 显示弹框 |
| | | showDialog(type, item) { |
| | | let dialogData = {} |
| | | |
| | | this.isShowDialog = true |
| | | this.$nextTick(() => { |
| | | if (type === 'add') { |
| | | dialogData = { |
| | | type: 'add', |
| | | orderNum: 1, |
| | | uploadImgs: [] |
| | | } |
| | | } else { |
| | | dialogData = { |
| | | type: 'edit', |
| | | ...item |
| | | } |
| | | dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }] |
| | | } |
| | | this.dialogData = dialogData |
| | | this.$refs[this.formName].resetFields() |
| | | }) |
| | | }, |
| | | // 隐藏弹框 |
| | | hideDialog() { |
| | | this.$refs[this.formName].resetFields() |
| | | this.isShowDialog = false |
| | | }, |
| | | // 提交 |
| | | handleSave(type) { |
| | | // 验证 |
| | | this.$refs[this.formName].validate((valid) => { |
| | | if (valid) { |
| | | // 上传图片 |
| | | this.runUploadImg(() => { |
| | | this.submit(type) |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | submit(type) { |
| | | const url = type === 'add' ? 'admin/banner/add' : 'admin/banner/edit' |
| | | const dialogData = this.dialogData |
| | | const params = { |
| | | orderNum: dialogData.orderNum, |
| | | imgUrl: dialogData.imgUrl |
| | | } |
| | | if (dialogData.type === 'edit') { |
| | | params.id = dialogData.id |
| | | } |
| | | this.postFN({ |
| | | url, |
| | | params, |
| | | mockData: { |
| | | code: 100, data: { |
| | | |
| | | } |
| | | } |
| | | }, inf => { |
| | | this.$messageSuc('保存成功') |
| | | this.hideDialog() |
| | | this.getList() |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | </style> |