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

import React from 'react'
import { Row, Col, Switch, Radio } from 'antd'
import { WeaHelpfulTip, WeaSelect, WeaTextarea, WeaInput } from 'ecCom'
import "./index.less"
import { roundingModeOptions, patternOptions, dataTypeOptions } from "./options"
import RequiredLabelTip from '../../components/requiredLabelTip'
import FormalFormModal  from './formalFormModal'

export default class CustomSalaryItemSlide extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showForm: false,
            formalModalVisible: false
        }
    }

    handleChange(params) {
        let request = {...this.props.request, ...params}
        this.props.onChange(request)
    }

    handleShowFormal() {
        this.setState({
            formalModalVisible: true
        })
    }
    
    // 保存公式成功回调
    handleSaveFormal(data) {
        this.handleChange({formulaId: data.id, formulaContent: data.formula})
    }

    render() {
        const { editable, request, isAdd } = this.props;
        const { name, useDefault, useInEmployeeSalary, roundingMode, pattern, valueType, description, dataType, formulaContent, formulaId } = request;
        const { formalModalVisible } = this.state;

        return (
            <div className="customSalaryItemSlide">
                <div>
                    <Row className="formItem">
                        <Col span={4}>名称 <RequiredLabelTip /></Col>
                        <Col span={20}>
                            <WeaInput  viewAttr={(editable && this.props.record.canEdit) || isAdd ? 2 : 1} value={name}  onChange={(value) => {this.handleChange({name: value})}}/>
                        </Col>
                    </Row>
                    <Row className="formItem">
                        <Col span={4}>默认使用</Col>
                        <Col span={20}>
                            <Switch disabled={(editable && this.props.record.canEdit) || isAdd ? false: true} checked = {useDefault == 1} onChange={(value) => {this.handleChange({useDefault: value ? 1 : 0})}}/>
                            <WeaHelpfulTip
                                style={{marginLeft: "10px"}}
                                width={200}
                                title="提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除"
                                placement="topLeft"
                            />
                        </Col>
                    </Row>

                    
                    <Row className="formItem">
                        <Col span={4}>薪资档案引用</Col>
                        <Col span={20}>
                            <Switch disabled={(editable && this.props.record.canEdit) || isAdd ? false: true} checked={useInEmployeeSalary == 1} onChange={(value) => {this.handleChange({useInEmployeeSalary: value? 1: 0})}}/>
                            <WeaHelpfulTip
                                style={{marginLeft: "10px"}}
                                width={200}
                                title="提示：开启后，该薪资项目不可删除或者设为无效"
                                placement="topLeft"
                            />
                        </Col>
                    </Row>

                    <Row className="formItem">
                        <Col span={12}>
                            <Row>
                                <Col span={8}>字段类型<RequiredLabelTip /></Col>
                                <Col span={16}>
                                    <WeaSelect disabled={isAdd ? false: true} value={dataType} options={dataTypeOptions} onChange={(value) => {this.handleChange({dataType: value})}} style={{width: "200px"}}/>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className="formItem">
                        <Col span={12}>
                            <Row>
                                <Col span={8}>舍入规则<RequiredLabelTip /></Col>
                                <Col span={16}>
                                    <WeaSelect viewAttr={(editable && this.props.record.canEdit) || isAdd ? 2 : 1} options={roundingModeOptions} style={{width: "200px"}} value={roundingMode} onChange={(value) => {this.handleChange({roundingMode: value})}}/>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={12}>
                        <Row>
                                <Col span={8}>保留小数位<RequiredLabelTip /></Col>
                                <Col span={16}>
                                    <WeaSelect viewAttr={(editable && this.props.record.canEdit) || isAdd ? 2 : 1} options={patternOptions} onChange={(value) => {this.handleChange({pattern: value})}} value={pattern} style={{width: "200px"}}/>
                                </Col>
                            </Row>
                        </Col>
                    </Row>


                    <Row className="formItem">
                        <Col span={4}>取值方式<RequiredLabelTip /></Col>
                        <Col span={20}>
                            <Radio.Group disabled={isAdd ? false : true} value={valueType} onChange={(e) => {
                                this.handleChange({valueType: e.target.value, formulaId: null, formulaContent: ""})

                            }}>
                                <Radio key={1} value={"1"}>输入</Radio>
                                <Radio key={2} value={"2"}>公式</Radio>
                                <Radio key={3} value={"3"}>SQL</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                    {
                        ( valueType == 2 || valueType == 3 ) && <Row className="formItem">
                            <Col span={4}>{valueType == 2 ? "公式" : "SQL"}<RequiredLabelTip /></Col>
                            <Col span={20}>
                                <div style={{width: "100%", lineHeight: '30px', minHeight: "30px", border: "1px solid rgb(217, 217, 217)"}}
                                    onClick={() => 
                                        {
                                            if(this.props.record.canEdit || isAdd) {
                                                this.handleShowFormal()
                                            }
                                        }}
                                >
                                    {formulaContent}
                                </div>
                            </Col>
                        </Row>
                    }

                    <Row className="formItem">
                        <Col span={4}>备注</Col>
                        <Col span={20}>
                            <WeaTextarea viewAttr={(editable && this.props.record.canEdit) || isAdd ? 2 : 1} value={description} onChange={(value) => {this.handleChange({description: value})}}/>
                        </Col>
                    </Row>

                </div>
                {
                    formalModalVisible && 
                    <FormalFormModal 
                        formulaId={formulaId}
                        visible={formalModalVisible}
                        valueType={valueType}
                        onSaveFormal={(data) => {
                            this.handleSaveFormal(data)
                        }}
                        onCancel={() => this.setState({
                            formalModalVisible: false
                        })}
                    />
                }
            </div>
        )
    }
}