152 lines
4.2 KiB
Vue
152 lines
4.2 KiB
Vue
<template>
|
|
<el-row>
|
|
<el-col>
|
|
<el-table :data="articles.articles" style="width: 100%">
|
|
<el-table-column
|
|
label="#"
|
|
width="40"
|
|
prop="idArticle">
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="文章标题">
|
|
<template slot-scope="scope">
|
|
<el-link rel="nofollow" type="primary" @click.native="onRouter('article', scope.row.idArticle)" :underline="false">{{
|
|
scope.row.articleTitle }}
|
|
</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="排序(回车更新)"
|
|
width="200">
|
|
<template slot-scope="scope">
|
|
<el-input-number v-model="scope.row.sortNo" @keyup.enter.native="updateArticleSortNo(scope.row)"
|
|
:min="1"></el-input-number>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
width="200">
|
|
<template slot-scope="scope">
|
|
<el-button @click="deletePortFolioArticle(scope.row.idArticle)">取消绑定</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col>
|
|
<div class="vertical-container text-center">
|
|
<el-pagination :hide-on-single-page="true" v-model="articles.pagination"
|
|
layout="prev, pager, next"
|
|
:current-page="articles.pagination.currentPage"
|
|
:total="articles.pagination.total"
|
|
@current-change="currentChange">
|
|
</el-pagination>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex';
|
|
|
|
export default {
|
|
name: "PortfolioManagerList",
|
|
props: {
|
|
idPortfolio: {
|
|
type: Number
|
|
}
|
|
},
|
|
validate({params, store}) {
|
|
return !isNaN(Number(this.idPortfolio))
|
|
},
|
|
fetch({store, params, error}) {
|
|
return Promise.all([
|
|
store
|
|
.dispatch('portfolio/fetchArticleList', {
|
|
portfolio_id: this.idPortfolio
|
|
})
|
|
.catch(err => error({statusCode: 404}))
|
|
])
|
|
},
|
|
data() {
|
|
return {
|
|
articles: {
|
|
articles: [],
|
|
pagination: {
|
|
total: 0,
|
|
currentPage: 1
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
currentChange(page) {
|
|
this.getArticleData(page);
|
|
},
|
|
async getArticleData(page){
|
|
let _ts = this;
|
|
const responseTopData = await this.$axios.$get('/api/console/portfolio/' + _ts.idPortfolio + '/articles?page='+page);
|
|
if (responseTopData) {
|
|
responseTopData.pagination.currentPage = page;
|
|
_ts.$set(_ts, 'articles', responseTopData);
|
|
window.scrollTo(0, 0);
|
|
}
|
|
},
|
|
updateArticleSortNo(article) {
|
|
let _ts = this;
|
|
if (article.sortNo) {
|
|
_ts.$axios.$put('/api/portfolio/update-article-sort-no',{
|
|
idArticle: article.idArticle,
|
|
idPortfolio: _ts.idPortfolio,
|
|
sortNo: article.sortNo
|
|
}).then(function (res) {
|
|
if (res) {
|
|
_ts.$message(res.message);
|
|
}
|
|
})
|
|
} else {
|
|
_ts.$message("排序号不能为空");
|
|
}
|
|
},
|
|
deletePortFolioArticle(idArticle) {
|
|
let _ts = this;
|
|
_ts.$confirm('确定取消绑定吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
_ts.$axios.$delete('/api/portfolio/unbind-article', {
|
|
params: {
|
|
idArticle: idArticle,
|
|
idPortfolio: _ts.idPortfolio
|
|
}
|
|
}).then(function (res) {
|
|
if (res) {
|
|
_ts.$message(res.message);
|
|
_ts.currentChange(_ts.articles.pagination.currentPage);
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
_ts.$message({
|
|
type: 'info',
|
|
message: '已取消'
|
|
});
|
|
});
|
|
},
|
|
onRouter (name, data) {
|
|
if (name === 'article') {
|
|
this.$router.push({
|
|
path: `/article/${data}`
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getArticleData(1);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|