search-form增强

代码优化

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

@@ -1,6 +1,8 @@
 <script type="text/jsx">
 import {deepClone} from "@/util"
 import {getElementInnerWidth} from '@/util/browser'
+import {clearableComponentTag, clearFormItem} from "@/util/element-ui/elForm"
+import {findComponentByTag} from "@/util/vue"
 
 export default {
     name: "SearchForm",
@@ -42,6 +44,12 @@ export default {
                 return
             }
 
+            this.$slots.default.forEach(({componentInstance}) => {
+                const item = findComponentByTag(componentInstance, tag => clearableComponentTag.includes(tag))
+                item && clearFormItem(item)
+            })
+
+            //因为表单可能存在无清空功能的组件，所以传递一次初始值
             this.$emit('reset', deepClone(this.initialModel))
         },
 
@@ -149,7 +157,7 @@ export default {
         flex-wrap: wrap;
     }
 
-    .hide {
+    .el-col.hide {
         display: none;
     }
 }

vue/full/src/util/element-ui/elForm.js

@@ -0,0 +1,35 @@
+export const clearableComponentTag = [
+    'el-input',
+    'el-select',
+    'el-cascader',
+    'el-date-picker',
+    'el-time-picker',
+    'el-time-select'
+]
+
+/**
+ * 模拟el-input、el-select、el-cascader、el-date-picker等具有可清空功能的组件的clear方法
+ *
+ * @param componentInstance 组件实例
+ */
+export function clearFormItem(componentInstance) {
+    switch (componentInstance.$options._componentTag) {
+        case 'el-input':
+            componentInstance.clear()
+            break
+        case 'el-select':
+            componentInstance.deleteSelected({stopPropagation: () => undefined})
+            break
+        case 'el-cascader':
+            componentInstance.handleClear()
+            break
+        case 'el-date-picker':
+        case 'el-time-picker':
+        case 'el-time-select':
+            componentInstance.showClose = true
+            componentInstance.handleClickIcon({stopPropagation: () => undefined})
+            break
+        default:
+            break
+    }
+}

vue/full/src/util/vue.js

@@ -3,21 +3,38 @@
  * 使用广度优先搜索
  *
  * @param instance  从哪个组件实例开始查找，一般是this
- * @param tag       要查找的组件的标签名称
+ * @param tag       要查找的组件的标签名称，可以是Function
+ * @param maxDepth  查找的最大深度，不传或者<1时不作限制
  */
-export function findComponentByTag(instance, tag) {
+export function findComponentByTag(instance, tag, maxDepth) {
     if (!instance || !tag) return
 
     const queue = [instance]
+    const predicate = typeof tag === 'function' ? tag : componentTag => componentTag === tag
+
+    let currentDepth = 0
 
     while (queue.length > 0) {
-        const item = queue.shift()
-        const {$options, $children} = item
+        const len = queue.length
+
+        for (let i = 0; i < len; i++) {
+            const item = queue.shift()
+            const {$options, $children} = item
+
+            if (predicate($options._componentTag)) {
+                return item
+            }
+
+            if (Array.isArray($children)) {
+                queue.push(...$children)
+            }
+        }
 
-        if ($options._componentTag === tag) return item
+        currentDepth++
 
-        if (Array.isArray($children)) {
-            queue.push(...$children)
+        //超出最大深度时退出
+        if (maxDepth != null && maxDepth >= 1 && maxDepth <= currentDepth) {
+            return
         }
     }
 }

vue/full/src/view/admin/purchase/inbound/component/OrderSelector.vue

@@ -19,7 +19,7 @@
                     <el-table-column align="center" type="expand">
                         <template v-slot="{row}">
                             <liner-progress :show="row._loading"/>
-                            <div style="text-align: center" v-show="!row._loading">
+                            <div v-show="!row._loading" style="text-align: center">
                                 <el-table
                                     :data="row.data"
                                     row-key="id"
@@ -27,7 +27,7 @@
                                     @selection-change="row._selection = $event"
                                 >
                                     <el-table-column
-                                        :selectable="p=>p.remainNum>0"
+                                        :selectable="p=>p.remainNum > 0"
                                         align="center"
                                         type="selection"
                                         width="60"
@@ -134,11 +134,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss" scoped>
-.el-table {
-    .nets-table-btn {
-        margin: 0 auto;
-    }
-}
-</style>

vue/full/src/view/admin/sell/outbound/component/OrderSelector.vue

@@ -19,7 +19,7 @@
                     <el-table-column align="center" type="expand">
                         <template v-slot="{row}">
                             <liner-progress :show="row._loading"/>
-                            <div style="text-align: center" v-show="!row._loading">
+                            <div v-show="!row._loading" style="text-align: center">
                                 <el-table
                                     :data="row.data"
                                     row-key="id"
@@ -38,10 +38,11 @@
                                     <el-table-column align="center" label="未出库数量" prop="remainNum"/>
                                 </el-table>
                                 <el-button
+                                    v-if="row.data && row.data.length > 0"
                                     size="small"
                                     style="margin-top: 10px"
                                     type="primary"
-                                    @click="() => confirm(row)"
+                                    @click="confirm(row)"
                                 >
                                     确定
                                 </el-button>
@@ -134,11 +135,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss" scoped>
-.el-table {
-    .nets-table-btn {
-        margin: 0 auto;
-    }
-}
-</style>