salary-management-front/pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js

import React from 'react'
import {Modal, Button, Icon } from 'antd'
import { WeaTextarea } from 'ecCom'
import { inject, observer } from 'mobx-react';

@inject('salaryItemStore')
@observer
export default class FormalFormModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: ''
        }
        this.group = {};
        this.field = {};
        this.parameters = []
        this.referenceType = ""
    }

    componentWillMount() {
        const { salaryItemStore } = this.props;
        const { salaryAcctImportTemplateParam, setSearchFields, detailFormual } = salaryItemStore;
        salaryAcctImportTemplateParam();
        setSearchFields([])
        if(this.props.formulaId) {
            detailFormual(this.props.formulaId).then(data => {
                this.setState({
                    value: data.formula
                })
                this.parameters = data.parameters
                this.referenceType = data.referenceType
            })
        }
    }

    // 多行文本编辑
    handleChange(value) {
        this.setState({
            value
        })
        
    }
    // 分组项被点击
    handleItemClick(item) {
        const { salaryItemStore } = this.props;
        const { formualSearchField } = salaryItemStore;
        this.group = item;
        formualSearchField(item.key)
    }

    // 保存
    handleSave() {
        const { salaryItemStore } = this.props;
        const { saveFormual } = salaryItemStore
        let params = {
            name:'公式1',
            description:'备注',
            module:'salary',
            useFor:'salaryitem',
            referenceType:'',
            returnType:'number',
            validateType:'number',
            extendParam:'{}',
            formula: this.state.value,
            parameters: this.parameters,
            referenceType: this.referenceType == "" ? this.props.valueType == "2" ? "formula" : this.props.valueType == "3" ? "sql" : "" : this.referenceType
        }

        saveFormual(params).then(data => {
            this.props.onSaveFormal(data)
            this.props.onCancel()
        })
    }

    // 字段点击回调
    handleFieldClick(item) {
        this.field = item;
        let fieldName = "{"+this.group.value+"."+this.field.name+"}"
        
        let parameterItem = {
            name: item.name,
            fieldId: item.fieldId,
            fieldName: fieldName,
            fieldType: item.fieldType,
            source: item.source,
            orderIndex: this.parameters.length
        }
        this.parameters.push(parameterItem)
        this.setState({
            value: this.state.value + fieldName
        })
    }

    render() {
        const {salaryItemStore} = this.props;
        const { searchGroup, searchFields } = salaryItemStore
        const { value } = this.state;
        return (
            <Modal title="函数公式" visible={this.props.visible} 
            width={800} 
            footer={
                <Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
            }
             onCancel={() => {this.props.onCancel()}}>
                <div>
                    <WeaTextarea
                        minRows={8}
                        maxRows={8}
                        value={value} onChange={(value) => this.handleChange(value)}
                        noResize={true}
                        style={{fontSize: "14px", lineHeight: 1.2}}
                    />
                </div>
                <div style={{display: "flex", height: "300px", marginTop: "10px" }}>
                    <div style={{flex: 1, height: "300px", overflowY: "scroll", padding: "10px", border: "1px solid rgb(217, 217, 217)", marginRight: '10px'}} >
                        <div>
                            <div style={{marginBottom: "10px", fontSize: "14px"}}>变量</div>
                            <div>
                                {
                                   searchGroup && searchGroup.map(item => {
                                       return <div style={{height: "25px", lineHeight: '25px', cursor: "pointer", overflow: "hidden"}} key={item.key} onClick={() => {this.handleItemClick(item)}}>
                                           {item.value}
                                            <Icon type="right" style={{float: "right", marginLeft: "10px", color: "#eee"}}/>
                                            <span style={{color: "#999", float: 'right'}}>{item.value} 的字段</span>
                                       </div>
                                   })
                                }
                            </div>
                        </div>
                    </div>
                    <div style={{flex: 1, height: "300px", overflowY: "scroll", border: "1px solid rgb(217, 217, 217)", padding: "10px"}}>
                            {
                               searchFields && searchFields.map(item => {
                                    return (
                                        <div style={{height: "25px", lineHeight: "25px", cursor: "pointer"}} key={item.fieldId} onClick={() => {this.handleFieldClick(item)}}>
                                            {item.name}
                                        </div>
                                    )
                                })
                            }
                    </div>
                </div>
               
            </Modal>
        )
    }
}