kede-client/js/component/manageCenter/customer/NEW/crm/patentPayment.jsx

import React from 'react';
import {
	Icon,
	Button,
	AutoComplete,
	Input,
	Select,
	Spin,
	Table,
	Switch,
	message,
	DatePicker,
	Form,
	Modal,
	Tabs,
	Tooltip
} from 'antd';
import $ from 'jquery/src/ajax';
import moment from 'moment';

import { cityArr, patentTypeList } from '@/dataDic.js';
import {
	beforeUploadFile,
	splitUrl,
	getPatentType,
	getcityArr,
	ShowModal,
	getMessageReminderStart,
} from "@/tools.js";
import './customer.less';
import ShowModalDiv from "@/showModal.jsx";
import ImgList from "../../../../common/imgList";
import { ChooseList } from "../../../order/orderNew/chooseList";
import ReminderLog from "./reminderLog";
import Cascaders from "../../../../common/cascaders";

const Option = AutoComplete.Option;
const { TabPane } = Tabs;
//图片组件
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 { previewVisible, previewImage, fileList } = this.state;
		const uploadButton = (
			<div>
				<Icon type="plus" />
				<div className="ant-upload-text">点击上传</div>
			</div>
		);
		return (
			<div style={{ display: "inline-block" }}>
				<ImgList
					domId={this.props.domId}
					uploadConfig={{
						action: globalConfig.context + "/api/admin/patentNew/uploadFile",
						data: { 'sign': '' },
						multiple: true,
						listType: "picture-card",
						beforeUpload: (infor) => { beforeUploadFile(infor) }
					}}
					onChange={(infor) => {
						this.handleChange(infor)
					}}
					fileList={fileList}
				/>
			</div>
		);
	}
});
const PatentPayment = Form.create()(React.createClass({
	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);
					};
				} else {
					thedata.map(function (item, index) {
						theArr.push({
							key: index,
							name: item.name,
							id: item.id,
						})
					})
				}
				this.setState({
					departmentArr: theArr,
				})
			}.bind(this),
		}).always(function () {
			this.setState({
				loading: false
			});
		}.bind(this));
	},

	loadData(pageNo) {
		this.setState({
			loading: true
		}),
			$.ajax({
				method: "get",
				dataType: "json",
				crossDomain: false,
				url: globalConfig.context + '/api/admin/patentNew/selectPatentNew',
				data: {
					pageNo: pageNo || 1,
					pageSize: this.state.pagination.pageSize,
					status: this.state.statusSearch,
					name: this.state.nameSearch,
					aname: this.state.anameSearch,
					patentNo: this.state.patentNoSearch,
					inputDep: this.state.departmentSearch,
					startDate: this.state.timesArr[0],
					endDate: this.state.timesArr[1],
					type: this.state.typeSearch,
					createStart: this.state.releaseDate[0],
					createEnd: this.state.releaseDate[1],
				},
				success: function (data) {
					ShowModal(this);
					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({
								id: thisdata.id,
								province: thisdata.province,
								status: thisdata.status,
								patentNo: thisdata.patentNo,
								name: thisdata.name,
								type: thisdata.type,
								applyDates: thisdata.applyDates,
								authorizationDates: thisdata.authorizationDates,
								patentAmount: thisdata.patentAmount,
								applicant: thisdata.applicant,
								contactMobile: thisdata.contactMobile,
								email: thisdata.email,
								certificateUrl: thisdata.certificateUrl,
								aname: thisdata.aname,
								depName: thisdata.depName,
								userName: thisdata.userName,
								uid: thisdata.uid,
								createTimes: thisdata.createTimes
							});
						};
						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,
						dataSource: theArr,
						pagination: this.state.pagination,
					});
				}.bind(this)
			}).always(function () {
				this.setState({
					loading: false
				});
			}.bind(this));
	},
	getInitialState() {
		return {
			loading: false,
			visible: false,
			orgCodeUrl: [],
			fileList: [],
			departmentArr: [],
			timesArr: [],
			pagination: {
				defaultCurrent: 1,
				defaultPageSize: 10,
				showQuickJumper: true,
				pageSize: 10,
				onChange: function (page) {
					this.loadData(page);
				}.bind(this),
				showTotal: function (total) {
					return '共' + total + '条数据';
				}
			},
			releaseDate: [],
			dataSource: [],
			columns: [{
				title: '专利号',
				dataIndex: 'patentNo',
				key: 'patentNo'
			}, {
				title: '专利名称',
				dataIndex: 'name',
				key: 'name'
			}, {
				title: '专利类型',
				dataIndex: 'type',
				key: 'type',
				render: text => {
					return getPatentType(text)
				}
			}, {
				title: '申请日期',
				dataIndex: 'applyDates',
				key: 'applyDates'
			}, {
				title: '授权日期',
				dataIndex: 'authorizationDates',
				key: 'authorizationDates'
			}, {
				title: '费用',
				dataIndex: 'patentAmount',
				key: 'patentAmount'
			}, {
				title: '客户名称',
				dataIndex: 'userName',
				key: 'userName',
				width: 100,
				render: (text, record) => {
					return (
						<Tooltip title={record.uid ? text : record.applicant}>
							<div 
              // style={{
							// 	maxWidth: '100px',
							// 	overflow: 'hidden',
							// 	textOverflow: "ellipsis",
							// 	whiteSpace: 'nowrap',
							// }}
              >{record.uid ? text : record.applicant}</div>
						</Tooltip>
					)
				}
			}, {
				title: '录入人',
				dataIndex: 'aname',
				key: 'aname'
			}, {
				title: '录入日期',
				dataIndex: 'createTimes',
				key: 'createTimes'
			}, {
				title: '录入公司',
				dataIndex: 'depName',
				key: 'depName'
			}, {
				title: '联系电话',
				dataIndex: 'contactMobile',
				key: 'contactMobile'
			}, {
				title: '电子邮箱',
				dataIndex: 'email',
				key: 'email'
			}, {
				title: '状态',
				dataIndex: 'status',
				key: 'status',
				//状态 0 未提醒 1 剩余90天 2剩余30天 3剩余20天 4剩余10天 5剩余3天 6剩余2天 7剩余1天
				render: text => {
					return (getMessageReminderStart(text, true))
				}
			}, {
				title: '操作',
				dataIndex: 'id',
				key: 'id',
				render: (text) => (
					<Button
						type={"primary"}
						onClick={(e) => {
							e.stopPropagation();
							this.setState({
								reminderLogVisible: true,
								reminderLogId: text
							})
						}}
					>
						查看日志
					</Button>
				)
			}
			],
			customerServiceList: []
		}
	},
	componentWillMount() {
		this.loadData()
		// this.departmentList()
		let data = localStorage.getItem('newData');
		if (data != '{}' && data) {
			var newData = JSON.parse(data);
			this.tableRowClick(newData);
		};
	},
	new() {
		this.reset();
		this.setState({
			visible: true
		})
	},
	visitCancel() {
		this.state.fileList = [];
		this.setState({
			visible: false
		})
	},
	onSure() {
		let theorgCodeUrl = [];
		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);
				}
			});
			theorgCodeUrl = picArr.join(",");
		};
		if (!this.state.patentNo) {
			message.warning('专利号不能为空')
			return
		}
		if (!this.state.patentName) {
			message.warning('专利名称不能为空')
			return
		}
		if (!this.state.appDate) {
			message.warning('申请日期不能为空')
			return
		}
		if (isNaN(parseInt(this.state.patentType))) {
			message.warning('专利类型不能为空');
			return
		}
		if (!this.state.authDate) {
			message.warning('授权日期不能为空')
			return
		}
		if (!this.state.customerUid) {
			message.warning('客户名称不能为空')
			return
		}
		let mobile = /^1[0-9]{10}$/, phone = /^([0-9]{3,4}-)?[0-9]{7,8}$/, phone1 = /^\d{3,4}-\d{3,4}-\d{3,4}$/;
		if (this.state.contactPhone && !(mobile.test(this.state.contactPhone) || phone.test(this.state.contactPhone) || phone1.test(this.state.contactPhone))) {
			message.warning('电话格式不正确');
			return
		}
		let emailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
		if (this.state.email === '') {
			message.warning('电子邮箱不能为空');
			return
		}
		if (!emailReg.test(this.state.email)) {
			message.warning('电子邮箱格式不正确');
			return
		}
		this.setState({
			loading: true
		})
		$.ajax({
			method: "POST",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/patentNew/addPatentNew',
			data: {
				patentNo: this.state.patentNo,
				name: this.state.patentName,
				type: this.state.patentType,
				applyDates: this.state.appDate,
				authorizationDates: this.state.authDate,
				// applicant:this.state.proposer,
				province: this.state.province,
				contactMobile: this.state.contactPhone,
				email: this.state.email,
				certificateUrl: theorgCodeUrl.length ? theorgCodeUrl : '',
				uid: this.state.customerUid,
			}
		}).done(function (data) {
			this.setState({
				loading: false
			});
			if (!data.error.length) {
				message.success('保存成功！');
				this.onCal()
				this.loadData()
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},
	tableRowClick(record, index) {
		this.state.RowData = record
		this.setState({
			avisible: true,
			patentNo: record.patentNo,
			patentName: record.name,
			province: record.province,
			status: record.status,
			patentType: record.type,
			appDate: record.applyDates,
			authDate: record.authorizationDates,
			proposer: record.applicant,
			contactPhone: record.contactMobile,
			email: record.email,
			certificateUrl: record.certificateUrl,
			orgCodeUrl: record.certificateUrl ? splitUrl(record.certificateUrl, ',', globalConfig.avatarHost + '/upload') : [],
			customerUid: record.uid,
			customerName: record.userName
		})
		localStorage.setItem('newData', '{}');
	},
	xiugai(record) {
		let theorgCodeUrl = [];
		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);
				}
			});
			theorgCodeUrl = picArr.join(",");
		};
		if (!this.state.patentNo) {
			message.warning('专利号不能为空')
			return
		}
		if (!this.state.patentName) {
			message.warning('专利名称不能为空')
			return
		}
		if (!this.state.appDate) {
			message.warning('申请时间不能为空')
			return
		}
		if (isNaN(parseInt(this.state.patentType))) {
			message.warning('专利类型不能为空');
			return
		}
		if (!this.state.authDate) {
			message.warning('授权日期不能为空')
			return
		}
		if (!this.state.customerUid) {
			message.warning('客户名称不能为空')
			return
		}
		let mobile = /^1[0-9]{10}$/, phone = /^([0-9]{3,4}-)?[0-9]{7,8}$/, phone1 = /^\d{3,4}-\d{3,4}-\d{3,4}$/;
		if (this.state.contactPhone && !(mobile.test(this.state.contactPhone) || phone.test(this.state.contactPhone) || phone1.test(this.state.contactPhone))) {
			message.warning('电话格式不正确');
			return
		}
		let emailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
		if (this.state.email === '') {
			message.warning('电子邮箱不能为空');
			return
		}
		if (!emailReg.test(this.state.email)) {
			message.warning('电子邮箱格式不正确');
			return
		}
		this.setState({
			loading: true
		})
		$.ajax({
			method: "POST",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/patentNew/updatePatentNew',
			data: {
				id: record.id,
				patentNo: this.state.patentNo,
				name: this.state.patentName,
				type: this.state.patentType,
				applyDates: this.state.appDate,
				authorizationDates: this.state.authDate,
				// applicant:this.state.proposer,
				province: this.state.province,
				contactMobile: this.state.contactPhone,
				email: this.state.email,
				status: this.state.status,
				certificateUrl: theorgCodeUrl.length ? theorgCodeUrl : '',
				uid: this.state.customerUid,
			},
			success: function (data) {
			}.bind(this),
		}).done(function (data) {
			this.setState({
				loading: false
			});
			if (!data.error.length) {
				message.success('修改成功！');
				this.avisitCancel()
				this.loadData(this.state.pageNo)
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},

	baocunxiugai() {
		this.xiugai(this.state.RowData)
	},

	avisitCancel() {
		this.setState({
			avisible: false,
			customerServiceList: []
		})
	},
	reset() {
		this.setState({
			patentNo: '',
			patentName: '',
			patentType: undefined,
			appDate: undefined,
			authDate: undefined,
			orgCodeUrl: [],
			proposer: '',
			province: undefined,
			contactPhone: '',
			email: '',
			customerUid: undefined,
			customerName: undefined,
			customerServiceList: [],
		})
	},

	searchReset() {
		this.setState({
			statusSearch: undefined,
			nameSearch: undefined,
			anameSearch: undefined,
			patentNoSearch: undefined,
			departmentSearch: undefined,
			typeSearch: undefined,
			timesArr: [],
			releaseDate: []
		}, () => {
			this.Cascaders.empty();
			this.loadData();
		})
	},

	search() {
		this.loadData()
	},

	onCal() {
		this.setState({
			visible: false
		})
	},
	getOrgCodeUrl(e) {
		this.setState({ orgCodeUrl: e });
	},
	changeList(arr) {
		const newArr = [];
		this.state.columns.forEach(item => {
			arr.forEach(val => {
				if (val === item.title) {
					newArr.push(item);
				}
			});
		});
		this.setState({
			changeList: newArr
		});
	},
	//获取外联专员列表
	getAdminList(value = '') {
		if (value.length < 4) { return }
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/getUserByName",
			data: {
				name: value,
			},
			success: function (data) {
				let theArr = [];
				if (data.error && data.error.length) {
					message.warning(data.error[0].message);
				} else {
					if (data.data) {
						data.data.map(function (item, _) {
							theArr.push({
								value: item.id,
								label: item.name,
							});
						});
					}
				}
				this.setState({
					customerServiceList: theArr,
				});
			}.bind(this),
		}).always(
			function () {

			}.bind(this)
		);
	},

	render() {
		const theData = this.state.RowData || {};
		const FormItem = Form.Item;
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

		return (
			<div className="user-content">
				<ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
				<div className="content-title" style={{ marginBottom: 10 }}>
					<span style={{ fontWeight: 900, fontSize: 16 }}>客户专利提醒</span>
					<Tabs
						defaultActiveKey="1"
						className="test">
						<TabPane tab="搜索" key="1">
							<div className="user-search">
								<Select
									value={this.state.typeSearch}
									placeholder="请选择专利类型"
									onChange={e => {
										this.setState({
											typeSearch: e
										});
									}}
									style={{ width: "140px" }}
								>
									<Option value={1}>实用新型</Option>
									<Option value={2}>外观设计</Option>
									<Option value={3}>发明</Option>
								</Select>
								<Input
									value={this.state.nameSearch}
									placeholder="请输入授权公司"
									onChange={e => {
										this.setState({
											nameSearch: e.target.value
										});
									}}
								/>
								<Cascaders
									ref={ref => this.Cascaders = ref}
									placeholder="请选择录入公司"
									id="id"
									name="name"
									children="list"
									height={28}
									onSel={(e) => {
										this.setState({
											departmentSearch: JSON.stringify(e),
										});
									}}
								/>
								{/* <Select
									value={this.state.departmentSearch}
									placeholder="请选择录入公司"
									onChange={e => {
										this.setState({
											departmentSearch: e
										});
									}}
									style={{ width: "140px" }}
								>
									{this.state.departmentArr.map(e => {
										return <Option value={e.id}>{e.name}</Option>;
									})}
								</Select> */}
								<Input
									value={this.state.anameSearch}
									placeholder="请输入录入人"
									onChange={e => {
										this.setState({
											anameSearch: e.target.value
										});
									}}
								/>
								<Select
									value={this.state.statusSearch}
									placeholder="请选择状态"
									onChange={e => {
										this.setState({
											statusSearch: e
										});
									}}
									style={{ width: "140px" }}
								>
									<Option value={0}>正常</Option>
									<Option value={1}>提醒中</Option>
								</Select>
								<Input
									value={this.state.patentNoSearch}
									placeholder="请输入专利号"
									onChange={e => {
										this.setState({
											patentNoSearch: e.target.value
										});
									}}
								/>
								<Button
									type="primary"
									onClick={this.search}
									style={{ marginLeft: "10px" }}
								>
									搜索
								</Button>
								<Button
									type="primary"
									onClick={this.searchReset}
									style={{ marginLeft: "10px" }}
								>
									重置
								</Button>
								<span>
									更多搜索
									<Switch
										onChange={mark => {
											this.setState({ mark: mark });
										}}
									/>
								</span>
								{!this.props.isOnlyRead ? <Button
									type="primary"
									onClick={this.new}
									style={{ marginRight: "10px", float: "right" }}
								>
									新建
								</Button> : <div />}
								{/*<Button onClick={this.reset}>导出</Button>*/}
							</div>
						</TabPane>
						<TabPane tab="更改表格显示数据" key="2">
							<div style={{ marginLeft: 10 }}>
								<ChooseList
									columns={this.state.columns}
									changeFn={this.changeList}
									changeList={this.state.changeList}
									top={55}
									margin={11}
								/>
							</div>
						</TabPane>
					</Tabs>
					{this.state.mark ? (
						<div className="user-search" style={{ paddingTop: "10px" }}>
							<span style={{ fontSize: "14px" }}>请选择申请时间:</span>
							<RangePicker
								value={[
									this.state.timesArr[0]
										? moment(this.state.timesArr[0])
										: null,
									this.state.timesArr[1] ? moment(this.state.timesArr[1]) : null
								]}
								onChange={(e, f) => {
									this.setState({
										timesArr: f
									});
								}}
								style={{ marginTop: "0", marginLeft: "10px" }}
							/>
							<span style={{ fontSize: "14px", marginLeft: "15px" }}>请选择录入日期:</span>
							<RangePicker
								style={{ marginTop: "0", marginLeft: "10px" }}
								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 });
								}}
							/>
						</div>
					) : (
						""
					)}

					<div className="patent-table">
						<Spin spinning={this.state.loading}>
							<Table
								columns={
									this.state.changeList
										? this.state.changeList
										: this.state.columns
								}
								dataSource={this.state.dataSource}
								pagination={this.state.pagination}
								onRowClick={this.tableRowClick}
								size="middle"
								bordered
							/>
						</Spin>
					</div>
					{this.state.avisible ? <Modal
						maskClosable={false}
						visible={this.state.avisible}
						onCancel={this.avisitCancel}
						width="800px"
						title={!this.props.isOnlyRead ? "修改详情" : "查看详情"}
						footer=""
						className="admin-desc-content"
					>
						<div className="clearfix">
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>专利号
									</span>
								}
							>
								{!this.props.isOnlyRead ?
									<Input
										placeholder="请输入专利号"
										value={this.state.patentNo}
										onChange={e => {
											this.setState({ patentNo: e.target.value });
										}}
										style={{ width: "240px" }}
									/> : <span>{this.state.patentNo}</span>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>专利名称
									</span>
								}
							>
								{!this.props.isOnlyRead ?
									<Input
										placeholder="请输入专利名称"
										value={this.state.patentName}
										onChange={e => {
											this.setState({ patentName: e.target.value });
										}}
										style={{ width: "240px" }}
									/> : <div>{this.state.patentName}</div>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label="专利类型"
							>
								{!this.props.isOnlyRead ?
									<Select
										placeholder="请选择专利类型"
										style={{ width: "240px" }}
										value={getPatentType(this.state.patentType)}
										onChange={e => {
											this.setState({ patentType: e });
										}}
									>
										{patentTypeList.map(function (item) {
											return (
												<Select.Option key={item.value}>
													{item.key}
												</Select.Option>
											);
										})}
									</Select> : <div>{getPatentType(this.state.patentType)}</div>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>申请日期
									</span>
								}
							>
								{
									!this.props.isOnlyRead ?
										<DatePicker
											style={{ marginTop: "2px", width: "240px", height: "27px" }}
											showTime
											format="YYYY-MM-DD"
											onOk={e => { }}
											value={this.state.appDate ? moment(this.state.appDate) : null}
											onChange={(data, dataString) => {
												this.setState({ appDate: dataString });
											}}
										/> : <div>{this.state.appDate ? moment(this.state.appDate).format('YYYY-MM-DD') : ''}</div>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>授权日期
									</span>
								}
							>
								{
									!this.props.isOnlyRead ?
										<DatePicker
											style={{ marginTop: "2px", width: "240px", height: "27px" }}
											showTime
											format="YYYY-MM-DD"
											onOk={e => { }}
											value={
												this.state.authDate ? moment(this.state.authDate) : null
											}
											onChange={(data, dataString) => {
												this.setState({ authDate: dataString });
											}}
										/> : <div>{this.state.authDate ? moment(this.state.authDate).format('YYYY-MM-DD') : ''}</div>}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="费用">
								<span>{theData.patentAmount}</span>
							</FormItem>
							<div className="clearfix">
								<FormItem
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label="合同扫描件"
								>
									{!this.props.isOnlyRead ? <PicturesWall
										domId={'patentPayment1'}
										fileList={this.getOrgCodeUrl}
										pictureUrl={this.state.orgCodeUrl}
									/> :
										<div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
											<ImgList domId={'patentPayment3'} fileList={this.state.orgCodeUrl} />
										</div>
									}
									{!this.props.isOnlyRead ? <p>图片建议：要清晰。</p> : null}
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem
									className="half-item"
									{...formItemLayout}
									label={
										<span>
											<strong style={{ color: "#f00" }}>*</strong>客户名称
										</span>
									}
								>
									{
										!this.props.isOnlyRead ?
											<Select
												showSearch
												value={
													this.state.customerServiceList.length === 0 ?
														(this.state.customerName || undefined) :
														(
															this.state.customerServiceList.filter(v => v.value === this.state.customerUid).length === 0 ?
																this.state.customerName : this.state.customerUid
														)
												}
												style={{ width: 150, marginLeft: '10px' }}
												onSearch={this.getAdminList}
												onSelect={(v) => {
													this.setState({
														customerUid: v
													})
												}}
												filterOption={false}
												placeholder="请输入客户名称"
											>
												{this.state.customerServiceList.map((v, k) => (
													<Option title={v.label} key={k} value={v.value}>{v.label}</Option>
												))}
											</Select> : <div>{this.state.customerName}</div>
									}
								</FormItem>
							</div>
							{this.state.proposer ? <FormItem
								className="half-item"
								{...formItemLayout}
								label="申请人"
							>
								<div>{this.state.proposer}</div>
							</FormItem> : null}
							<FormItem className="half-item" {...formItemLayout} label="省份">
								{
									!this.props.isOnlyRead ?
										<Select
											placeholder="请选择省份"
											style={{ width: "240px" }}
											value={this.state.province ? String(this.state.province) : ''}
											onChange={e => {
												this.setState({ province: e });
											}}
										>
											{cityArr.map(function (item) {
												return (
													<Select.Option key={item.value}>{item.key}</Select.Option>
												);
											})}
										</Select> : <div>{getcityArr(this.state.province)}</div>}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label="联系电话"
							>
								{
									!this.props.isOnlyRead ?
										<Input
											placeholder="请输入联系手机"
											value={this.state.contactPhone}
											onChange={e => {
												this.setState({ contactPhone: e.target.value });
											}}
											style={{ width: "240px" }}
										/> : <div>{this.state.contactPhone}</div>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>电子邮箱
									</span>
								}
							>
								{
									!this.props.isOnlyRead ?
										<Input
											placeholder="请输入电子邮箱"
											value={this.state.email}
											onChange={e => {
												this.setState({ email: e.target.value });
											}}
											style={{ width: "240px" }}
										/> : <div>{this.state.email}</div>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label="状态"
							>
								<span>
									{/*状态 0 未提醒 1 剩余90天 2剩余30天 3剩余20天 4剩余10天 5剩余3天 6剩余2天 7剩余1天*/}
									{
										getMessageReminderStart(this.state.status, true)
									}
								</span>
							</FormItem>
						</div>
						{!this.props.isOnlyRead ? <div style={{ overflow: "hidden" }}>
							<Button style={{ float: "right" }} onClick={this.avisitCancel}>
								取消
							</Button>
							<Button
								type="primary"
								style={{ float: "right", marginRight: "10px" }}
								loading={this.state.loading}
								onClick={this.baocunxiugai}
							>
								保存
							</Button>
						</div> : <div />}
					</Modal> : <div />}

					{this.state.visible ? <Modal
						maskClosable={false}
						visible={this.state.visible}
						onOk={this.visitOk}
						onCancel={this.visitCancel}
						width="1200px"
						title="专利资料"
						footer=""
						className="admin-desc-content"
					>
						<div className="clearfix">
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>专利号
									</span>
								}
							>
								{
									<Input
										placeholder="请输入专利号"
										value={this.state.patentNo}
										onChange={e => {
											this.setState({ patentNo: e.target.value });
										}}
										style={{ width: "240px" }}
									/>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>专利名称
									</span>
								}
							>
								{
									<Input
										placeholder="请输入专利名称"
										value={this.state.patentName}
										onChange={e => {
											this.setState({ patentName: e.target.value });
										}}
										style={{ width: "240px" }}
									/>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>申请日期
									</span>
								}
							>
								<DatePicker
									style={{ marginTop: "2px", width: "240px", height: "27px" }}
									showTime
									format="YYYY-MM-DD"
									onOk={e => { }}
									value={this.state.appDate ? moment(this.state.appDate) : null}
									onChange={(data, dataString) => {
										this.setState({ appDate: dataString });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>专利类型
									</span>
								}
							>
								{
									<Select
										placeholder="请选择专利类型"
										style={{ width: "240px" }}
										value={this.state.patentType}
										onChange={e => {
											this.setState({ patentType: e });
										}}
									>
										{patentTypeList.map(function (item) {
											return (
												<Select.Option key={item.value}>
													{item.key}
												</Select.Option>
											);
										})}
									</Select>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>授权日期
									</span>
								}
							>
								<DatePicker
									style={{ marginTop: "2px", width: "240px", height: "27px" }}
									showTime
									format="YYYY-MM-DD"
									onOk={e => { }}
									value={
										this.state.authDate ? moment(this.state.authDate) : null
									}
									onChange={(data, dataString) => {
										this.setState({ authDate: dataString });
									}}
								/>
							</FormItem>
							<div className="clearfix">
								<FormItem
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label="合同扫描件"
								>
									<PicturesWall
										domId={'patentPayment2'}
										fileList={this.getOrgCodeUrl}
										pictureUrl={this.state.orgCodeUrl}
									/>
									<p>图片建议：要清晰。</p>
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem
									className="half-item"
									{...formItemLayout}
									label={
										<span>
											<strong style={{ color: "#f00" }}>*</strong>客户名称
										</span>
									}
								>
									<Select
										showSearch
										value={this.state.customerServiceList.filter(v => v.value === this.state.customerUid).length === 0 ?
											this.state.customerName : this.state.customerUid}
										style={{ width: 150, marginLeft: '10px' }}
										onSearch={this.getAdminList}
										onSelect={(v) => {
											let arr = this.state.customerServiceList.filter(d => d.value === v)
											this.setState({
												customerUid: v,
												customerName: arr[0].label
											})
										}}
										filterOption={false}
										placeholder="请输入客户名称"
									>
										{this.state.customerServiceList.map((v, k) => (
											<Option key={k} value={v.value}>{v.label}</Option>
										))}
									</Select>
								</FormItem>
							</div>
							<div>
								<span style={{ marginLeft: "50px", fontSize: "20px" }}>
									申请人资料
								</span>
							</div>
							{/*<FormItem*/}
							{/*  className="half-item"*/}
							{/*  {...formItemLayout}*/}
							{/*  label="申请人/公司"*/}
							{/*>*/}
							{/*  {*/}
							{/*    <Input*/}
							{/*      placeholder="请输入申请人/公司"*/}
							{/*      value={this.state.proposer}*/}
							{/*      onChange={e => {*/}
							{/*        this.setState({ proposer: e.target.value });*/}
							{/*      }}*/}
							{/*      style={{ width: "240px" }}*/}
							{/*    />*/}
							{/*  }*/}
							{/*</FormItem>*/}
							<FormItem className="half-item" {...formItemLayout} label="省份">
								<Select
									placeholder="请选择省份"
									style={{ width: "240px" }}
									value={this.state.province}
									onChange={e => {
										this.setState({ province: e });
									}}
								>
									{cityArr.map(function (item) {
										return (
											<Select.Option key={item.value}>{item.key}</Select.Option>
										);
									})}
								</Select>
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label="联系手机"
							>
								{
									<Input
										placeholder="请输入联系手机"
										value={this.state.contactPhone}
										onChange={e => {
											this.setState({ contactPhone: e.target.value });
										}}
										style={{ width: "240px" }}
									/>
								}
							</FormItem>
							<FormItem
								className="half-item"
								{...formItemLayout}
								label={
									<span>
										<strong style={{ color: "#f00" }}>*</strong>电子邮箱
									</span>
								}
							>
								{
									<Input
										placeholder="请输入电子邮箱"
										value={this.state.email}
										onChange={e => {
											this.setState({ email: e.target.value });
										}}
										style={{ width: "240px" }}
									/>
								}
							</FormItem>
						</div>
						<div style={{ overflow: "hidden" }}>
							<Button style={{ float: "right" }} onClick={this.onCal}>
								取消
							</Button>
							<Button
								type="primary"
								style={{ float: "right", marginRight: "10px" }}
								loading={this.state.loading}
								onClick={this.onSure}
							>
								保存
							</Button>
						</div>
					</Modal> : <div />}
				</div>
				{this.state.reminderLogVisible ? <ReminderLog
					id={this.state.reminderLogId}
					visible={this.state.reminderLogVisible}
					cancel={() => {
						this.setState({
							reminderLogVisible: false,
							reminderLogId: ''
						})
					}}
				/> : null}
			</div>
		);
	}
}))
export default PatentPayment;