index.jsx 14 KB

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