comPatentChange.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Input, Select, DatePicker, Button, Row, Col, Table, Form, Upload } from 'antd';
  3. import './comprehensive.less';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import moment from 'moment';
  7. import { copyrightStateList } from '../../../dataDic.js';
  8. import { companySearch, getCopyrightState, getTime, copyrightDownloadFile, beforeUploadFile, getInUrgentTime, getPreview } from '../../../tools.js';
  9. const CopyrightDescForm = Form.create()(React.createClass({
  10. getInitialState() {
  11. return {
  12. visible: false,
  13. loading: false,
  14. stateOption: [],
  15. stateTable: [],
  16. contactsOption: [],
  17. stateColumns: [{
  18. title: '申请状态',
  19. dataIndex: 'status',
  20. key: 'status',
  21. render: (text) => { return getCopyrightState(text) }
  22. }, {
  23. title: '处理时间',
  24. dataIndex: 'recordTimeFormattedDate',
  25. key: 'recordTimeFormattedDate',
  26. }, {
  27. title: '负责人',
  28. dataIndex: 'principal',
  29. key: 'principal',
  30. }, {
  31. title: '操作人',
  32. dataIndex: 'operator',
  33. key: 'operator',
  34. }, {
  35. title: '备注',
  36. dataIndex: 'comment',
  37. key: 'comment',
  38. }]
  39. };
  40. },
  41. componentWillMount() {
  42. this.loadData();
  43. },
  44. loadData(uid, id) {
  45. this.setState({
  46. loading: true
  47. });
  48. $.when($.ajax({
  49. method: "get",
  50. dataType: "json",
  51. crossDomain: false,
  52. cache: false,
  53. url: globalConfig.context + "/api/admin/copyright/logs",
  54. data: {
  55. id: id || this.props.data.id
  56. }
  57. }), $.ajax({
  58. method: "get",
  59. dataType: "json",
  60. crossDomain: false,
  61. cache: false,
  62. url: globalConfig.context + "/api/admin/getContacts",
  63. data: {
  64. uid: uid || this.props.data.uid
  65. }
  66. }), $.ajax({
  67. method: "get",
  68. dataType: "json",
  69. crossDomain: false,
  70. cache: false,
  71. url: globalConfig.context + "/api/admin/copyright/detail",
  72. data: {
  73. id: id || this.props.data.id
  74. }
  75. })).done((data1, data2, data3) => {
  76. let _me = this;
  77. //状态流转table
  78. this.state.stateTable = [];
  79. if (data1[0].error && data1[0].error.length) {
  80. message.warning(data1[0].error[0].message);
  81. } else {
  82. data1[0].data.map(function (item, i) {
  83. _me.state.stateTable.push({
  84. key: i,
  85. recordTimeFormattedDate: item.recordTimeFormattedDate,
  86. status: item.status,
  87. principal: item.principal,
  88. operator: item.operator,
  89. comment: item.comment
  90. });
  91. });
  92. };
  93. //获取联系人
  94. this.state.contactsOption = [];
  95. if (data2[0].error && data2[0].error.length) {
  96. message.warning(data2[0].error[0].message);
  97. } else {
  98. for (let item in data2[0].data) {
  99. let theData = data2[0].data[item];
  100. _me.state.contactsOption.push(
  101. <Select.Option value={item} key={theData}>{theData}</Select.Option>
  102. );
  103. };
  104. };
  105. //获取详细数据
  106. if (!data3[0].data && data3[0].error && data3[0].error.length) {
  107. message.warning(data3[0].error[0].message);
  108. } else if (data3[0].data) {
  109. let detailData = data3[0].data;
  110. this.setState({
  111. id: detailData.id,
  112. province: detailData.province,
  113. postalAddress: detailData.postalAddress,
  114. unitName: detailData.unitName,
  115. serialNumber: detailData.serialNumber,
  116. createTime: detailData.createTime,
  117. acceptTime: detailData.acceptTime,
  118. principal: detailData.principal,
  119. contact: detailData.contact,
  120. copyrightName: detailData.copyrightName,
  121. copyrightNumber: detailData.copyrightNumber,
  122. status: detailData.status,
  123. comment: detailData.comment,
  124. workIssue: detailData.workIssue,
  125. outsource: detailData.outsource,
  126. inUrgent: detailData.inUrgent,
  127. authorizedDate: detailData.authorizedDate,
  128. fisrtContact: detailData.fisrtContact,
  129. secondContact: detailData.secondContact,
  130. thirdContact: detailData.thirdContact,
  131. city: detailData.city,
  132. area: detailData.area,
  133. postcode: detailData.postcode,
  134. certificateUrl: detailData.certificateUrl,
  135. applicationUrl: detailData.applicationUrl,
  136. certificateUrlDownloadFileName: detailData.certificateUrlDownloadFileName,
  137. applicationUrlDownloadFileName: detailData.applicationUrlDownloadFileName,
  138. authorizedDateFormattedDate: detailData.authorizedDateFormattedDate,
  139. createTimeFormattedDate: detailData.createTimeFormattedDate,
  140. acceptTimeFormattedDate: detailData.acceptTimeFormattedDate,
  141. expectTime: [detailData.acceptTime, detailData.inUrgent]
  142. });
  143. };
  144. }).always(function () {
  145. this.setState({
  146. loading: false
  147. });
  148. }.bind(this));
  149. },
  150. componentWillReceiveProps(nextProps) {
  151. if (!this.props.visible && nextProps.visible) {
  152. this.loadData(nextProps.data.uid, nextProps.data.id);
  153. this.state.fileList_copyright_apply = [];
  154. this.state.fileList_copyright_auth = [];
  155. };
  156. },
  157. handleSubmit(e) {
  158. e.preventDefault();
  159. this.props.form.validateFields((err, values) => {
  160. if (values.status || values.principal || values.recordTime || values.comment) {
  161. if (!values.status || !values.principal || !values.recordTime) {
  162. message.warning("请填写完整的状态流转信息!");
  163. return;
  164. };
  165. };
  166. if (!err) {
  167. this.props.spinState(true);
  168. $.ajax({
  169. method: "POST",
  170. dataType: "json",
  171. crossDomain: false,
  172. url: globalConfig.context + "/api/admin/copyright/modify",
  173. data: {
  174. "id": this.props.data.id,
  175. "contact": values.contact, // 联系人, 1,2,3
  176. //"copyrightInfo": values.copyrightInfo, // 软著简介,size 0-255
  177. "copyrightName": values.copyrightName, // 软著名称, size 0-60
  178. "copyrightNumber": values.copyrightNumber,
  179. "outsource": values.outsource, // 外包公司, size 0-60
  180. //"workIssue": values.workIssue, // 派单信息, size 0-128
  181. "inUrgent": values.inUrgent, // 加急天数,
  182. "status": values.status, // 状态
  183. "comment": values.comment, // 备注 size 0-128
  184. "recordTime": values.recordTime ? values.recordTime.format("YYYY-MM-DD HH:mm:ss") : undefined, // 状态修改时间 yyyy-MM-dd HH:mm:ss
  185. "principal": values.principal // 负责人id
  186. }
  187. }).done(function (data) {
  188. if (!data.error.length) {
  189. message.success('保存成功!');
  190. this.props.clickOk();
  191. this.props.form.resetFields();
  192. this.props.spinState(false);
  193. } else {
  194. message.warning(data.error[0].message);
  195. this.props.spinState(false);
  196. }
  197. }.bind(this));
  198. }
  199. });
  200. },
  201. render() {
  202. const FormItem = Form.Item;
  203. const { getFieldDecorator } = this.props.form;
  204. const theData = this.state;
  205. const formItemLayout = {
  206. labelCol: { span: 8 },
  207. wrapperCol: { span: 16 },
  208. };
  209. const _me = this;
  210. return (
  211. <Form onSubmit={this.handleSubmit} id="CopyrightDesc-form">
  212. <div className="clearfix">
  213. <FormItem className="half-item"
  214. {...formItemLayout}
  215. label="公司名称" >
  216. <span>{theData.unitName}</span>
  217. </FormItem>
  218. <FormItem className="half-item"
  219. {...formItemLayout}
  220. label="组织机构代码" >
  221. <span>{theData.unitNumber}</span>
  222. </FormItem>
  223. </div>
  224. <div className="clearfix">
  225. <FormItem className="half-item"
  226. {...formItemLayout}
  227. label="公司地址" >
  228. <span>{theData.postalAddress}</span>
  229. </FormItem>
  230. <FormItem className="half-item"
  231. {...formItemLayout}
  232. label="联系人" >
  233. {getFieldDecorator('contact', {
  234. rules: [{ required: true, message: '此项为必填项!' }],
  235. initialValue: theData.contact
  236. })(
  237. <Select
  238. style={{ display: 'inline-block', width: '200px' }}
  239. placeholder='选择一个联系人'>
  240. {this.state.contactsOption}
  241. </Select>
  242. )}
  243. </FormItem>
  244. </div>
  245. <p>状态流转记录: </p>
  246. <Table style={{ margin: '10px 0', background: "#eee" }}
  247. pagination={false}
  248. dataSource={this.state.stateTable}
  249. columns={this.state.stateColumns} />
  250. <div className="clearfix" style={{ paddingLeft: '4px', paddingTop: '20px', marginBottom: '10px', background: '#eee' }}>
  251. <FormItem className="half-item"
  252. {...formItemLayout}
  253. label="状态流转" >
  254. {getFieldDecorator('status')(
  255. <Select
  256. style={{ width: 200 }}
  257. placeholder="选择一个状态">
  258. {this.props.statusOption}
  259. </Select>
  260. )}
  261. </FormItem>
  262. <FormItem className="half-item"
  263. {...formItemLayout}
  264. label="处理时间"
  265. >
  266. {getFieldDecorator('recordTime')(
  267. <DatePicker />
  268. )}
  269. </FormItem>
  270. <FormItem className="half-item"
  271. {...formItemLayout}
  272. label="负责人"
  273. >
  274. {getFieldDecorator('principal')(
  275. <Select
  276. showSearch
  277. filterOption={companySearch}
  278. placeholder="选择负责人">
  279. {this.props.authorOption}
  280. </Select>
  281. )}
  282. </FormItem>
  283. <FormItem className="half-item"
  284. {...formItemLayout}
  285. label="备注">
  286. {getFieldDecorator('comment')(
  287. <Input />
  288. )}
  289. </FormItem>
  290. </div>
  291. <Row className="express-desc-row">
  292. <Col span={4}>编号</Col>
  293. <Col span={8}>{theData.serialNumber}</Col>
  294. <Col span={4}>外包公司</Col>
  295. <Col span={8}>
  296. {getFieldDecorator('outsource', {
  297. initialValue: theData.outsource
  298. })(
  299. <Input placeholder="请输入外包公司" />
  300. )}
  301. </Col>
  302. </Row>
  303. <Row className="express-desc-row">
  304. <Col span={4}>软著名称</Col>
  305. <Col span={8}>
  306. {getFieldDecorator('copyrightName', {
  307. initialValue: theData.copyrightName
  308. })(
  309. <Input style={{ width: 160 }} placeholder="请输入软著名称" />
  310. )}
  311. </Col>
  312. <Col span={4}>软著编号</Col>
  313. <Col span={8}>
  314. {getFieldDecorator('copyrightNumber', {
  315. initialValue: theData.copyrightNumber
  316. })(
  317. <Input placeholder="请输入软著编号" />
  318. )}
  319. </Col>
  320. </Row>
  321. <Row className="express-desc-row">
  322. <Col span={4}>加急天数</Col>
  323. <Col span={8}>
  324. {getFieldDecorator('inUrgent', {
  325. initialValue: theData.inUrgent ? String(theData.inUrgent) : '0'
  326. })(
  327. <Select
  328. placeholder="请选择加急时间"
  329. style={{ width: 160 }}>
  330. <Select.Option value="0">不加急(45个工作日)</Select.Option>
  331. <Select.Option value="3">3个工作日</Select.Option>
  332. <Select.Option value="5">5个工作日</Select.Option>
  333. <Select.Option value="10">6-10个工作日</Select.Option>
  334. <Select.Option value="15">11-15个工作日</Select.Option>
  335. <Select.Option value="20">16-20个工作日</Select.Option>
  336. <Select.Option value="25">21-25个工作日</Select.Option>
  337. <Select.Option value="30">26-30个工作日</Select.Option>
  338. <Select.Option value="35">31-35个工作日</Select.Option>
  339. </Select>
  340. )}
  341. </Col>
  342. </Row>
  343. {theData.authorizedDateFormattedDate ? <Row className="express-desc-row">
  344. <Col span={4}>下证时间</Col>
  345. <Col span={6}>{theData.authorizedDateFormattedDate}</Col>
  346. </Row> :
  347. <Row className="express-desc-row">
  348. <Col span={4}>下证时间(预计)</Col>
  349. <Col span={6}>
  350. {(() => {
  351. if (theData.expectTime && theData.expectTime[0]) {
  352. if (theData.expectTime[1]) {
  353. return getTime(getInUrgentTime(moment(theData.expectTime[0]), theData.expectTime[1]))
  354. } else {
  355. return getTime(getInUrgentTime(moment(theData.expectTime[0]), 45))
  356. };
  357. };
  358. })()}
  359. </Col>
  360. </Row>}
  361. <div className="hrSituation-roster">
  362. <Upload
  363. name="copyright_apply"
  364. action={globalConfig.context + "/api/admin/copyright/upload"}
  365. data={{ 'sign': 'copyright_apply', id: this.props.data.id }}
  366. beforeUpload={beforeUploadFile}
  367. fileList={this.state.fileList_copyright_apply}
  368. onChange={(info) => {
  369. if (info.file.status !== 'uploading') {
  370. console.log(info.file, info.fileList);
  371. }
  372. if (info.file.status === 'done') {
  373. if (!info.file.response.error.length) {
  374. message.success(`${info.file.name} 文件上传成功!`);
  375. } else {
  376. message.warning(info.file.response.error[0].message);
  377. return;
  378. };
  379. this.state.copyrightApplyUrl = info.file.response.data;
  380. } else if (info.file.status === 'error') {
  381. message.error(`${info.file.name} 文件上传失败。`);
  382. };
  383. this.setState({ fileList_copyright_apply: info.fileList.slice(-1) });
  384. }}
  385. >
  386. <Button><Icon type="upload" /> 上传软著申请书 </Button>
  387. </Upload>
  388. <p style={{ margin: '10px 0' }}>{theData.applicationUrl ?
  389. <span className="download-file">
  390. <a onClick={copyrightDownloadFile.bind(null, theData.id, 'copyright_apply', '/api/admin/copyright/download')}>软著申请书</a>
  391. <a onClick={() => {
  392. var newTab = window.open('about:blank'); getPreview(theData.id, 'copyright', 'copyright_apply', function (data) { newTab.location.href = data; });
  393. }}><Icon style={{ fontSize: '16px' }} type="eye-o" /> </a>
  394. </span>
  395. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}</p>
  396. </div>
  397. <div className="hrSituation-roster">
  398. <Upload
  399. name="copyright_auth"
  400. action={globalConfig.context + "/api/admin/copyright/upload"}
  401. data={{ 'sign': 'copyright_auth', id: this.props.data.id }}
  402. beforeUpload={beforeUploadFile}
  403. fileList={this.state.fileList_copyright_auth}
  404. onChange={(info) => {
  405. if (info.file.status !== 'uploading') {
  406. console.log(info.file, info.fileList);
  407. }
  408. if (info.file.status === 'done') {
  409. if (!info.file.response.error.length) {
  410. message.success(`${info.file.name} 文件上传成功!`);
  411. } else {
  412. message.warning(info.file.response.error[0].message);
  413. return;
  414. };
  415. this.state.copyrightAuthUrl = info.file.response.data;
  416. } else if (info.file.status === 'error') {
  417. message.error(`${info.file.name} 文件上传失败。`);
  418. };
  419. this.setState({ fileList_copyright_auth: info.fileList.slice(-1) });
  420. }}
  421. >
  422. <Button><Icon type="upload" /> 上传软著证书 </Button>
  423. </Upload>
  424. <p style={{ margin: '10px 0' }}>{
  425. theData.certificateUrl ?
  426. <span className="download-file">
  427. <a onClick={copyrightDownloadFile.bind(null, theData.id, 'copyright_auth', '/api/admin/copyright/download')}>软著证书</a>
  428. <a onClick={() => {
  429. var newTab = window.open('about:blank'); getPreview(theData.id, 'copyright', 'copyright_auth', function (data) { newTab.location.href = data; });
  430. }}><Icon style={{ fontSize: '16px' }} type="eye-o" /> </a>
  431. </span>
  432. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}</p>
  433. </div>
  434. <FormItem style={{ marginTop: '20px' }}>
  435. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  436. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  437. </FormItem>
  438. </Form>
  439. );
  440. }
  441. }));
  442. const CopyrightDesc = React.createClass({
  443. getInitialState() {
  444. return {
  445. visible: false,
  446. loading: false
  447. };
  448. },
  449. componentWillReceiveProps(nextProps) {
  450. this.state.visible = nextProps.showDesc
  451. },
  452. showModal() {
  453. this.setState({
  454. visible: true,
  455. });
  456. },
  457. handleOk() {
  458. this.setState({
  459. visible: false,
  460. });
  461. this.props.closeDesc(false, true);
  462. },
  463. handleCancel(e) {
  464. this.setState({
  465. visible: false,
  466. });
  467. this.props.closeDesc(false);
  468. },
  469. spinChange(e) {
  470. this.setState({
  471. loading: e
  472. });
  473. },
  474. render() {
  475. return (
  476. <div className="patent-addNew">
  477. <Spin spinning={this.state.loading} className='spin-box'>
  478. <Modal title="软著详情" visible={this.state.visible}
  479. onOk={this.handleOk} onCancel={this.handleCancel}
  480. width='800px'
  481. footer=''
  482. >
  483. <CopyrightDescForm
  484. visible={this.state.visible}
  485. authorOption={this.props.authorOption}
  486. statusOption={this.props.statusOption}
  487. data={this.props.data}
  488. spinState={this.spinChange}
  489. closeModal={this.handleCancel}
  490. clickOk={this.handleOk} />
  491. </Modal>
  492. </Spin>
  493. </div>
  494. );
  495. }
  496. });
  497. export default CopyrightDesc;