<template>
|
<div>
|
<list-condition-template ref="table" :isExistBtn="true" :form="listQuery" :formLabel="formLabel" :multipleSelected="true" :dataKey="'articleId'" :tableData="tableData" :total="total" @selected="handSelected" @page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col class="formLayout" :xs='12' :sm='12' :md='12' :lg='6' :offset="0" style="display: flex;">
|
<el-form-item label="一级分类:" style="flex-grow:1;" prop="oneClassId">
|
<el-select placeholder="请选择二级分类" style="width:calc(100% - 72px);" :popper-append-to-body="false" v-model="listQuery.oneClassId" @change="changeType" clearable>
|
<el-option
|
v-for="item in firstLevelArray"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col class="formLayout" :xs='12' :sm='12' :md='12' :lg='6' :offset="0" style="display: flex;">
|
<el-form-item label="二级分类:" style="flex-grow:1;" prop="twoClassId">
|
<el-select placeholder="请选择二级分类" style="width:calc(100% - 72px);" :popper-append-to-body="false" v-model="listQuery.twoClassId" filterable clearable>
|
<el-option
|
v-for="item in publicityArr"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
<el-button size="mini" type="primary" @click="handleTop('1')">置顶</el-button>
|
<el-button size="mini" type="primary" @click="handleTop('2')">取消置顶</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="文章名称" prop="articleName" show-overflow-tooltip min-width="220px"></el-table-column>
|
<el-table-column label="一级分类" prop="culturalType" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.publicity && scope.row.publicity.publicityName ? scope.row.publicity.publicityName : ''}}
|
</template>
|
</el-table-column>
|
<el-table-column label="二级分类" prop="publicityId" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.publicity && scope.row.publicity.children&& scope.row.publicity.children.length ?scope.row.publicity.children[0].publicityName: ''}}
|
</template>
|
</el-table-column>
|
<el-table-column label="文章类型" prop="publicityId" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.articleType === '1' ? '图片' : '视频'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="发布状态" align="center" prop="publishStatus" width="120px">
|
<template slot-scope="scope">
|
<span class="publish" v-show="scope.row.publishStatus === '1'">√</span>
|
<span class="no-publish" v-show="scope.row.publishStatus !== '1'">×</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="是否置顶" align="center" prop="topType" width="100px">
|
<template slot-scope="scope">
|
{{scope.row.topType === '1' ? '是' : '否'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="发布时间" width="180px">
|
<template slot-scope="scope">
|
<span>{{scope.row.publishTime}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="添加时间" width="180px">
|
<template slot-scope="scope">
|
<span>{{scope.row.createTime}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${4 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<wly-btn v-if="scope.row.publishStatus !== '1'" type="primary" @click="editItem(scope.row,scope.$index)">编辑</wly-btn>
|
<wly-btn @click="detailsInfo(scope.row,scope.$index)" >详情</wly-btn>
|
<wly-btn :type="scope.row.publishStatus === '1' ? 'warning' : 'success'" @click="updateState(scope.row,scope.$index)" >{{scope.row.publishStatus === '1' ? '下架' : '发布'}}</wly-btn>
|
<wly-btn :type="scope.row.topType === '1' ? 'warning' : 'success'" v-if="scope.row.publishStatus === '1'" @click="isAticleTop(scope.row,scope.$index)" >{{scope.row.topType === '1' ? '取消置顶' : '置顶'}}</wly-btn>
|
<wly-btn v-if="scope.row.publishStatus !== '1'" type="danger" @click="deleteItem(scope.row,scope.$index)" >删除</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
</div>
|
</template>
|
<script>
|
import proPublicityApi from '@/api/proPublicityMgt/proPublicity'
|
import catPublicityApi from '@/api/proPublicityMgt/catPublicity'
|
export default {
|
data () {
|
return {
|
tableData: [],
|
firstLevelArray: [],
|
publicityArr: [],
|
total: 0,
|
listQuery: {
|
articleName: null,
|
twoClassId: null,
|
publishStatus: null,
|
oneClassId: null,
|
topType: ''
|
},
|
form: {},
|
formLabel: [
|
{
|
model: 'articleName',
|
label: '文章名称',
|
type: 'input'
|
},
|
{
|
model: 'publishStatus',
|
label: '发布状态',
|
type: 'select',
|
opts: [
|
{
|
id: '1',
|
name: '已发布'
|
},
|
{
|
id: '2',
|
name: '未发布'
|
}
|
]
|
},
|
{
|
model: 'topType',
|
label: '是否置顶',
|
type: 'select',
|
opts: [
|
{
|
id: '',
|
name: '全部'
|
},
|
{
|
id: '1',
|
name: '是'
|
},
|
{
|
id: '2',
|
name: '否'
|
}
|
]
|
}
|
],
|
rows: []
|
}
|
},
|
/*
|
* 数据变化后刷新列表
|
*/
|
activated () {
|
this.getCategory({ level: '1' })
|
this.getCategory({ level: '2', pid: this.listQuery.oneClassId })
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
/**
|
* 初始化表格
|
*/
|
initTable () {
|
this.queryList(this.$refs.table.getPageInfo())
|
this.$refs.table.clearTableSelected() // 清空表格勾选项
|
this.rows = []
|
},
|
/**
|
* 是否置顶
|
*/
|
async handleTop (val) {
|
if (!this.rows.length) {
|
this.$message({
|
message: `请选择需要${val === '1' ? '置顶的文章' : '取消置顶的文章'} `,
|
type: 'info'
|
})
|
return
|
}
|
for (const i of this.rows) {
|
if (i.publishStatus === '2') {
|
this.$message({
|
message: '选中的文章中包含未发布文章,不能操作,请重新选择',
|
type: 'warning'
|
})
|
return
|
} else if (val === '1' && i.topType === '1') {
|
this.$message({
|
message: '选中的文章中包含已置顶的文章,请重新选择',
|
type: 'warning'
|
})
|
return
|
} else if (val === '2' && i.topType === '2') {
|
this.$message({
|
message: '选中的文章中包含未置顶的文章,请重新选择',
|
type: 'warning'
|
})
|
return
|
}
|
}
|
const params = {
|
articleIds: this.rows.map(item => { return item.articleId }),
|
topType: val
|
}
|
try {
|
const res = await proPublicityApi.batchTop(params)
|
if (res.code === '0') {
|
this.$message({
|
message: '状态修改成功',
|
type: 'success'
|
})
|
this.initTable()
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
*
|
*获取勾选的表格数据
|
*/
|
handSelected (val) {
|
this.rows = val
|
},
|
/**
|
* 初始化复选框
|
*/
|
selecetInit (row, index) {
|
if (row.state === '1') {
|
return false // 不可勾选
|
} else {
|
return true // 可勾选
|
}
|
},
|
// 当品牌文化分类改变时获取文章分类
|
changeType (val) {
|
this.listQuery.twoClassId = null
|
this.publicityArr = []
|
this.listQuery.publicityId = null
|
if (val) {
|
this.getCategory({ pid: val, level: '2' })
|
} else {
|
this.getCategory({ level: '1' })
|
this.getCategory({ level: '2' })
|
}
|
},
|
// 获取分类
|
async getCategory (params) {
|
try {
|
const res = await catPublicityApi.getNoDelete(params)
|
if (res.code === '0') {
|
const arr = res.data.map(item => {
|
return {
|
id: item.publicityId,
|
name: item.publicityName
|
}
|
})
|
if (params.level === '1') {
|
this.firstLevelArray = arr
|
} else {
|
this.publicityArr = arr
|
}
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 删除
|
*/
|
deleteItem (row) {
|
this.$confirm(`确认删除--${row.articleName}?`, '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
try {
|
const res = await proPublicityApi.deleteItem({ articleId: row.articleId })
|
if (res.code === '0') {
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
this.$refs.table.changeCondition() // 查询列表
|
}
|
} catch (error) {
|
}
|
})
|
},
|
/**
|
* 上架/下架
|
*/
|
async updateState (row, index) {
|
try {
|
const publishStatus = row.publishStatus === '1' ? '2' : '1'
|
const res = await proPublicityApi.isPublishItem({ articleId: row.articleId, publishStatus })
|
if (res.code === '0') {
|
this.$message({
|
message: publishStatus === '1' ? '发布成功' : '下架成功',
|
type: 'success'
|
})
|
this.initTable()
|
}
|
} catch (error) {
|
}
|
},
|
// 文章是否置顶
|
async isAticleTop (row, index) {
|
try {
|
const topType = row.topType === '1' ? '2' : '1'
|
const res = await proPublicityApi.isTop({ articleId: row.articleId, topType })
|
if (res.code === '0') {
|
this.$message({
|
message: topType === '1' ? '置顶成功' : '取消置顶成功',
|
type: 'success'
|
})
|
this.initTable()
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 新增
|
*/
|
addItem () {
|
this.$router.push({ name: 'proPublicityAdd' })
|
},
|
/**
|
* 编辑
|
*/
|
editItem (row, index) {
|
this.$router.push({ name: 'proPublicityEdit', query: { id: row.articleId } })
|
},
|
/**
|
* 详情
|
*/
|
detailsInfo (row, index) {
|
this.$router.push({ name: 'proPublicityInfo', query: { id: row.articleId } })
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange (pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery () {
|
this.$refs.table.reloadCurrent()
|
// 当品牌文化分类改变时获取文章分类
|
this.changeType(this.listQuery.culturalType)
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData () {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
async queryList (pageInfo = { pageNum: 1, pageSize: 10 }) {
|
try {
|
const res = await proPublicityApi.getList({ param: this.listQuery, ...pageInfo })
|
if (res.code === '0') {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.publish{
|
color: #67C23A;
|
}
|
.no-publish{
|
color: #F56C6C;
|
}
|
</style>
|
