403 lines
10 KiB
Vue
403 lines
10 KiB
Vue
<template>
|
|
<el-dropdown
|
|
ref="messageDrop"
|
|
szie="mini"
|
|
trigger="click"
|
|
:hide-on-click="false"
|
|
@click.native="checkeddown"
|
|
:class="{ 'el-dropdown_active': !down }"
|
|
@visible-change="dropdownchange"
|
|
>
|
|
<span class="el-dropdown-link">
|
|
<span>
|
|
<span :class="{ color: selectvalue.length }">{{ dropdownvalue }}</span
|
|
><span class="list-length" v-if="valuelength >= 1"
|
|
>+ {{ valuelength }}</span
|
|
></span
|
|
><i
|
|
v-if="dropdownvalue == dropdowntitle"
|
|
class="el-icon-arrow-up el-icon--right"
|
|
:class="{ 'rotate-arrow': down }"
|
|
></i>
|
|
<i v-else class="el-icon-close el-icon--right" @click="clear"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-input
|
|
placeholder="请输入内容"
|
|
v-model="seek"
|
|
size="small"
|
|
class="el_input"
|
|
@input="inputblur"
|
|
@keydown.enter.prevent="confirm"
|
|
>
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
</el-input>
|
|
|
|
<div v-if="dataList && dataList.length" class="checkbox-group">
|
|
<div v-if="dataList && dataList.length > 1" class="all-checked">
|
|
<el-checkbox
|
|
:indeterminate="isIndeterminate"
|
|
v-model="checkAll"
|
|
@change="handleCheckAllChange"
|
|
>全选</el-checkbox
|
|
>
|
|
/
|
|
<span @click="invert" class="invertstatus">反选</span>
|
|
</div>
|
|
<el-checkbox-group
|
|
class="checked-list"
|
|
:class="{ 'top-height': dataList && dataList.length <= 1 }"
|
|
v-model="checkedList"
|
|
@change="handleCheckedCitiesChange"
|
|
>
|
|
<div v-for="(el, id) in dataList" :key="id" class="setScore">
|
|
<el-checkbox :label="el.value">{{ el.label }}</el-checkbox>
|
|
<span @click="confirm(el, 'only')">仅筛选此项</span>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<div v-else class="nothing">暂无数据</div>
|
|
<div class="btnbox">
|
|
<div>
|
|
<el-button size="mini" @click="cancel">取消</el-button>
|
|
<el-button size="mini" type="primary" plain @click="confirm"
|
|
>确定</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["SourceData", "dropdowntitle", "value", "selectAll"],
|
|
data() {
|
|
return {
|
|
seek: "",
|
|
dropdownvalue: this.dropdowntitle,
|
|
valuelength: 0,
|
|
down: true,
|
|
checkAll: false,
|
|
checkedList: [],
|
|
dataList: [], //渲染数据
|
|
isIndeterminate: false,
|
|
retract: false,
|
|
selectvalue: [], //最终接口接收数据
|
|
};
|
|
},
|
|
components: {},
|
|
watch: {
|
|
SourceData: {
|
|
handler(val) {
|
|
this.dataList = val;
|
|
this.checkedList = []; //清空旧值-解决出现累加问题
|
|
if (this.selectAll && this.dataList) {
|
|
this.dataList.map((e) => {
|
|
this.checkedList.push(e.value);
|
|
});
|
|
this.confirm();
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
//点击选择状态恢复到原始值
|
|
checkeddown() {
|
|
if (this.checkedList.length) {
|
|
this.checkedList =Object.assign([],this.selectvalue) ;
|
|
} else {
|
|
this.checkedList = [];
|
|
}
|
|
this.checkedstatus();
|
|
},
|
|
dropdownchange() {
|
|
this.down = !this.down;
|
|
},
|
|
inputblur(queryString) {
|
|
this.dataList = queryString
|
|
? this.SourceData.filter(this.createFilter(queryString))
|
|
: this.SourceData;
|
|
this.checkedstatus();
|
|
},
|
|
createFilter(queryString) {
|
|
return (restaurant) => {
|
|
const lowerCaseQuery = queryString.toLowerCase();
|
|
const lowerCaseLabel = restaurant.label.toLowerCase();
|
|
|
|
// 支持任意位置的匹配
|
|
return lowerCaseLabel.includes(lowerCaseQuery);
|
|
};
|
|
},
|
|
// 可用于将结果按照匹配度排序的函数
|
|
sortByMatch(queryString, a, b) {
|
|
const lowerCaseQuery = queryString.toLowerCase();
|
|
const scoreA = this.calculateMatchScore(lowerCaseQuery, a.label);
|
|
const scoreB = this.calculateMatchScore(lowerCaseQuery, b.label);
|
|
|
|
// 根据匹配度得分进行排序
|
|
return scoreB - scoreA;
|
|
},
|
|
calculateMatchScore(query, label) {
|
|
const lowerCaseLabel = label.toLowerCase();
|
|
return lowerCaseLabel.includes(query)
|
|
? lowerCaseLabel.indexOf(query)
|
|
: Infinity;
|
|
},
|
|
|
|
handleCheckAllChange() {
|
|
this.isIndeterminate = false;
|
|
|
|
if (this.checkAll) {
|
|
this.dataList.map((item) => {
|
|
this.checkedList.push(item.value);
|
|
});
|
|
this.checkedList = [...new Set(this.checkedList)];
|
|
} else {
|
|
if (this.seek) {
|
|
this.checkedList = this.checkedList.filter((item) => {
|
|
const matchingItem = this.dataList.find((el) => el.value === item);
|
|
return !matchingItem;
|
|
});
|
|
} else {
|
|
this.checkedList = [];
|
|
}
|
|
}
|
|
},
|
|
//判断按钮状态
|
|
checkedstatus() {
|
|
let every = this.dataList.every((item) => {
|
|
return this.checkedList.includes(item.value);
|
|
});
|
|
let some = this.dataList.some((item) => {
|
|
return this.checkedList.includes(item.value);
|
|
});
|
|
if (every && some) {
|
|
this.checkAll = true;
|
|
this.isIndeterminate = false;
|
|
} else if (!every && some) {
|
|
this.isIndeterminate = true;
|
|
} else {
|
|
this.checkAll = false;
|
|
this.isIndeterminate = false;
|
|
}
|
|
},
|
|
invert() {
|
|
this.dataList.forEach((item) => {
|
|
if (this.checkedList.includes(item.value)) {
|
|
this.checkedList = this.checkedList.filter(
|
|
(value) => value !== item.value
|
|
);
|
|
} else {
|
|
this.checkedList.push(item.value);
|
|
}
|
|
});
|
|
this.checkedstatus();
|
|
},
|
|
handleCheckedCitiesChange(value) {
|
|
let checkedCount = value.length;
|
|
this.checkAll = checkedCount === this.dataList.length;
|
|
this.isIndeterminate =
|
|
checkedCount > 0 && checkedCount < this.dataList.length;
|
|
this.checkedstatus();
|
|
},
|
|
cancel() {
|
|
if (this.selectvalue.length == this.dataList.length) {
|
|
this.checkAll = true;
|
|
this.isIndeterminate = false;
|
|
} else {
|
|
this.isIndeterminate = true;
|
|
}
|
|
if (!this.selectvalue.length) {
|
|
this.checkedList = [];
|
|
this.checkAll = false;
|
|
this.isIndeterminate = false;
|
|
}
|
|
this.seek = "";
|
|
this.inputblur();
|
|
this.checkedList = this.selectvalue;
|
|
this.$refs.messageDrop.hide();
|
|
},
|
|
confirm(val, name) {
|
|
if (name == "only") {
|
|
this.checkedList = [];
|
|
this.checkedList.push(val.value);
|
|
}
|
|
let arr = [];
|
|
arr = this.SourceData.filter((el, id) => {
|
|
return this.checkedList.includes(el.value);
|
|
});
|
|
if (arr.length) {
|
|
this.dropdownvalue = arr[0].label;
|
|
} else {
|
|
this.dropdownvalue = this.dropdowntitle;
|
|
this.valuelength = 0;
|
|
}
|
|
this.selectvalue = this.checkedList;
|
|
this.valuelength = this.checkedList.length - 1;
|
|
let params = { [this.value]: this.selectvalue };
|
|
this.cancel();
|
|
this.$emit("search", params);
|
|
},
|
|
clear() {
|
|
this.dropdownvalue = this.dropdowntitle;
|
|
this.valuelength = 0;
|
|
this.seek = "";
|
|
this.selectvalue = [];
|
|
this.checkedList = [];
|
|
this.checkAll = false;
|
|
this.isIndeterminate = false;
|
|
this.inputblur();
|
|
this.$refs.messageDrop.hide();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
.el-dropdown {
|
|
width: 100%;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.el-dropdown:hover {
|
|
border: 1px solid #c0c4cc;
|
|
}
|
|
.el-dropdown_active {
|
|
border: 1px solid #409eff;
|
|
}
|
|
.el-dropdown_active:hover {
|
|
border: 1px solid #409eff;
|
|
}
|
|
.el-icon-arrow-up {
|
|
transform: rotate(0deg);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.rotate-arrow {
|
|
transform: rotate(180deg);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
::v-deep .el_input {
|
|
padding: 0 10px;
|
|
.el-input__inner {
|
|
border-radius: 0px;
|
|
border: none;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
}
|
|
.el-input__inner:hover {
|
|
border-bottom: 1px solid #409eff;
|
|
}
|
|
}
|
|
.el-dropdown-menu {
|
|
min-width: 400px;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
.checkbox-group {
|
|
overflow: hidden;
|
|
padding: 5px 0px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.all-checked {
|
|
position: fixed;
|
|
span {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
.invertstatus:hover {
|
|
color: #409eff;
|
|
}
|
|
}
|
|
.checked-list {
|
|
max-height: 180px;
|
|
margin-top: 25px;
|
|
overflow-y: auto;
|
|
padding: 5px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.top-height {
|
|
margin-top: 0px;
|
|
}
|
|
.el-checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.el-checkbox {
|
|
margin-right: 0px !important;
|
|
padding: 5px 0px 5px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.btnbox {
|
|
padding: 5px;
|
|
display: flex;
|
|
justify-content: right;
|
|
border-top: 1px solid #dcdfe6;
|
|
}
|
|
.el-dropdown-link {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: 180px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #c0c4cc;
|
|
cursor: pointer;
|
|
}
|
|
.list-length {
|
|
padding: 3px 7px;
|
|
margin-left: 10px;
|
|
border-radius: 4px;
|
|
color: #33333379;
|
|
background-color: #dcdfe6;
|
|
}
|
|
.color {
|
|
color: #333;
|
|
font-weight: normal;
|
|
}
|
|
:focus-visible {
|
|
outline: none;
|
|
}
|
|
.nothing {
|
|
min-height: 80px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
color: #c0c4cc;
|
|
}
|
|
.el-icon-close {
|
|
opacity: 0;
|
|
}
|
|
.el-icon-close:hover {
|
|
opacity: 1;
|
|
}
|
|
.setScore {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
span {
|
|
display: none;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.setScore:hover {
|
|
background-color: rgba(192, 196, 204, 0.267);
|
|
span {
|
|
display: block;
|
|
color: #409eff;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |