patentDetails.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  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.applyDates) {
  141. message.warning('请选择申请日期')
  142. return;
  143. }
  144. if (!isNaN(parseInt(this.state.delayingAmount)) && this.state.delayingAmount < 0) {
  145. message.warning('滞纳金不能小于零')
  146. return;
  147. }
  148. if (!isNaN(parseInt(this.state.recoveryAmount)) && this.state.recoveryAmount < 0) {
  149. message.warning('权利恢复费不能小于零')
  150. return;
  151. }
  152. this.setState({
  153. loading: true,
  154. });
  155. const { detailsInfor } = this.props;
  156. $.ajax({
  157. method: "POST",
  158. dataType: "json",
  159. crossDomain: false,
  160. url: globalConfig.context + "/api/admin/patentNew/updatePatentNew",
  161. data: {
  162. id: detailsInfor.id,
  163. patentNo: this.state.patentNo,
  164. name: this.state.name,
  165. type: this.state.type,
  166. applyDates: this.state.applyDates,
  167. tid: this.state.tid || undefined,
  168. email: this.state.email || undefined,
  169. holders: this.state.holders || undefined,
  170. inventor: this.state.inventor || undefined,
  171. authorizationDates: this.state.authorizationDates || undefined,
  172. annualFeeStatus: isNaN(parseInt(this.state.annualFeeStatus)) ? undefined : this.state.annualFeeStatus,
  173. delayingAmount: isNaN(parseInt(this.state.delayingAmount)) ? undefined : this.state.delayingAmount,
  174. recoveryAmount: isNaN(parseInt(this.state.recoveryAmount)) ? undefined : this.state.recoveryAmount,
  175. },
  176. success: function (data) {
  177. if (data.error.length === 0) {
  178. message.success('修改成功');
  179. this.props.onRefresh();
  180. this.props.onCancel();
  181. } else {
  182. message.warning(data.error[0].message);
  183. }
  184. }.bind(this),
  185. }).always(
  186. function () {
  187. this.setState({
  188. loading: false,
  189. });
  190. }.bind(this)
  191. );
  192. }
  193. render() {
  194. const { detailsInfor, readOnly } = this.props;
  195. return (
  196. <Modal
  197. title='年费数据'
  198. className='payRecordComponent'
  199. width={800}
  200. maskClosable={false}
  201. footer={null}
  202. visible={this.props.visible}
  203. onCancel={this.props.onCancel}
  204. >
  205. <Button
  206. onClick={() => {
  207. this.setState({
  208. visible: true,
  209. id: detailsInfor.id
  210. })
  211. }}
  212. style={{
  213. position: 'absolute',
  214. top: '9px',
  215. right: '49px',
  216. }}
  217. type='primary'>
  218. 查看专利日志
  219. </Button>
  220. <Form layout="horizontal">
  221. <Row gutter={40}>
  222. <Col span={8}>
  223. <FormItem
  224. required
  225. {...formItemLayout}
  226. label='专利号'
  227. >
  228. {
  229. readOnly ? detailsInfor.patentNo :
  230. <Input
  231. value={this.state.patentNo}
  232. onChange={(e) => {
  233. this.setState({
  234. patentNo: e.target.value
  235. })
  236. }}
  237. />
  238. }
  239. </FormItem>
  240. </Col>
  241. <Col span={8}>
  242. <FormItem
  243. {...formItemLayout}
  244. label='专利名称'
  245. required
  246. >
  247. {
  248. readOnly ? detailsInfor.name :
  249. <Input
  250. value={this.state.name}
  251. onChange={(e) => {
  252. this.setState({
  253. name: e.target.value
  254. })
  255. }}
  256. />
  257. }
  258. </FormItem>
  259. </Col>
  260. <Col span={8}>
  261. <FormItem
  262. {...formItemLayout}
  263. label='专利类型'
  264. required
  265. >
  266. {
  267. readOnly ?
  268. getPatentType(detailsInfor.type) :
  269. <Select
  270. placeholder="请选择专利类型"
  271. style={{ paddingTop: '5px' }}
  272. value={getPatentType(this.state.type)}
  273. onChange={e => {
  274. this.setState({ type: e });
  275. }}
  276. >
  277. {patentTypeList.map(function (item) {
  278. return (
  279. <Select.Option key={item.value}>
  280. {item.key}
  281. </Select.Option>
  282. );
  283. })}
  284. </Select>
  285. }
  286. </FormItem>
  287. </Col>
  288. <Col span={8}>
  289. <FormItem
  290. {...formItemLayout}
  291. label='申请日期'
  292. required
  293. >
  294. {
  295. readOnly ? detailsInfor.applyDates :
  296. <DatePicker
  297. value={this.state.applyDates ? moment(this.state.applyDates) : ''}
  298. format='YYYY-MM-DD'
  299. onChange={(date) => {
  300. this.setState({
  301. applyDates: date ? moment(date).format('YYYY-MM-DD') : '',
  302. })
  303. }}
  304. />
  305. }
  306. </FormItem>
  307. </Col>
  308. <Col span={8}>
  309. <FormItem
  310. {...formItemLayout}
  311. label='项目编号'
  312. >
  313. {
  314. readOnly ? detailsInfor.tid :
  315. <Input
  316. value={this.state.tid}
  317. onChange={(e) => {
  318. this.setState({
  319. tid: e.target.value
  320. })
  321. }}
  322. />
  323. }
  324. </FormItem>
  325. </Col>
  326. <Col span={8}>
  327. <FormItem
  328. {...formItemLayout}
  329. label='授权日期'
  330. >
  331. {
  332. readOnly ? detailsInfor.authorizationDates :
  333. <DatePicker
  334. value={this.state.authorizationDates ? moment(this.state.authorizationDates) : ''}
  335. format='YYYY-MM-DD'
  336. onChange={(date) => {
  337. this.setState({
  338. authorizationDates: date ? moment(date).format('YYYY-MM-DD') : '',
  339. })
  340. }}
  341. />
  342. }
  343. </FormItem>
  344. </Col>
  345. <Col span={8}>
  346. <FormItem
  347. {...formItemLayout}
  348. label='Email'
  349. >
  350. {
  351. readOnly ?
  352. <Tooltip
  353. placement="topLeft"
  354. title={<div style={{ wordBreak: "break-all" }}>{detailsInfor.email}</div>}
  355. >
  356. <div style={{
  357. width: '100%',
  358. overflow: 'hidden',
  359. whiteSpace: 'nowrap',
  360. textOverflow: 'ellipsis',
  361. }}>
  362. {detailsInfor.email}
  363. </div>
  364. </Tooltip>
  365. :
  366. <Input
  367. value={this.state.email}
  368. onChange={(e) => {
  369. this.setState({
  370. email: e.target.value
  371. })
  372. }}
  373. />
  374. }
  375. </FormItem>
  376. </Col>
  377. <Col span={8}>
  378. <FormItem
  379. {...formItemLayout}
  380. label='滞纳金'
  381. >
  382. {
  383. readOnly ? detailsInfor.delayingAmount :
  384. <Input
  385. style={{ paddingTop: '5px' }}
  386. type='number'
  387. value={this.state.delayingAmount}
  388. onChange={(e) => {
  389. this.setState({
  390. delayingAmount: e.target.value
  391. })
  392. }}
  393. />
  394. }
  395. </FormItem>
  396. </Col>
  397. <Col span={8}>
  398. <FormItem
  399. {...formItemLayout}
  400. label='权利恢复费'
  401. >
  402. {
  403. readOnly ? detailsInfor.recoveryAmount :
  404. <Input
  405. style={{ paddingTop: '5px' }}
  406. type='number'
  407. value={this.state.recoveryAmount}
  408. onChange={(e) => {
  409. this.setState({
  410. recoveryAmount: e.target.value
  411. })
  412. }}
  413. />
  414. }
  415. </FormItem>
  416. </Col>
  417. <Col span={8}>
  418. <FormItem
  419. {...formItemLayout}
  420. label='年费状态'
  421. >
  422. {
  423. readOnly ? (
  424. detailsInfor.annualFeeStatus === 0 ? '待缴费' :
  425. detailsInfor.annualFeeStatus === 1 ? '已缴费' : ''
  426. ) :
  427. <Select style={{ paddingTop: '5px' }} value={this.state.annualFeeStatus} onSelect={(e) => { this.setState({ annualFeeStatus: e }) }}>
  428. <Select.Option value={0}>待缴费</Select.Option>
  429. <Select.Option value={1}>已缴费</Select.Option>
  430. </Select>
  431. }
  432. </FormItem>
  433. </Col>
  434. <Col span={8}>
  435. <FormItem
  436. {...formItemLayout}
  437. label='权利人'
  438. >
  439. {
  440. readOnly ? <Tooltip title={detailsInfor.holders}>
  441. <div style={{
  442. maxWidth: '120px',
  443. overflow: 'hidden',
  444. textOverflow: "ellipsis",
  445. whiteSpace: 'nowrap',
  446. }}>{detailsInfor.holders}</div>
  447. </Tooltip> :
  448. <Input
  449. value={this.state.holders}
  450. onChange={(e) => {
  451. this.setState({
  452. holders: e.target.value
  453. })
  454. }}
  455. />
  456. }
  457. </FormItem>
  458. </Col>
  459. <Col span={8}>
  460. <FormItem
  461. {...formItemLayout}
  462. label='发明人'
  463. >
  464. {
  465. readOnly ? <Tooltip title={detailsInfor.inventor}>
  466. <div style={{
  467. maxWidth: '120px',
  468. overflow: 'hidden',
  469. textOverflow: "ellipsis",
  470. whiteSpace: 'nowrap',
  471. }}>{detailsInfor.inventor}</div>
  472. </Tooltip> :
  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. {detailsInfor.patentAmount}
  490. </FormItem>
  491. </Col>
  492. <Col span={8}>
  493. <FormItem
  494. {...formItemLayout}
  495. label='费减状态'
  496. >
  497. {detailsInfor.tid ? (detailsInfor.costReduction === 1 ? '有费减' : detailsInfor.costReduction === 0 ? '无费减' : '') : '无'}
  498. </FormItem>
  499. </Col>
  500. <Col span={8}>
  501. <FormItem
  502. {...formItemLayout}
  503. label='通知'
  504. >
  505. <div style={{ display: 'flex', alignItems: 'center' }}>
  506. {
  507. detailsInfor.salesmanRemind === 0 ? '未通知' :
  508. detailsInfor.salesmanRemind === 1 ? '已通知' : ''
  509. }
  510. </div>
  511. </FormItem>
  512. </Col>
  513. </Row>
  514. {!readOnly ?
  515. <div style={{
  516. margin: '30px',
  517. display: 'flex',
  518. justifyContent: 'center'
  519. }}>
  520. <Popconfirm placement="top" title="确定提交吗?" onConfirm={(e) => {
  521. e.stopPropagation();
  522. this.onChange();
  523. }} okText="确定" cancelText="取消">
  524. <Button
  525. loading={this.state.loading}
  526. size='large'
  527. type="primary"
  528. onClick={(e) => {
  529. e.stopPropagation();
  530. }}
  531. >
  532. 确定提交
  533. </Button>
  534. </Popconfirm>
  535. </div>
  536. : null}
  537. </Form>
  538. <Spin spinning={this.state.loading}>
  539. <Table
  540. scroll={{ y: 320 }}
  541. columns={this.state.columns}
  542. dataSource={this.state.dataSource}
  543. pagination={false}
  544. bordered
  545. size="small"
  546. />
  547. </Spin>
  548. {
  549. this.state.visible ? <ReminderLog
  550. id={this.state.id}
  551. visible={this.state.visible}
  552. cancel={() => {
  553. this.setState({
  554. visible: false,
  555. id: undefined
  556. })
  557. }}
  558. /> : null
  559. }
  560. </Modal >
  561. )
  562. }
  563. }
  564. export default PatentDetails;