✨ 作品集管理功能
This commit is contained in:
x ronger
parent
cda3d2da78
commit
47984f5638
@ -62,7 +62,7 @@
|
|||||||
)
|
)
|
||||||
},
|
},
|
||||||
currentChange(page) {
|
currentChange(page) {
|
||||||
this.$emit('currentChangePortfolios', page);
|
this.$emit('currentChange', page);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
69
components/common/portfolio/manager/bind/list.vue
Normal file
69
components/common/portfolio/manager/bind/list.vue
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<el-row>
|
||||||
|
<el-col v-for="article in articles.articles" :key="article.idArticle" style="padding-top: 1rem;">
|
||||||
|
<el-card>
|
||||||
|
<div class="card-body d-flex flex-column">
|
||||||
|
<el-link :underline="false" style="margin-bottom: .5rem;">
|
||||||
|
<h4 v-html="article.articleTitle"></h4>
|
||||||
|
</el-link>
|
||||||
|
<div class="text-muted article-summary-md">{{ article.articlePreviewContent }}</div>
|
||||||
|
<el-col class="text-right" style="padding: 1rem;">
|
||||||
|
<el-button @click="bindArticle(article.idArticle)" :loading="loading">添加至作品集</el-button>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<div class="vertical-container text-center">
|
||||||
|
<el-pagination v-show="articles.pagination.total > 10" 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>
|
||||||
|
export default {
|
||||||
|
name: "PortfolioManagerBind",
|
||||||
|
props: {
|
||||||
|
articles: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
idPortfolio: {
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
bindArticle(idArticle) {
|
||||||
|
let _ts = this;
|
||||||
|
_ts.$set(_ts, 'loading', true);
|
||||||
|
_ts.$axios.$post('/api/portfolio/bind-article', {
|
||||||
|
idArticle: idArticle,
|
||||||
|
idPortfolio: _ts.idPortfolio
|
||||||
|
}).then(function (res) {
|
||||||
|
_ts.$set(_ts, 'loading', false);
|
||||||
|
if (res) {
|
||||||
|
_ts.$message(res.message);
|
||||||
|
_ts.currentChange(1);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.$emit('currentChange', page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
151
components/common/portfolio/manager/list.vue
Normal file
151
components/common/portfolio/manager/list.vue
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
<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 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 v-show="articles.pagination.total > 10" 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>
|
||||||
106
pages/portfolio/manager/_portfolio_id.vue
Normal file
106
pages/portfolio/manager/_portfolio_id.vue
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<el-row class="wrapper">
|
||||||
|
<el-col v-if="isAuthor">
|
||||||
|
<el-col>
|
||||||
|
<el-col :xs="3" :sm="3" :xl="3" class="mr-3">
|
||||||
|
<el-image :src="portfolio.headImgUrl"></el-image>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="20" :sm="20" :xl="20">
|
||||||
|
<el-col>
|
||||||
|
<h1>{{ portfolio.portfolioTitle }}</h1>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin-bottom: .5rem;">
|
||||||
|
<span class="text-default" style="padding-right: 1rem;">作者</span>
|
||||||
|
<el-link @click="onRouter('user', portfolio.portfolioAuthorName)" :underline="false" class="text-default">
|
||||||
|
<el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar>
|
||||||
|
{{ portfolio.portfolioAuthorName }}
|
||||||
|
</el-link>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin-bottom: .5rem;">
|
||||||
|
<span class="text-default" style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}篇
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin-bottom: .5rem;" v-html="portfolio.portfolioDescription">
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-col style="text-align: right;">
|
||||||
|
<el-col>
|
||||||
|
<el-link @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false" class="text-default"
|
||||||
|
style="margin-right: 1rem;">编辑
|
||||||
|
</el-link>
|
||||||
|
<el-link @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false" class="text-default"
|
||||||
|
style="margin-right: 1rem;">添加文章
|
||||||
|
</el-link>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-divider><i class="el-icon-loading"></i></el-divider>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<portfolio-manager-list :idPortfolio="portfolio.idPortfolio"></portfolio-manager-list>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex';
|
||||||
|
import PortfolioManagerList from "~/components/common/portfolio/manager/list";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PortfolioManager",
|
||||||
|
components: {
|
||||||
|
PortfolioManagerList
|
||||||
|
},
|
||||||
|
validate({params, store}) {
|
||||||
|
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||||
|
},
|
||||||
|
fetch({store, params, error}) {
|
||||||
|
return Promise.all([
|
||||||
|
store
|
||||||
|
.dispatch('portfolio/fetchDetail', params)
|
||||||
|
.catch(err => error({statusCode: 404}))
|
||||||
|
])
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
portfolio: state => state.portfolio.detail.data
|
||||||
|
}),
|
||||||
|
isAuthor() {
|
||||||
|
let account = this.$store.state.oauth?.nickname;
|
||||||
|
if (account) {
|
||||||
|
if (account === this.portfolio.portfolioAuthorName) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onRouter(name, data) {
|
||||||
|
if (name === 'article') {
|
||||||
|
this.$router.push({
|
||||||
|
path: data
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/portfolio/post/' + data
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showBindArticleDialog(idPortfolio) {
|
||||||
|
this.$router.push({
|
||||||
|
path: `/portfolio/manager/bind/${idPortfolio}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
87
pages/portfolio/manager/bind/_portfolio_id.vue
Normal file
87
pages/portfolio/manager/bind/_portfolio_id.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<el-row class="wrapper">
|
||||||
|
<el-col style="margin-bottom: 1rem;">
|
||||||
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">返回上一级</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>关联文章</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-divider><i class="el-icon-loading"></i></el-divider>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-input v-model="searchText" @input="searchUnbindArticle" placeholder="输入帖子标题,回车检索"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<portfolio-manager-bind-list :idPortfolio="idPortfolio" :articles="articles"
|
||||||
|
@currentChange="currentChangeArticle"></portfolio-manager-bind-list>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex';
|
||||||
|
import PortfolioManagerBindList from "~/components/common/portfolio/manager/bind/list";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PortfolioManagerBind",
|
||||||
|
components: {
|
||||||
|
PortfolioManagerBindList
|
||||||
|
},
|
||||||
|
validate({params, store}) {
|
||||||
|
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||||
|
},
|
||||||
|
fetch({store, params, error}) {
|
||||||
|
return Promise.all([
|
||||||
|
store
|
||||||
|
.dispatch('portfolio/fetchUnBindArticleList', params)
|
||||||
|
.catch(err => error({statusCode: 404}))
|
||||||
|
])
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
articles: state => state.portfolio.unbindArticles,
|
||||||
|
}),
|
||||||
|
idPortfolio() {
|
||||||
|
return Number(this.$route.params.portfolio_id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchText: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
currentChangeArticle(page) {
|
||||||
|
this.$store.dispatch('portfolio/fetchUnBindArticleList', {
|
||||||
|
page: page,
|
||||||
|
portfolio_id: this.$route.params.portfolio_id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
searchUnbindArticle() {
|
||||||
|
this.$store.dispatch('portfolio/fetchUnBindArticleList', {
|
||||||
|
page: 1,
|
||||||
|
portfolio_id: this.$route.params.portfolio_id,
|
||||||
|
searchText: this.searchText
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onRouter(name, data) {
|
||||||
|
if (name === 'article') {
|
||||||
|
this.$router.push({
|
||||||
|
path: data
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/portfolio/post/' + data
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
312
pages/portfolio/post/_portfolio_id.vue
Normal file
312
pages/portfolio/post/_portfolio_id.vue
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
<template>
|
||||||
|
<el-row class="wrapper">
|
||||||
|
<el-col v-if="isEdit" style="margin-bottom: 1rem;">
|
||||||
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/portfolio-manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
|
||||||
|
</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>更新作品集</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<h1>创建作品集</h1>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin-bottom: 1rem;">
|
||||||
|
作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-form :model="portfolio" :rules="rules" ref="topic" label-width="100px">
|
||||||
|
<el-form-item label="作品集名称" prop="portfolioTitle">
|
||||||
|
<el-input v-model="portfolio.portfolioTitle"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图标">
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
:action="tokenURL.URL"
|
||||||
|
:multiple="true"
|
||||||
|
:with-credentials="true"
|
||||||
|
:headers="uploadHeaders"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload">
|
||||||
|
<img v-if="headImgUrl" class="topic-brand-img" :src="headImgUrl">
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="作品集介绍" prop="portfolioDescription">
|
||||||
|
<div id="contentEditor"></div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="text-right">
|
||||||
|
<el-button v-if="isEdit" @click="deletePortfolio" :loading="loading">删除</el-button>
|
||||||
|
<el-button v-if="isEdit" @click="updatePortfolio" :loading="loading">更新</el-button>
|
||||||
|
<el-button v-else @click="updatePortfolio" :loading="loading">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue';
|
||||||
|
import {mapState} from 'vuex';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PortfolioPost",
|
||||||
|
validate({params, store}) {
|
||||||
|
if (typeof params.portfolio_id === 'undefined') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||||
|
},
|
||||||
|
fetch({store, params, error}) {
|
||||||
|
return Promise.all([
|
||||||
|
store.dispatch('portfolio/fetchPostDetail', params)
|
||||||
|
.catch(err => error({statusCode: 404}))
|
||||||
|
])
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
portfolioDetail: state => state.portfolio.detail.data,
|
||||||
|
uploadHeaders: state => {
|
||||||
|
return {'X-Upload-Token': state.uploadHeaders}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
idPortfolio() {
|
||||||
|
return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
contentEditor: null,
|
||||||
|
portfolio: {
|
||||||
|
idPortfolio: 0,
|
||||||
|
portfolioDescription: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
portfolioTitle: [
|
||||||
|
{required: true, message: '请输入作品集名称', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
portfolioDescription: [
|
||||||
|
{required: true, message: '请输入作品集介绍', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
tokenURL: {
|
||||||
|
URL: '',
|
||||||
|
token: ''
|
||||||
|
},
|
||||||
|
headImgUrl: '',
|
||||||
|
isEdit: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_initEditor(data) {
|
||||||
|
let _ts = this;
|
||||||
|
let toolbar;
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
toolbar = [
|
||||||
|
'emoji',
|
||||||
|
'headings',
|
||||||
|
'bold',
|
||||||
|
'italic',
|
||||||
|
'strike',
|
||||||
|
'link',
|
||||||
|
'|',
|
||||||
|
'list',
|
||||||
|
'ordered-list',
|
||||||
|
'check',
|
||||||
|
'outdent',
|
||||||
|
'indent',
|
||||||
|
'|',
|
||||||
|
'quote',
|
||||||
|
'line',
|
||||||
|
'code',
|
||||||
|
'inline-code',
|
||||||
|
'insert-before',
|
||||||
|
'insert-after',
|
||||||
|
'|',
|
||||||
|
'upload',
|
||||||
|
'record',
|
||||||
|
'table',
|
||||||
|
'|',
|
||||||
|
'undo',
|
||||||
|
'redo',
|
||||||
|
'|',
|
||||||
|
'edit-mode',
|
||||||
|
'content-theme',
|
||||||
|
'code-theme',
|
||||||
|
{
|
||||||
|
name: 'more',
|
||||||
|
toolbar: [
|
||||||
|
'fullscreen',
|
||||||
|
'both',
|
||||||
|
'format',
|
||||||
|
'preview',
|
||||||
|
'info',
|
||||||
|
'help',
|
||||||
|
],
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
return new Vue.Vditor(data.id, {
|
||||||
|
toolbar,
|
||||||
|
mode: 'sv',
|
||||||
|
tab: '\t',
|
||||||
|
cache: {
|
||||||
|
enable: this.$route.params.article_id ? false : true,
|
||||||
|
id: this.$route.params.article_id ? this.$route.params.article_id : '',
|
||||||
|
},
|
||||||
|
after() {
|
||||||
|
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||||
|
},
|
||||||
|
preview: {
|
||||||
|
markdown: {
|
||||||
|
toc: true,
|
||||||
|
},
|
||||||
|
math: {
|
||||||
|
inlineDigit: true
|
||||||
|
},
|
||||||
|
delay: 500,
|
||||||
|
mode: data.mode,
|
||||||
|
/*url: `${process.env.Server}/api/console/markdown`,*/
|
||||||
|
parse: (element) => {
|
||||||
|
if (element.style.display === 'none') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// LazyLoadImage();
|
||||||
|
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
upload: {
|
||||||
|
max: 10 * 1024 * 1024,
|
||||||
|
url: this.tokenURL.URL,
|
||||||
|
linkToImgUrl: this.tokenURL.URL,
|
||||||
|
token: this.tokenURL.token,
|
||||||
|
filename: name => name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
|
||||||
|
},
|
||||||
|
height: data.height,
|
||||||
|
counter: 102400,
|
||||||
|
resize: {
|
||||||
|
enable: data.resize,
|
||||||
|
},
|
||||||
|
lang: this.$store.state.locale,
|
||||||
|
placeholder: data.placeholder,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleAvatarSuccess(res) {
|
||||||
|
let _ts = this;
|
||||||
|
if (res && res.data && res.data.url) {
|
||||||
|
let portfolio = _ts.portfolio;
|
||||||
|
portfolio.headImgUrl = res.data.url;
|
||||||
|
_ts.$set(_ts, 'portfolio', portfolio);
|
||||||
|
_ts.$set(_ts, 'headImgUrl', res.data.url);
|
||||||
|
} else {
|
||||||
|
_ts.$message.error('上传失败!');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeAvatarUpload(file) {
|
||||||
|
const isJPG = file.type === 'image/jpeg';
|
||||||
|
const isPNG = file.type === 'image/png';
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
|
||||||
|
if (!(isJPG || isPNG)) {
|
||||||
|
this.$message.error('上传图标只能是 JPG 或者 PNG 格式!');
|
||||||
|
}
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.$message.error('上传图标大小不能超过 2MB!');
|
||||||
|
}
|
||||||
|
return (isJPG || isPNG) && isLt2M;
|
||||||
|
},
|
||||||
|
async updatePortfolio() {
|
||||||
|
let _ts = this;
|
||||||
|
_ts.$set(_ts, 'loading', true);
|
||||||
|
let id = _ts.idPortfolio;
|
||||||
|
let portfolioDescription = _ts.contentEditor.getValue();
|
||||||
|
let portfolioDescriptionHtml = await _ts.contentEditor.getHTML();
|
||||||
|
let data = _ts.portfolio;
|
||||||
|
data.portfolioDescription = portfolioDescription;
|
||||||
|
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
||||||
|
let title = id ? '更新' : '添加';
|
||||||
|
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||||
|
if (res && res.message) {
|
||||||
|
_ts.$message.error(res.message);
|
||||||
|
} else {
|
||||||
|
_ts.contentEditor.setValue(res.portfolioDescription);
|
||||||
|
_ts.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: title + '成功!'
|
||||||
|
});
|
||||||
|
_ts.$router.push({
|
||||||
|
path: '/portfolio/' + res.idPortfolio
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_ts.$set(_ts, 'loading', false)
|
||||||
|
}).catch(error => _ts.$set(_ts, 'loading', false))
|
||||||
|
},
|
||||||
|
deletePortfolio() {
|
||||||
|
let _ts = this;
|
||||||
|
_ts.$confirm('确定删除吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
_ts.$axios.$delete('/portfolio/delete', {
|
||||||
|
params: {
|
||||||
|
idPortfolio: _ts.idPortfolio
|
||||||
|
}
|
||||||
|
}).then(function (res) {
|
||||||
|
if (res) {
|
||||||
|
if (res.message) {
|
||||||
|
_ts.$message(res.message);
|
||||||
|
} else {
|
||||||
|
_ts.$router.push({
|
||||||
|
path: '/user/' + _ts.$store.state.oauth.nickname
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
_ts.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: '已取消'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let _ts = this;
|
||||||
|
_ts.$store.commit("setActiveMenu", "portfolio-post");
|
||||||
|
this.$axios.$get('/api/upload/simple/token').then(function (res) {
|
||||||
|
if (res) {
|
||||||
|
_ts.$store.commit('setUploadHeaders', res.uploadToken);
|
||||||
|
_ts.$set(_ts, 'tokenURL', {
|
||||||
|
token: res.uploadToken || '',
|
||||||
|
URL: res.uploadURL || '',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let portfolioContent = '';
|
||||||
|
if (_ts.idPortfolio) {
|
||||||
|
_ts.$set(_ts, 'isEdit', true);
|
||||||
|
_ts.$set(_ts, 'portfolio', _ts.portfolioDetail);
|
||||||
|
_ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
|
||||||
|
portfolioContent = _ts.portfolioDetail.portfolioDescription
|
||||||
|
} else {
|
||||||
|
_ts.$set(_ts, 'isEdit', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.contentEditor = this._initEditor({
|
||||||
|
id: 'contentEditor',
|
||||||
|
mode: 'both',
|
||||||
|
height: 480,
|
||||||
|
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||||
|
resize: false,
|
||||||
|
value: portfolioContent
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "~vditor/src/assets/scss/index.scss";
|
||||||
|
</style>
|
||||||
@ -1,7 +1,8 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { isBrowser } from '~/environment';
|
import { isBrowser } from '~/environment';
|
||||||
|
|
||||||
export const PORTFOLIO_API_PATH = '/api/console'
|
export const BASE_API_PATH = '/api/console'
|
||||||
|
export const PORTFOLIO_API_PATH = '/api/portfolio'
|
||||||
|
|
||||||
const getDefaultListData = () => {
|
const getDefaultListData = () => {
|
||||||
return {
|
return {
|
||||||
@ -23,6 +24,10 @@ export const state = () => {
|
|||||||
articles: {
|
articles: {
|
||||||
articles: [],
|
articles: [],
|
||||||
pagination: {}
|
pagination: {}
|
||||||
|
},
|
||||||
|
unbindArticles: {
|
||||||
|
articles: [],
|
||||||
|
pagination: {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -51,6 +56,10 @@ export const mutations = {
|
|||||||
state.articles.articles = action.articles
|
state.articles.articles = action.articles
|
||||||
state.articles.pagination = action.pagination
|
state.articles.pagination = action.pagination
|
||||||
},
|
},
|
||||||
|
updateUnbindArticleList(state, action) {
|
||||||
|
state.unbindArticles.articles = action.articles
|
||||||
|
state.unbindArticles.pagination = action.pagination
|
||||||
|
},
|
||||||
|
|
||||||
// 更新作品集阅读全文状态
|
// 更新作品集阅读全文状态
|
||||||
updateDetailRenderedState(state, action) {
|
updateDetailRenderedState(state, action) {
|
||||||
@ -75,7 +84,7 @@ export const actions = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return this.$axios
|
return this.$axios
|
||||||
.$get(`${PORTFOLIO_API_PATH}/portfolios`, {
|
.$get(`${BASE_API_PATH}/portfolios`, {
|
||||||
params: data
|
params: data
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
@ -103,7 +112,7 @@ export const actions = {
|
|||||||
commit('updateDetailFetching', true)
|
commit('updateDetailFetching', true)
|
||||||
// commit('updateDetailData', {})
|
// commit('updateDetailData', {})
|
||||||
return this.$axios
|
return this.$axios
|
||||||
.$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}`)
|
.$get(`${BASE_API_PATH}/portfolio/${params.portfolio_id}`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
commit('updateDetailData', response)
|
commit('updateDetailData', response)
|
||||||
@ -122,9 +131,9 @@ export const actions = {
|
|||||||
fetchArticleList({commit}, params) {
|
fetchArticleList({commit}, params) {
|
||||||
commit('updateDetailFetching', true)
|
commit('updateDetailFetching', true)
|
||||||
return this.$axios
|
return this.$axios
|
||||||
.$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}/articles`, {
|
.$get(`${BASE_API_PATH}/portfolio/${params.portfolio_id}/articles`, {
|
||||||
params: {
|
params: {
|
||||||
page: params.page
|
page: params.page || 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
@ -134,5 +143,55 @@ export const actions = {
|
|||||||
.catch(error => {
|
.catch(error => {
|
||||||
commit('updateDetailFetching', false)
|
commit('updateDetailFetching', false)
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
fetchUnBindArticleList({commit}, params) {
|
||||||
|
commit('updateDetailFetching', true)
|
||||||
|
return this.$axios
|
||||||
|
.$get(`${PORTFOLIO_API_PATH}/${params.portfolio_id}/unbind-articles`, {
|
||||||
|
params: {
|
||||||
|
page: params.page || 1,
|
||||||
|
searchText: params.searchText || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
commit('updateUnbindArticleList', response)
|
||||||
|
commit('updateDetailFetching', false)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
commit('updateDetailFetching', false)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fetchPostDetail({ commit }, params = {}) {
|
||||||
|
// const delay = fetchDelay(
|
||||||
|
// isBrowser
|
||||||
|
// )
|
||||||
|
// if (isBrowser) {
|
||||||
|
// Vue.nextTick(() => {
|
||||||
|
// window.scrollTo(0, 300);
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (typeof params.portfolio_id === 'undefined') {
|
||||||
|
commit('updateDetailData', getDefaultListData())
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
commit('updateDetailFetching', true)
|
||||||
|
// commit('updateDetailData', {})
|
||||||
|
return this.$axios
|
||||||
|
.$get(`${PORTFOLIO_API_PATH}/detail/${params.portfolio_id}`)
|
||||||
|
.then(response => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
commit('updateDetailData', response)
|
||||||
|
commit('updateDetailFetching', false)
|
||||||
|
resolve(response)
|
||||||
|
// delay(() => {
|
||||||
|
// resolve(response)
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
commit('updateDetailFetching', false)
|
||||||
|
return Promise.reject(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user