Commit 8374c330711df632e7c92309df33cd277f0ecc6c
1 parent
7a06b458
Exists in
master
and in
1 other branch
优化Scheme静态数据维护
Showing
8 changed files
with
65 additions
and
93 deletions
Show diff stats
examples/components/code-snippet.vue
| @@ -53,6 +53,9 @@ export default { | @@ -53,6 +53,9 @@ export default { | ||
| 53 | margin: 0px !important; | 53 | margin: 0px !important; |
| 54 | padding: 0px !important; | 54 | padding: 0px !important; |
| 55 | } | 55 | } |
| 56 | + .el-pagination.is-background .el-pager li { | ||
| 57 | + margin: 0 5px !important; | ||
| 58 | + } | ||
| 56 | } | 59 | } |
| 57 | .eagle-code-snippet--demo { | 60 | .eagle-code-snippet--demo { |
| 58 | box-sizing: border-box; | 61 | box-sizing: border-box; |
examples/router/routes.js
| @@ -73,13 +73,13 @@ const _components = [ | @@ -73,13 +73,13 @@ const _components = [ | ||
| 73 | ] | 73 | ] |
| 74 | }, | 74 | }, |
| 75 | { | 75 | { |
| 76 | - group: '测试', | 76 | + group: '其它', |
| 77 | children: [ | 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
| @@ -4,9 +4,9 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼ | @@ -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 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| @@ -44,4 +44,5 @@ export default { | @@ -44,4 +44,5 @@ export default { | ||
| 44 | 44 | ||
| 45 | å‚æ•°|说明|类型|å¯é€‰å€¼|默认值 | 45 | å‚æ•°|说明|类型|å¯é€‰å€¼|默认值 |
| 46 | -|-|-|-|- | 46 | -|-|-|-|- |
| 47 | +value / v-model | 绑定值 | Array | - | [] | ||
| 47 | list | 表å•é¡¹é…置列表 | Array | - | [] | 48 | list | 表å•é¡¹é…置列表 | Array | - | [] |
| 48 | \ No newline at end of file | 49 | \ No newline at end of file |
examples/views/docs/guide/introduce.md
examples/views/page/test.vue
| @@ -1,77 +0,0 @@ | @@ -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 | \ No newline at end of file | 0 | \ No newline at end of file |
packages/scheme/index.vue
| @@ -164,7 +164,7 @@ | @@ -164,7 +164,7 @@ | ||
| 164 | 164 | ||
| 165 | <script> | 165 | <script> |
| 166 | import { generateListSpace } from './parser'; | 166 | import { generateListSpace } from './parser'; |
| 167 | -import { stringify } from './utils'; | 167 | +import { stringify, getUUID } from './utils'; |
| 168 | 168 | ||
| 169 | let _$http = null; | 169 | let _$http = null; |
| 170 | let TABLE_DATA_STATIC = []; | 170 | let TABLE_DATA_STATIC = []; |
| @@ -290,9 +290,9 @@ export default { | @@ -290,9 +290,9 @@ export default { | ||
| 290 | } | 290 | } |
| 291 | }, | 291 | }, |
| 292 | mounted() { | 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 | if (this.option.auto !== false) { | 297 | if (this.option.auto !== false) { |
| 298 | this.handleSearch(); | 298 | this.handleSearch(); |
| @@ -566,7 +566,8 @@ export default { | @@ -566,7 +566,8 @@ export default { | ||
| 566 | this.dialogLoading = false; | 566 | this.dialogLoading = false; |
| 567 | }); | 567 | }); |
| 568 | } else { | 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 | this.hideDialog(); | 571 | this.hideDialog(); |
| 571 | this.handleSearch(); | 572 | this.handleSearch(); |
| 572 | } | 573 | } |
| @@ -647,9 +648,9 @@ export default { | @@ -647,9 +648,9 @@ export default { | ||
| 647 | this.dialogLoading = false; | 648 | this.dialogLoading = false; |
| 648 | }); | 649 | }); |
| 649 | } else { | 650 | } else { |
| 650 | - TABLE_DATA_STATIC.push(param); | 651 | + TABLE_DATA_STATIC.push({ ...param, id: param.id || getUUID() }); |
| 651 | this.totalCount = TABLE_DATA_STATIC.length; | 652 | this.totalCount = TABLE_DATA_STATIC.length; |
| 652 | - this.hideDialog(); | 653 | + // this.hideDialog(); |
| 653 | this.handleSearch(); | 654 | this.handleSearch(); |
| 654 | } | 655 | } |
| 655 | }, | 656 | }, |
| @@ -684,7 +685,7 @@ export default { | @@ -684,7 +685,7 @@ export default { | ||
| 684 | this.dialogLoading = false; | 685 | this.dialogLoading = false; |
| 685 | }); | 686 | }); |
| 686 | } else { | 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 | this.hideDialog(); | 689 | this.hideDialog(); |
| 689 | this.handleSearch(); | 690 | this.handleSearch(); |
| 690 | } | 691 | } |
packages/scheme/utils.js
| @@ -38,4 +38,33 @@ export const parse = (url) => { | @@ -38,4 +38,33 @@ export const parse = (url) => { | ||
| 38 | }); | 38 | }); |
| 39 | } | 39 | } |
| 40 | return obj; | 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 | \ No newline at end of file | 71 | \ No newline at end of file |