mirror of https://github.com/halo-dev/halo-admin
refactor: sheet editing (#440)
* refactor: sheet editing Signed-off-by: Ryan Wang <i@ryanc.cc>pull/443/head
Ryan Wang
GitHub
parent
460f770564
commit
c6cb0a9efc
|
|
@ -1,18 +1,12 @@
|
|||
<template>
|
||||
<page-view :title="sheetToStage.title ? sheetToStage.title : '新页面'" affix>
|
||||
<page-view
|
||||
:sub-title="sheetToStage.inProgress ? '当前内容已保存，但还未发布。' : ''"
|
||||
:title="sheetToStage.title ? sheetToStage.title : '新页面'"
|
||||
affix
|
||||
>
|
||||
<template slot="extra">
|
||||
<a-space>
|
||||
<ReactiveButton
|
||||
:errored="draftSaveErrored"
|
||||
:loading="draftSaving"
|
||||
erroredText="保存失败"
|
||||
loadedText="保存成功"
|
||||
text="保存草稿"
|
||||
type="danger"
|
||||
@callback="draftSaveErrored = false"
|
||||
@click="handleSaveDraft(false)"
|
||||
></ReactiveButton>
|
||||
<a-button :loading="previewSaving" @click="handlePreview">预览</a-button>
|
||||
<a-button :loading="previewSaving" @click="handlePreviewClick">预览</a-button>
|
||||
<a-button type="primary" @click="sheetSettingVisible = true">发布</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
|
@ -26,7 +20,7 @@
|
|||
<MarkdownEditor
|
||||
:originalContent="sheetToStage.originalContent"
|
||||
@onContentChange="onContentChange"
|
||||
@onSaveDraft="handleSaveDraft(true)"
|
||||
@onSaveDraft="handleSaveDraft()"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
|
|
@ -42,12 +36,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
|
||||
import { datetimeFormat } from '@/utils/datetime'
|
||||
// components
|
||||
import { PageView } from '@/layouts'
|
||||
import SheetSettingModal from './components/SheetSettingModal'
|
||||
import MarkdownEditor from '@/components/Editor/MarkdownEditor'
|
||||
|
||||
// libs
|
||||
import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
|
||||
import { datetimeFormat } from '@/utils/datetime'
|
||||
import apiClient from '@/utils/api-client'
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -61,8 +59,6 @@ export default {
|
|||
sheetSettingVisible: false,
|
||||
sheetToStage: {},
|
||||
contentChanges: 0,
|
||||
draftSaving: false,
|
||||
draftSaveErrored: false,
|
||||
previewSaving: false
|
||||
}
|
||||
},
|
||||
|
|
@ -70,11 +66,10 @@ export default {
|
|||
// Get sheetId id from query
|
||||
const sheetId = to.query.sheetId
|
||||
|
||||
next(vm => {
|
||||
next(async vm => {
|
||||
if (sheetId) {
|
||||
apiClient.sheet.get(sheetId).then(response => {
|
||||
vm.sheetToStage = response.data
|
||||
})
|
||||
const { data } = await apiClient.sheet.get(Number(sheetId))
|
||||
vm.sheetToStage = data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -109,100 +104,74 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleSaveDraft(draftOnly = false) {
|
||||
this.$log.debug('Draft only: ' + draftOnly)
|
||||
this.sheetToStage.status = 'DRAFT'
|
||||
if (!this.sheetToStage.title) {
|
||||
this.sheetToStage.title = datetimeFormat(new Date(), 'YYYY-MM-DD-HH-mm-ss')
|
||||
}
|
||||
this.draftSaving = true
|
||||
handleSaveDraft: debounce(async function () {
|
||||
if (this.sheetToStage.id) {
|
||||
if (draftOnly) {
|
||||
apiClient.sheet
|
||||
.updateDraftById(this.sheetToStage.id, this.sheetToStage.originalContent)
|
||||
.then(() => {
|
||||
this.handleRestoreSavedStatus()
|
||||
})
|
||||
.catch(() => {
|
||||
this.draftSaveErrored = true
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.draftSaving = false
|
||||
}, 400)
|
||||
})
|
||||
} else {
|
||||
apiClient.sheet
|
||||
.update(this.sheetToStage.id, this.sheetToStage)
|
||||
.then(response => {
|
||||
this.sheetToStage = response.data
|
||||
this.handleRestoreSavedStatus()
|
||||
})
|
||||
.catch(() => {
|
||||
this.draftSaveErrored = true
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.draftSaving = false
|
||||
}, 400)
|
||||
})
|
||||
try {
|
||||
const { data } = await apiClient.sheet.updateDraftById(
|
||||
this.sheetToStage.id,
|
||||
this.sheetToStage.originalContent
|
||||
)
|
||||
this.sheetToStage.inProgress = data.inProgress
|
||||
this.handleRestoreSavedStatus()
|
||||
this.$message.success({
|
||||
content: '内容已保存',
|
||||
duration: 0.5
|
||||
})
|
||||
} catch (e) {
|
||||
this.$log.error('Failed to update sheet content', e)
|
||||
}
|
||||
} else {
|
||||
apiClient.sheet
|
||||
.create(this.sheetToStage)
|
||||
.then(response => {
|
||||
this.sheetToStage = response.data
|
||||
this.handleRestoreSavedStatus()
|
||||
})
|
||||
.catch(() => {
|
||||
this.draftSaveErrored = true
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.draftSaving = false
|
||||
}, 400)
|
||||
})
|
||||
await this.handleCreateSheet()
|
||||
}
|
||||
},
|
||||
handlePreview() {
|
||||
this.sheetToStage.status = 'DRAFT'
|
||||
}, 300),
|
||||
|
||||
async handleCreateSheet() {
|
||||
if (!this.sheetToStage.title) {
|
||||
this.sheetToStage.title = datetimeFormat(new Date(), 'YYYY-MM-DD-HH-mm-ss')
|
||||
}
|
||||
this.previewSaving = true
|
||||
if (this.sheetToStage.id) {
|
||||
apiClient.sheet.update(this.sheetToStage.id, this.sheetToStage).then(response => {
|
||||
this.$log.debug('Updated sheet', response.data)
|
||||
apiClient.sheet
|
||||
.getPreviewLinkById(this.sheetToStage.id)
|
||||
.then(response => {
|
||||
window.open(response, '_blank')
|
||||
this.handleRestoreSavedStatus()
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.previewSaving = false
|
||||
}, 400)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
apiClient.sheet.create(this.sheetToStage).then(response => {
|
||||
this.$log.debug('Created sheet', response.data)
|
||||
this.sheetToStage = response.data
|
||||
apiClient.sheet
|
||||
.getPreviewLinkById(this.sheetToStage.id)
|
||||
.then(response => {
|
||||
window.open(response, '_blank')
|
||||
this.handleRestoreSavedStatus()
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.previewSaving = false
|
||||
}, 400)
|
||||
})
|
||||
try {
|
||||
const { data } = await apiClient.sheet.create(this.sheetToStage)
|
||||
this.sheetToStage = data
|
||||
this.handleRestoreSavedStatus()
|
||||
|
||||
// add params to url
|
||||
const path = this.$router.history.current.path
|
||||
this.$router.replace({ path, query: { sheetId: this.sheetToStage.id } }).catch(err => err)
|
||||
this.$message.success({
|
||||
content: '页面已创建',
|
||||
duration: 0.5
|
||||
})
|
||||
} catch (e) {
|
||||
this.$log.error('Failed to create sheet', e)
|
||||
}
|
||||
},
|
||||
|
||||
async handlePreviewClick() {
|
||||
this.previewSaving = true
|
||||
if (this.sheetToStage.id) {
|
||||
// Update the sheet content
|
||||
const { data } = await apiClient.sheet.updateDraftById(this.sheetToStage.id, this.sheetToStage.originalContent)
|
||||
this.sheetToStage.inProgress = data.inProgress
|
||||
} else {
|
||||
await this.handleCreateSheet()
|
||||
}
|
||||
await this.handleOpenPreview()
|
||||
},
|
||||
|
||||
async handleOpenPreview() {
|
||||
try {
|
||||
const response = await apiClient.sheet.getPreviewLinkById(this.sheetToStage.id)
|
||||
window.open(response, '_blank')
|
||||
this.handleRestoreSavedStatus()
|
||||
} catch (e) {
|
||||
this.$log.error('Failed to get preview link', e)
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
this.previewSaving = false
|
||||
}, 400)
|
||||
}
|
||||
},
|
||||
|
||||
handleRestoreSavedStatus() {
|
||||
this.contentChanges = 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -107,6 +107,15 @@
|
|||
:scrollToFirstRowOnChange="true"
|
||||
>
|
||||
<template #sheetTitle="text, record">
|
||||
<a-tooltip v-if="record.inProgress" title="当前有内容已保存，但还未发布。" placement="top">
|
||||
<a-icon
|
||||
class="cursor-pointer"
|
||||
style="margin-right: 3px"
|
||||
theme="twoTone"
|
||||
twoToneColor="#52c41a"
|
||||
type="info-circle"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-if="record.status === 'PUBLISHED'" :title="'点击访问【' + text + '】'" placement="top">
|
||||
<a :href="record.fullPath" class="no-underline" target="_blank">
|
||||
{{ text }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue