mirror of https://github.com/halo-dev/halo-admin
Sheet Edit.
ruibaby
parent
af8262f616
commit
8e66102aa1
|
|
@ -0,0 +1,54 @@
|
|||
import service from '@/utils/service'
|
||||
|
||||
const baseUrl = '/api/admin/sheets'
|
||||
|
||||
const sheetApi = {}
|
||||
|
||||
sheetApi.list = () => {
|
||||
return service({
|
||||
url: baseUrl,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
sheetApi.get = sheetId => {
|
||||
return service({
|
||||
url: `${baseUrl}/${sheetId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
sheetApi.create = sheetToCreate => {
|
||||
return service({
|
||||
url: baseUrl,
|
||||
method: 'post',
|
||||
data: sheetToCreate
|
||||
})
|
||||
}
|
||||
|
||||
sheetApi.update = (sheetId, sheetToUpdate) => {
|
||||
return service({
|
||||
url: `${baseUrl}/${sheetId}`,
|
||||
method: 'put',
|
||||
data: sheetToUpdate
|
||||
})
|
||||
}
|
||||
|
||||
sheetApi.sheetStatus = {
|
||||
PUBLISHED: {
|
||||
color: 'green',
|
||||
status: 'success',
|
||||
text: '已发布'
|
||||
},
|
||||
DRAFT: {
|
||||
color: 'yellow',
|
||||
status: 'warning',
|
||||
text: '草稿'
|
||||
},
|
||||
RECYCLE: {
|
||||
color: 'red',
|
||||
status: 'error',
|
||||
text: '回收站'
|
||||
}
|
||||
}
|
||||
export default sheetApi
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
v-model="postToStage.password"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否关闭评论：">
|
||||
<a-form-item label="开启评论：">
|
||||
<a-radio-group
|
||||
v-model="postToStage.disallowComment"
|
||||
:defaultValue="false"
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<a-divider />
|
||||
</div>
|
||||
<AttachmentSelectDrawer
|
||||
v-model="childDrawerVisible"
|
||||
v-model="thumDrawerVisible"
|
||||
@listenToSelect="selectPostThumb"
|
||||
:drawerWidth="460"
|
||||
/>
|
||||
|
|
@ -161,14 +161,14 @@
|
|||
import CategoryTree from './components/CategoryTree'
|
||||
import TagSelect from './components/TagSelect'
|
||||
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 'mavon-editor/dist/css/index.css'
|
||||
import tagApi from '@/api/tag'
|
||||
import categoryApi from '@/api/category'
|
||||
import postApi from '@/api/post'
|
||||
import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
|
||||
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
|
||||
const toolbars = {
|
||||
bold: true, // 粗体
|
||||
italic: true, // 斜体
|
||||
|
|
@ -193,7 +193,6 @@ const toolbars = {
|
|||
preview: true // 预览
|
||||
}
|
||||
export default {
|
||||
name: 'Editor',
|
||||
components: {
|
||||
TagSelect,
|
||||
mavonEditor,
|
||||
|
|
@ -212,7 +211,7 @@ export default {
|
|||
},
|
||||
attachmentDrawerVisible: false,
|
||||
visible: false,
|
||||
childDrawerVisible: false,
|
||||
thumDrawerVisible: false,
|
||||
tags: [],
|
||||
categories: [],
|
||||
selectedCategoryIds: [],
|
||||
|
|
@ -287,7 +286,7 @@ export default {
|
|||
this.attachmentDrawerVisible = true
|
||||
},
|
||||
showThumbDrawer() {
|
||||
this.childDrawerVisible = true
|
||||
this.thumDrawerVisible = true
|
||||
},
|
||||
handlePublishClick() {
|
||||
this.postToStage.status = 'PUBLISHED'
|
||||
|
|
@ -300,12 +299,9 @@ export default {
|
|||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
onChildClose() {
|
||||
this.childDrawerVisible = false
|
||||
},
|
||||
selectPostThumb(data) {
|
||||
this.postToStage.thumbnail = data.path
|
||||
this.childDrawerVisible = false
|
||||
this.thumDrawerVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,11 +129,6 @@
|
|||
>{{ tag.name }}</a-tag>
|
||||
</span>
|
||||
|
||||
<span
|
||||
slot="createTime"
|
||||
slot-scope="createTime"
|
||||
>{{ createTime | timeAgo }}</span>
|
||||
|
||||
<span
|
||||
slot="updateTime"
|
||||
slot-scope="updateTime"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
>
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model="postToStage.title"
|
||||
v-model="sheetToStage.title"
|
||||
v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
|
||||
size="large"
|
||||
placeholder="请输入页面标题"
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
<div id="editor">
|
||||
<mavon-editor
|
||||
v-model="postToStage.originalContent"
|
||||
v-model="sheetToStage.originalContent"
|
||||
:boxShadow="false"
|
||||
:toolbars="toolbars"
|
||||
:ishljs="true"
|
||||
|
|
@ -47,19 +47,19 @@
|
|||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
label="页面路径："
|
||||
:help="'https://localhost:8090/p/'+ (postToStage.url ? postToStage.url : '{auto_generate}')"
|
||||
:help="'https://localhost:8090/s/'+ (sheetToStage.url ? sheetToStage.url : '{auto_generate}')"
|
||||
>
|
||||
<a-input v-model="postToStage.url" />
|
||||
<a-input v-model="sheetToStage.url" />
|
||||
</a-form-item>
|
||||
<a-form-item label="页面密码：">
|
||||
<a-input
|
||||
type="password"
|
||||
v-model="postToStage.password"
|
||||
v-model="sheetToStage.password"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否关闭评论：">
|
||||
<a-form-item label="开启评论：">
|
||||
<a-radio-group
|
||||
v-model="postToStage.disallowComment"
|
||||
v-model="sheetToStage.disallowComment"
|
||||
:defaultValue="false"
|
||||
>
|
||||
<a-radio :value="false">开启</a-radio>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="自定义模板：">
|
||||
<a-select v-model="postToStage.template">
|
||||
<a-select v-model="sheetToStage.template">
|
||||
<a-select-option
|
||||
v-for="tpl in customTpls"
|
||||
:key="tpl"
|
||||
|
|
@ -83,17 +83,23 @@
|
|||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">缩略图</h3>
|
||||
<div class="post-setting-drawer-item">
|
||||
<div class="post-thum">
|
||||
<div class="sheet-thum">
|
||||
<img
|
||||
class="img"
|
||||
src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
|
||||
:src="sheetToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
|
||||
@click="showThumbDrawer"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
</div>
|
||||
<div class="postControl">
|
||||
<AttachmentSelectDrawer
|
||||
v-model="thumDrawerVisible"
|
||||
@listenToSelect="selectSheetThumb"
|
||||
:drawerWidth="460"
|
||||
/>
|
||||
<div class="sheetControl">
|
||||
<a-button
|
||||
style="marginRight: 8px"
|
||||
@click="handleDraftClick"
|
||||
|
|
@ -124,10 +130,11 @@
|
|||
<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 'mavon-editor/dist/css/index.css'
|
||||
import postApi from '@/api/post'
|
||||
import sheetApi from '@/api/sheet'
|
||||
import themeApi from '@/api/theme'
|
||||
const toolbars = {
|
||||
bold: true, // 粗体
|
||||
|
|
@ -153,11 +160,11 @@ const toolbars = {
|
|||
preview: true // 预览
|
||||
}
|
||||
export default {
|
||||
name: 'Editor',
|
||||
components: {
|
||||
mavonEditor,
|
||||
FooterToolBar,
|
||||
AttachmentDrawer
|
||||
AttachmentDrawer,
|
||||
AttachmentSelectDrawer
|
||||
},
|
||||
mixins: [mixin, mixinDevice],
|
||||
data() {
|
||||
|
|
@ -168,16 +175,17 @@ export default {
|
|||
xs: { span: 24 }
|
||||
},
|
||||
attachmentDrawerVisible: false,
|
||||
thumDrawerVisible: false,
|
||||
toolbars,
|
||||
visible: false,
|
||||
postUrl: 'hello-world',
|
||||
sheetUrl: 'hello-world',
|
||||
customTpls: [],
|
||||
postToStage: {}
|
||||
sheetToStage: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
publishText() {
|
||||
if (this.postToStage.id) {
|
||||
if (this.sheetToStage.id) {
|
||||
return '更新并发布'
|
||||
}
|
||||
return '创建并发布'
|
||||
|
|
@ -187,16 +195,14 @@ export default {
|
|||
this.loadCustomTpls()
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
// Get post id from query
|
||||
const postId = to.query.postId
|
||||
// Get sheetId id from query
|
||||
const sheetId = to.query.sheetId
|
||||
|
||||
next(vm => {
|
||||
if (postId) {
|
||||
postApi.get(postId).then(response => {
|
||||
const post = response.data.data
|
||||
vm.postToStage = post
|
||||
vm.selectedTagIds = post.tagIds
|
||||
vm.selectedCategoryIds = post.categoryIds
|
||||
if (sheetId) {
|
||||
sheetApi.get(sheetId).then(response => {
|
||||
const sheet = response.data.data
|
||||
vm.sheetToStage = sheet
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -210,35 +216,40 @@ export default {
|
|||
showAttachDrawer() {
|
||||
this.attachmentDrawerVisible = true
|
||||
},
|
||||
showThumbDrawer() {
|
||||
this.thumDrawerVisible = true
|
||||
},
|
||||
showDrawer() {
|
||||
this.visible = true
|
||||
},
|
||||
handlePublishClick() {
|
||||
this.postToStage.status = 'PUBLISHED'
|
||||
this.createOrUpdatePost()
|
||||
this.sheetToStage.status = 'PUBLISHED'
|
||||
this.createOrUpdateSheet()
|
||||
},
|
||||
handleDraftClick() {
|
||||
this.postToStage.status = 'DRAFT'
|
||||
this.createOrUpdatePost()
|
||||
this.sheetToStage.status = 'DRAFT'
|
||||
this.createOrUpdateSheet()
|
||||
},
|
||||
createOrUpdatePost() {
|
||||
if (this.postToStage.id) {
|
||||
// Update the post
|
||||
postApi.update(this.postToStage.id, this.postToStage).then(response => {
|
||||
this.$log.debug('Updated post', response.data.data)
|
||||
createOrUpdateSheet() {
|
||||
if (this.sheetToStage.id) {
|
||||
sheetApi.update(this.sheetToStage.id, this.sheetToStage).then(response => {
|
||||
this.$log.debug('Updated sheet', response.data.data)
|
||||
this.$message.success('页面更新成功')
|
||||
})
|
||||
} else {
|
||||
// Create the post
|
||||
postApi.create(this.postToStage).then(response => {
|
||||
this.$log.debug('Created post', response.data.data)
|
||||
sheetApi.create(this.sheetToStage).then(response => {
|
||||
this.$log.debug('Created sheet', response.data.data)
|
||||
this.$message.success('页面创建成功')
|
||||
this.postToStage = response.data.data
|
||||
this.sheetToStage = response.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
selectSheetThumb(data) {
|
||||
this.sheetToStage.thumbnail = data.path
|
||||
this.thumDrawerVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -249,7 +260,7 @@ export default {
|
|||
min-height: 580px;
|
||||
}
|
||||
|
||||
.postControl {
|
||||
.sheetControl {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
|
|
@ -261,7 +272,7 @@ export default {
|
|||
border-radius: 0px 0px 4px 4px;
|
||||
}
|
||||
|
||||
.post-thum .img {
|
||||
.sheet-thum .img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -74,9 +74,36 @@
|
|||
</a-tab-pane>
|
||||
<a-tab-pane key="custom">
|
||||
<span slot="tab">
|
||||
<a-icon type="fork" />内置页面
|
||||
<a-icon type="fork" />自定义页面
|
||||
</span>
|
||||
自定义页面
|
||||
<a-table
|
||||
:rowKey="sheet => sheet.id"
|
||||
:columns="customColumns"
|
||||
:dataSource="formattedSheets"
|
||||
:pagination="false"
|
||||
>
|
||||
<span
|
||||
slot="status"
|
||||
slot-scope="statusProperty"
|
||||
>
|
||||
<a-badge :status="statusProperty.status" />
|
||||
{{ statusProperty.text }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
slot="updateTime"
|
||||
slot-scope="updateTime"
|
||||
>{{ updateTime | timeAgo }}</span>
|
||||
|
||||
<span
|
||||
slot="action"
|
||||
slot-scope="text, sheet"
|
||||
>
|
||||
<a href="javascript:;" @click="onEditClick(sheet)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a href="javascript:;">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
|
@ -87,6 +114,7 @@
|
|||
|
||||
<script>
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import sheetApi from '@/api/sheet'
|
||||
const internalColumns = [
|
||||
{
|
||||
title: '页面名称',
|
||||
|
|
@ -103,6 +131,36 @@ const internalColumns = [
|
|||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const customColumns = [
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
className: 'status',
|
||||
dataIndex: 'statusProperty',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '评论量',
|
||||
dataIndex: 'commentCount'
|
||||
},
|
||||
{
|
||||
title: '访问量',
|
||||
dataIndex: 'visits'
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
scopedSlots: { customRender: 'updateTime' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const internalPages = [
|
||||
{
|
||||
id: '1',
|
||||
|
|
@ -124,13 +182,32 @@ export default {
|
|||
mixins: [mixin, mixinDevice],
|
||||
data() {
|
||||
return {
|
||||
sheetStatus: sheetApi.sheetStatus,
|
||||
internalColumns,
|
||||
internalPages
|
||||
customColumns,
|
||||
internalPages,
|
||||
sheets: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formattedSheets() {
|
||||
return this.sheets.map(sheet => {
|
||||
sheet.statusProperty = this.sheetStatus[sheet.status]
|
||||
return sheet
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadSheets()
|
||||
},
|
||||
methods: {
|
||||
editPage(id) {
|
||||
this.$message.success('编辑' + id)
|
||||
loadSheets() {
|
||||
sheetApi.list().then(response => {
|
||||
this.sheets = response.data.data.content
|
||||
})
|
||||
},
|
||||
onEditClick(sheet) {
|
||||
this.$router.push({ name: 'SheetEdit', query: { sheetId: sheet.id } })
|
||||
},
|
||||
viewPage(id) {
|
||||
this.$message.success('查看' + id)
|
||||
|
|
|
|||
Loading…
Reference in New Issue