projecCount.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. import React,{ Component } from 'react';
  2. import {AutoComplete, Button, DatePicker, Input, message, Select, Spin, Table, Tabs} from "antd";
  3. import {
  4. ShowModal,
  5. getNewDiccityArr
  6. } from "@/tools";
  7. import { citySelect } from '../../../NewDicProvinceList';
  8. import {ChooseList} from "../../order/orderNew/chooseList";
  9. import $ from "jquery/src/ajax";
  10. import moment from "moment";
  11. import {
  12. highTechColumns,
  13. invention,
  14. utilityModel,
  15. softWriting,
  16. otherTrademarks,
  17. currency,
  18. } from './projecCountConfig';
  19. const {TabPane} = Tabs;
  20. const { RangePicker } = DatePicker;
  21. const { Option } = Select;
  22. class ProjecCount extends Component{
  23. constructor(props) {
  24. super(props);
  25. this.state={
  26. loading:false,
  27. changeList:[],
  28. columns: currency,
  29. pagination: {
  30. defaultCurrent: 1,
  31. defaultPageSize: 10,
  32. showQuickJumper: true,
  33. pageSize: 10,
  34. onChange: function(page) {
  35. this.loadData(page);
  36. }.bind(this),
  37. showTotal: function(total) {
  38. return "共" + total + "条数据";
  39. }
  40. },
  41. dataSource: [],
  42. releaseDate:[],
  43. searchOrderNo: '',
  44. searchContractNo: '',
  45. searchEnterpriseName: '',
  46. declarationBatch: '',
  47. projectType: '',
  48. projectStatus: '',
  49. province: '',
  50. depId: '',
  51. departmentArr:[],
  52. contactsOption: [],
  53. contactsOptionData: [],
  54. customerArr: [],
  55. commodityName: '',
  56. kid: '',
  57. }
  58. this.loadData = this.loadData.bind(this);
  59. this.resetAll = this.resetAll.bind(this);
  60. this.changeList = this.changeList.bind(this);
  61. this.departmentList = this.departmentList.bind(this);
  62. this.exportPending = this.exportPending.bind(this);
  63. this.selectSuperId = this.selectSuperId.bind(this);
  64. this.supervisorCui = this.supervisorCui.bind(this);
  65. this.httpChangeCui = this.httpChangeCui.bind(this);
  66. this.selectAuto = this.selectAuto.bind(this);
  67. }
  68. changeList(arr) {
  69. const newArr = [];
  70. this.state.columns.forEach(item => {
  71. arr.forEach(val => {
  72. if (val === item.title) {
  73. newArr.push(item);
  74. }
  75. });
  76. });
  77. this.setState({
  78. changeList: newArr
  79. });
  80. }
  81. loadData(pageNo) {
  82. this.state.data = [];
  83. this.setState({
  84. page: pageNo,
  85. loading: true
  86. });
  87. $.ajax({
  88. method: "get",
  89. dataType: "json",
  90. crossDomain: false,
  91. url: globalConfig.context + "/api/admin/newOrder/orderNewList",
  92. data: {
  93. pageNo: pageNo || 1,
  94. pageSize: this.state.pagination.pageSize,
  95. startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0]: undefined, //开始时间
  96. endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1]: undefined, //结束时间
  97. projectStatus: this.state.projectStatus || undefined,//项目类别
  98. projectType: typeof this.state.projectType === 'number' ? this.state.projectType : undefined,//项目分类
  99. status: this.state.status,
  100. },
  101. success: function(data) {
  102. ShowModal(this);
  103. let theArr = [];
  104. if (!data.data || !data.data.list) {
  105. if (data.error && data.error.length) {
  106. message.warning(data.error[0].message);
  107. }
  108. } else {
  109. for (let i = 0; i < data.data.list.length; i++) {
  110. let thisdata = data.data.list[i];
  111. thisdata.key=i;
  112. theArr.push(thisdata);
  113. }
  114. }
  115. this.state.pagination.current = data.data.pageNo;
  116. this.state.pagination.total = data.data.totalCount;
  117. if (data.data && data.data.list && !data.data.list.length) {
  118. this.state.pagination.current = 0;
  119. this.state.pagination.total = 0;
  120. }
  121. this.setState({
  122. dataSource: theArr,
  123. pagination: this.state.pagination
  124. });
  125. }.bind(this)
  126. }).always(
  127. function() {
  128. this.setState({
  129. loading: false
  130. });
  131. }.bind(this)
  132. );
  133. }
  134. //部门
  135. departmentList() {
  136. $.ajax({
  137. method: "get",
  138. dataType: "json",
  139. crossDomain: false,
  140. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  141. data: {},
  142. success: function (data) {
  143. let thedata = data.data;
  144. let theArr = [];
  145. if (!thedata) {
  146. if (data.error && data.error.length) {
  147. message.warning(data.error[0].message);
  148. }
  149. } else {
  150. thedata.map(function (item, index) {
  151. theArr.push({
  152. key: index,
  153. name: item.name,
  154. id: item.id,
  155. });
  156. });
  157. }
  158. this.setState({
  159. departmentArr: theArr,
  160. });
  161. }.bind(this),
  162. })
  163. }
  164. resetAll() {
  165. this.setState({
  166. releaseDate: [],
  167. searchOrderNo: '',
  168. searchContractNo: '',
  169. searchEnterpriseName: '',
  170. declarationBatch: '',
  171. province: '',
  172. depId: '',
  173. projectType: '',
  174. projectStatus: '',
  175. },()=>{
  176. this.loadData();
  177. })
  178. }
  179. exportPending() {
  180. window.open(globalConfig.context + "/api/admin/patent/exportPending")
  181. }
  182. //项目类别
  183. selectSuperId() {
  184. $.ajax({
  185. method: "get",
  186. dataType: "json",
  187. crossDomain: false,
  188. url: globalConfig.context + "/api/admin/ProjectSize/getAllCname",
  189. data: {
  190. flag: 0
  191. },
  192. success: function(data) {
  193. let theArr = [];
  194. let thedata = data.data;
  195. if (!thedata) {
  196. if (data.error && data.error.length) {
  197. message.warning(data.error[0].message);
  198. }
  199. }
  200. for (let i = 0; i < data.data.length; i++) {
  201. let theData = data.data[i];
  202. theArr.push(
  203. <Select.Option value={theData.id} key={theData.cname}>
  204. {theData.cname}
  205. </Select.Option>
  206. );
  207. }
  208. this.setState({
  209. contactsOption: theArr,
  210. contactsOptionData: data.data,
  211. });
  212. }.bind(this)
  213. }).always(
  214. );
  215. }
  216. supervisorCui(e) {
  217. //客户名称与服务名称自动补全
  218. let api = "/api/admin/order/getBusinessProjectByName";
  219. $.ajax({
  220. method: "get",
  221. dataType: "json",
  222. crossDomain: false,
  223. url: globalConfig.context + api,
  224. data: {
  225. businessName: e,
  226. },
  227. success: function (data) {
  228. let thedata = data.data;
  229. if (!thedata) {
  230. if (data.error && data.error.length) {
  231. message.warning(data.error[0].message);
  232. }
  233. thedata = {};
  234. }
  235. this.setState({
  236. customerArr: thedata,
  237. });
  238. }.bind(this),
  239. }).always(
  240. function () {
  241. this.setState({
  242. loading: false,
  243. });
  244. }.bind(this)
  245. );
  246. }
  247. httpChangeCui(e) {
  248. if (e.length >= 1) {
  249. this.supervisorCui(e, false);
  250. }
  251. this.setState({
  252. commodityName: e,
  253. });
  254. }
  255. //上级主管输入框失去焦点是判断客户是否存在
  256. selectAuto(value){
  257. let kid=[];
  258. let fwList=this.state.customerArr;
  259. fwList.map(function(item){
  260. if(value===item.bname){
  261. kid=item.id
  262. }
  263. })
  264. this.setState({
  265. kid:kid,
  266. commodityName:value,
  267. })
  268. }
  269. componentWillMount() {
  270. this.loadData();
  271. this.departmentList();
  272. this.selectSuperId();
  273. }
  274. render() {
  275. const dataSources=this.state.customerArr || [];
  276. const options = dataSources.map((group,index) =>
  277. <Select.Option key={index} value={group.bname}>{group.bname}</Select.Option>
  278. )
  279. return (
  280. <div className="user-content">
  281. <div className="content-title">
  282. <span>数据统计</span>
  283. </div>
  284. <Tabs defaultActiveKey="1" className="test">
  285. <TabPane tab="搜索" key="1">
  286. <div className="user-search" style={{
  287. marginTop:'10px',
  288. marginLeft:'10px',
  289. marginRight:'10px'
  290. }}>
  291. <span style={{display:"inline-block"}}>
  292. <span style={{marginRight:'10px',marginBottom:'10px'}}>项目类别 :</span>
  293. <Select
  294. value={this.state.projectStatus}
  295. placeholder="请选择项目类别"
  296. notFoundContent="未获取到上级品类列表"
  297. style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}
  298. onChange={(e) => {
  299. let infor = this.state.contactsOptionData.filter((v)=>v.id === e);
  300. this.setState({
  301. projectStatus: e,
  302. },()=>{
  303. if((infor[0].cname === '科技项目' || infor[0].cname === '高新') && typeof this.state.projectType !== 'number'){
  304. this.setState({
  305. columns: highTechColumns,
  306. changeList: [],
  307. },()=>{
  308. this.loadData();
  309. })
  310. }else if (typeof this.state.projectType !== 'number'){
  311. this.setState({
  312. columns: currency,
  313. changeList: [],
  314. },()=>{
  315. this.loadData();
  316. })
  317. }else{
  318. this.loadData();
  319. }
  320. })
  321. }}
  322. >
  323. {this.state.contactsOption}
  324. </Select>
  325. </span>
  326. <span style={{display:"inline-block"}}>
  327. <span style={{marginRight:'10px',marginBottom:'10px'}}>项目分类 :</span>
  328. <Select
  329. value={this.state.projectType}
  330. placeholder="请选择项目分类"
  331. style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}
  332. onChange={(e) => {
  333. this.setState({
  334. columns:
  335. e === 0 ? currency :
  336. e === 1 ? invention :
  337. e === 2 ? softWriting :
  338. e === 3 ? currency :
  339. e === 4 ? currency:
  340. e === 5 ? highTechColumns : [],
  341. changeList: [],
  342. projectType: e,
  343. },()=>{
  344. this.loadData();
  345. })
  346. }}
  347. >
  348. {/*0正常 1专利 2软著 3审计 4双软*/}
  349. <Option value={0}>通用</Option>
  350. <Option value={1}>专利</Option>
  351. <Option value={2}>软著</Option>
  352. <Option value={3}>审计</Option>
  353. <Option value={4}>双软</Option>
  354. <Option value={5}>高新</Option>
  355. </Select>
  356. </span>
  357. <Input
  358. placeholder="订单编号"
  359. style={{ width: "150px",marginRight:'10px',marginBottom:'10px' }}
  360. value={this.state.searchOrderNo}
  361. onChange={e => {
  362. this.setState({ searchOrderNo: e.target.value });
  363. }}
  364. />
  365. <Input
  366. placeholder="合同编号"
  367. style={{ width: "150px",marginRight:'10px',marginBottom:'10px' }}
  368. value={this.state.searchContractNo}
  369. onChange={e => {
  370. this.setState({ searchContractNo: e.target.value });
  371. }}
  372. />
  373. <Input
  374. placeholder="企业名称"
  375. style={{ width: "150px",marginRight:'10px',marginBottom:'10px' }}
  376. value={this.state.searchEnterpriseName}
  377. onChange={e => {
  378. this.setState({ searchEnterpriseName: e.target.value });
  379. }}
  380. />
  381. <span style={{display:"inline-block"}}>
  382. <span style={{marginRight:'10px',marginBottom:'10px'}}>时报批次 :</span>
  383. <Select
  384. value={this.state.declarationBatch}
  385. placeholder="请选择批次"
  386. style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}
  387. onChange={(e) => {
  388. this.setState({
  389. declarationBatch: e,
  390. });
  391. }}
  392. >
  393. <Option value={1}>第一批</Option>
  394. <Option value={2}>第二批</Option>
  395. <Option value={3}>第三批</Option>
  396. <Option value={4}>第四批</Option>
  397. </Select>
  398. </span>
  399. <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}>
  400. <span>派单省份:</span>
  401. <Select
  402. placeholder="请选择省份"
  403. style={{ width: 200,marginRight:'10px',marginLeft:'10px',marginBottom:'10px' }}
  404. value={getNewDiccityArr(this.state.province)}
  405. onChange={e => {
  406. this.setState({ province: e });
  407. }}
  408. >
  409. {citySelect().map(function(item) {
  410. return (
  411. <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
  412. );
  413. })}
  414. </Select>
  415. </span>
  416. <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}>
  417. <span>服务项目名称:</span>
  418. <AutoComplete
  419. className="certain-category-search"
  420. dropdownClassName="certain-category-search-dropdown"
  421. dropdownMatchSelectWidth={false}
  422. dropdownStyle={{ width: 200 }}
  423. style={{ width: '200px',marginLeft:'10px' }}
  424. dataSource={options}
  425. placeholder="输入服务名称"
  426. value={this.state.commodityName}
  427. onChange={this.httpChangeCui}
  428. filterOption={true}
  429. onSelect={this.selectAuto}
  430. >
  431. <Input/>
  432. </AutoComplete>
  433. </span>
  434. <span style={{display: "inline-block",marginRight:'10px',marginBottom:'10px'}}>
  435. <span>负责部门:</span>
  436. <Select
  437. placeholder="请选择部门"
  438. style={{ width: 200,marginRight:'10px',marginLeft:'10px',marginBottom:'10px' }}
  439. value={this.state.depId}
  440. onChange={e => {
  441. this.setState({ depId: e });
  442. }}
  443. >
  444. {
  445. this.state.departmentArr.map(function (item) {
  446. return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
  447. })
  448. }
  449. </Select>
  450. </span>
  451. <span style={{display:"inline-block"}}>
  452. <span style={{marginRight:'10px',marginBottom:'10px'}}>派单时间 :</span>
  453. <RangePicker
  454. style={{marginRight:'10px',marginBottom:'10px'}}
  455. value={[
  456. this.state.releaseDate[0]
  457. ? moment(this.state.releaseDate[0])
  458. : null,
  459. this.state.releaseDate[1]
  460. ? moment(this.state.releaseDate[1])
  461. : null,
  462. ]}
  463. onChange={(data, dataString) => {
  464. this.setState({ releaseDate: dataString });
  465. }}
  466. />
  467. </span>
  468. <Button type="primary" onClick={this.loadData} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button>
  469. <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</Button>
  470. </div>
  471. </TabPane>
  472. <TabPane tab="更改表格显示数据" key="2">
  473. <div style={{ marginLeft: 10 }}>
  474. <ChooseList
  475. columns={this.state.columns}
  476. changeFn={this.changeList}
  477. changeList={this.state.changeList}
  478. top={55}
  479. margin={11}
  480. />
  481. </div>
  482. </TabPane>
  483. <TabPane tab="导出EXCEL" key="3">
  484. <Button type="primary" style={{margin: '10px'}} onClick={this.exportPending}>导出</Button>
  485. </TabPane>
  486. </Tabs>
  487. <div className="patent-table">
  488. <Spin spinning={this.state.loading}>
  489. <Table
  490. bordered
  491. size="middle"
  492. scroll={{ x: 2000, y: 0 }}
  493. columns={
  494. this.state.changeList.length > 0
  495. ? this.state.changeList
  496. : this.state.columns
  497. }
  498. dataSource={this.state.dataSource}
  499. pagination={this.state.pagination}
  500. />
  501. </Spin>
  502. </div>
  503. </div>
  504. )
  505. }
  506. }
  507. export default ProjecCount;