import React, { Component } from "react"; import { AutoComplete, Button, Form, Input, message, Modal, Select, Spin, Tag, Radio, DatePicker } from "antd"; import $ from "jquery"; import moment from "moment"; import ImgList from "../../common/imgList"; import { splitUrl } from "../../tools"; import { vipYear } from "../../dataDic"; const FormItem = Form.Item; const Option = Select.Option; const RadioGroup = Radio.Group; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; const PicturesWall = React.createClass({ getInitialState() { return { previewVisible: false, previewImage: "", fileList: this.props.pictureUrl, }; }, getDefaultProps() { return { changeClick: this.modifyChange, }; }, handleCancel() { this.setState({ previewVisible: false }); }, handlePreview(file) { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }, handleChange(info) { let fileList = info.fileList; this.setState({ fileList }); this.props.fileList(fileList); }, componentWillReceiveProps(nextProps) { this.state.fileList = nextProps.pictureUrl; }, render() { const { fileList } = this.state; return ( <div style={{ display: "inline-block" }}> <ImgList domId={this.props.domId} uploadConfig={{ action: globalConfig.context + "/api/admin/orderProject/uploadMemberFile", data: { sign: "order_invoice_file" }, multiple: true, listType: "picture-card", }} onChange={(infor) => { this.handleChange(infor); }} fileList={fileList} /> </div> ); }, }); class ProjectOperationVip extends Component { constructor(props) { super(props); this.state = { commodityName: undefined, commodityQuantity: 1, patentType: 0, officialCost: '', costReduction: '', commodityPrice: '', main: '', taskComment: '', declarationBatch: '', ifCertificationFee: '', displayFees: "none", customerArr: [], patentTypeList: [], loading: false, patentTransfer: props.dataInfor ? props.dataInfor.patentTransfer : 0, //收否为专利转让 0 否 1 是 orgCodeUrl: [], serviceLife: [], histYear: [], //已派年份 serviceYear: undefined, //本次派单 isEdit: false,//是否可编辑 contractTerm: [],//合同期 addyear: undefined,// isGive: undefined,//是否赠送 cPeriod: false, // 合同期是否可编辑 } this.onSubmit = this.onSubmit.bind(this); this.httpChange = this.httpChange.bind(this); this.selectAuto = this.selectAuto.bind(this); this.setValue = this.setValue.bind(this); this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this); } componentDidMount() { this.setValue(); } setValue() { const { dataInfor } = this.props; if (!(dataInfor && Object.keys(dataInfor).length > 0)) { } else { this.setState({ fid: dataInfor.id, commodityId: dataInfor.commodityId, //项目ID commodityName: dataInfor.commodityName, //项目名称 commodityQuantity: dataInfor.commodityQuantity, // 数量 memberType: dataInfor.memberType.toString(),// 付款情况 taskComment: dataInfor.taskComment, // 备注 orgCodeUrl: dataInfor.pictureUrl ? splitUrl(dataInfor.pictureUrl, ",", globalConfig.avatarHost + "/upload") : [],// 附件 yearSum: dataInfor.yearSum && dataInfor.yearSum.toString() || undefined,//会员总服务年限 serviceLife: JSON.parse(dataInfor.serviceLife) || [],//会员服务年限 serviceYear: dataInfor.serviceYear || undefined,//本次派单 contractTerm: (!dataInfor.contractTerm || (dataInfor.contractTerm.indexOf("-") == -1)) ? [] : JSON.parse(dataInfor.contractTerm),//合同期 }); } } // getOrgCodeUrl(e) { this.setState({ orgCodeUrl: e }); } // 新建会员项目 onSubmit() { let pictureUrl = []; if (this.state.orgCodeUrl.length) { let picArr = []; this.state.orgCodeUrl.map(function (item) { if ( item.response && item.response.data && item.response.data.length ) { picArr.push(item.response.data); } }); pictureUrl = picArr.join(","); } if (this.state.commodityId === undefined || !this.state.commodityId) { message.warning("服务名称不匹配!"); return } let reg = /^([0]|[1-9][0-9]*)$/; if ( !this.state.commodityQuantity || !reg.test(this.state.commodityQuantity) ) { message.warning("请输入正确商品数量!"); return } if (this.state.memberType === undefined) { message.warning("请选择付款情况!"); return } if (this.state.yearSum === undefined) { message.warning("请选择会员总服务年限!"); return } if (this.state.serviceLife.length === 0) { message.warning("请添加会员服务年限!"); return } if (this.state.serviceLife.length != this.state.yearSum) { message.warning("会员服务年限与总年限不符合!"); return } if (this.state.serviceYear === undefined) { message.warning("请选择本次派单年份!"); return } if (this.state.contractTerm.length === 0) { message.warning("请添加合同期!"); return } if (this.state.memberType == "1" || this.state.memberType == "2") { if (typeof pictureUrl !== "string") { message.warning("请上传附件!"); return } } this.setState({ loading: true, }); let infor = { orderNo: this.props.orderNo, //订单编号 commodityId: this.state.commodityId, //项目编号 commodityName: this.state.commodityName, //项目名称 commodityQuantity: this.state.commodityQuantity, //商品数量 commodityPrice: 0, //签单总价 taskComment: this.state.taskComment, //服务说明 memberType: this.state.memberType,//会员付款状态 yearSum: this.state.yearSum,//会员总服务年限 serviceLife: JSON.stringify(this.state.serviceLife),//会员服务年限 serviceYear: this.state.serviceYear,//本次派单 contractTerm: JSON.stringify(this.state.contractTerm),//合同期 pictureUrl: pictureUrl.length ? pictureUrl : "",//附件 } $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderProject/addMemberProject", data: infor, }).done( function (data) { this.setState({ loading: false, }); if (!data.error.length) { Modal.success({ title: '保存成功!', content: ( <div> 已提出会员项目申请!请在 <span style={{ color: "red" }}>“订单管理-我的会员项目“</span> 跟进查看会员项目的审核状态,审核通过,即表示添加会员项目完成!!! </div>), }); this.props.onCancel(); } else { message.warning(data.error[0].message); } }.bind(this) ); } // 修改会员项目 onChange() { let pictureUrl = []; if (this.state.orgCodeUrl.length) { let picArr = []; this.state.orgCodeUrl.map(function (item) { if ( item.response && item.response.data && item.response.data.length ) { picArr.push(item.response.data); } }); pictureUrl = picArr.join(","); } if (this.state.commodityId === undefined || !this.state.commodityId) { message.warning("服务名称不匹配!"); return } let reg = /^([0]|[1-9][0-9]*)$/; if ( !this.state.commodityQuantity || !reg.test(this.state.commodityQuantity) ) { message.warning("请输入正确商品数量!"); return false; } if (this.state.memberType === undefined) { message.warning("请选择付款情况!"); return } if (this.state.yearSum === undefined) { message.warning("请选择会员总服务年限!"); return } if (this.state.serviceLife.length === 0) { message.warning("请添加会员服务年限!"); return } if (this.state.serviceLife.length != this.state.yearSum) { message.warning("会员服务年限与总年限不符合!"); return } if (this.state.serviceYear === undefined) { message.warning("请选择本次派单年份!"); return } if (this.state.contractTerm.length === 0) { message.warning("请添加合同期!"); return } if (this.state.memberType == "1" || this.state.memberType == "2") { if (typeof pictureUrl !== "string") { message.warning("请上传附件!"); return } } this.setState({ loading: true, }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderProject/updateMemberProject", data: { id: this.state.fid, //任务ID commodityId: this.state.commodityId, //项目ID commodityName: this.state.commodityName, //项目名称 orderNo: this.props.orderNo, //订单编号 commodityQuantity: this.state.commodityQuantity, //数量 taskComment: this.state.taskComment, //备注 memberType: this.state.memberType,//会员付款状态 yearSum: this.state.yearSum,//会员总服务年限 serviceLife: JSON.stringify(this.state.serviceLife),//会员服务年限 serviceYear: this.state.serviceYear,//本次派单 contractTerm: JSON.stringify(this.state.contractTerm),//合同期 pictureUrl: pictureUrl.length ? pictureUrl : "",//附件 }, }).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) ); } // httpChange(e) { this.setState({ commodityName: e, }); if (e.length >= 1) { this.supervisor(e); } } //加载(自动补全) supervisor(e) { //服务名称自动补全 let api = "/api/admin/order/getBusinessProjectByName"; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + api, data: { businessName: e, cname: "高新会员服务", }, success: function (data) { let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thedata = {}; } this.setState({ customerArr: thedata, }); }.bind(this), }).always( function () { }.bind(this) ); } // selectAuto(value) { const { customerArr } = this.state; const { newData } = this.props const newdataSources = JSON.stringify(customerArr) == "{}" ? [] : customerArr; let cid = newdataSources.find((item) => item.bname == value).commodityId this.setState({ commodityName: value, commodityId: cid, histYear: [], }); if (newData && newData.length > 0) { let llist = [] for (var i = 0; i < newData.length; i++) { if (newData[i].commodityId == cid) { llist.push(newData[i].serviceYear) } } this.setState({ histYear: llist }) for (var i = newData.length - 1; i >= 0; i--) { if (newData[i].commodityId == cid) { this.setState({ yearSum: newData[i].yearSum.toString(), // 会员总服务年限 serviceLife: JSON.parse(newData[i].serviceLife) || [], // 会员服务年限 isEdit: true, // 不可编辑 cPeriod: !newData[i].contractTerm ? false : true, //合同期编辑 }) } else { this.setState({ yearSum: undefined, serviceLife: [], isEdit: false, // 可编辑 cPeriod: false, }) } return } } } handleClose(removedTag) { let serviceLife = this.state.serviceLife.filter(tag => { return tag !== removedTag }); this.setState({ serviceLife, // commodityQuantity: serviceLife.length == 0 ? undefined : serviceLife.length, yearSum: serviceLife.length == 0 ? undefined : serviceLife.length.toString(), serviceYear: undefined }); } render() { let options = this.state.customerArr.map((group, index) => ( <Select.Option key={index} value={group.bname}> {group.bname} </Select.Option> )); // let contList = vipYear.map(its => ( // <Option key={its}>{its}</Option> // )); const { readOnly } = this.props; const { histYear, isEdit, cPeriod } = this.state const { RangePicker } = DatePicker; return ( <Modal maskClosable={false} visible={this.props.visible} onOk={this.props.onCancel} onCancel={this.props.onCancel} width="900px" title={readOnly ? "会员详情" : !this.state.fid ? "添加会员项目" : "编辑会员项目"} footer="" className="admin-desc-content" > <Form layout="horizontal" > <Spin spinning={this.state.loading}> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="服务名称" > {readOnly ? this.state.commodityName : <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} style={{ width: "200px" }} dataSource={options} placeholder="输入服务名称" value={this.state.commodityName} onChange={this.httpChange} filterOption={true} onSelect={this.selectAuto} > <Input /> </AutoComplete>} {!readOnly && <span className="mandatory">*</span>} </FormItem> <FormItem className="half-item" {...formItemLayout} label="服务数量" > {readOnly ? this.state.commodityQuantity : <Input placeholder="请输入服务数量" value={this.state.commodityQuantity} style={{ width: "200px" }} disabled={true} onChange={(e) => { this.setState({ commodityQuantity: e.target.value }); }} ref="commodityQuantity" />} {!readOnly && <span className="mandatory">*</span>} <div style={{ color: "red", position: "relative", left: "0" }} >注:会员项目单次限制,只能派一年</div> </FormItem> <FormItem className="half-item" {...formItemLayout} label="付款情况" > {readOnly ? [ { value: "0", key: "已付会员节点全款" }, { value: "1", key: "已付部分期款,需特批" }, { value: "2", key: "未付款,需特批" }][this.state.memberType] : <Select placeholder="选择付款情况" style={{ width: "200px" }} value={this.state.memberType} onChange={(e) => { this.setState({ memberType: e }); }} > {[ { value: "0", key: "已付会员节点全款" }, { value: "1", key: "已付部分期款,需特批" }, { value: "2", key: "未付款,需特批" }].map(function (item) { return ( <Select.Option key={item.value} value={item.value}> {item.key} </Select.Option> ); })} </Select>} {!readOnly && <span className="mandatory">*</span>} </FormItem> <FormItem className="half-item" {...formItemLayout} label="会员总服务年限" > { this.state.yearSum == null ? "" : [ { value: "0", key: "" }, { value: "1", key: "一年" }, { value: "2", key: "二年" }, { value: "3", key: "三年" }, { value: "4", key: "四年" }, { value: "5", key: "五年" }, { value: "6", key: "六年" }, { value: "7", key: "七年" }, { value: "8", key: "八年" }, { value: "9", key: "九年" }, { value: "10", key: "十年" }, ][this.state.yearSum]["key"] } </FormItem> <FormItem className="half-item" {...formItemLayout} label="会员服务年限" > <div> { this.state.serviceLife.map((tag) => <Tag closable={!isEdit} key={tag} afterClose={() => this.handleClose(tag)}> {tag} </Tag> ) } { !isEdit && (this.state.serviceLife.length < 10) && <Button size="small" type="primary" onClick={() => { this.setState({ addYears: true, addyear: undefined, isGive: undefined, }) }}> + 添加服务年限 </Button> } </div> {/* { readOnly ? this.state.serviceLife.toString() : <Select disabled={isEdit} mode="multiple" style={{ width: '200px' }} placeholder="请选择服务年限" value={this.state.serviceLife} onChange={(e) => { this.setState({ serviceLife: e, serviceYear: undefined, }) }} > {contList} </Select> } */} {/* {!readOnly && <span className="mandatory">*</span>} */} </FormItem> { this.state.serviceLife.length > 0 && <FormItem className="half-item" {...formItemLayout} label="本次派单" > {readOnly ? this.state.serviceYear : <Select placeholder="请选择本次派单年份" style={{ width: "200px" }} value={this.state.serviceYear} onChange={(e) => { console.log("==", e) this.setState({ serviceYear: e }); }} > {this.state.serviceLife.length > 0 && this.state.serviceLife.map(function (item) { return ( <Select.Option key={item} disabled={histYear.includes(item)}> {item} </Select.Option> ); })} </Select>} {!readOnly && <span className="mandatory">*</span>} </FormItem> } <FormItem className="half-item" {...formItemLayout} label="合同期" > { readOnly ? !!this.state.contractTerm ? this.state.contractTerm.toString().replace(",", "至") : "" : <RangePicker style={{ width: 200 }} disabled={cPeriod} value={[ this.state.contractTerm[0] ? moment(this.state.contractTerm[0]) : null, this.state.contractTerm[1] ? moment(this.state.contractTerm[1]) : null, ]} onChange={(data, dataString) => { this.setState({ contractTerm: dataString }); }} /> // <Select // mode="multiple" // style={{ width: '200px' }} // placeholder="请选择合同期" // disabled={this.state.cPeriod} // value={this.state.contractTerm} // onChange={e => { // this.setState({ // contractTerm: e, // }) // }} // > // {contList} // </Select> } {!readOnly && <span className="mandatory">*</span>} </FormItem> { (this.state.memberType == "1" || this.state.memberType == "2") && <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="上传附件" > <PicturesWall domId={'vip'} fileList={this.getOrgCodeUrl} pictureUrl={this.state.orgCodeUrl} /> {!readOnly && <span className="mandatory">*</span>} </FormItem> <div style={{ color: "red", marginLeft: 144, marginBottom: 15 }}> 特批需上传附件图,请上传客户同意我方继续服务并安排给我司付款的聊天记录截图, <p>若没有客户同意继续服务及会安排付款的截图,特派流程将无法走下去,以免造成派单耽搁</p> </div> </div> } <div className="clearfix"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="项目说明" > {readOnly ? this.state.taskComment : <Input type="textarea" placeholder="如:派2022年会员服务,总会员服务三年,客户付款情况说明" autosize={{ minRows: 4 }} value={this.state.taskComment} onChange={(e) => { this.setState({ taskComment: e.target.value }); }} />} </FormItem> <div style={{ color: "red", marginLeft: 144 }}> 请详细说明项目服务时间,总服务时间及付款情况,如:<span style={{ color: "#333" }}>派2022年会员服务,总会员服务三年,客户付款情况说明</span> <p>未付款时,需进行特批审核,请详细说明预计付款时间等详细情况</p> </div> </div> {readOnly ? null : <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle" > <Button className="submitSave" type="primary" onClick={() => { if (!this.state.fid) { this.onSubmit() } else { this.onChange() } }} > 保存 </Button> <Button className="submitSave" type="ghost" onClick={this.props.onCancel} > 取消 </Button> </FormItem>} </div> </Spin> </Form> { this.state.addYears && <Modal title="添加服务年限" visible={this.state.addYears} okText="添加" onOk={() => { if (!this.state.addyear) { message.warn("请选择年份!") return } if (this.state.isGive == undefined) { message.warn("请选择是否赠送!") return } let slist = this.state.serviceLife if (this.state.isGive == 0) { slist.push(this.state.addyear) } else if (this.state.isGive == 1) { let newYear = this.state.addyear + "(赠)" slist.push(newYear) } this.setState({ serviceLife: slist, yearSum: slist.length.toString(), addYears: false }) }} onCancel={() => { this.setState({ addYears: false }) }} > <Select style={{ width: '200px', marginRight: 50 }} placeholder="请选择年份" onChange={e => { this.setState({ addyear: e, }) }} > { vipYear.map(its => ( <Select.Option key={its} disabled={this.state.serviceLife.toString().includes(its)} >{its}</Select.Option> )) } </Select> <RadioGroup onChange={e => { this.setState({ isGive: e.target.value }) }} value={this.state.isGive} > <Radio value={0}>非赠送</Radio> <Radio value={1}>赠送</Radio> </RadioGroup> </Modal> } </Modal> ) } } export default ProjectOperationVip;