// 设备管理
|
<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>
|
