From 6d9ddadcf122b4e61deba797d21642e0757ddb4d Mon Sep 17 00:00:00 2001 From: Pan Date: Sat, 22 Apr 2017 21:44:36 +0800 Subject: [PATCH] add table demo --- src/api/article.js | 4 +- src/api/article_table.js | 48 +++++ src/assets/iconfont/iconfont.js | 6 + src/mock/article_table.js | 45 +++++ src/mock/index.js | 7 + src/router/index.js | 4 +- src/utils/fetch.js | 6 +- src/views/example/table.vue | 317 ++++++++++++++++++++++++++++++++ 8 files changed, 431 insertions(+), 6 deletions(-) create mode 100644 src/api/article_table.js create mode 100644 src/mock/article_table.js create mode 100644 src/views/example/table.vue diff --git a/src/api/article.js b/src/api/article.js index c062cbb7..682cc3ab 100644 --- a/src/api/article.js +++ b/src/api/article.js @@ -1,7 +1,7 @@ -import { tpFetch } from 'utils/fetch'; +import { fetch } from 'utils/fetch'; export function getList() { - return tpFetch({ + return fetch({ url: '/article/list', method: 'get' }); diff --git a/src/api/article_table.js b/src/api/article_table.js new file mode 100644 index 00000000..5f0d4595 --- /dev/null +++ b/src/api/article_table.js @@ -0,0 +1,48 @@ +import { fetch } from 'utils/fetch'; +import { param } from 'utils'; + +// export function calendarsList(query) { +// return fetch({ +// url: '/finfo/calendars?' + param(query), +// method: 'get' +// }); +// } + +export function fetchList(query) { + return fetch({ + url: '/article_table/list', + method: 'get' + }); +} + + +export function calendarCreate(data) { + return fetch({ + url: '/finfo/calendar/create', + method: 'post', + data + }); +} + +export function calendarDelete(id) { + return fetch({ + url: '/finfo/calendar/delete', + method: 'post', + data: { id } + }); +} + +export function calendarUpdate(data) { + return fetch({ + url: '/finfo/calendar/update', + method: 'post', + data + }); +} + +export function calcountriesList() { + return fetch({ + url: '/finfo/calcountries', + method: 'get' + }); +} diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js index acba8d0e..d988ec76 100644 --- a/src/assets/iconfont/iconfont.js +++ b/src/assets/iconfont/iconfont.js @@ -38,6 +38,12 @@ '' + '' + '' + + '' + + '' + + '' + + '' + + '' + + '' + '' + '' + '' + diff --git a/src/mock/article_table.js b/src/mock/article_table.js new file mode 100644 index 00000000..d82629b8 --- /dev/null +++ b/src/mock/article_table.js @@ -0,0 +1,45 @@ +import Mock from 'mockjs'; + + +const List = []; +const count = 50; + +for (let i = 0; i < count; i++) { + List.push(Mock.mock({ + id: '@increment', + timestamp: +Mock.Random.date('T'), + author: '@cname', + title: '@ctitle(10, 20)', + forecast: '@float(0, 100, 2, 2)', + importance: '@integer(1, 3)', + 'calendar_type|1': ['FD', 'FE', 'BI', 'VN'], + 'status|1': ['published', 'draft', 'deleted'] + })); +} + +export default { + getList: config => + // let {page, sortWay, startTime, endTime, userName, age} = config.params; + // let mockUsers = _Users.filter(user => { + // if (startTime && user.date < startTime) return false; + // if (endTime && user.date > endTime) return false; + // if (userName && user.name !== userName) return false; + // if (age && user.age !== age) return false; + // return true; + // }); + // if (sortWay) { + // let {order, prop} = sortWay; + // mockUsers = mockUsers.sort((u1, u2) => order === 'ascending' ? u1[prop] - u2[prop] : u2[prop] - u1[prop]); + // } + // if (page === 0) page++; + // mockUsers = mockUsers.filter((u, index) => index < 20 * page && index >= 20 * (page - 1)); + new Promise(resolve => { + setTimeout(() => { + resolve([200, { + total: List.length, + items: List + }]); + }, 100); + }) + +}; diff --git a/src/mock/index.js b/src/mock/index.js index 9a125c4f..081c2757 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -1,6 +1,7 @@ import axios from 'axios'; import Mock from 'mockjs'; import MockAdapter from 'axios-mock-adapter'; +import article_tableAPI from './article_table' const mock = new MockAdapter(axios); const articleList = { @@ -15,4 +16,10 @@ const articleList = { } const data = JSON.stringify(Mock.mock(articleList)) mock.onGet('/article/list').reply(200, data); + + +mock.onGet('/article_table/list').reply(article_tableAPI.getList); + + + export default mock; diff --git a/src/router/index.js b/src/router/index.js index a19fdbe7..1f7d593e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -50,6 +50,7 @@ const Theme = resolve => require(['../views/theme/index'], resolve); /* example*/ const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve); +const Table = resolve => require(['../views/example/table'], resolve); /* admin*/ @@ -168,7 +169,8 @@ export default new Router({ name: '综合实例', icon: 'zonghe', children: [ - { path: 'dynamictable', component: DynamicTable, name: '动态table' } + { path: 'dynamictable', component: DynamicTable, name: '动态table' }, + { path: 'table', component: Table, name: '综合table' } ] }, // { diff --git a/src/utils/fetch.js b/src/utils/fetch.js index 7b07bd6d..9110f774 100644 --- a/src/utils/fetch.js +++ b/src/utils/fetch.js @@ -3,7 +3,7 @@ import { Message } from 'element-ui'; import store from '../store'; import router from '../router'; -export default function fetch(options) { +export default function _fetch(options) { return new Promise((resolve, reject) => { const instance = axios.create({ baseURL: process.env.BASE_API, @@ -49,10 +49,10 @@ export default function fetch(options) { }); } -export function tpFetch(options) { +export function fetch(options) { return new Promise((resolve, reject) => { const instance = axios.create({ - // timeout: 2000, + timeout: 2000 // 超时 }); instance(options) .then(response => { diff --git a/src/views/example/table.vue b/src/views/example/table.vue new file mode 100644 index 00000000..197bb383 --- /dev/null +++ b/src/views/example/table.vue @@ -0,0 +1,317 @@ + + +