import React from 'react'; import { Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import './techDemand.less'; import TechDemandDesc from './techDemandQueryDesc.jsx'; import { demandTypeList } from '../../dataDic.js'; import { companySearch, getDemandType, getSearchUrl, beforeUploadFile ,getboutique,gethot} from '../../tools.js'; import BatchImport from './batchImport'; const DemandList = React.createClass({ loadData(pageNo, apiUrl) { this.state.data = []; if(this.state.serialNumber&&isNaN(this.state.serialNumber)){ message.warning('请输入正确的编号格式'); return false; } this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + (apiUrl || this.props['data-listApiUrl']), data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, serialNumber: this.state.serialNumber, name: this.state.name, recordPerson: this.state.recordPerson, employerName: this.state.employerName, keyword: this.state.keyword, infoSources: this.state.infoSources ? Number(this.state.infoSources) : undefined, demandType: this.state.demandType ? Number(this.state.demandType) : undefined, //username: this.state.username, status: this.state.status ? Number(this.state.status) : undefined, releaseStatus: this.state.releaseStatus ? Number(this.state.releaseStatus) : undefined, validityPeriodStartDate: this.state.validityPeriodDate[0], validityPeriodEndDate: this.state.validityPeriodDate[1], releaseDateStartDate: this.state.releaseDate[0], releaseDateEndDate: this.state.releaseDate[1], createDateStartDate: this.state.releaseDateS[0], createDateEndDate: this.state.releaseDateS[1], auditStatus: this.state.auditStatus, boutique:this.state.boutique, hot:this.state.hot, dataCategory:this.state.dataCategory, //employerName: this.state.searchType == 1 ? this.state.searchName : undefined, username: this.state.searchType == 0 && this.props['data-listApiUrl'].indexOf('org') == -1 ? this.state.searchName : undefined, unitName: this.state.searchType == 0 && this.props['data-listApiUrl'].indexOf('user') == -1 ? this.state.searchName : undefined, }, success: function (data) { 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]; theArr.push({ key: i, id: thisdata.id, serialNumber: thisdata.serialNumber, dataCategory: thisdata.dataCategory, name: thisdata.name, keyword: thisdata.keyword, infoSources: thisdata.infoSources, username: thisdata.username, theName: thisdata.username || thisdata.employerName, demandType: thisdata.demandType, validityPeriod: thisdata.validityPeriod, employerName: thisdata.employerName, employerId: thisdata.employerId, province: thisdata.province, status: thisdata.status, releaseStatus: thisdata.releaseStatus, releaseDate: thisdata.releaseDate, principalId: thisdata.principalId, validityPeriodFormattedDate: thisdata.validityPeriodFormattedDate, releaseDateFormattedDate: thisdata.releaseDateFormattedDate, auditStatus: thisdata.auditStatus, boutique: thisdata.boutique, urgentMoney:thisdata.urgentMoney, urgentDays:thisdata.urgentDays, hot: thisdata.hot, techBrokerId:thisdata.techBrokerId, createTimeFormattedDate: thisdata.createTimeFormattedDate, }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; this.setState({ dataSource: theArr, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { searchMore: true, searchType: 0, validityPeriodDate: [], releaseDate: [], releaseDateS: [], selectedRowKeys: [], selectedRows: [], loading: 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: 'name', key: 'name', }, { title: '录入人', dataIndex: 'techBrokerId', key: 'techBrokerId', }, { title: '是否精品', dataIndex: 'boutique', key: 'boutique', render: text => { return getboutique(text) } }, { title: '关键字', dataIndex: 'keyword', key: 'keyword', }, { title: '需求类型', dataIndex: 'demandType', key: 'demandType', render: text => { return getDemandType(text); } }, { title: '信息来源', dataIndex: 'infoSources', key: 'infoSources', render: text => { switch (text) { case "0": return <span>平台采集</span>; case "1": return <span>客户发布</span>; case "2": return <span>批量导入</span> case "3": return <span>三方对接</span> } } }, { title: '审核状态', dataIndex: 'auditStatus', key: 'auditStatus', render: text => { switch (text) { case 0: return <span>未提交审核(草稿)</span>; case 1: return <span>提交审核</span>; case 2: return <span>审核中</span>; case 3: return <span>审核通过</span>; case 4: return <span>审核未通过</span>; } } }, { title: '需求状态', dataIndex: 'status', key: 'status', render: text => { switch (text) { case "0": return <span>进行中</span>; case "1": return <span>未解决</span>; case "2": return <span>已解决</span>; } } }, { title: '有效期限', dataIndex: 'validityPeriodFormattedDate', key: 'validityPeriodFormattedDate', }, { title: '发布时间', dataIndex: 'releaseDateFormattedDate', key: 'releaseDateFormattedDate', },{ title: '录入时间', dataIndex: 'createTimeFormattedDate', key: 'createTimeFormattedDate', } ], dataSource: [], searchTime: [] }; }, getCompanyList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/demand/unitNames", success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { data.data.map(function (item) { theArr.push( <Select.Option value={item.uid} key={item.uid}>{item.unitName}</Select.Option> ) }); }; this.setState({ companyOption: theArr }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getUserList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/demand/userNames", success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { data.data.map(function (item) { theArr.push( <Select.Option value={item.uid} key={item.uid}>{item.username}</Select.Option> ) }); }; this.setState({ userOption: theArr }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, componentWillMount() { let theArr = []; demandTypeList.map(function (item) { theArr.push( <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option> ) }); this.state.demandTypeOption = theArr; if (window.location.search) { let theObj = getSearchUrl(window.location.search); if (theObj.rid) { theObj.id = theObj.rid; theObj.employerId = theObj.uid; if (theObj.rid != 'null') { this.tableRowClick(theObj); }; }; }; this.loadData(); this.getCompanyList(); this.getUserList(); }, componentWillReceiveProps(nextProps) { if (this.props['data-listApiUrl'] != nextProps['data-listApiUrl']) { this.state.selectedRowKeys = []; this.state.selectedRows = []; this.state.serialNumber = undefined; this.state.name = undefined; this.state.keyword = undefined; this.state.infoSources = undefined; this.state.demandType = undefined; this.state.searchName = undefined; this.state.searchType = 0; this.state.status = undefined; this.state.releaseStatus = undefined; this.state.auditStatus = undefined; this.state.validityPeriodDate = []; this.state.releaseDate = []; this.state.releaseDateS = []; this.loadData(null, nextProps['data-listApiUrl']); }; }, tableRowClick(record, index) { this.state.RowData = record; if(index!=undefined){ this.setState({ showDesc: true }); } }, delectRow() { let deletedIds = []; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds.push(rowItem.id) }; }; this.setState({ selectedRowKeys: [], loading: deletedIds.length > 0 }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/demand/delete", data: { ids: deletedIds } }).done(function (data) { if (!data.error.length) { message.success('删除成功!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.loadData(); }.bind(this)); }, addClick() { this.state.RowData = {}; this.setState({ showDesc: true }); }, closeDesc(e, s) { this.state.showDesc = e; if (s) { this.loadData(); }; }, search() { this.loadData(); }, reset() { this.state.serialNumber = undefined; this.state.name = undefined; this.state.recordPerson= undefined; this.state.employerName= undefined; this.state.keyword = undefined; this.state.infoSources = undefined; this.state.demandType = undefined; this.state.searchName = undefined; this.state.searchType = 0; this.state.boutique = ''; this.state.hot='' ; this.state.status = undefined; this.state.releaseStatus = undefined; this.state.auditStatus = undefined; this.state.dataCategory = undefined; this.state.validityPeriodDate = []; this.state.releaseDate = []; this.state.releaseDateS = []; this.loadData(); }, searchSwitch() { this.setState({ searchMore: !this.state.searchMore }); }, render() { const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; const { RangePicker } = DatePicker; return ( <div className="user-content" > <div className="content-title"> <span>科技需求查询</span> <div className="patent-addNew clearfix"> <Upload action={globalConfig.context + "/api/admin/demand/uploadTemplate"} data={{ 'sign': 'demand_template' }} beforeUpload={beforeUploadFile} showUploadList={false} onChange={(info) => { if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { if (!info.file.response.error.length) { message.success(`${info.file.name} 文件上传成功!`); } else { message.warning(info.file.response.error[0].message); return; }; } else if (info.file.status === 'error') { message.error(`${info.file.name} 文件上传失败。`); }; }} > <Button style={{"display":"none"}}>上传批量导入模板</Button> </Upload> <Button onClick={() => { window.open(globalConfig.context + '/api/admin/demand/downloadTemplate?sign=demand_template') }} style={{"display":"none"}}>下载批量导入模板</Button> <Button type="primary" className="addButton" onClick={this.addClick} style={{"display":"none"}}>新增需求<Icon type="plus" /></Button> </div> </div> <div className="user-search"> <Input placeholder="需求编号" value={this.state.serialNumber} onChange={(e) => { this.setState({ serialNumber: e.target.value }); }} /> <Input placeholder="需求名称" value={this.state.name} onChange={(e) => { this.setState({ name: e.target.value }); }} /> <Input placeholder="关键字" value={this.state.keyword} onChange={(e) => { this.setState({ keyword: e.target.value }); }} /> <Input placeholder="录入人名称" value={this.state.recordPerson} onChange={(e) => { this.setState({ recordPerson: e.target.value }); }} /> <Input placeholder="需求雇主名称" value={this.state.employerName} onChange={(e) => { this.setState({ employerName: e.target.value }); }} /> <Radio.Group value={this.state.searchType} onChange={(e) => { this.setState({ searchType: e.target.value }) }}> <Radio value={0}>认证用户</Radio> <Radio value={1}>非认证用户</Radio> </Radio.Group> <Button type="primary" onClick={this.search}>搜索</Button> <Button onClick={this.reset}>重置</Button> <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }} disabled={!hasSelected} onClick={this.delectRow}>删除<Icon type="minus" /></Button> <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span> <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}> <Radio.Group value={this.state.boutique} onChange={(e) => { this.setState({ boutique: e.target.value }) }}> <Radio value={1}>精品</Radio> <Radio value={0}>非精品</Radio> </Radio.Group> <Select placeholder="选择信息来源" style={{ width: 120 }} value={this.state.infoSources} onChange={(e) => { this.setState({ infoSources: e }) }}> <Select.Option value="0" >平台采集</Select.Option> <Select.Option value="1" >客户发布</Select.Option> <Select.Option value="2" >批量导入</Select.Option> <Select.Option value="3" >三方对接</Select.Option> </Select> <Select placeholder="选择需求类型" style={{ width: 120 }} value={this.state.demandType} onChange={(e) => { this.setState({ demandType: e }) }}> {this.state.demandTypeOption} </Select> <Select placeholder="选择需求状态" style={{ width: 120 }} value={this.state.status} onChange={(e) => { this.setState({ status: e }) }}> <Select.Option value="0" >进行中</Select.Option> <Select.Option value="1" >未解决</Select.Option> <Select.Option value="2" >已解决</Select.Option> </Select> <Select placeholder="选择审核状态" style={{ width: 160 }} value={this.state.auditStatus} onChange={(e) => { this.setState({ auditStatus: e }) }}> <Select.Option value="0" >未提交审核(草稿)</Select.Option> <Select.Option value="1" >提交审核</Select.Option> <Select.Option value="2" >审核中</Select.Option> <Select.Option value="3" >审核通过</Select.Option> <Select.Option value="4" >审核未通过</Select.Option> </Select> <Select placeholder="选择是否发布" style={{ width: 120 }} value={this.state.releaseStatus} onChange={(e) => { this.setState({ releaseStatus: e }) }}> <Select.Option value="0" >未发布</Select.Option> <Select.Option value="1" >已发布</Select.Option> </Select> <Select placeholder="选择需求类别" style={{ width: 120 }} value={this.state.dataCategory} onChange={(e) => { this.setState({ dataCategory: e }) }}> <Select.Option value="0" >个人</Select.Option> <Select.Option value="1" >组织</Select.Option> </Select> <div style={{ marginTop: '10px' }}> <span style={{ marginLeft: '10px' }}>有效期限 : </span> <RangePicker value={[this.state.validityPeriodDate[0] ? moment(this.state.validityPeriodDate[0]) : null, this.state.validityPeriodDate[1] ? moment(this.state.validityPeriodDate[1]) : null]} onChange={(data, dataString) => { this.setState({ validityPeriodDate: dataString }); }} /> <span style={{ marginLeft: '10px' }}>发布时间 : </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={{ marginLeft: '10px' }}>录入时间 : </span> <RangePicker value={[this.state.releaseDateS[0] ? moment(this.state.releaseDateS[0]) : null, this.state.releaseDateS[1] ? moment(this.state.releaseDateS[1]) : null]} onChange={(data, dataString) => { this.setState({ releaseDateS: dataString }); }} /> </div> </div> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} rowSelection={rowSelection} pagination={this.state.pagination} onRowClick={this.tableRowClick} /> </Spin> </div> <TechDemandDesc data={this.state.RowData} detailApiUrl={this.props['data-detailApiUrl']} companyOption={this.state.companyOption} userOption={this.state.userOption} demandTypeOption={this.state.demandTypeOption} showDesc={this.state.showDesc} closeDesc={this.closeDesc} /> </div > ); } }); export default DemandList;