highTech.jsx 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602
  1. import React,{ Component } from 'react';
  2. import {Button, DatePicker, Input, message, Select, Spin, Table, Tabs} from "antd";
  3. import {
  4. ShowModal
  5. } from "@/tools";
  6. import {ChooseList} from "../../order/orderNew/chooseList";
  7. import $ from "jquery/src/ajax";
  8. import moment from "moment";
  9. import {
  10. highTechColumns,
  11. doubleSoft,
  12. softWriting,
  13. patent,
  14. currency,
  15. } from './highTechConfig';
  16. import ProjectDetails from './projectDetails';
  17. const {TabPane} = Tabs;
  18. const { RangePicker } = DatePicker;
  19. const { Option } = Select;
  20. class HighTech extends Component{
  21. constructor(props) {
  22. super(props);
  23. this.state={
  24. loading:false,
  25. changeList:[],
  26. columns: currency,
  27. status: 0,
  28. page: 1,
  29. pagination: {
  30. defaultCurrent: 1,
  31. defaultPageSize: 10,
  32. showQuickJumper: true,
  33. pageSize: 10,
  34. onChange: function(page) {
  35. this.loadData(page);
  36. }.bind(this),
  37. showTotal: function(total) {
  38. return "共" + total + "条数据";
  39. }
  40. },
  41. dataSource: [],
  42. releaseDate:[],
  43. searchOrderNo: '',
  44. searchContractNo: '',
  45. searchEnterpriseName: '',
  46. declarationBatch: '',
  47. projectSituation: '',
  48. projectAmount: '',
  49. depId:'',
  50. thchDepId:'',
  51. projectType: '',
  52. projectStatus: '',
  53. departmentArr: [],
  54. contactsOption: [],
  55. contactsOptionData: [],
  56. visible: false,
  57. };
  58. this.resetAll = this.resetAll.bind(this);
  59. this.changeList = this.changeList.bind(this);
  60. this.departmentList = this.departmentList.bind(this);
  61. this.exportPending = this.exportPending.bind(this);
  62. this.loadData = this.loadData.bind(this);
  63. this.selectSuperId = this.selectSuperId.bind(this);
  64. }
  65. changeList(arr) {
  66. const newArr = [];
  67. this.state.columns.forEach(item => {
  68. arr.forEach(val => {
  69. if (val === item.title) {
  70. newArr.push(item);
  71. }
  72. });
  73. });
  74. this.setState({
  75. changeList: newArr
  76. });
  77. }
  78. loadData(pageNo='') {
  79. this.setState({
  80. loading: true
  81. });
  82. $.ajax({
  83. method: "get",
  84. dataType: "json",
  85. crossDomain: false,
  86. url: globalConfig.context + "/api/admin/statistis/selectTaskList",
  87. data: this.props.searchData ? Object.assign({
  88. pageNo: pageNo || 1,
  89. pageSize: this.state.pagination.pageSize || 10,
  90. },this.props.searchData) : {
  91. pageNo: pageNo || 1,
  92. pageSize: this.state.pagination.pageSize || 10,
  93. startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0]: undefined, //开始时间
  94. endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1]: undefined, //结束时间
  95. depId: this.state.depId || undefined,//部门ID
  96. thchDepId: this.state.thchDepId || undefined,//责任部门ID
  97. projectStatus: this.state.projectStatus || undefined,//项目类别
  98. projectType: typeof this.state.projectType === 'number' ? this.state.projectType : undefined,//项目分类
  99. orderNo: this.state.searchOrderNo || undefined,//订单编号
  100. contractNo: this.state.searchContractNo || undefined,//合同编号
  101. userName: this.state.searchEnterpriseName || undefined,//企业名称
  102. declarationBatch: this.state.declarationBatch || undefined,//申报批次
  103. projectSituation: typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined,//项目分类
  104. projectAmount: this.state.projectAmount || undefined,//项目金额
  105. status: this.state.status,
  106. },
  107. success: function(data) {
  108. ShowModal(this);
  109. let theArr = [];
  110. if (!data.data || !data.data.list) {
  111. if (data.error && data.error.length) {
  112. message.warning(data.error[0].message);
  113. }
  114. } else {
  115. for (let i = 0; i < data.data.list.length; i++) {
  116. let thisdata = data.data.list[i];
  117. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  118. theArr.push(thisdata);
  119. }
  120. this.state.pagination.current = data.data.pageNo;
  121. this.state.pagination.total = data.data.totalCount;
  122. if (data.data && data.data.list && !data.data.list.length) {
  123. this.state.pagination.current = 0;
  124. this.state.pagination.total = 0;
  125. }
  126. this.setState({
  127. pagination: this.state.pagination,
  128. page: pageNo,
  129. dataSource: theArr,
  130. });
  131. }
  132. }.bind(this)
  133. }).always(
  134. function() {
  135. this.setState({
  136. loading: false
  137. });
  138. }.bind(this)
  139. );
  140. }
  141. resetAll() {
  142. this.setState({
  143. releaseDate: [],
  144. searchOrderNo: '',
  145. searchContractNo: '',
  146. searchEnterpriseName: '',
  147. declarationBatch: '',
  148. projectSituation: '',
  149. projectAmount: '',
  150. projectType: '',
  151. depId:'',
  152. thchDepId:'',
  153. projectStatus:'',
  154. columns: currency,
  155. status: 0,
  156. },()=>{
  157. this.loadData();
  158. })
  159. }
  160. //部门
  161. departmentList() {
  162. $.ajax({
  163. method: "get",
  164. dataType: "json",
  165. crossDomain: false,
  166. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  167. data: {},
  168. success: function (data) {
  169. let thedata = data.data;
  170. let theArr = [];
  171. if (!thedata) {
  172. if (data.error && data.error.length) {
  173. message.warning(data.error[0].message);
  174. }
  175. } else {
  176. thedata.map(function (item, index) {
  177. theArr.push({
  178. key: index,
  179. name: item.name,
  180. id: item.id,
  181. });
  182. });
  183. }
  184. this.setState({
  185. departmentArr: theArr,
  186. });
  187. }.bind(this),
  188. })
  189. }
  190. //项目类别
  191. selectSuperId() {
  192. $.ajax({
  193. method: "get",
  194. dataType: "json",
  195. crossDomain: false,
  196. url: globalConfig.context + "/api/admin/ProjectSize/getAllCname",
  197. data: {
  198. flag: 0
  199. },
  200. success: function(data) {
  201. let theArr = [];
  202. let thedata = data.data;
  203. if (!thedata) {
  204. if (data.error && data.error.length) {
  205. message.warning(data.error[0].message);
  206. }
  207. }
  208. for (let i = 0; i < data.data.length; i++) {
  209. let theData = data.data[i];
  210. theArr.push(
  211. <Select.Option value={theData.id} key={theData.cname}>
  212. {theData.cname}
  213. </Select.Option>
  214. );
  215. }
  216. this.setState({
  217. contactsOption: theArr,
  218. contactsOptionData: data.data,
  219. });
  220. }.bind(this)
  221. }).always(
  222. );
  223. }
  224. exportPending() {
  225. let url = `/api/admin/statistis/exporTaskList?status=${this.state.status}`;
  226. let dep = this.state.departmentArr.filter((e)=> e.id === this.state.depId);//订单部门名称
  227. let thchDep = this.state.departmentArr.filter((e)=> e.id === this.state.thchDepId); //责任部门名称
  228. let option = this.state.contactsOptionData.filter((e)=> e.id === this.state.projectStatus); //项目类别名称
  229. if(dep.length > 0){url = url+`&depName=${dep[0].name}`;}
  230. if(thchDep.length > 0){url = url+`&thchDepName=${thchDep[0].name}`;}
  231. if(option.length > 0){url = url+`&projectStatusName=${option[0].cname}`;}
  232. if(typeof this.state.projectType === 'number'){url = url+`&projectTypeName=${
  233. this.state.projectType === 0? '通用' :
  234. this.state.projectType === 1? '专利' :
  235. this.state.projectType === 2? '软著' :
  236. this.state.projectType === 3? '审计' :
  237. this.state.projectType === 4? '双软' :
  238. this.state.projectType === 5? '高新' : ''
  239. }`;}
  240. let data ={
  241. startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0]: undefined, //开始时间
  242. endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1]: undefined, //结束时间
  243. depId: this.state.depId || undefined,//部门ID
  244. thchDepId: this.state.thchDepId || undefined,//责任部门ID
  245. projectStatus: this.state.projectStatus || undefined,//项目类别
  246. projectType: typeof this.state.projectType === 'number' ? this.state.projectType : undefined,//项目分类
  247. orderNo: this.state.searchOrderNo || undefined,//订单编号
  248. contractNo: this.state.searchContractNo || undefined,//合同编号
  249. userName: this.state.searchEnterpriseName || undefined,//企业名称
  250. declarationBatch: this.state.declarationBatch || undefined,//申报批次
  251. projectSituation: typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined,//项目情况
  252. projectAmount: this.state.projectAmount || undefined,//项目金额
  253. }
  254. for(let key in data){
  255. if(data[key]){
  256. url = url+`&${key}=${data[key]}`;
  257. }
  258. }
  259. window.open(globalConfig.context +url);
  260. }
  261. componentWillMount() {
  262. this.loadData();
  263. this.departmentList();
  264. this.selectSuperId();
  265. if(this.props.searchData){
  266. let e = this.props.searchData.projectType;
  267. this.setState({
  268. columns:e === 0 ? currency :
  269. e === 1 ? patent :
  270. e === 2 ? softWriting :
  271. e === 3 ? currency :
  272. e === 4 ? doubleSoft :
  273. e === 5 ? highTechColumns :
  274. e === 6 ? currency : currency,
  275. })
  276. }
  277. }
  278. render() {
  279. return (
  280. <div className="user-content">
  281. {this.props.introduce ? this.props.introduce() :<div>
  282. <div className="content-title">
  283. <span>
  284. 项目汇总表
  285. (
  286. {
  287. this.state.status === 1 ? '高新' :
  288. this.state.status === 2 ? '双软' :
  289. this.state.status === 3 ? '软著' :
  290. this.state.status === 4 ? '专利' : '通用'
  291. }
  292. )
  293. </span>
  294. </div>
  295. <Tabs defaultActiveKey="1" className="test">
  296. <TabPane tab="搜索" key="1">
  297. <div className="user-search" style={{
  298. marginTop:'10px',
  299. marginLeft:'10px',
  300. marginRight:'10px'
  301. }}>
  302. <Input
  303. placeholder="订单编号"
  304. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  305. value={this.state.searchOrderNo}
  306. onChange={e => {
  307. this.setState({ searchOrderNo: e.target.value });
  308. }}
  309. />
  310. <Input
  311. placeholder="合同编号"
  312. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  313. value={this.state.searchContractNo}
  314. onChange={e => {
  315. this.setState({ searchContractNo: e.target.value });
  316. }}
  317. />
  318. <Input
  319. placeholder="企业名称"
  320. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  321. value={this.state.searchEnterpriseName}
  322. onChange={e => {
  323. this.setState({ searchEnterpriseName: e.target.value });
  324. }}
  325. />
  326. <span style={{display:"inline-block"}}>
  327. <span style={{marginRight:'10px',marginBottom:'10px'}}>项目类别 :</span>
  328. <Select
  329. value={this.state.projectStatus || undefined}
  330. placeholder="请选择项目类别"
  331. notFoundContent="未获取到上级品类列表"
  332. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  333. onChange={(e) => {
  334. let infor = this.state.contactsOptionData.filter((v)=>v.id === e);
  335. this.setState({
  336. projectStatus: e,
  337. },()=>{
  338. if(infor[0].cname === '高新' && typeof this.state.projectType !== 'number'){
  339. this.setState({
  340. columns: highTechColumns,
  341. changeList: [],
  342. status: 1,
  343. },()=>{
  344. this.loadData();
  345. })
  346. }else if (typeof this.state.projectType !== 'number'){
  347. this.setState({
  348. columns: currency,
  349. changeList: [],
  350. status: 0,
  351. },()=>{
  352. this.loadData();
  353. })
  354. }else{
  355. this.loadData();
  356. }
  357. })
  358. }}
  359. >
  360. {this.state.contactsOption}
  361. </Select>
  362. </span>
  363. <span style={{display:"inline-block"}}>
  364. <span style={{marginRight:'10px',marginBottom:'10px'}}>项目分类 :</span>
  365. <Select
  366. value={typeof this.state.projectType === 'number' ? this.state.projectType : undefined}
  367. placeholder="请选择项目分类"
  368. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  369. onChange={(e) => {
  370. this.setState({
  371. columns:
  372. e === 0 ? currency :
  373. e === 1 ? patent :
  374. e === 2 ? softWriting :
  375. e === 3 ? currency :
  376. e === 4 ? doubleSoft :
  377. e === 5 ? highTechColumns :
  378. e === 6 ? currency : currency,
  379. changeList: [],
  380. projectType: e,
  381. status: e === 4 ? 2 : e === 2 ? 3 : e === 1 ? 4 : e === 5 ? 1 : 0,
  382. },()=>{
  383. this.loadData();
  384. })
  385. }}
  386. >
  387. {/*0通用 1专利 2软著 3审计 4双软 5高新*/}
  388. <Option value={0}>通用</Option>
  389. <Option value={1}>专利</Option>
  390. <Option value={2}>软著</Option>
  391. <Option value={3}>审计</Option>
  392. <Option value={4}>双软</Option>
  393. <Option value={5}>高新</Option>
  394. <Option value={6}>商标</Option>
  395. </Select>
  396. </span>
  397. <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}>
  398. <span>订单部门:</span>
  399. <Select
  400. placeholder="请选择部门"
  401. style={{ width: 200,marginRight:'10px',marginLeft:'10px',marginBottom:'10px' }}
  402. value={this.state.depId || undefined}
  403. onChange={e => {
  404. this.setState({ depId: e });
  405. }}
  406. >
  407. {
  408. this.state.departmentArr.map(function (item) {
  409. return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
  410. })
  411. }
  412. </Select>
  413. </span>
  414. <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}>
  415. <span>负责部门:</span>
  416. <Select
  417. placeholder="请选择部门"
  418. style={{ width: 200,marginRight:'10px',marginLeft:'10px',marginBottom:'10px' }}
  419. value={this.state.thchDepId || undefined}
  420. onChange={e => {
  421. this.setState({ thchDepId: e });
  422. }}
  423. >
  424. {
  425. this.state.departmentArr.map(function (item) {
  426. return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
  427. })
  428. }
  429. </Select>
  430. </span>
  431. <span style={{display:"inline-block"}}>
  432. <span style={{marginRight:'10px',marginBottom:'10px'}}>申报批次 :</span>
  433. <Select
  434. value={this.state.declarationBatch || undefined}
  435. placeholder="请选择批次"
  436. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  437. onChange={(e) => {
  438. this.setState({
  439. declarationBatch: e,
  440. });
  441. }}
  442. >
  443. <Option value={1}>第一批</Option>
  444. <Option value={2}>第二批</Option>
  445. <Option value={3}>第三批</Option>
  446. <Option value={4}>第四批</Option>
  447. </Select>
  448. </span>
  449. <span style={{display:"inline-block"}}>
  450. <span style={{marginRight:'10px',marginBottom:'10px'}}>项目金额 :</span>
  451. <Select
  452. value={this.state.projectAmount || undefined}
  453. placeholder="请选择项目金额"
  454. style={{ width: 100,marginRight:'10px',marginBottom:'10px' }}
  455. onChange={(e) => {
  456. this.setState({
  457. projectAmount: e,
  458. });
  459. }}
  460. >
  461. <Option value={1}>0~0.5万</Option>
  462. <Option value={2}>0.5~1万</Option>
  463. <Option value={3}>1~2万</Option>
  464. <Option value={4}>2~5万</Option>
  465. <Option value={5}>5~10万</Option>
  466. <Option value={6}>10~30万</Option>
  467. <Option value={7}>30~50万</Option>
  468. <Option value={8}>50~80万</Option>
  469. <Option value={9}>80万上</Option>
  470. </Select>
  471. </span>
  472. {/* <span style={{display:"inline-block"}}>*/}
  473. {/* <span style={{marginRight:'10px',marginBottom:'10px'}}>项目情况 :</span>*/}
  474. {/* <Select*/}
  475. {/* value={typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined}*/}
  476. {/* placeholder="请选择项目情况"*/}
  477. {/* style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}*/}
  478. {/* onChange={(e) => {*/}
  479. {/* this.setState({*/}
  480. {/* projectSituation: e,*/}
  481. {/* });*/}
  482. {/* }}*/}
  483. {/* >*/}
  484. {/* <Option value={0}>未开始</Option>*/}
  485. {/* <Option value={1}>进行中</Option>*/}
  486. {/* <Option value={2}>已暂停</Option>*/}
  487. {/* <Option value={3}>已驳回(专利、软著项目编写)</Option>*/}
  488. {/* <Option value={4}>已完成</Option>*/}
  489. {/* <Option value={5}>项目已完成 已退单</Option>*/}
  490. {/* <Option value={6}>项目未完成 已退单</Option>*/}
  491. {/* </Select>*/}
  492. {/*</span>*/}
  493. <span style={{display:"inline-block"}}>
  494. <span style={{marginRight:'10px',marginBottom:'10px'}}>派单时间 :</span>
  495. <RangePicker
  496. style={{marginRight:'10px',marginBottom:'10px'}}
  497. value={[
  498. this.state.releaseDate[0]
  499. ? moment(this.state.releaseDate[0])
  500. : null,
  501. this.state.releaseDate[1]
  502. ? moment(this.state.releaseDate[1])
  503. : null,
  504. ]}
  505. onChange={(data, dataString) => {
  506. this.setState({ releaseDate: dataString });
  507. }}
  508. />
  509. </span>
  510. <Button type="primary" onClick={()=>{
  511. this.loadData();
  512. }} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button>
  513. <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</Button>
  514. </div>
  515. </TabPane>
  516. <TabPane tab="更改表格显示数据" key="2">
  517. <div style={{ marginLeft: 10 }}>
  518. <ChooseList
  519. columns={this.state.columns}
  520. changeFn={this.changeList}
  521. changeList={this.state.changeList}
  522. top={55}
  523. margin={11}
  524. />
  525. </div>
  526. </TabPane>
  527. <TabPane tab="导出EXCEL" key="3">
  528. <Button type="primary" style={{margin: '10px'}} onClick={this.exportPending}>导出</Button>
  529. </TabPane>
  530. </Tabs>
  531. </div>}
  532. <div className="patent-table">
  533. <Spin spinning={this.state.loading}>
  534. <Table
  535. bordered
  536. size="middle"
  537. scroll={{
  538. x: this.state.status === 4 || this.state.status === 3 ? 1800 : 1000,
  539. y: 0
  540. }}
  541. columns={
  542. this.state.changeList.length > 0
  543. ? this.state.changeList
  544. : this.state.columns
  545. }
  546. dataSource={this.state.dataSource}
  547. pagination={this.state.pagination}
  548. style={{
  549. cursor: 'pointer',
  550. }}
  551. onRowClick={(record)=>{
  552. this.setState({
  553. projectdetailsId: record.id,
  554. projectdetailsOrderNo: record.orderNo,
  555. pname: record.pname,
  556. visible: true,
  557. })
  558. }}
  559. />
  560. </Spin>
  561. </div>
  562. {this.state.visible ? <ProjectDetails
  563. visible={this.state.visible}
  564. id={this.state.projectdetailsId}
  565. orderNo={this.state.projectdetailsOrderNo}
  566. taskName={this.state.pname}
  567. visitOk={()=>{
  568. this.setState({
  569. visible: false,
  570. });
  571. }}
  572. visitCancel={()=>{
  573. this.setState({
  574. visible: false,
  575. });
  576. }}
  577. /> : null}
  578. </div>
  579. )
  580. }
  581. }
  582. export default HighTech;