267 lines
11 KiB
JavaScript
267 lines
11 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 公式列表
|
|
* Description:
|
|
* Date: 2023/4/25
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
|
|
import { Tree } from "antd";
|
|
import cs from "classnames";
|
|
import { formualSearchField, formualSearchGroup, getFormulaDes } from "../../../apis/item";
|
|
import "../index.less";
|
|
|
|
const TreeNode = Tree.TreeNode;
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
class CodeAction extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
disabled: false,
|
|
variableText: "",
|
|
funcText: "",
|
|
variItemText: "",
|
|
variableList: [], //变量列表
|
|
variableExpandedKeys: [], //变量展开的节点
|
|
funcList: [], //函数列表
|
|
funcExpandedKeys: [], //函数展开的节点
|
|
funcHoverItem: {} //选中的函数节点
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { groupParams = {} } = this.props;
|
|
this.getFormulaDes();
|
|
this.formualSearchGroup(groupParams);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
const { isCustomFunction, isCustomFunctionClick, onChangeCustomFunction } = nextProps;
|
|
if (isCustomFunction === "1" && !isCustomFunctionClick) {
|
|
this.setState({ disabled: true });
|
|
} else {
|
|
this.setState({ disabled: false }, () => {
|
|
isCustomFunction === "1" && onChangeCustomFunction("0");
|
|
});
|
|
}
|
|
}
|
|
|
|
getFormulaDes = () => {
|
|
getFormulaDes().then(({ data }) => {
|
|
if (!_.isEmpty(data)) this.setState({ funcList: data });
|
|
});
|
|
};
|
|
formualSearchGroup = (payload) => {
|
|
formualSearchGroup(payload).then(({ status, data }) => {
|
|
if (status) this.setState({
|
|
variableList: _.map(data, item => ({
|
|
...item,
|
|
children: [{ name: "", fieldId: "searchInput" }]
|
|
}))
|
|
});
|
|
});
|
|
};
|
|
formualSearchField = (sourceId) => {
|
|
const { groupParams } = this.props;
|
|
const { variableList } = this.state;
|
|
formualSearchField({ sourceId, extendParam: { ...groupParams } }).then(({ status, data }) => {
|
|
if (status) {
|
|
this.setState({
|
|
variableList: _.map(variableList, it => ({
|
|
...it,
|
|
children: sourceId === it.key ? [...it.children, ...data] : [...it.children]
|
|
}))
|
|
});
|
|
}
|
|
});
|
|
};
|
|
handleExpandVari = (variableExpandedKeys, { expanded, node }) => {
|
|
const { props: { eventKey } } = node;
|
|
const { variableList } = this.state;
|
|
this.setState({ variableExpandedKeys });
|
|
if (expanded) {
|
|
this.formualSearchField(eventKey);
|
|
} else {
|
|
this.setState({
|
|
variableList: _.map(variableList, it => ({
|
|
...it,
|
|
children: eventKey === it.key ? [{ name: "", fieldId: "searchInput" }] : [...it.children]
|
|
}))
|
|
});
|
|
}
|
|
};
|
|
handleVariNode = (selectedKeys) => {
|
|
const { onVariSelect } = this.props;
|
|
const { variableList } = this.state;
|
|
const parentNode = _.map(variableList, it => it.key);
|
|
if (selectedKeys.join() && selectedKeys.join().indexOf("searchInput") === -1 &&
|
|
!parentNode.includes(selectedKeys.join())) {
|
|
const selectParentNodeKey = selectedKeys.join().split("_")[0];
|
|
const convertStr = _.reduce(variableList, (pre, cur) => {
|
|
if (cur.key === selectParentNodeKey) {
|
|
return pre + cur.value + "." + _.find(cur.children, child => child.fieldId === selectedKeys.join()).name;
|
|
}
|
|
return pre;
|
|
}, "");
|
|
onVariSelect(convertStr);
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
variableList, variableExpandedKeys, variableText, variItemText,
|
|
funcList, funcText, funcExpandedKeys, funcHoverItem, disabled
|
|
} = this.state;
|
|
const { groupParams = {} } = this.props;
|
|
const { referenceType } = groupParams;
|
|
const variableDatalist = _.filter(variableList, it => it.value.indexOf(variableText) !== -1);
|
|
const funcDatalist = _.map(funcList, it => ({
|
|
...it,
|
|
children: _.filter(it.children, child => _.lowerCase(child.name).indexOf(_.lowerCase(funcText)) !== -1)
|
|
}));
|
|
return (
|
|
<div className="excel-codeAction">
|
|
<div className="excel-codeAction-item">
|
|
<div className="excel-codeAction-header">
|
|
<div className="excel-codeAction-header-title">{getLabel(33748, "变量")}</div>
|
|
</div>
|
|
<div className="excel-codeAction-content">
|
|
<WeaInputSearch value={variableText} placeholder={getLabel(125864, "请输入变量名称")}
|
|
className="variableOuterInput"
|
|
onChange={variableText => this.setState({ variableText })}/>
|
|
<Tree className="variableTree" showLine expandedKeys={variableExpandedKeys}
|
|
onExpand={this.handleExpandVari} onSelect={this.handleVariNode}
|
|
>
|
|
{
|
|
_.map(variableDatalist, item => {
|
|
const { key, value, children = [] } = item;
|
|
const itemChildren = _.filter(children.slice(1), it => it.name.indexOf(variItemText) !== -1);
|
|
return <TreeNode title={value} key={key}>
|
|
{
|
|
_.map([...children.slice(0, 1), ...itemChildren], (child, childIndex) => {
|
|
const { name, fieldId, fieldType } = child;
|
|
return (
|
|
fieldId === "searchInput" ?
|
|
<TreeNode
|
|
title={
|
|
<WeaInputSearch
|
|
value={variItemText}
|
|
placeholder={getLabel(125864, "请输入变量名称")}
|
|
onChange={variItemText => this.setState({ variItemText })}
|
|
/>
|
|
}
|
|
key={fieldId + "_" + childIndex}/> :
|
|
<TreeNode title={
|
|
<div className="weapp-excel-code-action-list-variable">
|
|
<span className="weapp-excel-code-action-list-variable-name">{name}</span>
|
|
{
|
|
fieldType ?
|
|
<span
|
|
className={cs("weapp-excel-code-action-list-variable-tip", { "danger": fieldType === "string" })}>{fieldType === "number" ? "数字" : "文本"}</span> :
|
|
<span></span>
|
|
}
|
|
</div>
|
|
} key={fieldId}/>
|
|
);
|
|
})
|
|
}
|
|
</TreeNode>;
|
|
})
|
|
}
|
|
</Tree>
|
|
</div>
|
|
</div>
|
|
{
|
|
referenceType !== "sql" &&
|
|
<React.Fragment>
|
|
<div className="excel-codeAction-item">
|
|
<div className="excel-codeAction-header">
|
|
<div className="excel-codeAction-header-title">{getLabel(30686, "函数")}</div>
|
|
</div>
|
|
<div className="excel-codeAction-content">
|
|
<WeaInputSearch value={funcText} placeholder={getLabel(543713, "请输入函数名称")}
|
|
className="variableOuterInput"
|
|
onChange={funcText => this.setState({ funcText })}/>
|
|
<Tree className="variableTree" showLine expandedKeys={funcExpandedKeys}
|
|
onExpand={funcExpandedKeys => this.setState({ funcExpandedKeys })}
|
|
>
|
|
{
|
|
_.map(funcDatalist, item => {
|
|
const { name, dataType, children = [] } = item;
|
|
return <TreeNode title={name} disabled={disabled} key={dataType}>
|
|
{
|
|
_.map(children, (child, childIndex) => {
|
|
const { name: childName, chineseName } = child;
|
|
return (
|
|
<TreeNode
|
|
disabled={disabled}
|
|
title={
|
|
<div className="funcListTitle"
|
|
onClick={() => this.props.onFuncSelect(childName)}
|
|
onMouseEnter={() => this.setState({ funcHoverItem: child })}>
|
|
<span className="functionName" title={childName}>{childName}</span>
|
|
<span className="functionDesc" title={chineseName}>{chineseName}</span>
|
|
</div>
|
|
}
|
|
key={childIndex}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
</TreeNode>;
|
|
})
|
|
}
|
|
</Tree>
|
|
</div>
|
|
</div>
|
|
<div className="excel-codeAction-item">
|
|
<div className="excel-codeAction-header">
|
|
<div className="excel-codeAction-header-title">
|
|
{!_.isEmpty(funcHoverItem) ? funcHoverItem.name : getLabel(558, "提示")}
|
|
</div>
|
|
</div>
|
|
<div className="excel-codeAction-content"><TipList tips={funcHoverItem}/></div>
|
|
</div>
|
|
</React.Fragment>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CodeAction;
|
|
|
|
const TipList = (props) => {
|
|
const { tips } = props;
|
|
const { paramDescs = [], formatString, description, example, result } = tips;
|
|
return _.isEmpty(tips) ? <div className="code-action-list">
|
|
<div className="code-action-tips">
|
|
{/*<div>{getLabel(111, "{C:选项} 用来选择特定选项字段下的备选项")}</div>*/}
|
|
{/*<div>{getLabel(111, "{U:姓名} 用来选择工作区成员")}</div>*/}
|
|
{/*<div>{getLabel(111, "{D:数据} 用来选择一个部门")}</div>*/}
|
|
</div>
|
|
</div> : <div className="code-action-list">
|
|
<div className="code-action-tips">
|
|
<div className="code-action-tips-title">{getLabel(543403, "语法")}</div>
|
|
<div className="code-action-tips-info">
|
|
<div>{formatString}</div>
|
|
<div>{description}</div>
|
|
</div>
|
|
<div className="code-action-tips-title">{getLabel(561, "参数")}</div>
|
|
{
|
|
_.map(paramDescs, it => {
|
|
return <div className="code-action-tips-info">
|
|
<span>.</span>
|
|
<span>{it}</span>
|
|
</div>;
|
|
})
|
|
}
|
|
<div className="code-action-tips-title">{getLabel(82159, "示例")}</div>
|
|
<span className="code-action-tips-info">{example}</span>
|
|
<div className="code-action-tips-title">{getLabel(356, "结果")}</div>
|
|
<span className="code-action-tips-info">{result}</span>
|
|
</div>
|
|
</div>;
|
|
};
|