完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5

src/pages/demo/plugins/mock/ajax.vue

@@ -0,0 +1,43 @@
+<template>
+  <d2-container>
+    <div slot="header">
+      <el-button @click="ajax">发送请求</el-button>
+    </div>
+    <el-table v-bind="table" style="width: 100%">
+      <el-table-column
+        v-for="(item, index) in table.columns"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      table: {
+        columns: [],
+        data: [],
+        size: 'mini',
+        stripe: true,
+        border: true
+      }
+    }
+  },
+  methods: {
+    ajax () {
+      this.$axios.get('/api/ajax-demo')
+        .then(res => {
+          this.table.columns = Object.keys(res.list[0]).map(e => ({
+            label: e,
+            prop: e
+          }))
+          this.table.data = res.list
+        })
+    }
+  }
+}
+</script>

src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-card shadow="never" class="d2-mb">
+    <div slot="header" class="d2-clearfix">
+      <el-button type="text" size="mini">{{title}}</el-button>
+      <el-tooltip content="重新 mock 数据" placement="top-end">
+        <el-button type="primary" size="mini" @click="$emit('reload')" class="d2-fr">刷新</el-button>
+      </el-tooltip>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <div class="col col-l">
+          <d2-highlight :code="code"/>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="col col-r">
+          <d2-highlight :code="mock"/>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'd2-demo-mock-card',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Mock Demo'
+    },
+    code: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    mock: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.col {
+  padding: 20px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  font-size: 16px;
+}
+.col-l {
+  background-color: lighten($color-info, 40%);
+  border-color: lighten($color-info, 35%);
+}
+.col-r {
+  background-color: lighten($color-success, 47%);
+  border-color: lighten($color-success, 40%);
+}
+</style>

src/pages/demo/plugins/mock/data/settingDPD.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default [
+  // 字符串
+  {
+    title: "占位符演示",
+    json: {
+      "name": {
+        first: '@FIRST',
+        middle: '@FIRST',
+        last: '@LAST',
+        full: '@first @middle @last'
+      }
+    }
+  }
+]

src/pages/demo/plugins/mock/data/settingDTD.js

@@ -0,0 +1,115 @@
+/* eslint-disable */
+export default [
+  // 字符串
+  {
+    title: "复制1-10次固定字符串",
+    json: {
+      "string|1-10": "★"
+    }
+  },
+  {
+    title: "复制3次",
+    json: {
+      "string|3": "Ha"
+    }
+  },
+  // 数字
+  {
+    title: "范围随机取值",
+    json: {
+      "number|1-100": 50
+    }
+  },
+  {
+    title: "累加1",
+    json: {
+      "number|+1": 10
+    }
+  },
+  {
+    title: "累加2",
+    json: {
+      "number|+2": 10
+    }
+  },
+  {
+    title: "浮点数",
+    json: {
+      "number1|1-100.1-10": 1,
+      "number2|123.1-10": 1,
+      "number3|123.3": 1,
+      "number4|123.10": 1.123
+    }
+  },
+  // 布尔值
+  {
+    title: "true 的概率是 1/2",
+    json: {
+      "boolean|1": true
+    }
+  },
+  // 对象
+  {
+    title: '随机选择3个属性',
+    json: {
+      "obj|3": {
+        name: 'FairyEver',
+        use: 'vue.js',
+        sex: 1,
+        qq: '1711467488',
+        tel: '123-4567-8910',
+        city: 'beijing',
+        mail: '1711467488liyang@gmail.com',
+        github: 'https://github.com/d2-projects',
+        blog: 'http://www.fairyever.com/',
+        creatDate: '2018-1-1',
+        updateDate: '2018-1-2',
+        delFlag: 0
+      }
+    }
+  },
+  {
+    title: '随机选择4-8个属性',
+    json: {
+      "obj|4-8": {
+        name: 'FairyEver',
+        use: 'vue.js',
+        sex: 1,
+        qq: '1711467488',
+        tel: '123-4567-8910',
+        city: 'beijing',
+        mail: '1711467488liyang@gmail.com',
+        github: 'https://github.com/FairyEver',
+        blog: 'http://www.fairyever.com/',
+        creatDate: '2018-1-1',
+        updateDate: '2018-1-2',
+        delFlag: 0
+      }
+    }
+  },
+  // 数组
+  {
+    title: '随机选1个',
+    json: {
+      "arr|1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
+    }
+  },
+  {
+    title: '顺序选1个',
+    json: {
+      "arr|+1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
+    }
+  },
+  {
+    title: '重复3次',
+    json: {
+      "arr|3": ['o', 'o - o', 'o - o - o']
+    }
+  },
+  {
+    title: '重复2-10次',
+    json: {
+      "arr|2-10": ['-', '----']
+    }
+  }
+]

src/pages/demo/plugins/mock/dpd.vue

@@ -0,0 +1,46 @@
+<template>
+  <d2-container>
+    <template slot="header">数据占位符</template>
+    <d2-markdown :source="doc" class="d2-mb"/>
+    <d2-demo-mock-card
+      v-for="(item, index) in settingDPD"
+      :key="index"
+      :title="item.title"
+      :code="JSON.stringify(item.json, null, 2)"
+      :mock="mockResult[index]"
+      style="margin-bottom: 0px !important;"
+      @reload="doMock(index)">
+    </d2-demo-mock-card>
+  </d2-container>
+</template>
+
+<script>
+import Vue from 'vue'
+import _clonedeep from 'lodash.clonedeep'
+import Mock from 'mockjs'
+import settingDPD from './data/settingDPD'
+import doc from './md/doc.md'
+export default {
+  components: {
+    'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
+  },
+  data () {
+    return {
+      mockResult: [],
+      settingDPD,
+      settingDPDClone: _clonedeep(settingDPD),
+      doc
+    }
+  },
+  mounted () {
+    this.settingDPD.forEach((e, i) => {
+      this.doMock(i)
+    })
+  },
+  methods: {
+    doMock (n = 0) {
+      Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDPDClone[n].json), null, 2))
+    }
+  }
+}
+</script>

src/pages/demo/plugins/mock/dtd.vue

@@ -0,0 +1,66 @@
+<template>
+  <d2-container>
+    <template slot="header">数据模板</template>
+    <d2-markdown :source="doc" class="d2-mb"/>
+    <d2-demo-mock-card
+      v-for="(item, index) in settingDTD"
+      :key="index"
+      :title="item.title"
+      :code="JSON.stringify(item.json, null, 2)"
+      :mock="mockResult[index]"
+      @reload="doMock(index)">
+    </d2-demo-mock-card>
+    <d2-demo-mock-card
+      :title="fn.title"
+      :code="fn.code"
+      :mock="fn.mocked"
+      @reload="fnMock()">
+    </d2-demo-mock-card>
+    <d2-demo-mock-card
+      :title="regexp.title"
+      :code="regexp.code"
+      :mock="regexp.mocked"
+      style="margin-bottom: 0px !important;"
+      @reload="regexpMock()">
+    </d2-demo-mock-card>
+  </d2-container>
+</template>
+
+<script>
+import Vue from 'vue'
+import _clonedeep from 'lodash.clonedeep'
+import Mock from 'mockjs'
+import settingDTD from './data/settingDTD'
+import regexp from './mixins/regexp'
+import fn from './mixins/function'
+import doc from './md/doc.md'
+export default {
+  mixins: [
+    regexp,
+    fn
+  ],
+  components: {
+    'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
+  },
+  data () {
+    return {
+      mockResult: [],
+      settingDTD,
+      settingDTDClone: _clonedeep(settingDTD),
+      doc
+    }
+  },
+  mounted () {
+    this.settingDTD.forEach((e, i) => {
+      this.doMock(i)
+    })
+    this.fnMock()
+    this.regexpMock()
+  },
+  methods: {
+    doMock (n = 0) {
+      Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDTDClone[n].json), null, 2))
+    }
+  }
+}
+</script>

src/pages/demo/plugins/mock/md/doc.md

@@ -0,0 +1,5 @@
+你可以点击每个演示卡片右上角的刷新按钮检查每次 `mock` 不同的结果
+
+官方演示页面 [http://mockjs.com/examples.html](http://mockjs.com/examples.html)
+
+官方 `Wiki` [https://github.com/nuysoft/Mock/wiki/Getting-Started](https://github.com/nuysoft/Mock/wiki/Getting-Started)

src/pages/demo/plugins/mock/mixins/function.js

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import Mock from 'mockjs'
+export default {
+  data () {
+    return {
+      // 测试函数
+      fn: {
+        title: '函数',
+        code: `{
+  "name": "FairyEver",
+  "say": function() {
+    return 'I AM ' + this.name
+  }
+}`,
+        json: {
+          "name": "FairyEver",
+          "say": function() {
+            return 'I AM ' + this.name
+          }
+        },
+        mocked: ''
+      }
+    }
+  },
+  methods: {
+    fnMock () {
+      this.fn.mocked = JSON.stringify(Mock.mock(this.fn.json), null, 2)
+    }
+  }
+}

src/pages/demo/plugins/mock/mixins/regexp.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import Mock from 'mockjs'
+export default {
+  data () {
+    return {
+      // 测试正则表达式
+      regexp: {
+        title: '正则表达式',
+        code: `{
+  'regexp1': /[a-z][A-Z][0-9]/,
+  'regexp2': /\w\W\s\S\d\D/,
+  'regexp3': /\d{5,10}/
+}`,
+        json: {
+          'regexp1': /[a-z][A-Z][0-9]/,
+          'regexp2': /\w\W\s\S\d\D/,
+          'regexp3': /\d{5,10}/
+        },
+        mocked: ''
+      }
+    }
+  },
+  methods: {
+    regexpMock () {
+      this.regexp.mocked = JSON.stringify(Mock.mock(this.regexp.json), null, 2)
+    }
+  }
+}