mirror of https://github.com/halo-dev/halo-admin
Create PostSetting component.
ruibaby
parent
0ea1a22134
commit
eb3f211c1f
|
|
@ -2900,9 +2900,9 @@
|
|||
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
|
||||
},
|
||||
"ant-design-vue": {
|
||||
"version": "1.3.15",
|
||||
"resolved": "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.15.tgz",
|
||||
"integrity": "sha1-Wrc4ljrRFqF2ALJv1QJEEy80y5k=",
|
||||
"version": "1.3.16",
|
||||
"resolved": "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.16.tgz",
|
||||
"integrity": "sha1-sY9/omXtx8eYpaZdFdktctOgvrE=",
|
||||
"requires": {
|
||||
"@ant-design/icons": "^2.1.1",
|
||||
"@ant-design/icons-vue": "^2.0.0",
|
||||
|
|
@ -3175,9 +3175,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"async-validator": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.0.3.tgz?cache=0&sync_timestamp=1565685468183&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-3.0.3.tgz",
|
||||
"integrity": "sha1-PrjO6Ly4UX7lX+77hI2hbUggWzU="
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.0.4.tgz",
|
||||
"integrity": "sha1-UVxVuv7kCxNm9Henn+Z4dTyIKOM="
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
|
|
@ -9705,7 +9705,7 @@
|
|||
},
|
||||
"ismobilejs": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npm.taobao.org/ismobilejs/download/ismobilejs-0.5.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fismobilejs%2Fdownload%2Fismobilejs-0.5.2.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/ismobilejs/download/ismobilejs-0.5.2.tgz",
|
||||
"integrity": "sha1-6Bus9hh8UyrYNINV9P7Nbmrf3OE="
|
||||
},
|
||||
"isobject": {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"animate.css": "^3.7.0",
|
||||
"ant-design-vue": "^1.3.15",
|
||||
"ant-design-vue": "^1.3.16",
|
||||
"axios": "^0.18.0",
|
||||
"enquire.js": "^2.1.6",
|
||||
"halo-editor": "^2.7.6",
|
||||
|
|
|
|||
|
|
@ -19,180 +19,27 @@
|
|||
:toolbars="toolbars"
|
||||
:ishljs="true"
|
||||
:autofocus="false"
|
||||
@imgAdd="pictureUploadHandle"
|
||||
@imgAdd="handleAttachmentUpload"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-drawer
|
||||
title="文章设置"
|
||||
:width="isMobile()?'100%':'460'"
|
||||
placement="right"
|
||||
closable
|
||||
@close="()=>this.postSettingVisible=false"
|
||||
:visible="postSettingVisible"
|
||||
>
|
||||
<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+'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')"
|
||||
>
|
||||
<a-input v-model="postToStage.url" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="发表时间："
|
||||
>
|
||||
<a-date-picker
|
||||
showTime
|
||||
:defaultValue="pickerDefaultValue"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择文章发表时间"
|
||||
@change="onChange"
|
||||
@ok="onOk"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开启评论：">
|
||||
<a-radio-group
|
||||
v-model="postToStage.disallowComment"
|
||||
:defaultValue="false"
|
||||
>
|
||||
<a-radio :value="false">开启</a-radio>
|
||||
<a-radio :value="true">关闭</a-radio>
|
||||
</a-radio-group>
|
||||
</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">
|
||||
<category-tree
|
||||
v-model="selectedCategoryIds"
|
||||
:categories="categories"
|
||||
/>
|
||||
<div>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item v-if="categoryForm">
|
||||
<category-select-tree
|
||||
:categories="categories"
|
||||
v-model="categoryToCreate.parentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="categoryForm">
|
||||
<a-input
|
||||
placeholder="分类名称"
|
||||
v-model="categoryToCreate.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="categoryForm">
|
||||
<a-input
|
||||
placeholder="分类路径"
|
||||
v-model="categoryToCreate.slugNames"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="marginRight: 8px"
|
||||
v-if="categoryForm"
|
||||
@click="handlerCreateCategory"
|
||||
>保存</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
style="marginRight: 8px"
|
||||
v-if="!categoryForm"
|
||||
@click="toggleCategoryForm"
|
||||
>新增</a-button>
|
||||
<a-button
|
||||
v-if="categoryForm"
|
||||
@click="toggleCategoryForm"
|
||||
>取消</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">标签</h3>
|
||||
<div class="post-setting-drawer-item">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<TagSelect v-model="selectedTagIds" />
|
||||
</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">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 5 }"
|
||||
v-model="postToStage.summary"
|
||||
placeholder="不填写则会自动生成"
|
||||
/>
|
||||
</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="post-thum">
|
||||
<img
|
||||
class="img"
|
||||
:src="postToStage.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
|
||||
@click="()=>this.thumDrawerVisible=true"
|
||||
>
|
||||
<a-button
|
||||
class="post-thum-remove"
|
||||
type="dashed"
|
||||
@click="handlerRemoveThumb"
|
||||
>移除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider class="divider-transparent" />
|
||||
</div>
|
||||
<AttachmentSelectDrawer
|
||||
v-model="thumDrawerVisible"
|
||||
@listenToSelect="handleSelectPostThumb"
|
||||
:drawerWidth="460"
|
||||
/>
|
||||
<div class="bottom-control">
|
||||
<a-button
|
||||
style="marginRight: 8px"
|
||||
@click="handleDraftClick"
|
||||
>保存草稿</a-button>
|
||||
<a-button
|
||||
@click="handlePublishClick"
|
||||
type="primary"
|
||||
>发布</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
<PostSetting
|
||||
:post="postToStage"
|
||||
:selectedTagIds="selectedTagIds"
|
||||
:selectedCategoryIds="selectedCategoryIds"
|
||||
v-model="postSettingVisible"
|
||||
@close="onPostSettingsClose"
|
||||
@onRefreshPost="onRefreshPostFromSetting"
|
||||
/>
|
||||
|
||||
<AttachmentDrawer v-model="attachmentDrawerVisible" />
|
||||
|
||||
<footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="()=>this.postSettingVisible = true"
|
||||
@click="handleShowPostSettings"
|
||||
>发布</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
|
|
@ -204,32 +51,24 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CategoryTree from './components/CategoryTree'
|
||||
import TagSelect from './components/TagSelect'
|
||||
import { haloEditor } from 'halo-editor'
|
||||
import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
|
||||
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
|
||||
import CategorySelectTree from './components/CategorySelectTree'
|
||||
import FooterToolBar from '@/components/FooterToolbar'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import PostSetting from './components/PostSetting'
|
||||
import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
|
||||
import FooterToolBar from '@/components/FooterToolbar'
|
||||
import { toolbars } from '@/core/const'
|
||||
import { haloEditor } from 'halo-editor'
|
||||
import 'halo-editor/dist/css/index.css'
|
||||
import categoryApi from '@/api/category'
|
||||
|
||||
import postApi from '@/api/post'
|
||||
import optionApi from '@/api/option'
|
||||
import attachmentApi from '@/api/attachment'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
components: {
|
||||
TagSelect,
|
||||
haloEditor,
|
||||
CategoryTree,
|
||||
FooterToolBar,
|
||||
AttachmentDrawer,
|
||||
AttachmentSelectDrawer,
|
||||
CategorySelectTree
|
||||
},
|
||||
mixins: [mixin, mixinDevice],
|
||||
components: {
|
||||
PostSetting,
|
||||
haloEditor,
|
||||
FooterToolBar,
|
||||
AttachmentDrawer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolbars,
|
||||
|
|
@ -240,21 +79,13 @@ export default {
|
|||
},
|
||||
attachmentDrawerVisible: false,
|
||||
postSettingVisible: false,
|
||||
thumDrawerVisible: false,
|
||||
categoryForm: false,
|
||||
categories: [],
|
||||
selectedCategoryIds: [],
|
||||
selectedTagIds: [],
|
||||
postToStage: {},
|
||||
categoryToCreate: {},
|
||||
timer: null,
|
||||
options: [],
|
||||
keys: ['blog_url']
|
||||
selectedTagIds: [],
|
||||
selectedCategoryIds: [],
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCategories()
|
||||
this.loadOptions()
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
this.autoSaveTimer()
|
||||
|
|
@ -274,7 +105,6 @@ export default {
|
|||
beforeRouteEnter(to, from, next) {
|
||||
// Get post id from query
|
||||
const postId = to.query.postId
|
||||
|
||||
next(vm => {
|
||||
if (postId) {
|
||||
postApi.get(postId).then(response => {
|
||||
|
|
@ -286,32 +116,8 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
pickerDefaultValue() {
|
||||
if (this.postToStage.createTime) {
|
||||
var date = new Date(this.postToStage.createTime)
|
||||
return moment(date, 'YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadCategories() {
|
||||
categoryApi.listAll().then(response => {
|
||||
this.categories = response.data.data
|
||||
})
|
||||
},
|
||||
loadOptions() {
|
||||
optionApi.listAll(this.keys).then(response => {
|
||||
this.options = response.data.data
|
||||
})
|
||||
},
|
||||
createOrUpdatePost(createSuccess, updateSuccess, autoSave) {
|
||||
// Set category ids
|
||||
this.postToStage.categoryIds = this.selectedCategoryIds
|
||||
// Set tag ids
|
||||
this.postToStage.tagIds = this.selectedTagIds
|
||||
|
||||
if (this.postToStage.id) {
|
||||
// Update the post
|
||||
postApi.update(this.postToStage.id, this.postToStage, autoSave).then(response => {
|
||||
|
|
@ -331,42 +137,11 @@ export default {
|
|||
})
|
||||
}
|
||||
},
|
||||
savePost() {
|
||||
this.createOrUpdatePost(
|
||||
() => this.$message.success('文章创建成功'),
|
||||
() => this.$message.success('文章更新成功'),
|
||||
false
|
||||
)
|
||||
},
|
||||
autoSavePost() {
|
||||
if (this.postToStage.title != null && this.postToStage.originalContent != null) {
|
||||
this.createOrUpdatePost(null, null, true)
|
||||
}
|
||||
},
|
||||
toggleCategoryForm() {
|
||||
this.categoryForm = !this.categoryForm
|
||||
},
|
||||
handlePublishClick() {
|
||||
this.postToStage.status = 'PUBLISHED'
|
||||
this.savePost()
|
||||
},
|
||||
handleDraftClick() {
|
||||
this.postToStage.status = 'DRAFT'
|
||||
this.savePost()
|
||||
},
|
||||
handlerRemoveThumb() {
|
||||
this.postToStage.thumbnail = null
|
||||
},
|
||||
handlerCreateCategory() {
|
||||
categoryApi.create(this.categoryToCreate).then(response => {
|
||||
this.loadCategories()
|
||||
this.categoryToCreate = {}
|
||||
})
|
||||
},
|
||||
handleSelectPostThumb(data) {
|
||||
this.postToStage.thumbnail = encodeURI(data.path)
|
||||
this.thumDrawerVisible = false
|
||||
},
|
||||
autoSaveTimer() {
|
||||
if (this.timer == null) {
|
||||
this.timer = setInterval(() => {
|
||||
|
|
@ -374,10 +149,10 @@ export default {
|
|||
}, 15000)
|
||||
}
|
||||
},
|
||||
pictureUploadHandle(pos, $file) {
|
||||
handleAttachmentUpload(pos, $file) {
|
||||
var formdata = new FormData()
|
||||
formdata.append('file', $file)
|
||||
attachmentApi.upload(formdata).then((response) => {
|
||||
attachmentApi.upload(formdata).then(response => {
|
||||
var responseObject = response.data
|
||||
|
||||
if (responseObject.status === 200) {
|
||||
|
|
@ -389,11 +164,15 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
onChange(value, dateString) {
|
||||
this.postToStage.createTime = value.valueOf()
|
||||
handleShowPostSettings() {
|
||||
this.postSettingVisible = true
|
||||
},
|
||||
onOk(value) {
|
||||
this.postToStage.createTime = value.valueOf()
|
||||
// 关闭文章设置抽屉
|
||||
onPostSettingsClose() {
|
||||
this.postSettingVisible = false
|
||||
},
|
||||
onRefreshPostFromSetting(post) {
|
||||
this.postToStage = post
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,11 +140,12 @@
|
|||
<span
|
||||
slot="postTitle"
|
||||
slot-scope="text,record"
|
||||
class="post-title"
|
||||
style="max-width: 150px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
||||
>
|
||||
<a
|
||||
:href="options.blog_url+'/archives/'+record.url"
|
||||
target="_blank"
|
||||
style="text-decoration: none;"
|
||||
>
|
||||
<a-tooltip
|
||||
placement="topLeft"
|
||||
|
|
@ -239,7 +240,7 @@
|
|||
|
||||
<a
|
||||
href="javascript:;"
|
||||
@click="handlePostSettingsDrawer(post)"
|
||||
@click="handleShowPostSettings(post)"
|
||||
>设置</a>
|
||||
</span>
|
||||
</a-table>
|
||||
|
|
@ -256,164 +257,30 @@
|
|||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-drawer
|
||||
title="文章设置"
|
||||
:width="isMobile()?'100%':'460'"
|
||||
placement="right"
|
||||
closable
|
||||
<PostSetting
|
||||
:post="selectedPost"
|
||||
:selectedTagIds="selectedTagIds"
|
||||
:selectedCategoryIds="selectedCategoryIds"
|
||||
:needTitle="true"
|
||||
:saveDraftButton="false"
|
||||
:savePublishButton="false"
|
||||
:saveButton="true"
|
||||
v-model="postSettingVisible"
|
||||
@close="onPostSettingsClose"
|
||||
:visible="postSettingVisible"
|
||||
>
|
||||
<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="文章标题：">
|
||||
<a-input v-model="selectedPost.title" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="文章路径："
|
||||
:help="options.blog_url+'/archives/' + (selectedPost.url ? selectedPost.url : '{auto_generate}')"
|
||||
>
|
||||
<a-input v-model="selectedPost.url" />
|
||||
</a-form-item>
|
||||
<a-form-item label="开启评论：">
|
||||
<a-radio-group
|
||||
v-model="selectedPost.disallowComment"
|
||||
:defaultValue="false"
|
||||
>
|
||||
<a-radio :value="false">开启</a-radio>
|
||||
<a-radio :value="true">关闭</a-radio>
|
||||
</a-radio-group>
|
||||
</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">
|
||||
<category-tree
|
||||
v-model="selectedCategoryIds"
|
||||
:categories="categories"
|
||||
/>
|
||||
<div>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item v-if="categoryForm">
|
||||
<category-select-tree
|
||||
:categories="categories"
|
||||
v-model="categoryToCreate.parentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="categoryForm">
|
||||
<a-input
|
||||
placeholder="分类名称"
|
||||
v-model="categoryToCreate.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="categoryForm">
|
||||
<a-input
|
||||
placeholder="分类路径"
|
||||
v-model="categoryToCreate.slugNames"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="marginRight: 8px"
|
||||
v-if="categoryForm"
|
||||
@click="handlerCreateCategory"
|
||||
>保存</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
style="marginRight: 8px"
|
||||
v-if="!categoryForm"
|
||||
@click="toggleCategoryForm"
|
||||
>新增</a-button>
|
||||
<a-button
|
||||
v-if="categoryForm"
|
||||
@click="toggleCategoryForm"
|
||||
>取消</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">标签</h3>
|
||||
<div class="post-setting-drawer-item">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<TagSelect v-model="selectedTagIds" />
|
||||
</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">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 5 }"
|
||||
v-model="selectedPost.summary"
|
||||
placeholder="不填写则会自动生成"
|
||||
/>
|
||||
</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="post-thum">
|
||||
<img
|
||||
class="img"
|
||||
:src="selectedPost.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
|
||||
@click="()=>this.thumDrawerVisible=true"
|
||||
>
|
||||
<a-button
|
||||
class="post-thum-remove"
|
||||
type="dashed"
|
||||
@click="handlerRemoveThumb"
|
||||
>移除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider class="divider-transparent" />
|
||||
</div>
|
||||
<AttachmentSelectDrawer
|
||||
v-model="thumDrawerVisible"
|
||||
@listenToSelect="handleSelectPostThumb"
|
||||
:drawerWidth="460"
|
||||
/>
|
||||
<div class="bottom-control">
|
||||
<a-button
|
||||
@click="handleSavePostSettingsClick"
|
||||
type="primary"
|
||||
>保存</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
@onRefreshPost="onRefreshPostFromSetting"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import categoryApi from '@/api/category'
|
||||
import postApi from '@/api/post'
|
||||
import optionApi from '@/api/option'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import PostSetting from './components/PostSetting'
|
||||
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
|
||||
import TagSelect from './components/TagSelect'
|
||||
import CategoryTree from './components/CategoryTree'
|
||||
import categoryApi from '@/api/category'
|
||||
import postApi from '@/api/post'
|
||||
import optionApi from '@/api/option'
|
||||
const columns = [
|
||||
{
|
||||
title: '标题',
|
||||
|
|
@ -464,7 +331,8 @@ export default {
|
|||
components: {
|
||||
AttachmentSelectDrawer,
|
||||
TagSelect,
|
||||
CategoryTree
|
||||
CategoryTree,
|
||||
PostSetting
|
||||
},
|
||||
mixins: [mixin, mixinDevice],
|
||||
data() {
|
||||
|
|
@ -491,12 +359,9 @@ export default {
|
|||
posts: [],
|
||||
postsLoading: false,
|
||||
postSettingVisible: false,
|
||||
thumDrawerVisible: false,
|
||||
selectedPost: {},
|
||||
selectedCategoryIds: [],
|
||||
selectedTagIds: [],
|
||||
categoryForm: false,
|
||||
categoryToCreate: {},
|
||||
selectedCategoryIds: [],
|
||||
options: [],
|
||||
keys: ['blog_url']
|
||||
}
|
||||
|
|
@ -510,9 +375,9 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCategories()
|
||||
this.loadPosts()
|
||||
this.loadOptions()
|
||||
this.loadCategories()
|
||||
},
|
||||
methods: {
|
||||
loadPosts() {
|
||||
|
|
@ -622,61 +487,24 @@ export default {
|
|||
})
|
||||
}
|
||||
},
|
||||
// 打开文章设置抽屉
|
||||
handlePostSettingsDrawer(post) {
|
||||
handleShowPostSettings(post) {
|
||||
this.postSettingVisible = true
|
||||
postApi.get(post.id).then(response => {
|
||||
const post = response.data.data
|
||||
this.selectedPost = post
|
||||
this.selectedTagIds = post.tagIds
|
||||
this.selectedCategoryIds = post.categoryIds
|
||||
})
|
||||
},
|
||||
handleSelectPostThumb(data) {
|
||||
this.selectedPost.thumbnail = encodeURI(data.path)
|
||||
this.thumDrawerVisible = false
|
||||
},
|
||||
handlerRemoveThumb() {
|
||||
this.selectedPost.thumbnail = null
|
||||
},
|
||||
// 保存文章设置
|
||||
handleSavePostSettingsClick() {
|
||||
this.selectedPost.categoryIds = this.selectedCategoryIds
|
||||
this.selectedPost.tagIds = this.selectedTagIds
|
||||
postApi.update(this.selectedPost.id, this.selectedPost, false).then(response => {
|
||||
this.$log.debug('Updated post', response.data.data)
|
||||
this.loadPosts()
|
||||
this.$message.success('文章更新成功')
|
||||
})
|
||||
},
|
||||
toggleCategoryForm() {
|
||||
this.categoryForm = !this.categoryForm
|
||||
},
|
||||
handlerCreateCategory() {
|
||||
categoryApi.create(this.categoryToCreate).then(response => {
|
||||
this.loadCategories()
|
||||
this.categoryToCreate = {}
|
||||
this.selectedPost = response.data.data
|
||||
this.selectedTagIds = this.selectedPost.tagIds
|
||||
this.selectedCategoryIds = this.selectedPost.categoryIds
|
||||
})
|
||||
},
|
||||
// 关闭文章设置抽屉
|
||||
onPostSettingsClose() {
|
||||
this.postSettingVisible = false
|
||||
this.selectedPost = {}
|
||||
this.selectedTagIds = []
|
||||
this.selectedCategoryIds = []
|
||||
},
|
||||
onRefreshPostFromSetting(post) {
|
||||
this.selectedPost = post
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.post-title {
|
||||
max-width: 150px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,342 @@
|
|||
<template>
|
||||
<a-drawer
|
||||
title="文章设置"
|
||||
:width="isMobile()?'100%':'460'"
|
||||
placement="right"
|
||||
closable
|
||||
@close="onClose"
|
||||
destroyOnClose
|
||||
:visible="visiable"
|
||||
>
|
||||
<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="文章标题："
|
||||
v-if="needTitle"
|
||||
>
|
||||
<a-input v-model="post.title" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="文章路径："
|
||||
:help="options.blog_url+'/archives/' + (post.url ? post.url : '{auto_generate}')"
|
||||
>
|
||||
<a-input v-model="post.url" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="发表时间：">
|
||||
<a-date-picker
|
||||
showTime
|
||||
:defaultValue="pickerDefaultValue"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择文章发表时间"
|
||||
@change="onPostDateChange"
|
||||
@ok="onPostDateOk"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开启评论：">
|
||||
<a-radio-group
|
||||
v-model="post.disallowComment"
|
||||
:defaultValue="false"
|
||||
>
|
||||
<a-radio :value="false">开启</a-radio>
|
||||
<a-radio :value="true">关闭</a-radio>
|
||||
</a-radio-group>
|
||||
</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">
|
||||
<category-tree
|
||||
v-model="selectedCategoryIds"
|
||||
:categories="categories"
|
||||
/>
|
||||
<div>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item v-if="categoryFormVisible">
|
||||
<category-select-tree
|
||||
:categories="categories"
|
||||
v-model="categoryToCreate.parentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="categoryFormVisible">
|
||||
<a-input
|
||||
placeholder="分类名称"
|
||||
v-model="categoryToCreate.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="categoryFormVisible">
|
||||
<a-input
|
||||
placeholder="分类路径"
|
||||
v-model="categoryToCreate.slugNames"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="marginRight: 8px"
|
||||
v-if="categoryFormVisible"
|
||||
@click="handlerCreateCategory"
|
||||
>保存</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
style="marginRight: 8px"
|
||||
v-if="!categoryFormVisible"
|
||||
@click="toggleCategoryForm"
|
||||
>新增</a-button>
|
||||
<a-button
|
||||
v-if="categoryFormVisible"
|
||||
@click="toggleCategoryForm"
|
||||
>取消</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">标签</h3>
|
||||
<div class="post-setting-drawer-item">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<TagSelect v-model="selectedTagIds" />
|
||||
</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">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 5 }"
|
||||
v-model="post.summary"
|
||||
placeholder="不填写则会自动生成"
|
||||
/>
|
||||
</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="post-thum">
|
||||
<img
|
||||
class="img"
|
||||
:src="post.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
|
||||
@click="()=>this.thumDrawerVisible=true"
|
||||
>
|
||||
<a-button
|
||||
class="post-thum-remove"
|
||||
type="dashed"
|
||||
@click="handlerRemoveThumb"
|
||||
>移除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider class="divider-transparent" />
|
||||
</div>
|
||||
<AttachmentSelectDrawer
|
||||
v-model="thumDrawerVisible"
|
||||
@listenToSelect="handleSelectPostThumb"
|
||||
:drawerWidth="460"
|
||||
/>
|
||||
<div class="bottom-control">
|
||||
<a-button
|
||||
style="marginRight: 8px"
|
||||
@click="handleDraftClick"
|
||||
v-if="saveDraftButton"
|
||||
>保存草稿</a-button>
|
||||
<a-button
|
||||
@click="handlePublishClick"
|
||||
type="primary"
|
||||
v-if="savePublishButton"
|
||||
>发布</a-button>
|
||||
<a-button
|
||||
@click="handlePublishClick"
|
||||
type="primary"
|
||||
v-if="saveButton"
|
||||
>保存</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import moment from 'moment'
|
||||
import CategoryTree from './CategoryTree'
|
||||
import CategorySelectTree from './CategorySelectTree'
|
||||
import TagSelect from './TagSelect'
|
||||
import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
|
||||
import optionApi from '@/api/option'
|
||||
import categoryApi from '@/api/category'
|
||||
import postApi from '@/api/post'
|
||||
export default {
|
||||
name: 'PostSetting',
|
||||
mixins: [mixin, mixinDevice],
|
||||
components: {
|
||||
CategoryTree,
|
||||
CategorySelectTree,
|
||||
TagSelect,
|
||||
AttachmentSelectDrawer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
thumDrawerVisible: false,
|
||||
categoryFormVisible: false,
|
||||
options: [],
|
||||
keys: ['blog_url'],
|
||||
categories: [],
|
||||
categoryToCreate: {}
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'visiable',
|
||||
event: 'close'
|
||||
},
|
||||
props: {
|
||||
post: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
selectedTagIds: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
selectedCategoryIds: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
visiable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
needTitle: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
saveDraftButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
savePublishButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
saveButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadOptions()
|
||||
this.loadCategories()
|
||||
},
|
||||
computed: {
|
||||
pickerDefaultValue() {
|
||||
if (this.post.createTime) {
|
||||
var date = new Date(this.post.createTime)
|
||||
return moment(date, 'YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadOptions() {
|
||||
optionApi.listAll(this.keys).then(response => {
|
||||
this.options = response.data.data
|
||||
})
|
||||
},
|
||||
loadCategories() {
|
||||
categoryApi.listAll().then(response => {
|
||||
this.categories = response.data.data
|
||||
})
|
||||
},
|
||||
handleSelectPostThumb(data) {
|
||||
this.post.thumbnail = encodeURI(data.path)
|
||||
this.thumDrawerVisible = false
|
||||
},
|
||||
handlerRemoveThumb() {
|
||||
this.post.thumbnail = null
|
||||
},
|
||||
handlerCreateCategory() {
|
||||
categoryApi.create(this.categoryToCreate).then(response => {
|
||||
this.loadCategories()
|
||||
this.categoryToCreate = {}
|
||||
})
|
||||
},
|
||||
toggleCategoryForm() {
|
||||
this.categoryFormVisible = !this.categoryFormVisible
|
||||
},
|
||||
handleDraftClick() {
|
||||
this.post.status = 'DRAFT'
|
||||
this.savePost()
|
||||
},
|
||||
handlePublishClick() {
|
||||
this.post.status = 'PUBLISHED'
|
||||
this.savePost()
|
||||
},
|
||||
savePost() {
|
||||
this.createOrUpdatePost(
|
||||
() => this.$message.success('文章创建成功'),
|
||||
() => this.$message.success('文章更新成功'),
|
||||
false
|
||||
)
|
||||
},
|
||||
createOrUpdatePost(createSuccess, updateSuccess, autoSave) {
|
||||
// Set category ids
|
||||
this.post.categoryIds = this.selectedCategoryIds
|
||||
// Set tag ids
|
||||
this.post.tagIds = this.selectedTagIds
|
||||
|
||||
if (this.post.id) {
|
||||
// Update the post
|
||||
postApi.update(this.post.id, this.post, autoSave).then(response => {
|
||||
this.$log.debug('Updated post', response.data.data)
|
||||
if (updateSuccess) {
|
||||
updateSuccess()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// Create the post
|
||||
postApi.create(this.post, autoSave).then(response => {
|
||||
this.$log.debug('Created post', response.data.data)
|
||||
if (createSuccess) {
|
||||
createSuccess()
|
||||
}
|
||||
this.post = response.data.data
|
||||
})
|
||||
}
|
||||
this.$emit('onRefreshPost', this.post)
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('close', false)
|
||||
},
|
||||
onPostDateChange(value, dateString) {
|
||||
this.post.createTime = value.valueOf()
|
||||
},
|
||||
onPostDateOk(value) {
|
||||
this.post.createTime = value.valueOf()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
</style>
|
||||
|
|
@ -11,14 +11,14 @@
|
|||
<a-input v-model="queryParam.keyword"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<!-- <a-col :md="6" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择状态">
|
||||
<a-select-option value="1">公开</a-select-option>
|
||||
<a-select-option value="0">私密</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-col> -->
|
||||
<a-col :md="6" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="loadJournals(true)">查询</a-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue