gx.jsx 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. import React, { Component } from "react";
  2. import {
  3. Form,
  4. Button,
  5. message,
  6. Spin,
  7. Upload,
  8. Tabs,
  9. Table,
  10. Modal,
  11. } from "antd";
  12. import $ from "jquery/src/ajax";
  13. import { ShowModal } from "@/tools";
  14. import moment from "moment";
  15. import ShowModalDiv from "@/showModal.jsx";
  16. import './index.less';
  17. const { TabPane } = Tabs;
  18. class GxPage extends Component {
  19. constructor(props) {
  20. super(props);
  21. this.state = {
  22. type: 0,
  23. Loading: false,
  24. columns: [
  25. {
  26. title: "序号",
  27. dataIndex: "id",
  28. key: "id",
  29. },
  30. {
  31. title: "姓名",
  32. dataIndex: "name",
  33. key: "name",
  34. },
  35. {
  36. title: "市",
  37. dataIndex: "city",
  38. key: "city",
  39. },
  40. {
  41. title: "县",
  42. dataIndex: "county",
  43. key: "county",
  44. },
  45. {
  46. title: "乡镇",
  47. dataIndex: "township",
  48. key: "township",
  49. },
  50. {
  51. title: "村",
  52. dataIndex: "village",
  53. key: "village",
  54. },
  55. {
  56. title: "人口数",
  57. dataIndex: "peopleSum",
  58. key: "peopleSum",
  59. },
  60. {
  61. title: "与户主关系",
  62. dataIndex: "relationship",
  63. key: "relationship",
  64. },
  65. {
  66. title: "脱贫年度",
  67. dataIndex: "povertyYear",
  68. key: "povertyYear",
  69. },
  70. {
  71. title: "户类型",
  72. dataIndex: "householdType",
  73. key: "householdType",
  74. },
  75. {
  76. title: "检测对象类别",
  77. dataIndex: "monitoringObjectType",
  78. key: "monitoringObjectType",
  79. },
  80. {
  81. title: "风险是否已消除",
  82. dataIndex: "riskStatus",
  83. key: "riskStatus",
  84. },
  85. {
  86. title: "识别检测时间",
  87. dataIndex: "identifyMonitoringTime",
  88. key: "identifyMonitoringTime",
  89. },
  90. {
  91. title: "消除检测时间",
  92. dataIndex: "eliminateMonitoringTime",
  93. key: "eliminateMonitoringTime",
  94. },
  95. ],
  96. dataSource: [],
  97. totalcount: 0,
  98. effectiveCount: 0,
  99. id: "",
  100. upLoad: {
  101. customRequest: (options) => {
  102. this.setState({
  103. Loading: true,
  104. })
  105. let params = new FormData();
  106. params.append("file", options.file);
  107. $.ajax({
  108. method: "post",
  109. url: globalConfig.context + "/open/selectPoverty",
  110. async: true,
  111. cache: false,
  112. contentType: false,
  113. processData: false,
  114. data: params
  115. }).done(
  116. function (data) {
  117. this.setState({
  118. Loading: false,
  119. })
  120. if (data.error.length === 0) {
  121. let info = data.data
  122. this.setState({
  123. dataSource: info.list,
  124. totalcount: info.totalcount,
  125. effectiveCount: info.effectiveCount,
  126. id: info.id,
  127. })
  128. } else {
  129. message.warning(data.error[0].message);
  130. }
  131. }.bind(this)
  132. ).always(
  133. function () {
  134. this.setState({
  135. Loading: false,
  136. });
  137. }.bind(this)
  138. );
  139. },
  140. name: "file",
  141. action: globalConfig.context + "/api/user/channel/import",
  142. },
  143. };
  144. this.exportExec = this.exportExec.bind(this);
  145. this.onSwitch = this.onSwitch.bind(this);
  146. }
  147. componentWillMount() {
  148. }
  149. // 导出
  150. exportExec() {
  151. message.config({
  152. duration: 20,
  153. });
  154. let loading = message.loading("下载中...");
  155. this.setState({
  156. Loading: true,
  157. });
  158. let data = {
  159. id: this.state.id,
  160. type: this.state.type,
  161. };
  162. $.ajax({
  163. method: "get",
  164. dataType: "json",
  165. crossDomain: false,
  166. url: globalConfig.context + "/open//selectPovertyById/export",
  167. data,
  168. success: function (data) {
  169. if (data.error.length === 0) {
  170. this.download(data.data);
  171. } else {
  172. message.warning(data.error[0].message);
  173. }
  174. }.bind(this),
  175. }).always(
  176. function () {
  177. loading();
  178. this.setState({
  179. Loading: false,
  180. });
  181. }.bind(this)
  182. );
  183. }
  184. // 导出下载
  185. download(fileName) {
  186. window.location.href =
  187. globalConfig.context + "/open/download?fileName=" + fileName;
  188. }
  189. // 下载模板
  190. downLoadFile() {
  191. window.open(globalConfig.context + '/open/downloadPovertyTemplate')
  192. }
  193. // 有效数据切换
  194. onSwitch() {
  195. this.setState({
  196. Loading: true,
  197. });
  198. $.ajax({
  199. method: "get",
  200. dataType: "json",
  201. crossDomain: false,
  202. url: globalConfig.context + "/open/selectPovertyById",
  203. data: {
  204. id: this.state.id,
  205. type: this.state.type == 0 ? 1 : 0,
  206. },
  207. success: function (data) {
  208. this.setState({
  209. Loading: false,
  210. });
  211. if (data.error.length === 0) {
  212. this.setState({
  213. type: this.state.type == 0 ? 1 : 0,
  214. dataSource: data.data.list,
  215. })
  216. } else {
  217. message.warning(data.error[0].message);
  218. }
  219. }.bind(this),
  220. }).always(
  221. function () {
  222. this.setState({
  223. Loading: false,
  224. });
  225. }.bind(this)
  226. );
  227. }
  228. render() {
  229. const { columns, dataSource, totalcount, effectiveCount, id, type } = this.state;
  230. return (
  231. <div className="user-content">
  232. <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
  233. <div className="content-title" style={{ marginBottom: 10 }}>
  234. <span style={{ fontWeight: 900, fontSize: 16 }}>建档立卡脱贫户-批量查询</span>
  235. </div>
  236. <Tabs defaultActiveKey="1">
  237. <TabPane tab="操作" key="1">
  238. <div
  239. style={{
  240. width: "100%",
  241. paddingBottom: 10,
  242. display: "flex",
  243. flexDirection: "row",
  244. justifyContent: "space-between",
  245. }}
  246. >
  247. <div
  248. style={{
  249. display: "flex"
  250. }}
  251. >
  252. <Upload {...this.state.upLoad} disabled={this.state.Loading}>
  253. <Button
  254. type="primary"
  255. onClick={() => {
  256. }}
  257. style={{ marginLeft: "10px" }}
  258. >
  259. 导入查询数据
  260. </Button>
  261. </Upload>
  262. <Button
  263. type="primary"
  264. onClick={this.downLoadFile}
  265. style={{ marginLeft: "10px" }}
  266. >
  267. 下载批量查询模板
  268. </Button>
  269. <Button
  270. type="primary"
  271. loading={this.state.Loading}
  272. onClick={this.exportExec}
  273. style={{ marginLeft: "10px" }}
  274. disabled={!id}
  275. >
  276. 导出EXCEL
  277. </Button>
  278. </div>
  279. <div>
  280. <span>数据统计:有效数据<span style={{ color: "red" }}>{effectiveCount}</span>条,共<span style={{ color: "red" }}>{totalcount}</span>条数据</span>
  281. <Button
  282. type="primary"
  283. onClick={this.onSwitch}
  284. style={{ margin: "0 10px" }}
  285. disabled={!id}
  286. >
  287. {type == 0 ? "仅显示有效数据" : "显示所有数据"}
  288. </Button>
  289. </div>
  290. </div>
  291. </TabPane>
  292. </Tabs>
  293. <div className="patent-table">
  294. <Spin spinning={this.state.Loading}>
  295. <Table
  296. bordered
  297. size="middle"
  298. columns={columns}
  299. dataSource={dataSource}
  300. />
  301. </Spin>
  302. </div>
  303. </div>
  304. );
  305. }
  306. }
  307. export default GxPage;