/** * 徐立 * 2019年12月11日 */ import React, { Component } from 'react'; import { Button, Modal, Row, Col, Select } from 'antd'; import funcList from './functionList'; import AceEditor from 'react-ace'; import styles from './style.less'; import Throttle from 'lodash-decorators/throttle'; const { Option } = Select; export default class index extends Component { state = { visible: false, // 模态框状态 selectOne: [], // 系列函数初始数组 selectTwo: [], // 子函数初始数组 checkedList: [], // 用户选中的函数数据 checkedFuc: '', // 用户选择的函数 aceValue: '', // 编辑器输入内容 callKey: '', // 选择函数调用名 resultValue: '', // 计算结果 }; /** * 展示模态框回调 */ showModal = () => { this.setState({ visible: true, }); }; /** * 模态框确定函数回调 */ handleOk = (e) => { const { checkedFuc, callKey } = this.state; this.setState({ visible: false, }); this.props.setPitchOff(`$.${callKey}()`); }; /** * 模态框取消函数回调 */ handleCancel = (e) => { this.setState({ visible: false, }); this.props.setClosePitchOff(); }; /** * 系列函数搜索框change * @param {*} value */ selectOneChange = (value) => { // 筛选出用户选择 let arr = funcList.filter((item) => item.name == value); let arrTwo = []; // 替换子函数搜索 if (arr.length > 0) { arr[0].children.map((item) => { arrTwo.push({ value: item.name, key: item.name, func: item.function, funcName: item.funcName, params: item.params, demo: item.demo, callKey: item.callKey, }); }); this.setState({ selectTwo: arrTwo, }); } else { const arrTwo = []; // 默认用户可查看全部数据 funcList.map((item) => { item.children.map((item) => { arrTwo.push({ funcName: item.funcName, value: item.name, key: item.name, func: item.function, params: item.params, demo: item.demo, callKey: item.callKey, }); }); }); this.setState({ selectTwo: arrTwo, }); } }; /** * 子函数列表搜索框change * @param {*} value */ selectTwoChange = (value) => { const { selectTwo } = this.state; let arr = selectTwo.filter((item) => item.key == value); this.setState( { checkedList: arr, checkedFuc: arr[0].func, aceValue: arr[0].func.toString(), callKey: arr[0].callKey, }, () => { this.getListData(this.state.checkedList[0].demo); }, ); }; /** * 数据格式化等操作 */ componentDidMount() { const arrOne = [], arrTwo = []; // 默认用户可查看全部数据 funcList.map((item) => { arrOne.push({ value: item.name, key: item.name, }); item.children.map((item) => { arrTwo.push({ funcName: item.funcName, value: item.name, key: item.name, func: item.function, params: item.params, demo: item.demo, callKey: item.callKey, }); }); }); this.setState({ selectOne: arrOne, selectTwo: arrTwo, }); } /** * 根据传入的数组长度返回对应的函数传入值 */ @Throttle(1) getListData = (List) => { const { checkedFuc } = this.state; let ary = []; List.map((item) => { ary.push(item.value); return item; }); let data = checkedFuc(...ary); this.setState({ resultValue: data, }); }; componentWillReceiveProps(nextProps) { const { isPicth } = nextProps; const { visible } = this.state; if (visible !== isPicth) { this.setState({ visible: isPicth, }); } } // 编辑起状态函数 onAceChange = (newValue) => { this.setState({ aceValue: newValue, }); }; render() { const { selectOne, selectTwo, checkedList, checkedFuc, aceValue, resultValue } = this.state; const { isShowBtn, isPicth } = this.props; return ( <> {isShowBtn ? ( '' ) : ( <Button type="primary" onClick={this.showModal}> 选择公式 </Button> )} <Modal title="选择已有公式" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width={1200}> <Row> <div className={styles.title}>快捷查询函数</div> <Col style={{ padding: 12 }} span={12}> <span style={{ marginRight: 12 }}>函数类别</span> <Select allowClear showSearch style={{ width: '80%' }} placeholder="请选择函数类别" optionFilterProp="children" onChange={this.selectOneChange} filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }> {selectOne.map((item) => { return ( <Option value={item.key} key={item.key}> {item.value} </Option> ); })} </Select> </Col> <Col style={{ padding: 12 }} span={12}> <span style={{ marginRight: 12 }}>函数列表</span> <Select showSearch style={{ width: '80%' }} placeholder="请选择函数列表" optionFilterProp="children" onChange={this.selectTwoChange} filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }> {selectTwo.map((item) => { return ( <Option value={item.key} key={item.key}> {item.value} </Option> ); })} </Select> </Col> </Row> <Row> <div className={styles.title}> {checkedList.length > 0 ? checkedList[0].name : ''} 函数详细内容 </div> <Col span={24}> {checkedList.length > 0 ? ( <div className={styles.yesList}> <Row gutter={16}> <Col span={5} className={styles.left_title}> 函数名称: </Col> <Col span={16} className={styles.right_content}> {' '} {checkedList[0].value} </Col> </Row> <Row gutter={16}> <Col span={5} className={styles.left_title}> 函数介绍: </Col> <Col span={16} className={styles.right_content}> {' '} {checkedList[0].funcName} </Col> </Row> {checkedList.length > 0 ? checkedList[0].params.map((item, index) => { return ( <Row gutter={16}> <Col span={5} className={styles.left_title}> 函数传入参数介绍( {index + 1} ): </Col> <Col span={16} className={styles.right_content}> {' '} {item.text} </Col> </Row> ); }) : ''} <Row gutter={16}> <Col span={5} className={styles.left_title}> 函数内容: </Col> <Col span={16} className={styles.right_content}> <AceEditor height={450} width={462} placeholder="请输入json样式" mode={'json'} disabled theme={'textmate'} fontSize={12} readOnly value={aceValue} onChange={this.onAceChange} showPrintMargin={true} showGutter={true} highlightActiveLine={true} name="UNIQUE_ID_OF_DIV" // keyboardHandler="vim" setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2, }} editorProps={{ $blockScrolling: true }} /> {/* <pre>{checkedList[0].func.toString()}</pre> */} </Col> </Row> <Row gutter={16}> <Col span={5} className={styles.left_title}> 函数案例计算参数: </Col> <Col span={16} className={styles.right_content}> {checkedList[0].demo.map((item, index) => { return ( <div> <span> 案例传入参数( {index + 1} ): </span> <span style={{ marginLeft: 12 }}>类型: {item.text}</span> </div> ); })} </Col> </Row> <Row gutter={16}> <Col span={5} className={styles.left_title}> 计算结果: </Col> <Col span={16} className={styles.right_content}> {resultValue ? typeof resultValue === 'object' || typeof resultValue === 'boolean' ? JSON.stringify(resultValue) : resultValue : typeof resultValue === 'boolean' ? JSON.stringify(resultValue) : null} </Col> </Row> </div> ) : ( <div className={styles.noList}>请选择您需要执行的函数</div> )} </Col> </Row> </Modal> </> ); } }