index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  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.error.length == 0) {
  198. if (data.data.OK == 0) {
  199. if (data.data.ERROR.length == 0) {
  200. message.error("导入未成功,请使用正确模板导入");
  201. } else {
  202. this.onTips(data)
  203. }
  204. this.loadData();
  205. } else {
  206. message.success(`${data.data.OK}条数据导入成功!`);
  207. this.loadData();
  208. }
  209. } else {
  210. message.success(data.error[0].message);
  211. }
  212. }.bind(this)
  213. ).always(
  214. function (err) {
  215. if (err.status === 404) {
  216. message.warning('数据错误');
  217. }
  218. this.setState({
  219. upLoadFileLoading: false,
  220. });
  221. }.bind(this)
  222. );
  223. },
  224. name: "file",
  225. action: globalConfig.context + "/api/admin/RD/import",
  226. },
  227. };
  228. }
  229. // 导入提示
  230. onTips(data) {
  231. if (data.data.ERROR.length > 0) {
  232. Modal.info({
  233. title: <span>部分导入失败,您有以下
  234. <span style={{ color: "red" }}>&nbsp;{data.data.ERROR.length}&nbsp;</span>条数据重复!
  235. </span>,
  236. content: (
  237. <div>
  238. {
  239. data.data.ERROR.map((item, index) =>
  240. <p key={index}>研发活动编号为[<span style={{ color: "red" }}>&nbsp;{item}&nbsp;</span>]</p>
  241. )
  242. }
  243. <div style={{ color: "red", marginTop: 20 }}>以上数据因研发活动编号重复无法导入</div>
  244. </div>
  245. ),
  246. okText: '确定',
  247. });
  248. }
  249. }
  250. // 列表查询
  251. loadData(pageNo) {
  252. const { searchInfor, pagination } = this.state;
  253. this.setState({
  254. loading: true,
  255. });
  256. let datas = Object.assign(searchInfor, {
  257. pageNo: pageNo || 1,
  258. pageSize: pagination.pageSize,
  259. });
  260. $.ajax({
  261. method: "get",
  262. dataType: "json",
  263. crossDomain: false,
  264. url: globalConfig.context + "/api/admin/RD/list",
  265. data: datas,
  266. success: function (data) {
  267. this.setState({
  268. loading: false,
  269. });
  270. if (data.error && data.error.length === 0) {
  271. if (data.data.list) {
  272. pagination.current = data.data.pageNo;
  273. pagination.total = data.data.totalCount;
  274. if (data.data && data.data.list && !data.data.list.length) {
  275. pagination.current = 0;
  276. pagination.total = 0;
  277. }
  278. this.setState({
  279. dataSource: data.data.list,
  280. pagination: this.state.pagination,
  281. pageNo: data.data.pageNo,
  282. });
  283. } else {
  284. this.setState({
  285. dataSource: data.data,
  286. pagination: false,
  287. });
  288. }
  289. } else {
  290. getLoginStatus(data)
  291. }
  292. }.bind(this),
  293. }).always(
  294. function () {
  295. this.setState({
  296. loading: false,
  297. });
  298. }.bind(this)
  299. );
  300. }
  301. // 重置
  302. resetAll() {
  303. this.setState({
  304. searchInfor: JSON.parse(JSON.stringify({})),
  305. }, () => {
  306. this.loadData()
  307. })
  308. }
  309. // 导出
  310. exportExec() {
  311. message.config({
  312. duration: 20,
  313. });
  314. let loading = message.loading("下载中...");
  315. this.setState({
  316. exportPendingLoading: true,
  317. });
  318. let data = {
  319. pageNo: 1,
  320. pageSize: 99999,
  321. };
  322. let obj1 = JSON.parse(JSON.stringify(this.state.searchInfor));
  323. data = Object.assign(data, obj1);
  324. $.ajax({
  325. method: "get",
  326. dataType: "json",
  327. crossDomain: false,
  328. url: globalConfig.context + "/api/admin/RD/exportList",
  329. data,
  330. success: function (data) {
  331. if (data.error.length === 0) {
  332. this.download(data.data);
  333. } else {
  334. message.warning(data.error[0].message);
  335. }
  336. }.bind(this),
  337. }).always(
  338. function () {
  339. loading();
  340. this.setState({
  341. exportPendingLoading: false,
  342. });
  343. }.bind(this)
  344. );
  345. }
  346. // Excel下载
  347. download(fileName) {
  348. window.location.href =
  349. globalConfig.context + "/open/download?fileName=" + fileName;
  350. }
  351. // 模板下载
  352. downloadTemplate(api) {
  353. message.loading("下载中...");
  354. window.location.href = globalConfig.context + api;
  355. }
  356. // 双击
  357. onRowDoubleClick(record) {
  358. this.setState({
  359. visible: true,
  360. rowdata: record,
  361. })
  362. }
  363. // 关闭弹窗
  364. onCancel() {
  365. this.setState({
  366. visible: false,
  367. rowdata: {}
  368. }, () => {
  369. this.loadData(this.state.pageNo)
  370. })
  371. }
  372. componentWillMount() {
  373. this.loadData();
  374. }
  375. render() {
  376. const { columns, searchInfor } = this.state;
  377. return (
  378. <div className="user-content">
  379. {/* <div className="content-title">
  380. </div> */}
  381. <div className="patent-table">
  382. <div className="user-search">
  383. <RangePicker
  384. style={{ width: 200 }}
  385. value={[
  386. searchInfor.rdStart ? moment(searchInfor.rdStart) : null,
  387. searchInfor.rdEnd ? moment(searchInfor.rdEnd) : null,
  388. ]}
  389. onChange={(data, dataString) => {
  390. this.setState({
  391. searchInfor: Object.assign(searchInfor, {
  392. rdStart: dataString[0],
  393. rdEnd: dataString[1],
  394. }),
  395. });
  396. }}
  397. />
  398. <Input
  399. placeholder={"请输入研发活动名称"}
  400. style={{ width: 180 }}
  401. value={searchInfor.rdName}
  402. onChange={(e) => {
  403. this.setState({
  404. searchInfor: Object.assign(searchInfor, {
  405. rdName: e.target.value,
  406. }),
  407. });
  408. }}
  409. />
  410. <Input
  411. placeholder={"请输入咨询师名称"}
  412. style={{ width: 180 }}
  413. value={searchInfor.consultantName}
  414. onChange={(e) => {
  415. this.setState({
  416. searchInfor: Object.assign(searchInfor, {
  417. consultantName: e.target.value,
  418. }),
  419. });
  420. }}
  421. />
  422. <Button
  423. type="primary"
  424. onClick={() => {
  425. this.loadData();
  426. }}
  427. style={{ margin: "0 5px" }}
  428. >
  429. 搜索
  430. </Button>
  431. <Button
  432. onClick={this.resetAll.bind(this)}
  433. style={{ margin: "0 5px" }}
  434. >
  435. 重置
  436. </Button>
  437. <div className="button">
  438. <Upload {...this.state.upLoad}>
  439. <Button
  440. type="primary"
  441. style={{ marginLeft: 10 }}
  442. >
  443. <Icon type="upload" />
  444. 导入数据
  445. </Button>
  446. </Upload>
  447. <Button
  448. type="primary"
  449. onClick={this.downloadTemplate.bind(this, "/api/admin/RD/downloadTemplate")}
  450. style={{ marginLeft: 10 }}
  451. >
  452. <Icon type="download" />
  453. 下载上传模板
  454. </Button>
  455. <Button
  456. type="primary"
  457. onClick={this.exportExec.bind(this)}
  458. style={{ marginLeft: 10 }}
  459. >
  460. <Icon type="download" />
  461. 导出Excel
  462. </Button>
  463. </div>
  464. </div>
  465. <Spin spinning={this.state.loading}>
  466. <Table
  467. size="middle"
  468. bordered
  469. columns={columns}
  470. scroll={{ x: window.innerWidth > 1536 ? '130%' : window.innerWidth < 1152 ? '280%' : '200%' }}
  471. dataSource={this.state.dataSource}
  472. pagination={this.state.pagination}
  473. onRowDoubleClick={this.onRowDoubleClick.bind(this)}
  474. />
  475. </Spin>
  476. </div>
  477. {
  478. // 详情
  479. this.state.visible &&
  480. <Detail
  481. rowdata={this.state.rowdata}
  482. visible={this.state.visible}
  483. onCancel={this.onCancel.bind(this)}
  484. />
  485. }
  486. </div>
  487. );
  488. }
  489. }
  490. export default Content;