FormulaForm.jsx 4.3 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7
/**
 * 徐立
 * 2019年12月19日
 * 公式表单
 */
import React, { Component } from 'react';
import styles from './style.less';
钟是志's avatar
钟是志 committed
8
import { Icon  } from 'antd';
徐立's avatar
徐立 committed
9 10 11 12 13
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 {
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
	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,
		});
	};
徐立's avatar
徐立 committed
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
	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>
		);
	}
徐立's avatar
徐立 committed
170
}