From 9af92dbb02d2ac79899f82c3abdf86d28c510886 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Tue, 16 Jun 2020 19:50:45 +0800
Subject: [PATCH] feat: 新增筛选组件

---
 examples/router/routes.js               | 12 ++++++++++++
 examples/views/docs/component/filter.md | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/filter/index.vue               | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 190 insertions(+), 0 deletions(-)
 create mode 100644 examples/views/docs/component/filter.md
 create mode 100644 packages/filter/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index 0c3b2d1..11793c8 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -31,11 +31,23 @@ const _components = [
         component: () => import('@/views/docs/component/form.md'),
       },
       {
+        path: 'filter',
+        name: 'filter',
+        meta: { title: 'Filter 筛选' },
+        component: () => import('@/views/docs/component/filter.md'),
+      },
+      {
         path: 'table',
         name: 'table',
         meta: { title: 'Table 表格' },
         component: () => import('@/views/docs/component/table.md'),
       },
+      {
+        path: 'scheme',
+        name: 'scheme',
+        meta: { title: 'Scheme 方案' },
+        component: () => import('@/views/docs/component/scheme.md'),
+      },
     ],
   },
 ];
diff --git a/examples/views/docs/component/filter.md b/examples/views/docs/component/filter.md
new file mode 100644
index 0000000..c3edc5a
--- /dev/null
+++ b/examples/views/docs/component/filter.md
@@ -0,0 +1,85 @@
+# Filter 筛选
+
+根据JSON Scheme配置自动生成一个筛选条件表单
+
+## 基础用法
+
+配置`list`属性设置JSON Scheme配置列表
+
+::: snippet 通过`list`配置项目
+
+```html
+<template>
+  <div>
+    <pre class="demo-model">{{ model }}</pre>
+    <z-filter v-model="model" :list="list" @search="onSearch" @reset="onReset"></z-filter>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: {},
+      list: [
+        { type: 'el-input', label: '姓名', key: 'name' },
+        { type: 'el-input', label: '年龄', key: 'age' },
+        { type: 'el-input', label: '省', key: 'province' },
+        { type: 'el-input', label: '市', key: 'city' },
+        { type: 'el-input', label: '区', key: 'area' },
+        { type: 'el-input', label: '地址', key: 'address' },
+      ]
+    }
+  },
+  methods: {
+    onSearch(params) {
+      console.log(JSON.parse(JSON.stringify(params)));
+    },
+    onReset() {
+      console.log('reset');
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 展示数量
+
+默认展示数量为`3`个，可以通过配置而改变
+
+::: snippet 设置`visibleNum`改变默认展示数量的大小，`span`改变每一项的占位数量
+
+```html
+<template>
+  <z-filter :list="list" :visibleNum="2" :span="8" size="mini"></z-filter>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { type: 'el-input', label: '姓名', key: 'name' },
+        { type: 'el-input-number', label: '年龄', key: 'age', style: { width: '100%' }, props: { min: 0 } },
+        { type: 'el-input', label: '省', key: 'province' },
+        { type: 'el-input', label: '市', key: 'city' },
+        { type: 'el-input', label: '区', key: 'area' },
+        { type: 'el-input', label: '地址', key: 'address' },
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+list | JSON Scheme配置项列表 | Array | - | []
diff --git a/packages/filter/index.vue b/packages/filter/index.vue
new file mode 100644
index 0000000..a3fe18c
--- /dev/null
+++ b/packages/filter/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size">
+    <div slot="$operation" class="zee-filter__button-group">
+      <el-button-group :size="size">
+        <el-button type="primary" @click="handleSearch"><span>查询</span></el-button>
+        <el-button @click="handleReset"><span>重置</span></el-button>
+        <el-button v-if="showCollapsed" @click="collapsed = !collapsed">
+          <span>{{ collapsed ? '展开' : '收起' }}</span>
+          <!-- <i :class="`el-icon-arrow-${collapsed ? 'down' : 'up'}`" class="el-icon--right"></i> -->
+        </el-button>
+      </el-button-group>
+    </div>
+  </z-form>
+</template>
+
+<script>
+export default {
+  name: 'Filter',
+  props: {
+    value: Object,
+    list: Array,
+    labelWidth: {
+      type: String,
+      default: '80px',
+    },
+    size: {
+      type: String,
+      default: 'small',
+    },
+    span: {
+      type: Number,
+      default: 6,
+    },
+    visibleNum: {
+      type: Number,
+      default: 3,
+    },
+  },
+  data() {
+    return {
+      collapsed: true,
+      model: this.value || {},
+    };
+  },
+  watch: {
+    value(val = {}) {
+      this.model = val;
+    },
+    model(val) {
+      this.$emit('input', val);
+    },
+  },
+  computed: {
+    formattedList() {
+      return [...this.list, { key: '$operation', label: '', labelWidth: '0px', span: !this.collapsed ? 24 : undefined }];
+    },
+    showCollapsed() {
+      const { list, visibleNum } = this;
+      return list.length > visibleNum;
+    },
+  },
+  methods: {
+    // 渲染列表项class
+    colVisibleRender(item, index) {
+      if (this.collapsed) {
+        const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2;
+        return index > visibleNumber && index < this.list.length ? 'zee-filter__item hidden' : 'zee-filter__item';
+      }
+      return 'zee-filter__item';
+    },
+    // 搜索
+    handleSearch() {
+      this.$emit('search', this.model);
+    },
+    // 重置
+    handleReset() {
+      this.model = {};
+      this.$emit('reset');
+    },
+  },
+};
+</script>
+
+<style>
+.zee-filter__item.hidden {
+  display: none;
+}
+.zee-filter__button-group {
+  width: 100%;
+  box-sizing: border-box;
+  text-align: right;
+}
+</style>
--
libgit2 0.21.0