import React, { Component } from "react"; import { Button, Form, Input, message, Modal, Popconfirm, Select, Spin, Table, Tabs, Upload, Tooltip, DatePicker } from "antd"; import { ChooseList } from "../../order/orderNew/chooseList"; import $ from "jquery/src/ajax"; import { patentTypeList } from '@/dataDic.js'; import { getPatentType, ShowModal } from "@/tools.js"; import ShowModalDiv from "@/showModal.jsx"; import './patent.less'; import PatentDetails from './patentDetails'; import ReminderLog from "../../customer/NEW/crm/reminderLog"; import moment from "moment"; import Cascaders from "../../../common/cascaders"; const { TabPane } = Tabs; const { RangePicker } = DatePicker; class List extends Component { constructor(props) { super(props); this.state = { loading: false, columns: [ { title: "序号", dataIndex: "id", key: "id", width: 80, fixed: 'left' }, { title: "专利号", dataIndex: "patentNo", key: "patentNo", width: 140, fixed: 'left' }, { title: "专利名称", dataIndex: "name", key: "name", width: 140, fixed: 'left' }, { title: "专利类型", dataIndex: "type", key: "type", render: (text) => { return ( getPatentType(text) ) } }, { title: "申请日", dataIndex: "applyDates", key: "applyDates", }, { title: "权利人", dataIndex: "holders", key: "holders", width: 120, render: (text) => { return ( <Tooltip title={text}> <div style={{ maxWidth: '120px', overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', }}>{text}</div> </Tooltip> ) }, }, { title: "授权日期", dataIndex: "authorizationDates", key: "authorizationDates", }, { title: "发明人", dataIndex: "inventor", key: "inventor", width: 120, render: (text) => { return ( <Tooltip title={text}> <div style={{ maxWidth: '120px', overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', }}>{text}</div> </Tooltip> ) }, }, { title: "收费截止日", dataIndex: "endDates", key: "endDates", }, { title: "费减状态", dataIndex: "costReduction", key: "costReduction", render: (text, record) => { return ( record.tid ? (text === 1 ? '有费减' : text === 0 ? '无费减' : '') : '无' ) } }, { title: "年费状态", dataIndex: "annualFeeStatus", key: "annualFeeStatus", render: (text) => { return ( <span style={{ color: text === 0 ? '#f00' : text === 1 ? '#25e027' : '' }}> { text === 0 ? '待缴费' : text === 1 ? '已缴费' : '' } </span> ) } }, { title: "营销员是否提醒", dataIndex: "salesmanRemind", key: "salesmanRemind", render: (text) => { return ( <span style={{ color: text === 0 ? '#f00' : text === 1 ? '#25e027' : '' }}> { text === 0 ? '未通知' : text === 1 ? '已通知' : '' } </span> ) } }, { title: "Email", dataIndex: "email", key: "email", }, { title: "年费/滞纳金/恢复", dataIndex: "delayingAmount", key: "delayingAmount", render: (text, record) => { return ( record.patentAmount + '/' + text + '/' + record.recoveryAmount ) } }, { title: "客户名称", dataIndex: "userName", key: "userName", }, { title: "项目名称", dataIndex: "projectName", key: "projectName", }, { title: "项目编号", dataIndex: "tid", key: "tid", }, { title: "营销员", dataIndex: "salesmanName", key: "salesmanName", }, { title: "咨询师", dataIndex: "techName", key: "techName", }, { title: "派单部门", dataIndex: "depName", key: "depName", }, { title: "录入人", dataIndex: "inputName", key: "inputName", width: 120, render: (text) => { return ( <Tooltip title={text}> <div style={{ maxWidth: '120px', overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', }}>{text}</div> </Tooltip> ) }, }, { title: "录入时间", dataIndex: "createTimes", key: "createTimes", }, { title: "跟进人", dataIndex: "aname", key: "aname", width: 120, render: (text) => { return ( <Tooltip title={text}> <div style={{ maxWidth: '120px', overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', }}>{text}</div> </Tooltip> ) }, }, { title: "操作", dataIndex: "id", key: "caozuo", width: 200, fixed: 'right', render: (text, record) => { return ( <div> <Button disabled={record.isFollow === 0} type="primary" onClick={(e) => { e.stopPropagation(); this.setState({ detailsVisible: true, detailsInfor: record, readOnly: false }) }}>修改</Button> <Button style={{ marginLeft: '10px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.setState({ visible: true, id: text }) }}>专利日志</Button> </div> ) } }, ], dataSource: [], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page, this.state.searchInfor); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, detailsVisible: false, detailsInfor: {}, departmentArr: [], selectedRowKeys: [], selectedRows: [], unSelectedRows: [], name: undefined, type: undefined, depName: undefined, inputDep: undefined, followDep: undefined, releaseDate: [], releaseDate1: [], annualFeeStatus: undefined, userName: undefined, salesmanRemind: undefined, isFollow: 1, aname: undefined, patentNo: undefined, upLoad: { customRequest: (options) => { this.setState({ upLoadFileLoading: true, }) let params = new FormData(); params.append("file", options.file); $.ajax({ method: "post", url: globalConfig.context + "/api/admin/patentNew/import", async: true, cache: false, contentType: false, processData: false, data: params }).done( function (data) { this.setState({ upLoadFileLoading: false, }) if (data.error.length === 0) { message.success("导入成功!"); this.loadData(); } else { message.warning(data.error[0].message); this.loadData(); } }.bind(this) ).always( function (err) { if (err.status === 404) { message.warning('表格数据错误'); } this.loadData(); this.setState({ upLoadFileLoading: false, }); }.bind(this) ); }, name: "file", action: globalConfig.context + "/api/admin/patentNew/import", }, adminList: [], status: props.status, aid: '', } this.changeList = this.changeList.bind(this); this.loadData = this.loadData.bind(this); this.download = this.download.bind(this); this.departmentList = this.departmentList.bind(this); this.exportExec = this.exportExec.bind(this); this.onReset = this.onReset.bind(this); this.updateBatch = this.updateBatch.bind(this); this.getAdminList = this.getAdminList.bind(this); this.downloadFile = this.downloadFile.bind(this); } componentWillReceiveProps(prevProps) { if (prevProps.status !== this.state.status) { this.setState({ status: prevProps.status }, () => { this.setState({ name: undefined, type: undefined, depName: undefined, inputDep: undefined, followDep: undefined, releaseDate: [], releaseDate1: [], annualFeeStatus: undefined, userName: undefined, salesmanRemind: undefined, isFollow: 1, aname: undefined, patentNo: undefined, }, () => { this.Cascaders1.empty(); this.Cascaders2.empty(); this.Cascaders3.empty(); this.loadData(); }) // this.departmentList(); }) } } componentDidMount() { this.loadData(); // this.departmentList(); } changeList(arr) { const newArr = []; this.state.columns.forEach(item => { arr.forEach(val => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr }); } loadData(pageNo) { this.setState({ loading: true, selectedRowKeys: [], selectedRows: [] }); let data = { name: this.state.name, type: this.state.type, depName: this.state.depName, inputDep: this.state.inputDep, followDep: this.state.followDep, createStarts: this.state.releaseDate[0] || undefined, createEnds: this.state.releaseDate[1] || undefined, startDates: this.state.releaseDate1[0] || undefined, endDates: this.state.releaseDate1[1] || undefined, annualFeeStatus: this.state.annualFeeStatus, userName: this.state.userName, salesmanRemind: this.state.salesmanRemind, isFollow: this.state.isFollow, aname: this.state.aname, patentNo: this.state.patentNo, pageNo: pageNo || 1, pageSize: 10, } if (this.state.status) { data.status = this.state.status; data.isFollow = 1; } for (let i in data) { if (data[i] === undefined) { delete data[i] } } $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/patentNew/selectPatentNew", data, success: function (data) { ShowModal(this); if (data.error.length === 0) { this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; if (data.data && data.data.list && !data.data.list.length) { this.state.pagination.current = 0; this.state.pagination.total = 0; } data.data.list.map(v => v.key = v.id) this.setState({ page: data.data.pageNo, dataSource: data.data.list, pagination: this.state.pagination, }); } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } download() { window.location.href = globalConfig.context + "/api/user/channel/downloadTemplate?" + "sign=user_channel"; } downloadFile() { this.setState({ downloadFileLoading: true }) setTimeout(() => { this.setState({ downloadFileLoading: false }) }, 1500) window.location.href = globalConfig.context + "/api/admin/patentNew/exportTemplate?" + "sign=new_patent_template"; } //部门 departmentList() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: {}, success: function (data) { if (data.error.length === 0) { let theArr = []; data.data.map(function (item, index) { theArr.push({ key: index, name: item.name, id: item.id, }) }) this.setState({ departmentArr: theArr, }) } else { message.warning(data.error[0].message); } }.bind(this), }).always(function () { }.bind(this)); } exportExec() { this.setState({ exportExecLoading: true }) let loading = message.loading('加载中...'); let data = { name: this.state.name, type: this.state.type, depName: this.state.depName, inputDep: this.state.inputDep, followDep: this.state.followDep, createStarts: this.state.releaseDate[0] || undefined, createEnds: this.state.releaseDate[1] || undefined, startDates: this.state.releaseDate1[0] || undefined, endDates: this.state.releaseDate1[1] || undefined, annualFeeStatus: this.state.annualFeeStatus, userName: this.state.userName, salesmanRemind: this.state.salesmanRemind, isFollow: this.state.isFollow, aname: this.state.aname, patentNo: this.state.patentNo, } for (let i in data) { if (data[i] === undefined) { delete data[i] } } $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/patentNew/export", data, success: function (data) { loading(); this.setState({ exportExecLoading: false }) if (data.error.length === 0) { this.download(data.data.data); } else { message.warning(data.error[0].message); } }.bind(this), }).always(function () { this.setState({ exportExecLoading: false }) }.bind(this)); } download(fileName) { window.location.href = globalConfig.context + "/open/download?fileName=" + fileName } //获取营销管理员列表 getAdminList(name) { this.setState({ adminListLoading: true }) $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/superviser/adminList", data: { pageNo: 1, pageSize: 99, name }, success: function (data) { let thedata = data.data.list; let theArr = []; if (data.error && data.error.length) { message.warning(data.error[0].message); } else { thedata.map(function (item, _) { theArr.push({ value: item.id, label: item.name, }); }); } this.setState({ adminList: theArr, }); }.bind(this), }).always( function () { this.setState({ adminListLoading: false }) }.bind(this) ); } onReset() { this.setState({ name: undefined, type: undefined, depName: undefined, inputDep: undefined, followDep: undefined, releaseDate: [], releaseDate1: [], annualFeeStatus: undefined, userName: undefined, salesmanRemind: undefined, isFollow: 1, aname: undefined, patentNo: undefined, }, () => { this.Cascaders1.empty(); this.Cascaders2.empty(); this.Cascaders3.empty(); this.loadData(); }) } updateBatch(type) { if (type === 2 && !this.state.aid) { message.warning('请选择营销管理员'); return; } let loading = message.loading('加载中...') if (type === 0) { this.setState({ updateBatchLoading0: true, }) } else if (type === 1) { this.setState({ updateBatchLoading1: true, }) } else if (type === 2) { this.setState({ updateBatchLoading2: true, }) } let ids = this.state.selectedRowKeys.join(','); let data = { ids, type,//0 批量通知 1批量发邮件 2转给营销管理员 } if (type === 2) { data.aid = this.state.aid } $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/patentNew/updateBatch", data, success: function (data) { loading(); if (data.error.length === 0) { message.success(type === 0 ? '成功批量标记为已通知' : type === 1 ? '批量发邮件成功' : type === 2 ? '转入成功' : ''); if (type === 2) { this.setState({ adminVisible: false }) } this.loadData(this.state.page); } else { message.warning(data.error[0].message); } }.bind(this), }).always(function () { if (type === 0) { this.setState({ updateBatchLoading0: false, }) } else if (type === 1) { this.setState({ updateBatchLoading1: false, }) } else if (type === 2) { this.setState({ updateBatchLoading2: false, }) } }.bind(this)); } render() { return ( <div className="user-content patentList"> <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} /> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}>专利列表</span> </div> <Tabs defaultActiveKey="1" className="test"> <TabPane tab="搜索" key="1"> <div style={{ padding: '10px' }}> <Form layout="inline" name="basic" > <div style={{ display: 'flex', alignItems: 'center', flexFlow: 'wrap' }}> <Form.Item> <Input style={{ width: '160px' }} value={this.state.patentNo} onChange={(e) => { this.setState({ patentNo: e.target.value }) }} placeholder="请输入专利号" /> </Form.Item> <Form.Item> <Input style={{ width: '160px' }} value={this.state.name} onChange={(e) => { this.setState({ name: e.target.value }) }} placeholder="请输入专利名称" /> </Form.Item> <Form.Item> <Input style={{ width: '160px' }} value={this.state.userName} onChange={(e) => { this.setState({ userName: e.target.value }) }} placeholder="请输入客户名称" /> </Form.Item> <Form.Item> <Input style={{ width: '160px' }} value={this.state.aname} onChange={(e) => { this.setState({ aname: e.target.value }) }} placeholder="请输入跟进人名称" /> </Form.Item> <Form.Item> <Select placeholder="请选择专利类型" style={{ width: "140px" }} value={this.state.type} onSelect={(e) => { this.setState({ type: e }) }} > {patentTypeList.map(function (item) { return ( <Select.Option key={item.value}> {item.key} </Select.Option> ); })} </Select> </Form.Item> <Form.Item> <Select placeholder="请选择是否代缴费" onSelect={(e) => { this.setState({ annualFeeStatus: e }) }} value={this.state.annualFeeStatus} style={{ width: "140px" }}> <Select.Option value={0} >未代缴</Select.Option> <Select.Option value={1} >已代缴</Select.Option> </Select> </Form.Item> <Form.Item> <Select placeholder="请选择是否通知" value={this.state.salesmanRemind} onSelect={(e) => { this.setState({ salesmanRemind: e }) }} style={{ width: "140px" }}> <Select.Option value={0} >未通知</Select.Option> <Select.Option value={1} >已通知</Select.Option> </Select> </Form.Item> {!this.state.status ? <Form.Item> <Select placeholder="请选择关系" value={this.state.isFollow} onSelect={(e) => { this.setState({ isFollow: e }) }} style={{ width: "140px" }}> <Select.Option value={0} >我录入</Select.Option> <Select.Option value={1} >我跟进</Select.Option> </Select> </Form.Item> : null} <Form.Item> <Cascaders ref={ref => this.Cascaders1 = ref} placeholder="请选择派单部门" id="name" name="name" children="list" height={32} onSel={(e) => { this.setState({ depName: JSON.stringify(e) }) }} /> {/* <Select placeholder="请选择派单部门" value={this.state.depName} onSelect={e => { this.setState({ depName: e }) }} style={{ width: "240px" }} > { this.state.departmentArr.map(function (item) { return <Select.Option key={item.id} value={item.name}>{item.name}</Select.Option> }) } </Select> */} </Form.Item> <Form.Item> <Cascaders ref={ref => this.Cascaders2 = ref} placeholder="请选择录入部门" id="id" name="name" children="list" height={32} onSel={(e) => { this.setState({ inputDep: JSON.stringify(e) }) }} /> {/* <Select placeholder="请选择录入部门" value={this.state.inputDep} onSelect={e => { this.setState({ inputDep: e }) }} style={{ width: "240px" }} > { this.state.departmentArr.map(function (item) { return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> }) } </Select> */} </Form.Item> <Form.Item> <Cascaders ref={ref => this.Cascaders3 = ref} placeholder="请选择跟进部门" id="id" name="name" children="list" height={32} onSel={(e) => { this.setState({ followDep: JSON.stringify(e) }) }} /> {/* <Select placeholder="请选择跟进部门" value={this.state.followDep} onSelect={e => { this.setState({ followDep: e }) }} style={{ width: "240px" }} > { this.state.departmentArr.map(function (item) { return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> }) } </Select> */} </Form.Item> <Form.Item> <div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ marginRight: '10px' }}>录入时间:</div> <RangePicker style={{ marginRight: '10px', height: 32 }} value={[ this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null, this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null, ]} onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} /> </div> </Form.Item> <Form.Item> <div style={{ display: 'flex', alignItems: 'center' }}> <span style={{ marginRight: '10px' }}>申请时间:</span> <RangePicker style={{ marginRight: '10px' }} value={[ this.state.releaseDate1[0] ? moment(this.state.releaseDate1[0]) : null, this.state.releaseDate1[1] ? moment(this.state.releaseDate1[1]) : null, ]} onChange={(data, dataString) => { this.setState({ releaseDate1: dataString }); }} /> </div> </Form.Item> <Form.Item> <Button type="primary" onClick={() => { this.loadData(); }}> 搜索 </Button> </Form.Item> <Form.Item> <Button onClick={this.onReset}> 重置 </Button> </Form.Item> </div> </Form> </div> </TabPane> <TabPane tab="操作" key="2"> <Popconfirm placement="top" title="确定要标识为已通知吗?" onConfirm={(e) => { e.stopPropagation(); this.updateBatch(0); }} okText="确定" cancelText="取消"> <Button loading={this.state.updateBatchLoading0} type="primary" style={{ margin: "11px 0px 10px 10px" }} disabled={this.state.selectedRowKeys.length === 0} > 标识为已通知 </Button> </Popconfirm> <Popconfirm placement="top" title="确定要批量发邮件吗?" onConfirm={(e) => { e.stopPropagation(); let arr = this.state.selectedRows.filter(v => v.status === 0); if (arr.length > 0) { this.setState({ unSelectedRows: arr, unSelectedRowsVisible: true }) } else { this.updateBatch(1) } }} okText="确定" cancelText="取消"> <Button loading={this.state.updateBatchLoading1} type="primary" style={{ margin: "11px 0px 10px 10px" }} disabled={this.state.selectedRowKeys.length === 0} > 批量发邮件 </Button> </Popconfirm> <Button loading={this.state.updateBatchLoading2} type="primary" style={{ margin: "11px 0px 10px 10px" }} disabled={this.state.selectedRowKeys.length === 0} onClick={() => { this.setState({ adminVisible: true, adminList: [], }) }} > 转交专利 </Button> <Upload {...this.state.upLoad} disabled={this.state.upLoadFileLoading}> <Button loading={this.state.upLoadFileLoading} type="primary" style={{ marginRight: "10px", marginLeft: '20px' }} > 批量导入 </Button> </Upload> <Button type="primary" loading={this.state.downloadFileLoading} onClick={(e) => { e.stopPropagation(); this.downloadFile(); }} style={{ margin: "11px 0px 10px 10px" }} > 下载专利模板 </Button> <Button type="primary" style={{ margin: "11px 0px 10px 10px" }} loading={this.state.exportExecLoading} onClick={() => { this.exportExec(); }} > 导出Excel </Button> </TabPane> <TabPane tab="更改表格显示数据" key="3"> <div style={{ marginLeft: 10 }}> <ChooseList columns={this.state.columns} changeFn={this.changeList} changeList={this.state.changeList} top={55} margin={11} /> </div> </TabPane> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={ this.state.changeList ? this.state.changeList : this.state.columns } dataSource={this.state.dataSource} pagination={this.state.pagination} style={{ cursor: 'pointer', }} onRowClick={(record) => { this.setState({ detailsVisible: true, readOnly: true, detailsInfor: record }) }} rowSelection={{ getCheckboxProps: record => ({ disabled: record.isFollow === 0 }), selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRowKeys, selectedRows }); }, }} scroll={{ x: "max-content", y: 0 }} bordered size="small" /> </Spin> </div> {this.state.detailsVisible ? <PatentDetails readOnly={this.state.readOnly} visible={this.state.detailsVisible} detailsInfor={this.state.detailsInfor} onRefresh={() => { this.loadData(this.state.page); }} onCancel={() => { this.setState({ readOnly: true, detailsVisible: false, detailsInfor: {} }) }} /> : null} {this.state.visible ? <ReminderLog id={this.state.id} visible={this.state.visible} cancel={() => { this.setState({ visible: false, id: undefined }) }} /> : null} {this.state.unSelectedRowsVisible ? <Modal title='提醒' className='payRecordComponent' width={500} maskClosable={false} footer={null} visible={this.state.unSelectedRowsVisible} onCancel={() => { this.setState({ unSelectedRowsVisible: false, unSelectedRows: [] }) }} > <div style={{ paddingBottom: '15px' }}>下列专利,不在专利需缴费的90天提醒之内,不可发送邮件</div> <Table columns={[ { title: "专利号", dataIndex: "patentNo", key: "patentNo", }, { title: "专利名称", dataIndex: "name", key: "name", }, ]} dataSource={this.state.unSelectedRows} pagination={false} scroll={{ x: "max-content", y: 0 }} bordered size="small" /> <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '20px' }}> <Button type="primary" onClick={() => { this.setState({ unSelectedRowsVisible: false, unSelectedRows: [] }) }}>关闭</Button> </div> </Modal> : null} {this.state.adminVisible ? <Modal title='请选择需转交的跟进人' className='payRecordComponent' width={300} maskClosable={false} footer={null} visible={this.state.adminVisible} onCancel={() => { this.setState({ adminVisible: false }) }} > <div style={{ display: 'flex', flexFlow: "column", justifyContent: 'center', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}> <span style={{ paddingRight: '15px' }}>跟进人:</span> <Select showSearch style={{ width: 200 }} placeholder="请选择跟进人" optionFilterProp="children" onSelect={(aid) => { this.setState({ aid }) }} onSearch={(value) => { this.getAdminList(value) }} > { this.state.adminList.map(v => ( <Select.Option value={v.value} key={v.value}>{v.label}</Select.Option> )) } </Select> </div> <Popconfirm placement="top" title="确定要转入此营销管理吗?" onConfirm={(e) => { e.stopPropagation(); this.updateBatch(2); }} okText="确定" cancelText="取消"> <Button loading={this.state.updateBatchLoading2} type='primary' style={{ marginAuto: '0 auto', marginTop: '20px' }} > 确定 </Button> </Popconfirm> </div> </Modal> : null} </div> ) } } export default List;