eoss-ui 0.8.39 → 0.8.41

package/packages/selector/src/main.vue

@@ -3,205 +3,54 @@
     v-if="isRender"
     class="es-selector"
     ref="esSelector"
-    :class="{ 'es-pointer': !readonly && !filterable }"
-    v-clickoutside="handleClose"
+    :class="{ 'is-button': button && !readonly }"
   >
     <template v-if="form">
-      <el-button v-if="button" v-bind="button" @click="openDialog">
+      <el-button v-if="button && !readonly" v-bind="button" @click="openDialog">
         <slot>
           <es-icon v-if="icon" :contents="icon"></es-icon>
           <template v-else>选择</template>
         </slot>
       </el-button>
       <template v-else>
+        <el-autocomplete
+          v-if="!(multiple && readonly)"
+          v-model="selectedLabel"
+          value-key="showname"
+          :readonly="readonly"
+          :fetch-suggestions="search"
+          :placeholder="placeholder"
+          :trigger-on-focus="false"
+          :get-label="getLabel"
+          @select="handleSelect"
+          @change="handleChange"
+        >
+          <el-button
+            v-if="!readonly"
+            slot="suffix"
+            type="text"
+            class="es-selector-btn"
+            :icon="icon"
+            @click.stop="openDialog"
+          ></el-button>
+        </el-autocomplete>
         <div
-          :class="[
-            selectorSize ? 'el-select--' + selectorSize : 'es-selector-box',
-            { 'es-selector-search': filterable }
-          ]"
-          @click.stop="toggleMenu"
+          v-if="multiple"
+          ref="tags"
+          class="es-select__tags"
+          :class="{ 'is-edit': !readonly, 'is-show': selected.length }"
         >
-          <div
-            v-if="multiple"
-            ref="tags"
-            class="el-select__tags"
-            :class="{ 'es-selector-edit': !readonly }"
+          <el-tag
+            v-for="(item, index) in selected"
+            :key="getValueKey(item)"
+            :closable="!selectorDisabled && !readonly && selected.length > min"
+            type="info"
+            disable-transitions
+            @close="deleteTag($event, item, index)"
           >
-            <div
-              v-if="collapseTags && selected.length"
-              class="es-selector-tags"
-              :class="{ 'es-selector-more': selected.length > 1 }"
-            >
-              <el-tag
-                v-for="(item, index) in selected.slice(
-                  0,
-                  collapseTags === true ? 1 : collapseTags
-                )"
-                :key="getValueKey(item)"
-                :closable="
-                  !selectorDisabled && !readonly && selected.length > min
-                "
-                type="info"
-                disable-transitions
-                @close="deleteTag($event, item, index)"
-              >
-                <span class="el-select__tags-text">{{ getLabel(item) }}</span>
-              </el-tag>
-
-              <el-tag
-                v-if="
-                  selected.length > (collapseTags === true ? 1 : collapseTags)
-                "
-                :closable="false"
-                type="info"
-                disable-transitions
-                class="es-tags-more"
-              >
-                <span class="el-select__tags-text"
-                  >+
-                  {{
-                    selected.length - (collapseTags === true ? 1 : collapseTags)
-                  }}</span
-                >
-              </el-tag>
-            </div>
-            <transition-group v-else @after-leave="resetInputHeight">
-              <el-tag
-                v-for="(item, index) in selected"
-                :key="getValueKey(item)"
-                :closable="
-                  !selectorDisabled && !readonly && selected.length > min
-                "
-                type="info"
-                disable-transitions
-                @close="deleteTag($event, item, index)"
-              >
-                <span class="el-select__tags-text">{{ getLabel(item) }}</span>
-              </el-tag>
-            </transition-group>
-          </div>
-          <div ref="reference" class="es-input__inner" v-if="readonly">
-            <template v-if="!multiple">{{ selectedLabel }}</template>
-          </div>
-          <template v-else>
-            <template v-if="multiple">
-              <el-input
-                type="text"
-                ref="reference"
-                autocomplete="off"
-                v-model="words"
-                :readonly="filterable ? false : true"
-                :id="id"
-                :placeholder="currentPlaceholder"
-                :size="selectorSize"
-                :disabled="selectorDisabled"
-                :class="{
-                  'is-focus': visible,
-                  'es-plain': plain,
-                  'es-pointer': !filterable,
-                  'es-zindex-2': focus
-                }"
-                :tabindex="tabindex"
-                v-popover:popover
-                @dblclick.native="openDialog"
-                @focus="handleFocus"
-                @blur="handleBlur"
-              >
-                <template slot="append">
-                  <el-button
-                    ref="openDialog"
-                    v-if="filterable || showButton"
-                    @click.stop="openDialog"
-                  >
-                    <slot>
-                      <es-icon v-if="icon" :contents="icon"></es-icon>
-                      <template v-else>选择</template>
-                    </slot>
-                  </el-button>
-                </template>
-              </el-input>
-              <el-input
-                v-model="selectedLabel"
-                readonly
-                :name="name"
-                type="text"
-                v-show="false"
-              ></el-input>
-            </template>
-            <el-input
-              v-else
-              v-model="selectedLabel"
-              type="text"
-              ref="reference"
-              autocomplete="off"
-              :clearable="clearable"
-              showClearIcon
-              :name="name"
-              :readonly="filterable ? false : true"
-              :active="actived"
-              :id="id"
-              :placeholder="currentPlaceholder"
-              :size="selectorSize"
-              :disabled="selectorDisabled"
-              :class="{
-                'is-focus': visible,
-                'es-plain': this.plain,
-                'es-pointer': !filterable
-              }"
-              :tabindex="tabindex"
-              @dblclick.native="openDialog"
-              @clear="handleClear"
-            >
-              <template slot="append">
-                <el-button
-                  ref="openDialog"
-                  v-if="filterable || showButton"
-                  @click.stop="openDialog"
-                >
-                  <slot>
-                    <es-icon v-if="icon" :contents="icon"></es-icon>
-                    <template v-else>选择</template>
-                  </slot>
-                </el-button>
-              </template>
-            </el-input>
-          </template>
+            <span class="el-select__tags-text">{{ getLabel(item) }}</span>
+          </el-tag>
         </div>
