forked from AkkomaGang/admin-fe
refactor: refine form example
This commit is contained in:
parent
59073fb013
commit
feb6785654
3 changed files with 55 additions and 35 deletions
|
@ -71,6 +71,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
value(newValue) {
|
||||||
|
this.currentValue = newValue
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentValue: this.value,
|
currentValue: this.value,
|
||||||
|
|
|
@ -50,7 +50,7 @@ export default {
|
||||||
author: { key: 'mockPan' },
|
author: { key: 'mockPan' },
|
||||||
source_name: '原创作者',
|
source_name: '原创作者',
|
||||||
category_item: [{ key: 'global', name: '全球' }],
|
category_item: [{ key: 'global', name: '全球' }],
|
||||||
comment_disabled: false,
|
comment_disabled: true,
|
||||||
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
|
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
|
||||||
content_short: '我是测试数据',
|
content_short: '我是测试数据',
|
||||||
display_time: +new Date(),
|
display_time: +new Date(),
|
||||||
|
@ -59,6 +59,6 @@ export default {
|
||||||
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
|
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||||
status: 'published',
|
status: 'published',
|
||||||
tags: [],
|
tags: [],
|
||||||
title: ''
|
title: 'vue-element-admin'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,27 +4,28 @@
|
||||||
|
|
||||||
<sticky :className="'sub-navbar '+postForm.status">
|
<sticky :className="'sub-navbar '+postForm.status">
|
||||||
<template v-if="fetchSuccess">
|
<template v-if="fetchSuccess">
|
||||||
<div style="display:inline-block">
|
|
||||||
|
|
||||||
<el-dropdown trigger="click">
|
<router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create'}">
|
||||||
<router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create'}">
|
<el-button type="info">创建form</el-button>
|
||||||
<el-button type="info">创建form</el-button>
|
</router-link>
|
||||||
</router-link>
|
|
||||||
<el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
|
|
||||||
<el-dropdown-menu class="no-padding no-hover" slot="dropdown">
|
|
||||||
<el-dropdown-item>
|
|
||||||
<el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
|
|
||||||
<el-radio :label="true">关闭评论</el-radio>
|
|
||||||
<el-radio :label="false">打开评论</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<el-button>
|
<el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
|
||||||
平台<i class="el-icon-caret-bottom el-icon--right"></i>
|
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||||
|
</el-button>
|
||||||
|
<el-dropdown-menu class="no-padding" slot="dropdown">
|
||||||
|
<el-dropdown-item>
|
||||||
|
<el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
|
||||||
|
<el-radio :label="true">关闭评论</el-radio>
|
||||||
|
<el-radio :label="false">打开评论</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<el-button>平台
|
||||||
|
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||||
<el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
|
<el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
|
||||||
|
@ -37,7 +38,8 @@
|
||||||
|
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<el-button>
|
<el-button>
|
||||||
外链<i class="el-icon-caret-bottom el-icon--right"></i>
|
外链
|
||||||
|
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
|
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
|
||||||
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
||||||
|
@ -130,6 +132,19 @@ import { validateURL } from '@/utils/validate'
|
||||||
import { fetchArticle } from '@/api/article'
|
import { fetchArticle } from '@/api/article'
|
||||||
import { userSearch } from '@/api/remoteSearch'
|
import { userSearch } from '@/api/remoteSearch'
|
||||||
|
|
||||||
|
const defaultForm = {
|
||||||
|
title: '', // 文章题目
|
||||||
|
content: '', // 文章内容
|
||||||
|
content_short: '', // 文章摘要
|
||||||
|
source_uri: '', // 文章外链
|
||||||
|
image_uri: '', // 文章图片
|
||||||
|
source_name: '', // 文章外部作者
|
||||||
|
display_time: undefined, // 前台展示时间
|
||||||
|
id: undefined,
|
||||||
|
platforms: ['a-platform'],
|
||||||
|
comment_disabled: false
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'articleDetail',
|
name: 'articleDetail',
|
||||||
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
|
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
|
||||||
|
@ -161,24 +176,14 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
postForm: {
|
postForm: Object.assign({}, defaultForm),
|
||||||
title: '', // 文章题目
|
|
||||||
content: '', // 文章内容
|
|
||||||
content_short: '', // 文章摘要
|
|
||||||
source_uri: '', // 文章外链
|
|
||||||
image_uri: '', // 文章图片
|
|
||||||
source_name: '', // 文章外部作者
|
|
||||||
display_time: undefined, // 前台展示时间
|
|
||||||
id: undefined,
|
|
||||||
platforms: ['a-platform']
|
|
||||||
},
|
|
||||||
fetchSuccess: true,
|
fetchSuccess: true,
|
||||||
loading: false,
|
loading: false,
|
||||||
userLIstOptions: [],
|
userLIstOptions: [],
|
||||||
platformsOptions: [
|
platformsOptions: [
|
||||||
{ key: 'a-platform', name: 'a-platform' },
|
{ key: 'a-platform', name: 'a-platform' },
|
||||||
{ key: 'b-platform', name: 'b-platform' },
|
{ key: 'b-platform', name: 'b-platform' },
|
||||||
{ key: 'c-platform', name: 'c-platform' }
|
{ key: 'c-platform', name: 'c-platform' }
|
||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
image_uri: [{ validator: validateRequire }],
|
image_uri: [{ validator: validateRequire }],
|
||||||
|
@ -202,6 +207,16 @@ export default {
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
// 如果路由有变化,会再次执行该方法
|
||||||
|
'$route'(to, from) {
|
||||||
|
if (this.isEdit) {
|
||||||
|
this.fetchData()
|
||||||
|
} else {
|
||||||
|
this.postForm = defaultForm
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchData() {
|
fetchData() {
|
||||||
fetchArticle().then(response => {
|
fetchArticle().then(response => {
|
||||||
|
|
Loading…
Reference in a new issue