md
This commit is contained in:
linfso
parent
1ee3e46d36
commit
af1d3d4fa4
277
src/components/XdComboGrid/index copy.vue
Normal file
277
src/components/XdComboGrid/index copy.vue
Normal file
@ -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>
|
||||||
230
src/components/XdSelectV2/index.vue
Normal file
230
src/components/XdSelectV2/index.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user