<template>
|
<div class="selectclass">
|
<el-select
|
v-model="myValue"
|
:loading="isLoading"
|
:filterable="filterable"
|
:filter-method="filterMethod"
|
clearable
|
:multiple="multiple"
|
:multiple-limit="multipleLimit"
|
:disabled="disabled"
|
:default-first-option="defaultFirstOption"
|
:size="size"
|
@focus="focusEvents.func"
|
@change="change"
|
@blur="changeBlur"
|
value-key="organizationid"
|
allow-create
|
reserve-keyword
|
:placeholder="placeholder ? placeholder : '请选择'"
|
class="full-block"
|
ref="selecter"
|
>
|
<el-option
|
v-for="(spec, index) in dataList"
|
:key="index"
|
:label="spec.organizationname"
|
:value="spec.organizationid"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
|
<script>
|
import { listOrganization, listReportname } from "@/api/project/organization";
|
|
export default {
|
name: "OrgSelecter",
|
components: {},
|
props: {
|
//Select基础属性
|
value: {
|
type: [String, Array]
|
},
|
//获取列表
|
dataList: {
|
type: Array,
|
default: function() {
|
return [];
|
}
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
clearable: {
|
type: Boolean,
|
default: false
|
},
|
filterable: {
|
type: Boolean,
|
default: true
|
},
|
multiple: {
|
type: Boolean,
|
default: false
|
},
|
multipleLimit: {
|
type: Number,
|
default: 0
|
},
|
defaultFirstOption: {
|
type: Boolean,
|
default: true
|
},
|
size: {
|
type: String,
|
default: "small"
|
},
|
placeholder: {
|
type: String,
|
default: ""
|
},
|
//业务属性
|
lazyLoad: {
|
type: Boolean,
|
default: false
|
},
|
isAll: {
|
type: Boolean,
|
default: false
|
},
|
//机构类型
|
orgType: {
|
type: String,
|
default: ""
|
}
|
},
|
data() {
|
return {
|
pageData: { pageNum: 1, pageSize: 100 },
|
isLoading: false,
|
// dataList: [],
|
tempList: [],
|
myValue: this.multiple ? [] : "",
|
focusEvents: {
|
func: () => {},
|
loaded: false
|
}
|
};
|
},
|
mounted() {
|
if (this.lazyLoad && !this.filterable) {
|
console.error("'lazy-load'必须和'filterable'同时使用！");
|
return false;
|
}
|
|
if (this.lazyLoad) {
|
this.focusEvents.func = () => {
|
if (!this.focusEvents.loaded) {
|
this.renderSelecter();
|
}
|
};
|
} else {
|
this.renderSelecter();
|
}
|
},
|
methods: {
|
renderSelecter() {
|
this.pageData.PageSize = 100;
|
this.myValue = this.value;
|
|
this.getdataList();
|
},
|
|
//获取数据
|
getdataList() {
|
this.isLoading = true;
|
let searchData = {
|
organizationtype: this.orgType, //传入的类型
|
pageNum: 1,
|
pageSize: 100000
|
}; //搜索条件
|
|
let userType = { userType: "1" };
|
|
listOrganization(searchData)
|
.then(response => {
|
this.dataList.push(...response.rows);
|
if (this.isAll) {
|
let all = {
|
organizationid: "",
|
organizationname: "全部"
|
};
|
this.dataList.unshift(all);
|
}
|
this.tempList = this.dataList.map(item => item);
|
this.focusEvents.loaded = true;
|
})
|
.catch(error => {
|
// 暂无处理
|
})
|
.finally(() => {
|
this.isLoading = false;
|
});
|
},
|
|
getOptionByValue(key) {
|
let outValue = null;
|
this.dataList.forEach(e => {
|
if (e.organizationid == key) {
|
outValue = e;
|
}
|
});
|
|
return outValue;
|
},
|
|
filterMethod(val) {
|
this.myValue = val;
|
if (val) {
|
this.dataList = this.tempList.filter(item => {
|
if (
|
(item.PYM &&
|
!!~item.PYM.toUpperCase().indexOf(val.toUpperCase())) ||
|
(item.WBM &&
|
!!~item.WBM.toUpperCase().indexOf(val.toUpperCase())) ||
|
(item.organizationname &&
|
!!~item.organizationname.toUpperCase().indexOf(val.toUpperCase()))
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
} else {
|
this.dataList = this.tempList.map(item => item);
|
}
|
},
|
focus() {
|
this.$refs.selecter.focus();
|
},
|
|
blur() {
|
this.$refs.selecter.blur();
|
},
|
|
changeBlur() {},
|
|
change(data) {
|
this.$nextTick(() => {
|
this.$emit("change", data);
|
});
|
},
|
defaultInit(defaultItem, defaultItemName) {
|
if (defaultItem && defaultItemName) {
|
let list = this.dataList.filter(
|
r =>
|
r.organizationid == defaultItem &&
|
r.organizationname == defaultItemName
|
);
|
if (list.length == 0) {
|
let data = {
|
organizationname: defaultItemName,
|
organizationid: defaultItem
|
};
|
this.dataList.push(data);
|
}
|
}
|
this.tempList = this.dataList.map(item => item);
|
}
|
},
|
computed: {},
|
watch: {
|
// v-model 对外暴露
|
value(newVal) {
|
this.myValue = newVal;
|
},
|
myValue(newVal) {
|
this.$emit("input", newVal);
|
this.$emit("change", newVal);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.selectclass .el-select {
|
display: inline-block;
|
position: relative;
|
width: 90%;
|
}
|
</style>
|