-        <el-popover
-          v-model="show"
-          placement="bottom-start"
-          trigger="manual"
-          popper-class="es-selector-popover"
-          :width="minWidth"
-          :queryParent="true"
-          :reference="reference"
-          :arrow-offset="20"
-        >
-          <el-scrollbar
-            tag="ul"
-            wrap-class="es-selector-dropdown__wrap"
-            view-class="es-selector-dropdown__list"
-            ref="scrollbar"
-            v-show="options.length"
-            maxHeight="228"
-          >
-            <li
-              v-for="item in options"
-              :key="item.id"
-              @click="handleSelect(item)"
-              class="es-selector-dropdown-item"
-              :class="{ 'es-selected': item.selected }"
-            >
-              <span>
-                {{ getDep(item) }}
-                {{ item[labelKey] }}
-              </span>
-            </li>
-          </el-scrollbar>
-          <p v-if="options.length == 0" class="el-select-dropdown__empty">
-            {{ noMatchText }}
-          </p>
-        </el-popover>
       </template>
     </template>
     <es-dialog
@@ -229,6 +78,8 @@
         :type="types"
         :mix="mix"
         :isShowLevel3="isShowLevel3"
+        :tree-title="treeTitle"
+        :show-switch="showSwitch"
         @tabschage="tabschage"
         @click.capture="stopd"
         @confirm="handleConfirm"
@@ -241,6 +92,7 @@
 import util from 'eoss-ui/src/utils/util.js';
 import { getSelectorOrgDetail, getSysParam } from 'eoss-ui/src/config/api.js';
 import Clickoutside from 'eoss-element/src/utils/clickoutside';
