zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf form demo

This commit is contained in:
Pan 2018-05-08 17:09:27 +08:00
parent a57505fd1d
commit de8a38d6ec
8 changed files with 114 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/article.js
View File

@ -8,10 +8,11 @@ export function fetchList(query) {
}) })
} }
export function fetchArticle() { export function fetchArticle(id) {
return request({ return request({
url: '/article/detail', url: '/article/detail',
method: 'get' method: 'get',
params: { id }
}) })
} }

34
src/mock/article.js
View File

@ -4,6 +4,9 @@ import { param2Obj } from '@/utils'
const List = [] const List = []
const count = 100 const count = 100
const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
List.push(Mock.mock({ List.push(Mock.mock({
id: '@increment', id: '@increment',
@ -11,12 +14,17 @@ for (let i = 0; i < count; i++) {
author: '@first', author: '@first',
reviewer: '@first', reviewer: '@first',
title: '@title(5, 10)', title: '@title(5, 10)',
content_short: '我是测试数据',
content: baseContent,
forecast: '@float(0, 100, 2, 2)', forecast: '@float(0, 100, 2, 2)',
importance: '@integer(1, 3)', importance: '@integer(1, 3)',
'type|1': ['CN', 'US', 'JP', 'EU'], 'type|1': ['CN', 'US', 'JP', 'EU'],
'status|1': ['published', 'draft', 'deleted'], 'status|1': ['published', 'draft', 'deleted'],
display_time: '@datetime', display_time: '@datetime',
pageviews: '@integer(300, 5000)' comment_disabled: true,
pageviews: '@integer(300, 5000)',
image_uri,
platforms: ['a-platform']
})) }))
} }
@ -45,22 +53,14 @@ export default {
getPv: () => ({ getPv: () => ({
pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }] pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
}), }),
getArticle: () => ({ getArticle: (config) => {
id: 120000000001, const { id } = param2Obj(config.url)
author: { key: 'mockPan' }, for (const article of List) {
source_name: '原创作者', if (article.id === +id) {
category_item: [{ key: 'global', name: '全球' }], return article
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(),
image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
platforms: ['a-platform'],
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
status: 'published',
tags: [],
title: 'vue-element-admin'
}),
createArticle: () => ({ createArticle: () => ({
data: 'success' data: 'success'
}), }),

4
src/router/index.js
View File

@ -166,7 +166,7 @@ export const asyncRouterMap = [
{ {
path: '/example', path: '/example',
component: Layout, component: Layout,
redirect: '/example/table/complex-table', redirect: '/example/list',
name: 'example', name: 'example',
meta: { meta: {
title: 'example', title: 'example',
@ -174,7 +174,7 @@ export const asyncRouterMap = [
}, },
children: [ children: [
{ path: 'create', component: _import('example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }}, { path: 'create', component: _import('example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
{ path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle' }, hidden: true }, { path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
{ path: 'list', component: _import('example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }} { path: 'list', component: _import('example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
] ]
}, },

139
src/views/example/components/ArticleDetail.vue
View File

@ -3,62 +3,54 @@
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm"> <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
<sticky :className="'sub-navbar '+postForm.status"> <sticky :className="'sub-navbar '+postForm.status">
<template v-if="fetchSuccess"> <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}">
<el-button type="info">创建form</el-button>
</router-link>
<router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}"> <el-dropdown trigger="click">
<el-button type="info">创建form</el-button> <el-button plain>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
</router-link> <i class="el-icon-caret-bottom el-icon--right"></i>
<el-dropdown trigger="click">
<el-button plain>{{!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 plain>平台
<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;">
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
{{item.name}}
</el-checkbox>
</el-checkbox-group>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click">
<el-button plain>
外链
<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">
<el-input placeholder="请输入内容" v-model="postForm.source_uri">
<template slot="prepend">填写url</template>
</el-input>
</el-form-item>
</el-dropdown-menu>
</el-dropdown>
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
</el-button> </el-button>
<el-button v-loading="loading" type="warning" @click="draftForm">草稿</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>
</template> <el-dropdown trigger="click">
<template v-else> <el-button plain>平台
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag> <i class="el-icon-caret-bottom el-icon--right"></i>
</template> </el-button>
<el-dropdown-menu class="no-border" slot="dropdown">
<el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
{{item.name}}
</el-checkbox>
</el-checkbox-group>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click">
<el-button plain>
外链
<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">
<el-input placeholder="请输入内容" v-model="postForm.source_uri">
<template slot="prepend">填写url</template>
</el-input>
</el-form-item>
</el-dropdown-menu>
</el-dropdown>
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
</el-button>
<el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
</sticky> </sticky>
<div class="createPost-main-container"> <div class="createPost-main-container">
@ -68,27 +60,25 @@
<MDinput name="name" v-model="postForm.title" required :maxlength="100"> <MDinput name="name" v-model="postForm.title" required :maxlength="100">
标题 标题
</MDinput> </MDinput>
<span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
</el-form-item> </el-form-item>
<div class="postInfo-container"> <div class="postInfo-container">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label-width="45px" label="作者:" class="postInfo-container-item"> <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
<multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择" <el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
deselectLabel="删除" track-by="key" :internalSearch="false" label="key"> <el-option v-for="item in userListOptions" :key="item" :label="item" :value="item">
<span slot='noResult'>无结果</span> </el-option>
</multiselect> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-tooltip class="item" effect="dark" content="将替换作者" placement="top"> <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
<el-form-item label-width="50px" label="来源:" class="postInfo-container-item"> <el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
<el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name"> :high-threshold="3">
</el-input> </el-rate>
</el-form-item> </el-form-item>
</el-tooltip>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
@ -139,11 +129,11 @@ const defaultForm = {
content_short: '', // 文章摘要 content_short: '', // 文章摘要
source_uri: '', // 文章外链 source_uri: '', // 文章外链
image_uri: '', // 文章图片 image_uri: '', // 文章图片
source_name: '', // 文章外部作者
display_time: undefined, // 前台展示时间 display_time: undefined, // 前台展示时间
id: undefined, id: undefined,
platforms: ['a-platform'], platforms: ['a-platform'],
comment_disabled: false comment_disabled: false,
importance: 0
} }
export default { export default {
@ -184,9 +174,8 @@ export default {
} }
return { return {
postForm: Object.assign({}, defaultForm), postForm: Object.assign({}, defaultForm),
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' },
@ -207,17 +196,20 @@ export default {
}, },
created() { created() {
if (this.isEdit) { if (this.isEdit) {
this.fetchData() const id = this.$route.params && this.$route.params.id
this.fetchData(id)
} else { } else {
this.postForm = Object.assign({}, defaultForm) this.postForm = Object.assign({}, defaultForm)
} }
}, },
methods: { methods: {
fetchData() { fetchData(id) {
fetchArticle().then(response => { fetchArticle(id).then(response => {
this.postForm = response.data this.postForm = response.data
// Just for test
this.postForm.title += ` Article Id:${this.postForm.id}`
this.postForm.content_short += ` Article Id:${this.postForm.id}`
}).catch(err => { }).catch(err => {
this.fetchSuccess = false
console.log(err) console.log(err)
}) })
}, },
@ -261,9 +253,7 @@ export default {
userSearch(query).then(response => { userSearch(query).then(response => {
if (!response.data.items) return if (!response.data.items) return
console.log(response) console.log(response)
this.userLIstOptions = response.data.items.map(v => ({ this.userListOptions = response.data.items.map(v => v.name)
key: v.name
}))
}) })
} }
} }
@ -311,4 +301,3 @@ export default {
} }
} }
</style> </style>

58
src/views/example/list.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container">
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="ID" width="80"> <el-table-column align="center" label="ID" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
@ -35,22 +34,28 @@
<el-table-column min-width="300px" label="Title"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.title"></el-input> <router-link class="link-type" :to="'/example/edit/'+scope.row.id">
<el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button> <span>{{ scope.row.title }}</span>
</template> </router-link>
<span v-else>{{ scope.row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="Actions" width="120"> <el-table-column align="center" label="Actions" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button> <router-link :to="'/example/edit/'+scope.row.id">
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button> <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
</router-link>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div> </div>
</template> </template>
@ -58,10 +63,11 @@
import { fetchList } from '@/api/article' import { fetchList } from '@/api/article'
export default { export default {
name: 'inlineEditTable', name: 'articleList',
data() { data() {
return { return {
list: null, list: null,
total: 0,
listLoading: true, listLoading: true,
listQuery: { listQuery: {
page: 1, page: 1,
@ -86,32 +92,18 @@ export default {
getList() { getList() {
this.listLoading = true this.listLoading = true
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then(response => {
const items = response.data.items this.list = response.data.items
this.list = items.map(v => { this.total = response.data.total
this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
v.originalTitle = v.title // will be used when user click the cancel botton
return v
})
this.listLoading = false this.listLoading = false
}) })
}, },
cancelEdit(row) { handleSizeChange(val) {
row.title = row.originalTitle this.listQuery.limit = val
row.edit = false this.getList()
this.$message({
message: 'The title has been restored to the original value',
type: 'warning'
})
}, },
confirmEdit(row) { handleCurrentChange(val) {
row.edit = false this.listQuery.page = val
row.originalTitle = row.title this.getList()
this.$message({
message: 'The title has been edited',
type: 'success'
})
} }
} }
} }

2
src/views/table/complexTable.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container">
<div class="filter-container"> <div class="filter-container">
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title"> <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
</el-input> </el-input>

2
src/views/table/dragTable.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container">
<!-- Note that row-key is necessary to get a correct row order. --> <!-- Note that row-key is necessary to get a correct row order. -->
<el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

2
src/views/table/inlineEditTable.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container">
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">