eoss-ui 0.3.97

package/packages/selector/src/main.vue

@@ -0,0 +1,588 @@
+<template>
+  <div
+    class="es-selector"
+    ref="esSelector"
+    :class="{ 'es-pointer': !readonly && !filterable }"
+    v-clickoutside="handleClose"
+  >
+    <div
+      :class="[
+        selectorSize ? 'el-select--' + selectorSize : 'es-selector-box',
+        { 'es-selector-search': filterable }
+      ]"
+      @click.stop="toggleMenu"
+    >
+      <div
+        v-if="multiple"
+        ref="tags"
+        class="el-select__tags"
+        :class="{ 'es-selector-edit': !readonly }"
+      >
+        <div
+          v-if="collapseTags && selected.length"
+          class="es-selector-tags"
+          :class="{ 'es-selector-more': selected.length > 1 }"
+        >
+          <el-tag
+            :closable="!selectorDisabled && !readonly"
+            type="info"
+            disable-transitions
+            @close="deleteTag($event, selected[0])"
+          >
+            <span class="el-select__tags-text">
+              {{ isObject(selected[0]) ? selected[0][labelKey] : selected[0] }}
+            </span>
+          </el-tag>
+          <el-tag
+            v-if="selected.length > 1"
+            :closable="false"
+            type="info"
+            disable-transitions
+            class="es-tags-more"
+          >
+            <span class="el-select__tags-text"
+              >+ {{ selected.length - 1 }}</span
+            >
+          </el-tag>
+        </div>
+        <transition-group @after-leave="resetInputHeight">
+          <el-tag
+            v-for="(item, index) in selected"
+            :key="getValueKey(item)"
+            :closable="!selectorDisabled && !readonly"
+            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="multiple ? '-1' : null"
+            v-popover:popover
+            @dblclick.native="openDialog"
+            @keyup.enter.native="handleSearch"
+            @focus="handleFocus"
+            @blur="handleBlur"
+          >
+            <template slot="append">
+              <el-button
+                ref="openDialog"
+                v-if="filterable && showButton"
+                @click.stop="openDialog"
+                >选择</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"
+          :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="multiple ? '-1' : null"
+          @dblclick.native="openDialog"
+          @keyup.enter.native="handleSearch"
+        >
+          <template slot="append">
+            <el-button
+              ref="openDialog"
+              v-if="filterable && showButton"
+              @click.stop="openDialog"
+              >选择</el-button
+            >
+          </template>
+        </el-input>
+      </template>
+    </div>
+    <el-popover
+      v-model="show"
+      placement="bottom-start"
+      trigger="manual"
+      :width="minWidth"
+    >
+      <el-scrollbar
+        tag="ul"
+        wrap-class="es-selector-dropdown__wrap"
+        view-class="es-selector-dropdown__list"
+        ref="scrollbar"
+        v-show="options.length"
+      >
+        <li
+          v-for="item in options"
+          :key="item.id"
+          @click="handleSelect(item)"
+          class="es-selector-dropdown-item"
+          :class="{ 'es-selected': item.selected }"
+        >
+          <span>{{ item[labelKey] }}</span>
+        </li>
+      </el-scrollbar>
+      <p v-if="options.length == 0" class="el-select-dropdown__empty">
+        {{ noMatchText }}
+      </p>
+    </el-popover>
+    <es-dialog
+      v-if="!readonly"
+      :title="title"
+      :visible.sync="visible"
+      :width="width"
+      :css="false"
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      class="es-selector-dialog"
+    >
+      <es-selector-panel
+        v-model="selected"
+        v-bind="$attrs"
+        :multiple="multiple"
+        width="100%"
+        height="100%"
+        :value-key="valueKey"
+        :label-key="labelKey"
+        :host="host"
+        :type="types"
+        :mix="mix"
+        :isShowLevel3="isShowLevel3"
+        @click.capture="stopd"
+        @confirm="handleConfirm"
+        @cancel="handleCancel"
+      ></es-selector-panel>
+    </es-dialog>
+  </div>
+</template>
+<script>
+import util from 'eoss-ui/src/utils/util.js';
+import { getSelectorOrgDetail } from 'eoss-ui/src/config/api.js';
+import Clickoutside from 'eoss-element/src/utils/clickoutside';
+export default {
+  name: 'EsSelector',
+  inheritAttrs: false,
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+  directives: { Clickoutside },
+  props: {
+    isShowLevel3: {
+      type: Boolean,
+      default: true
+    },
+    value: [Array, Object],
+    action: {
+      type: String,
+      default: getSelectorOrgDetail
+    },
+    host: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: '公用选择器'
+    },
+    width: {
+      type: String,
+      default: '900px'
+    },
+    height: {
+      type: String,
+      default: '560px'
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    valueKey: {
+      type: String,
+      default: 'showid'
+    },
+    labelKey: {
+      type: String,
+      default: 'showname'
+    },
+    valueType: {
+      type: String,
+      default: 'object'
+    },
+    size: String,
+    id: String,
+    disabled: Boolean,
+    clearable: Boolean,
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    autocomplete: {
+      type: String,
+      default: 'off'
+    },
+    name: String,
+    readonly: Boolean,
+    collapseTags: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    plain: Boolean,
+    types: {
+      type: Array,
+      default() {
+        return ['enterprise', 'person'];
+      }
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    },
+    active: String,
+    keywords: {
+      type: String,
+      default: 'namelike'
+    },
+    //输入框搜索参数
+    where: {
+      type: Object,
+      default() {
+        return {
+          mid: '0-0-0-0-0'
+        };
+      }
+    },
+    mix: {
+      type: Boolean,
+      default: false
+    },
+    noMatchText: {
+      type: String,
+      default: '无匹配数据'
+    }
+  },
+  data() {
+    return {
+      selected: [],
+      visible: false,
+      menuVisibleOnFocus: false,
+      inputHovering: false,
+      style: {},
+      words: '',
+      minWidth: '',
+      options: '',
+      show: false,
+      focus: false
+    };
+  },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    actived() {
+      if (this.active) {
+        return this.active;
+      }
+      return this.types[0];
+    },
+    selectorSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    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 '';
+      } else if (this.filterable) {
+        return '输入关键字按回车搜索';
+      } else {
+        return this.placeholder;
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val !== '' && val !== undefined) {
+          if (util.isObject(val)) {
+            this.selected = [val];
+          } else {
+            this.selected = val;
+          }
+        }
+      }
+    },
+    selected: {
+      deep: true,
+      handler(val) {
+        this.$emit('change', val);
+        if (this.multiple) {
+          this.resetInputHeight();
+        }
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.resetInputHeight();
+    if (this.filterable) {
+      this.$nextTick(() => {
+        this.$refs.reference &&
+          (this.minWidth = this.$refs.reference.$el.children[0].offsetWidth);
+      });
+    }
+    if (this.$refs.openDialog) {
+      this.$refs.openDialog.$el.parentNode.addEventListener('click', () => {
+        this.openDialog();
+      });
+    }
+  },
+  methods: {
+    isObject(obj) {
+      return util.isObject(obj);
+    },
+    getValueKey(obj) {
+      return util.isObject(obj) ? obj[this.valueKey] : obj;
+    },
+    toggleMenu() {
+      if (!this.selectorDisabled && !this.readonly && !this.filterable) {
+        this.visible = true;
+      }
+    },
+    openDialog() {
+      if (!this.selectorDisabled && !this.readonly) {
+        this.visible = true;
+      }
+    },
+    handleSearch() {
+      if (this.filterable) {
+        let params = {
+          type: this.actived
+        };
+        params[this.keywords] = this.words;
+        params = util.extend({}, params, this.where);
+        util
+          .ajax({
+            url: this.action,
+            params: params
+          })
+          .then(res => {
+            if (res.rCode === 0) {
+              this.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;
+            }
+          })
+          .catch(err => {
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    handleFocus() {
+      if (this.filterable) {
+        this.focus = true;
+      }
+    },
+    handleBlur() {
+      this.focus = false;
+    },
+    handleClose(res) {
+      if (!this.multiple && this.selected[0] === this.words) {
+        this.selected = [];
+      }
+      this.show = false;
+    },
+    handleSelect(res) {
+      this.words = '';
+      if (!res.selected) {
+        if (this.multiple) {
+          if (this.selected.length) {
+            if (!res.selected) {
+              res.selected = true;
+              this.selected.push(res);
+              this.selected = util.arrUnique(this.selected, this.valueKey);
+            }
+          } else {
+            res.selected = true;
+            this.selected = [res];
+          }
+        } else {
+          res.selected = true;
+          if (Array.isArray(this.selected)) {
+            if (
+              this.selected[0] &&
+              typeof this.selected[0] !== 'string' &&
+              this.selected[0][this.valueKey] !== res[this.valueKey]
+            ) {
+              this.selected[0].selected = false;
+            }
+            this.selected = [res];
+          } else {
+            if (
+              this.selected &&
+              typeof this.selected !== 'string' &&
+              this.selected[this.valueKey] !== res[this.valueKey]
+            ) {
+              this.selected.selected = false;
+            }
+            this.selected = [res];
+          }
+        }
+      }
+      this.$emit('input', this.selected);
+      this.$emit('confirm', this.selected);
+    },
+    handleConfirm(res) {
+      this.visible = false;
+      if (util.isObject(res)) {
+        this.$emit('input', [res]);
+      } else {
+        this.$emit('input', res);
+      }
+      this.$emit('confirm', res);
+      let inputChildNodes = this.$refs.reference.$el.childNodes;
+      let input = [].filter.call(
+        inputChildNodes,
+        item => item.tagName === 'INPUT'
+      )[0];
+      if (input) {
+        input.focus();
+        input.blur();
+      }
+    },
+    handleCancel() {
+      this.visible = false;
+      this.$emit('cancel');
+    },
+    deleteTag(event, item, index) {
+      event;
+      item;
+      index = index === undefined ? 0 : index;
+      this.selected.splice(index, 1);
+    },
+    resetInputHeight() {
+      if (this.collapseTags) return;
+      this.$nextTick(() => {
+        if (!this.$refs.reference) return;
+        const sizeInMap = this.initialInputHeight || 40;
+        let height = '';
+        if (this.selected !== undefined && this.selected.length === 0) {
+          height = sizeInMap + 'px';
+        } else if (this.$refs.tags) {
+          if (this.$refs.tags.clientHeight > sizeInMap) {
+            height += this.$refs.tags.clientHeight + 2 + 'px';
+          } else {
+            height = sizeInMap + 'px';
+          }
+        }
+        if (height) {
+          if (this.readonly) {
+            this.$refs.reference.style.height = height;
+          } else {
+            let inputChildNodes = this.$refs.reference.$el.childNodes;
+            let input = [].filter.call(
+              inputChildNodes,
+              item => item.tagName === 'INPUT'
+            )[0];
+            input.style.height = height;
+          }
+        }
+      });
+    },
+    getLabel(res) {
+      let tag = '';
+      if (this.mix) {
+        tag = util.getTypeName(res.stype);
+      }
+      return (
+        tag +
+        (res[this.labelKey]
+          ? res[this.labelKey]
+          : res.label || res[this.valueKey])
+      );
+    }
+  }
+};
+</script>

package/packages/selector-panel/index.js

@@ -0,0 +1,5 @@
+import EsSelector from './src/main';
+
+EsSelector.install = Vue => Vue.component(EsSelector.name, EsSelector);
+
+export default EsSelector;