From c5c854dcf472ffa480e5dea1fbab58f22019c5fc Mon Sep 17 00:00:00 2001
From: Aaron.Liu <427787340@qq.com>
Date: Sun, 7 Mar 2021 23:10:37 +0800
Subject: [PATCH] feat: 新增SchemaSelect组件

---
 examples/router/routes.js                      |   6 ++++++
 examples/views/docs/component/schema-select.md |  55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/design/table.md            |   7 +++----
 packages/schema-page/index.vue                 |   4 ++--
 packages/schema-select/index.vue               | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/select/index.vue                      |   6 +-----
 6 files changed, 293 insertions(+), 11 deletions(-)
 create mode 100644 examples/views/docs/component/schema-select.md
 create mode 100644 packages/schema-select/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index 1e70614..76e41b8 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -95,6 +95,12 @@ const _components = [
         meta: { title: 'Schema Page 页面' },
         component: () => import('@/views/docs/component/schema-page.md'),
       },
+      {
+        path: 'schema-select',
+        name: 'schema-select',
+        meta: { title: 'Schema Select 选择器' },
+        component: () => import('@/views/docs/component/schema-select.md'),
+      },
     ],
   },
 ];
diff --git a/examples/views/docs/component/schema-select.md b/examples/views/docs/component/schema-select.md
new file mode 100644
index 0000000..62cb89e
--- /dev/null
+++ b/examples/views/docs/component/schema-select.md
@@ -0,0 +1,55 @@
+# Schema Select 方案选择器
+
+通过配置JSON Schema的方式快速生成一个选择器，与常规选择器不同的是，本选择器是表格型选择器。
+
+## 基础用法
+
+`schema`设置配置项。
+
+::: snippet `schema`设置配置项
+
+```html
+<template>
+  <z-schema-select v-model="model" size="small" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id"></z-schema-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+      schema: {
+        table: {
+          props: {
+            border: false
+          },
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    searchAPI(params) {
+      console.log('search', params);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const list = [
+            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+          ];
+          resolve([list, 37]);
+        }, 500);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
\ No newline at end of file
diff --git a/examples/views/docs/design/table.md b/examples/views/docs/design/table.md
index 2b30c87..169d4f0 100644
--- a/examples/views/docs/design/table.md
+++ b/examples/views/docs/design/table.md
@@ -1,4 +1,3 @@
-

 # 表格设计规范
 
 ## 一、表头
@@ -103,7 +102,7 @@
 
 设置title对当前功能进行描述
 
-## 五、浮动列
+## 五、浮动列
 
 ### 表格选择列
 
@@ -115,7 +114,7 @@
 
 设置快捷操作，跳转入口、快速复制
 
-## 六、表格设置
+## 六、表格设置
 
 ### 宽度
 
@@ -139,7 +138,7 @@
 
 包含层级的功能，如菜单、组织等功能，使用树形数据展示
 
-## 七、业务数据
+## 七、业务数据
 
 ### 常规数字
 
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
index a963741..631d3b1 100644
--- a/packages/schema-page/index.vue
+++ b/packages/schema-page/index.vue
@@ -51,9 +51,9 @@
       </z-schema-table>
     </div>
     <!-- 底部区域 -->
-    <div class="z-schema-page__footer">
+    <div v-if="schema.selection !== false || schema.pagination !== false" class="z-schema-page__footer">
       <slot name="pagination" v-bind="_slotScope">
-        <div v-if="selection.length > 0" class="selection-info">
+        <div v-if="schema.selection !== false && selection.length > 0" class="selection-info">
           <span>已选中</span>
           <span class="num">{{ selection.length }}</span>
           <span>项</span>
diff --git a/packages/schema-select/index.vue b/packages/schema-select/index.vue
new file mode 100644
index 0000000..dc37ec9
--- /dev/null
+++ b/packages/schema-select/index.vue
@@ -0,0 +1,226 @@
+<style lang="scss">
+.z-schema-select {
+  display: inline-block;
+}
+.z-schema-select__popper {
+  padding: 0 !important;
+}
+.z-schema-select__popper-content {
+  padding: 4px;
+}
+</style>
+
+<template>
+  <el-popover class="z-schema-select" popper-class="z-schema-select__popper" v-model="visible" trigger="click" placement="bottom-start" transition="el-zoom-in-top">
+    <template #reference>
+      <el-input
+        class="el-select__input"
+        v-model="model"
+        :size="selectSize"
+        :disabled="selectDisabled"
+        prefix-icon="el-icon-search"
+        :placeholder="selectPlaceholder"
+        @input="debouncedOnInput"
+        @focus="onInputFocus"
+        @blur="onInputBlur"
+        @mouseenter.native="inputHovering = true"
+        @mouseleave.native="inputHovering = false"
+      >
+        <template #suffix>
+          <i v-if="showClose" class="el-input__icon el-icon-circle-close" @click="onClear"></i>
+          <i v-else class="el-input__icon"></i>
+        </template>
+      </el-input>
+    </template>
+    <div class="z-schema-select__popper-content" v-clickoutside="onClickoutside">
+      <z-schema-page
+        ref="schema"
+        :value-table.sync="tableData"
+        :value-filter="valueFilter"
+        @update:value-filter="e => $emit('update:value-filter', e)"
+        :schema="selectSchema"
+        :auto="auto"
+        :api-search="apiSearch"
+      >
+        <template v-for="(item, index) in tableColumns" #[`table-cell-${item.prop}`]="{ value }">
+          <cell-highlight v-if="highlight" :value="value" :keyword="query" :key="index"></cell-highlight>
+          <template v-else>{{ value }}</template>
+        </template>
+      </z-schema-page>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import debounce from 'throttle-debounce/debounce';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+
+export default {
+  name: 'SchemaSelect',
+  directives: { Clickoutside },
+  components: {
+    CellHighlight: {
+      functional: true,
+      render(h, context) {
+        const props = context.props || {};
+        const keyword = props.keyword;
+        const value = props.value || '';
+        const reg = new RegExp(`(${keyword})`, 'g');
+        const result = `${value}`.replace(reg, '<font style="color: red;">$1</font>');
+        return h('span', { domProps: { innerHTML: result } });
+      },
+    },
+  },
+  props: {
+    value: String,
+    schema: {
+      required: true,
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    auto: {
+      type: Boolean,
+      default: true,
+    },
+    // clearable: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    // highlight: Boolean,
+    highlight: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: Boolean,
+    size: String,
+    placeholder: String,
+    labelKey: {
+      type: String,
+      default: 'label',
+    },
+    valueKey: {
+      type: String,
+      default: 'value',
+    },
+    'value-filter': {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    'api-search': Function,
+  },
+  inject: {
+    elForm: {
+      default: undefined,
+    },
+    elFormItem: {
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      model: '',
+      query: '',
+      visible: false,
+      inputHovering: false,
+      tableData: [],
+    };
+  },
+  created() {
+    this.debouncedOnInput = debounce(300, () => {
+      this.onInput();
+    });
+  },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    selectSize() {
+      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
+    },
+    selectDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    selectPlaceholder() {
+      return this.selectedLabel || this.placeholder || '请选择';
+    },
+    selectedLabel() {
+      if (this.value) {
+        const item = this.tableData.find(item => item[this.valueKey] === this.value) || {};
+        return item[this.labelKey];
+      }
+      return '';
+    },
+    selectSchema() {
+      return {
+        filter: false,
+        action: false,
+        operation: false,
+        pagination: false,
+        selection: false,
+        ...this.schema,
+        table: {
+          on: {
+            'row-click': this.onTableRowClick,
+          },
+          ...(this.schema.table || {}),
+        },
+      };
+    },
+    showClose() {
+      let hasValue = this.value !== undefined && this.value !== null && this.value !== '';
+      let criteria = this.clearable && !this.selectDisabled && this.inputHovering && hasValue;
+      return criteria;
+    },
+    tableColumns() {
+      if (this.schema) {
+        return this.schema.items;
+      }
+      return [];
+    },
+  },
+  methods: {
+    // 输入查询
+    onInput() {
+      this.query = this.model;
+      this.$refs.schema.search();
+    },
+    onInputFocus() {
+      this.model = '';
+    },
+    onInputBlur() {
+      if (!this.visible) {
+        this.model = this.selectedLabel;
+      }
+    },
+    onClickoutside() {
+      if (this.visible) {
+        this.model = this.selectedLabel;
+      }
+    },
+    // 点击表格行
+    onTableRowClick(row) {
+      this.query = '';
+      this.model = row.name;
+      this.visible = false;
+      this.$emit('input', row[this.valueKey]);
+      this.$emit('change', row);
+    },
+    // 清空
+    onClear(event) {
+      event.stopPropagation();
+      this.query = '';
+      this.model = '';
+      this.visible = false;
+      this.$emit('input', '');
+      this.$emit('clear');
+      this.$emit('change', '');
+      this.onInput();
+    },
+  },
+};
+</script>
diff --git a/packages/select/index.vue b/packages/select/index.vue
index 5163842..dded3d1 100644
--- a/packages/select/index.vue
+++ b/packages/select/index.vue
@@ -15,7 +15,7 @@
     v-on="bindEvents"
     v-bind="$attrs"
   >
-    <slot v-if="$scopedSlots.default" :item="item"></slot>
+    <slot v-if="$scopedSlots.default"></slot>
     <template v-else>
       <el-option v-for="item in optionsCurrent" :key="item.id" :label="labelFormat ? labelFormat(item) : item[labelKey]" :value="item[valueKey]" :disabled="item.disabled">
         <slot name="option" :item="item" :value="model"></slot>
@@ -63,10 +63,6 @@ export default {
       type: String,
       default: 'value',
     },
-    searchKey: {
-      type: String,
-      default: 'query',
-    },
     size: String,
     multiple: Boolean,
     sequence: Boolean,
--
libgit2 0.21.0