framework / eagle-web-toolkit

Download as
Browse Code »

Commit 8374c330711df632e7c92309df33cd277f0ecc6c

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

优化Scheme静态数据维护

Showing 8 changed files with 65 additions and 93 deletions   Show diff stats
examples/components/code-snippet.vue
  Diff comments   View file @8374c33
... ... @@ -53,6 +53,9 @@ export default {
53 53 margin: 0px !important;
54 54 padding: 0px !important;
55 55 }
  56 + .el-pagination.is-background .el-pager li {
  57 + margin: 0 5px !important;
  58 + }
56 59 }
57 60 .eagle-code-snippet--demo {
58 61 box-sizing: border-box;
... ...
examples/router/routes.js
  Diff comments   View file @8374c33
... ... @@ -73,13 +73,13 @@ const _components = [
73 73 ]
74 74 },
75 75 {
76   - group: '测试',
  76 + group: '其它',
77 77 children: [
78 78 {
79   - path: 'test',
80   - name: 'test',
81   - meta: { title: 'Scheme 测试' },
82   - component: () => import('@/views/page/test'),
  79 + path: 'other',
  80 + name: 'other',
  81 + meta: { title: 'Other 其它' },
  82 + component: () => import('@/views/page/other'),
83 83 },
84 84 ]
85 85 }
... ...
examples/views/docs/component/scheme.md
  Diff comments   View file @8374c33
... ... @@ -4,9 +4,9 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼
4 4  
5 5 ## 基础用法
6 6  
7   -é…置项list中通过typeå¯ä»¥é…置任æ„组件，ä¸å—框架é™åˆ¶
  7 +é…置一个数æ®é¡¹åˆ—表快速生æˆä¸€ä¸ªå¢žåˆ æ”¹æŸ¥ä¸šåŠ¡è§†å›¾
8 8  
9   -::: snippet 使用`list`属性设置数æ®æºï¼Œåˆ—表项中的`type`指定组件类型，æ¯ä¸€é¡¹éƒ½å·²è®¾ç½®ä¸º**el-form-item**çš„å­ç»„件，通过`rules`é…置校验规则
  9 +::: snippet 使用`list`属性设置数æ®æºï¼Œåˆ—表项中的`type`指定组件类型，其它包括**Form**ã€**Detail**ã€**Search**组件的é…ç½®å‚æ•°æ ¼å¼
