import React, { Component } from "react"; import { Form, Select, Input, Button, message } from "antd"; import $ from "jquery/src/ajax"; import PicturesWall from "./picturesWall"; import Rizhi from "./rizhi"; const FormItem = Form.Item; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } }; class ChangeApply extends Component { constructor(props) { super(props); this.state = { data: {}, voucherUrl: [], dataSource: [] }; this.departmentList = this.departmentList.bind(this); this.changeApply = this.changeApply.bind(this); this.getVoucherUrl = this.getVoucherUrl.bind(this); } componentDidMount() { // console.log("看一下",this.props); } //变更申请 changeApply() { let theorgCodeUrl = []; if (this.state.voucherUrl.length) { let picArr = []; this.state.voucherUrl.map(function(item) { if (item.response && item.response.data && item.response.data.length) { picArr.push(item.response.data); } }); theorgCodeUrl = picArr.join(","); } Object.assign(this.state.data, { id: this.props.orderData.id, //订单编号 changeType: 0, voucherUrl: theorgCodeUrl.length ? theorgCodeUrl : "", consultantExamine: [], managerExamine: [] }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderChange/updateOrderChange", data: this.state.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) ); } // componentDidMount() { // window.setTimeout(() => { // this.loadDataChange(); // }, 10); // } // loadDataChange() { // console.log(this.props); // $.ajax({ // method: "get", // dataType: "json", // crossDomain: false, // url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList", // data: { // changeId: this.props.data.id // }, // success: function(data) { // if (data.error.length || data.data.list == "") { // if (data.error && data.error.length) { // message.warning(data.error[0].message); // } // } else { // this.setState({ // dataSource: data.data // }); // } // }.bind(this) // }); // } departmentList() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: {}, success: function(data) { let thedata = data.data; let theArr = []; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { thedata.map(function(item, index) { theArr.push({ key: index, name: item.name, id: item.id }); }); } this.setState({ departmentArr: theArr }); }.bind(this) }); } getVoucherUrl(e) { this.setState({ voucherUrl: e }); } componentWillReceiveProps(nextProps) { this.setState({ data: nextProps.orderData, voucherUrl: nextProps.voucherUrl }); } componentWillMount() { this.departmentList(); } render() { const { TextArea } = Input; const data = this.state.data; let departmentArr = this.state.departmentArr || []; return ( <div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="客户名称"> <span>{data.userName}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="合同编号"> <span>{data.contractNo}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="申请变更部门" > <Select placeholder="请输入变更部门" style={{ width: 240 }} value={data.depName} onChange={e => { let data = this.state.data; data.depName = e; this.setState({ data }); }} > {departmentArr.map(function(item) { return ( <Select.Option key={item.id} value={item.name}> {item.name} </Select.Option> ); })} </Select> </FormItem> <FormItem className="half-item" {...formItemLayout} label="申请人"> <Input placeholder="请输入申请人" ref="signTotalAmount" value={data.applicant} onChange={e => { let data = this.state.data; data.applicant = e.target.value; this.setState({ data }); }} style={{ width: "240px" }} /> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="变更类型" > <Select placeholder="选择合同变更类型" style={{ width: 200 }} onChange={e => { let data = this.state.data; data.type = e; this.setState({ data }); }} value={data.type} > <Option value={0}>退单退款</Option> <Option value={1}>项目及金额变更</Option> <Option value={2}>仅项目变更</Option> <Option value={3}>仅金额变更</Option> <Option value={4}>重报</Option> <Option value={5}>赠送</Option> </Select> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="合同额(万元)" > <Input placeholder="请输入合同额" ref="signTotalAmount" value={data.totalAmount} onChange={e => { let data = this.state.data; data.totalAmount = e.target.value; this.setState({ data }); }} style={{ width: "240px" }} /> </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="已收款(万元)" > <Input placeholder="请输入已收款" ref="signTotalAmount" value={data.settlementAmount} onChange={e => { let data = this.state.data; data.settlementAmount = e.target.value; this.setState({ data }); }} style={{ width: "240px" }} /> </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="申请退款(万元)" > <Input placeholder="请输入申请退款" ref="signTotalAmount" value={data.changeAmount} onChange={e => { let data = this.state.data; data.changeAmount = e.target.value; this.setState({ data }); }} style={{ width: "240px" }} /> </FormItem> </div> <div className="clearfix"> <FormItem style={{ height: "auto" }} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="变更原因" > <TextArea rows={4} placeholder="因企业政府补助费用与营销员签单承诺费用不一" ref="signTotalAmount" style={{ width: "95%" }} value={data.remarks} onChange={e => { let data = this.state.data; data.remarks = e.target.value; this.setState({ data }); }} /> </FormItem> </div> {/* 备注 */} <div className="clearfix"> <FormItem style={{ height: "auto" }} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="备注" > <TextArea rows={4} placeholder="请输入备注信息" ref="signTotalAmount" style={{ width: "95%" }} value={data.startRemarks} onChange={e => { let data = this.state.data; data.startRemarks = e.target.value; this.setState({ data }); }} /> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="变更凭证" > <PicturesWall fileList={this.getVoucherUrl} pictureUrl={this.state.voucherUrl} url="/api/admin/orderChange/uploadFile" sign="order_change_file" /> <Rizhi changeId={data.id} /> <p>图片建议:要清晰。</p> </FormItem> </div> {/* <ul style={{ width: "868px", overflow: "hidden", paddingLeft: "90px", marginBottom: "20px" }} > {this.state.dataSource.map((item, index) => ( <li key={index} style={{ width: "100%", height: "auto", wordBreak: "break-all", color: "black", marginBottom: "10px" }} >{`${item.aname}: ${item.remarks}`}</li> ))} </ul> */} <div className="clearfix"> <Button type="primary" style={{ float: "right", marginRight: 40 }} onClick={this.changeApply} > 发起变更申请 </Button> </div> </div> ); } } export default ChangeApply;