From af1d3d4fa4bc496eb2740bd9f5bd0f9318a234e6 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Tue, 7 May 2024 12:55:08 +0800
Subject: [PATCH] md

---
 src/components/XdComboGrid/index copy.vue | 277 ++++++++++++++++++++++
 src/components/XdSelectV2/index.vue       | 230 ++++++++++++++++++
 2 files changed, 507 insertions(+)
 create mode 100644 src/components/XdComboGrid/index copy.vue
 create mode 100644 src/components/XdSelectV2/index.vue

diff --git a/src/components/XdComboGrid/index copy.vue b/src/components/XdComboGrid/index copy.vue
new file mode 100644
index 00000000..76d76cba
--- /dev/null
+++ b/src/components/XdComboGrid/index copy.vue	
@@ -0,0 +1,277 @@
+<template>
+  <div :id="createdId">
+    <div class="input-select el-input__inner" v-if="showSelect">
+      <div class="tags">
+        <el-tag v-for="(item, index) in multipleSelectionTags" :key="index" closable @close="handleCloseTag(item)" size="small"
+          type="info" effect="plain">{{item[keywordKey] || ''}}
+        </el-tag>
+        <input type="text" ref="selectInput" :value="value" :placeholder="placeholderForTag" @focus="onfocus" @input="changeValue($event.target.value)">
+        <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'"></i>
+      </div>
+    </div>
+    <el-input v-else :value="value" @input="changeValue" @focus="onfocus" @blur="onblur" clearable :placeholder="placeholder" ref="inputValue"></el-input>
+    <div :popId="popId" tabindex="0" class="el-picker-panel" :style="pStyle" v-show="visible" ref="elcombogrid" >
+      <div class="table-container">
+        <el-table v-loading="listLoading" :data="list" @row-click="rowClick" stripe size="mini"
+          element-loading-text="Loading" ref="comboGridTable" fit border highlight-current-row
+          @selection-change="handleSelectionChange" @select="handleSingelSelectionChange">
+          <el-table-column type="selection" v-if="showSelect" width="55" align="center" />
+          <!-- <el-table-column v-if="showIndex" label="序号" type="index" align="center" width="50"></el-table-column> -->
+          <!-- <el-table-column v-for="item in columns" :type="item.type" :key="item.key" :label="item.label"
+            :prop="item.key" :align="item.align" :width="item.width" :header-align="item.headerAlign">
+            <template slot-scope="scope">
+              <span>{{ scope.row[item.key] }}</span>
+            </template>
+          </el-table-column> -->
+
+          <el-table-column v-for="item in columns" :key="item.key" :label="item.label" :prop="item.key" :align="item.align" :min-width="item.width" :header-align="item.headerAlign">
+            <template slot-scope="scope">
+              <span>{{ scope.row[item.key] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination v-show="pagination" small :total="total" :page-size="5" layout="prev, pager, next, total"
+          @current-change="changePage" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import request from '@/utils/request';
+
+
+export default {
+  name: "XdComboGrid",
+  props: {
+    placeholder: { type: String },
+    value: { type: String },
+    requestUrl:{ type: String },
+    method: { type: String },
+    columns: { type: Array },
+    panelStyle: { type: String },
+    keywordKey: { type: String },
+    showIndex: { type: Boolean },
+    pagination: { type: Boolean, default: true },
+    queryParams: { default: () => { } },
+    showSelect: { default: false }
+  },
+  data() {
+    return {
+      visible: false,
+      pStyle: 'width:500px',
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 5
+      },
+      keyword: '',
+      createdId: '0',
+      popId: '0',
+      multipleSelection: [],
+      multipleSelectionTags: [],
+      placeholderForTag: ''
+    }
+  },
+  mounted() {
+    this.createdId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
+    this.popId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
+
+    this.placeholderForTag = this.placeholder
+  },
+  methods: {
+    changePage(cur) {
+      this.listQuery.pageNum = cur
+      this.getList()
+    },
+    changeValue(val) {
+      this.$emit('input', val)//向上级传送数据
+      this.keyword = val
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    onfocus(el) {
+      this.pStyle = this.panelStyle + ';position:absolute;z-index:999999;'
+      this.visible = true
+      this.keyword = el.target.value
+      // document.removeEventListener('click', this.clickOutFn)
+      // document.addEventListener('click', this.clickOutFn)
+      this.getList()
+    },
+    onblur(el) {
+      this.visible = false
+    },
+    getList() {
+      for (let key in this.queryParams) {
+        this.listQuery[key] = this.queryParams[key]
+      }
+      if (this.pagination) {
+        this.listQuery[this.keywordKey] = this.keyword
+      } else {
+        if (this.keyword) {
+          this.listQuery[this.keywordKey] = this.keyword
+        } else {
+          this.listLoading = false
+          return //如果不分页，无keyword不查询数据（避免大数据量）
+        }
+      }
+      this.listLoading = false
+      // this.listLoading = true
+      this.multipleSelection.length = 0
+      this.queryTableData(this.listQuery).then(response => {
+        this.list = response.rows
+        this.total = response.total
+        // this.listLoading = false
+        this.$nextTick(() => {
+          // multipleSelectionTags 引用问题,无法与table数据全等。。。
+          let ids = this.multipleSelectionTags.map(item => item.id)
+          this.list.length && this.list.forEach((item, index) => {
+            if (ids.includes(item.id)) {
+              this.$refs.comboGridTable.toggleRowSelection(item)
+            }
+          })
+        })
+      })
+    },
+    queryTableData(params) {
+      const requestOption = {
+        url: this.requestUrl,
+        method: this.method,
+      }
+      requestOption[this.method === 'get' ? 'params' : 'data'] = params
+      console.log(requestOption);
+
+      return request(requestOption)
+
+    },
+    rowClick: function (row, column, event) {
+      if (this.showSelect) {
+        this.$refs.comboGridTable.toggleRowSelection(row);
+        this.$emit('input', '')
+      } else {
+        this.visible = false
+        this.$emit('row-select-event', row, column, event)
+        this.$emit('input', row[this.keywordKey])
+        document.removeEventListener('click', this.clickOutFn)
+      }
+    },
+    clickOutFn(e) {
+      // console.log(e);
+      // console.log(e.path);
+      // debugger
+      if (e.path.some(item => item.id === this.createdId)) return
+      this.visible = false
+      document.removeEventListener('click', this.clickOutFn)
+    },
+    /**
+     * 根据选择与上次的选择进行对比，处理tags
+     * todo 聚焦状态。。。触发太多，暂不处理
+     */
+    handleSelectionChange(val) {
+      if (this.multipleSelection.length === 0 && val.length === 0) return
+      if (val.length > this.multipleSelection.length) {
+        for (let item of val) {
+          if (!this.multipleSelection.some(mitem => mitem.id === item.id)) {
+            let ids = this.multipleSelectionTags.map(item => item.id)
+            !ids.includes(item.id) && (this.multipleSelectionTags = this.multipleSelectionTags.concat(item))
+          }
+        }
+      } else {
+        for (let item of this.multipleSelection) {
+          if (!val.some(mitem => mitem.id === item.id)) {
+            let index = this.multipleSelectionTags.findIndex(mitem => mitem.id === item.id)
+            index > -1 && this.multipleSelectionTags.splice(index, 1)
+          }
+        }
+      }
+      this.multipleSelection = val
+      this.placeholderForTag = this.multipleSelectionTags.length ? '' : this.placeholder
+      this.$emit('getSelect', this.multipleSelectionTags)
+      // this.$refs.selectInput.focus() todo..
+    },
+    /**
+     * 处理单个复选框选择
+     */
+    handleSingelSelectionChange() {
+      this.$emit('input', '')
+    },
+    handleCloseTag(item) {
+      this.multipleSelectionTags.splice(this.multipleSelectionTags.findIndex(mitem => mitem.id === item.id), 1)
+      this.$refs.comboGridTable.toggleRowSelection(item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.input-select {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: auto;
+  min-width: 240px;
+  -webkit-appearance: none;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  color: #606266;
+  font-size: inherit;
+  outline: none;
+  // padding: 0 15px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  .select-down {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    transition: all 0.5s;
+    &.rotate180 {
+      transform: translateY(-50%) rotate(180deg);
+    }
+  }
+  .tags {
+    // min-height: 36px;
+    flex-wrap: wrap;
+    line-height: normal;
+    white-space: normal;
+    z-index: 1;
+
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    :deep .el-tag {
+      margin-right: 3px;
+      margin-bottom: 1px;
+    }
+    input {
+      flex: 1;
+      border: none;
+      outline: none;
+      padding: 0;
+      color: #666;
+      font-size: 14px;
+      appearance: none;
+      height: 28px;
+      background-color: transparent;
+      &::-webkit-input-placeholder {
+        color: #c0c4cc;
+      }
+      &::-moz-placeholder {
+        /* Mozilla Firefox 19+ */
+        color: #c0c4cc;
+      }
+      &:-moz-placeholder {
+        /* Mozilla Firefox 4 to 18 */
+        color: #c0c4cc;
+      }
+      &:-ms-input-placeholder {
+        /* Internet Explorer 10-11 */
+        color: #c0c4cc;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/XdSelectV2/index.vue b/src/components/XdSelectV2/index.vue
new file mode 100644
index 00000000..45318fd8
--- /dev/null
+++ b/src/components/XdSelectV2/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <el-select
+    ref="select"
+    v-model="localValue"
+    class="el-select-v2"
+    :autocomplete="autocomplete"
+    :automatic-dropdown="automaticDropdown"
+    :size="size"
+    :disabled="disabled"
+    :clearable="clearable"
+    :filterable="filterable"
+    :allow-create="allowCreate"
+    :loading="loading"
+    :popper-class="`el-select-v2__popper ${popperClass || ''}`"
+    :remote="remote"
+    :loading-text="loadingText"
+    :no-match-text="noMatchText"
+    :no-data-text="noDataText"
+    :remote-method="remoteMethod"
+    :filter-method="filterMethod || localFilterMethod"
+    :multiple="multiple"
+    :multiple-limit="multipleLimit"
+    :placeholder="placeholder"
+    :default-first-option="defaultFirstOption"
+    :reserve-keyword="reserveKeyword"
+    :collapse-tags="collapseTags"
+    :popper-append-to-body="popperAppendToBody"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <RecycleScroller
+      v-if="localOptions.length"
+      ref="scroller"
+      v-slot="{ item }"
+      class="scroller"
+      :items="localOptions"
+      :min-item-size="minItemSize"
+      :key-field="valueKey"
+      @visible="handleScrollerVisible"
+    >
+      <el-option
+        :key="item[valueKey]"
+        :value="item[valueKey]"
+        :label="item[labelKey]"
+        :disabled="item.disabled"
+      >
+        <slot name="default" :item="item" />
+      </el-option>
+    </RecycleScroller>
+    <template v-if="$slots.prefix" slot="prefix">
+      <slot name="prefix" />
+    </template>
+    <template v-if="$slots.empty" slot="empty">
+      <slot name="empty" />
+    </template>
+  </el-select>
+</template>
+
+<script>
+  import { RecycleScroller } from 'vue-virtual-scroller';
+  import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+  import isEqual from 'lodash/isEqual';
+
+  export default {
+    name: 'XdSelectV2',
+    components: {
+      RecycleScroller,
+    },
+    props: {
+      value: {
+        type: [Array, String, Number, Boolean, Object],
+        default: undefined,
+      },
+      options: {
+        type: Array,
+        default: () => [],
+      },
+      valueKey: {
+        type: String,
+        default: 'value',
+      },
+      labelKey: {
+        type: String,
+        default: 'label',
+      },
+      autocomplete: {
+        type: String,
+        default: 'off',
+      },
+      automaticDropdown: Boolean,
+      size: String,
+      disabled: Boolean,
+      clearable: Boolean,
+      filterable: Boolean,
+      allowCreate: Boolean,
+      loading: Boolean,
+      popperClass: String,
+      remote: Boolean,
+      loadingText: String,
+      noMatchText: String,
+      noDataText: String,
+      remoteMethod: Function,
+      filterMethod: Function,
+      multiple: Boolean,
+      multipleLimit: {
+        type: Number,
+        default: 0,
+      },
+      placeholder: {
+        type: String,
+        required: false,
+      },
+      defaultFirstOption: Boolean,
+      reserveKeyword: Boolean,
+      collapseTags: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: true,
+      },
+      minItemSize: {
+        type: Number,
+        default: 34,
+      },
+    },
+    data() {
+      return {
+        localValue: '',
+        localOptions: [],
+      };
+    },
+    mounted() {
+      this.updateSelectedLabel();
+      if (this.$refs.select) {
+        this.$watch(() => this.$refs.select.visible, value => {
+          if (value) {
+            this.updateOptions();
+          }
+        });
+      }
+    },
+    methods: {
+      updateSelectedLabel() {
+        if (!this.$refs.select) {
+          return;
+        }
+        const { setSelected, cachedOptions } = this.$refs.select;
+        const values = this.multiple ? this.localValue : [this.localValue];
+        const selectedOptions = this.options.filter(option => values?.includes(option[this.valueKey])).map(option => ({
+          value: option[this.valueKey],
+          currentLabel: option[this.labelKey],
+        }));
+        selectedOptions.forEach(option => {
+          const cachedOption = cachedOptions.find(cachedOption => cachedOption.value === option.value);
+          if (cachedOption) {
+            cachedOptions.splice(cachedOptions.indexOf(cachedOption), 1, option);
+          } else {
+            cachedOptions.push(option);
+          }
+        });
+        setSelected();
+      },
+      handleScrollerVisible() {
+        const firstValue = this.multiple ? this.localValue?.[0] : this.localValue;
+        const index = this.localOptions.findIndex(option => option[this.valueKey] === firstValue);
+        this.$refs.scroller.scrollToItem(index);
+      },
+      localFilterMethod(query) {
+        this.localOptions = this.options.filter(option => option[this.labelKey].toLowerCase().includes(query.toLowerCase()));
+      },
+      updateOptions() {
+        this.localOptions = this.options;
+      },
+      focus() {
+        this.$refs.select.focus();
+      },
+      blur() {
+        this.$refs.select.blur();
+      },
+    },
+    watch: {
+      value: {
+        handler() {
+          if (!isEqual(this.value, this.localValue)) {
+            this.localValue = this.value;
+            this.updateSelectedLabel();
+          }
+        },
+        deep: true,
+        immediate: true,
+      },
+      options: {
+        handler() {
+          this.updateOptions();
+          const inputs = this.$el.querySelectorAll('input');
+          if ([].indexOf.call(inputs, document.activeElement) === -1) {
+            this.updateSelectedLabel();
+          }
+        },
+        deep: true,
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+.el-select-v2__popper {
+  .scroller {
+    max-height: 238px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: rgba(144, 147, 153, .3);
+
+      &:hover {
+        background-color: rgba(144, 147, 153, .5);
+      }
+    }
+  }
+
+  .el-scrollbar__bar {
+    display: none;
+  }
+}
+</style>