import React, { Component } from "react"; import { Form, Select, Input, Button, message, Spin, Tag, Table, Col, Popconfirm, Modal, AutoComplete, DatePicker } from "antd"; import $ from "jquery/src/ajax"; import moment from "moment"; import ResolutionDetail from "@/resolutionDetail"; import PicturesWall from "./picturesWall"; import Rizhi from "./rizhi"; import { cuiJieDian, orderTypes, customerType, jiedian, tepi, boutique } from "@/dataDic.js"; import { moneyVerify } from "@/tools.js" const FormItem = Form.Item; const confirm = Modal.confirm; const Option = AutoComplete.Option; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } }; class ChangeApply extends Component { constructor(props) { super(props); this.state = { data: {}, voucherUrl: [], dataSource: [], cuiDataSource: [], loading: false, changeCuiList: [ { title: "变更状态", dataIndex: "type", key: "type", render: (text) => { let str = ""; let color = ""; if (text == 1) { str = "增"; color = "#87d068"; } else if (text == 2) { str = "改"; color = "#108ee9"; } else if (text == 3) { str = "删"; color = "#f50"; } return ( <Tag color={color} style={{ display: text == 0 ? "none" : "inline-block" }} > {str} </Tag> ); }, }, { title: "项目名称", dataIndex: "commodityName", key: "commodityName", render: (text, record, index) => { let dataArr = this.state.proDataSource || []; if (text) { if (record.ctid) { return <span>{text + "-" + record.ctid}</span>; } else { let tid = record.tid; let ctid = ""; dataArr.forEach((item, index) => { if (item.tid == tid) { ctid = item.id; } }); return <span>{text + "-" + ctid}</span>; } } return ( <Select placeholder="请选择名称" style={{ width: "150px" }} disabled={this.state.getLoad && record.sortName ? true : false} onChange={(e) => { let num = e.lastIndexOf("-"); let ctid = e.substr(num + 1); record.sortName = e.substring(0, num); dataArr.forEach((item) => { if ( item.commodityName == record.sortName && ctid == item.id ) { record.cname = item.cname; record.ctid = item.id; record.isSave = true; record.sort = item.cSort; cuiJieDian.forEach((item) => { if (item.value == record.sort) { record.arr = item.children; let yearFlag = true; if (record.sort == 6) { yearFlag = false; } this.setState({ getLoad: true, yearFlag, }); } }); } }); }} > {dataArr.map((item, index) => { if (item.type == 3) { return ( <Select.Option key={item.id} value={item.commodityName + "-" + item.id} disabled > {item.commodityName + "-" + item.id} </Select.Option> ); } else { return ( <Select.Option key={item.id} value={item.commodityName + "-" + item.id} > {item.commodityName + "-" + item.id} </Select.Option> ); } })} </Select> ); }, }, { title: "项目分类", dataIndex: "projectType", key: "projectType", render: (text, record) => { if (text) { let arr = this.state.proDataSource || []; let str = ""; for (let i = 0; i < arr.length; i++) { if (this.state.proDataSource[i].cSort == text) { str = this.state.proDataSource[i].cname; return <span>{str}</span>; } } } if (this.state.getLoad) { return ( <Select style={{ width: "150px" }} placeholder="请选择分类" value={record.cname} > <Select.Option key={record.sort} value={record.cname}> {record.cname} </Select.Option> </Select> ); } else { return ( <Select style={{ width: "150px" }} placeholder="请选择分类"> <Select.Option key={record.sort} value={record.cname}> {record.cname} </Select.Option> </Select> ); } }, }, { title: "催款科目", dataIndex: "dunTypeName", key: "dunTypeName", render: (text, record) => { if (text) { return <span>{text}</span>; } if (this.state.getLoad) { let arr = record.arr || []; return ( <div> <Select style={{ width: "150px", marginRight: 5 }} placeholder="请选择分类" onChange={(e) => { record.dunType = e; if (record.dunType != 0) { record.customizeTimes = ""; record.customizeName = ""; } if (e != 1) { this.setState({ timeFlag: true, }); } else { this.setState({ timeFlag: false, }); } if (e == 1 && record.sort == 6) { this.setState({ yearFlag: true, }); } else if (e != 1 && record.sort == 6) { this.setState({ yearFlag: false, }); } if (record.sort == 3 && e == 3) { this.setState({ boFlag: true, }); } else { this.setState({ boFlag: false, }); } }} > {arr.map((item) => { record; return ( <Select.Option key={item.value} value={item.value}> {item.key} </Select.Option> ); })} <Select.Option key={0} value={0}> 自定义 </Select.Option> </Select> {record.dunType == 0 ? ( <Input value={record.customizeName} placeholder="请输入自定义名称" required="required" onChange={(e) => { record.customizeName = e.target.value; this.setState({ contactList: this.state.contactList, }); }} style={{ width: "120px" }} /> ) : ( "" )} </div> ); } else { return ( <Select style={{ width: "150px" }} placeholder="请选择分类"> <Select.Option key={0} value={"请选择上一项"}></Select.Option> </Select> ); } }, }, { title: "收款时间(特批需选择时间)", dataIndex: "waitDay", key: "waitDay", render: (text, record) => { if (record.dunTypeName) { if (record.customizeTimes) { return record.customizeTimes; } if (text == 0) { var str = "当天"; } else if (!text) { var str = ""; } else { var str = text + "天"; } return <span>{str}</span>; } return ( <div> {record.dunType == 0 ? ( <DatePicker style={{ width: 150 }} disabledDate={(e) => { let time = moment(e).valueOf(); let today = Date.parse(new Date()); if (time <= today) { return true; } }} onChange={(e, t) => { record.customizeTimes = t; }} /> ) : ( <Select placeholder="请选择时间" style={{ width: "160px" }} disabled={ this.state.approval != 0 && !this.state.timeFlag ? false : true } onChange={(e) => { record.waitDay = e; }} > <Select.Option key={0}>当天</Select.Option> <Select.Option key={3}>3天</Select.Option> <Select.Option key={5}>5天</Select.Option> <Select.Option key={7}>7天</Select.Option> <Select.Option key={15}>15天</Select.Option> </Select> )} </div> ); }, }, { title: "金额(万元)", dataIndex: "money", key: "money", render: (text, record) => { if (record.dunTypeName) { if (record.appropriationRatio && !record.money) { return <span>{record.appropriationRatio}(拨款比例)</span>; } else if (record.appropriationRatio && record.money) { return ( <span> {text}(比例:{record.appropriationRatio}) </span> ); } else { return <span>{text}</span>; } } if (this.state.boFlag) { return ( <div> <div style={{ width: 70, float: "left", marginRight: 5 }}> <Select placeholder="选择" defaultValue={"金额"} onChange={(e) => { record.boStatus = e; }} > <Select.Option key={true}>比例</Select.Option> <Select.Option key={false}>金额</Select.Option> </Select> </div> <div style={{ float: "right" }}> <Input value={record.money} placeholder="请根据左侧类型填写" key={record.id} required="required" onChange={(e) => { record.money = e.target.value; this.setState({ contactList: this.state.contactList, }); }} style={{ width: "120px" }} /> </div> </div> ); } else { return ( <div> <Input value={record.money} placeholder="请输入金额(必填项)" key={record.id} required="required" onChange={(e) => { record.money = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{ width: "120px" }} /> </div> ); } }, }, { title: "服务年限", dataIndex: "startDate", key: "startDate", render: (text, record) => { if (record.dunTypeName) { return <span>{text}</span>; } return ( <Select placeholder="请选择年限" style={{ width: "150px" }} disabled={this.state.yearFlag ? true : false} onChange={(e) => { record.effectiveCount = e; }} > {/* <Select.Option key={null}>无</Select.Option> */} <Select.Option key={1}>一年</Select.Option> <Select.Option key={3}>两年</Select.Option> <Select.Option key={5}>三年</Select.Option> <Select.Option key={7}>四年</Select.Option> <Select.Option key={9}>五年</Select.Option> </Select> ); }, }, { title: "催款状态", dataIndex: "status", key: "status", render: (text) => { return <span>{text == 1 ? "已启动" : "未启动"}</span>; }, }, { title: "操作", dataIndex: "dels", key: "dels", render: (text, record, index) => { return ( <div> <Popconfirm title="是否删除?" onConfirm={() => { this.changeDeleteCui(record); }} okText="删除" cancelText="不删除" > <Button disabled={this.state.listCuiFlag} style={{ marginRight: "10px", display: this.state.displayList ? "none" : "block", }} > 删除 </Button> </Popconfirm> {record.isSave ? ( <Button type="primary" style={{ marginTop: 5 }} onClick={(e) => { this.changeSaveCui(record); }} > 保存 </Button> ) : ( "" )} </div> ); }, }, ], resVisible: false, proColumns: [ { title: "变更状态", dataIndex: "type", key: "type", render: (text, record) => { let str = ""; let color = ""; if (text == 1) { str = "增"; color = "#87d068"; } else if (text == 2) { str = "改"; color = "#108ee9"; } else if (text == 3) { str = "删"; color = "#f50"; } return ( <span> <Tag color={color} style={{ display: text == 0 ? "none" : "inline-block" }} > {str} </Tag> {record.splitStatus == 1 ? ( <Tag color="#108ee9" > 父项目 </Tag> ) : ( "" )} {record.splitStatus == 2 ? ( <Tag color="#108ee9" > 子项目 </Tag> ) : ( "" )} </span> ); }, }, { title: "业务项目名称", dataIndex: "commodityName", key: "commodityName", render: (text, record) => { return text + "-" + record.id; }, }, { title: "项目类别", dataIndex: "cname", key: "cname", }, { title: "项目数量", dataIndex: "commodityQuantity", key: "commodityQuantity", }, { title: "金额(万元)", dataIndex: "commodityPrice", key: "commodityPrice", render: (text, record) => { if (record.splitStatus == 2) { return "/"; } else { return text; } }, }, { title: "主要项目", dataIndex: "main", key: "main", render: (text) => { return text ? "是" : "否"; }, }, { title: "项目负责人", dataIndex: "receiverName", key: "receiverName", }, { title: "项目说明", dataIndex: "taskComment", key: "taskComment", render: (text) => { return text && text.length > 8 ? text.substr(0, 8) + "…" : text; }, }, { title: "操作", dataIndex: "ABC", key: "ABC", render: (text, record) => { return ( <div> <Button onClick={(e) => { e.stopPropagation(); this.showConfirm(this.changeDeletePro, record); }} disabled={this.state.listFlag} style={{ display: this.state.displayList ? "none" : "block", }} > 删除 </Button> </div> ); }, }, ], }; this.departmentList = this.departmentList.bind(this); this.changeApply = this.changeApply.bind(this); this.getVoucherUrl = this.getVoucherUrl.bind(this); this.proList = this.proList.bind(this); this.cuiList = this.cuiList.bind(this); this.showConfirm = this.showConfirm.bind(this); this.showConfirmChange = this.showConfirmChange.bind(this); this.changeAddPro = this.changeAddPro.bind(this); this.changeProSubmit = this.changeProSubmit.bind(this); this.changeDeletePro = this.changeDeletePro.bind(this); this.changeAddCui = this.changeAddCui.bind(this); this.changeDeleteCui = this.changeDeleteCui.bind(this); this.changeSaveCui = this.changeSaveCui.bind(this); this.submitChange = this.submitChange.bind(this); this.editCui = this.editCui.bind(this); this.editPro = this.editPro.bind(this); this.submitEditCui = this.submitEditCui.bind(this); this.submitEditPro = this.submitEditPro.bind(this); this.nextCancel = this.nextCancel.bind(this); this.customerChange = this.customerChange.bind(this); this.selectAuto = this.selectAuto.bind(this); this.supervisor = this.supervisor.bind(this); this.httpChange = this.httpChange.bind(this); this.showRes = this.showRes.bind(this); this.resCancel = this.resCancel.bind(this); this.deleteChange = this.deleteChange.bind(this); this.not = this.not.bind(this); } componentDidMount() { } nextCancel() { this.setState({ addnextVisible: false, changeVisible: false }); } showConfirm(fn, record) { confirm({ title: "确定删除此项目吗?", content: ( <span style={{ color: "red" }}> 删除后会将该项目下的所有催款节点自动清除!!! </span> ), onOk() { fn(record); }, onCancel() { } }); } showConfirmChange(fn, record) { confirm({ title: "确定取消本次变更吗?", content: ( <span style={{ color: "red" }}> 取消后本次变更将作废!!! </span> ), onOk() { fn(); }, onCancel() { } }); } //服务值改变时请求客户名称 httpChange(e) { this.state.gid = ""; if (e.length >= 1) { this.supervisor(e, false); } this.setState({ commodityName: e }); } //客户名称自动补全 customerChange(e) { if (this.state.customType) { this.state.autoId = ""; if (e.length >= 2) { this.supervisor(e, true); } this.setState({ customerName: e }); } else { this.setState({ customerName: "" }); message.warning("客户所属类型必须指定"); } } //上级主管输入框失去焦点是判断客户是否存在 selectAuto(value) { let kid = []; let fwList = this.state.customerArr; fwList.map(function (item) { if (value == item.bname) { kid = item; } }); this.setState({ commodityName: value, gid: kid.id, //commodityPrice:kid.price==0?kid.price.toString():kid.price, commodityFirstPayment: kid.firstPayment == 0 ? kid.firstPayment.toString() : kid.firstPayment }); } //加载(自动补全) supervisor(e, state) { //客户名称与服务名称自动补全 let api = state ? "/api/admin/customer/getCustomerByName" : "/api/admin/order/getBusinessProjectByName"; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + api, data: state ? { name: e, type: this.state.customType } : { businessName: e }, success: function (data) { let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thedata = {}; } this.setState({ states: state, customerArr: thedata }); }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); } //变更申请 changeApply() { if (moneyVerify(this.state.data.totalAmount)) { return false; } if (moneyVerify(this.state.data.changeAmount)) { return false; } if ( this.state.data.type == 0 || this.state.data.type == 1 || this.state.data.type == 3 ) { if (this.state.data.settlementAmount < this.state.data.changeAmount) { message.warning("退款金额大于已收款金额"); return; } } this.setState({ loading: true }) 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) { if (!data.error.length) { message.success("变更成功!"); this.props.onCancel(); this.setState({ loading: false }); } else { message.warning(data.error[0].message); this.setState({ loading: false }); } }.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) // }); // } // 拆分详细 showRes(record) { this.setState({ resVisible: true, resRecord: record }) } resCancel() { this.setState({ resVisible: false }) } cuiList(id) { this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderChange/selectChangeDun", data: { id: id || this.state.data.id }, success: function (data) { this.setState({ cuiDataSource: data.data, loading: false, }); if (data.data && data.data.length) { if (id) { this.setState({ listCuiFlag: true, }); } this.setState({ cuiDataSource: data.data, }); this.setState({ loading: false, }); } else if (data.error && data.error.length) { message.warning(data.error[0].message); this.setState({ loading: false, }); } }.bind(this) }); } proList(id) { this.setState({ loading: true }) $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderChange/selectChangeTask", data: { id: id || this.state.data.id }, success: function (data) { this.setState({ loading:false }) if (data.data && data.data.length) { if (id) { this.setState({ listFlag: true }); } data.data.forEach(item => { item.key = item.id }) this.setState({ proDataSource: data.data }); this.setState({ loading: false, }); }else if(data.error && data.error.length) { message.warning(data.error[0].message) this.setState({ loading: false, }); } }.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 }); } changeAddPro() { this.setState({ changeVisible: true, gid: "", customerArr: [], commodityName: "", commodityQuantity: "", commodityId: "", taskComment: "", main: undefined, commodityPrice: "" }); } changeProSubmit() { if (this.state.gid == undefined || !this.state.gid) { message.warning("服务名称不匹配!"); return false; } if (!this.state.commodityPrice) { message.warning("请输入金额!"); this.refs.commodityPrice.focus(); return false; } let reg = /^([0]|[1-9][0-9]*)$/; if ( !this.state.commodityQuantity || !reg.test(this.state.commodityQuantity) ) { message.warning("请输入正确商品数量!"); this.refs.commodityQuantity.focus(); return false; } if (!this.state.main) { message.warning("请选择是否为主要项目!"); this.refs.commodityQuantity.focus(); return false; } this.setState({ loading: true }); let type = 0; if (this.state.typeChange == 4 || this.state.typeChange == 5) { type = 1; } $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderChange/addChangeTask", data: { commodityId: this.state.gid, //商品ID orderNo: this.state.data.orderNo, //订单编号 commodityName: this.state.commodityName, //商品名称 commodityQuantity: this.state.commodityQuantity, //商品数量 commodityPrice: this.state.commodityPrice, //签单总价 taskComment: this.state.taskComment, //服务说明 main: this.state.main, //是否为主要项目 cid: this.state.data.id, //变更ID type }, success: function (data) { let theArr = []; if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success("保存成功"); this.nextCancel(); this.proList(); } }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); } changeDeletePro(record) { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderChange/updateChangeTask", data: { id: record.id, type: 3, tid: record.tid, splitStatus: record.splitStatus }, success: function (data) { let theArr = []; if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success("删除成功"); this.proList(); this.cuiList(); } }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); } //点击新增变更催款节点 changeAddCui() { this.state.cuiDataSource.push({ key: this.state.cuiDataSource.length, money: "", dunSubject: undefined, orderNo: this.state.data.orderNo, dunTarget: this.state.kehuId }); this.setState({ cuiDataSource: this.state.cuiDataSource, cuiFlag: true }); } //删除变更收款节点 changeDeleteCui(index) { if (index.id) { this.state.cuiDataSource.splice(index.id, 1); this.setState({ contactListNew: this.state.cuiDataSource, cuiFlag: false, addFlag: false, boFlag: false }); $.ajax({ url: globalConfig.context + "/api/admin/orderChange/updateChangeDun", method: "post", data: { id: index.id, type: 3, tid: index.tid, did: index.did } }).done( function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success("删除成功!"); this.setState({ cuiFlag: false }); this.cuiList(); } else { message.warning(data.error[0].message); } }.bind(this) ); } else { this.state.cuiDataSource.splice(index.key, 1); this.setState({ cuiDataSource: this.state.cuiDataSource, cuiFlag: false, addFlag: false, boFlag: false }); } } changeSaveCui(record) { if (record.boStatus == "false") { record.boStatus = false; } else if (record.boStatus == "true") { record.boStatus = true; } if (!this.state.yearFlag) { if (!record.effectiveCount) { message.warning("请选择服务年限"); return; } } else { record.effectiveCount = ""; } if (record.money == "") { message.warning("请填写金额"); return; } if (record.boStatus) { if ( typeof +record.money == "number" && +record.money >= 0 && +record.money <= 1 ) { record.appropriationRatio = record.money; } else { message.warning("金额比例填写错误,比例范围0~1"); return; } } if (!record.dunType && record.dunType != 0) { message.warning("请选择对应科目"); return; } if (record.dunType != 1) { record.waitDay = ""; } this.setState({ loading: true }); if (record.boStatus) { $.ajax({ url: globalConfig.context + "/api/admin/orderChange/addChangeDun", method: "post", data: { orderNo: record.orderNo, ctid: record.ctid, projectType: record.sort, dunType: record.dunType, appropriationRatio: record.appropriationRatio, waitDay: record.waitDay, effectiveCount: record.effectiveCount, cid: this.state.data.id, //变更ID ustomizeTimes: record.dunType == 0 ? record.customizeTimes : undefined, customizeName: record.dunType == 0 ? record.customizeName : undefined, } }).done( function (data) { this.setState({ loading: false, }); if (!data.error.length) { message.success("保存成功!"); this.setState({ cuiFlag: false, boFlag: false, addFlag: false, }); this.cuiList(); } else { message.warning(data.error[0].message); } }.bind(this) ); } else { $.ajax({ url: globalConfig.context + "/api/admin/orderChange/addChangeDun", method: "post", data: { orderNo: record.orderNo, ctid: record.ctid, projectType: record.sort, dunType: record.dunType, money: record.money, waitDay: record.waitDay, effectiveCount: record.effectiveCount, cid: this.state.data.id, //变更ID customizeTimes: record.dunType == 0 ? record.customizeTimes : undefined, customizeName: record.dunType == 0 ? record.customizeName : undefined, } }).done( function (data) { this.setState({ loading: false, }); if (!data.error.length) { message.success("保存成功!"); this.setState({ cuiFlag: false, boFlag: false, addFlag: false, }); this.cuiList(); } else { message.warning(data.error[0].message); } }.bind(this) ); } } submitChange() { if ( this.state.typeChange == undefined || (this.state.typeChange == "" && this.state.typeChange != 0) ) { message.warning("请选择变更类型"); return false; } if ( this.state.typeChange == 0 || this.state.typeChange == 1 || this.state.typeChange == 3 ) { if (this.state.settlementAmount < this.state.changeAmount) { message.warning("退款金额大于已收款金额"); return; } } if (this.state.processStatus != 5 || this.state.processStatus != 6) { message.warning("当前订单流程不能发起变更!"); return false; } if (this.state.changeAmount === "") { message.warning("申请退款金额不能为空!"); return false; } if (this.state.remarksC.trim() == "") { message.warning("请正确填写变更原因"); return false; } if (this.state.startRemarks.trim() == "") { message.warning("请正确填写备注信息"); return false; } 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(","); } this.setState({ loading: true }); $.ajax({ url: globalConfig.context + "/api/admin/orderChange/updateOrderChange", method: "post", data: { id: this.state.changeId, changeType: 0, orderNo: this.state.orderNo, //订单编号 processState: 0, startRemarks: this.state.startRemarks, remarks: this.state.remarksC, voucherUrl: theorgCodeUrl.length ? theorgCodeUrl : "", totalAmount: this.state.totalAmount, settlementAmount: this.state.settlementAmount, changeAmount: this.state.changeAmount, applicant: this.state.salesmanName, depName: this.state.depName, type: this.state.typeChange } }).done( function (data) { if (!data.error.length) { this.setState({ loading: false }); message.success("发起变更成功"); this.handleCancelclose(); } else { message.warning(data.error[0].message); this.setState({ loading: false }); } }.bind(this) ); } editCui(record) { this.setState({ editCuiVisible: true, editCuiMoney: record.money, editCuiTid: record.tid, editCuiId: record.id }); } editPro(record) { this.setState({ editProVisible: true, editSplitStatus: record.splitStatus, editProMoney: record.commodityPrice, editProCommodityQuantity: record.commodityQuantity, editProTid: record.tid, editProId: record.id }); } submitEditCui() { this.setState({ loading: true }); $.ajax({ url: globalConfig.context + "/api/admin/orderChange/updateChangeDun", method: "post", data: { id: this.state.editCuiId, type: this.state.editCuiTid ? 2 : 1, money: this.state.editCuiMoney, tid: this.state.editCuiTid, } }).done( function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success("修改成功!"); this.cuiList(); this.proList() this.setState({ editCuiVisible: false }); } else { message.warning(data.error[0].message); } }.bind(this) ); } submitEditPro() { this.setState({ loading: true }); $.ajax({ url: globalConfig.context + "/api/admin/orderChange/updateChangeTask", method: "post", data: { id: this.state.editProId, type: this.state.editProTid ? 2 : 1, commodityPrice: this.state.editProMoney, commodityQuantity: this.state.editProCommodityQuantity, tid: this.state.editProTid } }).done( function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success("修改成功!"); this.proList(); this.cuiList() this.setState({ editProVisible: false }); } else { message.warning(data.error[0].message); } }.bind(this) ); } componentWillMount() { this.departmentList(); this.state.data = this.props.orderData; this.state.data.oldPrice = this.props.orderData.totalAmount; this.setState({ data: this.state.data, voucherUrl: this.props.voucherUrl }); this.proList(); this.cuiList(); let e = this.props.orderData.type; if (e == 1) { this.setState({ hetongFlag: false, listFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: false }); } else if (e == 2) { this.setState({ hetongFlag: true, listFlag: false, listCuiFlag: false, tuiKuanFlag: true, displayList: false }); } else if (e == 3) { this.setState({ listFlag: false, hetongFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: true }); } else if (e == 4) { this.setState({ listFlag: false, listCuiFlag: false, hetongFlag: false, tuiKuanFlag: true, displayList: false }); } else if (e == 5) { this.setState({ listFlag: false, listCuiFlag: false, hetongFlag: true, tuiKuanFlag: true, displayList: false }); } else { this.setState({ listFlag: true, hetongFlag: true, listCuiFlag: true, tuiKuanFlag: false, displayList: false }); } } componentWillReceiveProps(nextProps) { this.state.data = nextProps.orderData; this.state.data.oldPrice = nextProps.orderData.totalAmount; this.setState({ data: this.state.data, voucherUrl: nextProps.voucherUrl }); this.proList(); this.cuiList(); let e = nextProps.orderData.type; if (e == 1) { this.setState({ hetongFlag: false, listFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: false }); } else if (e == 2) { this.setState({ hetongFlag: true, listFlag: false, listCuiFlag: false, tuiKuanFlag: true, displayList: false }); } else if (e == 3) { this.setState({ listFlag: false, hetongFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: true }); } else if (e == 4) { this.setState({ listFlag: false, listCuiFlag: false, hetongFlag: false, tuiKuanFlag: true, displayList: false }); } else if (e == 5) { this.setState({ listFlag: false, listCuiFlag: false, hetongFlag: true, tuiKuanFlag: true, displayList: false }); } else { this.setState({ listFlag: true, hetongFlag: true, listCuiFlag: true, tuiKuanFlag: false, displayList: false }); } // } } // componentWillMount() { // this.departmentList(); // } not() { } deleteChange() { this.setState({ loading: true, }); $.ajax({ url: globalConfig.context + "/api/admin/orderChange/cancelOrderChange", method: "post", data: { id: this.state.data.id, status: this.state.data.status, processState: this.state.data.processState, orderNo: this.state.data.orderNo }, }).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) ); } render() { const expandedRowRender = e => { const data = e.list; data.forEach((item) => { item.key = item.id }) let columns = []; if (e.list instanceof Array && e.list.length) { columns = [ { title: "变更状态", dataIndex: "type", key: "type", render: (text, record) => { let str = ""; let color = ""; if (text == 1) { str = "增"; color = "#87d068"; } else if (text == 2) { str = "改"; color = "#108ee9"; } else if (text == 3) { str = "删"; color = "#f50"; } return ( <span> <Tag color={color} style={{ display: text == 0 ? "none" : "inline-block" }} > {str} </Tag> {record.splitStatus == 1 ? ( <Tag color="#108ee9" // onClick={e => { // e.stopPropagation(); // this.showRes(record); // }} > 父项目 </Tag> ) : ( "" )} {record.splitStatus == 2 ? ( <Tag color="#108ee9" // onClick={e => { // e.stopPropagation(); // this.showRes(record); // }} > 子项目 </Tag> ) : ( "" )} </span> ); }, }, { title: "业务项目名称", dataIndex: "commodityName", key: "commodityName", render: (text, record) => { return text + "-" + record.id; }, }, { title: "项目类别", dataIndex: "cname", key: "cname", }, { title: "项目数量", dataIndex: "commodityQuantity", key: "commodityQuantity", }, { title: "金额(万元)", dataIndex: "commodityPrice", key: "commodityPrice", render: (text, record) => { if (record.splitStatus == 2) { return "/"; } else { return text; } }, }, { title: "主要项目", dataIndex: "main", key: "main", render: (text) => { return text ? "是" : "否"; }, }, { title: "项目负责人", dataIndex: "receiverName", key: "receiverName", }, { title: "项目说明", dataIndex: "taskComment", key: "taskComment", render: (text) => { return text && text.length > 8 ? text.substr(0, 8) + "…" : text; }, }, { title: "操作", dataIndex: "ABC", key: "ABC", render: (text, record) => { return ( <div> <Button onClick={(e) => { e.stopPropagation(); this.showConfirm(this.changeDeletePro, record); }} disabled={this.state.listFlag} style={{ display: this.state.displayList ? "none" : "block", }} > 删除 </Button> </div> ); }, }, ]; return ( <Table columns={columns} dataSource={data} scroll={{ x: "max-content", y: 0 }} pagination={false} onRowDoubleClick={this.state.listFlag ? this.not : this.editPro} /> ); } else { columns = []; return ( <p style={{ fontWeight: "bold", color: "red", textAlign: "center" }}> 此项目暂未拆分 </p> ); } }; const { TextArea } = Input; const data = this.state.data; // let departmentArr = this.state.departmentArr || []; const dataSources = this.state.customerArr || []; const cuiDataList = this.state.contactList || []; let departmentArr = this.state.departmentArr || []; const options = this.state.states ? dataSources.map(group => ( <Select.Option key={group.id} value={group.name}> {group.name} </Select.Option> )) : dataSources.map((group, index) => ( <Select.Option key={index} value={group.bname}> {group.bname} </Select.Option> )); return ( <div> <Spin spinning={this.state.loading}> {this.state.resVisible ? ( <ResolutionDetail cancel={this.resCancel} detail={this.state.resRecord} visible={this.state.resVisible} id={this.state.resRecord.orderNo} /> ) : ( "" )} <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="申请变更部门" > <span>{this.state.data.depName}</span> </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" }} /> */} <span>{data.applicant}</span> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="变更类型" > <Select placeholder="选择合同变更类型" style={{ width: 200 }} disabled={this.state.changeFlag} onChange={(e) => { let data = this.state.data; data.type = e; this.setState({ data, changeFlag: true }); if (e == 1) { this.setState({ hetongFlag: false, listFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: false, }); } else if (e == 2) { this.setState({ hetongFlag: true, listFlag: false, listCuiFlag: false, tuiKuanFlag: true, displayList: false, }); } else if (e == 3) { this.setState({ listFlag: false, hetongFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: true, }); } else if (e == 4) { this.setState({ listFlag: false, listCuiFlag: false, hetongFlag: false, tuiKuanFlag: true, displayList: false, }); } else if (e == 5) { this.setState({ listFlag: false, listCuiFlag: false, hetongFlag: true, tuiKuanFlag: true, displayList: false, }); } else { this.setState({ listFlag: true, hetongFlag: true, listCuiFlag: true, tuiKuanFlag: false, displayList: false, }); } }} 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> <Button style={{ marginLeft: 10 }} onClick={(e) => { this.state.data.startRemarks = ""; this.state.data.remarks = ""; this.state.data.changeAmount = "0"; this.state.data.depNameChange = undefined; this.state.data.typeChange = undefined; this.state.data.totalAmount = this.state.data.oldPrice; this.setState({ listFlag: false, hetongFlag: false, listCuiFlag: false, tuiKuanFlag: false, displayList: false, startRemarks: "", data: this.state.data, changeFlag: false, voucherUrl: [], // changeAmount: "0", // applicant: undefined, // depNameChange: undefined, // typeChange: [], // changeFlag: false }); }} > 重置 </Button> {this.state.data.status == 3 ? ( <Button type="danger" style={{ float: "right", backgroundColor: "red", color: "white", position: "absolute", right: 0, height: 50, borderRadius: 20, }} onClick={(e) => { e.stopPropagation(); this.showConfirmChange(this.deleteChange); }} > 取消本次变更 </Button> ) : ( "" )} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="合同额(万元)" > <Input placeholder="请输入合同额" ref="signTotalAmount" disabled={this.state.hetongFlag} 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" }} /> */} <span> {this.state.data.settlementAmount} <span style={{ color: "red" }}> (注:已收款与现实收款不符,请与财务专员联系) </span> </span> </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="申请退款(万元)" > <Input placeholder="请输入申请退款" ref="signTotalAmount" disabled={this.state.tuiKuanFlag} value={data.changeAmount} onChange={(e) => { let data = this.state.data; data.changeAmount = e.target.value; this.setState({ data }); }} style={{ width: "240px" }} /> </FormItem> </div> <div> <div> <span style={{ marginLeft: "50px", fontSize: "20px", }} > 项目业务 </span> <span style={{ color: "red" }}> (注:项目删除后,此项目的全部节点、全部工时,全部被删除,请谨慎删除!双击可修改对应金额数量!) </span> <Button type="primary" onClick={this.changeAddPro} disabled={this.state.listFlag} style={{ float: "right", marginRight: "50px", marginBottom: "15px", display: this.state.displayList ? "none" : "block", }} > 添加项目明细 </Button> </div> <div className="patent-table" style={{ marginBottom: 10 }}> {/* <Spin spinning={this.state.loading}> */} <Table columns={this.state.proColumns} dataSource={this.state.proDataSource} scroll={{ x: "max-content", y: 0 }} expandedRowRender={expandedRowRender} pagination={false} onRowDoubleClick={this.state.listFlag ? this.not : this.editPro} bordered size="small" /> {/* </Spin> */} </div> <div> <span style={{ marginLeft: "50px", fontSize: "20px", }} > 催款节点 </span> <span style={{ color: "red" }}> (注:节点删除后,无论节点是否触发,均会删除,请谨慎删除!双击可修改对应金额!) </span> <Button type="primary" onClick={(e) => { this.changeAddCui(); }} disabled={this.state.listCuiFlag} style={{ float: "right", marginRight: "50px", marginBottom: "15px", display: this.state.displayList ? "none" : "block", }} > 添加催款节点 </Button> </div> <div className="clearfix"> {/* <Spin spinning={this.state.loading}> */} <Form layout="horizontal"> <Table pagination={false} columns={this.state.changeCuiList} dataSource={this.state.cuiDataSource} scroll={{ x: "max-content", y: 0 }} onRowDoubleClick={ this.state.listCuiFlag ? this.not : this.editCui } bordered size="small" /> <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col> </Form> {/* </Spin> */} </div> </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> <Modal title="修改项目金额及数量" visible={this.state.editProVisible} onOk={this.submitEditPro} width={300} okText={"保存"} onCancel={() => { this.setState({ editProVisible: false, }); }} > <div className="clearfix"> <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} label="项目金额" style={{ display: this.state.editSplitStatus == 2 ? "none" : "block", }} > <Input placeholder="请输入金额" rows={4} value={this.state.editProMoney} onChange={(e) => { this.setState({ editProMoney: e.target.value }); }} /> </FormItem> <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} label="项目数量" > <Input placeholder="请输入数量" rows={4} value={this.state.editProCommodityQuantity} onChange={(e) => { this.setState({ editProCommodityQuantity: e.target.value }); }} /> </FormItem> </div> </Modal> <Modal title="修改催款节点金额" visible={this.state.editCuiVisible} onOk={this.submitEditCui} okText={"保存"} width={300} onCancel={(e) => { this.setState({ editCuiVisible: false, }); }} > <div className="clearfix"> <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} label="催款金额" > <Input placeholder="请输入金额" rows={4} value={this.state.editCuiMoney} onChange={(e) => { this.setState({ editCuiMoney: e.target.value }); }} /> </FormItem> </div> </Modal> <Modal maskClosable={false} visible={this.state.changeVisible} onOk={this.nextCancel} onCancel={this.nextCancel} width="800px" title={"添加变更项目"} footer="" className="admin-desc-content" > <Form layout="horizontal" // id="demand-form" > {/* <Spin spinning={this.state.loading}> */} <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="服务名称" > <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} dropdownStyle={{ width: 200 }} style={{ width: "200px" }} dataSource={options} placeholder="输入服务名称" value={this.state.commodityName} onChange={this.httpChange} filterOption={true} onSelect={this.selectAuto} > <Input /> </AutoComplete> <span className="mandatory">*</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="服务数量" > <Input placeholder="请输入服务数量" value={this.state.commodityQuantity} style={{ width: "200px" }} onChange={(e) => { this.setState({ commodityQuantity: e.target.value }); }} ref="commodityQuantity" /> <span className="mandatory">*</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="实签价格(万元)" > <Input placeholder="请输入实签价格" value={this.state.commodityPrice} style={{ width: "200px" }} onChange={(e) => { this.setState({ commodityPrice: e.target.value }); }} ref="commodityPrice" /> <span className="mandatory">*</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="主要业务" > <Select placeholder="选择是否为主要业务" style={{ width: "200px" }} value={this.state.main} onChange={(e) => { this.setState({ main: e }); }} > {boutique.map(function (item) { return ( <Select.Option key={item.value}> {item.key} </Select.Option> ); })} </Select> <span className="mandatory">*</span> </FormItem> <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="服务说明" > <Input type="textarea" placeholder="请输入服务说明" value={this.state.taskComment} onChange={(e) => { this.setState({ taskComment: e.target.value }); }} /> </FormItem> </div> <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle" > <Button className="submitSave" type="primary" onClick={this.changeProSubmit} > 保存 </Button> <Button className="submitSave" type="ghost" onClick={this.nextCancel} > 取消 </Button> </FormItem> </div> {/* </Spin> */} </Form> </Modal> </Spin> </div> ); } } export default ChangeApply;