<template>
|
<div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
|
<dynamic-button v-if="componentVO.buttons && componentVO.buttons.length>0" :componentVO="componentVO"
|
:key="areasName+'buttons-'+componentVO.oid"
|
:butttonList="componentVO.buttons" :dataStore="checkDatas"
|
@afterMethod="handleRefresh"
|
@refresh="initData"
|
:sourceData="sourceData" type="tree" style="margin-bottom: 5px;"></dynamic-button>
|
<el-input
|
placeholder="输入关键字进行过滤"
|
v-model="filterText">
|
</el-input>
|
<el-tree
|
class="filter-tree"
|
:show-checkbox="isMuti"
|
:check-on-click-node="true"
|
:lazy="lazy"
|
:data="data"
|
:load="loadNode"
|
:props="defaultProps"
|
:filter-node-method="filterNode"
|
highlight-current
|
node-key="oid"
|
@check="checkNode"
|
@current-change="changeNode"
|
@node-click="clickNode"
|
ref="tree">
|
</el-tree>
|
</div>
|
</template>
|
|
<script>
|
import {getList, getTree} from '@/api/base/ui'
|
import {validatenull} from "@/util/validate";
|
|
export default {
|
name: "dynamic-tree",
|
props:{
|
//ui上下文的业务类型（或链接类型）
|
uiBtmType: {
|
type: String
|
},
|
//ui上下文
|
uiContext:{
|
type: String
|
},
|
componentVO:{
|
type:Object,
|
default: {}
|
},
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
canEdit:{
|
//内容是否可编辑
|
type:Boolean,
|
default:false
|
},
|
actionType:{
|
//按钮操作类型
|
default:""
|
},
|
areasName:{
|
type:String,
|
default:''
|
},
|
sourceData:{
|
//菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
|
type:Object,
|
default: {}
|
},
|
//上一区域业务类型
|
sourceBtmType:{
|
type: String
|
},
|
dataStore:{
|
//弹窗时按钮所属区域选中数据
|
type:Array,
|
default: []
|
},
|
paramVOS:{
|
type:Object,
|
default: {}
|
},
|
isShow: {
|
//所在区域是否已显示，针对tab和collapse
|
type: Boolean,
|
default: true
|
},
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
isShow:{
|
handler(newval) {
|
if(newval) {
|
//console.log(this.$el.clientHeight)
|
}
|
}
|
},
|
checkDatas:{
|
handler(newval) {
|
if(newval) {
|
this.$emit("setDataStore", {
|
area: this.areasName,
|
type:this.componentVO.uiComponentType,
|
btmType:this.componentVO.treeDefineVO.btmType,
|
dataStore:newval
|
});
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
data:{
|
handler(newval) {
|
if(newval) {
|
this.$emit("setData", {
|
area: this.areasName,
|
type:this.componentVO.uiComponentType,
|
currentDefineVO:this.componentVO.treeDefineVO,
|
data:newval
|
});
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
sourceData:{
|
handler(newval) {
|
//源数据有变化时变更当前区域数据
|
this.sourceDataMapParams=this.sourceDataMap();
|
this.getParams();
|
this.handleRefresh();
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
filterText: '',
|
defaultProps: {
|
children: 'children',
|
label: 'text'
|
},
|
lazy:this.componentVO.treeDefineVO.loadType == 'node',
|
isMuti:false,
|
data:[],
|
checkDatas:[],
|
currentClickNode:null,
|
params:{},
|
sourceDataMapParams:{}
|
}
|
},
|
created() {
|
},
|
mounted() {
|
if(this.componentVO.buttons && this.componentVO.buttons.length>0){
|
this.$children[2].$el.style.height = 'calc(100% - 50px - '+this.$children[0].$el.clientHeight+'px - 10px)';
|
}
|
},
|
methods: {
|
filterNode(value, data) {
|
if (!value) return true;
|
return data[this.defaultProps.label].indexOf(value) !== -1;
|
},
|
sourceDataMap: function () {
|
const sourceDataMap = {};
|
if (Object.keys(this.sourceData).length > 0) {
|
if (this.sourceData.oid) {
|
if (this.sourceData.oid.indexOf('@vcitreesep@') > -1) {
|
this.sourceData.oid = this.sourceData.oid.split('@vcitreesep@')[1];
|
}
|
sourceDataMap.sourceBtmName = this.sourceBtmType;
|
sourceDataMap.sourceOid = this.sourceData.oid;
|
}
|
for (let i in this.sourceData) {
|
const item = this.sourceData[i]
|
if (item && item.constructor === Object) continue;
|
if (['type', 'context', 'content', 'querytemplate', 'querytype'].includes(i)) continue;
|
sourceDataMap['sourceData["' + i + '"]'] = item
|
}
|
}
|
|
if (Object.keys(this.paramVOS).length > 0) {
|
for (let j in this.paramVOS) {
|
if (this.paramVOS[j] && this.paramVOS[j].constructor === Object) continue;
|
if (['type', 'context', 'content', "getdataurl", "getdatamethod", "url", "method", "uploadfileurl", "title", 'querytemplate', 'querytype', 'usesourcedata'].includes(j)) continue;
|
sourceDataMap['sourceData["' + j + '"]'] = this.paramVOS[j]
|
}
|
}
|
return sourceDataMap;
|
},
|
getParams: function () {
|
let parentFieldName = "";
|
if (this.componentVO.treeDefineVO.showLinkAbs) {
|
parentFieldName = this.componentVO.treeDefineVO.showLinkAbs.split(",")[0];
|
}
|
const queryTemplate=this.sourceData.querytemplate || this.paramVOS.querytemplate;
|
const linkTypeFlag=this.sourceData.querytype==0?false:(!validatenull(this.sourceData.linktype)?true:(this.paramVOS.querytype==0?false:true));
|
const treeParams = {
|
queryAllLevel: !this.lazy,
|
loadType: this.componentVO.treeDefineVO.loadType,
|
multipleSelect: this.isMuti,
|
isMuti: this.isMuti,
|
isQueryAllColumn: true,
|
btmname: this.componentVO.treeDefineVO.btmType,
|
componentOid: this.componentVO.oid,
|
uiDefineId: this.uiContext,
|
valueField: this.componentVO.treeDefineVO.valueField || 'oid',
|
parentFieldName: parentFieldName,
|
textField: this.componentVO.treeDefineVO.treeNodeExpression,
|
queryTemplate: queryTemplate,
|
linkTypeFlag: linkTypeFlag,
|
rootExpress: this.componentVO.treeDefineVO.rootContent || ''
|
}
|
const sourceDataMapList = this.sourceDataMapParams;
|
|
this.params = Object.assign({}, treeParams, sourceDataMapList);
|
},
|
initData() {
|
this.data=[];
|
if (Object.keys(this.sourceData).length > 0 && this.isShow) {
|
getTree(null, null, Object.assign({
|
queryRoot: true
|
}, this.params)).then(res => {
|
this.data = res.data.treeData;
|
}).catch(error => {
|
this.$message.error(error);
|
})
|
}
|
},
|
loadNode(node, resolve) {
|
//逐级加载
|
let parentOid = (node.level === 0) ? 0 : node.data.oid;
|
if (parentOid != 0 && parentOid.indexOf('@vcitreesep@') > -1) {
|
parentOid = parentOid.split('@vcitreesep@')[1];
|
}
|
const parentBtmName = (node.level === 0) ? '' : node.data.attributes.btmname;
|
const params = this.params;
|
let url='';
|
if (node.level === 0) {
|
params.queryRoot = true;
|
if(this.paramVOS.querytemplate){
|
//说明是通过按钮点击打开的，Action参数中配置有this.paramVOS.querytemplate
|
url="/api/uiDataController/getDataByTemp";
|
}
|
} else {
|
delete params.queryRoot;
|
if(this.paramVOS.querytemplate){
|
//说明是通过按钮点击打开的，Action参数中配置有this.paramVOS.querytemplate
|
delete params.queryTemplate;
|
delete params.linkTypeFlag;
|
}
|
}
|
getTree(parentOid, parentBtmName, params,url).then(res => {
|
resolve(res.data.treeData )
|
this.$nextTick(()=>{
|
if (this.isRefresh) {
|
this.$refs.tree.setCurrentKey(this.currentClickNode.data.oid);
|
this.isRefresh=false;
|
}
|
})
|
}).catch(error => {
|
this.$message.error(error);
|
})
|
},
|
checkNode(checkedNode, checkedData) {
|
if (this.isMuti) {
|
let checkDatas = [];
|
checkedData.checkedNodes.forEach(item=>{
|
checkDatas.push(item.attributes)
|
})
|
this.checkDatas=checkDatas;
|
}
|
},
|
changeNode(data, node) {
|
if (!this.isMuti) {
|
this.checkDatas = [data.attributes];
|
}
|
},
|
clickNode(data, node) {
|
this.currentClickNode = node;
|
},
|
handleRefresh(type,data) {
|
//type:add\edit\delete
|
if(type=="delete" || type=="del"){
|
this.$refs.tree.remove(this.currentClickNode);
|
this.currentClickNode=null;
|
}else{
|
if (!this.lazy) {
|
this.initData();
|
} else {
|
if (this.currentClickNode) {
|
let node = this.currentClickNode.parent;
|
node.loaded = false;
|
node.expand();
|
this.isRefresh=true;
|
this.$refs.tree.setCurrentNode(this.currentClickNode);
|
}
|
}
|
}
|
this.checkDatas = [];
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.filter-tree{
|
height: calc(100% - 50px);
|
overflow: auto;
|
box-sizing: border-box;
|
padding-top: 10px;
|
}
|
</style>
|
