interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: refine form example

Browse source
This commit is contained in:
Pan 2017-10-25 09:54:21 +08:00
parent 59073fb013
commit feb6785654
3 changed files with 55 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/MDinput/index.vue
View file

@ -71,6 +71,11 @@ export default {
}
}
},
watch: {
value(newValue) {
this.currentValue = newValue
}
},
data() {
return {
currentValue: this.value,

4
src/mock/article.js
View file

@ -50,7 +50,7 @@ export default {
author: { key: 'mockPan' },
source_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_short: '我是测试数据',
display_time: +new Date(),
@ -59,6 +59,6 @@ export default {
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
status: 'published',
tags: [],
title: ''
title: 'vue-element-admin'
})
}

81
src/views/example/form.vue
View file

@ -4,27 +4,28 @@
<sticky :className="'sub-navbar '+postForm.status">
<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'}">
<el-button type="info">创建form</el-button>
</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>
<router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create'}">
<el-button type="info">创建form</el-button>
</router-link>
<el-dropdown trigger="click">
<el-button>
平台<i class="el-icon-caret-bottom el-icon--right"></i>
<el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
<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-dropdown-menu class="no-border" slot="dropdown">
<el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
@ -37,7 +38,8 @@
<el-dropdown trigger="click">
<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-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">
@ -130,6 +132,19 @@ import { validateURL } from '@/utils/validate'
import { fetchArticle } from '@/api/article'
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 {
name: 'articleDetail',
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
@ -161,24 +176,14 @@ export default {
}
}
return {
postForm: {
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
source_name: '', // 文章外部作者
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform']
},
postForm: Object.assign({}, defaultForm),
fetchSuccess: true,
loading: false,
userLIstOptions: [],
platformsOptions: [
{ key: 'a-platform', name: 'a-platform' },
{ key: 'b-platform', name: 'b-platform' },
{ key: 'c-platform', name: 'c-platform' }
{ key: 'a-platform', name: 'a-platform' },
{ key: 'b-platform', name: 'b-platform' },
{ key: 'c-platform', name: 'c-platform' }
],
rules: {
image_uri: [{ validator: validateRequire }],
@ -202,6 +207,16 @@ export default {
this.fetchData()
}
},
watch: {
// 如果路由有变化，会再次执行该方法
'$route'(to, from) {
if (this.isEdit) {
this.fetchData()
} else {
this.postForm = defaultForm
}
}
},
methods: {
fetchData() {
fetchArticle().then(response => {