子组件代码：
<template>
<!-- 单选下拉框 -->
<el-select
v-model.trim="selectValue"
filterable
clearable
:placeholder="placeText"
:filter-method="filterMethod"
:loading="loading"
@clear="clearSub"
@focus="focusSub"
@change="changeSubCoin"
class="subSelect"
ref="subSelect"
v-if="selectType != 4"
>
<el-option
v-for="(item, index) in selectOptions"
:key="index"
:label="item.subName"
:value="item.subId"
>
<img :src="getImgUrl(item.icon)" v-if="selectType != 4" />
<span>{{ item.subName ? item.subName : item.name }}</span>
</el-option>
</el-select>
<!-- 多选下拉框 -->
<el-select
v-model.trim="multipleSelectValue"
filterable
clearable
:placeholder="placeText"
:filter-method="filterMethod"
:loading="loading"
multiple
collapse-tags
@clear="clearSub"
@focus="focusSub"
@remove-tag="removeTag"
@change="searchTableList"
class="subSelect1"
ref="subSelect1"
v-else
>
<el-option
v-for="(item, index) in multipleSelectOptions"
:key="index"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</template>
<script>
import {
accountSearch,
querySelectionList,
} from "@/api/account.js";
export default {
props: {
selectType: {
type: Number,
default: 1,
},
accountId: {
type: String,
default: "",
},
searchType: {
// 0 ：去向 1：来源
type: Number,
default: 0,
},
placeholderText: {
type: String,
default: "",
}
},
data() {
return {
loading: false,
selectOptions: [], // 单选下拉框列表选项
selectValue: "", // 单选下拉框值
selectName: "", // 单选下拉框名
placeText: "请选择发放账户",
multipleSelectValue: [], // 多选下拉框列表选项
multipleSelectOptions: [], // 多选下拉框值
};
},
mounted() {
if (this.selectType === 1) {
this.accountSearchList("");
} else {
this.getSelectionList(this.accountId, "", this.searchType);
if (this.searchType == 0) {
this.placeText = "请选择去向";
} else {
this.placeText = "请选择来源";
}
}
},
methods: {
// 获取下拉框图片路径
getImgUrl(img) {
return require("@/assets/images/" + img); // 本地图片
},
// 发放虚拟币下拉选项支持模糊搜索匹配功能
accountSearchList(params) {
let param = {
queryParam: params,
};
accountSearch(param).then((response) => {
let res = response.data;
if (res.code == 200) {
this.selectOptions = res.data;
sessionStorage.setItem("selectQuery", "");
}
});
},
// 账户明细-来源去向下拉选择框获取
getSelectionList(accountId, params, type) {
accountId = this.accountId
? this.accountId
: sessionStorage.getItem("accountId");
params = "";
type = this.searchType;
querySelectionList(accountId, params, type).then((response) => {
let res = response.data;
if (res.code == 200) {
this.multipleSelectOptions = res.data;
}
});
},
filterMethod(query) {
this.selectOptions = [];
this.loading = true;
this.getRemote(query);
},
getRemote: _.debounce(async function (query) {
let query1 = sessionStorage.setItem("selectQuery", query);
if (query !== "") {
if (query != query1) {
let param = {
queryParam: query,
};
if (this.selectType === 1) {
this.loading = false;
let res = await accountSearch(param);
this.selectOptions = res.data.data;
} else if (this.selectType === 4) {
this.loading = false;
let res = await querySelectionList(
this.accountId
? this.accountId
: sessionStorage.getItem("accountId"),
query,
this.searchType
);
this.multipleSelectOptions = res.data.data;
}
}
} else {
this.clearSub();
}
}, 500),
// 清空下拉框数据时触发
clearSub() {
this.loading = false;
if (this.selectType !== 4) {
sessionStorage.setItem("selectQuery", "");
this.selectValue = "";
this.selectName = "";
let arr = [this.selectValue, this.selectName];
this.$emit("getQuery", arr);
this.placeText = "请选择发放账户";
if (this.selectType === 1) {
this.accountSearchList("");
}
} else {
if (this.multipleSelectValue && this.multipleSelectValue.length > 0) {
this.$emit("getParams", this.multipleSelectValue);
} else {
if (this.searchType == 0) {
this.placeText = "请选择去向";
} else {
this.placeText = "请选择来源";
}
this.multipleSelectValue = [];
this.$emit("getParams", this.multipleSelectValue);
this.getSelectionList(
this.accountId ? this.accountId : sessionStorage.getItem("accountId"),
"",
this.searchType
);
}
}
},
// 聚焦时触发
focusSub() {
let query = sessionStorage.getItem("selectQuery");
if (this.multipleSelectValue && this.multipleSelectValue.length > 0) {
this.$emit("getParams", this.multipleSelectValue);
} else {
if (this.searchType == 0) {
this.placeText = "请选择去向";
} else {
this.placeText = "请选择来源";
}
this.multipleSelectValue = [];
this.$emit("getParams", this.multipleSelectValue);
this.getSelectionList(
this.accountId ? this.accountId : sessionStorage.getItem("accountId"),
"",
this.searchType
);
}
if (this.selectValue && query != "") {
if (this.selectType !== 4) {
this.selectValue = "";
this.selectName = "";
let arr = [this.selectValue, this.selectName];
this.$emit("getQuery", arr);
this.accountSearchList("");
}
} else {
if (query) {
if (this.selectType === 1) {
this.accountSearchList("");
this.placeText = "请选择发放账户";
}
}
}
},
// 多选移除标签时触发
removeTag() {
if (this.multipleSelectValue && this.multipleSelectValue.length == 0) {
if (this.searchType == 0) {
this.placeText = "请选择去向";
} else {
this.placeText = "请选择来源";
}
this.multipleSelectValue = [];
this.$emit("getParams", this.multipleSelectValue);
this.getSelectionList(
this.accountId ? this.accountId : sessionStorage.getItem("accountId"),
"",
this.searchType
);
}
},
// 切换子账户
changeSubCoin(e) {
this.selectValue = e;
sessionStorage.setItem("selectQuery", "");
this.selectOptions.forEach((item) => {
if (item.subId == e) {
this.selectName = item.subName;
}
if (item.id == e) {
this.selectName = item.name;
let subTagType = item.type;
sessionStorage.setItem("subTagType", subTagType);
this.$emit("getSubTagType", subTagType);
}
});
let arr = [this.selectValue, this.selectName];
this.$emit("getQuery", arr);
},
searchTableList(e) {
this.multipleSelectValue = e;
this.$emit("getParams", this.multipleSelectValue);
},
},
};
</script>
<style scoped>
.el-select-dropdown__item {
display: flex;
align-items: center;
}
img {
display: inline-block;
width: 70px;
height: 24px;
margin-right: 10px;
}
</style>
<style lang="scss" scoped>
.subSelect {
width: 240px;
}
.subSelect1 {
width: 260px;
/deep/.el-select__tags-text { // 解决下拉框文本过长溢出
display: inline-block;
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/deep/.el-tag__close.el-icon-close {
top: -7px;
}
/deep/ .el-input__suffix {
height: 40px !important;
}
}
</style>
单选框父组件代码：
<!-- 搜索下拉组件 -->
<template>
<div>
<select-search
:selectType="1"
@getQuery="getQuery"
ref="subSelect"
></select-search>
</div>
</tempalte>
import SelectSearch from "@/components/selectSearch/index.vue";
export default {
components: {
SelectSearch
},
data() {
return {
accountId: "", // 账户id
subValue: "", // 子账户值
subName: "", // 子账户名
};
},
methods: {
getQuery(value) {
this.subValue = value[0];
this.subName = value[1];
},
}
多选框父组件代码：
<!-- 搜索下拉组件 -->
<template>
<div>
<select-search
:selectType="4"
:placeholderText="placeholderText1"
:accountId="accountId"
:searchType="0"
@getParams="getdirection"
ref="subSelect"
></select-search>
</div>
</tempalte>
import SelectSearch from "@/components/selectSearch/index.vue";
export default {
components: {
SelectSearch
},
data() {
return {
direction: [],
placeholderText1: "请选择去向",
accountId: "",
};
},
created() {
this.accountId = sessionStorage.getItem("accountId");
},
methods: {
getdirection(value) {
this.direction = value;
}
},
}
