@v2coding/ui 0.1.0

package/src/components/table/table.select.vue

@@ -0,0 +1,165 @@
+<template>
+  <ui-form
+    ref="form"
+    class="ui-table-select"
+    :class="{'has-reset': reset}"
+    v-bind="$attrs"
+    v-on="listeners"
+    inline
+    :label-width="labelWidth"
+    @submit="onSubmit"
+    @ready="onReady"
+  >
+    <slot></slot>
+    <slot name="submit-item">
+      <el-form-item class="submit-item">
+        <el-button type="primary" icon="el-icon-search" native-type="submit">查询</el-button>
+        <el-button v-if="reset" icon="el-icon-refresh-left" native-type="reset">重置</el-button>
+      </el-form-item>
+    </slot>
+    <slot name="append"></slot>
+    <div class="fill"></div>
+    <slot name="end"></slot>
+  </ui-form>
+</template>
+<script>
+  import TableSelectItem from './table.select.item';
+
+  const SEARCH_PREFIX = 'select';
+  const SORT_PREFIX = 'sort';
+
+  export default {
+    name: 'ui-table-select',
+    inject: {
+      uiTable: {
+        default: null,
+      },
+    },
+    props: {
+      reset: {
+        type: Boolean,
+        default: false,
+      },
+      beforeSearch: {
+        type: Function,
+        default: (param) => param,
+      },
+      labelWidth: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      listeners() {
+        // eslint-disable-next-line
+        const {submit, ready, ...listeners} = this.$listeners;
+        return listeners;
+      },
+    },
+    created() {
+      this.uiTable && this.uiTable.registerSearchBar(this);
+    },
+    methods: {
+      onReady() {
+        this.$emit('ready');
+        if (this.uiTable && this.uiTable.initLoad) {
+          this.onSubmit(this.$refs.form.getValues());
+        }
+      },
+      onSubmit(formData) {
+        let searchParam = this.getSearchParams();
+        searchParam = this.beforeSearch(searchParam, formData);
+        if (!searchParam) {
+          return;
+        }
+        if (this.uiTable) {
+          this.uiTable.resetTableParams();
+          this.uiTable.reload();
+        }
+        this.$emit('submit', formData);
+        this.$emit('search', {...searchParam});
+      },
+      getValues() {
+        return this.$refs.form.getValues();
+      },
+      getSearchParams() {
+        const searchItems = this.getSearchItem();
+        return searchItems.reduce((prev, item) => {
+          const val = item.fieldValue;
+          const value = Object.is(undefined, val) ? val : String(val);
+          if (['null', null, '', undefined].includes(value)) {
+            return prev;
+          }
+          if (item.select === 'range') {
+            this.setRangeSearchItem(prev, item);
+          } else {
+            // 注: 若是 sort 则 params[item.name] 需要返回 asc/desc (ui-table-select-item 的值)
+            // search.name.eq=xxxxx
+            prev[this.getSearchItemKey(item)] = val;
+          }
+          return prev;
+        }, {});
+      },
+      getSearchItem() {
+        const listSearchItem = (items) => {
+          return items.reduce((results, item) => {
+            if (item.$options.name === TableSelectItem.name) {
+              if (item.ignore === false) {
+                results.push(item);
+              }
+            } else {
+              results.push(...listSearchItem(item.$children || []));
+            }
+            return results;
+          }, []);
+        };
+        return listSearchItem(this.$children);
+      },
+      getSearchItemKey(searchItem) {
+        if (searchItem.select) {
+          return [SEARCH_PREFIX, searchItem.name, searchItem.select].join('.');
+        }
+        if (searchItem.sort) {
+          return [SORT_PREFIX, searchItem.name].join('.');
+        }
+        return searchItem.name;
+      },
+      setRangeSearchItem(params, item) {
+        const [minValue, maxValue] = item.fieldValue.split(',');
+        const [minAppendKey, maxAppendKey] = item.range;
+        const {min, max} = item.rangeNames || {};
+        params[`${SEARCH_PREFIX}.${min || item.name}.${minAppendKey}`] = minValue;
+        params[`${SEARCH_PREFIX}.${max || item.name}.${maxAppendKey}`] = maxValue;
+      },
+    },
+  };
+</script>
+<style>
+  .ui-table-select {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .ui-table-select .el-row {
+    width: 100%;
+  }
+
+  .ui-table-select .fill {
+    flex: 1;
+  }
+
+  .ui-table-select .el-form-item {
+    margin-bottom: 10px;
+  }
+
+  .ui-table-select .el-form-item:last-child {
+    margin-right: 0;
+  }
+
+
+  .ui-table-select .el-form-item,
+  .ui-table-select .el-form-item.el-form-item--mini {
+    margin-bottom: 10px;
+  }
+</style>