framework / eagle-web-toolkit

Download as
Browse Code »

Commit 25bb330afeb694083fe1f54f867de49c8271a605

Authored by Aaron
1 parent ed006685
Exists in master and in 1 other branch legacy

增加mockjs，更新Scheme文档，优化Scheme静态数据处理逻辑

Showing 8 changed files with 274 additions and 23 deletions   Show diff stats
examples/api-mock/index.js 0 → 100644
  Diff comments   View file @25bb330
... ... @@ -0,0 +1,102 @@
  1 +import Mock from 'mockjs';
  2 +import { parse } from './util';
  3 +import moduleAPI from '@/api-mock/module';
  4 +
  5 +let MockCache = {};
  6 +
  7 +const MockBot = {
  8 + // 通用模板API
  9 + fastAPI: {
  10 + // 获取数据列表
  11 + page: (base) => config => {
  12 + const list = MockCache[base] || [];
  13 + const param = parse(config.url) || {};
  14 + const { page = 1, size = 10, ...query } = param;
  15 + // 计算有几个搜索条件
  16 + let queryCount = false;
  17 + for (let key in query) {
  18 + if (query[key]) {
  19 + queryCount += 1;
  20 + break;
  21 + }
  22 + }
  23 + // 根据搜索条件过滤结果
  24 + const filteredList = queryCount > 0 ? list.filter(data => {
  25 + let result = false;
  26 + for (let key in query) {
  27 + if (data[key] === query[key]) {
  28 + result = true;
  29 + break;
  30 + }
  31 + }
  32 + return result;
  33 + }) : list;
  34 + // 根据结果处理分页数据
  35 + const _page = Number(page);
  36 + const _limit = Number(size);
  37 + const pageList = filteredList.filter((item, index) => index < _limit * _page && index >= _limit * (_page - 1));
  38 + const response = {
  39 + page: _page,
  40 + size: _limit,
  41 + result: {
  42 + list: pageList,
  43 + total: filteredList.length,
  44 + },
  45 + code: 0,
  46 + };
  47 + return response;
  48 + },
  49 + // 查询数据详情
  50 + get: (base) => config => {
  51 + const list = MockCache[base] || [];
  52 + const arr = config.url.split('/');
  53 + const id = arr[arr.length - 1];
  54 + const result = list.find((item) => item.id == id);
  55 + return {
  56 + result: result,
  57 + code: 0,
  58 + };
  59 + },
  60 + // 新增数据
  61 + add: (base) => config => {
  62 + const param = JSON.parse(config.body);
  63 + MockCache[base].unshift(param);
  64 + return {
  65 + code: 0,
  66 + };
  67 + },
  68 + // 编辑数据
  69 + update: (base) => config => {
  70 + const param = JSON.parse(config.body);
  71 + const index = MockCache[base].findIndex(item => item.id === param.id);
  72 + MockCache[base][index] = param;
  73 + return {
  74 + code: 0,
  75 + };
  76 + },
  77 + // 删除数据
  78 + delete: (base) => config => {
  79 + const ids = JSON.parse(config.body);
  80 + ids.forEach(id => {
  81 + MockCache[base] = MockCache[base].filter(item => item.id !== id);
  82 + });
  83 + return {
  84 + code: 0,
  85 + };
  86 + }
  87 + },
  88 + // 根据通用模板API快速创建模拟接口
  89 + fastMock: (url, list) => {
  90 + MockCache[url] = list;
  91 + Mock.mock(new RegExp(`\/${url}\/page`), 'get', MockBot.fastAPI.page(url));
  92 + Mock.mock(new RegExp(`\/${url}\/get`), 'get', MockBot.fastAPI.get(url));
  93 + Mock.mock(new RegExp(`\/${url}\/get/id`), 'get', MockBot.fastAPI.get(url));
  94 + Mock.mock(new RegExp(`\/${url}\/info/id`), 'get', MockBot.fastAPI.get(url));
  95 + Mock.mock(new RegExp(`\/${url}\/add`), 'post', MockBot.fastAPI.add(url));
  96 + Mock.mock(new RegExp(`\/${url}\/update`), 'post', MockBot.fastAPI.update(url));
  97 + Mock.mock(new RegExp(`\/${url}\/delete`), 'post', MockBot.fastAPI.delete(url));
  98 + },
  99 +}
  100 +
  101 +// 产品管理
  102 +MockBot.fastMock('product', moduleAPI.product);
