fix: 修复Schema传参

刘汉宸
1 parent 71dd7d1e
Showing 6 changed files with 106 additions and 35 deletions Show diff stats
examples/views/docs/component/schema-filter.md
examples/views/docs/component/schema-page.md
packages/schema-filter/index.vue
packages/schema-form/index.vue
packages/schema-page/index.vue
packages/schema-table/index.vue
@@ -137,6 +137,60 @@ export default {
 :::
+## 操作栏占位
+
+某些业务场景下，搜索栏不一定每一项的占位都相等，这种情况下已经不便于自动计算准确的占位了，此时可以手动设置展开和收起时的占位。
+
+::: snippet `collapsed-span`设置操作栏展开状态的占位，`uncollapsed-span`设置操作栏收起状态的占位。
+
+```html
+<template>
+  <z-schema-filter v-model="form" :schema="schema" :display="6" :collapsed-span="12" :uncollapsed-span="6"></z-schema-filter>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        age: '',
+        gender: '',
+      },
+      schema: {
+        items: [
+          { is: 'el-input', prop: 'name', label: '姓名' },
+          { is: 'el-input', prop: 'age', label: '年龄' },
+          { is: 'el-input', prop: 'gender', label: '性别', span: 12 },
+          { is: 'el-input', prop: 'item1', label: '搜索项1' },
+          { is: 'el-input', prop: 'item2', label: '搜索项2' },
+          { is: 'el-input', prop: 'item3', label: '搜索项3' },
+          { is: 'el-input', prop: 'item4', label: '搜索项4' },
+          { is: 'el-input', prop: 'item5', label: '搜索项5' },
+          { is: 'el-input', prop: 'item6', label: '搜索项6' },
+        ]
+      },
+      loading: false
+    };
+  },
+  methods: {
+    onSearch(model) {
+      this.loading = true;
+      console.log(model);
+      setTimeout(() => {
+        this.loading = false;
+      }, 1500);
+    },
+    onReset() {
+      console.log('reset');
+    }
+  }
+};
+</script>
+```
+
+:::
+
 ## 自定义操作栏
 特殊业务场景下，可以自定义操作栏
@@ -24,7 +24,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -84,7 +83,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -154,7 +152,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -271,7 +268,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -420,7 +416,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -529,7 +524,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -633,7 +627,6 @@ export default {
           ]
         },
         table: {
-          props: { size: 'mini', border: true } ,
           items: [
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
@@ -13,7 +13,7 @@
 <script>
 import MIX_FORM from '../mixins/form';
-import { cloneDeep } from '../utils';
+import { cloneDeep, get } from '../utils';
 export default {
   name: 'SchemaFilter',
@@ -28,14 +28,8 @@ export default {
     },
     size: String,
     loading: Boolean,
-    display: {
-      type: Number,
-      default: 3,
-    },
-    span: {
-      type: Number,
-      default: 6,
-    },
+    display: Number,
+    span: Number,
     collapsedSpan: Number,
     uncollapsedSpan: Number,
   },
@@ -55,13 +49,29 @@ export default {
     },
   },
   computed: {
+    _display() {
+      return this.display || get(this.schema, 'props.display') || 3;
+    },
+    _span() {
+      return this.span || get(this.schema, 'props.span') || 6;
+    },
+    _collapsedSpan() {
+      return this.collapsedSpan || get(this.schema, 'props.collapsedSpan');
+    },
+    _uncollapsedSpan() {
+      return this.uncollapsedSpan || get(this.schema, 'props.uncollapsedSpan');
+    },
+    _schemaProps() {
+      const { display, collapsedSpan, uncollapsedSpan, loading, ...other } = this.schema.props || {};
+      return other;
+    },
     filterSize() {
       return this.size || (this.$ELEMENT || {}).size;
     },
     formattedItems() {
       const items = this.schema.items || [];
       const result = [];
-      const visibleNumber = this.display - 1;
+      const visibleNumber = this._display - 1;
       items.forEach((item, index) => {
         if (!this.collapsed && index > visibleNumber && index < items.length) {
           result.push({ ...item, if: true, show: false });
@@ -73,37 +83,37 @@ export default {
     },
     formattedSchema() {
       return {
-        props: { span: this.span, 'label-width': '75px', size: this.filterSize || 'small', ...(this.schema.props || {}) },
+        props: { span: this._span, 'label-width': '75px', size: this.filterSize || 'small', ...this._schemaProps },
         items: [...this.formattedItems, { prop: 'operation', label: '', labelWidth: '0px', span: this.operationSpan }],
       };
     },
     rowItemCount() {
-      return parseInt(24 / this.span);
+      return parseInt(24 / this._span);
     },
     rowItemRemain() {
       return this.formattedItems.length % this.rowItemCount;
     },
     operationSpan() {
       if (this.collapsed) {
-        if (this.collapsedSpan) {
-          return this.collapsedSpan;
+        if (this._collapsedSpan) {
+          return this._collapsedSpan;
         }
-        return (this.rowItemCount - this.rowItemRemain) * this.span;
+        return (this.rowItemCount - this.rowItemRemain) * this._span;
       } else {
-        if (this.uncollapsedSpan) {
-          return this.uncollapsedSpan;
+        if (this._uncollapsedSpan) {
+          return this._uncollapsedSpan;
         }
-        if (this.formattedItems.length < this.display) {
-          return this.span * (this.rowItemCount - this.rowItemRemain);
+        if (this.formattedItems.length < this._display) {
+          return this._span * (this.rowItemCount - this.rowItemRemain);
         }
-        if (this.display < this.rowItemCount - 1) {
-          return this.span * this.display;
+        if (this._display < this.rowItemCount - 1) {
+          return this._span * this._display;
         }
-        return this.span;
+        return this._span;
       }
     },
     showCollapsed() {
-      return this.formattedItems.length > this.display;
+      return this.formattedItems.length > this._display;
     },
     slotKeys() {
       return Object.keys(this.$scopedSlots);
 <template>
-  <z-form ref="form" class="z-schema-form" v-model="model" v-bind="schema.props" v-on="schema.on">
+  <z-form ref="form" class="z-schema-form" v-model="model" v-bind="_schemaProps" v-on="schema.on">
     <template v-for="(item, index) in schema.items">
       <template v-if="item.is">
         <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 {
       type: Object,
       required: true,
     },
+    size: String,
   },
   data() {
     return {
@@ -77,8 +78,11 @@ export default {
     };
   },
   computed: {
-    schemaProps() {
-      return this.schema.props;
+    _size() {
+      return this.size || (this.$ELEMENT || {}).size;
+    },
+    _schemaProps() {
+      return { size: this._size, ...(this.schema.props || {}) };
     },
     slotProps() {
       return {
@@ -26,7 +26,7 @@
     </div>
     <!-- 表格内容 -->
     <div v-if="schema.table" class="z-schema-page__table">
-      <z-schema-table :schema="schema.table" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
+      <z-schema-table :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
         <template #left>
           <el-table-column v-if="schema.selectable !== false" type="selection" width="40" align="center"></el-table-column>
         </template>
@@ -290,6 +290,15 @@ export default {
     },
   },
   methods: {
+    tableSchemaDefaultProps(val) {
+      const config = cloneDeep(val);
+      const defaultProps = { size: 'small', border: true, 'highlight-current-row': true };
+      if (config.props) {
+        return { ...config, props: { ...defaultProps, ...config.props } };
+      } else {
+        return { ...config, props: defaultProps };
+      }
+    },
     getSlot(name) {
       return this.$slots[name] || this.$scopedSlots[name];
     },
@@ -12,6 +12,7 @@ export default {
       type: Object,
       required: true,
     },
+    size: String,
   },
   data() {
     return {
@@ -33,7 +34,7 @@ export default {
     const schema = this.schema || {};
     const _props = schema.props || {};
     const _on = schema.on || this.$listeners || {};
-    return h('z-table', { props: { value: this.model, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
+    return h('z-table', { props: { value: this.model, size: this.size, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
   },
 };
 </script>
	@@ -137,6 +137,60 @@ export default {		@@ -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	特殊业务场景下，可以自定义操作栏