kede-client/js/component/manageCenter/project/task/operationPayNode.js

import React,{Component} from 'react';
import {Button, DatePicker, Form, Input, message, Modal, Select, Spin, InputNumber} from "antd";
import { cuiJieDian } from '@/dataDic.js'
import PropTypes from 'prop-types';
import $ from "jquery";
import moment from "moment";

const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 },
}

class OperationPayNode extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            thirdCompanyName: props.payNodeInfor.companyName,   //供应商名称
            paySubject: [],
            paySubjectName: props.payNodeInfor.dunType,     //可简化
            thirdUnitPrice: props.thirdUnitPrice,      //单价
        }
        this.savePayNode = this.savePayNode.bind(this);
        this.payNodeCalculatedAmount = this.payNodeCalculatedAmount.bind(this);
    }

    componentDidMount() {
        this.getCsortData()
    }

    //保存付款节点
    savePayNode(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (err) {
                return;
            }
            let api
            if (this.props.thirdId) {
                //修改
                api = '/api/admin/company/updatePaymentNode'
            } else {
                //新增
                api = '/api/admin/company/addPaymentNode'
            }

            let customerId=0;
            this.props.supplierList.some((value)=>{
                if(value.companyName === values.companyName){
                    customerId = value.id
                    return true;
                }
            });
            if(!values.companyName){
                message.error('请选择供应商名称');
                return;
            }
            if(!values.dunType){
                message.error('请选择付款科目');
                return;
            }
            if(!values.quantity){
                message.error('请输入数量');
                return;
            }
            let data = {
                id: this.props.thirdId, //id
                tid: this.props.tid, //订单编号
                cid: customerId,//对应的第三方信息
                companyName: values.companyName.split('-')[0], //第三方名称
                quantity: values.quantity, //数量
                dunType: values.dunType, //催款节点
                projectType: this.props.cSort, //项目分类
            }
            if(values.dunType === '0'){
                if(!values.partyTimes.format('YYYY-MM-DD HH:mm:ss')){
                    message.error('请选择付款时间');
                    return;
                }
                data.partyTimes = values.partyTimes.format('YYYY-MM-DD') //付款时间
            }
            if(this.props.projectType !== 2){                   //其他类型   0正常 1专利 2软著 3审计
                data.totalAmount = values.totalAmount           //总价
                data.unitPrice = this.state.thirdUnitPrice      //单价
            }
            this.setState({
                loading: true,
            })
            $.ajax({
                url: globalConfig.context + api,
                method: 'post',
                dataType: 'json',
                crossDomain: false,
                data: data,
            }).done(
                function (data) {
                    this.setState({
                        loading: false,
                    })
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.props.onCancel();
                    } else {
                        message.warning(data.error[0].message)
                    }
                }.bind(this)
            )
        })
    }

    // 付款节点自动计算总金额
    payNodeCalculatedAmount(num) {
        let currentTotalPrice,quantity,unitPrice;
        //获取当前供应商名称对应的单价并更新
        this.props.thirdInfoList.forEach((item) => {
            if (item.companyName === this.state.thirdCompanyName) {
                currentTotalPrice = num ? item.unitPrice * num : item.quantity * item.unitPrice;
                currentTotalPrice = currentTotalPrice.toFixed(6);
                quantity = num ? num : item.quantity;
                unitPrice = item.unitPrice;
            }
        })
        this.props.form.setFieldsValue({
            quantity :num ? num : quantity
        })
        if(this.props.projectType !== 2){
            this.props.form.setFieldsValue({
                totalAmount: parseFloat(currentTotalPrice)
            })
            this.setState({
                thirdUnitPrice: unitPrice
            })
        }
    }

    // 获取csort下的数据
    getCsortData() {
        cuiJieDian.map((item) => {
            if (item.value == this.props.cSort) {
                this.setState({
                    paySubject: item.children,
                })
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { payNodeInfor } = this.props;
        return (
            <Modal
                maskClosable={false}
                visible={this.props.visible}
                onCancel={this.props.onCancel}
                width={800}
                title={this.props.thirdId ? "修改付款节点" : "新增付款节点"}
                footer=""
                className="admin-desc-content"
            >
                <Form
                    layout="horizontal"
                    onSubmit={this.savePayNode}
                    style={{ paddingBottom: '40px' }}
                >
                    <Spin spinning={this.state.loading}>
                        <div className="clearfix">
                            <div className="clearfix">
                                <Form.Item {...formItemLayout} label="供应商名称">
                                    {getFieldDecorator('companyName', {
                                        initialValue: payNodeInfor.companyName,
                                        rules: [{ required: true, message: '请选择供应商' }],
                                    })(
                                        <Select
                                            onChange={(val) => {
                                                this.setState(
                                                    {
                                                        thirdCompanyName: val,
                                                    },
                                                    () => this.payNodeCalculatedAmount()
                                                ) //更新完state调用
                                            }}
                                            defaultValue="请选择供应商"
                                            style={{ width: 220 }}
                                        >
                                            {this.props.supplierList.map((item, index) => (
                                                <Select.Option value={item.companyName} key={index}>
                                                    {item.companyName}
                                                </Select.Option>
                                            ))}
                                        </Select>
                                    )}
                                </Form.Item>
                            </div>
                            <div className="clearfix">
                                <Form.Item {...formItemLayout} label="付款科目">
                                    {getFieldDecorator('dunType', {
                                        initialValue: payNodeInfor.dunType,
                                        rules: [{ required: true, message: '请选择付款科目' }],
                                    })(
                                    <Select
                                        onChange={(val) => {
                                            this.setState({
                                                paySubjectName: val,
                                                dunType: val,
                                            })
                                        }}
                                        defaultValue="请选择付款科目"
                                        style={{ width: 220 }}
                                    >
                                        {this.state.paySubject.map((item, index) => (
                                            <Select.Option value={item.value} key={index}>
                                                {item.key}
                                            </Select.Option>
                                        ))}
                                        <Select.Option key={0} value={'0'}>
                                            自定义
                                        </Select.Option>
                                    </Select>)}
                                </Form.Item>
                            </div>
                            <div className="clearfix">
                                {this.state.paySubjectName === '0'? <Form.Item {...formItemLayout} label="付款时间">
                                    {getFieldDecorator('partyTimes', {
                                        initialValue: payNodeInfor.partyTimes ?  moment(payNodeInfor.partyTimes) : moment(),
                                        rules: [{ required: true, message: '请选择付款时间' }],
                                    })(
                                        <DatePicker showTime format="YYYY-MM-DD" style={{ width: '220px' }}/>
                                    )}
                                </Form.Item> : <div/>}
                            </div>
                            <div className="clearfix">
                                <Form.Item {...formItemLayout} label="数量">
                                    {getFieldDecorator('quantity', {
                                        initialValue: payNodeInfor.quantity,
                                        rules: [{ required: true, message: '请输入数量' }],
                                    })(
                                        <InputNumber
                                            min={1}
                                            precision={0}
                                            // disabled={payNodeInfor.quantity <= 1}
                                            placeholder="请输入数量"
                                            onChange={(e) => {
                                                this.payNodeCalculatedAmount(e)
                                            }}
                                            style={{ width: '220px' }}
                                        />
                                    )}
                                </Form.Item>
                            </div>
                            {this.props.projectType !== 2 ? <div className="clearfix">
                                <Form.Item {...formItemLayout} label="总价（万元）">
                                    {getFieldDecorator('totalAmount', {
                                        initialValue: isNaN(parseFloat(payNodeInfor.totalAmount)) ? payNodeInfor.totalAmount : parseFloat(payNodeInfor.totalAmount),
                                        rules: [{ required: true, message: '请输入总价' }],
                                    })(
                                        <Input
                                            type={'number'}
                                            placeholder="请输入总价"
                                            style={{ width: '220px' }}
                                        />
                                    )}
                                </Form.Item>
                            </div> : <div/>}
                            <div className="clearfix">
                                <div className="addSave" style={{ marginTop: '15px' }}>
                                    <Button
                                        className="cancel"
                                        type="primary"
                                        style={{ marginLeft: '300px' }}
                                        htmlType="submit"
                                    >
                                        保存
                                    </Button>
                                    <Button
                                        className="cancel"
                                        type="ghost"
                                        onClick={this.props.onCancel}
                                        style={{ marginLeft: '50px' }}
                                    >
                                        取消
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </Spin>
                </Form>
            </Modal>
        )
    }
}

OperationPayNode.propTypes = {
    visible : PropTypes.bool.isRequired,                            //控制组件是否显示
    onCancel : PropTypes.func.isRequired,                           //取消方法
    thirdId : PropTypes.number.isRequired,                          //供应商ID
    thirdInfoList: PropTypes.array.isRequired,                      //第三方信息列表
    supplierList: PropTypes.array.isRequired,                       //第三方信息列表已存在的供应商名字和id信息  用于添加付款节点时的选择对应供应商
    payNodeInfor: PropTypes.object.isRequired,                      //选择的支付节点信息(来自支付节点列表)
    projectType: PropTypes.number.isRequired,                       //项目类型  0正常 1专利 2软著 3审计
    tid: PropTypes.number.isRequired,                               //订单编号
    cSort: PropTypes.number.isRequired,                             //项目分类
    thirdUnitPrice: PropTypes.number.isRequired                     //所选信息单价
}

OperationPayNode.defaultProps = {
    visible : false,
    onCancel: ()=>{},
    thirdInfoList: [],
    supplierList: [],
    payNodeInfor: {},
}

const WrappedNormalLoginForm = Form.create()(OperationPayNode);
export default WrappedNormalLoginForm;