ratepay.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. import React from 'react';
  2. import { Switch, Icon, Form, Button, Input, Spin, Table, message, Select, Modal, InputNumber, Upload } from 'antd';
  3. import './techProduct.less';
  4. import { beforeUploadFile, newDownloadFile, getProportion, saveProportion, getPreview } from '../../../../tools.js';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. const RatepayDescFrom = Form.create()(React.createClass({
  8. loadData(uid, year) {
  9. this.setState({
  10. loading: true
  11. });
  12. $.ajax({
  13. method: "get",
  14. dataType: "json",
  15. crossDomain: false,
  16. url: globalConfig.context + "/api/admin/ratepayDetail",
  17. data: {
  18. uid: uid != undefined ? uid : this.props.data.uid,
  19. year: year != undefined ? year : this.props.data.year
  20. }
  21. }).done((data) => {
  22. if (!data.data) {
  23. if (data.error && data.error.length) {
  24. message.warning(data.error[0].message);
  25. };
  26. return;
  27. };
  28. this.setState({
  29. managementCost: data.data.managementCost,
  30. researchCost: data.data.researchCost,
  31. grossProfit: data.data.grossProfit,
  32. operatingProfit: data.data.operatingProfit
  33. });
  34. }).always(function () {
  35. this.setState({
  36. loading: false
  37. });
  38. }.bind(this));
  39. },
  40. getInitialState() {
  41. return {
  42. loading: false,
  43. yearOption: [],
  44. };
  45. },
  46. componentWillMount() {
  47. let d = new Date();
  48. let _me = this;
  49. d = d.getFullYear();
  50. for (let i = d; i > d - 20; i--) {
  51. _me.state.yearOption.push(
  52. <Select.Option value={i.toString()} key={i}>{i}</Select.Option>
  53. )
  54. };
  55. if (this.props.data.uid) {
  56. this.loadData();
  57. };
  58. },
  59. handleSubmit(e) {
  60. e.preventDefault();
  61. if (!this.state.year && !this.props.data.year) {
  62. message.warning("请选择一个年份!")
  63. return;
  64. };
  65. this.props.form.validateFields((err, values) => {
  66. if (!err) {
  67. this.props.spinState(true);
  68. $.ajax({
  69. method: "POST",
  70. dataType: "json",
  71. crossDomain: false,
  72. url: globalConfig.context + "/api/admin/disposeRatepay",
  73. data: {
  74. id: this.props.data.id,
  75. uid: this.props.uid,
  76. operatingIncome: values.operatingIncome,
  77. managementCost: values.managementCost,
  78. operatingProfit: values.operatingProfit,
  79. nonOperatingIncome: values.nonOperatingIncome,
  80. nonTaxableIncome: values.nonTaxableIncome,
  81. taxExemptIncome: values.taxExemptIncome,
  82. subsidyIncome: values.subsidyIncome,
  83. grossProfit: values.grossProfit,
  84. researchCost: values.researchCost,
  85. year: this.state.year || this.props.data.year,
  86. taxReturnUrl: this.state.taxReturnUrl
  87. }
  88. }).done(function (data) {
  89. if (!data.error.length) {
  90. message.success('保存成功!');
  91. this.props.clickOk();
  92. this.props.spinState(false);
  93. this.props.form.resetFields();
  94. } else {
  95. message.warning(data.error[0].message);
  96. this.props.spinState(false);
  97. }
  98. }.bind(this));
  99. }
  100. });
  101. },
  102. componentWillReceiveProps(nextProps) {
  103. if (!this.props.visible && nextProps.visible) {
  104. if (nextProps.data.uid) {
  105. this.loadData(nextProps.data.uid, nextProps.data.year);
  106. };
  107. this.props.form.resetFields();
  108. this.state.fileList = [];
  109. this.state.managementCost = undefined;
  110. this.state.researchCost = undefined;
  111. this.state.grossProfit = undefined;
  112. this.state.operatingProfit = undefined;
  113. };
  114. },
  115. render() {
  116. const FormItem = Form.Item;
  117. const { getFieldDecorator } = this.props.form;
  118. const theData = this.props.data;
  119. const formItemLayout = {
  120. labelCol: { span: 8 },
  121. wrapperCol: { span: 16 },
  122. };
  123. const _me = this;
  124. return (
  125. <Form onSubmit={this.handleSubmit} className="activityCost-form">
  126. <div className="activityCost-title"><span>年份: </span>
  127. {
  128. theData.year ? <span>{theData.year}</span> :
  129. <Select placeholder="请选择年份" style={{ width: 200 }}
  130. onSelect={(e, n) => { this.state.year = e }}>
  131. {this.state.yearOption}
  132. </Select>
  133. }
  134. </div>
  135. <div className="clearfix">
  136. <FormItem className="half-item"
  137. {...formItemLayout}
  138. label="营业收入(万元)"
  139. >
  140. {getFieldDecorator('operatingIncome', {
  141. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  142. initialValue: theData.operatingIncome
  143. })(
  144. <InputNumber min={0} max={999999} step={0.01} />
  145. )}
  146. </FormItem>
  147. <FormItem className="half-item"
  148. {...formItemLayout}
  149. label="管理费用(万元)"
  150. >
  151. {getFieldDecorator('managementCost', {
  152. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  153. initialValue: theData.managementCost
  154. })(
  155. <InputNumber min={0} max={999999} step={0.01} />
  156. )}
  157. {this.state.managementCost && this.state.managementCost != this.props.form.getFieldValue('managementCost') ? <span style={{ color: '#f50' }}>与财务报表不一致!</span> : <span></span>}
  158. </FormItem>
  159. <FormItem className="half-item"
  160. {...formItemLayout}
  161. label="营业利润(万元)"
  162. >
  163. {getFieldDecorator('operatingProfit', {
  164. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  165. initialValue: theData.operatingProfit
  166. })(
  167. <InputNumber min={0} max={999999} step={0.01} />
  168. )}
  169. {this.state.operatingProfit && this.state.operatingProfit != this.props.form.getFieldValue('operatingProfit') ? <span style={{ color: '#f50' }}>与财务报表不一致!</span> : <span></span>}
  170. </FormItem>
  171. <FormItem className="half-item"
  172. {...formItemLayout}
  173. label="营业外收入(万元)"
  174. >
  175. {getFieldDecorator('nonOperatingIncome', {
  176. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  177. initialValue: theData.nonOperatingIncome
  178. })(
  179. <InputNumber min={0} max={999999} step={0.01} />
  180. )}
  181. </FormItem>
  182. <FormItem className="half-item"
  183. {...formItemLayout}
  184. label="不征税收入(万元)"
  185. >
  186. {getFieldDecorator('nonTaxableIncome', {
  187. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  188. initialValue: theData.nonTaxableIncome
  189. })(
  190. <InputNumber min={0} max={999999} step={0.01} />
  191. )}
  192. </FormItem>
  193. <FormItem className="half-item"
  194. {...formItemLayout}
  195. label="免税收入(万元)"
  196. >
  197. {getFieldDecorator('taxExemptIncome', {
  198. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  199. initialValue: theData.taxExemptIncome
  200. })(
  201. <InputNumber min={0} max={999999} step={0.01} />
  202. )}
  203. </FormItem>
  204. <FormItem className="half-item"
  205. {...formItemLayout}
  206. label="政府补助收入(万元)"
  207. >
  208. {getFieldDecorator('subsidyIncome', {
  209. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  210. initialValue: theData.subsidyIncome
  211. })(
  212. <InputNumber min={0} max={999999} step={0.01} />
  213. )}
  214. </FormItem>
  215. <FormItem className="half-item"
  216. {...formItemLayout}
  217. label="利润总额(万元)"
  218. >
  219. {getFieldDecorator('grossProfit', {
  220. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  221. initialValue: theData.grossProfit
  222. })(
  223. <InputNumber min={0} max={999999} step={0.01} />
  224. )}
  225. {this.state.grossProfit && this.state.grossProfit != this.props.form.getFieldValue('grossProfit') ? <span style={{ color: '#f50' }}>与财务报表不一致!</span> : <span></span>}
  226. </FormItem>
  227. <FormItem className="half-item"
  228. {...formItemLayout}
  229. label="研发费用(万元)"
  230. >
  231. {getFieldDecorator('researchCost', {
  232. rules: [{ type: 'number', required: true, message: '此项为必填项!' }],
  233. initialValue: theData.researchCost
  234. })(
  235. <InputNumber min={0} max={999999} step={0.01} />
  236. )}
  237. {this.state.researchCost && this.state.researchCost != this.props.form.getFieldValue('researchCost') ? <span style={{ color: '#f50' }}>与财务报表不一致!</span> : <span></span>}
  238. </FormItem>
  239. </div>
  240. <div className="hrSituation-roster">
  241. <Upload
  242. name="ratepay"
  243. action={globalConfig.context + "/api/admin/uploadRatepay"}
  244. data={{ 'sign': 'ratepay', 'year': (this.state.year || theData.year), 'uid': this.props.uid }}
  245. beforeUpload={beforeUploadFile}
  246. fileList={this.state.fileList}
  247. onChange={(info) => {
  248. if (info.file.status !== 'uploading') {
  249. console.log(info.file, info.fileList);
  250. }
  251. if (info.file.status === 'done') {
  252. if (!info.file.response.error.length) {
  253. message.success(`${info.file.name} 文件上传成功!`);
  254. } else {
  255. message.warning(info.file.response.error[0].message);
  256. return;
  257. };
  258. this.state.taxReturnUrl = info.file.response.data;
  259. } else if (info.file.status === 'error') {
  260. message.error(`${info.file.name} 文件上传失败。`);
  261. };
  262. this.setState({ fileList: info.fileList.slice(-1) });
  263. }}
  264. >
  265. <Button><Icon type="upload" /> 上传企业所得税纳税申报表 </Button>
  266. </Upload>
  267. <p style={{ marginTop: '10px' }}>{theData.taxReturnUrl ?
  268. <span className="download-file">
  269. <a onClick={newDownloadFile.bind(null, this.props.data.id, 'ratepay', '/api/admin/downloadRatepay')}>{theData.taxReturnDownloadFileName}</a>
  270. <a onClick={() => {
  271. var newTab = window.open('about:blank'); getPreview(theData.id, 'ratepay', 'ratepay', function (data) { newTab.location.href = data; });
  272. }}><Icon style={{ fontSize: '16px' }} type="eye-o" /></a>
  273. </span>
  274. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}</p>
  275. </div>
  276. <FormItem style={{ marginTop: '20px' }}>
  277. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  278. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  279. </FormItem>
  280. </Form >
  281. );
  282. },
  283. }));
  284. const RatepayDesc = React.createClass({
  285. getInitialState() {
  286. return {
  287. visible: false,
  288. loading: false
  289. };
  290. },
  291. componentWillReceiveProps(nextProps) {
  292. this.state.visible = nextProps.showDesc
  293. },
  294. showModal() {
  295. this.setState({
  296. visible: true,
  297. });
  298. },
  299. handleOk() {
  300. this.setState({
  301. visible: false,
  302. });
  303. this.props.closeDesc(false, true);
  304. },
  305. handleCancel(e) {
  306. this.setState({
  307. visible: false,
  308. });
  309. this.props.closeDesc(false);
  310. },
  311. spinChange(e) {
  312. this.setState({
  313. loading: e
  314. });
  315. },
  316. render() {
  317. return (
  318. <div className="patent-addNew">
  319. <Modal maskClosable={false} title="企业所得税纳税申报信息" visible={this.state.visible}
  320. onOk={this.handleOk} onCancel={this.handleCancel}
  321. width='800px'
  322. footer='' >
  323. <Spin spinning={this.state.loading} className='spin-box'>
  324. <RatepayDescFrom
  325. uid={this.props.uid}
  326. data={this.props.data}
  327. visible={this.state.visible}
  328. spinState={this.spinChange} closeModal={this.handleCancel} clickOk={this.handleOk} />
  329. </Spin>
  330. </Modal>
  331. </div>
  332. );
  333. },
  334. });
  335. const Ratepay = React.createClass({
  336. loadData(pageNo) {
  337. this.state.data = [];
  338. this.setState({
  339. loading: true
  340. });
  341. $.ajax({
  342. method: "post",
  343. dataType: "json",
  344. crossDomain: false,
  345. url: globalConfig.context + "/api/admin/ratepay",
  346. data: {
  347. pageNo: pageNo || 1,
  348. pageSize: this.state.pagination.pageSize,
  349. uid: this.props.data.uid
  350. }
  351. }).done((data) => {
  352. if (data.error.length || !data.data || !data.data.list) {
  353. message.warning(data.error[0].message);
  354. return;
  355. };
  356. for (let i = 0; i < data.data.list.length; i++) {
  357. let thisdata = data.data.list[i];
  358. this.state.data.push({
  359. key: i,
  360. id: thisdata.id,
  361. uid: thisdata.uid,
  362. operatingIncome: thisdata.operatingIncome,
  363. managementCost: thisdata.managementCost,
  364. operatingProfit: thisdata.operatingProfit,
  365. nonOperatingIncome: thisdata.nonOperatingIncome,
  366. nonTaxableIncome: thisdata.nonTaxableIncome,
  367. taxExemptIncome: thisdata.taxExemptIncome,
  368. subsidyIncome: thisdata.subsidyIncome,
  369. researchCost: thisdata.researchCost,
  370. grossProfit: thisdata.grossProfit,
  371. year: thisdata.year,
  372. taxReturnUrl: thisdata.taxReturnUrl,
  373. taxReturnDownloadFileName: thisdata.taxReturnDownloadFileName,
  374. taxReturn: [thisdata.id, thisdata.taxReturnDownloadFileName]
  375. });
  376. };
  377. this.state.pagination.current = data.data.pageNo;
  378. this.state.pagination.total = data.data.totalCount;
  379. this.setState({
  380. dataSource: this.state.data,
  381. pagination: this.state.pagination
  382. });
  383. }).always(function () {
  384. this.setState({
  385. loading: false
  386. });
  387. }.bind(this));
  388. let _me = this;
  389. getProportion(this.props.data.uid, function (data) { _me.setState({ proportion: data }); });
  390. },
  391. getInitialState() {
  392. return {
  393. selectedRowKeys: [],
  394. selectedRows: [],
  395. loading: false,
  396. pagination: {
  397. defaultCurrent: 1,
  398. defaultPageSize: 10,
  399. showQuickJumper: true,
  400. pageSize: 10,
  401. onChange: function (page) {
  402. this.loadData(page);
  403. }.bind(this),
  404. showTotal: function (total) {
  405. return '共' + total + '条数据';
  406. }
  407. },
  408. columns: [
  409. {
  410. title: '年份',
  411. dataIndex: 'year',
  412. key: 'year'
  413. }, {
  414. title: '营业收入(万元)',
  415. dataIndex: 'operatingIncome',
  416. key: 'operatingIncome'
  417. }, {
  418. title: '管理费用(万元)',
  419. dataIndex: 'managementCost',
  420. key: 'managementCost'
  421. }, {
  422. title: '营业利润(万元)',
  423. dataIndex: 'operatingProfit',
  424. key: 'operatingProfit',
  425. }, {
  426. title: '营业外收入(万元)',
  427. dataIndex: 'nonOperatingIncome',
  428. key: 'nonOperatingIncome',
  429. }, {
  430. title: '相关附件',
  431. dataIndex: 'taxReturn',
  432. key: 'taxReturn',
  433. render: (text) => {
  434. return <a onClick={newDownloadFile.bind(null, text[0], 'ratepay', '/api/admin/downloadRatepay')}>{text[1]}</a>
  435. }
  436. }
  437. ],
  438. dataSource: []
  439. };
  440. },
  441. componentWillMount() {
  442. this.loadData();
  443. },
  444. tableRowClick(record, index) {
  445. this.state.RowData = record;
  446. this.setState({
  447. showDesc: true
  448. });
  449. },
  450. delectRow() {
  451. let deletedIds = [];
  452. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  453. let rowItem = this.state.selectedRows[idx];
  454. if (rowItem.id) {
  455. deletedIds.push(rowItem.id)
  456. }
  457. }
  458. this.setState({
  459. selectedRowKeys: [],
  460. loading: deletedIds.length > 0
  461. });
  462. $.ajax({
  463. method: "POST",
  464. dataType: "json",
  465. crossDomain: false,
  466. url: globalConfig.context + "/api/admin/deleteRatepay",
  467. data: {
  468. ids: deletedIds
  469. }
  470. }).done(function (data) {
  471. if (!data.error.length) {
  472. message.success('删除成功!');
  473. this.setState({
  474. loading: false,
  475. });
  476. } else {
  477. message.warning(data.error[0].message);
  478. };
  479. this.loadData();
  480. }.bind(this));
  481. },
  482. closeDesc(e, s) {
  483. this.state.showDesc = e;
  484. if (s) {
  485. this.loadData();
  486. };
  487. },
  488. search() {
  489. this.loadData();
  490. },
  491. reset() {
  492. this.loadData();
  493. },
  494. render() {
  495. const rowSelection = {
  496. selectedRowKeys: this.state.selectedRowKeys,
  497. onChange: (selectedRowKeys, selectedRows) => {
  498. this.setState({
  499. selectedRows: selectedRows,
  500. selectedRowKeys: selectedRowKeys
  501. });
  502. }
  503. };
  504. const hasSelected = this.state.selectedRowKeys.length > 0;
  505. return (
  506. <div className="user-content" >
  507. <div className="content-title">
  508. <span>企业所得税纳税申信息</span>
  509. <span className="proportion"> 是否已完成:</span>
  510. <Switch
  511. checked={this.state.proportion && this.state.proportion.ratepay == 1 ? true : false}
  512. checkedChildren={'已完成'}
  513. unCheckedChildren={'未完成'}
  514. onChange={(e) => {
  515. e ? this.state.proportion.ratepay = 1 : this.state.proportion.ratepay = 0;
  516. saveProportion(this.state.proportion.id, this.props.data.uid, 'ratepay', this.state.proportion.ratepay);
  517. this.setState({ proportion: this.state.proportion });
  518. }} />
  519. </div>
  520. <div className="user-search">
  521. <p>
  522. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  523. onClick={this.tableRowClick}>添加<Icon type="plus" /></Button>
  524. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  525. disabled={!hasSelected}
  526. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  527. </p>
  528. </div>
  529. <div className="patent-table">
  530. <Spin spinning={this.state.loading}>
  531. <Table columns={this.state.columns}
  532. dataSource={this.state.dataSource}
  533. pagination={this.state.pagination}
  534. rowSelection={rowSelection}
  535. onRowClick={this.tableRowClick} />
  536. </Spin>
  537. </div>
  538. <RatepayDesc
  539. uid={this.props.data.uid}
  540. data={this.state.RowData}
  541. showDesc={this.state.showDesc} closeDesc={this.closeDesc} />
  542. </div >
  543. );
  544. }
  545. });
  546. export default Ratepay;