patentDetails.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. import React,{Component} from "react";
  2. import {Modal, Form, Row, Col, Tabs, Table, Spin, message, Button, Input, Select, DatePicker, Popconfirm} from "antd";
  3. import $ from "jquery/src/ajax";
  4. import moment from 'moment';
  5. import ReminderLog from "../../customer/NEW/crm/reminderLog";
  6. import {getPatentType} from "@/tools.js";
  7. const FormItem = Form.Item;
  8. const formItemLayout = {
  9. labelCol: { span: 10 },
  10. wrapperCol: { span: 14 },
  11. };
  12. class PatentDetails extends Component{
  13. constructor(props) {
  14. super(props);
  15. this.state={
  16. columns:[
  17. {
  18. title: "序号",
  19. dataIndex: "key",
  20. key: "key",
  21. width:'50px'
  22. },
  23. {
  24. title: "费用种类",
  25. dataIndex: "years",
  26. key: "years",
  27. width:'150px',
  28. render:(text)=>(
  29. <span>
  30. {getPatentType(this.props.detailsInfor.type)}
  31. {text}
  32. 年年费
  33. </span>
  34. )
  35. },
  36. {
  37. title: "金额",
  38. dataIndex: "patentAmount",
  39. key: "patentAmount",
  40. width:'100px'
  41. },
  42. {
  43. title: "缴费日",
  44. dataIndex: "endDate",
  45. key: "endDate",
  46. width:'100px',
  47. render:(text)=>(
  48. moment(text).format('YYYY-MM-DD')
  49. )
  50. },
  51. ],
  52. dataSource:[],
  53. loading:false,
  54. detailsInfor:{},
  55. }
  56. this.payLoadData = this.payLoadData.bind(this);
  57. this.onChange = this.onChange.bind(this);
  58. }
  59. componentDidMount() {
  60. this.payLoadData();
  61. const {detailsInfor, readOnly} = this.props;
  62. if (!readOnly) {
  63. this.setState({
  64. patentNo: detailsInfor.patentNo,
  65. email:detailsInfor.email,
  66. name: detailsInfor.name,
  67. applyDates: detailsInfor.applyDates,
  68. authorizationDates: detailsInfor.authorizationDates,
  69. annualFeeStatus: detailsInfor.annualFeeStatus,
  70. delayingAmount: detailsInfor.delayingAmount,
  71. recoveryAmount: detailsInfor.recoveryAmount,
  72. })
  73. }
  74. }
  75. payLoadData() {
  76. this.setState({
  77. loading: true,
  78. });
  79. const {detailsInfor} = this.props;
  80. $.ajax({
  81. method: "get",
  82. dataType: "json",
  83. crossDomain: false,
  84. url: globalConfig.context + "/api/admin/patentNew/patentPaymentDetails",
  85. data: {
  86. id:detailsInfor.id
  87. },
  88. success: function (data) {
  89. if(data.error.length === 0){
  90. for(let i =0;i<data.data.length;i++){
  91. data.data[i].key = i+1;
  92. }
  93. this.setState({
  94. dataSource: data.data,
  95. });
  96. }else{
  97. message.warning(data.error[0].message);
  98. }
  99. }.bind(this),
  100. }).always(
  101. function () {
  102. this.setState({
  103. loading: false,
  104. });
  105. }.bind(this)
  106. );
  107. }
  108. onChange(){
  109. if(!this.state.patentNo){
  110. message.warning('请输入专利号')
  111. return;
  112. }
  113. if(!this.state.name){
  114. message.warning('请输入专利名称')
  115. return;
  116. }
  117. if(!this.state.applyDates){
  118. message.warning('请选择申请日期')
  119. return;
  120. }
  121. if(!this.state.authorizationDates){
  122. message.warning('请选择授权日期')
  123. return;
  124. }
  125. if(!this.state.email){
  126. message.warning('请输入邮箱')
  127. return;
  128. }
  129. if(isNaN(parseInt(this.state.annualFeeStatus))){
  130. message.warning('请选择年费状态')
  131. return;
  132. }
  133. if(isNaN(parseInt(this.state.delayingAmount))){
  134. message.warning('请输入滞纳金')
  135. return;
  136. }
  137. if(isNaN(parseInt(this.state.recoveryAmount))){
  138. message.warning('请输入权利恢复费')
  139. return;
  140. }
  141. this.setState({
  142. loading: true,
  143. });
  144. const {detailsInfor} = this.props;
  145. $.ajax({
  146. method: "POST",
  147. dataType: "json",
  148. crossDomain: false,
  149. url: globalConfig.context + "/api/admin/patentNew/updatePatentNew",
  150. data: {
  151. id:detailsInfor.id,
  152. patentNo: this.state.patentNo,
  153. email: this.state.email,
  154. name: this.state.name,
  155. applyDates: this.state.applyDates,
  156. authorizationDates: this.state.authorizationDates,
  157. annualFeeStatus: this.state.annualFeeStatus,
  158. delayingAmount: this.state.delayingAmount,
  159. recoveryAmount: this.state.recoveryAmount,
  160. },
  161. success: function (data) {
  162. if(data.error.length === 0){
  163. message.success('修改成功');
  164. this.payLoadData();
  165. this.props.onRefresh();
  166. }else{
  167. message.warning(data.error[0].message);
  168. }
  169. }.bind(this),
  170. }).always(
  171. function () {
  172. this.setState({
  173. loading: false,
  174. });
  175. }.bind(this)
  176. );
  177. }
  178. render() {
  179. const {detailsInfor,readOnly} = this.props;
  180. return (
  181. <Modal
  182. title='年费数据'
  183. className='payRecordComponent'
  184. width={800}
  185. maskClosable={false}
  186. footer={null}
  187. visible={this.props.visible}
  188. onCancel={this.props.onCancel}
  189. >
  190. <Form layout="horizontal">
  191. <Row gutter={40}>
  192. <Col span={8}>
  193. <FormItem
  194. {...formItemLayout}
  195. label='专利号'
  196. >
  197. {
  198. readOnly ? detailsInfor.patentNo :
  199. <Input
  200. value={this.state.patentNo}
  201. onChange={(e)=>{
  202. this.setState({
  203. patentNo:e.target.value
  204. })
  205. }}
  206. />
  207. }
  208. </FormItem>
  209. </Col>
  210. <Col span={8}>
  211. <FormItem
  212. {...formItemLayout}
  213. label='专利名称'
  214. >
  215. {
  216. readOnly ? detailsInfor.name :
  217. <Input
  218. value={this.state.name}
  219. onChange={(e)=>{
  220. this.setState({
  221. name:e.target.value
  222. })
  223. }}
  224. />
  225. }
  226. </FormItem>
  227. </Col>
  228. <Col span={8}>
  229. <FormItem
  230. {...formItemLayout}
  231. label='专利类型'
  232. >
  233. {
  234. getPatentType(detailsInfor.type)
  235. }
  236. </FormItem>
  237. </Col>
  238. <Col span={8}>
  239. <FormItem
  240. {...formItemLayout}
  241. label='申请日期'
  242. >
  243. {
  244. readOnly ? detailsInfor.applyDates:
  245. <DatePicker
  246. value={this.state.applyDates ? moment(this.state.applyDates) : ''}
  247. format='YYYY-MM-DD'
  248. onChange={(date)=>{
  249. console.log(date,'date')
  250. this.setState({
  251. applyDates:date ? moment(date).format('YYYY-MM-DD') : '',
  252. })
  253. }}
  254. />
  255. }
  256. </FormItem>
  257. </Col>
  258. <Col span={8}>
  259. <FormItem
  260. {...formItemLayout}
  261. label='授权日期'
  262. >
  263. {
  264. readOnly ? detailsInfor.authorizationDates:
  265. <DatePicker
  266. value={this.state.authorizationDates ? moment(this.state.authorizationDates) : ''}
  267. format='YYYY-MM-DD'
  268. onChange={(date)=>{
  269. console.log(date,'date')
  270. this.setState({
  271. authorizationDates:date ? moment(date).format('YYYY-MM-DD') : '',
  272. })
  273. }}
  274. />
  275. }
  276. </FormItem>
  277. </Col>
  278. <Col span={8}>
  279. <FormItem
  280. {...formItemLayout}
  281. label='Email'
  282. >
  283. {
  284. readOnly ? detailsInfor.email:
  285. <Input
  286. value={this.state.email}
  287. onChange={(e)=>{
  288. this.setState({
  289. email:e.target.value
  290. })
  291. }}
  292. />
  293. }
  294. </FormItem>
  295. </Col>
  296. {readOnly ? <Col span={8}>
  297. <FormItem
  298. {...formItemLayout}
  299. label='年费'
  300. >
  301. {detailsInfor.patentAmount}
  302. </FormItem>
  303. </Col> : null }
  304. <Col span={8}>
  305. <FormItem
  306. {...formItemLayout}
  307. label='滞纳金'
  308. >
  309. {
  310. readOnly ? detailsInfor.delayingAmount :
  311. <Input
  312. style={{paddingTop: '5px'}}
  313. type='number'
  314. value={this.state.delayingAmount}
  315. onChange={(e)=>{
  316. this.setState({
  317. delayingAmount:e.target.value
  318. })
  319. }}
  320. />
  321. }
  322. </FormItem>
  323. </Col>
  324. <Col span={8}>
  325. <FormItem
  326. {...formItemLayout}
  327. label='权利恢复费'
  328. >
  329. {
  330. readOnly ? detailsInfor.recoveryAmount :
  331. <Input
  332. style={{paddingTop: '5px'}}
  333. type='number'
  334. value={this.state.recoveryAmount}
  335. onChange={(e)=>{
  336. this.setState({
  337. recoveryAmount:e.target.value
  338. })
  339. }}
  340. />
  341. }
  342. </FormItem>
  343. </Col>
  344. <Col span={8}>
  345. <FormItem
  346. {...formItemLayout}
  347. label='年费状态'
  348. >
  349. {
  350. readOnly ? (
  351. detailsInfor.annualFeeStatus === 0 ? '待缴费' :
  352. detailsInfor.annualFeeStatus === 1 ? '已缴费' : ''
  353. ) :
  354. <Select style={{paddingTop: '5px'}} value={this.state.annualFeeStatus} onSelect={(e)=>{this.setState({annualFeeStatus:e})}}>
  355. <Select.Option value={0}>待缴费</Select.Option>
  356. <Select.Option value={1}>已缴费</Select.Option>
  357. </Select>
  358. }
  359. </FormItem>
  360. </Col>
  361. <Col span={16}>
  362. <FormItem
  363. labelCol={{span: 5}}
  364. wrapperCol={{span: 19}}
  365. label='通知'
  366. >
  367. <div style={{display:'flex',alignItems:'center'}}>
  368. {
  369. detailsInfor.salesmanRemind === 0 ? '未通知' :
  370. detailsInfor.salesmanRemind === 1 ? '已通知' : ''
  371. }
  372. <Button
  373. onClick={()=>{
  374. this.setState({
  375. visible:true,
  376. id:detailsInfor.id
  377. })
  378. }}
  379. style={{marginLeft:"15px"}}
  380. type='primary'>
  381. 查看专利日志
  382. </Button>
  383. </div>
  384. </FormItem>
  385. </Col>
  386. </Row>
  387. {!readOnly ?
  388. <div style={{
  389. margin:'30px',
  390. display:'flex',
  391. justifyContent:'center'
  392. }}>
  393. <Popconfirm placement="top" title="确定提交吗?" onConfirm={(e)=>{
  394. e.stopPropagation();
  395. this.onChange();
  396. }} okText="确定" cancelText="取消">
  397. <Button
  398. loading={this.state.loading}
  399. size='large'
  400. type="primary"
  401. onClick={(e)=>{
  402. e.stopPropagation();
  403. }}
  404. >
  405. 确定提交
  406. </Button>
  407. </Popconfirm>
  408. </div>
  409. : null}
  410. </Form>
  411. <Spin spinning={this.state.loading}>
  412. <Table
  413. scroll={{ y: 320 }}
  414. columns={this.state.columns}
  415. dataSource={this.state.dataSource}
  416. pagination={false}
  417. bordered
  418. size="small"
  419. />
  420. </Spin>
  421. {this.state.visible ? <ReminderLog
  422. id={this.state.id}
  423. visible={this.state.visible}
  424. cancel={()=>{
  425. this.setState({
  426. visible:false,
  427. id:undefined
  428. })
  429. }}
  430. /> : null}
  431. </Modal>
  432. )
  433. }
  434. }
  435. export default PatentDetails;