kede-client/js/component/manageCenter/servicesManage/projectOrder/projectManagement/projectManageNew.jsx

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: "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);
					};
					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 size="middle" 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;