frontend / zee

Download as
Browse Code »

Commit de9f9e69342cae5b63d1e4dcc4f708039a97de99

Authored by 刘汉宸
1 parent 71dd7d1e
Exists in master and in 2 other branches Feature-渲染优化, Refactor-2.0

fix: 修复Schema传参

Showing 6 changed files with 106 additions and 35 deletions   Show diff stats
examples/views/docs/component/schema-filter.md
  Diff comments   View file @de9f9e6
... ... @@ -137,6 +137,60 @@ export default {
137 137  
138 138 :::
139 139  
  140 +## 操作栏占位
  141 +
  142 +某些业务场景下，搜索栏不一定每一项的占位都相等，这种情况下已经不便于自动计算准确的占位了，此时可以手动设置展开和收起时的占位。
  143 +
  144 +::: snippet `collapsed-span`设置操作栏展开状态的占位，`uncollapsed-span`设置操作栏收起状态的占位。
  145 +
  146 +```html
  147 +<template>
  148 + <z-schema-filter v-model="form" :schema="schema" :display="6" :collapsed-span="12" :uncollapsed-span="6"></z-schema-filter>
  149 +</template>
  150 +
  151 +<script>
  152 +export default {
  153 + data() {
  154 + return {
  155 + form: {
  156 + name: '',
  157 + age: '',
  158 + gender: '',
  159 + },
  160 + schema: {
  161 + items: [
  162 + { is: 'el-input', prop: 'name', label: '姓名' },
  163 + { is: 'el-input', prop: 'age', label: '年龄' },
  164 + { is: 'el-input', prop: 'gender', label: '性别', span: 12 },
  165 + { is: 'el-input', prop: 'item1', label: '搜索项1' },
  166 + { is: 'el-input', prop: 'item2', label: '搜索项2' },
  167 + { is: 'el-input', prop: 'item3', label: '搜索项3' },
  168 + { is: 'el-input', prop: 'item4', label: '搜索项4' },
  169 + { is: 'el-input', prop: 'item5', label: '搜索项5' },
  170 + { is: 'el-input', prop: 'item6', label: '搜索项6' },
  171 + ]
  172 + },
  173 + loading: false
  174 + };
  175 + },
  176 + methods: {
  177 + onSearch(model) {
  178 + this.loading = true;
  179 + console.log(model);
  180 + setTimeout(() => {
  181 + this.loading = false;
  182 + }, 1500);
  183 + },
  184 + onReset() {
  185 + console.log('reset');
  186 + }
  187 + }
  188 +};
  189 +</script>
  190 +```
  191 +
  192 +:::
  193 +
140 194 ## 自定义操作栏
141 195  
142 196 特殊业务场景下，可以自定义操作栏
... ...
examples/views/docs/component/schema-page.md
  Diff comments   View file @de9f9e6
... ... @@ -24,7 +24,6 @@ export default {
24 24 ]
25 25 },
26 26 table: {
27   - props: { size: 'mini', border: true } ,
28 27 items: [
29 28 { prop: 'name', label: '姓名' },
30 29 { prop: 'age', label: '年龄' },
... ... @@ -84,7 +83,6 @@ export default {
84 83 ]
85 84 },
86 85 table: {
87   - props: { size: 'mini', border: true } ,
88 86 items: [
89 87 { prop: 'name', label: '姓名' },
90 88 { prop: 'age', label: '年龄' },
... ... @@ -154,7 +152,6 @@ export default {
154 152 ]
155 153 },
156 154 table: {
157   - props: { size: 'mini', border: true } ,
158 155 items: [
159 156 { prop: 'name', label: '姓名' },
160 157 { prop: 'age', label: '年龄' },
... ... @@ -271,7 +268,6 @@ export default {
271 268 ]
272 269 },
273 270 table: {
274   - props: { size: 'mini', border: true } ,
275 271 items: [
276 272 { prop: 'name', label: '姓名' },
277 273 { prop: 'age', label: '年龄' },
... ... @@ -420,7 +416,6 @@ export default {
420 416 ]
421 417 },
422 418 table: {
423   - props: { size: 'mini', border: true } ,
424 419 items: [
425 420 { prop: 'name', label: '姓名' },
426 421 { prop: 'age', label: '年龄' },
... ... @@ -529,7 +524,6 @@ export default {
529 524 ]
530 525 },
531 526 table: {
532   - props: { size: 'mini', border: true } ,
533 527 items: [
534 528 { prop: 'name', label: '姓名' },
535 529 { prop: 'age', label: '年龄' },
... ... @@ -633,7 +627,6 @@ export default {
633 627 ]
634 628 },
635 629 table: {
636   - props: { size: 'mini', border: true } ,
637 630 items: [
638 631 { prop: 'name', label: '姓名' },
639 632 { prop: 'age', label: '年龄' },
... ...
packages/schema-filter/index.vue
  Diff comments   View file @de9f9e6
... ... @@ -13,7 +13,7 @@
13 13  
14 14 <script>
15 15 import MIX_FORM from '../mixins/form';
16   -import { cloneDeep } from '../utils';
  16 +import { cloneDeep, get } from '../utils';
17 17  
18 18 export default {
19 19 name: 'SchemaFilter',
... ... @@ -28,14 +28,8 @@ export default {
28 28 },
29 29 size: String,
30 30 loading: Boolean,
31   - display: {
32   - type: Number,
33   - default: 3,
34   - },
35   - span: {
36   - type: Number,
37   - default: 6,
38   - },
  31 + display: Number,
  32 + span: Number,
39 33 collapsedSpan: Number,
40 34 uncollapsedSpan: Number,
41 35 },
... ... @@ -55,13 +49,29 @@ export default {
55 49 },
56 50 },
57 51 computed: {
  52 + _display() {
  53 + return this.display || get(this.schema, 'props.display') || 3;
  54 + },
  55 + _span() {
  56 + return this.span || get(this.schema, 'props.span') || 6;
  57 + },
  58 + _collapsedSpan() {
  59 + return this.collapsedSpan || get(this.schema, 'props.collapsedSpan');
  60 + },
  61 + _uncollapsedSpan() {
  62 + return this.uncollapsedSpan || get(this.schema, 'props.uncollapsedSpan');
  63 + },
  64 + _schemaProps() {
  65 + const { display, collapsedSpan, uncollapsedSpan, loading, ...other } = this.schema.props || {};
  66 + return other;
  67 + },
58 68 filterSize() {
59 69 return this.size || (this.$ELEMENT || {}).size;
60 70 },
61 71 formattedItems() {
62 72 const items = this.schema.items || [];
63 73 const result = [];
64   - const visibleNumber = this.display - 1;
  74 + const visibleNumber = this._display - 1;
65 75 items.forEach((item, index) => {
66 76 if (!this.collapsed && index > visibleNumber && index < items.length) {
67 77 result.push({ ...item, if: true, show: false });
... ... @@ -73,37 +83,37 @@ export default {
73 83 },
74 84 formattedSchema() {
75 85 return {
76   - props: { span: this.span, 'label-width': '75px', size: this.filterSize || 'small', ...(this.schema.props || {}) },
  86 + props: { span: this._span, 'label-width': '75px', size: this.filterSize || 'small', ...this._schemaProps },
77 87 items: [...this.formattedItems, { prop: 'operation', label: '', labelWidth: '0px', span: this.operationSpan }],
78 88 };
79 89 },
80 90 rowItemCount() {
81   - return parseInt(24 / this.span);
  91 + return parseInt(24 / this._span);
82 92 },
83 93 rowItemRemain() {
84 94 return this.formattedItems.length % this.rowItemCount;
85 95 },
86 96 operationSpan() {
87 97 if (this.collapsed) {
88   - if (this.collapsedSpan) {
89   - return this.collapsedSpan;
  98 + if (this._collapsedSpan) {
  99 + return this._collapsedSpan;
90 100 }
91   - return (this.rowItemCount - this.rowItemRemain) * this.span;
  101 + return (this.rowItemCount - this.rowItemRemain) * this._span;
92 102 } else {
93   - if (this.uncollapsedSpan) {
94   - return this.uncollapsedSpan;
  103 + if (this._uncollapsedSpan) {
  104 + return this._uncollapsedSpan;
95 105 }
96   - if (this.formattedItems.length < this.display) {
97   - return this.span * (this.rowItemCount - this.rowItemRemain);
  106 + if (this.formattedItems.length < this._display) {
  107 + return this._span * (this.rowItemCount - this.rowItemRemain);
98 108 }
99   - if (this.display < this.rowItemCount - 1) {
100   - return this.span * this.display;
  109 + if (this._display < this.rowItemCount - 1) {
  110 + return this._span * this._display;
101 111 }
102   - return this.span;
  112 + return this._span;
103 113 }
104 114 },
105 115 showCollapsed() {
106   - return this.formattedItems.length > this.display;
  116 + return this.formattedItems.length > this._display;
107 117 },
108 118 slotKeys() {
109 119 return Object.keys(this.$scopedSlots);
... ...
packages/schema-form/index.vue
  Diff comments   View file @de9f9e6
1 1 <template>
2   - <z-form ref="form" class="z-schema-form" v-model="model" v-bind="schema.props" v-on="schema.on">
  2 + <z-form ref="form" class="z-schema-form" v-model="model" v-bind="_schemaProps" v-on="schema.on">
3 3 <template v-for="(item, index) in schema.items">
4 4 <template v-if="item.is">
5 5 <z-form-item v-if="bindParam(item, 'if')" v-show="bindParam(item, 'show')" v-bind="bindItemProps(item)" :key="index">
... ... @@ -69,6 +69,7 @@ export default {
69 69 type: Object,
70 70 required: true,
71 71 },
  72 + size: String,
72 73 },
73 74 data() {
74 75 return {
... ... @@ -77,8 +78,11 @@ export default {
77 78 };
78 79 },
79 80 computed: {
80   - schemaProps() {
81   - return this.schema.props;
  81 + _size() {
  82 + return this.size || (this.$ELEMENT || {}).size;
  83 + },
  84 + _schemaProps() {
  85 + return { size: this._size, ...(this.schema.props || {}) };
82 86 },
83 87 slotProps() {
84 88 return {
... ...
packages/schema-page/index.vue
  Diff comments   View file @de9f9e6
... ... @@ -26,7 +26,7 @@
26 26 </div>
27 27 <!-- 表格内容 -->
28 28 <div v-if="schema.table" class="z-schema-page__table">
29   - <z-schema-table :schema="schema.table" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
  29 + <z-schema-table :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
30 30 <template #left>
31 31 <el-table-column v-if="schema.selectable !== false" type="selection" width="40" align="center"></el-table-column>
32 32 </template>
... ... @@ -290,6 +290,15 @@ export default {
290 290 },
291 291 },
292 292 methods: {
  293 + tableSchemaDefaultProps(val) {
  294 + const config = cloneDeep(val);
  295 + const defaultProps = { size: 'small', border: true, 'highlight-current-row': true };
  296 + if (config.props) {
  297 + return { ...config, props: { ...defaultProps, ...config.props } };
  298 + } else {
  299 + return { ...config, props: defaultProps };
  300 + }
  301 + },
293 302 getSlot(name) {
294 303 return this.$slots[name] || this.$scopedSlots[name];
295 304 },
... ...
packages/schema-table/index.vue
  Diff comments   View file @de9f9e6
... ... @@ -12,6 +12,7 @@ export default {
12 12 type: Object,
13 13 required: true,
14 14 },
  15 + size: String,
15 16 },
16 17 data() {
17 18 return {
... ... @@ -33,7 +34,7 @@ export default {
33 34 const schema = this.schema || {};
34 35 const _props = schema.props || {};
35 36 const _on = schema.on || this.$listeners || {};
36   - return h('z-table', { props: { value: this.model, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
  37 + return h('z-table', { props: { value: this.model, size: this.size, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
37 38 },
38 39 };
39 40 </script>
... ...