SearchForm优化

vue/full/src/component/form/Search/index.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import {deepClone} from "@/util"
+import {isEmpty, deepClone} from "@/util"
 import {getElementInnerWidth} from '@/util/browser'
 import {clearableComponentTag, clearFormItem} from "@/util/element-ui/elForm"
 import {findComponentByTag} from "@/util/vue"
@@ -13,8 +13,18 @@ export default {
     },
 
     props: {
+        // 搜索表单变量对象
         model: Object,
-        labelWidth: {type: String, default: '120px'},
+        // 是否默认展开全部
+        defaultExpand: { type: Boolean, default: true },
+
+        // el-form原始属性
+        labelWidth: String,
+        labelPosition: { type: String, default: 'right' },
+        labelSuffix: { type: String, default: '：' },
+
+        // 每个搜索项之间的间隔，等同于el-row的gutter
+        gutter: { type: Number, default: 20 },
 
         /*每个宽度下，一行能有多少个控件，需要是24的因数*/
         xs: {type: Number, default: 1}, // <768px
@@ -23,12 +33,32 @@ export default {
         lg: {type: Number, default: 4}  // >=1200px
     },
 
-    data() {
+    data(vm) {
         return {
-            showCollapse: false, //是否需要折叠控制
+            maxLabelLength: 0,            // 子级el-form-item中最长的label长度，中文占1，英文占0.5
-            collapse: true,      //是否处于折叠状态，默认折叠
+            showCollapse: false,          // 是否需要折叠控制
-            num: 0,              //从第几个控件开始需要隐藏
+            collapse: !vm.defaultExpand,  // 是否处于折叠状态
-            span: 8              //24等分下，每个栅格的宽度
+            num: 0,                       // 从第几个控件开始需要隐藏
+            span: 8                       // 24等分下，每个栅格的宽度，这里是默认值
+        }
+    },
+
+    computed: {
+        innerLabelWith() {
+            // 优先使用传入的props.labelWidth
+            if (!isEmpty(this.labelWidth)) return this.labelWidth
+            // 否则使用子级最长的label长度 + 固定后缀长度（固定为1）+ 1
+            const fixedLength = isEmpty(this.labelSuffix) ? 0 : 1
+            return `${this.maxLabelLength + fixedLength + 1}em`
+        }
+    },
+
+    watch: {
+        defaultExpand: {
+            immediate: true,
+            handler(v) {
+                v && (this.collapse = false)
+            }
         }
     },
 
@@ -52,6 +82,9 @@ export default {
             //因为表单可能存在无清空功能的组件，所以传递一次初始值
             this.$emit('reset', deepClone(this.initialModel))
         },
+        handleSubmit() {
+            this.handleSearch()
+        },
 
         getElementNumInRow() {
             const vw = getElementInnerWidth(this.$el.parentNode)
@@ -86,19 +119,21 @@ export default {
 
             return (
                 <div class="search-form-action">
+                    <el-form-item label-width="0">
                         <el-button type="primary" size="small" on-click={this.handleSearch}>查 询</el-button>
                         <el-button type="dashed" size="small" plain on-click={this.handleReset}>重 置</el-button>
                         {this.showCollapse && (
                             <el-button
+                                class="search-form-action-button"
                                 type="text"
                                 size="small"
-                            style="padding-left: 0"
                                 on-click={this.handleCollapse}
                             >
                                 {ctrl.t}
-                            <v-icon icon={ctrl.i} style="margin-left: 0.5em"/>
+                                <v-icon icon={ctrl.i}/>
                             </el-button>
                         )}
+                    </el-form-item>
                 </div>
             )
         }
@@ -121,7 +156,20 @@ export default {
     },
 
     render() {
-        const slots = this.$slots.default, collapse = this.showCollapse && this.collapse
+        const slots = this.$slots.default.filter(i => i.tag)
+        const collapse = this.showCollapse && this.collapse
+
+        this.maxLabelLength = Math.max(...slots.map(vnode => {
+            const label = vnode.componentOptions?.propsData?.label
+            if (isEmpty(label)) return 0
+
+            // 计算label对应多少em，中文为1em，英文为0.5em
+            let num = 0
+            for (let i = 0; i < label.length; i++) {
+                num += label.charCodeAt(i) > 127 ? 1 : 0.5
+            }
+            return num
+        }))
 
         const display = collapse ? slots.slice(0, this.num) : slots
         const hidden = collapse ? slots.slice(this.num) : []
@@ -129,12 +177,13 @@ export default {
         return (
             <el-form
                 class="search-form"
-                label-position="right"
+                label-position={this.labelPosition}
-                label-width={this.labelWidth}
+                label-width={this.innerLabelWith}
-                label-suffix=":"
+                label-suffix={this.labelSuffix}
                 size="small"
+                {...{ nativeOn: { submit: this.handleSubmit } }}
             >
-                <el-row gutter={20}>
+                <el-row gutter={this.gutter}>
                     {this.renderChildren(display)}
                     {this.renderChildren(hidden, true)}
                     {this.renderAction()}
@@ -149,6 +198,15 @@ export default {
 .search-form {
     &-action {
         margin-left: auto;
+        text-align: right;
+
+        &-button {
+            padding-left: 0;
+
+            .icon {
+                margin-left: 0.5em;
+            }
+        }
     }
 
     > .el-row {