修改：文章管理界面
This commit is contained in:
jmal
parent
f44366a166
commit
44614a803f
@ -5,7 +5,7 @@
|
||||
|
||||
import { Icon } from 'ant-design-vue'
|
||||
const IconFont = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_7y6nutfxwm5.js'
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_50pffzulki7.js'
|
||||
})
|
||||
|
||||
export default {
|
||||
|
||||
@ -804,7 +804,7 @@ export default {
|
||||
this.$refs.fileListTable.clearSelection()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听返回
|
||||
if (window.history && window.history.pushState) {
|
||||
history.pushState(null, null, document.URL);
|
||||
window.addEventListener('popstate', this.goBack, false);
|
||||
@ -1472,7 +1472,7 @@ export default {
|
||||
},
|
||||
// 新建文档
|
||||
newDocument() {
|
||||
this.$router.push(`/markdown/editor`)
|
||||
window.open(`/setting/website/manager-articles?operation=new`, "_blank");
|
||||
},
|
||||
newFolder() {
|
||||
this.newFolderName = this.getNewFileName(this.fileList, '新建文件夹')
|
||||
@ -2300,7 +2300,7 @@ export default {
|
||||
break
|
||||
case 'edit':
|
||||
// 编辑
|
||||
this.$router.push(`/markdown/editor?id=${this.rowContextData.id}`)
|
||||
this.$router.push(`/setting/website/manager-articles?operation=editor&id=${this.rowContextData.id}`)
|
||||
break
|
||||
case 'open':
|
||||
// 打开
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
<breadcrumb class="breadcrumb-container" />
|
||||
|
||||
<div class="right-content">
|
||||
|
||||
<div class="right-content-button">
|
||||
<router-link target="_blank" to="/articles">
|
||||
<svg-icon icon-class="WEBSITE"></svg-icon>网站
|
||||
</router-link></div>
|
||||
<div class="right-username">{{username}}</div>
|
||||
<div class="right-menu">
|
||||
<el-dropdown class="avatar-container" trigger="click">
|
||||
@ -190,7 +193,22 @@ export default {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.el-dropdown-menu__item svg {
|
||||
margin-right: 5px;
|
||||
|
||||
.right-content-button {
|
||||
line-height: 50px;
|
||||
margin-right: 10px;
|
||||
padding: 0 10px;
|
||||
&:hover {
|
||||
background-color: #00000006;
|
||||
}
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -194,6 +194,7 @@ export const constantRoutes = [
|
||||
{
|
||||
path: 'articles',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: `${document.location.protocol}//${window.location.host}/articles`,
|
||||
@ -229,7 +230,7 @@ export const constantRoutes = [
|
||||
path: '/setting/website',
|
||||
component: Layout,
|
||||
name: 'website',
|
||||
meta: { title: '网站管理', icon: 'wangzhan'},
|
||||
meta: { title: '网站管理', icon: 'wangzhanguanli'},
|
||||
children: [
|
||||
{
|
||||
path: 'manager-articles',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-wechat-title="'编辑:'+filename">
|
||||
<div>
|
||||
<dir-tree ref="dirTree" :append-to-body='true'>
|
||||
<el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
|
||||
</dir-tree>
|
||||
@ -24,8 +24,8 @@
|
||||
</div>
|
||||
<div class="editor-right">
|
||||
<div class="operation">
|
||||
<el-button class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
|
||||
<el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
|
||||
<el-button class="release-button" type="warning" size="small" @click="add" :loading="updating">保存草稿</el-button>
|
||||
<el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="updating">发布文章</el-button>
|
||||
<el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
|
||||
</div>
|
||||
<div class="more-setting">
|
||||
@ -40,11 +40,13 @@
|
||||
|
||||
<p class="mark-setting-label">分类：</p>
|
||||
<el-cascader
|
||||
v-model="categoryIds"
|
||||
class="mark-setting-input"
|
||||
placeholder="不选择"
|
||||
:collapse-tags="false"
|
||||
:options="categories"
|
||||
:show-all-levels="false"
|
||||
:props="{ checkStrictly: true }"
|
||||
:props="{ multiple: true, checkStrictly: true }"
|
||||
clearable></el-cascader>
|
||||
|
||||
</div>
|
||||
@ -128,6 +130,12 @@
|
||||
components: {
|
||||
DirTree, Vditor
|
||||
},
|
||||
props: {
|
||||
hasChange: {
|
||||
type: Boolean,
|
||||
defalut: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
file: {},
|
||||
@ -136,16 +144,20 @@
|
||||
filename: '',
|
||||
clientHeight: document.documentElement.clientHeight - 210,
|
||||
updating: false,
|
||||
adding: false,
|
||||
isFullScreen: false,
|
||||
storageLocation: '/',
|
||||
selectLocationVisible: false,
|
||||
moreSetting: false,
|
||||
contentEditor: '',
|
||||
categoryIds: [],
|
||||
categories: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('created')
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
this.getMarkdown()
|
||||
this.categoryTree()
|
||||
const that = this
|
||||
@ -154,9 +166,31 @@
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.contentEditor.destroy()
|
||||
console.log('destroyed')
|
||||
},
|
||||
watch: {
|
||||
file(){
|
||||
console.log('filename is changed')
|
||||
this.valueHasChanged()
|
||||
},
|
||||
filename(val){
|
||||
console.log('filename is changed')
|
||||
this.valueHasChanged()
|
||||
this.$emit('onTitle', val)
|
||||
},
|
||||
categoryIds(){
|
||||
console.log('categoryIds is changed')
|
||||
this.valueHasChanged()
|
||||
},
|
||||
storageLocation(){
|
||||
console.log('storageLocation is changed')
|
||||
this.valueHasChanged()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
valueHasChanged(){
|
||||
this.$emit('update:hasChange', true)
|
||||
},
|
||||
getMarkdown(){
|
||||
if(this.$route.query.id){
|
||||
this.editStatus = true
|
||||
@ -167,6 +201,11 @@
|
||||
this.content = this.file.contentText
|
||||
this.filename = this.file.name.split('.md')[0]
|
||||
this.storageLocation = res.data.path
|
||||
if(this.file.categoryIds){
|
||||
this.file.categoryIds.forEach(categoryId => {
|
||||
this.categoryIds.push(new Array(categoryId))
|
||||
})
|
||||
}
|
||||
// 初始化编辑器
|
||||
this.vditorInit(res.data.contentText)
|
||||
})
|
||||
@ -257,31 +296,56 @@
|
||||
imageFilter() {
|
||||
return true
|
||||
},
|
||||
checkParam(){
|
||||
if(!this.filename){
|
||||
this.$message.warning("请输入文章标题")
|
||||
return false
|
||||
}
|
||||
if(this.contentEditor.getValue().length < 2){
|
||||
this.$message.warning("请输入文章内容")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
// add
|
||||
add(){
|
||||
this.adding = true
|
||||
if(this.filename){
|
||||
const filename = this.filename + ".md"
|
||||
markdownApi.addMarkdown({
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
filename: filename,
|
||||
cover: this.markdownCover,
|
||||
currentDirectory: this.storageLocation,
|
||||
contentText: this.contentEditor.getValue()
|
||||
}).then((res) => {
|
||||
this.adding = false
|
||||
this.$message({
|
||||
message: "发布成功",
|
||||
type: 'success',
|
||||
duration : 1000
|
||||
});
|
||||
this.$router.push(`/`)
|
||||
})
|
||||
}
|
||||
this.update()
|
||||
// if(!this.checkParam()){
|
||||
// return
|
||||
// }
|
||||
// this.updating = true
|
||||
// const filename = this.filename + ".md"
|
||||
// markdownApi.addMarkdown({
|
||||
// userId: this.$store.state.user.userId,
|
||||
// username: this.$store.state.user.name,
|
||||
// filename: filename,
|
||||
// cover: this.file.cover,
|
||||
// categoryIds: this.getCategoryList(),
|
||||
// currentDirectory: this.storageLocation,
|
||||
// contentText: this.contentEditor.getValue()
|
||||
// }).then(() => {
|
||||
// this.updating = false
|
||||
// this.$message({
|
||||
// message: "发布成功",
|
||||
// type: 'success',
|
||||
// duration : 1000
|
||||
// });
|
||||
// }).catch(()=> {
|
||||
// this.updating = false
|
||||
// })
|
||||
},
|
||||
getCategoryList(){
|
||||
let categoryIdList = []
|
||||
this.categoryIds.forEach(categoryIds => {
|
||||
categoryIdList.push(categoryIds[0])
|
||||
})
|
||||
return categoryIdList
|
||||
},
|
||||
// update
|
||||
update(){
|
||||
if(!this.checkParam()){
|
||||
return
|
||||
}
|
||||
this.updating = true
|
||||
if(this.filename){
|
||||
const filename = this.filename + ".md"
|
||||
@ -290,16 +354,19 @@
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
filename: filename,
|
||||
cover: this.markdownCover,
|
||||
cover: this.file.cover,
|
||||
categoryIds: this.getCategoryList(),
|
||||
currentDirectory: this.storageLocation,
|
||||
contentText: this.contentEditor.getValue()
|
||||
}).then(() => {
|
||||
this.updating = false
|
||||
this.$message({
|
||||
message: "更新成功",
|
||||
message: "发布成功",
|
||||
type: 'success',
|
||||
duration : 1000
|
||||
});
|
||||
}).catch(()=> {
|
||||
this.updating = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<div class="container" v-wechat-title="title">
|
||||
<div class="container" v-wechat-title="pageTitle">
|
||||
<el-dialog
|
||||
title="新增文章"
|
||||
:title="pageTitle"
|
||||
:fullscreen="true"
|
||||
:visible.sync="newArticleDialogVisible"
|
||||
:before-close="handleClose"
|
||||
:destroy-on-close="true"
|
||||
@open="openDialog"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<markdown-editor></markdown-editor>
|
||||
<markdown-editor ref="editor" :has-change.sync="hasChange" @onTitle="onTitle"></markdown-editor>
|
||||
</el-dialog>
|
||||
<el-card class="box-card">
|
||||
<div class="box-card-header">
|
||||
@ -30,23 +33,87 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "文章管理",
|
||||
newArticleDialogVisible: false,
|
||||
pageTitle: '文章管理',
|
||||
hasChange: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
if(this.$route.query.operation){
|
||||
this.newArticleDialogVisible = true
|
||||
this.newArticleDialogVisible = !!this.$route.query.operation;
|
||||
// 监听返回
|
||||
if (window.history && window.history.pushState) {
|
||||
history.pushState(null, null, document.URL);
|
||||
window.addEventListener('popstate', this.goBack, false);
|
||||
}
|
||||
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
|
||||
},
|
||||
watch: {
|
||||
hasChange(val){
|
||||
if(val){
|
||||
window.onbeforeunload = function() {
|
||||
return "还有文件正在上传, 确定退出吗?";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeunloadFn(){
|
||||
console.log('beforeunloadFn')
|
||||
return '是的发生'
|
||||
},
|
||||
goBack() {
|
||||
const operation = this.$route.query.operation
|
||||
console.log(operation)
|
||||
if(operation){
|
||||
this.newArticleDialogVisible = true
|
||||
if(operation === 'new') {
|
||||
this.pageTitle = '撰写新文章'
|
||||
}
|
||||
if(operation === 'editor') {
|
||||
this.pageTitle = '编辑文章'
|
||||
}
|
||||
} else {
|
||||
this.newArticleDialogVisible = false
|
||||
}
|
||||
},
|
||||
newArticle() {
|
||||
this.newArticleDialogVisible = true
|
||||
this.$router.push({path: this.$route.path, query: {operation: 'new'}})
|
||||
},
|
||||
handleClose(done) {
|
||||
console.log(this.hasChange)
|
||||
if(this.hasChange){
|
||||
this.$confirm('还有未保存的内容，确定要离开吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
done()
|
||||
})
|
||||
return
|
||||
}
|
||||
done()
|
||||
},
|
||||
onTitle(val){
|
||||
const operation = this.$route.query.operation
|
||||
if(operation === 'new'){
|
||||
this.pageTitle = '撰写新文章 ' + val
|
||||
}
|
||||
if(operation === 'editor'){
|
||||
this.pageTitle = '编辑：' + val
|
||||
}
|
||||
},
|
||||
openDialog() {
|
||||
this.pageTitle = '撰写新文章'
|
||||
console.log('pageTitle')
|
||||
},
|
||||
closeDialog(){
|
||||
console.log('closeDialog')
|
||||
this.$router.replace({path: this.$route.path})
|
||||
window.onbeforeunload = null
|
||||
this.pageTitle = '文章管理'
|
||||
this.hasChange = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user