patentDetails.jsx 23 KB

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