index.jsx 13.9 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7 8 9
/**
 * 徐立
 * 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';
徐立's avatar
徐立 committed
10
import Throttle from 'lodash-decorators/throttle';
徐立's avatar
徐立 committed
11 12 13 14 15 16 17 18 19
const { Option } = Select;
export default class index extends Component {
    state = { 
        visible: false, // 模态框状态
        selectOne: [], // 系列函数初始数组
        selectTwo: [], // 子函数初始数组
        checkedList: [], // 用户选中的函数数据
        checkedFuc: '', // 用户选择的函数
        aceValue:'', // 编辑器输入内容
徐立's avatar
徐立 committed
20 21
        callKey: '', // 选择函数调用名
        resultValue: '', // 计算结果
徐立's avatar
徐立 committed
22 23 24 25 26 27 28 29 30 31 32 33 34
    };
    /**
     * 展示模态框回调
     */
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    /**
     * 模态框确定函数回调
     */
    handleOk = e => {
徐立's avatar
徐立 committed
35
        const { checkedFuc,callKey } = this.state
徐立's avatar
徐立 committed
36 37 38
        this.setState({
            visible: false,
        });
徐立's avatar
徐立 committed
39
        this.props.setPitchOff(`$.${callKey}()`)
徐立's avatar
徐立 committed
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
    };
    /**
     * 模态框取消函数回调
     */
    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,
徐立's avatar
徐立 committed
66 67
                    demo:item.demo,
                    callKey:item.callKey,
徐立's avatar
徐立 committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
                })
            })
            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,
徐立's avatar
徐立 committed
84 85
                            demo:item.demo,
                            callKey:item.callKey,
徐立's avatar
徐立 committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
                        })
                })
            })
            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(),
徐立's avatar
徐立 committed
105 106 107
            callKey: arr[0].callKey
        },() => {
            this.getListData(this.state.checkedList[0].demo)
徐立's avatar
徐立 committed
108
        })
徐立's avatar
徐立 committed
109
        
徐立's avatar
徐立 committed
110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
    }
    /**
     * 数据格式化等操作
     */
    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,
徐立's avatar
徐立 committed
129 130
                        demo:item.demo,
                        callKey:item.callKey,
徐立's avatar
徐立 committed
131 132 133 134 135 136 137 138 139 140 141
                    })
            })
        })
        this.setState({
            selectOne:arrOne,
            selectTwo:arrTwo
        })
    }
    /**
     * 根据传入的数组长度返回对应的函数传入值
     */
徐立's avatar
徐立 committed
142
    @Throttle(1)
徐立's avatar
徐立 committed
143 144
    getListData = (List) => {
        const { checkedFuc } = this.state
徐立's avatar
徐立 committed
145 146 147 148 149
        let ary = []
        List.map(item => {
            ary.push(item.value)
            return item
        })
徐立's avatar
徐立 committed
150 151 152 153
        let data = checkedFuc(...ary)
        this.setState({
            resultValue: data
        })
徐立's avatar
徐立 committed
154 155 156
    }
    componentWillReceiveProps(nextProps){
        const { isPicth } = nextProps
徐立's avatar
徐立 committed
157 158 159 160 161 162 163
        const { visible } = this.state
        if(visible !== isPicth){
            this.setState({
                visible:isPicth
            })
        }

徐立's avatar
徐立 committed
164 165 166 167 168 169 170 171
    }
    // 编辑起状态函数
    onAceChange = (newValue) => {
        this.setState({
            aceValue:newValue
        })
    }
    render() {
徐立's avatar
徐立 committed
172
        const { selectOne,selectTwo,checkedList,checkedFuc,aceValue,resultValue } = this.state
徐立's avatar
徐立 committed
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290
        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}>{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}>{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}>
徐立's avatar
徐立 committed
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309
                                                <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>
徐立's avatar
徐立 committed
310 311 312 313 314 315 316 317 318 319 320 321 322
                                            </Row>
                                        </div>
                                    ):<div className={styles.noList}>
                                        请选择您需要执行的函数
                                    </div>
                                }
                        </Col>
                    </Row>
                </Modal>
            </>
        )
    }
}
徐立's avatar
徐立 committed
323