index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. import React, { Component } from "react";
  2. import {
  3. Spin,
  4. Button,
  5. Table,
  6. message,
  7. Input,
  8. DatePicker,
  9. Select,
  10. Icon,
  11. Upload,
  12. } from 'antd';
  13. import $ from "jquery/src/ajax";
  14. import ajax from 'jquery/src/ajax/xhr.js'
  15. import moment from "moment";
  16. import '../../public.less';
  17. import logo from '../../../../../image/logo.png';
  18. import Detail from "./detail"; // 详情
  19. const Option = Select.Option;
  20. const { RangePicker } = DatePicker;
  21. class Content extends Component {
  22. constructor(props) {
  23. super(props);
  24. this.state = {
  25. dataSource: [], // table数据
  26. loading: false, // 加载loading
  27. searchInfor: {}, // 查询条件
  28. visible: false, // 控制弹窗变量
  29. rowdata: {}, // 行数据
  30. pagination: {
  31. defaultCurrent: 1,
  32. defaultPageSize: 10,
  33. showQuickJumper: true,
  34. pageSize: 10,
  35. onChange: function (page) {
  36. this.loadData(page);
  37. }.bind(this),
  38. showTotal: function (total) {
  39. return "共" + total + "条数据";
  40. },
  41. },
  42. columns: [
  43. {
  44. title: "索引",
  45. dataIndex: "id",
  46. key: "id",
  47. fixed: "left",
  48. },
  49. {
  50. title: "单位名称",
  51. dataIndex: "userName",
  52. key: "userName",
  53. fixed: "left",
  54. width: "160",
  55. },
  56. {
  57. title: "研发活动编号",
  58. dataIndex: "rdNo",
  59. key: "rdNo",
  60. },
  61. {
  62. title: "知识产权编号",
  63. dataIndex: "ipNo",
  64. key: "ipNo",
  65. },
  66. {
  67. title: "研发活动名称",
  68. dataIndex: "rdName",
  69. key: "rdName",
  70. },
  71. {
  72. title: "起止时间",
  73. dataIndex: "rdStart",
  74. key: "rdStart",
  75. width: "130",
  76. render: (text, record) => (
  77. <div>
  78. <div>{text}</div>
  79. <div style={{ paddingLeft: '50px' }}>至</div>
  80. <div>{record.rdEnd}</div>
  81. </div>
  82. )
  83. },
  84. {
  85. title: "技术领域",
  86. dataIndex: "technicalField",
  87. key: "technicalField",
  88. },
  89. {
  90. title: "技术来源",
  91. dataIndex: "technologySource",
  92. key: "technologySource",
  93. },
  94. {
  95. title: "研发经费总预算(万元)",
  96. dataIndex: "totalAmount",
  97. key: "totalAmount",
  98. },
  99. {
  100. title: "研发经费近三年总支出(万元)",
  101. dataIndex: "recentThreeAmount",
  102. key: "recentThreeAmount",
  103. },
  104. {
  105. title: "研发目的及组织实施方式",
  106. dataIndex: "rdObjective",
  107. key: "rdObjective",
  108. },
  109. {
  110. title: "核心技术及创新点",
  111. dataIndex: "coreTechnology",
  112. key: "coreTechnology",
  113. },
  114. {
  115. title: "取得的创段性成果",
  116. dataIndex: "achieveResults",
  117. key: "achieveResults",
  118. },
  119. {
  120. title: "咨询师名称",
  121. dataIndex: "consultantName",
  122. key: "consultantName",
  123. },
  124. {
  125. title: "阅读次数",
  126. dataIndex: "browseCount",
  127. key: "browseCount",
  128. },
  129. {
  130. title: "下载次数",
  131. dataIndex: "downloadCount",
  132. key: "downloadCount",
  133. },
  134. ],
  135. upLoad: {
  136. customRequest: (options) => {
  137. this.setState({
  138. upLoadFileLoading: true,
  139. })
  140. let params = new FormData();
  141. params.append("file", options.file);
  142. $.ajax({
  143. method: "post",
  144. url: globalConfig.context + "/api/admin/RD/import",
  145. async: true,
  146. cache: false,
  147. contentType: false,
  148. processData: false,
  149. data: params
  150. }).done(
  151. function (data) {
  152. this.setState({
  153. upLoadFileLoading: false,
  154. })
  155. if (data.data.OK == 1) {
  156. message.success("导入成功!");
  157. this.loadData();
  158. } else {
  159. message.warning('表格中有重复数据');
  160. // message.warning(data.error[0].message);
  161. this.loadData();
  162. }
  163. }.bind(this)
  164. ).always(
  165. function (err) {
  166. if (err.status === 404) {
  167. message.warning('数据错误');
  168. }
  169. this.loadData();
  170. this.setState({
  171. upLoadFileLoading: false,
  172. });
  173. }.bind(this)
  174. );
  175. },
  176. name: "file",
  177. action: globalConfig.context + "/api/admin/RD/import",
  178. },
  179. };
  180. }
  181. // 列表查询
  182. loadData(pageNo) {
  183. const { searchInfor, pagination } = this.state;
  184. this.setState({
  185. loading: true,
  186. });
  187. let datas = Object.assign(searchInfor, {
  188. pageNo: pageNo || 1,
  189. pageSize: pagination.pageSize,
  190. });
  191. $.ajax({
  192. method: "get",
  193. dataType: "json",
  194. crossDomain: false,
  195. url: globalConfig.context + "/api/admin/RD/list",
  196. data: datas,
  197. success: function (data) {
  198. this.setState({
  199. loading: false,
  200. });
  201. if (data.error && data.error.length === 0) {
  202. if (data.data.list) {
  203. pagination.current = data.data.pageNo;
  204. pagination.total = data.data.totalCount;
  205. if (data.data && data.data.list && !data.data.list.length) {
  206. pagination.current = 0;
  207. pagination.total = 0;
  208. }
  209. this.setState({
  210. dataSource: data.data.list,
  211. pagination: this.state.pagination,
  212. pageNo: data.data.pageNo,
  213. });
  214. } else {
  215. this.setState({
  216. dataSource: data.data,
  217. pagination: false,
  218. });
  219. }
  220. } else {
  221. message.warning(data.error[0].message);
  222. }
  223. }.bind(this),
  224. }).always(
  225. function () {
  226. this.setState({
  227. loading: false,
  228. });
  229. }.bind(this)
  230. );
  231. }
  232. // 重置
  233. resetAll() {
  234. this.setState({
  235. searchInfor: JSON.parse(JSON.stringify({})),
  236. }, () => {
  237. this.loadData()
  238. })
  239. }
  240. // 导出
  241. exportExec() {
  242. message.config({
  243. duration: 20,
  244. });
  245. let loading = message.loading("下载中...");
  246. this.setState({
  247. exportPendingLoading: true,
  248. });
  249. let data = {
  250. pageNo: 1,
  251. pageSize: 99999,
  252. };
  253. let obj1 = JSON.parse(JSON.stringify(this.state.searchInfor));
  254. data = Object.assign(data, obj1);
  255. $.ajax({
  256. method: "get",
  257. dataType: "json",
  258. crossDomain: false,
  259. url: globalConfig.context + "/api/admin/RD/exportList",
  260. data,
  261. success: function (data) {
  262. if (data.error.length === 0) {
  263. this.download(data.data);
  264. } else {
  265. message.warning(data.error[0].message);
  266. }
  267. }.bind(this),
  268. }).always(
  269. function () {
  270. loading();
  271. this.setState({
  272. exportPendingLoading: false,
  273. });
  274. }.bind(this)
  275. );
  276. }
  277. // Excel下载
  278. download(fileName) {
  279. window.location.href =
  280. globalConfig.context + "/open/download?fileName=" + fileName;
  281. }
  282. // 模板下载
  283. downloadTemplate(api) {
  284. message.loading("下载中...");
  285. window.location.href = globalConfig.context + api;
  286. }
  287. // 双击
  288. onRowDoubleClick(record) {
  289. this.setState({
  290. visible: true,
  291. rowdata: record,
  292. })
  293. }
  294. // 关闭弹窗
  295. onCancel() {
  296. this.setState({
  297. visible: false,
  298. rowdata: {}
  299. }, () => {
  300. this.loadData(this.state.pageNo)
  301. })
  302. }
  303. componentWillMount() {
  304. this.loadData();
  305. }
  306. render() {
  307. const { columns, searchInfor } = this.state;
  308. return (
  309. <div className="user-content">
  310. <div className="content-title">
  311. <img className="content-logo" src={logo} alt="" />
  312. <span style={{ fontWeight: 900, fontSize: 16 }}>行业研发活动科研中心RD库</span>
  313. </div>
  314. <div className="patent-table">
  315. <div className="user-search">
  316. <RangePicker
  317. style={{ width: 200 }}
  318. value={[
  319. searchInfor.startDate
  320. ? moment(searchInfor.startDate)
  321. : null,
  322. searchInfor.endDate ? moment(searchInfor.endDate) : null,
  323. ]}
  324. onChange={(data, dataString) => {
  325. this.setState({
  326. searchInfor: Object.assign(searchInfor, {
  327. startDate: dataString[0],
  328. endDate: dataString[1],
  329. }),
  330. });
  331. }}
  332. />
  333. <Input
  334. placeholder={"请输入研发活动名称"}
  335. style={{ width: 180 }}
  336. value={searchInfor.name}
  337. onChange={(e) => {
  338. this.setState({
  339. searchInfor: Object.assign(searchInfor, {
  340. name: e.target.value,
  341. }),
  342. });
  343. }}
  344. />
  345. <Select
  346. placeholder={"选择省份"}
  347. style={{ width: 100 }}
  348. >
  349. </Select>
  350. <Select
  351. placeholder={"选择城市"}
  352. style={{ width: 100 }}
  353. >
  354. </Select>
  355. <Select
  356. placeholder={"选择地区"}
  357. style={{ width: 100 }}
  358. >
  359. </Select>
  360. <Select
  361. placeholder={"行业领域"}
  362. style={{ width: 130 }}
  363. value={searchInfor.type || undefined}
  364. onChange={(e) => {
  365. this.setState({
  366. searchInfor: Object.assign(searchInfor, {
  367. type: e,
  368. }),
  369. });
  370. }}
  371. >
  372. {/* {channeOb.map((it, ins) => (
  373. <Option key={it.val}>{it.name}</Option>
  374. ))} */}
  375. </Select>
  376. <Select
  377. placeholder={"人员规模"}
  378. style={{ width: 130 }}
  379. value={searchInfor.type || undefined}
  380. onChange={(e) => {
  381. this.setState({
  382. searchInfor: Object.assign(searchInfor, {
  383. type: e,
  384. }),
  385. });
  386. }}
  387. >
  388. {/* {channeOb.map((it, ins) => (
  389. <Option key={it.val}>{it.name}</Option>
  390. ))} */}
  391. </Select>
  392. <Select
  393. placeholder={"经济规模"}
  394. style={{ width: 130 }}
  395. value={searchInfor.type || undefined}
  396. onChange={(e) => {
  397. this.setState({
  398. searchInfor: Object.assign(searchInfor, {
  399. type: e,
  400. }),
  401. });
  402. }}
  403. >
  404. {/* {channeOb.map((it, ins) => (
  405. <Option key={it.val}>{it.name}</Option>
  406. ))} */}
  407. </Select>
  408. <Button
  409. type="primary"
  410. onClick={() => {
  411. this.loadData();
  412. }}
  413. style={{ margin: "0 5px" }}
  414. >
  415. 搜索
  416. </Button>
  417. <Button
  418. onClick={this.resetAll.bind(this)}
  419. style={{ margin: "0 5px" }}
  420. >
  421. 重置
  422. </Button>
  423. <div className="button">
  424. <Upload {...this.state.upLoad}>
  425. <Button
  426. type="primary"
  427. style={{ marginLeft: 10 }}
  428. >
  429. <Icon type="upload" />
  430. 导入数据
  431. </Button>
  432. </Upload>
  433. <Button
  434. type="primary"
  435. onClick={this.downloadTemplate.bind(this, "/api/admin/RD/downloadTemplate")}
  436. style={{ marginLeft: 10 }}
  437. >
  438. <Icon type="download" />
  439. 下载上传模板
  440. </Button>
  441. <Button
  442. type="primary"
  443. onClick={this.exportExec.bind(this)}
  444. style={{ marginLeft: 10 }}
  445. >
  446. <Icon type="download" />
  447. 导出Excel
  448. </Button>
  449. </div>
  450. </div>
  451. <Spin spinning={this.state.loading}>
  452. <Table
  453. size="middle"
  454. bordered
  455. columns={columns}
  456. scroll={{ x: 1300 }}
  457. dataSource={this.state.dataSource}
  458. pagination={this.state.pagination}
  459. onRowDoubleClick={this.onRowDoubleClick.bind(this)}
  460. />
  461. </Spin>
  462. </div>
  463. {
  464. // 详情
  465. this.state.visible &&
  466. <Detail
  467. rowdata={this.state.rowdata}
  468. visible={this.state.visible}
  469. onCancel={this.onCancel.bind(this)}
  470. />
  471. }
  472. </div>
  473. );
  474. }
  475. }
  476. export default Content;