<template>
<div class="select-deparment-box" id="select_tree" @mouseleave="mouseleaveTree" @mouseenter="mouseenterTree">
<div v-if="disabled">
<Input disabled v-model="dataName"/>
</div>
<div v-else ref="depositaryTree">
<div v-if="!multiple" @click="onFocus">
<Input v-model="dataName" search :placeholder="placeholder"
@on-blur="onBlur" @on-search="onEnter" @on-enter="onEnter" @on-keydown.enter="onKeyDown" @on-keydown.delete="onKeyDown">
</Input>
<i v-if="!disabled&&showClearIcon&&enableClearBtn" class="ivu-icon ivu-icon-ios-close-circle ivu-input-icon ivu-input-icon-normal" id="belongClearInput"
@click.self.stop="clearButtonClick($event)"></i>
</div>
<div v-if="multiple" @click="onFocus" class="multiple-input-box" >
<div class="multiple-input-body">
<div v-if="values.length>0" class="multiple-item-list-box">
<div class="multiple-item-list">
<div class="multiple-item" v-for="(item,index) in currentSelect" :key="item.id" @click.stop="deleteItem(index)">
<span class="multiple-item-label">{{item.name}}</span>
<span class="multiple-item-remove">
<svg class="icon guanbi_svg" aria-hidden="true" >
<use xlink:href="#icon-_guanbi"></use>
</svg>
</span>
</div>
</div>
</div>
<div v-else class="div-placeholder">
{{placeholder}}
</div>
<input v-focus="vFocus" ref="muInputref" type="text" class="multiple-input">
<i v-if="!disabled&&showClearIcon&&enableClearBtn" class="ivu-icon ivu-icon-ios-close-circle ivu-input-icon ivu-input-icon-normal" id="belongClearInput"
@click.self.stop="clearButtonClick($event)"></i>
</div>
</div>
<div >
<customTree v-show="showTree&&!hideTreeSelect" ref="customTreeRef" :fatherRef="fatherRef" :multiple="multiple" :values="values" :listItem="optionsdata" :maxHeight="maxHeight"
@loadOptions1="loadOptions1" @on-select-item="onSelectItem" @hideTree="hideTree" @on-multipleselect="multipleselect"
:disableBranchNodes="disableBranchNodes"></customTree>
</div>
</div>
</div>
</template>
<script>
import customTree from './custom-tree.vue';
import dataCommon from './data-common.js';
export default {
mixins:[dataCommon],
props:{
showClearIcon:{
type:[Boolean, String],
default:false
},
disabled:{
type:[Boolean, String],
default:false
},
value:{
},
conditions:{
type:Array,
default:function(){
return [
{ type:'UUID',
field:'parent',
values: [
'00000000-0000-0000-0000-000000000000'
],
operator: "EQ"
}
]
}
},
filterByAuth:{
type:[Boolean, String],
default:false
},
placeholder:{
type:String,
default:'请选择'
},
onlyRoot:{
type:[Boolean, String],
default:false
},
multiple:{
type:[Boolean, String],
default:false
},
disableBranchNodes:{
type:Boolean,
default:true
},
noChildrenText:{
type:String,
default:'暂无下级节点'
},
noResultsText:{
type:String,
default:'您搜索的数据不存在'
},
maxHeight:{
type:[Number, String],
default:200
},
masterName:{
type:String,
},
curUrl:{
type:String,
default:'/gams2/masterdata/listByCondition'
},
curGetById:{
type:String,
default:'/gams2/masterdata/getById'
},
bodyParam:{
},
isCustom:{
type:Boolean,
default:false
},
getChlidren:{
type:String,
default:'/gams2/masterdata/getChildren'
},
objectValue:{
type:Boolean,
default:false
},
searchConditions:{
type:Array,
default:function(){
return [
]
}
},
sortParam:{
type:Array,
default:function(){
return []
}
},
childrenConditions:{
type:Array,
default:function(){
return []
}
},
allChilerenConditions:{
type:Array,
default:function(){
return []
}
},
allChilerenUrl:{
type:String,
default:'/gams2/masterdata/listByCondition'
},
getOnlyCurrentNode:{
type:Boolean,
default:false
}
},
data() {
return {
enableClearBtn:false,
showTree:false,
values:[],
dataName:'',
searchData:false,
optionsdata:[],
optionsMetadaData:[],
options1:[],
currentSelect:[],
seatchText:'',
searchStart:false,
vFocus:false,
fatherRef:'',
saveDataById:{},
leaveTree:false,
isClick:false,
onClickAction:'',
hideItem:[{
field: "enabled",
type: "BOOLEAN",
values: [true],
operator: "EQ"
}]
};
},
created(){
},
mounted() {
this.fatherRef = this.$refs.depositaryTree;
this.onClickAction = function(e) {
this.isClick = true;
}.bind(this);
document.body.addEventListener('click', this.onClickAction, true);
},
watch:{
value:{
handler(newV,oldV){
let _value = this.dealWithObjectData(newV);
let _oldV = this.dealWithObjectData(oldV);
if(_oldV&&_value&&_value.toString()==_oldV.toString()){
return;
}
if(_value&&_value.length>0&&_value!=='00000000-0000-0000-0000-000000000000'){
this.values = _value;
if(_value != _oldV){
if(this.multiple&&this.currentSelect.length === 0){
this.getmultipleDataById(_value);
}else if(!this.multiple){
this.getDataById(_value);
}
}else{
this.dataName = '';
}
}else{
this.dataName = '';
this.currentSelect = [];
// this.optionsdata = [];
// this.optionsMetadaData = [];
this.values = [];
}
},
deep:true,
immediate:true
},
seatchText(){
this.clearSearchText();
}
},
methods: {
mouseleaveTree(){
this.leaveTree = true;
},
mouseenterTree(){
this.leaveTree = false;
this.isClick = false;
},
clearButtonClick(){
if(event&&event.target.id === 'belongClearInput'){
this.dataName = '';
this.$emit("input",'');
this.$emit("dict-dataObj-changed",'','');
this.$emit("data-changed",'','');
this.currentSelect = [];
this.values = [];
}
},
multipleselects(item,selectChild){
if(this.values.indexOf(item.id)>-1){
this.currentSelect.splice(this.values.indexOf(item.id),1);
this.values.splice(this.values.indexOf(item.id),1);
}else{
this.currentSelect.push(item);
this.values.push(item.id);
}
if(!item.isLeaf&&item.children.length==0){
this.loadOptions1(item,selectChild);
}else if(!item.isLeaf&&item.children.length > 0){
if(selectChild){
for (const _val of item.children) {
if(this.values.indexOf(_val.id) > -1){
this.currentSelect.splice(this.values.indexOf(_val.id),1);
this.values.splice(this.values.indexOf(_val.id),1);
}else{
this.currentSelect.push(_val);
this.values.push(_val.id);
}
}
}
}
if(this.objectValue){
this.$emit('input', this.currentSelect);
this.$emit('dict-dataObj-changed',this.currentSelect,this.values);
}else{
this.$emit('data-changed',this.values,this.currentSelect);
this.$emit('input', this.values);
}
},
multipleselect(item,selectChild,code){
if(this.getOnlyCurrentNode){
this.dealWithCurrentItem(item);
}else{
this.getAllItemChildren(item,selectChild,code);
}
},
getAllItemChildren(item,selectChild,code){
if(!code){
if(this.saveDataById[item.id]){
if(this.values.indexOf(item.id)>-1){
this.dealWithCurrentItem(item);
this.valueSpliceData(this.saveDataById[item.id]);
}else{
this.getAllLeafDataByParent(item);
}
}else{
// get
this.getAllLeafDataByParent(item);
}
}else{
if(code === 'Control'){
if(!item.isLeaf&&item.children.length>0){
this.dealWithCurrentItem(item);
if(this.values.indexOf(item.id) > -1){
this.valuePushData(item.children);
}else{
this.valueSpliceData(item.children);
}
}
}else if(code === 'Shift'){
this.dealWithCurrentItem(item);
}
}
if(!item.isLeaf&&item.children.length==0){
this.loadOptions1(item);
}
},
dealWithCurrentItem(item){
this.dealWithValuesType();
if(this.values.indexOf(item.id)>-1){
this.currentSelect.splice(this.values.indexOf(item.id),1);
this.values.splice(this.values.indexOf(item.id),1);
}else{
this.currentSelect.push(item);
this.values.push(item.id);
}
this.emitData();
},
valueSpliceData(data){
for (const iterator of data) {
if(this.values.indexOf(iterator.id) > -1){
this.currentSelect.splice(this.values.indexOf(iterator.id),1);
this.values.splice(this.values.indexOf(iterator.id),1);
}
}
this.emitData();
},
valuePushData(data,type){
this.dealWithValuesType();
for (const iterator of data) {
if(this.showCode){
iterator['code'] = iterator.code?iterator.code:iterator.name ;
iterator['name'] = iterator.title?iterator.title:iterator.name;
}else{
iterator['name'] = iterator.title?iterator.title:iterator.name;
}
if(this.values.indexOf(iterator.id) > -1){
if(!type){
this.currentSelect.splice(this.values.indexOf(iterator.id),1);
this.values.splice(this.values.indexOf(iterator.id),1);
}
}else{
this.currentSelect.push(iterator);
this.values.push(iterator.id);
}
}
this.emitData();
},
getAllLeafDataByParent(item){
let _conditions = [{
type:'STRING',
field:'parents',
values: [item.id],
operator: "LIKE"
}]
let paramter={};
paramter = {
type: this.masterName,
conditions: _conditions.concat(this.allChilerenConditions).concat(this.hideItem),
filterByAuth:this.filterByAuth,
orders:this.sortParam
};
window.GAMS.Util.invokeServer({
contentType: "application/json",
path: this.allChilerenUrl||'/gams2/masterdata/listByCondition',
type: 'POST',
data:JSON.stringify(paramter)
}).then(function(data){
if(data){
let val = JSON.parse(data);
if(Object.prototype.toString.call(val) === '[object Object]'){
val = val.list;
}
this.saveDataById[item.id] = val;
if(this.values.indexOf(item.id)>-1){
this.dealWithCurrentItem(item);
this.valueSpliceData(val)
}else{
this.valuePushData(val,1);
}
}else{
this.$Message.error('获取部门数据失败');
}
}.bind(this)).catch((XMLHttpRequest, textStatus, errorThrown) => {
this.$Message.error("获取部门数据异常，请联系管理员");
});
},
emitData(){
if(this.objectValue){
this.$emit('input', this.currentSelect);
this.$emit('dict-dataObj-changed',this.currentSelect,this.currentSelect,'');
}else{
this.$emit('input', this.values);
this.$emit('data-changed',this.values,this.currentSelect);
}
},
onSelectItem(item){
if(this.multiple){
return
}else{
if(this.onlyRoot){
this.emitSelectData(item);
}else if(!this.disableBranchNodes){
this.emitSelectData(item);
}else if(item.isLeaf||item.isleaf){
this.emitSelectData(item);
}else{
// this.$Message.error("当前节点为非叶子节点不可选择");
}
}
},
emitSelectData(item){
this.currentSelect = [];
this.currentSelect.push(item);
this.dataName = this.currentSelect[0].name;
if(this.objectValue){
this.$emit('input', this.currentSelect[0]);
this.$emit('dict-dataObj-changed',this.currentSelect[0],this.currentSelect[0].id);
}else{
this.$emit('data-changed',this.currentSelect[0].id,this.currentSelect);
this.$emit('input', this.currentSelect[0].id);
}
this.isClick = true;
this.leaveTree = true;
this.hideTree();
},
deleteItem(index){
this.values.splice(index,1);
this.currentSelect.splice(index,1);
if(this.objectValue){
this.$emit('dict-dataObj-changed',this.currentSelect,this.values);
}else{
this.$emit('data-changed',this.values,this.currentSelect);
}
},
clearSearchText(){
if(this.seatchText.length === 0&&this.searchStart){
this.searchStart = false;
this.optionsdata = this.optionsMetadaData;
}
},
onFocus(){
this.showTree = true;
this.isClick = false;
this.leaveTree = false;
if(this.optionsdata.length===0){
if(this.onlyRoot){
this.getRootListData();
}else{
this.getListData();
}
}else{
if(this.dataName === ''){
this.optionsdata = this.optionsMetadaData;
}
}
if(this.multiple){
this.vFocus = true;
this.$nextTick(() => {
this.$refs.muInputref.focus();
})
}
this.$refs.customTreeRef.addListener();
},
onBlur(){
},
hideTree(){
this.showTree = false;
// this.$refs.customTreeRef.removeListener();
// this.removerDomClickListener();
},
onEnter(){
this.getSearchData(this.dataName);
},
getSearchData(text){
this.searchStart = true;
let paramter={};
if(this.isCustom){
paramter = this.bodyParam;
}else{
let arr = [];
arr = JSON.parse(JSON.stringify(this.searchConditions));
paramter = {
type: this.masterName,
conditions: arr.concat(this.hideItem),
filterByAuth:this.filterByAuth,
searchText:text,
orders:this.sortParam
};
}
let _this = this;
window.GAMS.Util.invokeServer({
contentType: "application/json",
path: _this.curUrl || '/gams2/masterdata/listByCondition',
type: 'POST',
data:JSON.stringify(paramter)
}).then((data)=>{
_this.options1 = [];
_this.optionsdata = [];
_this.parList = [];
if( JSON.parse(data).totalCount!==0){
_this.optionsdata = JSON.parse(data).list;
}else{
_this.optionsdata.push(
{
'id':'99154446-a42d-4643-a59f-e5bef04654d9',
'label':'无查询结果',
'name':'无查询结果',
'isLeaf':true
}
);
}
}).catch((XMLHttpRequest, textStatus, errorThrown) => {
_this.$Message.error("获取查询数据异常");
});
},
onKeyDown(e){
if(e.key === "Backspace"){
if(e.target.value.length == 1){
this.optionsdata = this.optionsMetadaData;
}
}
// else if(e.key === 'Enter'){
// }
},
loadOptions1(parentNode,selected){
if(parentNode){
let _this = this;
let content = {
type: parentNode._type,
id: parentNode.id
}
window.GAMS.Util.invokeServer({
path: _this.getChlidren || '/gams2/masterdata/getChildren',
type: "POST",
contentType: "application/json",
data: JSON.stringify(content)
}).then((data, textStatus, response) => {
if(data){
parentNode.children = [];
for(const temp of JSON.parse(data)){
if(!temp.isLeaf) {
temp.children = [];
}
parentNode.children.push(temp);
if(_this.multiple&&_this.values.indexOf(parentNode.id) > -1){
_this.currentSelect.push(temp);
if(_this.multiple&&_this.values.length == 0){
_this.values = [];
}
_this.values.push(temp.id);
}
}
_this.saveDataById[parentNode.id] = JSON.parse(data);
}
}).catch((XMLHttpRequest, textStatus, errorThrown) => {
// _this.$Message.error("获取下级节点异常");
});
}
},
getRootListData(){
},
getListData(){
let paramter={};
if(this.isCustom){
paramter = this.bodyParam;
}else{
paramter = {
type: this.masterName,
conditions: this.conditions.concat(this.hideItem),
filterByAuth:this.filterByAuth,
orders:this.sortParam
};
}
let _this = this;
window.GAMS.Util.invokeServer({
contentType: "application/json",
path: _this.curUrl || '/gams2/masterdata/listByCondition',
type: 'POST',
data:JSON.stringify(paramter)
}).then((data)=>{
if(data){
if(JSON.parse(data).list.length > 0){
_this.optionsdata = [];
_this.options1 = [];
_this.optionsMetadaData = [];
for(const temp of JSON.parse(data).list){
if(!temp.isLeaf) {
temp.children = [];
}
_this.options1.push(temp);
_this.optionsMetadaData.push(temp);
_this.optionsdata.push(temp);
}
}
}else{
_this.$Message.error("获取数据失败");
}
}).catch((XMLHttpRequest, textStatus, errorThrown) => {
_this.$Message.error("获取数据异常，请联系管理员");
});
},
getDataById(val){
let content = {
id:val,
type:this.masterName,
}
if(this.isCustom){
content = this.bodyParam;
}else{
content = {
id:val,
type:this.masterName,
};
}
let _this = this;
window.GAMS.Util.invokeServer({
path: _this.curGetById||'/gams2/masterdata/getById',
type: "POST",
contentType: "application/json",
data: JSON.stringify(content)
}).then((data, textStatus, response) => {
if(data){
_this.currentSelect = [];
_this.currentSelect.push(JSON.parse(data));
_this.dataName = _this.currentSelect[0].name;
if(_this.objectValue){
_this.$emit('dict-dataObj-changed',_this.currentSelect[0],_this.currentSelect[0].id);
}else{
_this.$emit('data-changed',_this.currentSelect[0].id,_this.currentSelect);
}
}else{
_this.$Message.error("获取数据失败");
}
}).catch((XMLHttpRequest, textStatus, errorThrown) => {
_this.$Message.error("获取数据异常，请联系管理员");
});
},
getmultipleDataById(val){
if(typeof val === 'string'){
val = [val];
}
let paramter={};
if(this.isCustom){
paramter = this.bodyParam;
}else{
paramter = {
type: this.masterName,
conditions: [{ type:'UUID',
field:'id',
values: val,
operator: "IN"
}]
};
}
let _this = this;
window.GAMS.Util.invokeServer({
contentType: "application/json",
path: _this.curUrl || '/gams2/masterdata/listByCondition',
type: 'POST',
data:JSON.stringify(paramter)
}).then((data)=>{
if(data){
_this.currentSelect = [];
if(_this.objectValue){
_this.$emit('dict-dataObj-changed',_this.multiple?JSON.parse(data).list:JSON.parse(data).list[0],val);
}else{
_this.$emit('data-changed',val,JSON.parse(data).list);
}
_this.currentSelect = JSON.parse(data).list;
}else{
_this.$Message.error("获取多选资产归属失败");
}
}).catch((XMLHttpRequest, textStatus, errorThrown) => {
_this.$Message.error("获取多选资产归属异常，请联系管理员");
});
},
removerDomClickListener(){
document.body.removeEventListener('click', this.onClickAction, false);
this.$refs.customTreeRef.removeListener();
}
},
components: {
customTree
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
},
computed:{
hideTreeSelect(){
return this.isClick&&this.leaveTree;
}
},
beforeDestroy(){
this.removerDomClickListener();
}
};
</script>
<style lang="less" scoped>
@import "./multiples-select.less";
</style>