import React from 'react'; import ReactDom from 'react-dom'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, Modal, Upload ,Popconfirm,DatePicker} from 'antd'; import MySettlementDetaile from "./projectManageDetaile.jsx"; import moment from 'moment'; import '../userMangagement.less'; import {projectState,orderState,distributeState} from '../../../../dataDic.js'; import {getProjectState,getOrderState,getOrderType,getPaymentState,getApprovedState,getDistributeState} from '../../../../tools.js'; const ProjectOrderNew=Form.create()(React.createClass({ loadData(pageNo) { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/techproject/salesmanListProject', data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, setUpStartDate: this.state.releaseDate[0], setUpEndDate: this.state.releaseDate[1], depId:this.state.departmentt, orderStartDate: this.state.releaseDateOrder[0], orderEndDate: this.state.releaseDateOrder[1], buyerName:this.state.buyerNameSearch,//客户名称 orderStatus:this.state.orderStatusSearch, //订单状态 salesmanName:this.state.salesmanNameSearch,//订单负责人 financeLeaderSearch:this.state.financeLeaderSearch,//财务负责人 orderNo:this.state.orderNoSearch,//订单编号 deletedSign:this.state.deleteSignSearch,//锁定激活 serialNumber:this.state.serialNumberSearch,//项目编号 principalName:this.state.principalNameSearch, taskDistribution:this.state.distributeSearch }, success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, id: thisdata.id, serialNumber: thisdata.serialNumber, signDate:thisdata.signDate, buyerName:thisdata.buyerName, projectType:thisdata.projectType, projectStatus:thisdata.projectStatus, deleteSign:thisdata.deletedSign, orderNo:thisdata.orderNo, orderTime:thisdata.orderTime, orderStatus:thisdata.orderStatus, liquidationStatus:thisdata.liquidationStatus, approval:thisdata.approval, buyerType:thisdata.buyerType, salesmanName:thisdata.salesmanName, departmentName:thisdata.departmentName, principalName:thisdata.principalName, taskDistribution:thisdata.taskDistribution }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; if(!data.data.list.length){ this.state.pagination.current=0 this.state.pagination.total=0 } this.setState({ pageNo:pageNo, newProject:false, dataSource: theArr, pagination: this.state.pagination, selectedRowKeys:[] }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { datauser:{}, selectedRowKeys: [], selectedRows: [], searchMore: true, releaseDate: [], releaseDateOrder:[], categoryArr:[], projectState:false, newProject:false, loading: false, KnotState:true, distributionVisible:false, visible:false, showDesc:false, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, columns: [ { title: '项目编号', dataIndex: 'serialNumber', key: 'serialNumber' },{ title: '立项时间', dataIndex: 'signDate', key: 'signDate' },{ title: '客户名称', dataIndex: 'buyerName', key: 'buyerName', render:(text)=>{ return text&&text.length>=6?text.substr(0,5)+'...':text } },{ title: '项目状态', dataIndex: 'projectStatus', key: 'projectStatus', render:(text)=>{return getProjectState(text) } },{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', },{ title: '下单时间', dataIndex: 'orderTime', key: 'orderTime', },{ title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus', render:(text)=>{return getOrderState(text) } },{ title: '订单负责人', dataIndex: 'salesmanName', key: 'salesmanName', },{ title: '项目负责人', dataIndex: 'principalName', key: 'principalName', },{ title: '订单部门', dataIndex: 'departmentName', key: 'departmentName', },{ title: '结算状态', dataIndex: 'liquidationStatus', key: 'liquidationStatus', render:(text)=>{return getPaymentState(text) } },{ title: '是否特批', dataIndex: 'approval', key: 'approval', render:(text)=>{return getApprovedState(text) } },{ title: '分派情况', dataIndex: 'taskDistribution', key: 'taskDistribution', render:(text)=>{return getDistributeState(text) } }, { title: '操作', dataIndex: 'rr', key: 'rr', render:(text,record,index)=>{ return ( <div> {record.projectStatus==2||record.projectStatus==5?<Button style={{marginRight:'5px'}} type="primary" onClick={(e) =>{ e.stopPropagation(),this.Knot(record)}}>派单</Button>:''} {record.projectStatus==2&&<Button style={{marginRight:'5px'}} type="primary" onClick={(e) =>{ e.stopPropagation(),this.Knots(record)}}>结项</Button>} {record.projectStatus==1||record.projectStatus==5?<Popconfirm title={'您将作废项目【'+record.roleName+'】,系统将自动同步作废项目任务及项目资料单,请确认'} onConfirm={(e)=>{this.scrapOrder(record)}} okText="确认" cancelText="取消"> <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">作废</Button> </Popconfirm>:''} </div> ) } } ], queryColumns: [ { title: '项目编号', dataIndex: 'serialNumber', key: 'serialNumber' },{ title: '立项时间', dataIndex: 'signDate', key: 'signDate' },{ title: '客户名称', dataIndex: 'buyerName', key: 'buyerName', render:(text)=>{ return text&&text.length>=6?text.substr(0,5)+'...':text } },{ title: '客户类型', dataIndex: 'buyerType', key: 'buyerType', render:(text)=>{return text?'单位客户':'个人客户'} },{ title: '业务品类', dataIndex: 'projectType', key: 'projectType', },{ title: '项目状态', dataIndex: 'projectStatus', key: 'projectStatus', render:(text)=>{return getProjectState(text) } },{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', },{ title: '下单时间', dataIndex: 'orderTime', key: 'orderTime', },{ title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus', render:(text)=>{return getOrderState(text) } },{ title: '订单负责人', dataIndex: 'salesmanName', key: 'salesmanName', },{ title: '项目负责人', dataIndex: 'principalName', key: 'principalName', },{ title: '订单部门', dataIndex: 'departmentName', key: 'departmentName', },{ title: '结算状态', dataIndex: 'liquidationStatus', key: 'liquidationStatus', render:(text)=>{return getPaymentState(text) } },{ title: '是否特批', dataIndex: 'approval', key: 'approval', render:(text)=>{return getApprovedState(text) } },{ title: '分派情况', dataIndex: 'taskDistribution', key: 'taskDistribution', render:(text)=>{return getDistributeState(text) } } ], dataSource: [], }; }, //结项 Knots(record){ this.setState({ signComment:'', contractId:record.id, serial:record.serialNumber, buyerName:record.buyerName, KnotState:false, signBillVisible:true }) }, //部门 departmentList() { this.setState({ loading: true }); $.ajax({ method: "post", 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); }; thedata = {}; }else{ thedata.map(function(item,index){ theArr.push({ key:index, name:item.name, id:item.id, depNo:item.depNo }) }) } this.setState({ departmentArr:theArr, }) }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, //作废项目 scrapOrder(record){ this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context +'/api/zuofei', data: { id:record.id, } }).done(function(data) { this.setState({ loading: false }); if(!data.error.length) { message.success('操作成功!'); this.loadData(this.state.pageNo); } else { message.warning(data.error[0].message); } }.bind(this)); }, //创建项目 addClick() { this.setState({ newProject:true, signBillVisible:false, showDesc: false }); }, //品类数据获取 category(){ this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/Varieties/getSuperList", data: { }, success: function(data) { let thedata = data.data; let theArr=[]; if(!thedata) { if(data.error && data.error.length) { message.warning(data.error[0].message); }; thedata = {}; }else{ thedata.map(function(item,index){ theArr.push({ key:index, name:item.cname, id:item.id, }) }) } this.setState({ categoryArr:theArr, }) }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, componentWillMount() { let data=localStorage.getItem('newData'); if(data!='{}'&&data){ var newData = JSON.parse(data); this.tableRowClick(newData); }; }, componentDidMount(){ this.loadData(); this.departmentList(); this.category(); }, //项目管理 Knot(record){ this.state.userDetaile=true; this.state.datauser = record; this.setState({ projectState:true, newProject:false, showDesc: true }); }, noProject(){ this.setState({ signBillVisible:false }) }, closeDesc(e, s) { this.state.userDetaile=false; this.state.showDesc = e; if (s) { this.loadData(this.state.pageNo); }; }, noProject(){ this.setState({ signBillVisible:false }) }, //结项 projectSubmit(e){ e.preventDefault(); this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context +'/api/admin/techproject/revokeOrComplete' , data: { contractId:this.state.contractId, operatorType:1, completeComment:this.state.signComment, } }).done(function(data) { this.setState({ loading: false }); if(!data.error.length) { message.success('结项成功!'); this.noProject(); this.loadData(this.state.pageNo); } else { message.warning(data.error[0].message); } }.bind(this)); }, searchSwitch() { this.setState({ newProject:false, searchMore: !this.state.searchMore }); }, search() { this.loadData(); }, tableRowClick(record, index) { this.state.userDetaile=true; this.state.datauser = record; this.setState({ projectState:false, newProject:false, showDesc: true }); localStorage.setItem('newData','{}'); }, reset() { this.state.buyerNameSearch=''; this.state.serialNumberSearch=''; this.state.principalNameSearch=''; this.state.releaseDate[0] = undefined; this.state.releaseDate[1] = undefined; this.state.releaseDateOrder[0] = undefined; this.state.releaseDateOrder[1] = undefined; this.state.departmentt=undefined; this.state.orderStatusSearch = undefined; this.state.salesmanNameSearch = ''; this.state.orderNoSearch=''; this.state.distributeSearch=undefined; this.state.deleteSignSearch=undefined; this.loadData(); }, render() { const FormItem = Form.Item; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; const { RangePicker } = DatePicker; const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); }, onSelectAll: (selected, selectedRows, changeRows) => { this.setState({ selectedRowKeys:[] }) }, }; const hasSelected = this.state.selectedRowKeys.length > 0; let departmentArr = this.state.departmentArr || []; return ( <div className="user-content" > <div className="content-title"> <span style={{fontSize:'16px'}}>{this.props.queryProject?'项目查询':'项目管理'}</span> <div className="user-search"> <Input placeholder="客户名称" style={{width:'150px'}} value={this.state.buyerNameSearch} onChange={(e) => { this.setState({ buyerNameSearch: e.target.value }); }} /> <Select placeholder="分派情况" style={{width:'150px'}} value={this.state.distributeSearch} onChange={(e) => { this.setState({ distributeSearch: e }) }}> { distributeState.map(function (item) { return <Select.Option key={item.value} >{item.key}</Select.Option> }) } </Select> <Input placeholder="订单编号" style={{width:'150px',marginRight:'10px'}} value={this.state.orderNoSearch} onChange={(e) => { this.setState({ orderNoSearch: e.target.value }); }} /> <Input placeholder="项目编号" style={{width:'150px',marginRight:'10px'}} value={this.state.serialNumberSearch} onChange={(e) => { this.setState({ serialNumberSearch: e.target.value }); }} /> <Select placeholder="选择部门" style={{width:'150px'}} value={this.state.departmentt} onChange={(e) => { this.setState({ departmentt: e }) }}> { departmentArr.map(function (item) { return <Select.Option key={item.id} >{item.name}</Select.Option> }) } </Select> <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button> <Button onClick={this.reset}>重置</Button> <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span> {this.props.queryProject?'':<Button type="primary" className="addButton" onClick={this.addClick} >创建项目<Icon type="plus" /></Button>} </div> <div className='clearfix' style={{marginTop:'5px'}}> <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}> <Input placeholder="项目负责人" style={{width:'150px'}} value={this.state.principalNameSearch} onChange={(e) => { this.setState({ principalNameSearch: e.target.value }); }} /> <Input placeholder="订单负责人" style={{width:'150px',margin:'10px'}} value={this.state.salesmanNameSearch} onChange={(e) => { this.setState({ salesmanNameSearch: e.target.value }); }} /> <span style={{fontSize:'14px',marginRight:'5px'}}>立项时间:</span> <RangePicker value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null, this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]} onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} /> <span style={{fontSize:'14px',marginRight:'5px'}}>订单时间:</span> <RangePicker value={[this.state.releaseDateOrder[0] ? moment(this.state.releaseDateOrder[0]) : null, this.state.releaseDateOrder[1] ? moment(this.state.releaseDateOrder[1]) : null]} onChange={(data, dataString) => { this.setState({ releaseDateOrder: dataString }); }} /> </div> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.props.queryProject?this.state.queryColumns:this.state.columns} dataSource={this.state.dataSource} rowSelection={rowSelection} pagination={this.state.pagination} onRowClick={this.tableRowClick} /> </Spin> </div> <MySettlementDetaile categoryArr={this.state.categoryArr} queryProject={this.props.queryProject} departmentArr={this.state.departmentArr} projectState={this.state.projectState} newProject={this.state.newProject} userDetaile={this.state.userDetaile} datauser={this.state.datauser} showDesc={this.state.showDesc} closeDesc={this.closeDesc} /> </div > <Modal maskClosable={false} visible={this.state.signBillVisible} onOk={this.noProject} onCancel={this.noProject} width='800px' title='项目结项' footer='' className="admin-desc-content"> <Form layout="horizontal" onSubmit={this.projectSubmit} id="demand-form"> <Spin spinning={this.state.loading}> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="项目编号" > <span>{this.state.serial}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="客户名称" > <span>{this.state.buyerName}</span> </FormItem> <div className='clearfix'> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="结项说明" > <Input type="textarea" placeholder="请输入备注" rows={4} value={this.state.signComment} onChange={(e)=>{this.setState({signComment:e.target.value})}}/> </FormItem> </div> </div> <FormItem wrapperCol={{ span: 12, offset: 4 }} className="half-middle"> <Button className="submitSave" type="primary" htmlType="submit">确定结项</Button> <Button className="submitSave" type="ghost" onClick={this.noProject}>返回</Button> </FormItem> </Spin> </Form > </Modal> </div> ); } })); export default ProjectOrderNew;