修改：文章管理页面
This commit is contained in:
jmal
parent
8cd2473a27
commit
4a34836e45
@ -1851,6 +1851,7 @@ footer .copyright {
|
||||
.l_body {
|
||||
position: relative;
|
||||
margin: 16px 16px 0 16px;
|
||||
min-height: calc(100vh - 70vh);
|
||||
}
|
||||
|
||||
.l_body.nocover {
|
||||
|
||||
@ -567,7 +567,7 @@
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
|
||||
}
|
||||
|
||||
/deep/ .markdown-body {
|
||||
/deep/ .article-body {
|
||||
border-radius: 0.5rem;
|
||||
blockquote {
|
||||
padding: 0.8em 1em;
|
||||
@ -623,48 +623,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
i.code-copy{
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 0;
|
||||
background-color: #464d5e;
|
||||
padding: 3px;
|
||||
margin: 3px 3px 0 0;
|
||||
font-size: 11px;
|
||||
border-radius: inherit;
|
||||
color: #f1f1f1;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
&:hover i.code-copy{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
code {
|
||||
background-size: unset!important;
|
||||
background: linear-gradient(to right, #5d9eea, #afcafd);
|
||||
color: #000;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
padding: 0.1rem 0.3rem 0.2rem;
|
||||
border-radius: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
pre code {
|
||||
background: unset;
|
||||
color: unset;
|
||||
opacity: unset;
|
||||
padding: unset;
|
||||
}
|
||||
.hljs code {
|
||||
background: unset;
|
||||
color: unset;
|
||||
opacity: unset;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.pre-numbering {
|
||||
}
|
||||
|
||||
#toggle-nav {
|
||||
|
||||
@ -4,6 +4,9 @@ export default {
|
||||
previewUrl: function(username, file) {
|
||||
return `${this.baseUrl}/file/${username}${file.path}${file.name}`
|
||||
},
|
||||
mardownPreviewUrl: function (path){
|
||||
return `${this.baseUrl}${path}`
|
||||
},
|
||||
publicPreviewUrl: function(fileIds) {
|
||||
return `${this.baseUrl}/public/preview/${fileIds}`
|
||||
},
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
<div class="editor-right">
|
||||
<div class="operation">
|
||||
<el-button class="release-button" type="warning" size="small" @click="add" :loading="updating">保存草稿</el-button>
|
||||
<el-button class="release-button" type="warning" size="small" @click="update" :loading="updating">保存草稿</el-button>
|
||||
<el-button class="release-button" type="primary" size="small" @click="update" :loading="updating">{{ editStatus?'发布文章':'更新文章' }}</el-button>
|
||||
</div>
|
||||
<div class="more-setting">
|
||||
@ -238,45 +238,45 @@
|
||||
},
|
||||
input: (val) => {
|
||||
this.valueHasChanged()
|
||||
}
|
||||
},
|
||||
upload: this.markdownImageUplaod()
|
||||
})
|
||||
},
|
||||
$imgAdd(pos, $file) {
|
||||
const maxSize = 1024 * 1024 * 5
|
||||
if($file.size > maxSize){
|
||||
this.$message({
|
||||
message: '请选择小于5M的图片！ 大于5M的图片将无法上传',
|
||||
type: 'warning',
|
||||
duration: 3000,
|
||||
});
|
||||
return
|
||||
}
|
||||
// 第一步.将图片上传到服务器.
|
||||
let data = new FormData();
|
||||
data.append('filename', this.filename)
|
||||
data.append('username', this.$store.state.user.name)
|
||||
data.append('userId', this.$store.state.user.userId);
|
||||
data.append('file', $file);
|
||||
uploadApi.uploadImage(data).then((res) => {
|
||||
// 第二步.将返回的url替换到文本原位置 -> 
|
||||
/**
|
||||
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
|
||||
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
|
||||
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
|
||||
*/
|
||||
// const url = process.env.VUE_APP_BASE_FILE_API + '/public/image/' + res.data
|
||||
const url = fileConfig.publicPreviewUrl(res.data);
|
||||
console.log(url)
|
||||
this.$refs.md.$img2Url(pos, url);
|
||||
})
|
||||
},
|
||||
$imgDel(pos, $file) {
|
||||
},
|
||||
// 所有操作都会被解析重新渲染
|
||||
change(value, render){
|
||||
// render 为 markdown 解析后的结果[html]
|
||||
this.html = render;
|
||||
},
|
||||
markdownImageUplaod(){
|
||||
return {
|
||||
accept: 'image/*,.mp3, .wav, .rar',
|
||||
headers: {
|
||||
'jmal-token': this.$store.state.user.token
|
||||
},
|
||||
url: '/api/upload-markdown-image',
|
||||
extraData: {
|
||||
'filename': this.filename,
|
||||
'username': this.$store.state.user.name,
|
||||
'userId': this.$store.state.user.userId
|
||||
},
|
||||
fieldName: 'files',
|
||||
filename (name) {
|
||||
return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
|
||||
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
|
||||
replace('/\\s/g', '')
|
||||
},
|
||||
format(files, responseText) {
|
||||
let response = JSON.parse(responseText)
|
||||
let succMap = {}
|
||||
response.data.forEach(map => {
|
||||
succMap[map.filename] = fileConfig.mardownPreviewUrl(map.filepath)
|
||||
})
|
||||
response.data = {}
|
||||
response.data['succMap'] = succMap
|
||||
return JSON.stringify(response)
|
||||
}
|
||||
}
|
||||
},
|
||||
fullScreen(status) {
|
||||
this.isFullScreen = status
|
||||
this.reHeight()
|
||||
@ -334,6 +334,7 @@
|
||||
currentDirectory: this.storageLocation,
|
||||
contentText: this.contentEditor.getValue()
|
||||
}).then(() => {
|
||||
this.$emit('update:hasChange', false)
|
||||
this.updating = false
|
||||
this.$message({
|
||||
message: "发布成功",
|
||||
|
||||
@ -57,19 +57,15 @@
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:show-overflow-tooltip="true"
|
||||
min-width="250"
|
||||
min-width="200"
|
||||
label="标题">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip :content="'编辑 '+scope.row.name" placement="top">
|
||||
<router-link :to="'/setting/website/manager-articles?operation=editor&id='+scope.row.id" target="_blank">{{scope.row.name}}<svg-icon icon-class="bianji-"></svg-icon></router-link>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="'浏览 '+scope.row.name" placement="top">
|
||||
<router-link :to="'/articles/article?mark='+scope.row.id" target="_blank"><svg-icon class="wailian" icon-class="wailian"></svg-icon></router-link>
|
||||
</el-tooltip>
|
||||
<router-link :title="'编辑 '+scope.row.name" :to="'/setting/website/manager-articles?operation=editor&id='+scope.row.id" target="_blank">{{scope.row.name}}<svg-icon icon-class="bianji-"></svg-icon></router-link>
|
||||
<router-link :title="'浏览 '+scope.row.name" :to="'/articles/article?mark='+scope.row.id" target="_blank"><svg-icon class="wailian" icon-class="wailian"></svg-icon></router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="100"
|
||||
width="150"
|
||||
label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" type="success">{{ scope.row.release?'已发布':'未发布' }}</el-tag>
|
||||
@ -88,8 +84,8 @@
|
||||
label="分类">
|
||||
<template slot-scope="scope">
|
||||
<span v-for="(category,i) in scope.row.categories">
|
||||
{{i>0?' ,':''}}
|
||||
<router-link to="#">{{category.name}}</router-link>
|
||||
{{i===0?' ,':''}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -133,8 +129,8 @@ export default {
|
||||
hasChange: false,
|
||||
articleList: [],
|
||||
pagination: {
|
||||
pageIndex: 1,
|
||||
pageSize: 15,
|
||||
pageIndex: this.$route.query.page ? parseInt(decodeURI(this.$route.query.page)) : 1,
|
||||
pageSize: 12,
|
||||
total: 0,
|
||||
},
|
||||
categories: [],
|
||||
@ -163,6 +159,8 @@ export default {
|
||||
window.onbeforeunload = function() {
|
||||
return "还有文件正在上传, 确定退出吗?"
|
||||
}
|
||||
}else {
|
||||
window.onbeforeunload = null
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -173,7 +171,6 @@ export default {
|
||||
},
|
||||
goBack() {
|
||||
const operation = this.$route.query.operation
|
||||
console.log(operation)
|
||||
if(operation){
|
||||
this.newArticleDialogVisible = true
|
||||
if(operation === 'new') {
|
||||
@ -192,16 +189,16 @@ export default {
|
||||
this.pagination.total = res.count
|
||||
this.$nextTick(() => {
|
||||
this.isLoading = false
|
||||
this.pagination.pageIndex = parseInt(decodeURI(this.$route.query.page))
|
||||
})
|
||||
})
|
||||
},
|
||||
currentChange() {
|
||||
this.getMarkDown()
|
||||
this.$router.push({query: {page : this.pagination.pageIndex}})
|
||||
this.getArticleList()
|
||||
},
|
||||
newArticle() {
|
||||
this.newArticleDialogVisible = true
|
||||
this.$router.push({path: this.$route.path, query: {operation: 'new'}})
|
||||
this.$router.push({query: {operation: 'new'}})
|
||||
},
|
||||
categoryTree() {
|
||||
categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
|
||||
@ -209,7 +206,6 @@ export default {
|
||||
})
|
||||
},
|
||||
handleClose(done) {
|
||||
console.log(this.hasChange)
|
||||
if(this.hasChange){
|
||||
this.$confirm('还有未保存的内容，确定要离开吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
@ -233,10 +229,8 @@ export default {
|
||||
},
|
||||
openDialog() {
|
||||
this.pageTitle = '撰写新文章'
|
||||
console.log('pageTitle')
|
||||
},
|
||||
closeDialog(){
|
||||
console.log('closeDialog')
|
||||
this.$router.replace({path: this.$route.path})
|
||||
window.onbeforeunload = null
|
||||
this.pageTitle = '文章管理'
|
||||
@ -253,4 +247,7 @@ export default {
|
||||
.wailian {
|
||||
margin-left: 8px;
|
||||
}
|
||||
/deep/.el-card__body {
|
||||
min-width: 1080px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user