// 轮播图管理
|
<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="jumpType" label="跳转类型" align="center" min-width="120">
|
<template slot-scope="scope">
|
{{ ['不跳转','小程序页面','H5页面','其他小程序'][scope.row.jumpType] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="orderNum" label="排序号" align="center" />
|
<el-table-column prop="createTime" label="创建时间" align="center" min-width="120" />
|
<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 v-el-drag-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
|
<el-form :ref="formName" :model="dialogData" label-width="120px" :rules="rules" size="small">
|
<el-form-item label="排序号：" prop="orderNum">
|
<el-input v-model="dialogData.orderNum" placeholder="请输入排序号" maxlength="10" />
|
</el-form-item>
|
<el-form-item ref="uploadFormItem" prop="uploadImgs">
|
<span slot="label">
|
<!-- 尺寸 -->
|
轮播图：<br><span style="color: #999;font-size: 12px">(xxx*xxx像素)</span>
|
</span>
|
<!-- 上传图片组件(单图) -->
|
<UploadSingleImg
|
ref="refUploadImg"
|
v-model="dialogData.uploadImgs"
|
@change.capture="$refs[formName].clearValidate()"
|
/>
|
</el-form-item>
|
<el-form-item label="跳转类型：" prop="jumpType">
|
<el-select
|
v-model="dialogData.jumpType"
|
clearable
|
placeholder="请选择跳转类型"
|
class="com-edit-input"
|
>
|
<el-option v-for="item in jumpTypeOpt" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="dialogData.jumpType" label="跳转链接：" prop="jumpUrl">
|
<el-input v-model="dialogData.jumpUrl" placeholder="请输入跳转链接" class="com-edit-input" maxlength="100" />
|
</el-form-item>
|
<el-form-item v-if="dialogData.jumpType===3" label="appId：" prop="jumpMpId">
|
<el-input v-model="dialogData.jumpMpId" placeholder="请输入小程序appId" class="com-edit-input" maxlength="50" />
|
</el-form-item>
|
<el-form-item v-if="dialogData.jumpType===3" label="小程序版本：" prop="envVersion">
|
<el-select
|
v-model="dialogData.envVersion"
|
clearable
|
placeholder="请选择小程序版本"
|
class="com-edit-input"
|
@change="handleJumpTypeChange"
|
>
|
<el-option v-for="item in envVersionOpt" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="dialogData.jumpType===3" label="额外数据：" prop="extraData">
|
<el-input v-model="dialogData.extraData" placeholder="请输入小程序额外数据" class="com-edit-input" maxlength="50" />
|
</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'
|
import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项
|
import UploadSingleImg from '@/components_simple/UploadSingleImg'
|
export default {
|
name: 'Equipment',
|
components: { UploadSingleImg },
|
mixins: [mixin_Upload, mixin_bannerOpts],
|
data() {
|
return {
|
list: [], // 设备列表
|
|
// 分页 ↓↓↓↓↓↓↓↓↓↓
|
total: 0,
|
pageNum: 1,
|
pageSize: 20,
|
// 分页 ↑↑↑↑↑↑↑↑↑↑
|
|
jumpTypeOpt: [
|
{ label: '不跳转', value: 0 },
|
{ label: '小程序页面', value: 1 },
|
{ label: 'H5页面', value: 2 },
|
{ label: '其它小程序', value: 3 }
|
],
|
|
envVersionOpt: [
|
{ label: '开发版', value: 'develop' },
|
{ label: '体验版', value: 'trial' },
|
{ label: '正式版', value: 'release' }
|
],
|
|
// 显示弹窗
|
isShowDialog: false,
|
|
// 表单校验
|
rules: {
|
orderNum: [
|
{ required: true, message: '排序号不能为空', trigger: 'change' }
|
],
|
uploadImgs: [
|
{ required: true, message: '轮播图片不能为空', trigger: 'change' }
|
],
|
jumpType: [
|
{ required: true, message: '跳转类型不能为空', trigger: 'change' }
|
],
|
jumpUrl: [
|
{ required: true, message: '跳转链接不能为空', trigger: 'change' }
|
],
|
jumpMpId: [
|
{ required: true, message: '跳转小程序appId不能为空', trigger: 'change' }
|
],
|
envVersion: [
|
{ required: true, message: '跳转小程序版本不能为空', trigger: 'change' }
|
]
|
},
|
|
// 表单名称
|
formName: 'dialogForm',
|
// 弹窗表单
|
dialogData: {
|
// 上传图片
|
uploadImgs: []
|
}
|
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
// 初始化
|
init() {
|
this.getList()
|
},
|
|
// 获取列表
|
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)
|
},
|
// 跳转类型为【不跳转】时，清空其余跳转字段
|
handleJumpTypeChange() {
|
if (this.dialogData.jumpType === 0) {
|
this.dialogData.jumpUrl = ''
|
this.dialogData.jumpMpId = ''
|
this.dialogData.envVersion = ''
|
this.dialogData.extraData = ''
|
}
|
},
|
// 显示弹框
|
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.$refs.refUploadImg.runUploadImg((imgUrl) => {
|
imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
|
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,
|
jumpType: dialogData.jumpType
|
}
|
if (dialogData.jumpUrl) params.jumpUrl = dialogData.jumpUrl
|
if (dialogData.jumpMpId) params.jumpMpId = dialogData.jumpMpId
|
if (dialogData.envVersion) params.envVersion = dialogData.envVersion
|
if (dialogData.extraData) params.extraData = dialogData.extraData
|
|
if (dialogData.type === 'edit') {
|
params.id = dialogData.id
|
}
|
this.postFN({
|
url,
|
params,
|
mockData: {
|
code: 100, data: {
|
|
}
|
}
|
}, inf => {
|
this.$messageSuc('保存成功')
|
this.hideDialog()
|
type === 'add' ? this.reGetList() : this.getList()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
