diff --git a/src/api/demo.business.issues.142.js b/src/api/demo.business.issues.142.js index b5b4464c..0e0f2bd8 100644 --- a/src/api/demo.business.issues.142.js +++ b/src/api/demo.business.issues.142.js @@ -2,7 +2,7 @@ import request from '@/plugin/axios' export function get (id) { return request({ - url: '/demo/business/issues/142', + url: '/demo/business/issues/142/detail', method: 'get', params: { id diff --git a/src/api/demo.business.table.1.js b/src/api/demo.business.table.1.js index 4e09ecb9..3c1b94af 100644 --- a/src/api/demo.business.table.1.js +++ b/src/api/demo.business.table.1.js @@ -1,9 +1,9 @@ import request from '@/plugin/axios' -export function BusinessTable1List (data) { +export function BusinessTable1List (params) { return request({ - url: '/demo/business/table/1', - method: 'post', - data + url: '/demo/business/table/1/fetch', + method: 'get', + params }) } diff --git a/src/components/d2-icon-select/index.vue b/src/components/d2-icon-select/index.vue index 7079d763..7016a9bc 100644 --- a/src/components/d2-icon-select/index.vue +++ b/src/components/d2-icon-select/index.vue @@ -1,13 +1,20 @@ {{value ? value : placeholder}} - + diff --git a/src/components/index.js b/src/components/index.js index 76a5b68a..59549f4e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -12,8 +12,9 @@ Vue.component('d2-page-cover', () => import('./d2-page-cover')) Vue.component('d2-count-up', () => import('./d2-count-up')) Vue.component('d2-highlight', () => import('./d2-highlight')) Vue.component('d2-icon', () => import('./d2-icon')) -Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue')) Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue')) +Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue')) +Vue.component('d2-icon-svg-select', () => import('./d2-icon-svg-select/index.vue')) Vue.component('d2-markdown', () => import('./d2-markdown')) Vue.component('d2-mde', () => import('./d2-mde')) Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner')) diff --git a/src/menu/modules/demo-components.js b/src/menu/modules/demo-components.js index 62b00eef..f4ebd4a7 100644 --- a/src/menu/modules/demo-components.js +++ b/src/menu/modules/demo-components.js @@ -67,9 +67,10 @@ export default { icon: 'star', children: [ { path: `${pre}icon/icon`, title: '图标组件' }, - { path: `${pre}icon/list`, title: 'FontAwesome' }, + { path: `${pre}icon/icon-svg`, title: 'svg 图标组件' }, { path: `${pre}icon/select`, title: '图标选择器' }, - { path: `${pre}icon/svg`, title: 'SVG图标组件' } + { path: `${pre}icon/select-svg`, title: 'svg 图标选择器' }, + { path: `${pre}icon/list`, title: 'FontAwesome' } ] }, { diff --git a/src/mock/api/demo.business.issues.142.js b/src/mock/api/demo.business.issues.142.js index 0c8933d8..13920c13 100644 --- a/src/mock/api/demo.business.issues.142.js +++ b/src/mock/api/demo.business.issues.142.js @@ -1,6 +1,3 @@ -import Mock from 'mockjs' -import qs from 'qs' - const db = [ { id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' }, { id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' }, @@ -8,19 +5,16 @@ const db = [ { id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' } ] -Mock.mock(RegExp('/api/demo/business/issues/142' + '.*'), 'get', ({ url, type, body }) => { - // 解析 - const options = { - params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''), - body: qs.parse(body), - url: qs.parse(url.split('?')[0]) - } - // 返回数据 - return Mock.mock( - { - code: 0, - msg: '获取数据成功', - data: db.find(e => e.id === options.params.id) +export default [ + { + path: '/api/demo/business/issues/142/detail.*', + method: 'get', + handle ({ params }) { + return { + code: 0, + msg: '获取数据成功', + data: db.find(e => e.id === params.id) + } } - ) -}) + } +] diff --git a/src/mock/api/demo.business.table.1.js b/src/mock/api/demo.business.table.1.js index ff02e4c7..f14f4346 100644 --- a/src/mock/api/demo.business.table.1.js +++ b/src/mock/api/demo.business.table.1.js @@ -1,18 +1,17 @@ -import Mock from 'mockjs' - -Mock.mock('/api/demo/business/table/1', ({ body }) => { - // 这是通过 post 传来的参数 - body = JSON.parse(body) - const { page } = body - page.total = 1000 - return Mock.mock( - { - code: 0, - msg: '获取数据成功', - data: { - page, - 'list|20': [ - { +export default [ + { + path: '/api/demo/business/table/1/fetch.*', + method: 'get', + handle ({ params, Repeat }) { + let { pageSize } = params + return { + code: 0, + msg: '获取数据成功', + data: { + page: { + total: 1000 + }, + list: Repeat(pageSize, { 'key': '@guid', 'value|1': [10, 100, 200, 500], 'type': '@boolean', @@ -21,9 +20,9 @@ Mock.mock('/api/demo/business/table/1', ({ body }) => { 'dateTimeCreat': '@datetime', 'used': '@boolean', 'dateTimeUse': '@datetime' - } - ] + }) + } } } - ) -}) + } +] diff --git a/src/mock/api/demo.plugins.mock.ajax.js b/src/mock/api/demo.plugins.mock.ajax.js index 0e696322..6df32545 100644 --- a/src/mock/api/demo.plugins.mock.ajax.js +++ b/src/mock/api/demo.plugins.mock.ajax.js @@ -1,19 +1,23 @@ -import Mock from 'mockjs' - -Mock.mock('/api/demo/plugins/mock/ajax', { - code: 0, - msg: '获取数据成功', - data: { - 'list|4-10': [ - { - 'id|+1': 1, - 'name': '@CNAME', - 'star|1-5': '★', - 'delFlag|1': [0, 1], - 'creatDate': '@DATE', - 'address': '@CITY', - 'zip': '@ZIP' +export default [ + { + path: '/api/demo/plugins/mock/ajax', + method: 'get', + handle ({ Repeat }) { + return { + code: 0, + msg: '获取数据成功', + data: { + list: Repeat('4-10', { + 'id|+1': 1, + 'name': '@CNAME', + 'star|1-5': '★', + 'delFlag|1': [0, 1], + 'creatDate': '@DATE', + 'address': '@CITY', + 'zip': '@ZIP' + }) + } } - ] + } } -}) +] diff --git a/src/mock/api/sys.login.js b/src/mock/api/sys.login.js index 2b2becb4..7283ee70 100644 --- a/src/mock/api/sys.login.js +++ b/src/mock/api/sys.login.js @@ -1,43 +1,31 @@ -import Mock from 'mockjs' - const userDB = [ - { - username: 'admin', - password: 'admin', - uuid: 'admin-uuid', - name: '管理员' - }, - { - username: 'editor', - password: 'editor', - uuid: 'editor-uuid', - name: '编辑' - }, - { - username: 'user1', - password: 'user1', - uuid: 'user1-uuid', - name: '用户1' - } + { username: 'admin', password: 'admin', uuid: 'admin-uuid', name: '管理员' }, + { username: 'editor', password: 'editor', uuid: 'editor-uuid', name: '编辑' }, + { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: '用户1' } ] -Mock.mock('/api/login', 'post', ({ url, type, body }) => { - const bodyObj = JSON.parse(body) - const user = userDB.find(e => e.username === bodyObj.username && e.password === bodyObj.password) - if (user) { - return { - code: 0, - msg: '登录成功', - data: { - ...user, - token: 'd787syv8dys8cas80d9s0a0d8f79ads56f7s4d56f879a8as89fd980s7dg' +export default [ + { + path: '/api/login', + method: 'post', + handle ({ body }) { + const user = userDB.find(e => e.username === body.username && e.password === body.password) + if (user) { + return { + code: 0, + msg: '登录成功', + data: { + ...user, + token: '8dfhassad0asdjwoeiruty' + } + } + } else { + return { + code: 401, + msg: '用户名或密码错误', + data: {} + } } } - } else { - return { - code: 401, - msg: '用户名或密码错误', - data: {} - } } -}) +] diff --git a/src/mock/d2-mock/index.js b/src/mock/d2-mock/index.js new file mode 100644 index 00000000..0dd19625 --- /dev/null +++ b/src/mock/d2-mock/index.js @@ -0,0 +1,73 @@ +import Mock from 'mockjs' +import qs from 'qs' +import withCredentials from './patch/withCredentials' + +/* 补丁 */ +withCredentials(Mock) + +/* Mock 默认配置 */ +Mock.setup({ timeout: '200-300' }) + +/* 扩展 [生成器] */ +const Generator = (prop, template) => { + const obj = {} + obj[prop] = [template] + return Mock.mock(obj) +} + +/* 扩展 [循环] */ +const Repeat = (num, itemTemplate) => Generator(`data|${num}`, itemTemplate).data + +const CustomExtends = { + Generator, + Repeat, + Mock, + Random: Mock.Random +} + +const extend = (prop, value) => { + CustomExtends[prop] = value +} + +/* 装配配置组 */ +const wired = ({ url, type, body }) => ({ + method: type, + params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''), + body: JSON.parse(body), + url: qs.parse(url.split('?')[0]), + ...CustomExtends +}) + +const setup = (path, method, handle) => { + Mock.mock( + RegExp(path), + method, + typeof handle === 'function' ? o => handle(wired(o)) : handle + ) +} + +const load = (collection) => { + collection.map(({ path, method, handle }) => { + if (method === '*') { + method = [ + 'get', + 'head', + 'post', + 'put', + 'delete', + 'connect', + 'options', + 'trace', + 'patch' + ] + } + if (typeof method === 'string' && method.indexOf('|') > -1) method = method.split('|') + if (method instanceof Array) { + method.map(item => setup(path, item, handle)) + } else { + setup(path, method, handle) + } + }) +} + +export default { setup, load, extend } diff --git a/src/mock/d2-mock/patch/withCredentials.js b/src/mock/d2-mock/patch/withCredentials.js new file mode 100644 index 00000000..71a65a32 --- /dev/null +++ b/src/mock/d2-mock/patch/withCredentials.js @@ -0,0 +1,8 @@ +export default function (Mock) { + // http://cnine.me/note/FrontEnd/mock-lose-cookies-dbg.html + Mock.XHR.prototype.__send = Mock.XHR.prototype.send + Mock.XHR.prototype.send = function () { + if (this.custom.xhr) this.custom.xhr.withCredentials = this.withCredentials || false + this.__send.apply(this, arguments) + } +} diff --git a/src/mock/index.js b/src/mock/index.js index 7711bd1f..1a3dec93 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -1,19 +1,10 @@ -import Mock from 'mockjs' +import d2Mock from './d2-mock' -// 解决 Mock 情况下，携带 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题 -Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send -Mock.XHR.prototype.send = function () { - if (this.custom.xhr) { - this.custom.xhr.withCredentials = this.withCredentials || false - } - this.proxy_send(...arguments) -} - -// 导入所有的接口 const req = context => context.keys().map(context) -req(require.context('./api/', true, /\.js$/)) +const options = req(require.context('./api/', true, /\.js$/)) + .filter(e => e.default) + .map(e => e.default) -// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留 -Mock.setup({ - timeout: '300-600' +options.forEach(option => { + d2Mock.load(option) }) diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue index 46df4540..31ac9067 100644 --- a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue +++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue @@ -3,7 +3,7 @@ :current-page="current" :page-size="size" :total="total" - :page-sizes="[100, 200, 300, 400]" + :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" style="margin: -10px;" @size-change="handleSizeChange" diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue index ac1b5fe6..85cd124d 100644 --- a/src/pages/demo/business/table/1/index.vue +++ b/src/pages/demo/business/table/1/index.vue @@ -9,9 +9,9 @@ :loading="loading"/> @@ -32,9 +32,9 @@ export default { table: [], loading: false, page: { - current: 1, - size: 100, - total: 0 + pageCurrent: 1, + pageSize: 10, + pageTotal: 0 } } }, @@ -57,7 +57,7 @@ export default { }) BusinessTable1List({ ...form, - page: this.page + ...this.page }) .then(res => { this.loading = false @@ -65,7 +65,7 @@ export default { title: '模拟表格数据请求完毕' }) this.table = res.list - this.page = res.page + this.page.pageTotal = res.page.total }) .catch(err => { this.loading = false diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/icon-svg.vue similarity index 100% rename from src/pages/demo/components/icon/svg.vue rename to src/pages/demo/components/icon/icon-svg.vue diff --git a/src/pages/demo/components/icon/select-svg.vue b/src/pages/demo/components/icon/select-svg.vue new file mode 100644 index 00000000..244ba521 --- /dev/null +++ b/src/pages/demo/components/icon/select-svg.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/router/modules/components.js b/src/router/modules/components.js index d1864fcb..c8c56fa1 100644 --- a/src/router/modules/components.js +++ b/src/router/modules/components.js @@ -31,9 +31,10 @@ export default { { path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE'), meta: { ...meta, title: 'markdown编辑器' } }, { path: 'highlight', name: `${pre}highlight`, component: () => import('@/pages/demo/components/highlight'), meta: { ...meta, title: '代码高亮组件' } }, { path: 'icon/icon', name: `${pre}icon-icon`, component: () => import('@/pages/demo/components/icon/icon.vue'), meta: { ...meta, title: '图标组件' } }, + { path: 'icon/icon-svg', name: `${pre}icon-icon-svg`, component: () => import('@/pages/demo/components/icon/icon-svg.vue'), meta: { ...meta, title: 'svg 图标' } }, + { path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue'), meta: { ...meta, title: '图标选择器' } }, + { path: 'icon/select-svg', name: `${pre}icon-select-svg`, component: () => import('@/pages/demo/components/icon/select-svg.vue'), meta: { ...meta, title: 'svg 图标选择器' } }, { path: 'icon/list', name: `${pre}icon-list`, component: () => import('@/pages/demo/components/icon/list.vue'), meta: { ...meta, title: '图标列表' } }, - { path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue'), meta: { ...meta, title: '图表选择器组件' } }, - { path: 'icon/svg', name: `${pre}icon-svg`, component: () => import('@/pages/demo/components/icon/svg.vue'), meta: { ...meta, title: 'svg 图标' } }, { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/components/index'), meta: { ...meta, title: '组件首页' } }, { path: 'json-tree', name: `${pre}json-tree`, component: () => import('@/pages/demo/components/json-tree'), meta: { ...meta, title: 'JSON 展示' } }, { path: 'layout/grid', name: `${pre}layout-grid`, component: () => import('@/pages/demo/components/layout/grid.vue'), meta: { ...meta, title: '拖拽网格布局' } },