0 103 \ No newline at end of file
... ...
examples/api-mock/module/index.js 0 → 100644
  Diff comments   View file @25bb330
... ... @@ -0,0 +1,25 @@
  1 +import Mock from 'mockjs';
  2 +import MockUtil from '@/api-mock/util';
  3 +
  4 +export default {
  5 + // 产品管理
  6 + product: MockUtil.fastList({
  7 + id: '@guid()',
  8 + code: '@string(16)',
  9 + name: '@cword(3, 12)',
  10 + 'type|1': ['TYPE_A', 'TYPE_B', 'TYPE_C', 'TYPE_D'],
  11 + "status|0-1": 1,
  12 + remark: '@csentence(0, 30)',
  13 + cities: '@zip()',
  14 + // cities: ['110000', '310000'],
  15 + picUrl: Mock.Random.image('1080x720'),
  16 + thumbnalUrl: Mock.Random.image('120x80'),
  17 + serviceDescription: '<p class="ql-align-center"><strong style="color: rgb(230, 0, 0);" class="ql-size-24px">这里是标题</strong></p><p> </p><p><span class="ql-size-14px"> 这是内容第一段。</span></p><p><span class="ql-size-14px"> </span></p><p><span class="ql-size-14px"> 这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段。</span></p><p><br></p><p><span class="ql-size-14px"></span></p>',
  18 + // "isActive|0-1": 1,
  19 + isActive: '@boolean()',
  20 + createTime: '@datetime()',
  21 + createUser: '@cname()',
  22 + modifyTime: '@datetime()',
  23 + modifyUser: '@cname()'
  24 + }, 43),
  25 +}
0 26 \ No newline at end of file
... ...
examples/api-mock/util.js 0 → 100644
  Diff comments   View file @25bb330
... ... @@ -0,0 +1,32 @@
  1 +import Mock from 'mockjs';
  2 +
  3 +export const parse = (url) => {
  4 + let obj = {};// 创建一个Object
  5 + let reg = /[?&][^?&]+=[^?&]+/g;// 正则匹配 ?&开始 =拼接 非?&结束 的参数
  6 + let arr = url.match(reg);// match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
  7 + // arr数组形式 ['?id=12345','&a=b']
  8 + if (arr) {
  9 + arr.forEach((item) => {
  10 + /**
  11 + * tempArr数组 ['id','12345']和['a','b']
  12 + * 第一个是key，第二个是value
  13 + * */
  14 + let tempArr = item.substring(1).split('=');
  15 + let key = decodeURIComponent(tempArr[0]);
  16 + let val = decodeURIComponent(tempArr[1]);
  17 + obj[key] = val;
  18 + });
  19 + }
  20 + return obj;
  21 +}
  22 +
  23 +export default {
  24 + // 根据配置文件和数量快速生成数据列表
  25 + fastList: (config, count) => {
  26 + const list = []
  27 + for (let i = 0; i < count; i++) {
  28 + list.push(Mock.mock(config));
  29 + }
  30 + return list;
  31 + },
  32 +}
0 33 \ No newline at end of file
... ...
examples/main.js
  Diff comments   View file @25bb330
... ... @@ -3,6 +3,7 @@ import App from &#39;@/App.vue&#39;;
3 3 import router from '@/router';
4 4 import store from '@/store';
5 5 import axios from 'axios';
  6 +import '@/api-mock';
