766 lines
21 KiB
JavaScript
766 lines
21 KiB
JavaScript
import React from 'react';
|
||
import { message, Alert, Icon, Menu } from 'antd';
|
||
import { Search } from '@woowalker/feui'
|
||
import ComponentBase from "../ComponentBase";
|
||
import styles from '../Component.css';
|
||
import _ from 'lodash';
|
||
import { addRuleAndGroups, extendRule, getDataFieldValue, guid, initFilter, permissionUtils } from "../../utils/common";
|
||
|
||
class TreeBaseComponent extends ComponentBase {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: {},
|
||
treeConfig: {},
|
||
treeLoadParam: {},
|
||
treeSelectedNodeId: {},
|
||
treeExpandedKeys: {}
|
||
};
|
||
this.defaultTreeCode = 'tree';
|
||
};
|
||
componentDidMount() {
|
||
super.componentDidMount();
|
||
this.onLoadData();
|
||
const { onRegLoadFunc, } = this.props;
|
||
if (typeof onRegLoadFunc === 'function') {
|
||
onRegLoadFunc(({ treeCode = this.defaultTreeCode, searchValue }) => {
|
||
this.onLoadTreeData({
|
||
treeCode,
|
||
searchValue,
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
componentWillReceiveProps(NextProps) {
|
||
super.componentWillReceiveProps(NextProps);
|
||
}
|
||
|
||
onLoadData() {
|
||
const treeConfigs = this.onLoadTreeConfigList();
|
||
if (treeConfigs && treeConfigs.length) {
|
||
let treeConfig = this.state.treeConfig;
|
||
if (!treeConfig) {
|
||
treeConfig = {};
|
||
}
|
||
treeConfigs.forEach(t => {
|
||
if (t.treeCode === undefined) {
|
||
t.treeCode = this.defaultTreeCode;
|
||
}
|
||
treeConfig[t.treeCode] = t;
|
||
});
|
||
this.setState({
|
||
treeConfig,
|
||
}, () => {
|
||
const tempTreeConfig = this.state.treeConfig;
|
||
if (tempTreeConfig) {
|
||
Object.keys(tempTreeConfig).forEach((n) => {
|
||
this.onLoadTreeData({
|
||
treeCode: n,
|
||
treeConfig: tempTreeConfig[n],
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
onLoadTreeConfigList() { }
|
||
|
||
onLoadTreeData({ treeCode, searchValue, onComplete }) {
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
if (treeConfig) {
|
||
const { sort, order, relationField, relationId, api, orgType, ignoreOrgRule } = treeConfig;
|
||
|
||
if (!api) return;
|
||
const treeLoadParam = this.state.treeLoadParam;
|
||
let loadParam = treeLoadParam[treeCode];
|
||
|
||
if (!loadParam) {
|
||
loadParam = initFilter(this.props.login.OrgId, '', sort, order);
|
||
treeLoadParam[treeCode] = loadParam;
|
||
}
|
||
const rules = this.props && this.props.data && this.props.data.rules ? this.props.data.rules : [];
|
||
const json = JSON.parse(JSON.stringify(loadParam));//{ ...loadParam };
|
||
if (
|
||
(!relationField || relationField !== "PARENT_ID") &&
|
||
_.findIndex(rules, (o) => { return o.field === 'PARENT_ID' }) < 0) {
|
||
extendRule(json, "PARENT_ID", 1, "");
|
||
}
|
||
|
||
if (rules) {
|
||
rules.forEach(item => {
|
||
extendRule(json, item.field, item.operator, item.value, item.isSysParam);
|
||
});
|
||
}
|
||
if (orgType) {
|
||
json.OrgType = orgType;
|
||
}
|
||
if (searchValue) {
|
||
addRuleAndGroups(json, searchValue);
|
||
}
|
||
|
||
//填加关联字段过滤
|
||
if (relationField && relationId) {
|
||
extendRule(json, relationField, 1, relationId);
|
||
}
|
||
|
||
// 是否忽略组织权限
|
||
if (ignoreOrgRule) {
|
||
json.IgnoreOrgRule = ignoreOrgRule
|
||
}
|
||
|
||
this.props.dispatch({
|
||
type: 'app/getTableData',
|
||
payload: json,
|
||
url: api,
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
if (!ret.IsSuccessful) {
|
||
message.error(ret.ErrorMessage);
|
||
}
|
||
this.setTreeData({
|
||
treeCode,
|
||
data: ret.Data,
|
||
onComplete,
|
||
}, () => {
|
||
this.onAfterLoadTreeData();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
onAfterLoadTreeData() { }
|
||
|
||
onLoadTreeChildData({ treeCode, treeNode }) {
|
||
return new Promise((resolve, reject) => {
|
||
if (treeNode.props.dataRef.IS_LEAF) {
|
||
reject();
|
||
} else {
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
if (treeConfig) {
|
||
const { sort, order, api } = treeConfig;
|
||
let json = initFilter(this.props.login.OrgId, '', sort, order);
|
||
extendRule(json, "PARENT_ID", 1, treeNode.props.dataRef.ID);
|
||
this.props.dispatch({
|
||
type: 'app/getTableData',
|
||
payload: json,
|
||
url: api,
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
if (!ret.IsSuccessful) {
|
||
message.error(ret.ErrorMessage);
|
||
}
|
||
const treeData = this.getTreeData({ treeCode });
|
||
this.getTreeDataById(treeData, treeNode.props.dataRef.ID, (data) => {
|
||
if (!data.Children) {
|
||
data.Children = [];
|
||
}
|
||
if (ret.Data) {
|
||
ret.Data.forEach(t => {
|
||
data.Children.push(t);
|
||
});
|
||
}
|
||
});
|
||
this.setTreeData({
|
||
treeCode,
|
||
data: treeData,
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
resolve();
|
||
}
|
||
});
|
||
}
|
||
|
||
/*
|
||
获取树配置
|
||
*/
|
||
getTreeConfig(params) {
|
||
const { treeCode = this.defaultTreeCode } = params ? params : {};
|
||
let treeConfig = this.state.treeConfig;
|
||
if (!treeConfig) {
|
||
treeConfig = {};
|
||
}
|
||
return treeConfig[treeCode];
|
||
}
|
||
|
||
/*
|
||
设置树配置
|
||
*/
|
||
setTreeConfig(params) {
|
||
const { treeConfig, onComplete } = params ? params : {};
|
||
let tempTreeConfig = this.state.treeConfig;
|
||
if (!tempTreeConfig) {
|
||
tempTreeConfig = {};
|
||
}
|
||
if (treeConfig.treeCode === undefined) {
|
||
treeConfig.treeCode = this.defaultTreeCode;
|
||
}
|
||
tempTreeConfig = {
|
||
...tempTreeConfig,
|
||
[treeConfig.treeCode]: treeConfig,
|
||
};
|
||
this.setState({
|
||
treeConfig: tempTreeConfig
|
||
}, () => {
|
||
if (typeof onComplete === 'function') {
|
||
onComplete();
|
||
}
|
||
})
|
||
}
|
||
|
||
/*
|
||
获取树数据
|
||
*/
|
||
getTreeData(params) {
|
||
const { treeCode = this.defaultTreeCode } = params ? params : {};
|
||
let data = this.state.treeData;
|
||
if (!data) {
|
||
data = {};
|
||
}
|
||
return data[treeCode];
|
||
}
|
||
|
||
/*
|
||
设置树数据
|
||
*/
|
||
setTreeData({ treeCode, data, onComplete }) {
|
||
let tempData = this.state.treeData;
|
||
if (!tempData) {
|
||
tempData = {};
|
||
}
|
||
if (treeCode === undefined) {
|
||
treeCode = this.defaultTreeCode;
|
||
}
|
||
tempData = {
|
||
...tempData,
|
||
[treeCode]: data,
|
||
};
|
||
this.setState({
|
||
treeData: tempData,
|
||
}, () => {
|
||
if (typeof onComplete === 'function') {
|
||
onComplete();
|
||
}
|
||
});
|
||
}
|
||
|
||
/*
|
||
获取选中节点ID
|
||
*/
|
||
getSelectedNodeId(params) {
|
||
const { treeCode = this.defaultTreeCode } = params ? params : {};
|
||
let treeSelectedNodeId = this.state.treeSelectedNodeId;
|
||
if (!treeSelectedNodeId) {
|
||
treeSelectedNodeId = {};
|
||
}
|
||
return treeSelectedNodeId[treeCode];
|
||
}
|
||
|
||
/*
|
||
设置选中节点ID
|
||
*/
|
||
setSelectedNodeId({ treeCode, id, onComplete }) {
|
||
let treeSelectedNodeId = this.state.treeSelectedNodeId;
|
||
if (!treeSelectedNodeId) {
|
||
treeSelectedNodeId = {};
|
||
}
|
||
if (treeCode === undefined) {
|
||
treeCode = this.defaultTreeCode;
|
||
}
|
||
treeSelectedNodeId = {
|
||
...treeSelectedNodeId,
|
||
[treeCode]: id
|
||
};
|
||
this.setState({
|
||
treeSelectedNodeId
|
||
}, () => {
|
||
if (typeof onComplete === 'function') {
|
||
onComplete();
|
||
}
|
||
});
|
||
}
|
||
|
||
/*
|
||
获取树节点标题
|
||
*/
|
||
getTreeNodeTitle({ treeCode, titleColumns, data }) {
|
||
if (data.isAdd) {
|
||
return '新增节点';
|
||
}
|
||
if (!titleColumns) {
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
if (treeConfig) {
|
||
titleColumns = treeConfig.titleColumns;
|
||
}
|
||
}
|
||
if (titleColumns && titleColumns.length) {
|
||
let title = '';
|
||
titleColumns.forEach(t => {
|
||
let tmpValue = getDataFieldValue(data, t.field);
|
||
tmpValue = tmpValue == null || tmpValue == undefined ? '' : tmpValue;
|
||
title += tmpValue + "/";
|
||
});
|
||
title = title.substring(0, title.length - 1);
|
||
return title;
|
||
}
|
||
}
|
||
|
||
/*
|
||
树拖拽
|
||
{treeCode:树编号,dragId：当前拖拽的节点ID,dragParentId：拖拽后节点父节点ID,
|
||
originDragParentId：原始节点父节点ID,dropId：拖拽到节点ID（一般不用）}
|
||
*/
|
||
onTreeDrop({ treeCode, dragId, dragParentId, originDragParentId, dropId }) {
|
||
|
||
}
|
||
/*
|
||
获取选中节点标题
|
||
*/
|
||
getTreeNodeSelectedTitle(params) {
|
||
const { treeCode = this.defaultTreeCode } = params ? params : {};
|
||
let data = null;
|
||
const selectId = this.getSelectedNodeId({ treeCode });
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
if (selectId) {
|
||
const treeData = this.getTreeData({ treeCode });
|
||
this.getTreeDataById(
|
||
treeData,
|
||
selectId,
|
||
(nodeData) => {
|
||
data = nodeData;
|
||
}
|
||
);
|
||
}
|
||
if (data) {
|
||
if (data.isAdd) {
|
||
return '新增节点';
|
||
}
|
||
if (treeConfig && treeConfig.titleColumns && treeConfig.titleColumns.length) {
|
||
return this.getTreeNodeTitle({ treeCode, titleColumns: treeConfig.titleColumns, data });
|
||
}
|
||
return data.NAME;
|
||
}
|
||
}
|
||
/*
|
||
选中树节点
|
||
*/
|
||
selectTreeNode = (params) => {
|
||
const { treeCode = this.defaultTreeCode, id } = params ? params : {};
|
||
if (id) {
|
||
const treeData = this.getTreeData({ treeCode });
|
||
this.getTreeDataById(treeData, id, (ret) => {
|
||
this.setSelectedNodeId({
|
||
treeCode,
|
||
id,
|
||
onComplete: () => {
|
||
this.onSelectedTreeNode({
|
||
...params,
|
||
treeCode,
|
||
data: ret,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
else {
|
||
this.setSelectedNodeId({
|
||
treeCode,
|
||
id,
|
||
onComplete: () => {
|
||
this.onSelectedTreeNode({
|
||
...params,
|
||
treeCode,
|
||
data: null,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
/*
|
||
选中树节点事件
|
||
*/
|
||
onSelectedTreeNode(params) {
|
||
const { treeCode, id, data } = params ? params : {};
|
||
|
||
}
|
||
|
||
/*
|
||
设置展开树键值
|
||
*/
|
||
setTreeExpandedKeys({ treeCode, expandedKeys, onComplete }) {
|
||
if (treeCode === undefined) {
|
||
treeCode = this.defaultTreeCode;
|
||
}
|
||
let treeExpandedKeys = this.state.treeExpandedKeys;
|
||
if (!treeExpandedKeys) {
|
||
treeExpandedKeys = {};
|
||
}
|
||
treeExpandedKeys = {
|
||
...treeExpandedKeys,
|
||
[treeCode]: expandedKeys,
|
||
};
|
||
this.setState({
|
||
treeExpandedKeys
|
||
}, () => {
|
||
if (typeof onComplete === 'function') {
|
||
onComplete();
|
||
}
|
||
});
|
||
}
|
||
|
||
/*
|
||
获取右键菜单
|
||
*/
|
||
getTreeNodeContextMenu(params) {
|
||
const { data, treeCode = this.defaultTreeCode } = params ? params : {};
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
const selectId = this.getSelectedNodeId({ treeCode });
|
||
if (treeConfig) {
|
||
//添加同级菜单按钮到列表中
|
||
if (treeConfig.btns) {
|
||
const index = treeConfig.btns.findIndex(t => t.btnType === 3);
|
||
const index2 = treeConfig.btns.findIndex(t => t.btnType === 3 && t.isAddChild);
|
||
if (index !== -1 && index2 === -1) {
|
||
const item = treeConfig.btns[index];
|
||
treeConfig.btns.splice(index, 0, { ...item, id: guid(), pId: item.id, isAddChild: true });
|
||
}
|
||
}
|
||
return <Menu className={styles.contextMenuList}>
|
||
{
|
||
treeConfig.btns ? treeConfig.btns.map(t => {
|
||
if (t.btnType === undefined) return null;
|
||
if (t.isRule && !permissionUtils(this.props.login).checkBtn(treeConfig.formId, (t.pId ? t.pId : t.id))) return null;
|
||
if (!this.showBtn(t, data)) return null;
|
||
if (t.btnType === 3) {//新增
|
||
if (t.isAddChild) {
|
||
return <Menu.Item key="sibling" onClick={() => this.addTreeNode({ treeCode, level: 'parent', id: data.ID })} disabled={data.isAdd || t.disabled || selectId !== data.ID}>
|
||
<Icon type="plus" />新增同级
|
||
</Menu.Item>
|
||
}
|
||
return <Menu.Item key="next" onClick={() => this.addTreeNode({ treeCode, level: 'childred', id: data.ID })} disabled={data.isAdd || t.disabled || selectId !== data.ID}>
|
||
<Icon type="plus" />新增下级
|
||
</Menu.Item>
|
||
}
|
||
else if (t.btnType === 4) {//删除
|
||
return <Menu.Item key="del" onClick={() => this.deleteTreeNode({ treeCode, id: data.ID })} disabled={t.disabled || selectId !== data.ID}>
|
||
<Icon type="delete" />删除
|
||
</Menu.Item>
|
||
}
|
||
else if (t.btnType === 10) {//复制新增
|
||
return <Menu.Item key={'copy'} onClick={() => this.addTreeNode({ treeCode, level: 'parent', id: data.ID, isCopy: true })}
|
||
disabled={data.isAdd || !selectId || t.disabled || selectId !== data.ID}>
|
||
<Icon type="copy" />复制新增
|
||
</Menu.Item>
|
||
}
|
||
return null;
|
||
}) : null
|
||
}
|
||
{
|
||
this.onTreeNodeContextMenu({ ...params, treeConfig })
|
||
}
|
||
</Menu>;
|
||
}
|
||
}
|
||
|
||
showBtn = (t, nodeData) => {
|
||
let isshow = false;
|
||
if (!t.btn_condition) {
|
||
isshow = true;
|
||
} else {
|
||
isshow = false;
|
||
const conditions = t.btn_condition.split('|');
|
||
for (let condition of conditions) {
|
||
const fields = condition.split(',');
|
||
const val = getDataFieldValue(nodeData, fields[0]);
|
||
if (parseInt(fields[1], 10) === 1 && String(val) === String(fields[2])) {
|
||
isshow = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
return isshow
|
||
}
|
||
|
||
/*
|
||
获取树节点右击菜单
|
||
{
|
||
data, //节点数据
|
||
treeCode,//树编号
|
||
treeConfig//树配置信息
|
||
}
|
||
*/
|
||
onTreeNodeContextMenu(params) {
|
||
const { data, treeCode, treeConfig } = params ? params : {};
|
||
}
|
||
|
||
|
||
/*
|
||
新增树节点
|
||
*/
|
||
addTreeNode({ treeCode, isCopy, level, id }) {
|
||
let treeData = this.getTreeData({ treeCode });
|
||
if(!treeData){
|
||
treeData=[];
|
||
}
|
||
const newId = guid();
|
||
const menuKey = 'treeNodeMenuKey_' + treeCode + '_' + id;//右击菜单键值 用于菜单隐藏
|
||
const data = { ID: newId, IS_LEAF: true, isAdd: true };
|
||
let treeExpandedKeys = this.state.treeExpandedKeys;//展开键值列表
|
||
if (!treeExpandedKeys) {
|
||
treeExpandedKeys = {};
|
||
}
|
||
let parentId = null;
|
||
if (level === 'parent') {//新增当前节点同级
|
||
this.getTreeParentById(treeData, id, (parent) => {
|
||
if (parent) {
|
||
parentId = parent.ID;
|
||
}
|
||
});
|
||
}
|
||
else if (level === 'childred') {//新增当前节点下级
|
||
parentId = id;
|
||
}
|
||
|
||
// 删除前一次增加未保存项
|
||
function delAdding(loop) {
|
||
if (loop) {
|
||
loop.forEach((item, key) => {
|
||
if (item.hasOwnProperty("isAdd") && item["isAdd"]) {
|
||
loop.splice(key, 1);
|
||
}
|
||
if (item.Children) {
|
||
delAdding(item.Children)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
delAdding(treeData);
|
||
|
||
//添加到树数据中
|
||
this.addTreeDataByParentId(treeData, parentId, data);
|
||
|
||
if (parentId) {
|
||
let tempKeys = treeExpandedKeys[treeCode];
|
||
if (!tempKeys) {
|
||
tempKeys = [];
|
||
}
|
||
tempKeys.push(parentId);
|
||
treeExpandedKeys = {
|
||
...treeExpandedKeys,
|
||
[treeCode]: tempKeys,
|
||
};
|
||
}
|
||
let numArr = treeData
|
||
let num = 0;
|
||
if (parentId) {
|
||
// 找跟自己同级的节点，并分配NUM
|
||
const findChildren = function (arr, targetId) {
|
||
const find = arr.find(ar => ar.ID === targetId)
|
||
if (find && find.Children && find.Children.length) {
|
||
numArr = find.Children
|
||
} else {
|
||
for (let i = 0, j = arr.length; i < j; i++) {
|
||
if (arr[i].Children && arr[i].Children.length) {
|
||
findChildren(arr[i].Children, targetId)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
findChildren(treeData, parentId)
|
||
}
|
||
if (numArr) {
|
||
numArr.forEach((n, i) => {
|
||
if (n.NUM && n.NUM > num) {
|
||
num = n.NUM;
|
||
}
|
||
});
|
||
}
|
||
|
||
num++;
|
||
data.NUM = num;
|
||
data.PARENT_ID = parentId;
|
||
let copySrcId = '';
|
||
if (isCopy) {
|
||
copySrcId = id;
|
||
}
|
||
this.setState({
|
||
treeExpandedKeys,
|
||
[menuKey]: false,
|
||
copySrcId,
|
||
}, () => {
|
||
this.setTreeData({
|
||
treeCode, data: treeData, onComplete: () => {
|
||
this.selectTreeNode({ treeCode, isAdd: true, id: newId });
|
||
}
|
||
});
|
||
this.onAfterAddTreeNode({ treeCode, newId, parentId, id, isCopy, newData: data, });
|
||
});
|
||
}
|
||
|
||
/*
|
||
新增树节点 后
|
||
treeCode,
|
||
newId, //新增节点ID
|
||
parentId,//新增节点的父节点ID
|
||
id,//来源节点ID 可能为空
|
||
isCopy,//是否拷贝
|
||
newData,//新增节点数据
|
||
*/
|
||
onAfterAddTreeNode(params) {
|
||
const { treeCode, newId, parentId, id, isCopy, newData } = params;
|
||
}
|
||
|
||
|
||
/*
|
||
删除树节点
|
||
*/
|
||
deleteTreeNode(params) {
|
||
const { treeCode = this.defaultTreeCode, id } = params ? params : {};
|
||
const menuKey = 'treeNodeMenuKey_' + treeCode + '_' + id;//右击菜单键值 用于菜单隐藏
|
||
this.setState({
|
||
[menuKey]: false,
|
||
});
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
if (treeConfig) {
|
||
const { deleteApi } = treeConfig;
|
||
const doDeleteTreeNode = () => {
|
||
const treeData = this.getTreeData({ treeCode });
|
||
let nodeData = null;
|
||
this.deleteTreeDataById(treeData, id, null, (d) => {
|
||
nodeData = d;
|
||
});
|
||
if (deleteApi) {
|
||
this.addDeleteLog({ formCode: treeConfig.formCode, ids: id, formId: treeConfig.formId, extData: ('删除数据，详情：' + (nodeData ? JSON.stringify(nodeData) : '')) });
|
||
}
|
||
this.setState({
|
||
parentId: '',
|
||
}, () => {
|
||
this.selectTreeNode({ treeCode, id: null });
|
||
this.onAfterDeleteTreeNode({ treeCode, id });
|
||
|
||
});
|
||
};
|
||
if (deleteApi) {
|
||
this.props.dispatch({
|
||
type: 'app/deleteItemBatch',
|
||
payload: {
|
||
ids: id
|
||
},
|
||
url: deleteApi,
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
message.success('删除成功');
|
||
doDeleteTreeNode();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
else {
|
||
doDeleteTreeNode();
|
||
}
|
||
}
|
||
}
|
||
|
||
/*
|
||
删除树节点 后
|
||
{
|
||
treeCode,树编号
|
||
id//删除节点ID
|
||
}
|
||
|
||
*/
|
||
onAfterDeleteTreeNode(params) {
|
||
const { treeCode, id } = params ? params : {};
|
||
}
|
||
|
||
|
||
|
||
|
||
/*
|
||
根据树编号渲染树
|
||
*/
|
||
getRenderTreeByConfig(treeCode) {
|
||
if (treeCode === undefined) {
|
||
treeCode = this.defaultTreeCode;
|
||
}
|
||
const treeConfig = this.getTreeConfig({ treeCode });
|
||
if (treeConfig) {
|
||
const treeData = this.getTreeData({ treeCode });
|
||
const hasData = treeData && treeData.length;
|
||
const { formCode, queryCode, sort, order, titleColumns, draggable } = treeConfig;
|
||
const title = this.getTreeNodeSelectedTitle({ treeCode });
|
||
const expandedKeys = this.state.treeExpandedKeys[treeCode];
|
||
const selectedId = this.getSelectedNodeId({ treeCode });
|
||
return <div className={styles.treeBox}>
|
||
<Search formCode={formCode} code={queryCode} onSearch={(value) => this.onLoadTreeData({ treeCode, searchValue: value })} />
|
||
{
|
||
hasData
|
||
? <div className={styles.tipToContextMenu}>右键[添加/修改]</div>
|
||
: <div className={`${styles.tipToContextMenu} ${styles.addNode}`} onClick={() => this.addTreeNode({ treeCode, level: 'all', id: null })}><Icon type="plus" />新增</div>
|
||
}
|
||
{
|
||
title
|
||
&& <Alert message={<span>当前选中：{title}</span>} type="success" />
|
||
}
|
||
{
|
||
hasData
|
||
? this.getRenderTree({
|
||
data: treeData, //数据
|
||
treeCode,//树编号
|
||
onLoadData: (({ treeCode: tempTreeCode, treeNode }) => {//加载数据事件
|
||
return this.onLoadTreeChildData({
|
||
treeCode: tempTreeCode,
|
||
treeNode
|
||
});
|
||
}),
|
||
onSelect: (params => {//选中节点事件
|
||
this.selectTreeNode(params);
|
||
}),
|
||
expandedKeys,//已展开直接列表
|
||
selectedId,//当前选中节点ID
|
||
onExpand: ({ expandedKeys }) => {//展开事件
|
||
this.setTreeExpandedKeys({ treeCode, expandedKeys });
|
||
},
|
||
sort,//排序字段
|
||
order,//排序类型
|
||
onContextMenu: (params) => {//获取节点右击菜单列表事件
|
||
return this.getTreeNodeContextMenu({ ...params, treeCode });
|
||
},
|
||
getTreeNodeTitle: ({ data }) => {//获取节点标题函数
|
||
return this.getTreeNodeTitle({ treeCode, titleColumns, data });
|
||
},
|
||
draggable,//是否拖拽
|
||
onDrop: (updateData, dragId, dragParentId, dropId, originDragParentId) => {//拖拽事件
|
||
this.setTreeData({
|
||
treeCode, data: updateData, onComplete: () => {
|
||
this.onTreeDrop({ treeCode, dragId, dragParentId, dropId, originDragParentId });
|
||
}
|
||
});
|
||
},
|
||
}) : <div style={{ textAlign: "center" }}>无数据</div>
|
||
}
|
||
</div>
|
||
}
|
||
}
|
||
|
||
|
||
|
||
render() {
|
||
return (
|
||
<div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default TreeBaseComponent;
|