+import { throttle } from 'throttle-debounce';
 export default {
   name: 'EsSelector',
   inheritAttrs: false,
@@ -332,17 +184,17 @@ export default {
       default: -1
     },
     //是否显示搜索框
-    filterable: Boolean,
-    //搜索列表是否显示部门信息
-    showFilterListDep: {
+    filterable: {
       type: Boolean,
       default: true
     },
+    //搜索列表是否显示部门信息
+    showFilterListDep: Boolean,
     //是否根据搜索值创建新的数据
     createable: Boolean,
     showButton: Boolean,
     button: Object,
-    icon: String,
+    icon: { type: String, default: 'es-icon-sousuorenyuan' },
     active: String,
     keywords: {
       type: String,
@@ -385,16 +237,24 @@ export default {
       default: true
     },
     //弹窗关闭时是否销毁子组件
-    destroyOnClose: Boolean
+    destroyOnClose: Boolean,
+    //树结构标题
+    treeTitle: String,
+    //是否显示切换按钮
+    showSwitch: {
+      type: Boolean,
+      default: true
+    },
+    selection: [Array, String]
   },
   data() {
     return {
+      selectedLabel: '',
       selected: [],
       visible: false,
       menuVisibleOnFocus: false,
       inputHovering: false,
       styles: {},
-      words: '',
       minWidth: '',
       options: '',
       show: false,
@@ -429,29 +289,6 @@ export default {
     selectorDisabled() {
       return this.disabled || (this.elForm || {}).disabled;
     },
-    selectedLabel: {
-      get() {
-        if (this.selected) {
-          if (typeof this.selected === 'string') {
-            return this.selected;
-          } else if (util.isObject(this.selected)) {
-            return this.selected[this.labelKey];
-          } else if (Array.isArray(this.selected)) {
-            return this.selected
-              .map((item) => {
-                return typeof item === 'string' ? item : item[this.labelKey];
-              })
-              .join(',');
-          }
-        }
-        return '';
-      },
-      set(val) {
-        this.selected = [val];
-        this.words = val;
-        return val;
-      }
-    },
     currentPlaceholder() {
       if (this.selected && this.selected.length) {
         return '';
@@ -476,6 +313,9 @@ export default {
         } else {
           this.selected = [];
         }
+        if (!this.multiple && val && val.length) {
+          this.selectedLabel = this.getLabel(val[0]);
+        }
       }
     },
     selected: {
@@ -491,12 +331,6 @@ export default {
         }
       }
     },
-    words(val) {
-      if (this.emptySerach || val !== '') {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(this.handleSearch, 500);
-      }
-    },
     mix(val) {
       if (val) {
         this.getSysParam();
@@ -504,6 +338,9 @@ export default {
     }
   },
   created() {
+    this.search = throttle(500, (query, callback) => {
+      this.handleSearch(query, callback);
+    });
     this.reference = this.$refs.esSelector;
     this.mix && this.getSysParam();
   },
@@ -551,54 +388,63 @@ export default {
     getValueKey(obj) {
       return util.isObject(obj) ? obj[this.valueKey] : obj;
     },
-    toggleMenu() {
-      if (
-        !this.selectorDisabled &&
-        !this.readonly &&
-        !this.filterable &&
-        this.select
-      ) {
-        this.visible = true;
-      }
-    },
     openDialog() {
       if (!this.selectorDisabled && !this.readonly && this.select) {
         this.visible = true;
       }
     },
-    handleSearch() {
-      let options = [];
-      if (this.createable) {
-        options = [
-          {
-            [this.labelKey]: this.words,
-            [this.valueKey]: this.words
-          }
-        ];
+    handleSearch(query, callback) {
+      if (!query) return;
+      
+      let options = this.createable
+        ? [
+            {
+              [this.labelKey]: query,
+              [this.valueKey]: query
+            }
+          ]
+        : [];
+      if (!this.tree && this.selection && Array.isArray(this.selection)) {
+        let selections = this.selection.filter((item) => {
+          return item[this.labelKey].indexOf(query) > -1;
+        });
+        // selections = selections.filter((item) => {
+        //   return (
+        //     this.selected.findIndex(
+        //       (selected) => selected[this.valueKey] === item[this.valueKey]
+        //     ) === -1
+        //   );
+        // });
+        options = options.concat(selections);
       }
       if (this.filterable) {
         let params = {
           type: this.actived
         };
-        params[this.keywords] = this.words;
+        const url =
+          !this.tree && this.selection && typeof this.selection === 'string'
+            ? this.selection
+            : this.action;
+        params[this.keywords] = query;
         params = util.extend({}, params, this.where);
         util
           .ajax({
-            url: this.action,
+            url: url,
             params: params
           })
           .then((res) => {
             if (res.rCode === 0) {
-              this.options = [...options, ...res.results];
-              if (this.selected.length && this.multiple) {
-                this.selected.forEach((item) => {
-                  let i = util.indexOfObj(this.options, item, this.valueKey);
-                  if (i > -1) {
-                    this.options[i].selected = true;
-                  }
-                });
-              }
-              this.show = true;
+              const results = (res.results || [])
+              // .filter((item) => {
+              //   return (
+              //     this.selected.findIndex(
+              //       (selected) =>
+              //         selected[this.valueKey] === item[this.valueKey]
+              //     ) === -1
+              //   );
+              // });
+              options = options.concat(results);
+              callback(options);
             }
           })
           .catch((err) => {
@@ -606,30 +452,29 @@ export default {
               this.$message.error(err.message);
             }
           });
-      } else if (this.createable) {
-        this.options = options;
-        this.show = true;
-      }
-    },
-    handleFocus() {
-      if (this.filterable) {
-        this.focus = true;
+      } else {
+        callback(options);
       }
     },
-    handleBlur() {
-      this.focus = false;
-    },
     tabschage(trees, active) {
       this.$emit('tabs-change', trees, active);
     },
-    handleClose(res) {
-      if (!this.multiple && this.selected[0] === this.words) {
+    handleChange(val) {
+      if (!this.multiple) {
         this.selected = [];
+
+        this.$emit('input', []);
+        this.$emit('confirm', [], this.businessData);
       }
-      this.show = false;
+      console.log('handleChange', val);
     },
     handleSelect(res) {
-      this.words = '';
+      console.log('handleSelect', res);
+      if (!this.multiple) {
+        this.selectedLabel = this.getLabel(res);
+      } else {
+        this.selectedLabel = '';
+      }
       if (!res.selected) {
         if (this.multiple) {
           if (this.selected.length) {
@@ -669,8 +514,14 @@ export default {
       this.$emit('confirm', this.selected);
     },
     handleConfirm(res) {
-      this.visible = false;
+      console.log('handleConfirm', res);
       let val = util.isObject(res) ? [res] : res;
+      this.visible = false;
+      if (!this.multiple) {
+        this.selectedLabel = val[0] ? this.getLabel(val) : '';
+      } else {
+        this.selectedLabel = '';
+      }
       if (this.mix) {
         val.forEach((item, index) => {
           val[index]._typeName = util.getTypeName(item.stype);