feat: mock manage api

src/main.js

@@ -7,6 +7,9 @@ import router from './router'
 import store from './store/'
 import { VueAxios } from './utils/request'
 
+// mock
+import './mock'
+
 import bootstrap from './core/bootstrap'
 import './core/use'
 import './permission' // permission control
@@ -14,11 +17,6 @@ import './utils/filter' // global filter
 
 Vue.config.productionTip = false
 
-// mock
-if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
-  import('./mock')
-}
-
 // mount axios Vue.$http and this.$http
 Vue.use(VueAxios)
 

src/mock/index.js

@@ -1,8 +1,16 @@
-import Mock from 'mockjs'
+import Mock from 'mockjs2'
 
-import './services/auth'
-import './services/user'
+// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
+if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
+  // 使用同步加载依赖
+  // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
+  console.log('mock mounting')
+  require('./services/auth')
+  require('./services/user')
+  require('./services/manage')
 
-Mock.setup({
-  timeout: 800 // setter delay time
-})
+  Mock.setup({
+    timeout: 800 // setter delay time
+  })
+  console.log('mock mounted')
+}

src/mock/services/auth.js

@@ -1,4 +1,4 @@
-import Mock from 'mockjs'
+import Mock from 'mockjs2'
 import { builder, getBody } from '../util'
 
 const username = ['admin', 'user', 'super']
@@ -34,5 +34,15 @@ const logout = () => {
   return builder({}, '[测试接口] 注销成功')
 }
 
+const smsCaptcha = () => {
+  return builder({ captcha: Mock.mock('@integer(10000, 99999)') })
+}
+
+const twofactor = () => {
+  return builder({ stepCode: Mock.mock('@integer(0, 1)') })
+}
+
 Mock.mock(/\/auth\/login/, 'post', login)
 Mock.mock(/\/auth\/logout/, 'post', logout)
+Mock.mock(/\/account\/sms/, 'post', smsCaptcha)
+Mock.mock(/\/auth\/2step-code/, 'post', twofactor)

src/mock/services/manage.js

@@ -0,0 +1,256 @@
+import Mock from 'mockjs2'
+import { builder, getQueryParameters } from '../util'
+
+const totalCount = 5701
+
+const serverList = (options) => {
+  const parameters = getQueryParameters(options)
+
+  const result = []
+  const pageNo = parseInt(parameters.pageNo)
+  const pageSize = parseInt(parameters.pageSize)
+  const totalPage = Math.ceil(totalCount / pageSize)
+  const key = (pageNo - 1) * pageSize
+  const next = (pageNo >= totalPage ? (totalCount % pageSize) : pageSize) + 1
+
+  for (let i = 1; i < next; i++) {
+    const tmpKey = key + i
+    result.push({
+      key: tmpKey,
+      no: 'No ' + tmpKey,
+      description: '这是一段描述',
+      callNo: Mock.mock('@integer(1, 999)'),
+      status: Mock.mock('@integer(0, 3)'),
+      updatedAt: Mock.mock('@datetime'),
+      editable: false
+    })
+  }
+
+  return builder({
+    pageSize: pageSize,
+    pageNo: pageNo,
+    totalCount: totalCount,
+    totalPage: totalPage,
+    data: result
+  })
+}
+
+const role = () => {
+  return builder({ message: 'ok' })
+}
+
+const projects = () => {
+  return builder({
+    'data': [{
+      id: 1,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+      title: 'Alipay',
+      description: '那是一种内在的东西， 他们到达不了，也无法触及的',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 2,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+      title: 'Angular',
+      description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 3,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+      title: 'Ant Design',
+      description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 4,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+      title: 'Ant Design Pro',
+      description: '那时候我只会想自己想要什么，从不想自己拥有什么',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 5,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
+      title: 'Bootstrap',
+      description: '凛冬将至',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 6,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
+      title: 'Vue',
+      description: '生命就像一盒巧克力，结果往往出人意料',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    }
+    ],
+    'pageSize': 10,
+    'pageNo': 0,
+    'totalPage': 6,
+    'totalCount': 57
+  })
+}
+
+const activity = () => {
+  return builder([{
+    id: 1,
+    user: {
+      nickname: '@name',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+    },
+    project: {
+      name: '白鹭酱油开发组',
+      action: '更新',
+      event: '番组计划'
+    },
+    time: '2018-08-23 14:47:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '蓝莓酱',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
+    },
+    project: {
+      name: '白鹭酱油开发组',
+      action: '更新',
+      event: '番组计划'
+    },
+    time: '2018-08-23 09:35:37'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '@name',
+      avatar: '@image(64x64)'
+    },
+    project: {
+      name: '白鹭酱油开发组',
+      action: '创建',
+      event: '番组计划'
+    },
+    time: '2017-05-27 00:00:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '曲丽丽',
+      avatar: '@image(64x64)'
+    },
+    project: {
+      name: '高逼格设计天团',
+      action: '更新',
+      event: '六月迭代'
+    },
+    time: '2018-08-23 14:47:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '@name',
+      avatar: '@image(64x64)'
+    },
+    project: {
+      name: '高逼格设计天团',
+      action: 'created',
+      event: '六月迭代'
+    },
+    time: '2018-08-23 14:47:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '曲丽丽',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+    },
+    project: {
+      name: '高逼格设计天团',
+      action: 'created',
+      event: '六月迭代'
+    },
+    time: '2018-08-23 14:47:00'
+  }
+  ])
+}
+
+const teams = () => {
+  return builder([{
+    id: 1,
+    name: '科学搬砖组',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+  },
+  {
+    id: 2,
+    name: '程序员日常',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png'
+  },
+  {
+    id: 1,
+    name: '设计天团',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png'
+  },
+  {
+    id: 1,
+    name: '中二少女团',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png'
+  },
+  {
+    id: 1,
+    name: '骗你学计算机',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png'
+  }
+  ])
+}
+
+const radar = () => {
+  return builder([{
+    item: '引用',
+    '个人': 70,
+    '团队': 30,
+    '部门': 40
+  },
+  {
+    item: '口碑',
+    '个人': 60,
+    '团队': 70,
+    '部门': 40
+  },
+  {
+    item: '产量',
+    '个人': 50,
+    '团队': 60,
+    '部门': 40
+  },
+  {
+    item: '贡献',
+    '个人': 40,
+    '团队': 50,
+    '部门': 40
+  },
+  {
+    item: '热度',
+    '个人': 60,
+    '团队': 70,
+    '部门': 40
+  },
+  {
+    item: '引用',
+    '个人': 70,
+    '团队': 50,
+    '部门': 40
+  }
+  ])
+}
+
+Mock.mock(/\/service/, 'get', serverList)
+Mock.mock(/\/role/, 'get', role)
+Mock.mock(/\/list\/search\/projects/, 'get', projects)
+Mock.mock(/\/workplace\/activity/, 'get', activity)
+Mock.mock(/\/workplace\/teams/, 'get', teams)
+Mock.mock(/\/workplace\/radar/, 'get', radar)

src/mock/services/user.js

@@ -1,5 +1,5 @@
-import Mock from 'mockjs'
-import { builder, getBody } from '../util'
+import Mock from 'mockjs2'
+import { builder } from '../util'
 
 const info = (options) => {
   console.log('options', options)
@@ -370,4 +370,4 @@ const info = (options) => {
   return builder(userInfo)
 }
 
-Mock.mock(/\/user\/info/, 'get', info)
+Mock.mock(/\/api\/user\/info/, 'get', info)