contract.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  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. startDateFormattedDate: [],
  174. endDateFormattedDate: [],
  175. selectedRowKeys: [],
  176. selectedRows: [],
  177. pagination: {
  178. defaultCurrent: 1,
  179. defaultPageSize: 10,
  180. showQuickJumper: true,
  181. pageSize: 10,
  182. onChange: function (page) {
  183. this.loadData(page);
  184. }.bind(this),
  185. showTotal: function (total) {
  186. return '共' + total + '条数据';
  187. }
  188. },
  189. columns: [
  190. {
  191. title: '编号',
  192. dataIndex: 'serialNumber',
  193. key: 'serialNumber',
  194. }, {
  195. title: '省份',
  196. dataIndex: 'province',
  197. key: 'province',
  198. render: text => { return getProvince(text); }
  199. }, {
  200. title: '公司名称',
  201. dataIndex: 'unitName',
  202. key: 'unitName',
  203. }, {
  204. title: '签订时间',
  205. dataIndex: 'signDateFormattedDate',
  206. key: 'signDateFormattedDate',
  207. }, {
  208. title: '合同状态',
  209. dataIndex: 'status',
  210. key: 'status',
  211. render: (text) => { return getContractState(text) }
  212. }, {
  213. title: '合同类型',
  214. dataIndex: 'type',
  215. key: 'type',
  216. render: (text) => { return getContractType(text) }
  217. }, {
  218. title: '创建人',
  219. dataIndex: 'founder',
  220. key: 'founder'
  221. }, {
  222. title: '技术员',
  223. dataIndex: 'techPrincipal',
  224. key: 'techPrincipal',
  225. }, {
  226. title: '描述',
  227. dataIndex: 'describe',
  228. key: 'describe',
  229. }
  230. ],
  231. dataSource: []
  232. };
  233. },
  234. getContractList() {
  235. this.setState({
  236. loading: true
  237. });
  238. $.ajax({
  239. method: "get",
  240. dataType: "json",
  241. crossDomain: false,
  242. url: globalConfig.context + "/api/admin/contract/serialNumber",
  243. success: function (data) {
  244. if (!data.data) {
  245. if (data.error && data.error.length) {
  246. message.warning(data.error[0].message);
  247. };
  248. return;
  249. };
  250. let theArr = [];
  251. for (let i = 0; i < data.data.length; i++) {
  252. let item = data.data[i];
  253. theArr.push(
  254. <Select.Option value={item.contractId} key={item.contractId}>{item.serialNumber}</Select.Option>
  255. );
  256. };
  257. this.setState({
  258. contractListOption: theArr
  259. });
  260. }.bind(this),
  261. }).always(function () {
  262. this.setState({
  263. loading: false
  264. });
  265. }.bind(this));
  266. },
  267. componentWillMount() {
  268. let _me = this, tArr = [], sArr = [];
  269. contractTypeList.map(function (item) {
  270. tArr.push(
  271. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  272. )
  273. });
  274. contractStateList.map(function (item) {
  275. sArr.push(
  276. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  277. )
  278. });
  279. this.setState({
  280. typeOption: tArr,
  281. stateOption: sArr
  282. });
  283. this.getAuthorList();
  284. this.getCompanyList();
  285. this.getStateList();
  286. this.getContractList();
  287. if (window.location.search) {
  288. let theObj = getSearchUrl(window.location.search);
  289. if (theObj.rid) {
  290. theObj.id = theObj.rid;
  291. if (theObj.rid != 'null' && theObj.uid != 'null') {
  292. this.tableRowClick(theObj);
  293. };
  294. };
  295. };
  296. this.loadData();
  297. },
  298. tableRowClick(record, index) {
  299. this.state.RowData = record;
  300. if (record.status === '0') {
  301. this.setState({
  302. showAdd: true
  303. });
  304. } else {
  305. this.setState({
  306. showDesc: true
  307. });
  308. };
  309. },
  310. delectRow() {
  311. let deletedIds = [];
  312. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  313. let rowItem = this.state.selectedRows[idx];
  314. if (rowItem.id) {
  315. deletedIds.push(rowItem.id)
  316. };
  317. };
  318. this.setState({
  319. selectedRowKeys: [],
  320. loading: deletedIds.length > 0
  321. });
  322. $.ajax({
  323. method: "POST",
  324. dataType: "json",
  325. crossDomain: false,
  326. url: globalConfig.context + "/api/admin/contract/delete",
  327. data: {
  328. ids: deletedIds
  329. }
  330. }).done(function (data) {
  331. if (!data.error.length) {
  332. message.success('删除成功!');
  333. this.setState({
  334. loading: false,
  335. });
  336. } else {
  337. message.warning(data.error[0].message);
  338. };
  339. this.loadData();
  340. }.bind(this));
  341. },
  342. closeDesc(e, s) {
  343. this.state.showDesc = e;
  344. if (s) {
  345. this.loadData();
  346. };
  347. },
  348. addClick() {
  349. this.setState({
  350. showAdd: true
  351. });
  352. },
  353. closeAdd(e, s) {
  354. this.setState({
  355. showAdd: e
  356. });
  357. if (s) {
  358. this.loadData();
  359. };
  360. },
  361. searchSwitch() {
  362. this.setState({
  363. searchMore: !this.state.searchMore
  364. });
  365. },
  366. search() {
  367. this.loadData();
  368. },
  369. reset() {
  370. this.state.province = undefined;
  371. this.state.unitId = undefined;
  372. this.state.contractState = undefined;
  373. this.state.contractType = undefined;
  374. this.state.contractId = undefined;
  375. this.state.startDateFormattedDate = [];
  376. this.state.endDateFormattedDate = [];
  377. this.loadData();
  378. },
  379. render() {
  380. const rowSelection = {
  381. selectedRowKeys: this.state.selectedRowKeys,
  382. onChange: (selectedRowKeys, selectedRows) => {
  383. this.setState({
  384. selectedRows: selectedRows,
  385. selectedRowKeys: selectedRowKeys
  386. });
  387. }
  388. };
  389. const hasSelected = this.state.selectedRowKeys.length > 0;
  390. const { MonthPicker, RangePicker } = DatePicker;
  391. return (
  392. <div className="foster-box">
  393. <div className="foster-content">
  394. <div className="content-title">
  395. <span>合同申请管理</span>
  396. <ContractAdd
  397. companyOption={this.state.companyOption}
  398. authorOption={this.state.authorOption}
  399. typeOption={this.state.typeOption}
  400. data={this.state.RowData}
  401. onClick={this.addClick}
  402. showAdd={this.state.showAdd}
  403. closeAdd={this.closeAdd} />
  404. </div>
  405. <div className="foster-query">
  406. <Cascader placeholder="选择省份"
  407. style={{ width: 100, marginTop: "-4px" }}
  408. value={this.state.province}
  409. options={provinceSelect()}
  410. showSearch
  411. filterOption={companySearch}
  412. onChange={(e) => { this.setState({ province: e }) }} />
  413. <Select placeholder="选择公司"
  414. style={{ width: 200 }}
  415. value={this.state.unitId}
  416. showSearch
  417. filterOption={companySearch}
  418. onChange={(e) => { this.setState({ unitId: e }) }}>
  419. {this.state.companyOption}
  420. </Select>
  421. <Select placeholder="选择合同编号"
  422. style={{ width: 120 }}
  423. value={this.state.contractId}
  424. showSearch
  425. filterOption={companySearch}
  426. onChange={(e) => { this.setState({ contractId: e }) }}>
  427. {this.state.contractListOption}
  428. </Select>
  429. <Select placeholder="选择一个合同类型"
  430. style={{ width: 200 }}
  431. value={this.state.contractType}
  432. showSearch
  433. filterOption={companySearch}
  434. onChange={(e) => { this.setState({ contractType: e }) }}>
  435. {this.state.typeOption}
  436. </Select>
  437. <Select style={{ width: 120 }}
  438. value={this.state.contractState}
  439. onChange={(e) => { this.setState({ contractState: e }) }}
  440. placeholder="选择一个状态">
  441. {this.state.stateOption}
  442. </Select>
  443. <span>更多搜索 <Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  444. <Button type="primary" onClick={this.search}>搜索</Button>
  445. <Button onClick={this.reset}>重置</Button>
  446. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  447. disabled={!hasSelected}
  448. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  449. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  450. <span>创建时间:</span>
  451. <RangePicker style={{ width: '240px' }}
  452. allowClear={false}
  453. value={[this.state.startDateFormattedDate[0] ? moment(this.state.startDateFormattedDate[0]) : null,
  454. this.state.startDateFormattedDate[1] ? moment(this.state.startDateFormattedDate[1]) : null]}
  455. onChange={(date, dateString) => { this.setState({ startDateFormattedDate: dateString }) }} />
  456. <span>结束时间:</span>
  457. <RangePicker style={{ width: '240px' }}
  458. allowClear={false}
  459. value={[this.state.endDateFormattedDate[0] ? moment(this.state.endDateFormattedDate[0]) : null,
  460. this.state.endDateFormattedDate[1] ? moment(this.state.endDateFormattedDate[1]) : null]}
  461. onChange={(date, dateString) => { this.setState({ endDateFormattedDate: dateString }) }} />
  462. </div>
  463. </div>
  464. <div className="foster-table">
  465. <Spin spinning={this.state.loading}>
  466. <Table columns={this.state.columns}
  467. dataSource={this.state.dataSource}
  468. rowSelection={rowSelection}
  469. pagination={this.state.pagination}
  470. onRowClick={this.tableRowClick} />
  471. </Spin>
  472. </div>
  473. <ContractDetail
  474. data={this.state.RowData}
  475. authorOption={this.state.authorOption}
  476. statusOption={this.state.statusOption}
  477. showDesc={this.state.showDesc}
  478. closeDesc={this.closeDesc} />
  479. </div >
  480. </div>
  481. );
  482. }
  483. });
  484. export default Contract;