From 036d3f05664afa75c2a5b44853de38c6a061e879 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Tue, 23 Jun 2020 17:19:51 +0800
Subject: [PATCH] feat: 新增选择器

---
 examples/router/routes.js               |  11 +++++++++++
 examples/views/docs/component/select.md | 461 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/scheme/index.vue               |   2 +-
 packages/select/index.vue               | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 742 insertions(+), 1 deletion(-)
 create mode 100644 examples/views/docs/component/select.md
 create mode 100644 packages/select/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index 11793c8..3fdcbdc 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -22,6 +22,17 @@ const _guides = [
 
 const _components = [
   {
+    group: '基础组件',
+    children: [
+      {
+        path: 'select',
+        name: 'select',
+        meta: { title: 'Select 选择器' },
+        component: () => import('@/views/docs/component/select.md'),
+      },
+    ],
+  },
+  {
     group: '业务组件',
     children: [
       {
diff --git a/examples/views/docs/component/select.md b/examples/views/docs/component/select.md
new file mode 100644
index 0000000..e4d3695
--- /dev/null
+++ b/examples/views/docs/component/select.md
@@ -0,0 +1,461 @@
+# Select 选择器
+
+可指定`url`或者`options`，生成远程加载或静态选择的选择器
+
+## 基础用法
+
+设置一个静态选择器
+
+<div class="code-snippet-box">
+
+::: snippet `options`设置选择器选项
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model">{{ model }}</pre>
+    <z-select v-model="model" :options="options"></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+      options: [
+        { name: '张三', code: 'zs' },
+        { name: '李四', code: 'ls' }
+      ],
+    }
+  } 
+}
+</script>
+```
+
+:::
+
+::: snippet 自定义选项
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model">{{ model }}</pre>
+    <z-select v-model="model" :options="options" :labelFormat="labelFormat">
+      <template #default="{ item, value }">
+        <div class="custom-option" :class="{ checked: item.code === value }">
+          <span class="name">{{ item.name }}</span>
+          <el-tag class="code" type="success" size="mini">{{ item.code }}</el-tag>
+        </div>
+      </template>
+      <template #empty>
+        <el-alert title="无匹配数据" type="error" :closable="false" />
+      </template>
+      <template #prefix>
+        <i class="el-icon-search"></i>
+      </template>
+    </z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+      options: [
+        { name: '张三', code: 'zs' },
+        { name: '李四', code: 'ls' }
+      ],
+    }
+  },
+  methods: {
+    labelFormat(item) {
+      return `[${item.name}]`;
+    }
+  }
+}
+</script>
+
+<style>
+.custom-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.custom-option.checked {
+  color: deepskyblue;
+}
+.name {
+  font-weight: bold;
+}
+</style>
+```
+
+:::
+
+</div>
+
+## 设置多选
+
+支持多选
+
+::: snippet `multiple`设置多选
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model.length > 0">{{ model }}</pre>
+    <z-select v-model="model" :options="options" multiple @change="onChange"></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      options: [
+        { name: '张三', code: 'zs' },
+        { name: '李四', code: 'ls' },
+        { name: '王五', code: 'ww', disabled: true }
+      ],
+    }
+  },
+  methods: {
+    onChange(value, selected) {
+      console.log(JSON.parse(JSON.stringify(value)), JSON.parse(JSON.stringify(selected)));
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 绑定对象
+
+可以直接以对象作为绑定值
+
+<div class="code-snippet-box">
+
+::: snippet `raw`设置为原值模式，默认以`valueKey`为主键
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model">{{ model }}</pre>
+    <z-select v-model="model" :options="options" raw></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      options: [
+        { name: '张三', code: 'zs' },
+        { name: '李四', code: 'ls' },
+      ],
+    }
+  } 
+}
+</script>
+```
+
+:::
+
+::: snippet 支持多选
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model.length > 0">{{ model }}</pre>
+    <z-select v-model="model" :options="options" multiple raw></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      options: [
+        { name: '张三', code: 'zs' },
+        { name: '李四', code: 'ls' },
+      ],
+    }
+  } 
+}
+</script>
+```
+
+:::
+
+</div>
+
+## 远程加载
+
+可以通过设置`queryApi`自定义查询接口，也可以设置`url`及`http`进行内置格式的查询，其中`http`可在组件库全局配置
+
+<div class="code-snippet-box">
+
+::: snippet `url`设置加载地址，`http`设置请求库
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model">{{ model }}</pre>
+    <z-select v-model="model" url="/user/select" :http="$http"></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+    }
+  },
+}
+</script>
+```
+
+:::
+
+::: snippet `queryApi`自定义查询接口
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model">{{ model }}</pre>
+    <z-select v-model="model" :queryApi="queryAPI"></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+    }
+  },
+  methods: {
+    queryAPI(val) {
+      console.log(val);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve([
+            { name: '王五', code: 'ww' },
+            { name: '赵六', code: 'zl' },
+          ]);
+        }, 1000);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
+</div>
+
+<div class="code-snippet-box">
+
+::: snippet `auto`设置自动加载一次数据
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model.length">{{ model }}</pre>
+    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple auto></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: ['wq', 'cs'],
+      options: [
+        { name: '王七', code: 'wq' },
+        { name: '陈拾', code: 'cs' },
+      ]
+    }
+  },
+  methods: {
+    queryAPI(val) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve([
+            { name: '王五', code: 'ww' },
+            { name: '赵六', code: 'zl' },
+          ]);
+        }, 1000);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
+::: snippet `update`设置每次打开下拉框都保持最新数据
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model.length">{{ model }}</pre>
+    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple update></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: ['wq', 'cs'],
+      options: [
+        { name: '王七', code: 'wq' },
+        { name: '陈拾', code: 'cs' },
+      ]
+    }
+  },
+  methods: {
+    queryAPI(val) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve([
+            { name: '王五', code: 'ww' },
+            { name: '赵六', code: 'zl' },
+          ]);
+        }, 1000);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
+</div>
+
+<div class="code-snippet-box">
+
+::: snippet 单选时，当前选中项不包含在远程数据源中，可以通过`options`设置默认选项
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model">{{ model }}</pre>
+    <z-select v-model="model" :queryApi="queryAPI" :options="options" auto></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: 'wq',
+      options: [
+        { name: '王七', code: 'wq' }
+      ]
+    }
+  },
+  methods: {
+    queryAPI(val) {
+      return new Promise(resolve => {
+        this.label = '';
+        setTimeout(() => {
+          resolve([
+            { name: '王五', code: 'ww' },
+            { name: '赵六', code: 'zl' },
+          ]);
+        }, 1000);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
+::: snippet 多选时，当前选中项不包含在远程数据源中，可以通过`options`设置默认选项
+
+```html
+<template>
+  <div>
+    <pre class="demo-model" v-if="model.length">{{ model }}</pre>
+    <z-select v-model="model" :queryApi="queryAPI" :options="options" multiple auto></z-select>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: ['wq', 'cs'],
+      options: [
+        { name: '王七', code: 'wq' },
+        { name: '陈拾', code: 'cs' },
+      ]
+    }
+  },
+  methods: {
+    queryAPI(val) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve([
+            { name: '王五', code: 'ww' },
+            { name: '赵六', code: 'zl' },
+          ]);
+        }, 1000);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
+</div>
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value | 值 | String, Number, Boolean, Object, Array | - | -
+placeholder | 占位符 | String | - | 请选择
+options | 选项列表 | Array | - | []
+labelFormat | 标签格式化 | Function | - | -
+labelKey | 标签字段名 | String | - | name
+valueKey | 值字段名 | String | - | code
+searchKey | 搜索字段名 | String | - | query
+size | 大小 | String | mini、small、large | mini
+multiple | 多选 | Boolean | - | false
+disabled | 禁用 | Boolean | - | false
+clearable | 可清除 | Boolean | - | true
+filterable | 可搜索 | Boolean | - | true
+reserveKeyword | 保留当前的搜索关键词 | Boolean | - | true
+selectProps | Element Select组件参数 | Object | - | -
+raw | 是否绑定原始对象 | Boolean | - | false
+url | 远程搜索URL | String | - | -
+http | HTTP请求库 | Function | - | -
+queryApi | 自定义接口 | Function | - | -
+triggerSize | 触发远程搜索的字段长度 | Number | - | 0
+auto | 初始化时自动查询数据 | Boolean | - | false
+update | 点开下拉框时更新数据 | Boolean | - | false
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+change | 改变选中 | 值，选中项数据
\ No newline at end of file
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index f861f49..65404f2 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -216,7 +216,7 @@ export default {
     auto: Boolean,
     realSelection: Boolean,
     url: String, // 请求地址
-    http: [Function, Promise], // http库
+    http: Function, // http库
     alias: Object, // 别名配置
   },
   data() {
diff --git a/packages/select/index.vue b/packages/select/index.vue
new file mode 100644
index 0000000..e749c58
--- /dev/null
+++ b/packages/select/index.vue
@@ -0,0 +1,269 @@
+<template>
+  <el-select
+    class="zee__select"
+    :disabled="disabled"
+    :value-key="valueKey"
+    :filterable="filterable"
+    :remote="remote"
+    :reserve-keyword="reserveKeyword"
+    :clearable="clearable"
+    :placeholder="placeholder"
+    :remote-method="remoteMethod"
+    :loading="loading"
+    :size="size"
+    :multiple="multiple"
+    v-model="model"
+    v-on="bindEvents"
+    v-bind="selectProps"
+  >
+    <el-option v-for="item in optionsCurrent" :key="item.id" :label="labelFormat ? labelFormat(item) : item[labelKey]" :value="raw ? item : item[valueKey]" :disabled="item.disabled">
+      <slot :item="item" :value="model"></slot>
+    </el-option>
+    <slot name="empty" slot="empty"></slot>
+    <template slot="prefix">
+      <i v-if="initing" class="el-icon-loading"></i>
+      <slot v-else name="prefix"></slot>
+    </template>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'Select',
+  props: {
+    value: [String, Number, Boolean, Object, Array],
+    // 占位符
+    placeholder: {
+      type: String,
+      default: '请选择',
+    },
+    // 选项数组
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    // 选中Label格式化方法
+    labelFormat: Function,
+    labelKey: {
+      type: String,
+      default: 'name',
+    },
+    valueKey: {
+      type: String,
+      default: 'code',
+    },
+    searchKey: {
+      type: String,
+      default: 'query',
+    },
+    size: {
+      type: String,
+      default: 'mini',
+    },
+    multiple: Boolean,
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    filterable: {
+      type: Boolean,
+      default: true,
+    },
+    reserveKeyword: {
+      type: Boolean,
+      default: true,
+    },
+    selectProps: Object,
+    // 保持原值，即绑定值为对象
+    raw: Boolean,
+    // 远程搜索URL
+    url: String,
+    // HTTP请求库
+    http: Function,
+    // 自定义接口
+    queryApi: Function,
+    // 触发远程搜索的字段长度
+    triggerSize: {
+      type: Number,
+      default: 0,
+    },
+    auto: Boolean,
+    update: Boolean,
+  },
+  data() {
+    return {
+      model: this.value,
+      optionsDataSource: this.fixOptions(this.options),
+      optionsCurrent: this.fixOptions(this.options),
+      loading: false,
+      initing: false,
+    };
+  },
+  created() {
+    if (this.remote && this.auto) {
+      this.initing = true;
+      this.remoteMethod();
+    }
+  },
+  watch: {
+    value(val) {
+      this.model = val;
+    },
+  },
+  computed: {
+    request() {
+      return this.http || this.zHttp;
+    },
+    remote() {
+      return Boolean(this.queryApi || (this.url && (this.http || this.zHttp)));
+    },
+    bindEvents() {
+      let _events = {};
+      Object.keys(this.$listeners || {}).forEach(key => {
+        // 非绑定对象的情况下，通过change事件向上emit出当前选中项
+        if (key === 'change' && !this.raw) {
+          _events[key] = value => {
+            this.$emit(
+              key,
+              value,
+              this.optionsCurrent.reduce((result, item) => {
+                if (value.includes(item[this.valueKey])) {
+                  result.push(item);
+                }
+                return result;
+              }, []),
+            );
+          };
+        } else {
+          _events[key] = e => {
+            this.$emit(key, e);
+          };
+        }
+      });
+      return {
+        ..._events,
+        'visible-change': show => {
+          if (this.remote && this.update && show) {
+            this.remoteMethod();
+          }
+          _events['visible-change'] && _events['visible-change'](show);
+        },
+      };
+    },
+  },
+  methods: {
+    // 修复当前数据源包含当前选中项
+    fixOptions(list) {
+      if (!this.value || (this.value instanceof Array && this.value.length === 0) || (this.value instanceof Object && Object.keys(this.value).length === 0)) {
+        return list;
+      }
+      if (this.raw) {
+        // 绑定为对象值时修复默认项
+        let fixOptions = [];
+        let defaultOptions = [];
+        if (this.multiple) {
+          fixOptions = [...this.value];
+          this.options.forEach(item => {
+            if (this.value.find(i => i[this.valueKey] === item[this.valueKey])) {
+              defaultOptions.push(item);
+            }
+          });
+        } else {
+          fixOptions = [this.value];
+          this.options.forEach(item => {
+            if (item[this.valueKey] === this.value[this.valueKey]) {
+              defaultOptions.push(item);
+            }
+          });
+        }
+        let hash = {};
+        const options = [...fixOptions, ...defaultOptions, ...list].reduce((result, item) => {
+          if (!hash[item[this.valueKey]]) {
+            // 如果当前元素的key值没有在hash对象里，则可放入最终结果数组
+            hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象
+            result.push(item); // 把当前元素放入结果数组
+          }
+          return result; // 返回结果数组
+        }, []);
+        return options;
+      } else {
+        // 绑定为非对象值时修复默认项
+        let defaultOptions = [];
+        if (this.multiple) {
+          this.options.forEach(item => {
+            if (this.value.find(i => i === item[this.valueKey])) {
+              defaultOptions.push(item);
+            }
+          });
+        } else {
+          const targetOption = this.options.find(item => item[this.valueKey] === this.value);
+          if (targetOption) {
+            defaultOptions = [targetOption];
+          }
+        }
+        let hash = {};
+        const options = [...defaultOptions, ...list].reduce((result, item) => {
+          if (!hash[item[this.valueKey]]) {
+            // 如果当前元素的key值没有在hash对象里，则可放入最终结果数组
+            hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象
+            result.push(item); // 把当前元素放入结果数组
+          }
+          return result; // 返回结果数组
+        }, []);
+        return options;
+      }
+    },
+    // 远程加载
+    remoteMethod(val = '') {
+      const searchText = val.trim();
+      if (searchText.length >= this.triggerSize) {
+        this.loading = true;
+        let requestPrimise;
+        if (this.queryApi) {
+          requestPrimise = this.queryApi(searchText);
+        } else {
+          requestPrimise = this.request({
+            url: this.url,
+            method: 'get',
+            params: searchText ? { [this.searchKey]: searchText } : {},
+          });
+        }
+        requestPrimise
+          .then(list => {
+            const options = this.fixOptions(list);
+            this.optionsDataSource = options;
+            this.optionsCurrent = options;
+            // 获取到选项数据源时刷新绑定显示值
+            this.model = undefined;
+            this.$nextTick(() => {
+              this.model = this.value;
+            });
+          })
+          .finally(() => {
+            this.loading = false;
+            this.initing = false;
+          });
+      } else {
+        this.optionsCurrent = this.optionsDataSource.filter(item => {
+          return item[this.labelKey].includes(val);
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.zee__select {
+  .el-input__prefix {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-icon-loading {
+      font-size: 16px;
+    }
+  }
+}
+</style>
--
libgit2 0.21.0