patentDetails.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  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: isNaN(parseInt(this.state.annualFeeStatus)) ? undefined : this.state.annualFeeStatus,
  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. <Button
  230. onClick={()=>{
  231. this.setState({
  232. visible:true,
  233. id:detailsInfor.id
  234. })
  235. }}
  236. style={{
  237. position: 'absolute',
  238. top: '9px',
  239. right: '49px',
  240. }}
  241. type='primary'>
  242. 查看专利日志
  243. </Button>
  244. <Form layout="horizontal">
  245. <Row gutter={40}>
  246. <Col span={8}>
  247. <FormItem
  248. required
  249. {...formItemLayout}
  250. label='专利号'
  251. >
  252. {
  253. readOnly ? detailsInfor.patentNo :
  254. <Input
  255. value={this.state.patentNo}
  256. onChange={(e)=>{
  257. this.setState({
  258. patentNo:e.target.value
  259. })
  260. }}
  261. />
  262. }
  263. </FormItem>
  264. </Col>
  265. <Col span={8}>
  266. <FormItem
  267. {...formItemLayout}
  268. label='专利名称'
  269. required
  270. >
  271. {
  272. readOnly ? detailsInfor.name :
  273. <Input
  274. value={this.state.name}
  275. onChange={(e)=>{
  276. this.setState({
  277. name:e.target.value
  278. })
  279. }}
  280. />
  281. }
  282. </FormItem>
  283. </Col>
  284. <Col span={8}>
  285. <FormItem
  286. {...formItemLayout}
  287. label='专利类型'
  288. required
  289. >
  290. {
  291. readOnly ?
  292. getPatentType(detailsInfor.type) :
  293. <Select
  294. placeholder="请选择专利类型"
  295. style={{paddingTop: '5px'}}
  296. value={getPatentType(this.state.type)}
  297. onChange={e => {
  298. this.setState({ type: e });
  299. }}
  300. >
  301. {patentTypeList.map(function(item) {
  302. return (
  303. <Select.Option key={item.value}>
  304. {item.key}
  305. </Select.Option>
  306. );
  307. })}
  308. </Select>
  309. }
  310. </FormItem>
  311. </Col>
  312. <Col span={8}>
  313. <FormItem
  314. {...formItemLayout}
  315. label='项目编号'
  316. required
  317. >
  318. {
  319. readOnly ? detailsInfor.tid :
  320. <Input
  321. value={this.state.tid}
  322. onChange={(e)=>{
  323. this.setState({
  324. tid:e.target.value
  325. })
  326. }}
  327. />
  328. }
  329. </FormItem>
  330. </Col>
  331. <Col span={8}>
  332. <FormItem
  333. {...formItemLayout}
  334. label='申请日期'
  335. required
  336. >
  337. {
  338. readOnly ? detailsInfor.applyDates:
  339. <DatePicker
  340. value={this.state.applyDates ? moment(this.state.applyDates) : ''}
  341. format='YYYY-MM-DD'
  342. onChange={(date)=>{
  343. this.setState({
  344. applyDates:date ? moment(date).format('YYYY-MM-DD') : '',
  345. })
  346. }}
  347. />
  348. }
  349. </FormItem>
  350. </Col>
  351. <Col span={8}>
  352. <FormItem
  353. {...formItemLayout}
  354. label='授权日期'
  355. >
  356. {
  357. readOnly ? detailsInfor.authorizationDates:
  358. <DatePicker
  359. value={this.state.authorizationDates ? moment(this.state.authorizationDates) : ''}
  360. format='YYYY-MM-DD'
  361. onChange={(date)=>{
  362. this.setState({
  363. authorizationDates:date ? moment(date).format('YYYY-MM-DD') : '',
  364. })
  365. }}
  366. />
  367. }
  368. </FormItem>
  369. </Col>
  370. <Col span={8}>
  371. <FormItem
  372. {...formItemLayout}
  373. label='Email'
  374. >
  375. {
  376. readOnly ?
  377. <Tooltip placement="topLeft" title={detailsInfor.email}>
  378. <div style={{
  379. width:'100%',
  380. overflow: 'hidden',
  381. whiteSpace: 'nowrap',
  382. textOverflow: 'ellipsis',
  383. }}>
  384. {detailsInfor.email}
  385. </div>
  386. </Tooltip>:
  387. <Input
  388. value={this.state.email}
  389. onChange={(e)=>{
  390. this.setState({
  391. email:e.target.value
  392. })
  393. }}
  394. />
  395. }
  396. </FormItem>
  397. </Col>
  398. <Col span={8}>
  399. <FormItem
  400. {...formItemLayout}
  401. label='滞纳金'
  402. >
  403. {
  404. readOnly ? detailsInfor.delayingAmount :
  405. <Input
  406. style={{paddingTop: '5px'}}
  407. type='number'
  408. value={this.state.delayingAmount}
  409. onChange={(e)=>{
  410. this.setState({
  411. delayingAmount:e.target.value
  412. })
  413. }}
  414. />
  415. }
  416. </FormItem>
  417. </Col>
  418. <Col span={8}>
  419. <FormItem
  420. {...formItemLayout}
  421. label='权利恢复费'
  422. >
  423. {
  424. readOnly ? detailsInfor.recoveryAmount :
  425. <Input
  426. style={{paddingTop: '5px'}}
  427. type='number'
  428. value={this.state.recoveryAmount}
  429. onChange={(e)=>{
  430. this.setState({
  431. recoveryAmount:e.target.value
  432. })
  433. }}
  434. />
  435. }
  436. </FormItem>
  437. </Col>
  438. <Col span={8}>
  439. <FormItem
  440. {...formItemLayout}
  441. label='年费状态'
  442. >
  443. {
  444. readOnly ? (
  445. detailsInfor.annualFeeStatus === 0 ? '待缴费' :
  446. detailsInfor.annualFeeStatus === 1 ? '已缴费' : ''
  447. ) :
  448. <Select style={{paddingTop: '5px'}} value={this.state.annualFeeStatus} onSelect={(e)=>{this.setState({annualFeeStatus:e})}}>
  449. <Select.Option value={0}>待缴费</Select.Option>
  450. <Select.Option value={1}>已缴费</Select.Option>
  451. </Select>
  452. }
  453. </FormItem>
  454. </Col>
  455. <Col span={8}>
  456. <FormItem
  457. {...formItemLayout}
  458. label='权利人'
  459. >
  460. {
  461. readOnly ? <Tooltip title={detailsInfor.holders}>
  462. <div style={{
  463. maxWidth:'120px',
  464. overflow:'hidden',
  465. textOverflow: "ellipsis",
  466. whiteSpace:'nowrap',
  467. }}>{detailsInfor.holders}</div>
  468. </Tooltip> :
  469. <Input
  470. value={this.state.holders}
  471. onChange={(e)=>{
  472. this.setState({
  473. holders:e.target.value
  474. })
  475. }}
  476. />
  477. }
  478. </FormItem>
  479. </Col>
  480. <Col span={8}>
  481. <FormItem
  482. {...formItemLayout}
  483. label='发明人'
  484. >
  485. {
  486. readOnly ? <Tooltip title={detailsInfor.inventor}>
  487. <div style={{
  488. maxWidth:'120px',
  489. overflow:'hidden',
  490. textOverflow: "ellipsis",
  491. whiteSpace:'nowrap',
  492. }}>{detailsInfor.inventor}</div>
  493. </Tooltip> :
  494. <Input
  495. value={this.state.inventor}
  496. onChange={(e)=>{
  497. this.setState({
  498. inventor:e.target.value
  499. })
  500. }}
  501. />
  502. }
  503. </FormItem>
  504. </Col>
  505. <Col span={8}>
  506. <FormItem
  507. {...formItemLayout}
  508. label='年费'
  509. >
  510. {detailsInfor.patentAmount}
  511. </FormItem>
  512. </Col>
  513. <Col span={8}>
  514. <FormItem
  515. {...formItemLayout}
  516. label='费减状态'
  517. >
  518. {detailsInfor.tid ? (detailsInfor.costReduction === 1 ? '有费减' : detailsInfor.costReduction === 0 ? '无费减' : '') : '无'}
  519. </FormItem>
  520. </Col>
  521. <Col span={8}>
  522. <FormItem
  523. {...formItemLayout}
  524. label='通知'
  525. >
  526. <div style={{display:'flex',alignItems:'center'}}>
  527. {
  528. detailsInfor.salesmanRemind === 0 ? '未通知' :
  529. detailsInfor.salesmanRemind === 1 ? '已通知' : ''
  530. }
  531. </div>
  532. </FormItem>
  533. </Col>
  534. </Row>
  535. {!readOnly ?
  536. <div style={{
  537. margin:'30px',
  538. display:'flex',
  539. justifyContent:'center'
  540. }}>
  541. <Popconfirm placement="top" title="确定提交吗?" onConfirm={(e)=>{
  542. e.stopPropagation();
  543. this.onChange();
  544. }} okText="确定" cancelText="取消">
  545. <Button
  546. loading={this.state.loading}
  547. size='large'
  548. type="primary"
  549. onClick={(e)=>{
  550. e.stopPropagation();
  551. }}
  552. >
  553. 确定提交
  554. </Button>
  555. </Popconfirm>
  556. </div>
  557. : null}
  558. </Form>
  559. <Spin spinning={this.state.loading}>
  560. <Table
  561. scroll={{ y: 320 }}
  562. columns={this.state.columns}
  563. dataSource={this.state.dataSource}
  564. pagination={false}
  565. bordered
  566. size="small"
  567. />
  568. </Spin>
  569. {this.state.visible ? <ReminderLog
  570. id={this.state.id}
  571. visible={this.state.visible}
  572. cancel={()=>{
  573. this.setState({
  574. visible:false,
  575. id:undefined
  576. })
  577. }}
  578. /> : null}
  579. </Modal>
  580. )
  581. }
  582. }
  583. export default PatentDetails;