list.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. import React,{Component} from "react";
  2. import {Button, Form, Input, message, Popconfirm, Select, Spin, Table, Tabs, Upload} from "antd";
  3. import {ChooseList} from "../../order/orderNew/chooseList";
  4. import $ from "jquery/src/ajax";
  5. import { patentTypeList} from '@/dataDic.js';
  6. import {getPatentType} from "@/tools.js";
  7. import './patent.less';
  8. import PatentDetails from './patentDetails';
  9. const { TabPane } = Tabs;
  10. class List extends Component{
  11. constructor(props) {
  12. super(props);
  13. this.state={
  14. loading:false,
  15. columns:[
  16. {
  17. title: "序号",
  18. dataIndex: "id",
  19. key: "id",
  20. },
  21. {
  22. title: "专利名称",
  23. dataIndex: "name",
  24. key: "name",
  25. },
  26. {
  27. title: "专利类型",
  28. dataIndex: "type",
  29. key: "type",
  30. render: (text) => {
  31. return (
  32. getPatentType(text)
  33. )
  34. }
  35. },
  36. {
  37. title: "申请日",
  38. dataIndex: "applyDates",
  39. key: "applyDates",
  40. },
  41. {
  42. title: "权利人",
  43. dataIndex: "holders",
  44. key: "holders",
  45. },
  46. {
  47. title: "发明人",
  48. dataIndex: "inventor",
  49. key: "inventor",
  50. },
  51. {
  52. title: "收费截止日",
  53. dataIndex: "",
  54. key: "",
  55. },
  56. {
  57. title: "年费状态",
  58. dataIndex: "annualFeeStatus",
  59. key: "annualFeeStatus",
  60. render: (text)=>{
  61. return (
  62. text === 0 ? '无信息' :
  63. text === 1 ? '代缴费' : ''
  64. )
  65. }
  66. },
  67. {
  68. title: "营销员是否提醒",
  69. dataIndex: "salesmanRemind",
  70. key: "salesmanRemind",
  71. render: (text)=>{
  72. return(
  73. text === 0 ? '未提醒' :
  74. text === 1 ? '已提醒' : ''
  75. )
  76. }
  77. },
  78. {
  79. title: "年费/滞纳金/恢复",
  80. dataIndex: "delayingAmount",
  81. key: "delayingAmount",
  82. render:(text,record)=>{
  83. return(
  84. (record.patentAmount || '无') + '/' + (text || '无') + '/' + (record.recoveryAmount || '无')
  85. )
  86. }
  87. },
  88. {
  89. title: "客户名称",
  90. dataIndex: "companyName",
  91. key: "companyName",
  92. },
  93. {
  94. title: "项目名称",
  95. dataIndex: "projectName",
  96. key: "projectName",
  97. },
  98. {
  99. title: "项目编号",
  100. dataIndex: "tid",
  101. key: "tid",
  102. },
  103. {
  104. title: "营销员",
  105. dataIndex: "salesmanName",
  106. key: "salesmanName",
  107. },
  108. {
  109. title: "咨询师",
  110. dataIndex: "techName",
  111. key: "techName",
  112. },
  113. {
  114. title: "派单部门",
  115. dataIndex: "depName",
  116. key: "depName",
  117. },
  118. {
  119. title: "操作",
  120. dataIndex: "id",
  121. key: "caozuo",
  122. render: (text,record) => {
  123. return (
  124. <div>
  125. <Button type="primary" style={{marginRight:"15px"}}>发邮件</Button>
  126. <Button type="primary">发通知</Button>
  127. </div>
  128. )
  129. }
  130. },
  131. ],
  132. dataSource:[],
  133. pagination: {
  134. defaultCurrent: 1,
  135. defaultPageSize: 10,
  136. showQuickJumper: true,
  137. pageSize: 10,
  138. onChange: function (page) {
  139. this.loadData(page,this.state.searchInfor);
  140. }.bind(this),
  141. showTotal: function (total) {
  142. return "共" + total + "条数据";
  143. },
  144. },
  145. detailsVisible:false,
  146. detailsInfor:{},
  147. departmentArr:[],
  148. selectedRowKeys:[],
  149. name:undefined,
  150. type:undefined,
  151. depName:undefined,
  152. annualFeeStatus:undefined,
  153. userName:undefined,
  154. salesmanRemind:undefined,
  155. aname:undefined,
  156. upLoad: {
  157. customRequest: (options) => {
  158. this.setState({
  159. upLoadFileLoading: true,
  160. })
  161. let params = new FormData();
  162. params.append("file", options.file);
  163. $.ajax({
  164. method: "post",
  165. url: globalConfig.context + "/api/admin/patentNew/import",
  166. async: true,
  167. cache: false,
  168. contentType: false,
  169. processData: false,
  170. data:params
  171. }).done(
  172. function (data) {
  173. this.setState({
  174. upLoadFileLoading: false,
  175. })
  176. if (data.error.length === 0) {
  177. message.success("导入成功!");
  178. this.loadData();
  179. } else {
  180. message.warning(data.error[0].message);
  181. this.loadData();
  182. }
  183. }.bind(this)
  184. ).always(
  185. function () {
  186. this.loadData();
  187. this.setState({
  188. upLoadFileLoading: false,
  189. });
  190. }.bind(this)
  191. );
  192. },
  193. name: "file",
  194. action: globalConfig.context + "/api/admin/patentNew/import",
  195. }
  196. }
  197. this.changeList = this.changeList.bind(this);
  198. this.loadData = this.loadData.bind(this);
  199. this.download = this.download.bind(this);
  200. this.departmentList = this.departmentList.bind(this);
  201. this.exportExec = this.exportExec.bind(this);
  202. this.onReset = this.onReset.bind(this);
  203. }
  204. componentDidMount() {
  205. this.loadData();
  206. this.departmentList();
  207. }
  208. changeList(arr) {
  209. const newArr = [];
  210. this.state.columns.forEach(item => {
  211. arr.forEach(val => {
  212. if (val === item.title) {
  213. newArr.push(item);
  214. }
  215. });
  216. });
  217. this.setState({
  218. changeList: newArr
  219. });
  220. }
  221. loadData(pageNo) {
  222. this.setState({
  223. loading: true,
  224. selectedRowKeys:[],
  225. });
  226. let data = {
  227. name:this.state.name,
  228. type:this.state.type,
  229. depName:this.state.depName,
  230. annualFeeStatus:this.state.annualFeeStatus,
  231. userName:this.state.userName,
  232. salesmanRemind:this.state.salesmanRemind,
  233. aname:this.state.aname,
  234. pageNo:pageNo || 1,
  235. pageSize:10,
  236. }
  237. for(let i in data){
  238. if(data[i] === undefined){delete data[i]}
  239. }
  240. $.ajax({
  241. method: "get",
  242. dataType: "json",
  243. crossDomain: false,
  244. url: globalConfig.context + "/api/admin/patentNew/selectPatentNew",
  245. data,
  246. success: function (data) {
  247. if(data.error.length === 0){
  248. this.state.pagination.current = data.data.pageNo;
  249. this.state.pagination.total = data.data.totalCount;
  250. if (data.data && data.data.list && !data.data.list.length) {
  251. this.state.pagination.current = 0;
  252. this.state.pagination.total = 0;
  253. }
  254. this.setState({
  255. page: data.data.pageNo,
  256. dataSource: data.data.list,
  257. pagination: this.state.pagination,
  258. });
  259. }else{
  260. message.warning(data.error[0].message);
  261. }
  262. }.bind(this),
  263. }).always(
  264. function () {
  265. this.setState({
  266. loading: false,
  267. });
  268. }.bind(this)
  269. );
  270. }
  271. download() {
  272. window.location.href =
  273. globalConfig.context +
  274. "/api/user/channel/downloadTemplate?" +
  275. "sign=user_channel";
  276. }
  277. downloadFile() {
  278. window.location.href =
  279. globalConfig.context +
  280. "/api/admin/patentNewexportTemplate?" +
  281. "sign=new_patent_template";
  282. }
  283. //部门
  284. departmentList() {
  285. $.ajax({
  286. method: "get",
  287. dataType: "json",
  288. crossDomain: false,
  289. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  290. data: {},
  291. success: function(data) {
  292. if(data.error.length === 0){
  293. let theArr=[];
  294. data.data.map(function(item,index){
  295. theArr.push({
  296. key:index,
  297. name:item.name,
  298. id:item.id,
  299. })
  300. })
  301. this.setState({
  302. departmentArr:theArr,
  303. })
  304. }else{
  305. message.warning(data.error[0].message);
  306. }
  307. }.bind(this),
  308. }).always(function() {
  309. }.bind(this));
  310. }
  311. exportExec(){
  312. let loading = message.loading('加载中...');
  313. let data = {
  314. name:this.state.name,
  315. type:this.state.type,
  316. depName:this.state.depName,
  317. annualFeeStatus:this.state.annualFeeStatus,
  318. userName:this.state.userName,
  319. salesmanRemind:this.state.salesmanRemind,
  320. aname:this.state.aname,
  321. }
  322. for(let i in data){
  323. if(data[i] === undefined){delete data[i]}
  324. }
  325. $.ajax({
  326. method: "get",
  327. dataType: "json",
  328. crossDomain: false,
  329. url: globalConfig.context + "/api/admin/patentNew/export",
  330. data,
  331. success: function(data) {
  332. if(data.error.length === 0){
  333. loading();
  334. this.download(data.data.data);
  335. }else{
  336. loading();
  337. message.warning(data.error[0].message);
  338. }
  339. }.bind(this),
  340. }).always(function() {
  341. }.bind(this));
  342. }
  343. download(fileName){
  344. window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  345. }
  346. onReset(){
  347. this.setState({
  348. name:undefined,
  349. type:undefined,
  350. depName:undefined,
  351. annualFeeStatus:undefined,
  352. userName:undefined,
  353. salesmanRemind:undefined,
  354. aname:undefined,
  355. },()=>{this.loadData();})
  356. }
  357. render() {
  358. return (
  359. <div className="user-content">
  360. <div className="content-title">
  361. <span>专利列表</span>
  362. </div>
  363. <Tabs defaultActiveKey="1" className="test">
  364. <TabPane tab="搜索" key="1">
  365. <div style={{padding:'10px'}}>
  366. <Form
  367. layout="inline"
  368. name="basic"
  369. >
  370. <div style={{display:'flex',alignItems:'center'}}>
  371. <Form.Item>
  372. <Input style={{ width: '130px' }} value={this.state.name} onChange={(e)=>{this.setState({name:e.target.value})}} placeholder="请输入专利名称"/>
  373. </Form.Item>
  374. <Form.Item>
  375. <Input style={{ width: '130px' }} value={this.state.aname} onChange={(e)=>{this.setState({aname:e.target.value})}} placeholder="请输入跟进人名称"/>
  376. </Form.Item>
  377. <Form.Item>
  378. <Input style={{ width: '130px' }} value={this.state.userName} onChange={(e)=>{this.setState({userName:e.target.value})}} placeholder="请输入客户名称"/>
  379. </Form.Item>
  380. <Form.Item>
  381. <Select
  382. placeholder="请选择专利类型"
  383. style={{ width: "140px" }}
  384. value={this.state.type}
  385. onSelect={(e)=>{
  386. this.setState({
  387. type:e
  388. })
  389. }}
  390. >
  391. {patentTypeList.map(function(item) {
  392. return (
  393. <Select.Option key={item.value}>
  394. {item.key}
  395. </Select.Option>
  396. );
  397. })}
  398. </Select>
  399. </Form.Item>
  400. <Form.Item>
  401. <Select placeholder="请选择是否代缴费" onSelect={(e)=>{
  402. this.setState({
  403. annualFeeStatus:e
  404. })
  405. }} value={this.state.annualFeeStatus} style={{ width: "140px" }}>
  406. <Select.Option value={0} >未代缴</Select.Option>
  407. <Select.Option value={1} >已代缴</Select.Option>
  408. </Select>
  409. </Form.Item>
  410. <Form.Item>
  411. <Select placeholder="请选择是否通知" value={this.state.salesmanRemind} onSelect={(e)=>{
  412. this.setState({
  413. salesmanRemind:e
  414. })
  415. }} style={{ width: "140px" }}>
  416. <Select.Option value={0} >未通知</Select.Option>
  417. <Select.Option value={1} >已通知</Select.Option>
  418. </Select>
  419. </Form.Item>
  420. <Form.Item>
  421. <Select placeholder="请选择派单部门" value={this.state.depName} onSelect={e=>{this.setState({depName:e})}} style={{ width: "240px" }}>
  422. {
  423. this.state.departmentArr.map(function (item) {
  424. return <Select.Option key={item.name} value={item.name}>{item.name}</Select.Option>
  425. })
  426. }
  427. </Select>
  428. </Form.Item>
  429. <Form.Item>
  430. <Button type="primary" onClick={()=>{this.loadData();}}>
  431. 搜索
  432. </Button>
  433. </Form.Item>
  434. <Form.Item>
  435. <Button onClick={this.onReset}>
  436. 重置
  437. </Button>
  438. </Form.Item>
  439. </div>
  440. </Form>
  441. </div>
  442. </TabPane>
  443. <TabPane tab="操作" key="2">
  444. <Popconfirm placement="top" title="确定要标识为已通知吗?" onConfirm={(e)=>{
  445. e.stopPropagation();
  446. }} okText="确定" cancelText="取消">
  447. <Button
  448. type="primary"
  449. style={{ margin: "11px 0px 10px 10px" }}
  450. disabled={this.state.selectedRowKeys.length === 0}
  451. >
  452. 标识为已通知
  453. </Button>
  454. </Popconfirm>
  455. <Upload {...this.state.upLoad} disabled={this.state.upLoadFileLoading}>
  456. <Button
  457. loading={this.state.upLoadFileLoading}
  458. type="primary"
  459. style={{ marginRight: "10px",marginLeft:'20px' }}
  460. >
  461. 批量导入
  462. </Button>
  463. </Upload>
  464. <Button
  465. type="primary"
  466. onClick={(e) => {
  467. e.stopPropagation();
  468. this.downloadFile();
  469. }}
  470. style={{ margin: "11px 0px 10px 10px" }}
  471. >
  472. 下载专利模板
  473. </Button>
  474. </TabPane>
  475. <TabPane tab="更改表格显示数据" key="3">
  476. <div style={{ marginLeft: 10 }}>
  477. <ChooseList
  478. columns={this.state.columns}
  479. changeFn={this.changeList}
  480. changeList={this.state.changeList}
  481. top={55}
  482. margin={11}
  483. />
  484. </div>
  485. </TabPane>
  486. </Tabs>
  487. <div className="patent-table">
  488. <Spin spinning={this.state.loading}>
  489. <Table
  490. columns={
  491. this.state.changeList
  492. ? this.state.changeList
  493. : this.state.columns
  494. }
  495. dataSource={this.state.dataSource}
  496. pagination={this.state.pagination}
  497. style={{
  498. cursor: 'pointer',
  499. }}
  500. onRowClick={(record)=>{
  501. this.setState({
  502. detailsVisible:true,
  503. detailsInfor:record
  504. })
  505. }}
  506. rowSelection={{
  507. selectedRowKeys:this.state.selectedRowKeys,
  508. onChange: (selectedRowKeys)=>{
  509. this.setState({ selectedRowKeys });
  510. },
  511. }}
  512. scroll={{ x: "max-content", y: 0 }}
  513. bordered
  514. size="small"
  515. />
  516. </Spin>
  517. </div>
  518. {this.state.detailsVisible ? <PatentDetails
  519. visible={this.state.detailsVisible}
  520. detailsInfor={this.state.detailsInfor}
  521. onCancel={()=>{
  522. this.setState({
  523. detailsVisible:false,
  524. detailsInfor:{}
  525. })
  526. }}
  527. /> : null}
  528. </div>
  529. )
  530. }
  531. }
  532. export default List;