import React from 'react'; import { Radio, Icon, Button, AutoComplete,Cascader,Input, Select, Spin, Popconfirm, Table, Switch, message, DatePicker, Upload, Form ,Modal,Tabs} from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import TechAchievementDesc from '@/manageCenter/achievement/crmAchievement.jsx'; import { citySelect, provinceList ,areaSelect} from '@/NewDicProvinceList'; import { socialAttribute, industry, auditStatusL, lvl, currentMember ,slcRedit,dataGrade,cityArr,patentTypeList} from '@/dataDic.js'; import { getSocialAttribute, beforeUploadFile, splitUrl, getSlcRedit, getDataGrade, getAchievementCategory, getTechAuditStatus, getboutique, getPatentType, getcityArr, getPatentTypeva, ShowModal } from "@/tools.js"; import './customer.less'; import ShowModalDiv from "@/showModal.jsx"; import ImgList from "../../../../common/imgList"; import {ChooseList} from "../../../order/orderNew/chooseList"; 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, departmentId:this.state.departmentSearch, startDate:this.state.timesArr[0], endDate:this.state.timesArr[1], type:this.state.typeSearch, }, 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, }); }; 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 + '条数据'; } }, 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: 'applicant', key: 'applicant' },{ title: '录入人', dataIndex: 'aname', key: 'aname' },{ title: '录入公司', dataIndex: 'depName', key: 'depName' },{ title: '联系电话', dataIndex: 'contactMobile', key: 'contactMobile' },{ title: '电子邮箱', dataIndex: 'email', key: 'email' },{ title: '状态', dataIndex: 'status', key: 'status', render:text=>{ if (text === 1) { return '已提醒' }else{ return '待提醒' } } }] } }, 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.patentType === ''){ 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:'', } }).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') : [], }) 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(","); }; console.log(typeof this.state.patentType) if (!this.state.patentNo) { message.warning('专利号不能为空') return } if (!this.state.patentName) { message.warning('专利名称不能为空') return } if(this.state.patentType === ''){ 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:'', }, 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 }) }, reset(){ this.setState({ patentNo:'', patentName:'', patentType:undefined, appDate:undefined, authDate:undefined, orgCodeUrl:[], proposer:'', province:undefined, contactPhone:'', email:'' }) }, searchReset(){ this.setState({ statusSearch:undefined, nameSearch:undefined, anameSearch:undefined, patentNoSearch:undefined, departmentSearch:undefined, typeSearch:undefined, timesArr:[], },()=>{ 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 }); }, 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} /> <div className="content-title"> <span style={{ fontSize: "16px" }}>客户专利提醒</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 }); }} /> <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" }} /> </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="申请日期" > { !this.props.isOnlyRead ? <DatePicker style={{ marginTop: "2px", width: "240px", height: "32px" }} 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="授权日期" > { !this.props.isOnlyRead ? <DatePicker style={{ marginTop: "2px", width: "240px", height: "32px" }} 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> <FormItem className="half-item" {...formItemLayout} label="申请人" > { !this.props.isOnlyRead ? <Input placeholder="请输入申请人/公司" value={this.state.proposer} onChange={e => { this.setState({ proposer: e.target.value }); }} style={{ width: "240px" }} /> : <div>{this.state.proposer}</div> } </FormItem> <FormItem className="half-item" {...formItemLayout} label="省份"> { !this.props.isOnlyRead ? <Select placeholder="请选择省份" style={{ width: "240px" }} value={getcityArr(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>{this.state.status ? "已提醒" : "待提醒"}</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="1000px" 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="申请日期" > <DatePicker style={{ marginTop: "2px", width: "240px", height: "32px" }} 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="授权日期" > <DatePicker style={{ marginTop: "2px", width: "240px", height: "32px" }} 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> <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> </div> ); } })) export default PatentPayment;