index.jsx 13 KB

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