patentDetails.jsx 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. import React,{Component} from "react";
  2. import {Modal, Form, Row, Col, Tabs, Table, Spin, message} from "antd";
  3. import $ from "jquery/src/ajax";
  4. const FormItem = Form.Item;
  5. const TabPane = Tabs.TabPane;
  6. const formItemLayout = {
  7. labelCol: { span: 10 },
  8. wrapperCol: { span: 14 },
  9. };
  10. class PatentDetails extends Component{
  11. constructor(props) {
  12. super(props);
  13. this.state={
  14. payDataSource :[],
  15. payColumns:[
  16. {
  17. title: "序号",
  18. dataIndex: "companyName",
  19. key: "companyName",
  20. },
  21. {
  22. title: "费用种类",
  23. dataIndex: "companyName",
  24. key: "companyName",
  25. },
  26. {
  27. title: "金额",
  28. dataIndex: "companyName",
  29. key: "companyName",
  30. },
  31. {
  32. title: "缴费日",
  33. dataIndex: "companyName",
  34. key: "companyName",
  35. },
  36. ],
  37. unPayDataSource:[],
  38. unPayColumns:[
  39. {
  40. title: "序号",
  41. dataIndex: "companyName",
  42. key: "companyName",
  43. },
  44. {
  45. title: "费用种类",
  46. dataIndex: "companyName",
  47. key: "companyName",
  48. },
  49. {
  50. title: "金额",
  51. dataIndex: "companyName",
  52. key: "companyName",
  53. },
  54. {
  55. title: "缴费日",
  56. dataIndex: "companyName",
  57. key: "companyName",
  58. },
  59. ],
  60. unPayLoading:false,
  61. payLoading:false,
  62. }
  63. this.payLoadData = this.payLoadData.bind(this);
  64. this.unPayLoadData = this.unPayLoadData.bind(this);
  65. }
  66. componentDidMount() {
  67. this.payLoadData();
  68. this.unPayLoadData();
  69. }
  70. payLoadData() {
  71. this.setState({
  72. payLoading: true,
  73. });
  74. $.ajax({
  75. method: "get",
  76. dataType: "json",
  77. crossDomain: false,
  78. url: globalConfig.context + "/api/admin/company/selectPaymentList",
  79. data: {},
  80. success: function (data) {
  81. if(data.error.length === 0){
  82. this.setState({
  83. payDataSource: [],
  84. });
  85. }else{
  86. message.warning(data.error[0].message);
  87. }
  88. }.bind(this),
  89. }).always(
  90. function () {
  91. this.setState({
  92. payLoading: false,
  93. });
  94. }.bind(this)
  95. );
  96. }
  97. unPayLoadData() {
  98. this.setState({
  99. unPayLoading: true,
  100. });
  101. $.ajax({
  102. method: "get",
  103. dataType: "json",
  104. crossDomain: false,
  105. url: globalConfig.context + "/api/admin/company/selectPaymentList",
  106. data: {},
  107. success: function (data) {
  108. if(data.error.length === 0){
  109. this.setState({
  110. unPayDataSource: [],
  111. });
  112. }else{
  113. message.warning(data.error[0].message);
  114. }
  115. }.bind(this),
  116. }).always(
  117. function () {
  118. this.setState({
  119. unPayLoading: false,
  120. });
  121. }.bind(this)
  122. );
  123. }
  124. render() {
  125. return (
  126. <Modal
  127. title='年费数据'
  128. className='payRecordComponent'
  129. width={800}
  130. maskClosable={false}
  131. footer={null}
  132. visible={this.props.visible}
  133. onCancel={this.props.onCancel}
  134. >
  135. <Form layout="horizontal">
  136. <Row gutter={40}>
  137. <Col span={12}>
  138. <FormItem
  139. {...formItemLayout}
  140. label='申请日'
  141. >
  142. 2020-06-19
  143. </FormItem>
  144. </Col>
  145. <Col span={12}>
  146. <FormItem
  147. {...formItemLayout}
  148. label='上回缴费年度'
  149. >
  150. 发明专利第2年年费,2021-03-30
  151. </FormItem>
  152. </Col>
  153. <Col span={12}>
  154. <FormItem
  155. {...formItemLayout}
  156. label='状态'
  157. >
  158. 待缴
  159. </FormItem>
  160. </Col>
  161. <Col span={12}>
  162. <FormItem
  163. {...formItemLayout}
  164. label='滞纳金'
  165. >
  166. 0
  167. </FormItem>
  168. </Col>
  169. <Col span={12}>
  170. <FormItem
  171. {...formItemLayout}
  172. label='权利恢复费'
  173. >
  174. 0
  175. </FormItem>
  176. </Col>
  177. <Col span={12}>
  178. <FormItem
  179. {...formItemLayout}
  180. label='截止日'
  181. >
  182. 2022-07-19
  183. </FormItem>
  184. </Col>
  185. <Col span={12}>
  186. <FormItem
  187. {...formItemLayout}
  188. label='年费'
  189. >
  190. 900.00
  191. </FormItem>
  192. </Col>
  193. </Row>
  194. </Form>
  195. <Tabs defaultActiveKey="1">
  196. <TabPane tab="应缴费信息" key="1">
  197. <Spin spinning={this.state.unPayLoading}>
  198. <Table
  199. columns={this.state.unPayColumns}
  200. dataSource={this.state.unPayDataSource}
  201. pagination={false}
  202. bordered
  203. size="small"
  204. />
  205. </Spin>
  206. </TabPane>
  207. <TabPane tab="已缴费信息" key="2">
  208. <Spin spinning={this.state.payLoading}>
  209. <Table
  210. columns={this.state.payColumns}
  211. dataSource={this.state.payDataSource}
  212. pagination={false}
  213. bordered
  214. size="small"
  215. />
  216. </Spin>
  217. </TabPane>
  218. </Tabs>
  219. </Modal>
  220. )
  221. }
  222. }
  223. export default PatentDetails;