10 10  
11 11 ```html
12 12 <template>
... ... @@ -44,4 +44,5 @@ export default {
44 44  
45 45 å‚æ•°|说明|类型|å¯é€‰å€¼|默认值
46 46 -|-|-|-|-
  47 +value / v-model | 绑定值 | Array | - | []
47 48 list | 表å•é¡¹é…置列表 | Array | - | []
48 49 \ No newline at end of file
... ...
examples/views/docs/guide/introduce.md
  Diff comments   View file @8374c33
... ... @@ -16,7 +16,7 @@
16 16 </div>
17 17 :::
18 18  
19   -**Vue.js**提供核心驱动，**Element**组成基本结构，{{ appName }}渲染配置项数据
  19 +**Vue.js**提供核心驱动，**Element**组成基本结构，{{ appName }}渲染配置数据
20 20  
21 21 ## 谁在使用
22 22  
... ...
examples/views/page/other.vue 0 → 100644
  Diff comments   View file @8374c33
... ... @@ -0,0 +1,15 @@
  1 +<template>
  2 + <div>这是一个非markdown页面</div>
  3 +</template>
  4 +
  5 +<script>
  6 +export default {
  7 + name: 'other',
  8 + data() {
  9 + return {
  10 + }
  11 + },
  12 + methods: {
  13 + }
  14 +}
  15 +</script>
0 16 \ No newline at end of file
... ...
examples/views/page/test.vue
View file @7a06b45
... ... @@ -1,77 +0,0 @@
1   -<template>
2   - <eagle-scheme class="p-3" :list="schemeList" :option="{ $http: $axios, url: '/overseas/price/sale', showActionBtnDelete: false }" @selection="handleSelection">
3   - <template #search-enableFlag="{ model }">
4   - <eagle-select v-model="model.enableFlag" :dataSource="[{ label: '正常', value: true }, { label: '禁用', value: false }]"></eagle-select>
5   - </template>
6   - <el-table-column type="selection" width="50"></el-table-column>
7   - <template #action-btn-new>
8   - <el-button>按钮</el-button>
9   - </template>
10   - <template #form-label-code="{ label }">
11   - 修改 - {{ label }}
12   - </template>
13   - <!-- <template #table-operation-btn-edit>
14   - <el-button class="eagle-scheme__table-btn" type="text">测试</el-button>
15   - </template> -->
16   - <template #table-append>
17   - <el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column>
18   - <el-table-column prop="createUser" label="创建人" min-width="160" show-overflow-tooltip></el-table-column>
19   - <el-table-column prop="modifyTime" label="修改时间" min-width="180"></el-table-column>
20   - <el-table-column prop="modifyUser" label="修改人" min-width="160" show-overflow-tooltip></el-table-column>
21   - </template>
22   - </eagle-scheme>
23   -</template>
24   -
25   -<script>
26   -export default {
27   - name: 'basicStore',
28   - data() {
29   - return {
30   - schemeList: [
31   - { type: 'el-input', label: 'ID', key: 'id', include: 'form', visible: (model, { formMode } = {}) => { return formMode == 'edit' }, show: false,
32   - props: { disabled: true },
33   - },
34   - { type: 'el-input', label: '编码', key: 'code', default: '1231231321231',
35   - rules: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
36   - props: { placeholder: '编码', disabled: (model, { formMode } = {}) => { return formMode == 'edit' } },
37   - },
38   - { type: 'el-input', label: '产品', key: 'productCode', agentKey: 'productName',
39   - rules: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
40   - props: { url: '/overseas/product/select' },
41   - },
42   - { type: 'el-input-number', label: '价格', key: 'price', exclude: 'search',
43   - rules: [{ required: true, message: '价格不能为空', trigger: 'blur' }],
44   - props: { placeholder: '价格' },
45   - },
46   - { type: 'el-input', label: '价格说明', key: 'note', exclude: 'search',
47   - props: { placeholder: '价格说明' },
48   - },
49   - { type: 'el-input', label: '出发城市', key: 'fromCity', exclude: 'search',
50   - rules: [{ required: true, message: '出发城市不能为空', trigger: 'change' }],
51   - props: { dictionaryCode: 'FROM_CITY_LIST' },
52   - },
53   - { type: 'el-input', label: '目的地', key: 'toCountry', exclude: 'search',
54   - rules: [{ required: true, message: '目的地不能为空', trigger: 'change' }],
55   - props: { dictionaryCode: 'TO_COUNTRY' },
56   - },
57   - { type: 'el-input', label: '状态', key: 'enableFlag', span: 24, searchScheme: { span: 6 },
58   - formatter: (r, c, v) => v ? '正常' : '禁用'
59   - },
60   - { type: 'el-date-picker', label: '生效时间', key: 'enabledTime', exclude: 'search', minWidth: '180',
61   - rules: [{ required: true, message: '生效时间不能为空', trigger: 'change' }],
62   - props: { type: 'datetime', placeholder: '生效时间', 'value-format': 'yyyy-MM-dd HH:mm:ss' },
63   - },
64   - { type: 'el-date-picker', label: '禁用时间', key: 'disabledTime', exclude: 'search', minWidth: '180',
65   - rules: [{ required: true, message: '禁用时间不能为空', trigger: 'change' }],
66   - props: { type: 'datetime', placeholder: '禁用时间', 'value-format': 'yyyy-MM-dd HH:mm:ss' },
67   - },
68   - ],
69   - }
70   - },
71   - methods: {
72   - handleSelection(selection) {
73   - console.log(selection);
74   - }
75   - }
76   -}
77   -</script>
78 0 \ No newline at end of file
packages/scheme/index.vue
  Diff comments   View file @8374c33
... ... @@ -164,7 +164,7 @@
164 164  
165 165 <script>
166 166 import { generateListSpace } from './parser';
167   -import { stringify } from './utils';
  167 +import { stringify, getUUID } from './utils';
168 168  
169 169 let _$http = null;
170 170 let TABLE_DATA_STATIC = [];
... ... @@ -290,9 +290,9 @@ export default {
290 290 }
291 291 },
292 292 mounted() {
293   - this.tableData = this.value;
294   - this.totalCount = this.value.length;
295   - TABLE_DATA_STATIC = this.value;
  293 + const defaultData = this.value;
  294 + this.totalCount = defaultData.length;
  295 + TABLE_DATA_STATIC = defaultData.map(item => { return { ...item, id: item.id || getUUID() } });
296 296 // 设置自动加载数据
297 297 if (this.option.auto !== false) {
298 298 this.handleSearch();
... ... @@ -566,7 +566,8 @@ export default {
566 566 this.dialogLoading = false;
567 567 });
568 568 } else {
569   - TABLE_DATA_STATIC.splice(selection[0].$index, 1);
  569 + TABLE_DATA_STATIC = TABLE_DATA_STATIC.filter(item => item.id !== selection[0].id);
  570 + // TABLE_DATA_STATIC.splice(selection[0].$index, 1);
570 571 this.hideDialog();
571 572 this.handleSearch();
572 573 }
... ... @@ -647,9 +648,9 @@ export default {
647 648 this.dialogLoading = false;
648 649 });
649 650 } else {
650   - TABLE_DATA_STATIC.push(param);
  651 + TABLE_DATA_STATIC.push({ ...param, id: param.id || getUUID() });
651 652 this.totalCount = TABLE_DATA_STATIC.length;
652   - this.hideDialog();
  653 + // this.hideDialog();
653 654 this.handleSearch();
654 655 }
655 656 },
... ... @@ -684,7 +685,7 @@ export default {
684 685 this.dialogLoading = false;
685 686 });
686 687 } else {
687   - this.$set(TABLE_DATA_STATIC, this.tableCurrentRow.$index, param);
  688 + this.$set(TABLE_DATA_STATIC, this.tableCurrentRow.$index, { ...param, id: param.id || getUUID() });
688 689 this.hideDialog();
689 690 this.handleSearch();
690 691 }
... ...
packages/scheme/utils.js
  Diff comments   View file @8374c33
... ... @@ -38,4 +38,33 @@ export const parse = (url) =&gt; {
38 38 });
39 39 }
40 40 return obj;
  41 +}
  42 +
  43 +export const getUUID = (len, radix) => {
  44 + var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  45 + var uuid = [], i;
  46 + radix = radix || chars.length;
  47 +
  48 + if (len) {
  49 + // Compact form
  50 + for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
  51 + } else {
  52 + // rfc4122, version 4 form
  53 + var r;
  54 +
  55 + // rfc4122 requires these characters
  56 + uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
  57 + uuid[14] = '4';
  58 +
  59 + // Fill in random data. At i==19 set the high bits of clock sequence as
  60 + // per rfc4122, sec. 4.1.5
  61 + for (i = 0; i < 36; i++) {
  62 + if (!uuid[i]) {
  63 + r = 0 | Math.random()*16;
  64 + uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
  65 + }
  66 + }
  67 + }
  68 +
  69 + return uuid.join('');
41 70 }
42 71 \ No newline at end of file
... ...