feat(components): 产品信息编辑功能
This commit is contained in:
ronger
parent
9b918f8c3d
commit
ea3b668475
439
pages/admin/product/post/_product_id.vue
Normal file
439
pages/admin/product/post/_product_id.vue
Normal file
@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<el-row class="products">
|
||||
<el-col v-if="hasPermissions">
|
||||
<el-col>
|
||||
<el-input
|
||||
v-model="productTitle"
|
||||
class="product-title"
|
||||
placeholder="请输入标题"
|
||||
@change="setLocalstorage('title',productTitle)">
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div id="contentEditor"></div>
|
||||
</el-col>
|
||||
<el-col style="margin-top: 1rem;">
|
||||
<el-select
|
||||
style="width: 100%;"
|
||||
v-model="productTags"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
remote
|
||||
:remote-method="remoteMethod"
|
||||
placeholder="请选择文章标签"
|
||||
:loading="loading"
|
||||
@change="setLocalstorage('tags',productTags)">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">
|
||||
<el-button :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
|
||||
<el-button type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
|
||||
</el-col>
|
||||
<el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">
|
||||
<el-button type="danger" :loading="doLoading" @click="deleteArticle" plain>删除</el-button>
|
||||
<el-button v-if="productStatus === '1'" :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
|
||||
<el-button v-if="productStatus === '0'" :loading="doLoading" type="primary" @click="postArticle" plain>更新</el-button>
|
||||
<el-button v-else type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col v-else class="text-center">
|
||||
<el-alert
|
||||
title="用户无权限"
|
||||
type="warning"
|
||||
center
|
||||
show-icon
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {mapState} from 'vuex';
|
||||
import apiConfig from '~/config/api.config';
|
||||
|
||||
export default {
|
||||
name: "PostArticle",
|
||||
middleware: 'auth',
|
||||
validate({params, store}) {
|
||||
if (typeof params.product_id === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
return params.product_id && !isNaN(Number(params.product_id))
|
||||
},
|
||||
asyncData({store, params, error}) {
|
||||
return Promise.all([
|
||||
store.dispatch('product/fetchPostDetail', params)
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
product: state => state.product.detail.data
|
||||
}),
|
||||
hasPermissions() {
|
||||
let account = this.$store.state.auth.user?.nickname;
|
||||
if (account) {
|
||||
if (this.$route.params.product_id) {
|
||||
if (account === this.product.productAuthor.userNickname) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return this.$auth.hasScope('blog_admin') || this.$auth.hasScope('admin');
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contentEditor: null,
|
||||
tokenURL: {
|
||||
URL: '',
|
||||
linkToImageURL: '',
|
||||
token: ''
|
||||
},
|
||||
idArticle: 0,
|
||||
productTitle: '',
|
||||
productContent: '',
|
||||
productType: 0,
|
||||
productTags: [],
|
||||
productStatus: '0',
|
||||
options: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
doLoading: false,
|
||||
isEdit: false,
|
||||
notificationFlag: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_initEditor(data) {
|
||||
let _ts = this;
|
||||
|
||||
let 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',
|
||||
{
|
||||
name: 'more',
|
||||
toolbar: [
|
||||
'fullscreen',
|
||||
'both',
|
||||
'preview',
|
||||
'info'
|
||||
],
|
||||
}]
|
||||
return new Vue.Vditor(data.id, {
|
||||
toolbar,
|
||||
mode: 'sv',
|
||||
tab: '\t',
|
||||
cdn: apiConfig.VDITOR,
|
||||
cache: {
|
||||
enable: this.$route.params.product_id ? false : true,
|
||||
id: this.$route.params.product_id ? this.$route.params.product_id : '',
|
||||
},
|
||||
after() {
|
||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||
},
|
||||
hint: {
|
||||
emoji: Vue.emoji
|
||||
},
|
||||
preview: {
|
||||
hljs: {
|
||||
enable: true,
|
||||
lineNumber: true,
|
||||
style: 'github'
|
||||
},
|
||||
markdown: {
|
||||
toc: true,
|
||||
autoSpace: 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);
|
||||
},
|
||||
theme: {
|
||||
cdn: apiConfig.VDITOR_CSS
|
||||
}
|
||||
},
|
||||
upload: {
|
||||
max: 10 * 1024 * 1024,
|
||||
url: this.tokenURL.URL,
|
||||
linkToImgUrl: this.tokenURL.linkToImageURL,
|
||||
token: this.tokenURL.token,
|
||||
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
|
||||
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
|
||||
replace('/\\s/g', '')
|
||||
},
|
||||
height: data.height,
|
||||
counter: 102400,
|
||||
resize: {
|
||||
enable: data.resize,
|
||||
},
|
||||
lang: this.$store.state.locale,
|
||||
placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
setLocalstorage(type) {
|
||||
if (typeof arguments[0] === 'object') {
|
||||
localStorage.setItem('productTags', arguments[1]);
|
||||
return
|
||||
}
|
||||
switch (type) {
|
||||
case 'title': {
|
||||
localStorage.setItem('product-title', arguments[1])
|
||||
break;
|
||||
}
|
||||
case 'tags': {
|
||||
localStorage.setItem('product-tags', arguments[1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options = [];
|
||||
}
|
||||
},
|
||||
deleteArticle() {
|
||||
let _ts = this;
|
||||
_ts.doLoading = true;
|
||||
this.$confirm('确定删除吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let id = _ts.$route.params.product_id;
|
||||
_ts.$axios.$delete('/api/product/delete/' + id).then(function (res) {
|
||||
if (res && res.message) {
|
||||
_ts.$message(res.message);
|
||||
return false;
|
||||
}
|
||||
localStorage.removeItem('product-title');
|
||||
localStorage.removeItem('product-tags');
|
||||
_ts.contentEditor.setValue('');
|
||||
_ts.$set(_ts, 'notificationFlag', false);
|
||||
_ts.$router.push({
|
||||
name: 'index'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
_ts.doLoading = false;
|
||||
});
|
||||
|
||||
},
|
||||
async postArticle() {
|
||||
let _ts = this;
|
||||
_ts.doLoading = true;
|
||||
let id = _ts.$route.params.product_id;
|
||||
let productContent = _ts.contentEditor.getValue();
|
||||
let productContentHtml = await _ts.contentEditor.getHTML();
|
||||
if (!(_ts.productTitle && productContent)) {
|
||||
_ts.$message("标题/正文不能为空！");
|
||||
_ts.doLoading = false;
|
||||
return false;
|
||||
}
|
||||
let product = {
|
||||
idArticle: _ts.idArticle,
|
||||
productTitle: _ts.productTitle,
|
||||
productContent: productContent,
|
||||
productContentHtml: productContentHtml,
|
||||
productTags: _ts.productTags.join(","),
|
||||
productStatus: 0
|
||||
};
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
|
||||
if (res) {
|
||||
if (res.message) {
|
||||
_ts.$message(res.message);
|
||||
_ts.doLoading = false;
|
||||
return false;
|
||||
}
|
||||
localStorage.removeItem('product-title');
|
||||
localStorage.removeItem('product-tags');
|
||||
_ts.contentEditor.setValue('');
|
||||
_ts.$store.commit('product/clearDetailData')
|
||||
_ts.$set(_ts, 'notificationFlag', false);
|
||||
_ts.$router.push({
|
||||
path: `/product/${res}`
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
async saveArticle() {
|
||||
let _ts = this;
|
||||
_ts.doLoading = true;
|
||||
let id = _ts.$route.params.product_id;
|
||||
let productContent = _ts.contentEditor.getValue();
|
||||
let productContentHtml = await _ts.contentEditor.getHTML();
|
||||
if (!(_ts.productTitle && productContent)) {
|
||||
_ts.$message("标题/正文不能为空！");
|
||||
_ts.doLoading = false;
|
||||
return false;
|
||||
}
|
||||
let product = {
|
||||
idArticle: _ts.idArticle,
|
||||
productTitle: _ts.productTitle,
|
||||
productContent: productContent,
|
||||
productContentHtml: productContentHtml,
|
||||
productTags: _ts.productTags.join(","),
|
||||
productStatus: 1
|
||||
};
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
|
||||
if (res) {
|
||||
if (res.message) {
|
||||
_ts.$message(res.message);
|
||||
_ts.doLoading = false;
|
||||
return false;
|
||||
}
|
||||
localStorage.removeItem('product-title');
|
||||
localStorage.removeItem('product-tags');
|
||||
_ts.contentEditor.setValue('');
|
||||
_ts.$set(_ts, 'notificationFlag', false);
|
||||
_ts.$router.push({
|
||||
path: `/draft/${res}`
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getTags() {
|
||||
let _ts = this;
|
||||
_ts.$axios.$get('/api/tag/tags').then(function (res) {
|
||||
if (res) {
|
||||
_ts.$set(_ts, 'list', res);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
let _ts = this;
|
||||
if (_ts.notificationFlag) {
|
||||
_ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
next();
|
||||
}).catch(() => {
|
||||
return false
|
||||
});
|
||||
_ts.$store.commit("setActiveMenu", "product-post");
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.onbeforeunload = null;
|
||||
},
|
||||
async mounted() {
|
||||
if (!this.hasPermissions) {
|
||||
return
|
||||
}
|
||||
window.addEventListener('beforeunload', e => {
|
||||
e = e || window.event;
|
||||
|
||||
// 兼容IE8和Firefox 4之前的版本
|
||||
if (e) {
|
||||
e.returnValue = '关闭提示';
|
||||
}
|
||||
|
||||
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
|
||||
return '关闭提示';
|
||||
});
|
||||
let _ts = this;
|
||||
_ts.$store.commit('setActiveMenu', 'product-post');
|
||||
const responseData = await _ts.$axios.$get('/api/upload/token');
|
||||
if (responseData) {
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: responseData.uploadToken || '',
|
||||
URL: responseData.uploadURL || '',
|
||||
linkToImageURL: responseData.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
|
||||
_ts.getTags();
|
||||
Vue.nextTick(() => {
|
||||
let productContent = '';
|
||||
if (_ts.$route.params.product_id) {
|
||||
_ts.$set(_ts, 'isEdit', true);
|
||||
let product = _ts.product;
|
||||
_ts.$set(_ts, 'idArticle', product.idArticle);
|
||||
_ts.$set(_ts, 'productTitle', product.productTitle);
|
||||
_ts.$set(_ts, 'productContent', product.productContent);
|
||||
_ts.$set(_ts, 'productStatus', product.productStatus);
|
||||
_ts.$set(_ts, 'productTags', (product.productTags).split(','));
|
||||
localStorage.setItem("product-title", product.productTitle);
|
||||
localStorage.setItem("product-tags", (product.productTags).split(','));
|
||||
productContent = product.productContent
|
||||
} else {
|
||||
_ts.$set(_ts, 'isEdit', false);
|
||||
}
|
||||
_ts.contentEditor = _ts._initEditor({
|
||||
id: 'contentEditor',
|
||||
mode: 'both',
|
||||
height: 480,
|
||||
placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
|
||||
resize: false,
|
||||
value: productContent
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "~vditor/src/assets/less/index.less";
|
||||
</style>
|
||||
@ -155,7 +155,11 @@ export default {
|
||||
rows: _ts.products.pageSize
|
||||
})
|
||||
},
|
||||
handleEdit(index ,row) {}
|
||||
handleEdit(index ,row) {
|
||||
this.$router.push({
|
||||
path: `/admin/product/post/${row.idProduct}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user