You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

220 lines
7.7 KiB

<template>
<div class="page">
<div class="tool">
<div class="search-wrap">
<el-select v-model="field" @change="initData">
<el-option
v-for="(item, i) in keywords"
:key="i"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input>
</div>
<div class="actions">
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" @click="batchDel">批量删除</el-button>
<el-button v-auth="'/site/list:内容管理:文章管理:新增'" type="primary" @click="add" >新增文章</el-button>
</div>
</div>
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column>
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column>
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column>
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column>
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150" sortable="custom"></el-table-column>
<el-table-column prop="createTime" label="发布日期" align="center" min-width="100" sortable="custom"></el-table-column>
<el-table-column prop="workNumber" label="状态" align="center" min-width="80">
<template slot-scope="scope">
{{ scope.row.isRelease ? '已发布' : '草稿' }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="170">
<template slot-scope="scope">
<el-button v-auth="'/site/list:内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button>
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button>
<el-switch
v-if="scope.row.isRelease"
class="m-l-10"
v-model="scope.row.isDisable"
:active-value="0"
:inactive-value="1"
@change="switchOff($event, scope.row, scope.$index)">
</el-switch>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
</div>
</div>
</template>
<script>
import util from '@/libs/util'
export default {
data() {
return {
field: 'title',
keywords: [
{
id: 'title',
name: '标题'
},
{
id: 'founder',
name: '录入人'
},
{
id: 'editor',
name: '修改人'
}
],
keyword: '',
list: [],
page: 1,
pageSize: 10,
total: 0,
modifiedTimeSort: '',
releaseDateSort: 'desc',
classificationNameSort: '',
editTimeSort: '',
multipleSelection: [],
};
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
this.initData()
}, 500)
}
},
mounted() {
this.getData()
},
methods: {
// 文章列表
getData() {
const { keyword } = this
const data = {
pageNum: this.page,
pageSize: this.pageSize,
querySource: 3, //查询来源(3.中台 4.合伙人平台)
classificationNameSort: this.classificationNameSort,
editTimeSort: this.editTimeSort,
createTimeSort: this.releaseDateSort,
title: this.field === 'title' ? keyword : '',
founderName: this.field === 'founder' ? keyword : '',
editorName: this.field === 'editor' ? keyword : ''
}
this.$post(this.api.schemeList, data).then(({ data }) => {
this.list = data.records
this.total = +data.total
}).catch(err => {})
},
currentChange(val) {
this.page = val
this.getData()
},
handleSelectionChange(val) {
this.multipleSelection = val
},
initData() {
this.$refs.table.clearSelection()
this.page = 1
this.getData()
},
// 批量删除
batchDel() {
const list = this.multipleSelection
if (list.length) {
this.$confirm('确定要删除吗?', '提示', {
type: 'warning'
}).then(() => {
const data = []
list.map(e => {
data.push('ids=' + e.id)
})
this.$post(`${this.api.batchDeletionScheme}?${data.join('&')}`).then(res => {
this.$refs.table.clearSelection()
util.successMsg("删除成功")
this.getData()
}).catch(res => {})
}).catch(() => {})
} else {
util.errorMsg('请先选择数据 !')
}
},
// 删除
handleDelete(row) {
this.$confirm('确定要删除吗?', '提示', {
type: 'warning'
}).then(() => {
this.$post(`${this.api.batchDeletionScheme}?ids=${row.id}`).then(res => {
util.successMsg('删除成功')
this.getData()
}).catch(res => {})
}).catch(() => {})
},
// 禁用启用
switchOff(val, row) {
this.$post(`${this.api.enableOrDisableScheme}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {})
},
// 新增
add() {
this.$router.push(`/schemeSet`)
},
// 排序回调
sortChange(column) {
const { order } = column
// 三个排序只能同时传1个,所以点了一个排序的时候要清除掉其余两个
if (column.prop === 'classificationName') {
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
if (order) {
this.editTimeSort = ''
this.releaseDateSort = ''
this.sequenceSort = ''
}
}
if (column.prop === 'updateTime') {
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
if (order) {
this.classificationNameSort = ''
this.releaseDateSort = ''
this.sequenceSort = ''
}
}
if (column.prop === 'createTime') {
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
if (order) {
this.editTimeSort = ''
this.classificationNameSort = ''
this.sequenceSort = ''
}
}
if (column.prop === 'sequence') {
this.sequenceSort = order ? order === 'ascending' ? 'asc' : 'desc' : ''
if (order) {
this.editTimeSort = ''
this.releaseDateSort = ''
this.classificationNameSort = ''
}
}
this.getData()
},
// 编辑
edit(row) {
this.$router.push(`/schemeSet?id=${row.id}`)
},
}
};
</script>
<style lang="scss" scoped>
.m-l-10 {
margin-left: 10px;
}
</style>