6 7  
7 8 import ElementUI from 'element-ui';
8 9 import EagleWebToolkit from '../packages';
... ... @@ -14,33 +15,28 @@ import &#39;@/styles/index.scss&#39;;
14 15 import "highlight.js/styles/github.css";
15 16  
16 17 const request = axios.create({
17   - baseURL: 'http://47.110.137.80:7104/cbin/',
  18 + baseURL: 'http://localhost',
18 19 timeout: 1000 * 60,
19 20 withCredentials: true,
20   - headers: {
21   - token: 'ca2bd2fbc89ee1fdf26c975255905f8b',
22   - 'Accept-Language': 'zh-CN'
23   - }
24 21 });
25 22  
26 23 // respone 拦截器
27 24 request.interceptors.response.use(
28 25 response => {
29 26 const { data = {}, config } = response;
30   - const { code } = data;
  27 + const { code = 0 } = data;
31 28 if (config && config.interceptors === false) { // 请求配置不做返回拦截的情况
32 29 return response;
33 30 } else {
34   - if (`${code}` === '0') {
  31 + if (`${code}` === '0' || `${code}` === '200') { // 请求成功
35 32 return data;
36   - } else {
37   - return false;
  33 + } else { // 其它错误，开发环境提示
  34 + return { code };
38 35 }
39 36 }
40 37 },
41 38 error => {
42   - console.error(error);
43   - return { success: false };
  39 + return { code: 404 };
44 40 });
45 41  
46 42 Vue.prototype.$axios = request;
... ...
examples/views/docs/component/scheme.md
  Diff comments   View file @25bb330
... ... @@ -10,7 +10,7 @@ Scheme銝銝芣撽勗圾獢摰蔭嚗
10 10  
11 11 ```html
12 12 <template>
13   - <eagle-scheme v-model="tableData" :list="schemeList"></eagle-scheme>
  13 + <eagle-scheme v-model="tableData" :list="list"></eagle-scheme>
14 14 </template>
15 15  
16 16 <script>
... ... @@ -23,7 +23,7 @@ export default {
23 23 { name: '鈭批', code: 'P0003', type: 'NORMAL', sort: 0, status: '0' },
24 24 { name: '鈭批', code: 'P0004', type: 'BROKEN', sort: 1, status: '1' },
25 25 ],
26   - schemeList: [
  26 + list: [
27 27 { type: 'el-input', key: 'name', label: '妍', rules: [{ required: true, message: '霂瑁妍' }] },
28 28 { type: 'el-input', key: 'code', label: '蝻', rules: [{ required: true, message: '霂瑁蝻' }], exclude: 'search' },
29 29 { type: 'el-input', key: 'type', label: '蝐餃' },
... ... @@ -38,6 +38,87 @@ export default {
38 38  
39 39 :::
40 40  
  41 +## API敹恍蔭
  42 +
  43 +隡CURD撖孵PIromise瘜RL嚗撘
  44 +
  45 +::: snippet 蔭`option`霈曄蔭蝏辣蔭憿對銝苜$http`銝粹蔭憟賣romisettp獢url`蝖url
  46 +
  47 +```html
  48 +<template>
  49 + <eagle-scheme :list="list"
  50 + :option="{ $http: $axios, url: 'product', currPageAlias: 'page', pageSizeAlias: 'size', totalCountAlias: 'total' }">
  51 + </eagle-scheme>
  52 +</template>
  53 +
  54 +<script>
  55 +export default {
  56 + data() {
  57 + return {
  58 + list: [
  59 + { type: 'el-input', key: 'name', label: '鈭批妍' },
  60 + { type: 'el-input', key: 'type', label: '蝐餃' },
  61 + { type: 'el-input', key: 'status', label: '' },
  62 + { type: 'el-input', key: 'remark', label: '憭釣', span: 24, exclude: 'search', minWidth: 200, 'show-overflow-tooltip': true,
  63 + props: { type: 'textarea', rows: 5 },
  64 + },
  65 + ],
  66 + }
  67 + },
  68 + methods: {
  69 + }
  70 +}
  71 +</script>
  72 +```
  73 +
  74 +:::
  75 +
  76 +## API蔭
  77 +
  78 +隡CURD撖孵PIromise瘜撘
  79 +
  80 +::: snippet 蔭`option`霈曄蔭蝏辣蔭憿對**searchAPI**霂Ｕ**detailAPI**霂Ｚ祕**getAPI**蝻霂Ｘ**deleteAPI****newAPI**憓**editAPI**蝻
  81 +
  82 +```html
  83 +<template>
  84 + <eagle-scheme :list="list" :option="{ currPageAlias: 'page', pageSizeAlias: 'count', searchAPI, detailAPI: getAPI, getAPI }"></eagle-scheme>
  85 +</template>
  86 +
  87 +<script>
  88 +export default {
  89 + data() {
  90 + return {
  91 + list: [
  92 + { type: 'el-input', key: 'name', label: '蝘' },
  93 + { type: 'el-input', key: 'passtime', label: '' },
  94 + { type: 'el-input', key: 'text', label: '畾萄', span: 24, exclude: 'search', minWidth: 300, 'show-overflow-tooltip': true,
  95 + props: { type: 'textarea', rows: 5 },
  96 + },
  97 + ],
  98 + }
  99 + },
  100 + methods: {
  101 + async searchAPI(param) {
  102 + return await this.$axios.get('https://api.apiopen.top/getJoke', { params: { ...param, type: 'text' } })
  103 + .then((response) => {
  104 + const { result = [], totalCount = 100 } = response;
  105 + return { result, totalCount };
  106 + });
  107 + },
  108 + async getAPI(param) {
  109 + return await this.$axios.get('https://api.apiopen.top/getSingleJoke', { params: { sid: param.sid } })
  110 + .then((response) => {
  111 + const { result = {} } = response;
  112 + return result;
  113 + });
  114 + },
  115 + }
  116 +}
  117 +</script>
  118 +```
  119 +
  120 +:::
  121 +
41 122 ## API
42 123  
43 124 ## Attribute 撅
... ...
package.json
  Diff comments   View file @25bb330
... ... @@ -12,6 +12,7 @@
12 12 "axios": "^0.19.0",
13 13 "core-js": "^2.6.5",
14 14 "element-ui": "^2.11.0",
  15 + "mockjs": "^1.0.1-beta3",
15 16 "nprogress": "^0.2.0",
16 17 "vue": "^2.6.10",
17 18 "vue-router": "^3.0.3",
... ...
packages/scheme/index.vue
  Diff comments   View file @25bb330
... ... @@ -167,7 +167,6 @@ import { generateListSpace } from &#39;./parser&#39;;
167 167 import { stringify, getUUID } from './utils';
168 168  
169 169 let _$http = null;
170   -let TABLE_DATA_STATIC = [];
171 170  
172 171 export default {
173 172 name: 'Scheme',
... ... @@ -270,6 +269,8 @@ export default {
270 269 tableLoading: false,
271 270 // 表格当前操作列
272 271 tableCurrentRow: null,
  272 + // 表格静态数据
  273 + tableDataStatic: [],
273 274 };
274 275 },
275 276 created() {
... ... @@ -292,7 +293,7 @@ export default {
292 293 mounted() {
293 294 const defaultData = this.value;
294 295 this.totalCount = defaultData.length;
295   - TABLE_DATA_STATIC = defaultData.map(item => { return { ...item, id: item.id || getUUID() } });
  296 + this.tableDataStatic = defaultData.map(item => { return { ...item, id: item.id || getUUID() } });
296 297 // 设置自动加载数据
297 298 if (this.option.auto !== false) {
298 299 this.handleSearch();
... ... @@ -399,7 +400,7 @@ export default {
399 400 break;
400 401 }
401 402 }
402   - const resultData = searchModelCount > 0 ? TABLE_DATA_STATIC.filter(data => {
  403 + const resultData = searchModelCount > 0 ? this.tableDataStatic.filter(data => {
403 404 let result = false;
404 405 for (let modelKey in this.searchModel) {
405 406 let modelValue = this.searchModel[modelKey];
... ... @@ -409,7 +410,7 @@ export default {
409 410 }
410 411 }
411 412 return result;
412   - }) : TABLE_DATA_STATIC;
  413 + }) : this.tableDataStatic;
413 414 const begin = (this.currentPage - 1) * this.pageSize;
414 415 const end = this.currentPage * this.pageSize;
415 416 this.tableData = resultData.slice(begin, end);
... ... @@ -566,8 +567,9 @@ export default {
566 567 this.dialogLoading = false;
567 568 });
568 569 } else {
569   - TABLE_DATA_STATIC = TABLE_DATA_STATIC.filter(item => item.id !== selection[0].id);
570   - // TABLE_DATA_STATIC.splice(selection[0].$index, 1);
  570 + selection.forEach(slt => {
  571 + this.tableDataStatic = this.tableDataStatic.filter(item => item.id !== slt.id);
  572 + });
571 573 this.hideDialog();
572 574 this.handleSearch();
573 575 }
... ... @@ -648,9 +650,9 @@ export default {
648 650 this.dialogLoading = false;
649 651 });
650 652 } else {
651   - TABLE_DATA_STATIC.push({ ...param, id: param.id || getUUID() });
652   - this.totalCount = TABLE_DATA_STATIC.length;
653   - // this.hideDialog();
  653 + this.tableDataStatic.unshift({ ...param, id: param.id || getUUID() });
  654 + this.totalCount = this.tableDataStatic.length;
  655 + this.hideDialog();
654 656 this.handleSearch();
655 657 }
656 658 },
... ... @@ -685,7 +687,7 @@ export default {
685 687 this.dialogLoading = false;
686 688 });
687 689 } else {
688   - this.$set(TABLE_DATA_STATIC, this.tableCurrentRow.$index, { ...param, id: param.id || getUUID() });
  690 + this.$set(this.tableDataStatic, this.tableDataStatic.findIndex(item => item.id === param.id), { ...param, id: param.id || getUUID() });
689 691 this.hideDialog();
690 692 this.handleSearch();
691 693 }
... ...
yarn.lock
  Diff comments   View file @25bb330
... ... @@ -2109,6 +2109,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
2109 2109 dependencies:
2110 2110 delayed-stream "~1.0.0"
2111 2111  
  2112 +commander@*:
  2113 + version "3.0.0"
  2114 + resolved "https://registry.npm.taobao.org/commander/download/commander-3.0.0.tgz#0641ea00838c7a964627f04cddc336a2deddd60a"
  2115 + integrity sha1-BkHqAIOMepZGJ/BM3cM2ot7d1go=
  2116 +
2112 2117 commander@2.17.x:
2113 2118 version "2.17.1"
2114 2119 resolved "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
... ... @@ -4899,6 +4904,13 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
4899 4904 dependencies:
4900 4905 minimist "0.0.8"
4901 4906  
  4907 +mockjs@^1.0.1-beta3:
  4908 + version "1.0.1-beta3"
  4909 + resolved "https://registry.npm.taobao.org/mockjs/download/mockjs-1.0.1-beta3.tgz#d234f3c27256397564f2c955142e891909537209"
  4910 + integrity sha1-0jTzwnJWOXVk8slVFC6JGQlTcgk=
  4911 + dependencies:
  4912 + commander "*"
  4913 +
4902 4914 move-concurrently@^1.0.1:
4903 4915 version "1.0.1"
4904 4916 resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
... ...