<template>
|
<avue-input-tree ref="referTree" class="w100" :clearable="true"
|
v-model="valueD"
|
:checked="checked"
|
:dic="treeData"
|
:disabled="disabled"
|
:lazy="lazy"
|
:leaf-only="referConfig.onlyLeaf"
|
:multiple="isMuti"
|
:node-click="nodeClick"
|
:placeholder="placeholder"
|
:props="props"
|
:default-expand-all="true"
|
:tree-load="treeLoad"></avue-input-tree>
|
</template>
|
|
<script>
|
import {getTree, getLazyTree} from "@/api/refer/tree";
|
import {verifyNull} from "@/util/validate";
|
|
export default {
|
name: "vciWebReferTree",
|
props: {
|
referConfig: {
|
type: Object,
|
},
|
value: {
|
type: String,
|
default: ''
|
},
|
text: {
|
type: String,
|
default: ''
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
title: {
|
type: String,
|
default:''
|
}, width: {
|
type: String,
|
default:'70%'
|
}, height: {
|
type: String,
|
default:(document.body.clientHeight-650)+'px'
|
},
|
reloadFormKey: {
|
type: String,
|
default: '',
|
}
|
},
|
data() {
|
return {
|
reloadData: this.referConfig.options.reloadData || false,
|
visible: false,
|
options: this.referConfig.options,
|
textD: this.text || '',
|
valueD: this.value || '',
|
lazy: this.referConfig.options.loadType == 'node',
|
isMuti: ("true" == this.referConfig.options.isMuti || this.referConfig.options.isMuti == true || this.referConfig.options.muti == true) ? true : false,
|
props: {
|
label: 'label',
|
value: 'value',
|
children: 'children'
|
},
|
config: {
|
valueField: this.referConfig.valueField || this.referConfig.options.valueField || 'id',
|
textField: this.referConfig.textField || this.referConfig.options.textField || "name",
|
textSep: this.referConfig.textSep || ' '
|
},
|
treeUrl: this.referConfig.options.url || 'defaultReferTree',
|
treeData: [],
|
checkedData: [],
|
currentNode: {},
|
params: {},
|
loadType: {'all': 'all', 'node': 'node'}
|
};
|
},
|
created() {
|
this.getParams();
|
},
|
mounted() {
|
if(!this.lazy){
|
if (this.options.data) {//如果是固定数据的情况下
|
this.treeData = this.options.data;
|
} else {
|
this.getTree();
|
}
|
}
|
},
|
watch:{
|
text:{
|
handler(val) {
|
this.textD=val;
|
}
|
},
|
value:{
|
handler(val) {
|
this.valueD=val;
|
}
|
},
|
reloadFormKey:{
|
handler(val) {
|
if(val != this.params[(this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey)]){
|
this.params[(this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey)] = val;
|
this.clearValue();
|
this.getTree();
|
}
|
},
|
}
|
},
|
computed: {
|
placeholder: function () {
|
return this.options.placeholder ? this.options.placeholder : this.title;
|
}
|
},
|
methods: {
|
getParams: function () {
|
var queryParams = {};
|
if (this.options.extraParams) {
|
queryParams = this.options.extraParams;
|
}
|
queryParams['referBusCode'] = this.options['referBusCode'];
|
if (this.options.useFormKey && this.options.formValues) {
|
//使用表单上的字段来过滤
|
queryParams[ (this.options.paramForFormKey ? this.options.paramForFormKey : this.options.useFormKey)] = this.options.formValues[this.options.useFormKey];
|
}
|
if (this.options.rootParams) {
|
for (let key in this.options.rootParams) {
|
queryParams[key] = this.options.rootParams[key];
|
}
|
}
|
this.params = queryParams;
|
|
},
|
getTree() {
|
//加载全部
|
getTree(this.params, this.treeUrl).then(res => {
|
this.treeData = this.initTreeData(res.data);
|
});
|
},
|
treeLoad: function (treeNode, resolve) {
|
//逐级加载
|
const parentId = (treeNode.level === 0) ? 0 : treeNode.data.attributes.id;
|
this.params.parentId = parentId;
|
this.params.parentValue = parentId;
|
|
if (this.options.rootParams && treeNode.level !== 0) {
|
for (var key in this.options.rootParams) {
|
delete this.params[key];
|
}
|
}
|
getLazyTree(this.params, this.treeUrl).then(res => {
|
resolve(this.initTreeData(res.data));
|
});
|
},
|
initTreeData:function (nodes){
|
let treeData=[];
|
if(nodes && nodes.length>0){
|
nodes.forEach(item => {
|
let children=item.children || [];
|
if(children && children.length>0){
|
children=this.initTreeData(children);
|
}
|
treeData.push({
|
label:item[this.config.textField],
|
value:item[this.config.valueField],
|
leaf: !item.children,
|
children:children,
|
attributes:item
|
});
|
});
|
}
|
return treeData;
|
},
|
nodeClick(data) {
|
if (!this.isMuti) {
|
this.setValue({checkedNodes: [data]});
|
}
|
},
|
checked(checkedNode, checkedData) {
|
this.setValue(checkedData);
|
},
|
clearValue(){
|
this.valueD = '';
|
this.textD = '';
|
let mapFields = this.referConfig.propMap || {};
|
try {
|
if (this.options.propMap) {
|
mapFields = Object.assign(mapFields,this.options.propMap);
|
}
|
if (this.options.mapProps) {
|
mapFields = Object.assign(mapFields,this.options.mapProps);
|
}
|
} catch (e) {
|
;
|
}
|
this.$emit("setReferValue", {
|
prop: this.referConfig.prop,
|
showProp: this.referConfig.showProp,
|
value: this.valueD,
|
text: this.textD,
|
rawData: [],
|
propMap: mapFields
|
});
|
this.visible = false;
|
},
|
setValue: function (checkedData) {
|
this.checkedData = checkedData;
|
let value = [];
|
let text = [];
|
let rawData=[];
|
const textSep = this.config.textSep;
|
for (var j = 0; j < checkedData.checkedNodes.length; j++) {
|
const item = checkedData.checkedNodes[j].attributes || checkedData.checkedNodes[j];
|
rawData.push(item);
|
let v = item[this.config.valueField] || item.extendData[this.config.valueField];
|
value.push(v);
|
var tempRaw = [];
|
var textFieldArray = this.config.textField.split(",");
|
for (var i = 0; i < textFieldArray.length; i++) {//显示的字段可能有多个
|
if (!verifyNull(textFieldArray[i])) {
|
var t = item[textFieldArray[i]] || item.extendData[textFieldArray[i]];
|
tempRaw.push(t);
|
}
|
}
|
text.push(tempRaw.join(textSep));
|
}
|
let mapFields = this.referConfig.propMap || {};
|
try {
|
if (this.options.propMap) {
|
mapFields = Object.assign(mapFields,this.options.propMap);
|
}
|
if (this.options.mapProps) {
|
mapFields = Object.assign(mapFields,this.options.mapProps);
|
}
|
} catch (e) {
|
;
|
}
|
this.valueD = value.join(',');
|
this.textD = text.join(',');
|
this.$emit("setReferValue", {
|
prop: this.referConfig.prop,
|
showProp: this.referConfig.showProp,
|
value: this.valueD,
|
text: this.textD || '',
|
isTreeMuti: this.isMuti,
|
rawData: rawData,
|
propMap: mapFields
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
|
</style>
|
