1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/**
* 徐立
* 2019年12月19日
* 公式表单
*/
import React, { Component } from 'react';
import styles from './style.less';
import { Icon } from 'antd';
import AllImg from '../assets/AllFuc.png';
import All2Img from '../assets/AllFuc2.png';
import ExcelBtn from '../excelInitFuc';
import RollTab from './rollTab';
export default class FormulaForm extends Component {
constructor(props) {
super(props);
this.state = {
isPitchOn: false, // 是否点击所有函数
pitchFunction: '', // 选中函数
aceValue: '', // 编辑器输入内容
pages: 1, // 初始页面
pagesTotal: 0, // 总条数
isPagesMax: false, // 是否为最大页
isPagesMin: true, // 是否为最小页
};
}
// 设置数据总条数
setPagesTotal = (num) => {
this.setState({
pagesTotal: num,
});
};
// ta表单快捷选择函数
setFunction = (fuc) => {
this.setState({
pitchFunction: fuc,
});
this.props.append(fuc);
};
// 点击修改选中状态
setPitchOn = () => {
this.setState({
isPitchOn: true,
});
};
// 取消显示并获取用户选择函数
setPitchOff = (fuc) => {
this.setState({
isPitchOn: false,
pitchFunction: fuc,
});
this.props.append(fuc);
};
// 单独用户点击取消控制函数
setClosePitchOff = () => {
this.setState({
isPitchOn: false,
});
};
// 查找表选择事件
onNameChange = (value) => {
console.log(`selected ${value}`);
};
// 查找字段编码选择事件
onCodeChange = (value) => {
console.log(`selected ${value}`);
};
// 编辑起状态函数
onAceChange = (newValue, all) => {
this.setState({
aceValue: newValue,
});
};
// 返回上一页
goBackPages = () => {
this.refs.rolltab.setCloseAll();
const num = this.state.pages <= 1 ? 1 : this.state.pages - 1;
this.setState({
pages: num,
isPagesMin: num == 1 ? true : false,
isPagesMax: false,
});
};
/**
* 前进下一页
*/
goForwrod = () => {
this.refs.rolltab.setCloseAll();
const { pagesTotal } = this.state;
let pageMax = Math.ceil(pagesTotal / 14);
let num = this.state.pages == pageMax ? pageMax : this.state.pages + 1;
this.setState({
pages: num,
isPagesMax: num == pageMax ? true : false,
isPagesMin: false,
});
};
render() {
const {
isFormula, // 是否展示公式表单
cutCloseFormula, // 关闭公式表单函数
isOne, // 是否为用户点击,排除渲染时重复展示
} = this.props;
const { isPitchOn, aceValue, isPagesMax, isPagesMin, pages } = this.state;
return (
<div
className={[
`${styles.formula_div}`,
`${isFormula ? styles.show : isOne ? styles.dis : ''}`,
].join(' ')}>
<div className={styles.left_div}>
<div className={styles.tab_top}>
<div
onClick={isPagesMin ? () => {} : this.goBackPages}
style={{ cursor: isPagesMin ? 'not-allowed' : 'pointer' }}
className={styles.left_btn}>
<Icon style={{ color: isPagesMin ? '#cccccc' : '#999999' }} type="left" />
</div>
<div className={styles.center_conter}>
<div onClick={this.setPitchOn} className={styles.all_card}>
<img src={isPitchOn ? All2Img : AllImg} />
<div className={[`${styles.name}`, `${isPitchOn ? styles.pitchOn : ''}`].join(' ')}>
所有函数
</div>
</div>
<RollTab
ref="rolltab"
// 所有函数调用相关
setPitchOn={this.setPitchOn}
// 设置函数相关
setFunction={this.setFunction}
// 设置数据总条数
setPagesTotal={this.setPagesTotal}
// 页码相关
pages={pages}
/>
</div>
<div
onClick={isPagesMax ? () => {} : this.goForwrod}
style={{ cursor: isPagesMax ? 'not-allowed' : 'pointer' }}
className={styles.left_btn}>
<Icon style={{ color: isPagesMax ? '#cccccc' : '#999999' }} type="right" />
</div>
</div>
<div
onClick={() => {
this.refs.rolltab.setCloseAll();
}}>
{this.props.editor}
</div>
</div>
<div
className={styles.absolute_div}
onClick={() => {
cutCloseFormula();
this.refs.rolltab.setCloseAll();
}}>
{isFormula ? <Icon type="right" /> : <Icon type="left" />}
</div>
<ExcelBtn
isShowBtn={true}
setClosePitchOff={this.setClosePitchOff}
setPitchOff={this.setPitchOff}
isPicth={isPitchOn}
/>
</div>
);
}
}