<template>
|
<div>
|
<list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
|
:tableData="tableData" :total="total"
|
@page-info-change="pageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="6" :offset="0">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="广告名称" prop="adName" show-overflow-tooltip width="180px">
|
</el-table-column>
|
<el-table-column label="广告编号" prop="adId" width="100px"></el-table-column>
|
<el-table-column label="所属页面" show-overflow-tooltip width="120px">
|
<template slot-scope="scope">
|
{{ scope.row.pageId | filtterPage(pageList) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="所属栏目" prop="columnId" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{ scope.row.columnId | filtterColumnId(programList) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="图片" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.adImgUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="链接目标" prop="adHrefUrl" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.adHrefUrl ? scope.row.adHrefUrl : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="发布起止时间" width="300px">
|
<template slot-scope="scope">
|
{{scope.row.publishedOn}} - {{scope.row.closeTon}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${2 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<wly-btn type="primary" @click="updateItem(scope.row, scope.$index)">编辑
|
</wly-btn>
|
<wly-btn type="danger" @click="delitem(scope.row, scope.$index)">删除
|
</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<el-dialog :title="title" :visible.sync="addDaligVis" :close-on-click-modal="false"
|
:modal-append-to-body="false" v-if="addDaligVis" width="55%">
|
<common-form labelWidth="120px" :inline="inline" :form="addForm" ref="form"
|
:formLabel="addFormLabel" :defaultStyle="true" :formRules="formRules"
|
defaultPadding="0">
|
<template slot="otherElement">
|
<el-col :span="24" :offset="0">
|
<el-form-item label="品牌图片：" prop="age" labelWidth="120px">
|
<upload-img :limitNumber="1" :isAppendTobody="true" @handle-success="handleSuccess"
|
@handle-remove="handleRemove" :fileList="fileList" :imgSize="true">
|
</upload-img>
|
</el-form-item>
|
</el-col>
|
</template>
|
</common-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" :loading="addBtnLoading" @click="confirmAdd" size="mini">保存
|
</el-button>
|
<el-button @click="addDaligVis = false" size="mini">取消</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import AdvertisingContentApi from '@/api/marketing/contentMgt'
|
import AdvertisingPageApi from '@/api/marketing/pageMgt'
|
import AdvertisingProgramApi from '@/api/marketing/programMgt'
|
import productImg from '@/views/product/components/productImg.vue'
|
export default {
|
name: 'ContentMgt',
|
components: { productImg },
|
data() {
|
const inputNumberValid = (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
if (value < 1 || !reg.test(value)) {
|
callback(new Error('请输入1-99999之间的正整数'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
fileList: [], // 图片数组集合
|
pageList: [],
|
programList: [],
|
inline: false,
|
addDaligVis: false,
|
addBtnLoading: false,
|
tableData: [],
|
total: 0,
|
listQuery: {
|
adName: null,
|
pageId: null,
|
columnId: null
|
},
|
title: null,
|
formLabel: [
|
{
|
model: 'adName',
|
label: '广告名称',
|
type: 'input'
|
},
|
{
|
model: 'pageId',
|
label: '所属页面',
|
type: 'select',
|
opts: []
|
},
|
{
|
model: 'columnId',
|
label: '所属栏目',
|
type: 'select',
|
opts: []
|
}
|
],
|
addForm: {},
|
addFormLabel: [
|
{
|
model: 'adName',
|
label: '广告名称',
|
type: 'input',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'adId',
|
label: '广告编号',
|
type: 'number',
|
disabled: null,
|
sx: 24,
|
sm: 12
|
},
|
// {
|
// model: 'adType',
|
// label: '广告类型',
|
// type: 'select',
|
// opts: [
|
// {
|
// id: 'a',
|
// name: '图片'
|
// },
|
// {
|
// id: 'c',
|
// name: '文字'
|
// }
|
// ]
|
// },
|
{
|
model: 'adHrefUrl',
|
label: '链接目标',
|
type: 'input',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'adContent',
|
label: '广告内容',
|
type: 'input',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'adDesc',
|
label: '广告描述',
|
type: 'input',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'seqNum',
|
label: '位置序号',
|
type: 'number',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'publisheTime',
|
label: '发布起止时间',
|
flag: 'datetimerange',
|
type: 'date',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'pageId',
|
label: '所属页面',
|
type: 'select',
|
opts: [],
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'columnId',
|
label: '所属栏目',
|
type: 'select',
|
opts: [],
|
sx: 24,
|
sm: 12,
|
}
|
],
|
formRules: {
|
adName: [
|
{ required: true, message: '请输入广告名称' },
|
{ max: 100, message: '广告名称最多只能输入 100 个字' }
|
],
|
adId: [
|
{ required: true, message: '请输入广告编号' },
|
{ validator: inputNumberValid }
|
],
|
adType: [{ required: true, message: '请选择广告类型' }],
|
adHrefUrl: [
|
{ max: 500, message: '链接目标最多只能输入 500 个字' }
|
],
|
adDesc: [
|
{ max: 255, message: '广告描述最多只能输入 255 个字' }
|
],
|
seqNum: [{ required: true, message: '请输入位置序号' }],
|
pageDesc: [
|
{ max: 100, message: '页面描述最多只能输入 100 个字' }
|
],
|
columnId: [{ required: true, message: '请选择所属栏目' }],
|
pageId: [{ required: true, message: '请选择所属页面' }],
|
publisheTime: [
|
{
|
type: 'array',
|
required: true,
|
message: '请选择发布起止时间'
|
}
|
]
|
}
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
this.getPageList() // 获取页面信息
|
this.getProgram() // 获取栏目信息
|
},
|
methods: {
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.edit = false
|
this.addDaligVis = true
|
this.title = '新增'
|
this.addFormLabel[1].disabled = false
|
this.intiForm()
|
},
|
/**
|
* 清空表单数据
|
*/
|
intiForm() {
|
for (const key in this.addForm) {
|
this.addForm[key] = null
|
}
|
this.$set(this.addForm, 'publisheTime', [])
|
this.fileList = []
|
},
|
handleSuccess(data) {
|
this.addForm.adImgUrl = data.like
|
},
|
handleRemove(data) {
|
this.addForm.adImgUrl = null
|
},
|
getPageList() {
|
AdvertisingPageApi.getList({ pageSize: 1000000, param: {} }).then(
|
(res) => {
|
if (res.data) {
|
this.pageList = res.data.list
|
var arr = []
|
this.pageList.map((v) => {
|
var obj = {
|
id: v.pageId,
|
name: v.pageName
|
}
|
arr.push(obj)
|
})
|
this.addFormLabel.map((item) => {
|
if (item.model === 'pageId') {
|
item.opts = arr
|
}
|
})
|
this.formLabel.map((item) => {
|
if (item.model === 'pageId') {
|
item.opts = arr
|
}
|
})
|
}
|
}
|
)
|
},
|
getProgram() {
|
AdvertisingProgramApi.getList({
|
pageSize: 1000000,
|
param: {}
|
}).then((res) => {
|
if (res.data) {
|
this.programList = res.data.list
|
var arr = []
|
this.programList.map((v) => {
|
var obj = {
|
id: v.columnId,
|
name: v.columnName
|
}
|
arr.push(obj)
|
})
|
this.addFormLabel.map((item) => {
|
if (item.model === 'columnId') {
|
item.opts = arr
|
}
|
})
|
this.formLabel.map((item) => {
|
if (item.model === 'columnId') {
|
item.opts = arr
|
}
|
})
|
}
|
})
|
},
|
/**
|
*删除
|
*/
|
delitem(row, index) {
|
this.$confirm('确认删除吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
AdvertisingContentApi.del({ AdId: row.adId }).then(
|
(res) => {
|
if (res.code === '0') {
|
this.queryData()
|
}
|
}
|
)
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
/**
|
* 修改
|
*/
|
updateItem(row, index) {
|
this.fileList = []
|
this.edit = true
|
this.addDaligVis = true
|
this.title = '编辑'
|
this.addFormLabel[1].disabled = true
|
row.publisheTime = []
|
this.addForm = JSON.parse(JSON.stringify(row))
|
this.addForm.publisheTime = [row.publishedOn, row.closeTon]
|
if (this.addForm.adImgUrl) {
|
this.fileList.push({
|
url: this.addForm.adImgUrl
|
})
|
}
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
pageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
AdvertisingContentApi.getList({
|
param: this.listQuery,
|
...pageInfo
|
}).then((res) => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
},
|
// 添加
|
confirmAdd() {
|
this.$refs.form.$refs.form.validate().then((res) => {
|
this.addBtnLoading = true
|
const { addForm, edit } = this
|
if (addForm.publisheTime) {
|
addForm.publishedOn = addForm.publisheTime[0]
|
addForm.closeTon = addForm.publisheTime[1]
|
}
|
addForm.adType = 'a'
|
if (edit) {
|
AdvertisingContentApi.edit(addForm).then((res) => {
|
this.addBtnLoading = false
|
if (res.code === '0') {
|
this.$message.success('操作成功')
|
this.addDaligVis = false
|
this.queryData()
|
}
|
})
|
} else {
|
AdvertisingContentApi.add(addForm).then((res) => {
|
this.addBtnLoading = false
|
if (res.code === '0') {
|
this.$message.success('操作成功')
|
this.addDaligVis = false
|
this.queryData()
|
}
|
})
|
}
|
})
|
}
|
},
|
filters: {
|
filtterColumnId(val, list) {
|
var name = ''
|
list.map((v) => {
|
if (v.columnId === val) {
|
name = v.columnName
|
}
|
})
|
return name
|
},
|
filtterPage(val, list) {
|
var name = ''
|
list.map((v) => {
|
if (v.pageId === val) {
|
name = v.pageName
|
}
|
})
|
return name
|
}
|
}
|
}
|
</script>
|
