mirror of https://github.com/halo-dev/halo
326 lines
9.6 KiB
Vue
326 lines
9.6 KiB
Vue
<template>
|
|
<div class="page-header-index-wide">
|
|
<a-row :gutter="12">
|
|
<a-col :span="24">
|
|
<div style="margin-bottom: 16px">
|
|
<a-input
|
|
v-model="sheetToStage.title"
|
|
v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
|
|
size="large"
|
|
placeholder="请输入页面标题"
|
|
/>
|
|
</div>
|
|
<div id="editor">
|
|
<mavon-editor
|
|
ref="md"
|
|
v-model="sheetToStage.originalContent"
|
|
:boxShadow="false"
|
|
:toolbars="toolbars"
|
|
:ishljs="true"
|
|
:autofocus="false"
|
|
@imgAdd="pictureUploadHandle"
|
|
/>
|
|
</div>
|
|
</a-col>
|
|
|
|
<a-col
|
|
:xl="24"
|
|
:lg="24"
|
|
:md="24"
|
|
:sm="24"
|
|
:xs="24"
|
|
>
|
|
<a-drawer
|
|
title="页面设置"
|
|
:width="isMobile()?'100%':'460'"
|
|
:closable="true"
|
|
@close="()=>this.sheetSettingVisible = false"
|
|
:visible="sheetSettingVisible"
|
|
>
|
|
<div class="post-setting-drawer-content">
|
|
<div :style="{ marginBottom: '16px' }">
|
|
<h3 class="post-setting-drawer-title">基本设置</h3>
|
|
<div class="post-setting-drawer-item">
|
|
<a-form layout="vertical">
|
|
<a-form-item
|
|
label="页面路径："
|
|
:help="options.blog_url+'/s/'+ (sheetToStage.url ? sheetToStage.url : '{auto_generate}')"
|
|
>
|
|
<a-input v-model="sheetToStage.url" />
|
|
</a-form-item>
|
|
<a-form-item label="开启评论：">
|
|
<a-radio-group
|
|
v-model="sheetToStage.disallowComment"
|
|
:defaultValue="false"
|
|
>
|
|
<a-radio :value="false">开启</a-radio>
|
|
<a-radio :value="true">关闭</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="发表时间："
|
|
>
|
|
<a-date-picker
|
|
showTime
|
|
:defaultValue="pickerDefaultValue"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
placeholder="Select Publish Time"
|
|
@change="onChange"
|
|
@ok="onOk"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="自定义模板：">
|
|
<a-select v-model="sheetToStage.template">
|
|
<a-select-option
|
|
key=""
|
|
value=""
|
|
>无</a-select-option>
|
|
<a-select-option
|
|
v-for="tpl in customTpls"
|
|
:key="tpl"
|
|
:value="tpl"
|
|
>{{ tpl }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
<a-divider />
|
|
|
|
<div :style="{ marginBottom: '16px' }">
|
|
<h3 class="post-setting-drawer-title">缩略图</h3>
|
|
<div class="post-setting-drawer-item">
|
|
<div class="sheet-thum">
|
|
<img
|
|
class="img"
|
|
:src="sheetToStage.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
|
|
@click="()=>this.thumDrawerVisible = true"
|
|
>
|
|
<a-button
|
|
class="sheet-thum-remove"
|
|
type="dashed"
|
|
@click="handlerRemoveThumb"
|
|
>移除</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-divider class="divider-transparent" />
|
|
</div>
|
|
<AttachmentSelectDrawer
|
|
v-model="thumDrawerVisible"
|
|
@listenToSelect="handleSelectSheetThumb"
|
|
:drawerWidth="460"
|
|
/>
|
|
<div class="bottom-control">
|
|
<a-button
|
|
style="marginRight: 8px"
|
|
@click="handleDraftClick"
|
|
>保存草稿</a-button>
|
|
<a-button
|
|
type="primary"
|
|
@click="handlePublishClick"
|
|
>发布</a-button>
|
|
</div>
|
|
</a-drawer>
|
|
</a-col>
|
|
</a-row>
|
|
<AttachmentDrawer v-model="attachmentDrawerVisible" />
|
|
<footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
|
|
<a-button
|
|
type="primary"
|
|
@click="()=>this.sheetSettingVisible = true"
|
|
>发布</a-button>
|
|
<a-button
|
|
type="dashed"
|
|
style="margin-left: 8px;"
|
|
@click="()=>this.attachmentDrawerVisible = true"
|
|
>附件库</a-button>
|
|
</footer-tool-bar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mavonEditor } from 'mavon-editor'
|
|
import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
|
|
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
|
|
import FooterToolBar from '@/components/FooterToolbar'
|
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
|
import { toolbars } from '@/core/const'
|
|
import 'mavon-editor/dist/css/index.css'
|
|
import sheetApi from '@/api/sheet'
|
|
import themeApi from '@/api/theme'
|
|
import optionApi from '@/api/option'
|
|
import attachmentApi from '@/api/attachment'
|
|
import moment from 'moment'
|
|
export default {
|
|
components: {
|
|
mavonEditor,
|
|
FooterToolBar,
|
|
AttachmentDrawer,
|
|
AttachmentSelectDrawer
|
|
},
|
|
mixins: [mixin, mixinDevice],
|
|
data() {
|
|
return {
|
|
toolbars,
|
|
wrapperCol: {
|
|
xl: { span: 24 },
|
|
sm: { span: 24 },
|
|
xs: { span: 24 }
|
|
},
|
|
attachmentDrawerVisible: false,
|
|
thumDrawerVisible: false,
|
|
sheetSettingVisible: false,
|
|
customTpls: [],
|
|
sheetToStage: {},
|
|
timer: null,
|
|
options: [],
|
|
keys: ['blog_url']
|
|
}
|
|
},
|
|
created() {
|
|
this.loadCustomTpls()
|
|
this.loadOptions()
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
this.autoSaveTimer()
|
|
},
|
|
destroyed: function() {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
},
|
|
beforeRouteLeave(to, from, next) {
|
|
if (this.timer !== null) {
|
|
clearInterval(this.timer)
|
|
}
|
|
// Auto save the sheet
|
|
this.autoSaveSheet()
|
|
next()
|
|
},
|
|
beforeRouteEnter(to, from, next) {
|
|
// Get sheetId id from query
|
|
const sheetId = to.query.sheetId
|
|
|
|
next(vm => {
|
|
if (sheetId) {
|
|
sheetApi.get(sheetId).then(response => {
|
|
const sheet = response.data.data
|
|
vm.sheetToStage = sheet
|
|
})
|
|
}
|
|
})
|
|
},
|
|
computed: {
|
|
pickerDefaultValue() {
|
|
if (this.sheetToStage.createTime) {
|
|
var date = new Date(this.sheetToStage.createTime)
|
|
return moment(date, 'YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
},
|
|
methods: {
|
|
loadCustomTpls() {
|
|
themeApi.customTpls().then(response => {
|
|
this.customTpls = response.data.data
|
|
})
|
|
},
|
|
loadOptions() {
|
|
optionApi.listAll(this.keys).then(response => {
|
|
this.options = response.data.data
|
|
})
|
|
},
|
|
handlePublishClick() {
|
|
this.sheetToStage.status = 'PUBLISHED'
|
|
this.saveSheet()
|
|
},
|
|
handleDraftClick() {
|
|
this.sheetToStage.status = 'DRAFT'
|
|
this.saveSheet()
|
|
},
|
|
handlerRemoveThumb() {
|
|
this.sheetToStage.thumbnail = null
|
|
},
|
|
createOrUpdateSheet(createSuccess, updateSuccess, autoSave) {
|
|
if (this.sheetToStage.id) {
|
|
sheetApi.update(this.sheetToStage.id, this.sheetToStage, autoSave).then(response => {
|
|
this.$log.debug('Updated sheet', response.data.data)
|
|
if (updateSuccess) {
|
|
updateSuccess()
|
|
}
|
|
})
|
|
} else {
|
|
sheetApi.create(this.sheetToStage, autoSave).then(response => {
|
|
this.$log.debug('Created sheet', response.data.data)
|
|
if (createSuccess) {
|
|
createSuccess()
|
|
}
|
|
this.sheetToStage = response.data.data
|
|
})
|
|
}
|
|
},
|
|
saveSheet() {
|
|
this.createOrUpdateSheet(
|
|
() => this.$message.success('页面创建成功！'),
|
|
() => this.$message.success('页面更新成功！'),
|
|
false
|
|
)
|
|
},
|
|
autoSaveSheet() {
|
|
if (this.sheetToStage.title != null && this.sheetToStage.originalContent != null) {
|
|
this.createOrUpdateSheet(null, null, true)
|
|
}
|
|
},
|
|
handleSelectSheetThumb(data) {
|
|
this.sheetToStage.thumbnail = encodeURI(data.path)
|
|
this.thumDrawerVisible = false
|
|
},
|
|
autoSaveTimer() {
|
|
if (this.timer == null) {
|
|
this.timer = setInterval(() => {
|
|
this.autoSaveSheet()
|
|
}, 15000)
|
|
}
|
|
},
|
|
pictureUploadHandle(pos, $file) {
|
|
var formdata = new FormData()
|
|
formdata.append('file', $file)
|
|
attachmentApi.upload(formdata).then((response) => {
|
|
var responseObject = response.data
|
|
|
|
if (responseObject.status === 200) {
|
|
var MavonEditor = this.$refs.md
|
|
MavonEditor.$img2Url(pos, encodeURI(responseObject.data.path))
|
|
this.$message.success('图片上传成功')
|
|
} else {
|
|
this.$message.error('图片上传失败：' + responseObject.message)
|
|
}
|
|
})
|
|
},
|
|
onChange(value, dateString) {
|
|
this.sheetToStage.createTime = value.valueOf()
|
|
},
|
|
onOk(value) {
|
|
this.sheetToStage.createTime = value.valueOf()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.v-note-wrapper {
|
|
z-index: 1000;
|
|
min-height: 580px;
|
|
}
|
|
|
|
.sheet-thum {
|
|
.img {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
.sheet-thum-remove {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
</style>
|