import React,{ Component } from 'react'; import {Button, DatePicker, Input, message, Select, Spin, Table, Tabs} from "antd"; import { ShowModal } from "@/tools"; import {ChooseList} from "../../order/orderNew/chooseList"; import $ from "jquery/src/ajax"; import moment from "moment"; import { highTechColumns, doubleSoft, softWriting, patent, currency, } from './highTechConfig'; import ProjectDetails from './projectDetails'; const {TabPane} = Tabs; const { RangePicker } = DatePicker; const { Option } = Select; class HighTech extends Component{ constructor(props) { super(props); this.state={ loading:false, changeList:[], columns: currency, status: 0, page: 1, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function(page) { this.loadData(page); }.bind(this), showTotal: function(total) { return "共" + total + "条数据"; } }, dataSource: [], releaseDate:[], searchOrderNo: '', searchContractNo: '', searchEnterpriseName: '', declarationBatch: '', projectSituation: '', projectAmount: '', depId:'', thchDepId:'', projectType: '', projectStatus: '', departmentArr: [], contactsOption: [], contactsOptionData: [], visible: false, }; this.resetAll = this.resetAll.bind(this); this.changeList = this.changeList.bind(this); this.departmentList = this.departmentList.bind(this); this.exportPending = this.exportPending.bind(this); this.loadData = this.loadData.bind(this); this.selectSuperId = this.selectSuperId.bind(this); } changeList(arr) { const newArr = []; this.state.columns.forEach(item => { arr.forEach(val => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr }); } loadData(pageNo='') { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistis/selectTaskList", data: this.props.searchData ? Object.assign({ pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize || 10, },this.props.searchData) : { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize || 10, startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0]: undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1]: undefined, //结束时间 depId: this.state.depId || undefined,//部门ID thchDepId: this.state.thchDepId || undefined,//责任部门ID projectStatus: this.state.projectStatus || undefined,//项目类别 projectType: typeof this.state.projectType === 'number' ? this.state.projectType : undefined,//项目分类 orderNo: this.state.searchOrderNo || undefined,//订单编号 contractNo: this.state.searchContractNo || undefined,//合同编号 userName: this.state.searchEnterpriseName || undefined,//企业名称 declarationBatch: this.state.declarationBatch || undefined,//申报批次 projectSituation: typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined,//项目分类 projectAmount: this.state.projectAmount || undefined,//项目金额 status: this.state.status, }, success: function(data) { ShowModal(this); let theArr = []; if (!data.data || !data.data.list) { 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]; thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1; theArr.push(thisdata); } this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; if (data.data && data.data.list && !data.data.list.length) { this.state.pagination.current = 0; this.state.pagination.total = 0; } this.setState({ pagination: this.state.pagination, page: pageNo, dataSource: theArr, }); } }.bind(this) }).always( function() { this.setState({ loading: false }); }.bind(this) ); } resetAll() { this.setState({ releaseDate: [], searchOrderNo: '', searchContractNo: '', searchEnterpriseName: '', declarationBatch: '', projectSituation: '', projectAmount: '', projectType: '', depId:'', thchDepId:'', projectStatus:'', columns: currency, status: 0, },()=>{ this.loadData(); }) } //部门 departmentList() { $.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), }) } //项目类别 selectSuperId() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/ProjectSize/getAllCname", data: { flag: 0 }, success: function(data) { let theArr = []; let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } for (let i = 0; i < data.data.length; i++) { let theData = data.data[i]; theArr.push( <Select.Option value={theData.id} key={theData.cname}> {theData.cname} </Select.Option> ); } this.setState({ contactsOption: theArr, contactsOptionData: data.data, }); }.bind(this) }).always( ); } exportPending() { let url = `/api/admin/statistis/exporTaskList?status=${this.state.status}`; let dep = this.state.departmentArr.filter((e)=> e.id === this.state.depId);//订单部门名称 let thchDep = this.state.departmentArr.filter((e)=> e.id === this.state.thchDepId); //责任部门名称 let option = this.state.contactsOptionData.filter((e)=> e.id === this.state.projectStatus); //项目类别名称 if(dep.length > 0){url = url+`&depName=${dep[0].name}`;} if(thchDep.length > 0){url = url+`&thchDepName=${thchDep[0].name}`;} if(option.length > 0){url = url+`&projectStatusName=${option[0].cname}`;} if(typeof this.state.projectType === 'number'){url = url+`&projectTypeName=${ this.state.projectType === 0? '通用' : this.state.projectType === 1? '专利' : this.state.projectType === 2? '软著' : this.state.projectType === 3? '审计' : this.state.projectType === 4? '双软' : this.state.projectType === 5? '高新' : '' }`;} let data ={ startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0]: undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1]: undefined, //结束时间 depId: this.state.depId || undefined,//部门ID thchDepId: this.state.thchDepId || undefined,//责任部门ID projectStatus: this.state.projectStatus || undefined,//项目类别 projectType: typeof this.state.projectType === 'number' ? this.state.projectType : undefined,//项目分类 orderNo: this.state.searchOrderNo || undefined,//订单编号 contractNo: this.state.searchContractNo || undefined,//合同编号 userName: this.state.searchEnterpriseName || undefined,//企业名称 declarationBatch: this.state.declarationBatch || undefined,//申报批次 projectSituation: typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined,//项目情况 projectAmount: this.state.projectAmount || undefined,//项目金额 } for(let key in data){ if(data[key]){ url = url+`&${key}=${data[key]}`; } } window.open(globalConfig.context +url); } componentWillMount() { this.loadData(); this.departmentList(); this.selectSuperId(); if(this.props.searchData){ let e = this.props.searchData.projectType; this.setState({ columns:e === 0 ? currency : e === 1 ? patent : e === 2 ? softWriting : e === 3 ? currency : e === 4 ? doubleSoft : e === 5 ? highTechColumns : e === 6 ? currency : currency, }) } } render() { return ( <div className="user-content"> {this.props.introduce ? this.props.introduce() :<div> <div className="content-title"> <span> 项目汇总表 ( { this.state.status === 1 ? '高新' : this.state.status === 2 ? '双软' : this.state.status === 3 ? '软著' : this.state.status === 4 ? '专利' : '通用' } ) </span> </div> <Tabs defaultActiveKey="1" className="test"> <TabPane tab="搜索" key="1"> <div className="user-search" style={{ marginTop:'10px', marginLeft:'10px', marginRight:'10px' }}> <Input placeholder="订单编号" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} value={this.state.searchOrderNo} onChange={e => { this.setState({ searchOrderNo: e.target.value }); }} /> <Input placeholder="合同编号" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} value={this.state.searchContractNo} onChange={e => { this.setState({ searchContractNo: e.target.value }); }} /> <Input placeholder="企业名称" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} value={this.state.searchEnterpriseName} onChange={e => { this.setState({ searchEnterpriseName: e.target.value }); }} /> <span style={{display:"inline-block"}}> <span style={{marginRight:'10px',marginBottom:'10px'}}>项目类别 :</span> <Select value={this.state.projectStatus || undefined} placeholder="请选择项目类别" notFoundContent="未获取到上级品类列表" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} onChange={(e) => { let infor = this.state.contactsOptionData.filter((v)=>v.id === e); this.setState({ projectStatus: e, },()=>{ if(infor[0].cname === '高新' && typeof this.state.projectType !== 'number'){ this.setState({ columns: highTechColumns, changeList: [], status: 1, },()=>{ this.loadData(); }) }else if (typeof this.state.projectType !== 'number'){ this.setState({ columns: currency, changeList: [], status: 0, },()=>{ this.loadData(); }) }else{ this.loadData(); } }) }} > {this.state.contactsOption} </Select> </span> <span style={{display:"inline-block"}}> <span style={{marginRight:'10px',marginBottom:'10px'}}>项目分类 :</span> <Select value={typeof this.state.projectType === 'number' ? this.state.projectType : undefined} placeholder="请选择项目分类" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} onChange={(e) => { this.setState({ columns: e === 0 ? currency : e === 1 ? patent : e === 2 ? softWriting : e === 3 ? currency : e === 4 ? doubleSoft : e === 5 ? highTechColumns : e === 6 ? currency : currency, changeList: [], projectType: e, status: e === 4 ? 2 : e === 2 ? 3 : e === 1 ? 4 : e === 5 ? 1 : 0, },()=>{ this.loadData(); }) }} > {/*0通用 1专利 2软著 3审计 4双软 5高新*/} <Option value={0}>通用</Option> <Option value={1}>专利</Option> <Option value={2}>软著</Option> <Option value={3}>审计</Option> <Option value={4}>双软</Option> <Option value={5}>高新</Option> <Option value={6}>商标</Option> </Select> </span> <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}> <span>订单部门:</span> <Select placeholder="请选择部门" style={{ width: 200,marginRight:'10px',marginLeft:'10px',marginBottom:'10px' }} value={this.state.depId || undefined} onChange={e => { this.setState({ depId: e }); }} > { this.state.departmentArr.map(function (item) { return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> }) } </Select> </span> <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}> <span>负责部门:</span> <Select placeholder="请选择部门" style={{ width: 200,marginRight:'10px',marginLeft:'10px',marginBottom:'10px' }} value={this.state.thchDepId || undefined} onChange={e => { this.setState({ thchDepId: e }); }} > { this.state.departmentArr.map(function (item) { return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> }) } </Select> </span> <span style={{display:"inline-block"}}> <span style={{marginRight:'10px',marginBottom:'10px'}}>申报批次 :</span> <Select value={this.state.declarationBatch || undefined} placeholder="请选择批次" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} onChange={(e) => { this.setState({ declarationBatch: e, }); }} > <Option value={1}>第一批</Option> <Option value={2}>第二批</Option> <Option value={3}>第三批</Option> <Option value={4}>第四批</Option> </Select> </span> <span style={{display:"inline-block"}}> <span style={{marginRight:'10px',marginBottom:'10px'}}>项目金额 :</span> <Select value={this.state.projectAmount || undefined} placeholder="请选择项目金额" style={{ width: 100,marginRight:'10px',marginBottom:'10px' }} onChange={(e) => { this.setState({ projectAmount: e, }); }} > <Option value={1}>0~0.5万</Option> <Option value={2}>0.5~1万</Option> <Option value={3}>1~2万</Option> <Option value={4}>2~5万</Option> <Option value={5}>5~10万</Option> <Option value={6}>10~30万</Option> <Option value={7}>30~50万</Option> <Option value={8}>50~80万</Option> <Option value={9}>80万上</Option> </Select> </span> {/* <span style={{display:"inline-block"}}>*/} {/* <span style={{marginRight:'10px',marginBottom:'10px'}}>项目情况 :</span>*/} {/* <Select*/} {/* value={typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined}*/} {/* placeholder="请选择项目情况"*/} {/* style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}*/} {/* onChange={(e) => {*/} {/* this.setState({*/} {/* projectSituation: e,*/} {/* });*/} {/* }}*/} {/* >*/} {/* <Option value={0}>未开始</Option>*/} {/* <Option value={1}>进行中</Option>*/} {/* <Option value={2}>已暂停</Option>*/} {/* <Option value={3}>已驳回(专利、软著项目编写)</Option>*/} {/* <Option value={4}>已完成</Option>*/} {/* <Option value={5}>项目已完成 已退单</Option>*/} {/* <Option value={6}>项目未完成 已退单</Option>*/} {/* </Select>*/} {/*</span>*/} <span style={{display:"inline-block"}}> <span style={{marginRight:'10px',marginBottom:'10px'}}>派单时间 :</span> <RangePicker style={{marginRight:'10px',marginBottom:'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 }); }} /> </span> <Button type="primary" onClick={()=>{ this.loadData(); }} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button> <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</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> <TabPane tab="导出EXCEL" key="3"> <Button type="primary" style={{margin: '10px'}} onClick={this.exportPending}>导出</Button> </TabPane> </Tabs> </div>} <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered size="middle" scroll={{ x: this.state.status === 4 || this.state.status === 3 ? 1800 : 1000, y: 0 }} columns={ this.state.changeList.length > 0 ? this.state.changeList : this.state.columns } dataSource={this.state.dataSource} pagination={this.state.pagination} onRowClick={(record)=>{ this.setState({ projectdetailsId: record.id, projectdetailsOrderNo: record.orderNo, pname: record.pname, visible: true, }) }} /> </Spin> </div> {this.state.visible ? <ProjectDetails visible={this.state.visible} id={this.state.projectdetailsId} orderNo={this.state.projectdetailsOrderNo} taskName={this.state.pname} visitOk={()=>{ this.setState({ visible: false, }); }} visitCancel={()=>{ this.setState({ visible: false, }); }} /> : null} </div> ) } } export default HighTech;