github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

Add loading for post settings.

pull/3445/head
ruibaby 2019-08-27 11:10:22 +08:00
parent dc52f30ade
commit 66fd2dc9c0
2 changed files with 172 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/post/PostList.vue
View File

@ -490,11 +490,11 @@ export default {
} }
}, },
handleShowPostSettings(post) { handleShowPostSettings(post) {
this.postSettingVisible = true
postApi.get(post.id).then(response => { postApi.get(post.id).then(response => {
this.selectedPost = response.data.data this.selectedPost = response.data.data
this.selectedTagIds = this.selectedPost.tagIds this.selectedTagIds = this.selectedPost.tagIds
this.selectedCategoryIds = this.selectedPost.categoryIds this.selectedCategoryIds = this.selectedPost.categoryIds
this.postSettingVisible = true
}) })
}, },
// 关闭文章设置抽屉 // 关闭文章设置抽屉

323
src/views/post/components/PostSetting.vue
View File

@ -8,169 +8,175 @@
destroyOnClose destroyOnClose
:visible="visiable" :visible="visiable"
> >
<div class="post-setting-drawer-content"> <a-skeleton
<div :style="{ marginBottom: '16px' }"> active
<h3 class="post-setting-drawer-title">基本设置</h3> :loading="settingLoading"
<div class="post-setting-drawer-item"> :paragraph="{ rows: 24 }"
<a-form layout="vertical"> >
<a-form-item <div class="post-setting-drawer-content">
label="文章标题：" <div :style="{ marginBottom: '16px' }">
v-if="needTitle" <h3 class="post-setting-drawer-title">基本设置</h3>
> <div class="post-setting-drawer-item">
<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-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="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 layout="vertical">
<a-form-item v-if="categoryFormVisible"> <a-form-item
<category-select-tree label="文章标题："
:categories="categories" v-if="needTitle"
v-model="categoryToCreate.parentId" >
<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-date-picker
showTime
:defaultValue="pickerDefaultValue"
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择文章发表时间"
@change="onPostDateChange"
@ok="onPostDateOk"
/> />
</a-form-item> </a-form-item>
<a-form-item v-if="categoryFormVisible"> <a-form-item label="开启评论：">
<a-input <a-radio-group
placeholder="分类名称" v-model="selectedPost.disallowComment"
v-model="categoryToCreate.name" :defaultValue="false"
/> >
</a-form-item> <a-radio :value="false">开启</a-radio>
<a-form-item v-if="categoryFormVisible"> <a-radio :value="true">关闭</a-radio>
<a-input </a-radio-group>
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-item>
</a-form> </a-form>
</div> </div>
</div> </div>
</div> <a-divider />
<a-divider />
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">标签</h3> <h3 class="post-setting-drawer-title">分类目录</h3>
<div class="post-setting-drawer-item"> <div class="post-setting-drawer-item">
<a-form layout="vertical"> <category-tree
<a-form-item> v-model="selectedCategoryIds"
<TagSelect v-model="selectedTagIds" /> :categories="categories"
</a-form-item> />
</a-form> <div>
</div> <a-form layout="vertical">
</div> <a-form-item v-if="categoryFormVisible">
<a-divider /> <category-select-tree
:categories="categories"
<div :style="{ marginBottom: '16px' }"> v-model="categoryToCreate.parentId"
<h3 class="post-setting-drawer-title">摘要</h3> />
<div class="post-setting-drawer-item"> </a-form-item>
<a-form layout="vertical"> <a-form-item v-if="categoryFormVisible">
<a-form-item> <a-input
<a-input placeholder="分类名称"
type="textarea" v-model="categoryToCreate.name"
:autosize="{ minRows: 5 }" />
v-model="selectedPost.summary" </a-form-item>
placeholder="不填写则会自动生成" <a-form-item v-if="categoryFormVisible">
/> <a-input
</a-form-item> placeholder="分类路径"
</a-form> v-model="categoryToCreate.slugNames"
</div> />
</div> </a-form-item>
<a-divider /> <a-form-item>
<a-button
<div :style="{ marginBottom: '16px' }"> type="primary"
<h3 class="post-setting-drawer-title">缩略图</h3> style="marginRight: 8px"
<div class="post-setting-drawer-item"> v-if="categoryFormVisible"
<div class="post-thum"> @click="handlerCreateCategory"
<img >保存</a-button>
class="img" <a-button
:src="selectedPost.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'" type="dashed"
@click="()=>this.thumDrawerVisible=true" style="marginRight: 8px"
> v-if="!categoryFormVisible"
<a-button @click="toggleCategoryForm"
class="post-thum-remove" >新增</a-button>
type="dashed" <a-button
@click="handlerRemoveThumb" v-if="categoryFormVisible"
>移除</a-button> @click="toggleCategoryForm"
>取消</a-button>
</a-form-item>
</a-form>
</div>
</div> </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> </div>
<a-divider class="divider-transparent" /> <AttachmentSelectDrawer
</div> v-model="thumDrawerVisible"
<AttachmentSelectDrawer @listenToSelect="handleSelectPostThumb"
v-model="thumDrawerVisible" :drawerWidth="460"
@listenToSelect="handleSelectPostThumb" />
:drawerWidth="460" <div class="bottom-control">
/> <a-button
<div class="bottom-control"> style="marginRight: 8px"
<a-button @click="handleDraftClick"
style="marginRight: 8px" v-if="saveDraftButton"
@click="handleDraftClick" >保存草稿</a-button>
v-if="saveDraftButton" <a-button
>保存草稿</a-button> @click="handlePublishClick"
<a-button type="primary"
@click="handlePublishClick" v-if="savePublishButton"
type="primary" >发布</a-button>
v-if="savePublishButton" <a-button
>发布</a-button> @click="handlePublishClick"
<a-button type="primary"
@click="handlePublishClick" v-if="saveButton"
type="primary" >保存</a-button>
v-if="saveButton" </div>
>保存</a-button> </a-skeleton>
</div>
</a-drawer> </a-drawer>
</template> </template>
<script> <script>
@ -196,6 +202,7 @@ export default {
return { return {
thumDrawerVisible: false, thumDrawerVisible: false,
categoryFormVisible: false, categoryFormVisible: false,
settingLoading: true,
options: [], options: [],
keys: ['blog_url'], keys: ['blog_url'],
selectedPost: this.post, selectedPost: this.post,
@ -249,6 +256,7 @@ export default {
} }
}, },
created() { created() {
this.loadSkeleton()
this.loadOptions() this.loadOptions()
this.loadCategories() this.loadCategories()
}, },
@ -270,6 +278,11 @@ export default {
}, },
selectedCategoryIds(val) { selectedCategoryIds(val) {
this.$emit('onRefreshCategoryIds', val) this.$emit('onRefreshCategoryIds', val)
},
visiable: function(newValue, oldValue) {
if (newValue) {
this.loadSkeleton()
}
} }
}, },
computed: { computed: {
@ -282,6 +295,12 @@ export default {
} }
}, },
methods: { methods: {
loadSkeleton() {
this.settingLoading = true
setTimeout(() => {
this.settingLoading = false
}, 500)
},
loadOptions() { loadOptions() {
optionApi.listAll(this.keys).then(response => { optionApi.listAll(this.keys).then(response => {
this.options = response.data.data this.options = response.data.data