Merge branch 'hotfix/mock-suit'

Former-commit-id: e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly 3233bbf8231b1e63f7c978ae1214ed48224eafc9 [formerly 937e9349ba90ec03e639e8d63539a7f384c385d3]]]]]
Former-commit-id: 473c82c143373f5f21f3e12772ad96b12039bb84
Former-commit-id: b158a89addbc07d8a29e73197d7425d6343d45e4
Former-commit-id: 74f425887c251da3e748588971a9c551ad0e7c00 [formerly 266c889c322fbdc108ff0b7a749571e02353375f]
Former-commit-id: 384dfc188d100face6f5f3b7947adb3675fa9d2b
Former-commit-id: 33becace2f0f845ae5797e2e1a732fac9a6dfa9b
Former-commit-id: 661e031b1ca40b556fcdd0a988844ab890181372
Former-commit-id: 43f6dc48ec6c87ac463610a05ff7e547569c5484
Former-commit-id: d5fda10a9e425941d452926776ba6004044a0617

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

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',
+    url: '/demo/business/table/1/fetch',
-    method: 'post',
+    method: 'get',
-    data
+    params
   })
 }

src/components/d2-icon-select/index.vue

@@ -1,13 +1,20 @@
 <template>
-  <div>
+  <span>
     <el-popover
       ref="pop"
       v-model="pop"
       :placement="placement"
       width="300"
       trigger="click">
-      <div class="header d2-clearfix d2-mb-10" v-if="clearable">
+      <div class="d2-clearfix d2-mb-10" v-if="clearable">
-        <el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          class="d2-fr"
+          @click="selectIcon()">
+          清空
+        </el-button>
       </div>
       <el-input
         v-model="searchText"
@@ -15,20 +22,20 @@
         placeholder="搜索 比如 'plus'"
         prefix-icon="el-icon-search">
       </el-input>
-      <el-collapse v-if="!searchMode" class="group" v-model="collapseActive">
+      <el-collapse v-if="!searchMode" class="d2-icon-select--group" v-model="collapseActive">
-        <el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="class">
+        <el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="d2-icon-select--class">
-          <el-row class="class-row">
+          <el-row class="d2-icon-select--class-row">
-            <el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
+            <el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
               <i :class="'fa fa-' + iconName"></i>
             </el-col>
           </el-row>
         </el-collapse-item>
       </el-collapse>
-      <div v-if="searchMode" class="group">
+      <div v-if="searchMode" class="d2-icon-select--group">
-        <div class="class" v-for="(item, index) in iconFilted" :key="index">
+        <div class="d2-icon-select--class" v-for="(item, index) in iconFilted" :key="index">
-          <div class="class-title">{{item.title}}</div>
+          <div class="d2-icon-select--class-title">{{item.title}}</div>
-          <el-row class="class-row">
+          <el-row class="d2-icon-select--class-row">
-            <el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
+            <el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
               <i :class="'fa fa-' + iconName"></i>
             </el-col>
           </el-row>
@@ -55,7 +62,7 @@
       </template>
       {{value ? value : placeholder}}
     </el-button>
-  </div>
+  </span>
 </template>
 
 <script>
@@ -159,22 +166,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.group {
+.d2-icon-select--group {
   max-height: 400px;
   overflow-x: hidden;
   overflow-y: scroll;
   border-top: none;
   border-bottom: none;
-  .class {
+  .d2-icon-select--class {
-    .class-title {
+    .d2-icon-select--class-title {
       line-height: 30px;
       text-align: center;
       background-color: $color-bg;
       border-radius: 4px;
       margin: 10px 0px;
     }
-    .class-row {
+    .d2-icon-select--class-row {
-      .class-col {
+      .d2-icon-select--class-col {
         line-height: 40px;
         text-align: center;
         color: $color-text-sub;

src/components/d2-icon-svg-select/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <span>
+    <el-popover
+      ref="pop"
+      v-model="pop"
+      :placement="placement"
+      width="300"
+      trigger="click">
+      <div
+        class="d2-clearfix d2-mb-10"
+        v-if="clearable">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          class="d2-fr"
+          @click="selectIcon()">
+          清空
+        </el-button>
+      </div>
+      <el-input
+        v-model="searchText"
+        :clearable="true"
+        placeholder="搜索 比如 'plus'"
+        prefix-icon="el-icon-search">
+      </el-input>
+      <el-row class="d2-icon-svg-select--group">
+        <el-col
+          v-for="(item, index) in iconFilted"
+          :key="index"
+          class="d2-icon-svg-select--item"
+          :span="4"
+          @click.native="selectIcon(item)">
+          <d2-icon-svg :name="item"/>
+        </el-col>
+      </el-row>
+    </el-popover>
+    <!-- 允许用户输入 -->
+    <el-input
+      v-if="userInput"
+      v-model="currentValue"
+      v-bind="bind"
+      style="max-width: 240px;">
+      <template v-if="value" slot="prepend">
+        <d2-icon-svg
+          class="d2-icon-svg-select--input-preview"
+          :name="value"/>
+      </template>
+      <el-button v-popover:pop slot="append">
+        <i class="fa fa-list"></i>
+      </el-button>
+    </el-input>
+    <!-- 不允许用户输入 -->
+    <el-button v-popover:pop v-if="!userInput">
+      <span flex="dir:left main:center cross:center">
+        <d2-icon-svg
+          v-if="value"
+          class="d2-icon-svg-select--input-preview d2-mr-10"
+          :name="value"/>
+        <span>{{value ? value : placeholder}}</span>
+      </span>
+    </el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'd2-icon-svg-select',
+  props: {
+    // 值
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      required: false,
+      default: '请选择'
+    },
+    // 弹出界面的方向
+    placement: {
+      type: String,
+      required: false,
+      default: 'right'
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 是否允许用户输入
+    userInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否在选择后自动关闭
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      // 绑定弹出框
+      pop: false,
+      // 组件内输入框的值
+      currentValue: '',
+      // 搜索的文字
+      searchText: ''
+    }
+  },
+  computed: {
+    // 输入框上绑定的设置
+    bind () {
+      return {
+        placeholder: this.placeholder,
+        clearable: this.clearable,
+        ...this.$attrs
+      }
+    },
+    // 是否在搜索
+    searchMode () {
+      return !!this.searchText
+    },
+    // 过滤后的图标
+    iconFilted () {
+      return this.$IconSvg.filter(icon => icon.indexOf(this.searchText) >= 0)
+    }
+  },
+  watch: {
+    value (value) {
+      this.currentValue = value
+    },
+    currentValue (value) {
+      this.selectIcon(value)
+    }
+  },
+  created () {
+    this.currentValue = this.value
+  },
+  methods: {
+    selectIcon (iconName = '') {
+      this.$emit('input', iconName)
+      if (iconName && this.autoClose) {
+        this.pop = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-icon-svg-select--input-preview {
+  height: 14px;
+  width: 14px;
+  display: block;
+}
+.d2-icon-svg-select--group {
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  margin-top: 10px;
+}
+.d2-icon-svg-select--item {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $color-text-sub;
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+  &:hover {
+    color: $color-text-main;
+    background-color: $color-bg;
+    border-radius: 4px;
+    box-shadow: inset 0px 0px 0px 1px $color-border-1;
+  }
+}
+</style>

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'))

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' }
       ]
     },
     {

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 }) => {
+export default [
-  // 解析
-  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(
   {
+    path: '/api/demo/business/issues/142/detail.*',
+    method: 'get',
+    handle ({ params }) {
+      return {
         code: 0,
         msg: '获取数据成功',
-      data: db.find(e => e.id === options.params.id)
+        data: db.find(e => e.id === params.id)
       }
-  )
+    }
-})
+  }
+]

src/mock/api/demo.business.table.1.js

@@ -1,18 +1,17 @@
-import Mock from 'mockjs'
+export default [
-
-Mock.mock('/api/demo/business/table/1', ({ body }) => {
-  // 这是通过 post 传来的参数
-  body = JSON.parse(body)
-  const { page } = body
-  page.total = 1000
-  return Mock.mock(
   {
+    path: '/api/demo/business/table/1/fetch.*',
+    method: 'get',
+    handle ({ params, Repeat }) {
+      let { pageSize } = params
+      return {
         code: 0,
         msg: '获取数据成功',
         data: {
-        page,
+          page: {
-        'list|20': [
+            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'
-          }
+          })
-        ]
         }
       }
-  )
+    }
-})
+  }
+]

src/mock/api/demo.plugins.mock.ajax.js

@@ -1,11 +1,13 @@
-import Mock from 'mockjs'
+export default [
-
+  {
-Mock.mock('/api/demo/plugins/mock/ajax', {
+    path: '/api/demo/plugins/mock/ajax',
+    method: 'get',
+    handle ({ Repeat }) {
+      return {
         code: 0,
         msg: '获取数据成功',
         data: {
-    'list|4-10': [
+          list: Repeat('4-10', {
-      {
             'id|+1': 1,
             'name': '@CNAME',
             'star|1-5': '★',
@@ -13,7 +15,9 @@ Mock.mock('/api/demo/plugins/mock/ajax', {
             'creatDate': '@DATE',
             'address': '@CITY',
             'zip': '@ZIP'
+          })
         }
-    ]
       }
-})
+    }
+  }
+]

src/mock/api/sys.login.js

@@ -1,36 +1,22 @@
-import Mock from 'mockjs'
-
 const userDB = [
-  {
+  { username: 'admin', password: 'admin', uuid: 'admin-uuid', name: '管理员' },
-    username: 'admin',
+  { username: 'editor', password: 'editor', uuid: 'editor-uuid', name: '编辑' },
-    password: 'admin',
+  { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: '用户1' }
-    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 }) => {
+export default [
-  const bodyObj = JSON.parse(body)
+  {
-  const user = userDB.find(e => e.username === bodyObj.username && e.password === bodyObj.password)
+    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: 'd787syv8dys8cas80d9s0a0d8f79ads56f7s4d56f879a8as89fd980s7dg'
+            token: '8dfhassad0asdjwoeiruty'
           }
         }
       } else {
@@ -40,4 +26,6 @@ Mock.mock('/api/login', 'post', ({ url, type, body }) => {
           data: {}
         }
       }
-})
+    }
+  }
+]

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 }

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)
+  }
+}

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)
 
-// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
+options.forEach(option => {
-Mock.setup({
+  d2Mock.load(option)
-  timeout: '300-600'
 })

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"

src/pages/demo/business/table/1/index.vue

@@ -9,9 +9,9 @@
       :loading="loading"/>
     <demo-page-footer
       slot="footer"
-      :current="page.current"
+      :current="page.pageCurrent"
-      :size="page.size"
+      :size="page.pageSize"
-      :total="page.total"
+      :total="page.pageTotal"
       @change="handlePaginationChange"/>
   </d2-container>
 </template>
@@ -32,9 +32,9 @@ export default {
       table: [],
       loading: false,
       page: {
-        current: 1,
+        pageCurrent: 1,
-        size: 100,
+        pageSize: 10,
-        total: 0
+        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

src/pages/demo/components/icon/select-svg.vue

@@ -0,0 +1,25 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">svg 图标选择器</template>
+    <div class="d2-mb">
+      <p class="d2-mt-0 d2-mb-10">一般用法 | {{icon || '未选择'}}</p>
+      <d2-icon-svg-select v-model="icon"/>
+    </div>
+    <div class="d2-mb">
+      <p class="d2-mt-0 d2-mb-10">用户可以输入 | {{icon2 || '未选择'}}</p>
+      <d2-icon-svg-select v-model="icon2" :user-input="true"/>
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename,
+      icon: '',
+      icon2: ''
+    }
+  }
+}
+</script>

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: '拖拽网格布局' } },