<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="pageName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="页面描述" prop="pageDesc" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{ scope.row.pageDesc ? scope.row.pageDesc : "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="页面编号" prop="pageId"></el-table-column>
|
<el-table-column label="终端" width="120px">
|
<template slot-scope="scope">
|
{{ scope.row.terminalType == "0" ? "Web端" : "APP端" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="频道标识" prop="channelType">
|
<template slot-scope="scope">
|
{{
|
scope.row.channelType ? scope.row.channelType : "-"
|
}}
|
</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" :close-on-click-modal="false" :modal-append-to-body="false"
|
:visible.sync="addDaligVis" v-if="addDaligVis" width="50%">
|
<common-form labelWidth="100px" :defaultStyle="true" :inline="inline" :form="addForm"
|
ref="form" :formLabel="addFormLabel" :formRules="formRules" defaultPadding="0">
|
</common-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" size="mini" @click="confirmAdd" :loading="addBtnLoading">保存
|
</el-button>
|
<el-button size="mini" @click="addDaligVis = false">取消</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import AdvertisingPageApi from '@/api/marketing/pageMgt'
|
export default {
|
name: 'PageMgt',
|
data() {
|
const inputNumberValid = (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
if (value < 1 || !reg.test(value)) {
|
callback(new Error('请输入1-99999之间的正整数'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
edit: false,
|
addBtnLoading: false,
|
inline: false,
|
addDaligVis: false,
|
tableData: [],
|
total: 0,
|
listQuery: {
|
pageName: null,
|
terminalType: null
|
},
|
title: null,
|
formLabel: [
|
{
|
model: 'pageName',
|
label: '页面名称',
|
type: 'input'
|
},
|
{
|
model: 'terminalType',
|
label: '终端类型',
|
type: 'select',
|
opts: [
|
{
|
id: '0',
|
name: 'Web'
|
},
|
{
|
id: '1',
|
name: 'App'
|
}
|
]
|
}
|
],
|
addForm: {
|
pageName: null,
|
pageId: null,
|
channelType: null,
|
terminalType: null,
|
pageDesc: null
|
},
|
addFormLabel: [
|
{
|
model: 'pageName',
|
label: '页面名称',
|
type: 'input',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'pageId',
|
label: '页面编号',
|
type: 'number',
|
disabled: null,
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'channelType',
|
label: '频道标识',
|
type: 'input',
|
sx: 24,
|
sm: 12
|
},
|
{
|
model: 'terminalType',
|
label: '终端类型 ',
|
type: 'select',
|
sx: 24,
|
sm: 12,
|
opts: [
|
{
|
id: '0',
|
name: 'Web'
|
},
|
{
|
id: '1',
|
name: 'App'
|
}
|
]
|
},
|
{
|
model: 'pageDesc',
|
label: '页面描述',
|
type: 'input',
|
sx: 24,
|
sm: 12,
|
}
|
],
|
formRules: {
|
pageName: [
|
{ required: true, message: '请输入页面名称' },
|
{ max: 50, message: '页面名称最多只能输入 50 个字' }
|
],
|
pageId: [
|
{ required: true, message: '请输入页面编号' },
|
{ validator: inputNumberValid }
|
],
|
channelType: [
|
{ max: 20, message: '频道标识最多只能输入 20 个字' }
|
],
|
terminalType: [{ required: true, message: '请选择终端类型' }],
|
pageDesc: [
|
{ max: 100, message: '页面描述最多只能输入 100 个字' }
|
]
|
}
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.addDaligVis = true
|
this.edit = false
|
this.title = '新增'
|
this.addFormLabel[1].disabled = false
|
this.intiForm()
|
},
|
/**
|
* 清空表单数据
|
*/
|
intiForm() {
|
for (const key in this.addForm) {
|
this.addForm[key] = null
|
}
|
},
|
/**
|
*删除
|
*/
|
delitem(row, index) {
|
this.$confirm('确认删除吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
AdvertisingPageApi.del({ pageId: row.pageId }).then(
|
(res) => {
|
if (res.code === '0') {
|
this.queryData()
|
}
|
}
|
)
|
})
|
.catch(() => {
|
})
|
},
|
/**
|
* 修改
|
*/
|
updateItem(row, index) {
|
this.title = '编辑'
|
this.edit = true
|
this.addFormLabel[1].disabled = this.edit
|
this.addDaligVis = true
|
this.addForm = JSON.parse(JSON.stringify(row))
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
pageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
AdvertisingPageApi.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
|
if (this.edit) {
|
AdvertisingPageApi.edit(this.addForm).then((res) => {
|
this.edit = false
|
this.addBtnLoading = false
|
if (res.code === '0') {
|
this.$message.success('操作成功')
|
this.addDaligVis = false
|
this.queryData()
|
}
|
})
|
} else {
|
AdvertisingPageApi.add(this.addForm).then((res) => {
|
this.addBtnLoading = false
|
if (res.code === '0') {
|
this.$message.success('操作成功')
|
this.addDaligVis = false
|
this.queryData()
|
}
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
