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;
|