contract.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. import React from 'react';
  2. import { Icon, Button, Input, Select, Spin, Table, DatePicker, message, Cascader, Switch, Modal } from 'antd';
  3. import { contractStateList, contractTypeList } from '../../../dataDic.js';
  4. import { provinceSelect, getProvince } from '../../../NewDicProvinceList';
  5. import { getTime, companySearch, getContractState, getContractType, getInUrgentTime, getSearchUrl } from '../../../tools.js';
  6. import ajax from 'jquery/src/ajax/xhr.js';
  7. import $ from 'jquery/src/ajax';
  8. import ContractAdd from './contractAdd.jsx';
  9. import ContractDetail from './contractDetail.jsx';
  10. import moment from 'moment';
  11. import './contract.less';
  12. const Contract = React.createClass({
  13. loadData(pageNo) {
  14. this.state.data = [];
  15. this.setState({
  16. loading: true
  17. });
  18. $.ajax({
  19. method: "get",
  20. dataType: "json",
  21. crossDomain: false,
  22. url: globalConfig.context + "/api/admin/contract/list",
  23. data: {
  24. pageNo: pageNo || 1,
  25. pageSize: this.state.pagination.pageSize,
  26. province: this.state.province ? this.state.province[0] : undefined,
  27. uid: this.state.unitId,
  28. type: this.state.contractType,
  29. status: this.state.contractState,
  30. contractId: this.state.contractId,
  31. startDateFormattedDate: this.state.startDateFormattedDate,
  32. endDateFormattedDate: this.state.endDateFormattedDate,
  33. },
  34. success: function (data) {
  35. if (data.error.length || !data.data || !data.data.list) {
  36. message.warning(data.error[0].message);
  37. return;
  38. };
  39. for (let i = 0; i < data.data.list.length; i++) {
  40. let thisdata = data.data.list[i];
  41. this.state.data.push({
  42. key: i,
  43. completeDate: thisdata.completeDate,
  44. completeDateFormattedDate: thisdata.completeDateFormattedDate,
  45. contacts: thisdata.contacts,
  46. depict: thisdata.depict,
  47. founder: thisdata.founder,
  48. id: thisdata.id,
  49. province: thisdata.province,
  50. serialNumber: thisdata.serialNumber,
  51. signDate: thisdata.signDate,
  52. signDateFormattedDate: thisdata.signDateFormattedDate,
  53. status: thisdata.status,
  54. type: thisdata.type,
  55. uid: thisdata.uid,
  56. unitName: thisdata.unitName,
  57. });
  58. };
  59. this.state.pagination.defaultCurrent = data.data.pageNo;
  60. this.state.pagination.total = data.data.totalCount;
  61. this.setState({
  62. dataSource: this.state.data,
  63. pagination: this.state.pagination
  64. });
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getAuthorList() {
  73. this.setState({
  74. loading: true
  75. });
  76. $.ajax({
  77. method: "get",
  78. dataType: "json",
  79. crossDomain: false,
  80. url: globalConfig.context + "/api/admin/contract/principal",
  81. success: function (data) {
  82. if (!data.data) {
  83. if (data.error && data.error.length) {
  84. message.warning(data.error[0].message);
  85. };
  86. return;
  87. };
  88. let _me = this, theArr = [];
  89. for (var item in data.data) {
  90. theArr.push(
  91. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  92. )
  93. };
  94. this.setState({
  95. authorOption: theArr
  96. });
  97. }.bind(this),
  98. }).always(function () {
  99. this.setState({
  100. loading: false
  101. });
  102. }.bind(this));
  103. },
  104. getCompanyList() {
  105. this.setState({
  106. loading: true
  107. });
  108. $.ajax({
  109. method: "get",
  110. dataType: "json",
  111. crossDomain: false,
  112. url: globalConfig.context + "/api/admin/getUnitNames",
  113. success: function (data) {
  114. if (data.error.length || !data.data) {
  115. return;
  116. };
  117. let _me = this, theArr = [];
  118. for (var item in data.data) {
  119. theArr.push(
  120. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  121. )
  122. };
  123. this.setState({
  124. companyOption: theArr
  125. });
  126. }.bind(this),
  127. }).always(function () {
  128. this.setState({
  129. loading: false
  130. });
  131. }.bind(this));
  132. },
  133. getStateList() {
  134. this.setState({
  135. loading: true
  136. });
  137. $.ajax({
  138. method: "get",
  139. dataType: "json",
  140. crossDomain: false,
  141. url: globalConfig.context + "/api/admin/contract/status",
  142. success: function (data) {
  143. if (!data.data) {
  144. if (data.error && data.error.length) {
  145. message.warning(data.error[0].message);
  146. return;
  147. };
  148. };
  149. let _me = this, theArr = [];
  150. for (var item in data.data) {
  151. theArr.push(
  152. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  153. )
  154. };
  155. this.setState({
  156. statusOption: theArr
  157. });
  158. }.bind(this),
  159. }).always(function () {
  160. this.setState({
  161. loading: false
  162. });
  163. }.bind(this));
  164. },
  165. getInitialState() {
  166. return {
  167. visible: false,
  168. data: [],
  169. loading: false,
  170. showAdd: false,
  171. showDesc: false,
  172. searchMore: true,
  173. selectedRowKeys: [],
  174. selectedRows: [],
  175. pagination: {
  176. defaultCurrent: 1,
  177. defaultPageSize: 10,
  178. showQuickJumper: true,
  179. pageSize: 10,
  180. onChange: function (page) {
  181. this.loadData(page);
  182. }.bind(this),
  183. showTotal: function (total) {
  184. return '共' + total + '条数据';
  185. }
  186. },
  187. columns: [
  188. {
  189. title: '编号',
  190. dataIndex: 'serialNumber',
  191. key: 'serialNumber',
  192. }, {
  193. title: '省份',
  194. dataIndex: 'province',
  195. key: 'province',
  196. render: text => { return getProvince(text); }
  197. }, {
  198. title: '公司名称',
  199. dataIndex: 'unitName',
  200. key: 'unitName',
  201. }, {
  202. title: '签订时间',
  203. dataIndex: 'signDateFormattedDate',
  204. key: 'signDateFormattedDate',
  205. }, {
  206. title: '合同状态',
  207. dataIndex: 'status',
  208. key: 'status',
  209. render: (text) => { return getContractState(text) }
  210. }, {
  211. title: '合同类型',
  212. dataIndex: 'type',
  213. key: 'type',
  214. render: (text) => { return getContractType(text) }
  215. }, {
  216. title: '创建人',
  217. dataIndex: 'founder',
  218. key: 'founder'
  219. }, {
  220. title: '技术员',
  221. dataIndex: 'techPrincipal',
  222. key: 'techPrincipal',
  223. }, {
  224. title: '描述',
  225. dataIndex: 'describe',
  226. key: 'describe',
  227. }
  228. ],
  229. dataSource: []
  230. };
  231. },
  232. getContractList() {
  233. this.setState({
  234. loading: true
  235. });
  236. $.ajax({
  237. method: "get",
  238. dataType: "json",
  239. crossDomain: false,
  240. url: globalConfig.context + "/api/admin/contract/serialNumber",
  241. success: function (data) {
  242. if (!data.data) {
  243. if (data.error && data.error.length) {
  244. message.warning(data.error[0].message);
  245. };
  246. return;
  247. };
  248. let theArr = [];
  249. for (let i = 0; i < data.data.length; i++) {
  250. let item = data.data[i];
  251. theArr.push(
  252. <Select.Option value={item.contractId} key={item.contractId}>{item.serialNumber}</Select.Option>
  253. );
  254. };
  255. this.setState({
  256. contractListOption: theArr
  257. });
  258. }.bind(this),
  259. }).always(function () {
  260. this.setState({
  261. loading: false
  262. });
  263. }.bind(this));
  264. },
  265. componentWillMount() {
  266. let _me = this, tArr = [], sArr = [];
  267. contractTypeList.map(function (item) {
  268. tArr.push(
  269. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  270. )
  271. });
  272. contractStateList.map(function (item) {
  273. sArr.push(
  274. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  275. )
  276. });
  277. this.setState({
  278. typeOption: tArr,
  279. stateOption: sArr
  280. });
  281. this.getAuthorList();
  282. this.getCompanyList();
  283. this.getStateList();
  284. this.getContractList();
  285. if (window.location.search) {
  286. let theObj = getSearchUrl(window.location.search);
  287. if (theObj.rid) {
  288. theObj.id = theObj.rid;
  289. if (theObj.rid != 'null' && theObj.uid != 'null') {
  290. this.tableRowClick(theObj);
  291. };
  292. };
  293. };
  294. this.loadData();
  295. },
  296. tableRowClick(record, index) {
  297. this.state.RowData = record;
  298. if (record.status === '0') {
  299. this.setState({
  300. showAdd: true
  301. });
  302. } else {
  303. this.setState({
  304. showDesc: true
  305. });
  306. };
  307. },
  308. delectRow() {
  309. let deletedIds = [];
  310. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  311. let rowItem = this.state.selectedRows[idx];
  312. if (rowItem.id) {
  313. deletedIds.push(rowItem.id)
  314. };
  315. };
  316. this.setState({
  317. selectedRowKeys: [],
  318. loading: deletedIds.length > 0
  319. });
  320. $.ajax({
  321. method: "POST",
  322. dataType: "json",
  323. crossDomain: false,
  324. url: globalConfig.context + "/api/admin/contract/delete",
  325. data: {
  326. ids: deletedIds
  327. }
  328. }).done(function (data) {
  329. if (!data.error.length) {
  330. message.success('删除成功!');
  331. this.setState({
  332. loading: false,
  333. });
  334. } else {
  335. message.warning(data.error[0].message);
  336. };
  337. this.loadData();
  338. }.bind(this));
  339. },
  340. closeDesc(e, s) {
  341. this.state.showDesc = e;
  342. if (s) {
  343. this.loadData();
  344. };
  345. },
  346. addClick() {
  347. this.setState({
  348. showAdd: true
  349. });
  350. },
  351. closeAdd(e, s) {
  352. this.setState({
  353. showAdd: e
  354. });
  355. if (s) {
  356. this.loadData();
  357. };
  358. },
  359. searchSwitch() {
  360. this.setState({
  361. searchMore: !this.state.searchMore
  362. });
  363. },
  364. search() {
  365. this.loadData();
  366. },
  367. reset() {
  368. this.state.province = undefined;
  369. this.state.unitId = undefined;
  370. this.state.contractState = undefined;
  371. this.state.contractType = undefined;
  372. this.state.contractId = undefined;
  373. this.state.startDateFormattedDate = undefined;
  374. this.state.endDateFormattedDate = undefined;
  375. this.loadData();
  376. },
  377. render() {
  378. const rowSelection = {
  379. selectedRowKeys: this.state.selectedRowKeys,
  380. onChange: (selectedRowKeys, selectedRows) => {
  381. this.setState({
  382. selectedRows: selectedRows,
  383. selectedRowKeys: selectedRowKeys
  384. });
  385. }
  386. };
  387. const hasSelected = this.state.selectedRowKeys.length > 0;
  388. return (
  389. <div className="foster-box">
  390. <div className="foster-content">
  391. <div className="content-title">
  392. <span>合同申请管理</span>
  393. <ContractAdd
  394. companyOption={this.state.companyOption}
  395. authorOption={this.state.authorOption}
  396. typeOption={this.state.typeOption}
  397. data={this.state.RowData}
  398. onClick={this.addClick}
  399. showAdd={this.state.showAdd}
  400. closeAdd={this.closeAdd} />
  401. </div>
  402. <div className="foster-query">
  403. <Cascader placeholder="选择省份"
  404. style={{ width: 100, marginTop: "-4px" }}
  405. value={this.state.province}
  406. options={provinceSelect()}
  407. showSearch
  408. filterOption={companySearch}
  409. onChange={(e) => { this.setState({ province: e }) }} />
  410. <Select placeholder="选择公司"
  411. style={{ width: 200 }}
  412. value={this.state.unitId}
  413. showSearch
  414. filterOption={companySearch}
  415. onChange={(e) => { this.setState({ unitId: e }) }}>
  416. {this.state.companyOption}
  417. </Select>
  418. <Select placeholder="选择合同编号"
  419. style={{ width: 120 }}
  420. value={this.state.contractId}
  421. showSearch
  422. filterOption={companySearch}
  423. onChange={(e) => { this.setState({ contractId: e }) }}>
  424. {this.state.contractListOption}
  425. </Select>
  426. <Select placeholder="选择一个合同类型"
  427. style={{ width: 200 }}
  428. value={this.state.contractType}
  429. showSearch
  430. filterOption={companySearch}
  431. onChange={(e) => { this.setState({ contractType: e }) }}>
  432. {this.state.typeOption}
  433. </Select>
  434. <Select style={{ width: 120 }}
  435. value={this.state.contractState}
  436. onChange={(e) => { this.setState({ contractState: e }) }}
  437. placeholder="选择一个状态">
  438. {this.state.stateOption}
  439. </Select>
  440. <span>更多搜索 <Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  441. <Button type="primary" onClick={this.search}>搜索</Button>
  442. <Button onClick={this.reset}>重置</Button>
  443. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  444. disabled={!hasSelected}
  445. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  446. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  447. <span>创建时间:</span>
  448. <DatePicker style={{ width: '240px' }}
  449. allowClear={false}
  450. value={this.state.startDateFormattedDate ? moment(this.state.startDateFormattedDate) : null}
  451. onChange={(date, dateString) => { this.setState({ startDateFormattedDate: dateString }) }} />
  452. <span>结束时间:</span>
  453. <DatePicker style={{ width: '240px' }}
  454. allowClear={false}
  455. value={this.state.endDateFormattedDate ? moment(this.state.endDateFormattedDate) : null}
  456. onChange={(date, dateString) => { this.setState({ endDateFormattedDate: dateString }) }} />
  457. </div>
  458. </div>
  459. <div className="foster-table">
  460. <Spin spinning={this.state.loading}>
  461. <Table columns={this.state.columns}
  462. dataSource={this.state.dataSource}
  463. rowSelection={rowSelection}
  464. pagination={this.state.pagination}
  465. onRowClick={this.tableRowClick} />
  466. </Spin>
  467. </div>
  468. <ContractDetail
  469. data={this.state.RowData}
  470. authorOption={this.state.authorOption}
  471. statusOption={this.state.statusOption}
  472. showDesc={this.state.showDesc}
  473. closeDesc={this.closeDesc} />
  474. </div >
  475. </div>
  476. );
  477. }
  478. });
  479. export default Contract;