businessCategory.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import { Form, Icon, Button, Input, Select, Spin, Table, message, Modal, Upload,Popconfirm } from 'antd';
  4. import {typeModule} from '@/dataDic.js';
  5. import {splitUrl,getTypeModule} from '@/tools.js';
  6. //图片组件
  7. const PicturesWall = React.createClass({
  8. getInitialState() {
  9. return {
  10. previewVisible: false,
  11. previewImage: '',
  12. fileList: [],
  13. tags: []
  14. };
  15. },
  16. handleCancel() {
  17. this.setState({ previewVisible: false });
  18. },
  19. handlePreview(file) {
  20. this.setState({
  21. previewImage: file.url || file.thumbUrl,
  22. previewVisible: true
  23. });
  24. },
  25. handleChange(info) {
  26. let fileList = info.fileList;
  27. this.setState({ fileList });
  28. this.props.fileList(fileList);
  29. },
  30. componentWillReceiveProps(nextProps) {
  31. this.state.fileList = nextProps.pictureUrl;
  32. },
  33. render() {
  34. const { previewVisible, previewImage, fileList } = this.state;
  35. const uploadButton = (
  36. <div>
  37. <Icon type="plus" />
  38. <div className="ant-upload-text">点击上传</div>
  39. </div>
  40. );
  41. return (
  42. <div className="clearfix">
  43. <Upload
  44. action={globalConfig.context + '/api/admin/jtBusiness/uploadPicture'}
  45. data={{ sign: 'jt_business_picture'}}
  46. listType="picture-card"
  47. fileList={fileList}
  48. onPreview={this.handlePreview}
  49. onChange={this.handleChange}
  50. >
  51. {fileList.length >=1 ? null : uploadButton}
  52. </Upload>
  53. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  54. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  55. </Modal>
  56. </div>
  57. );
  58. }
  59. });
  60. const BusinessCategory=Form.create()(React.createClass({
  61. loadData(pageNo) {
  62. this.state.data = [];
  63. this.setState({
  64. loading: true,
  65. page:pageNo,
  66. });
  67. $.ajax({
  68. method: "get",
  69. dataType: "json",
  70. crossDomain: false,
  71. url: globalConfig.context + '/api/admin/jtBusiness/category/list',
  72. data: {
  73. pageNo: pageNo || 1,
  74. pageSize: this.state.pagination.pageSize,
  75. name:this.state.nameSearch, //品类名称
  76. layer:this.state.layerSearch,//组织层级
  77. },
  78. success: function (data) {
  79. let theArr = [];
  80. if (!data.data || !data.data.list) {
  81. if (data.error && data.error.length) {
  82. message.warning(data.error[0].message);
  83. };
  84. } else {
  85. for (let i = 0; i < data.data.list.length; i++) {
  86. let thisdata = data.data.list[i];
  87. theArr.push({
  88. key: i,
  89. id: thisdata.id,//品类ID
  90. sort:thisdata.sort,//品类序号
  91. number: thisdata.number,//品类编号
  92. module:thisdata.module?thisdata.module.toString():undefined,
  93. name: thisdata.name,//品类名称
  94. layer:thisdata.layer,
  95. superId:thisdata.superId,
  96. layerName: thisdata.layerName,//品类层级
  97. superNameId: thisdata.superId,//上级品类
  98. });
  99. };
  100. this.state.pagination.current = data.data.pageNo;
  101. this.state.pagination.total = data.data.totalCount;
  102. };
  103. this.setState({
  104. dataSource: theArr,
  105. pagination: this.state.pagination
  106. });
  107. }.bind(this),
  108. }).always(function () {
  109. this.setState({
  110. loading: false
  111. });
  112. }.bind(this));
  113. },
  114. loadMenu() {
  115. this.state.data = [];
  116. $.ajax({
  117. method: "get",
  118. dataType: "json",
  119. crossDomain: false,
  120. url: globalConfig.context + '/api/admin/jtBusiness/category/list',
  121. data: {
  122. pageNo: 1,
  123. pageSize:9999,
  124. layer:1,//组织层级
  125. },
  126. success: function (data) {
  127. let theArr = [];
  128. if (!data.data || !data.data.list) {
  129. if (data.error && data.error.length) {
  130. message.warning(data.error[0].message);
  131. };
  132. } else {
  133. for (let i = 0; i < data.data.list.length; i++) {
  134. let thisdata = data.data.list[i];
  135. theArr.push({
  136. key: i,
  137. id: thisdata.id,//品类ID
  138. name: thisdata.name,//品类名称
  139. });
  140. };
  141. };
  142. this.setState({
  143. dataMenu: theArr,
  144. });
  145. }.bind(this),
  146. }).always(function () {
  147. this.setState({
  148. loading: false
  149. });
  150. }.bind(this));
  151. },
  152. getInitialState() {
  153. return {
  154. searchMore: true,
  155. selectedRowKeys: [],
  156. pictureUrl: [],
  157. selectedRows: [],
  158. loading: false,
  159. pagination: {
  160. defaultCurrent: 1,
  161. defaultPageSize: 10,
  162. showQuickJumper: true,
  163. pageSize: 10,
  164. onChange: function (page) {
  165. this.loadData(page);
  166. this.setState({
  167. selectedRowKeys: [],
  168. })
  169. }.bind(this),
  170. showTotal: function (total) {
  171. return '共' + total + '条数据';
  172. }
  173. },
  174. columns: [
  175. {
  176. title: '品类编号',
  177. dataIndex: 'number',
  178. key: 'number',
  179. }, {
  180. title: '品类名称',
  181. dataIndex: 'name',
  182. key: 'name',
  183. }, {
  184. title: '品类层级',
  185. dataIndex: 'layerName',
  186. key: 'layerName'
  187. }, {
  188. title: '上级品类',
  189. dataIndex: 'superName',
  190. key: 'superName',
  191. render:(text)=>{
  192. return text?text:'超级品类'
  193. }
  194. },{
  195. title:'操作',
  196. dataIndex: 'superName1',
  197. key: 'superName1',
  198. render:(text,recard)=>{
  199. return (
  200. <div>
  201. {recard.layer<2&&<Button onClick={(e)=>{e.stopPropagation();this.nextAdd(recard)}}>新建下级品类</Button>}
  202. </div>
  203. )
  204. }
  205. }
  206. ],
  207. dataSource: [],
  208. };
  209. },
  210. componentWillMount() {
  211. this.loadData();
  212. this.loadMenu();
  213. },
  214. //新建下级
  215. nextAdd(recard){
  216. this.setState({
  217. recrdAdd:recard,
  218. visible: true,
  219. name:'',
  220. addFirst:1,
  221. superId:recard.id,
  222. module:recard.module?recard.module.toString():'undefined'
  223. });
  224. },
  225. //编辑保存
  226. edithandleSubmit(e){
  227. e.preventDefault();
  228. let thePictureUrl = [];
  229. if (this.state.pictureUrl.length) {
  230. let picArr = [];
  231. this.state.pictureUrl.map(function (item) {
  232. if ( item.response && item.response.data && item.response.data.length ){
  233. picArr.push(item.response.data);
  234. }
  235. });
  236. thePictureUrl = picArr.join(",");
  237. };
  238. let dataList={}
  239. if(this.state.layer=='1'){
  240. dataList.id=this.state.id;
  241. dataList.name=this.state.name;
  242. dataList.summary=this.state.summary;
  243. dataList.imgUrl=thePictureUrl;
  244. dataList.module=this.state.moduleNumber;
  245. dataList.nextModule=this.state.modules;
  246. }else{
  247. dataList.id=this.state.id;
  248. dataList.name=this.state.name;
  249. dataList.summary=this.state.summary;
  250. dataList.imgUrl=thePictureUrl;
  251. dataList.oldSuperId=this.state.superId;
  252. dataList.superId=this.state.superNameId;
  253. }
  254. $.ajax({
  255. method: "post",
  256. dataType: "json",
  257. crossDomain: false,
  258. url: globalConfig.context + "/api/admin/jtBusiness/category/update",
  259. data:dataList
  260. }).done(function (data) {
  261. if (!data.error.length) {
  262. message.success('保存成功!');
  263. this.setState({
  264. loading: false,
  265. editvisible:false
  266. });
  267. } else {
  268. message.warning(data.error[0].message);
  269. };
  270. this.loadData(this.state.page)
  271. }.bind(this));
  272. },
  273. //整行删除
  274. delectRow() {
  275. let deletedIds =[];
  276. let rowItem = this.state.selectedRowKeys[0];
  277. let data = this.state.dataSource ||[];
  278. if (data.length) {
  279. deletedIds.push(data[rowItem].id);
  280. }
  281. this.setState({
  282. selectedRowKeys: [],
  283. loading: deletedIds.length > 0
  284. });
  285. $.ajax({
  286. method: "post",
  287. dataType: "json",
  288. crossDomain: false,
  289. url: globalConfig.context + "/api/admin/jtBusiness/category/delete",
  290. data: {
  291. id: deletedIds[0]
  292. }
  293. }).done(function (data) {
  294. if (!data.error.length) {
  295. message.success('删除成功!');
  296. this.setState({
  297. loading: false,
  298. });
  299. } else {
  300. message.warning(data.error[0].message);
  301. };
  302. this.loadData(this.state.page)
  303. }.bind(this));
  304. },
  305. addClick() {
  306. this.state.RowData = {};
  307. this.setState({
  308. visible: true,
  309. addFirst:0,
  310. name:'',
  311. superId:'',
  312. module:"1"
  313. });
  314. },
  315. //新增保存
  316. addhandleSubmit(e){
  317. e.preventDefault();
  318. this.setState({
  319. loading:true
  320. })
  321. $.ajax({
  322. method: "post",
  323. dataType: "json",
  324. crossDomain: false,
  325. url: globalConfig.context + "/api/admin/jtBusiness/category/apply",
  326. data: {
  327. name:this.state.name,
  328. superId:this.state.superId,
  329. layer:this.state.addFirst?((this.state.recrdAdd.layer)+1):'1',
  330. module:this.state.module
  331. }
  332. }).done(function (data) {
  333. if (!data.error.length) {
  334. message.success('新增成功!');
  335. this.setState({
  336. loading: false,
  337. visible:false
  338. });
  339. } else {
  340. message.warning(data.error[0].message);
  341. };
  342. this.loadData(this.state.page)
  343. }.bind(this));
  344. },
  345. editClick() {
  346. this.state.RowData = {};
  347. this.setState({
  348. editvisible: true
  349. });
  350. },
  351. detailes(recard){
  352. this.setState({
  353. loading: true,
  354. });
  355. $.ajax({
  356. method: "get",
  357. dataType: "json",
  358. crossDomain: false,
  359. url: globalConfig.context + '/api/admin/jtBusiness/category/detail',
  360. data: {
  361. id:recard.id
  362. },
  363. success: function (data) {
  364. if (!data.data) {
  365. if (data.error && data.error.length) {
  366. message.warning(data.error[0].message);
  367. };
  368. } else {
  369. let thisdata=data.data;
  370. this.setState({
  371. id:thisdata.id,//品类id
  372. name:thisdata.name,//品类名称
  373. createTime:thisdata.createTime?(new Date(thisdata.createTime)).toLocaleString():'',
  374. superId:thisdata.superId,//父类id
  375. modules:thisdata.module?thisdata.module.toString():undefined,
  376. pictureUrl: thisdata.imgUrl ? splitUrl(thisdata.imgUrl, ',', globalConfig.avatarHost + '/upload') : [],
  377. number:thisdata.number,
  378. layer:thisdata.layer,
  379. superNameId:thisdata.superId,
  380. moduleNumber:thisdata.module?thisdata.module.toString():undefined,
  381. })
  382. };
  383. }.bind(this),
  384. }).always(function () {
  385. this.setState({
  386. loading: false
  387. });
  388. }.bind(this));
  389. },
  390. handleCancel() {
  391. this.setState({ visible: false })
  392. },
  393. edithandleCancel() {
  394. this.setState({ editvisible: false })
  395. },
  396. search() {
  397. this.loadData();
  398. },
  399. reset() {
  400. this.state.nameSearch = '';//品类名称清零
  401. this.state.layerSearch = undefined;//品类层级清零
  402. this.loadData();
  403. },
  404. searchSwitch() {
  405. this.setState({
  406. searchMore: !this.state.searchMore
  407. });
  408. },
  409. getPictureUrl(e) {
  410. this.setState({ pictureUrl: e });
  411. },
  412. tableRowClick(record, index) {
  413. this.setState({
  414. editvisible: true,
  415. visible:false,
  416. theData:record
  417. });
  418. this.detailes(record)
  419. },
  420. render() {
  421. const FormItem = Form.Item
  422. const rowSelection = {
  423. selectedRowKeys: this.state.selectedRowKeys,
  424. onChange: (selectedRowKeys, selectedRows) => {
  425. this.setState({
  426. selectedRows: selectedRows.slice(-1),
  427. selectedRowKeys: selectedRowKeys.slice(-1)
  428. });
  429. }
  430. };
  431. const hasSelected = this.state.selectedRowKeys.length > 0;
  432. const theData =this.state.theData ||{};
  433. const recrdAdd = this.state.recrdAdd ||{};
  434. const dataMenu =this.state.dataMenu || {};
  435. return (
  436. <div className="user-content" >
  437. <div className="content-title">
  438. <div className="content-title">
  439. <span>项目业务管理</span>
  440. </div>
  441. <div className="user-search">
  442. <Input placeholder="业务品类名称" style={{width:'150px',marginRight:'10px',marginBottom:'10px'}}
  443. value={this.state.nameSearch}
  444. onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} />
  445. <Select placeholder="品类层级"
  446. style={{ width:'200px',marginRight:'10px' }}
  447. value={this.state.layerSearch} onChange={(e)=>{this.setState({layerSearch:e})}}>
  448. <Select.Option value="1">一级</Select.Option>
  449. <Select.Option value="2">二级</Select.Option>
  450. </Select>
  451. <Button type="primary" onClick={this.search} style={{marginRight:'10px'}}>搜索</Button>
  452. <Button onClick={this.reset} style={{marginRight:'10px'}}>重置</Button>
  453. <Popconfirm title="是否删除?" onConfirm={this.delectRow} okText="是" cancelText="否">
  454. <Button style={{marginRight:'10px' ,marginLeft:'10px'}} type="danger"
  455. disabled={!hasSelected}
  456. >删除<Icon type="minus" />
  457. </Button>
  458. </Popconfirm>
  459. <Popconfirm title="是否停用?" onConfirm={this.blockRow} okText="是" cancelText="否">
  460. <Button style={{ background: "#ea0862", border: "none", color: "#fff",marginRight:'10px' ,marginLeft:'10px',display:'none'}}
  461. disabled={!hasSelected}
  462. >停用<Icon type="minus" />
  463. </Button>
  464. </Popconfirm>
  465. <Button type="primary" className="addButton" onClick={this.addClick} style={{float:'right',marginRight:'200px'}}>新增品类<Icon type="plus" /></Button>
  466. </div>
  467. <div className="patent-table">
  468. <Spin spinning={this.state.loading}>
  469. <Table columns={this.state.columns}
  470. dataSource={this.state.dataSource}
  471. rowSelection={rowSelection}
  472. pagination={this.state.pagination}
  473. onRowClick={this.tableRowClick} />
  474. </Spin>
  475. </div>
  476. <div className="patent-desc">
  477. <Modal maskClosable={false} visible={this.state.visible}
  478. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  479. width='420px'
  480. title='新增品类'
  481. footer=''
  482. className="admin-desc-content">
  483. <Form layout="horizontal" onSubmit={(e)=>{this.addhandleSubmit(e,{})}} id="demand-form">
  484. <Spin spinning={this.state.loading}>
  485. <div className="clearfix">
  486. <FormItem
  487. labelCol={{ span: 7 }}
  488. wrapperCol={{ span: 12 }}
  489. label="品类名称" >
  490. <Input placeholder="品类名称" value={this.state.name} style={{width:'94%'}}
  491. onChange={(e)=>{this.setState({name:e.target.value})}} required="required"/>
  492. <span className="mandatory" style={{color:'red',marginLeft:'5px'}}>*</span>
  493. </FormItem>
  494. </div>
  495. <div className="clearfix">
  496. <FormItem
  497. labelCol={{ span: 7 }}
  498. wrapperCol={{ span: 12 }}
  499. label="所属模块" >
  500. {!this.state.addFirst? <Select value ={this.state.module} onChange={(e)=>{this.setState({module:e})}}>
  501. {typeModule.map(item=>{
  502. return <Select.Option key={item.value} value={item.value}>{item.key}</Select.Option>
  503. })}
  504. </Select>:<span>{getTypeModule(recrdAdd.module)}</span>}
  505. </FormItem>
  506. </div>
  507. <div className="clearfix">
  508. <FormItem
  509. labelCol={{ span: 7 }}
  510. wrapperCol={{ span: 12 }}
  511. label="上级品类"
  512. >
  513. <span>{this.state.addFirst?recrdAdd.name:'超级品类'}</span>
  514. </FormItem>
  515. </div>
  516. <FormItem wrapperCol={{ span: 12, offset: 7 }}>
  517. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  518. <Button className="set-submit" type="ghost" onClick={this.handleCancel} style={{marginLeft:'15px'}}>取消</Button>
  519. </FormItem>
  520. </Spin>
  521. </Form >
  522. </Modal>
  523. </div>
  524. <div className="patent-desc">
  525. <Modal maskClosable={false} visible={this.state.editvisible}
  526. onOk={this.checkPatentProcess} onCancel={this.edithandleCancel}
  527. width='600px'
  528. title='编辑品类'
  529. footer=''
  530. className="admin-desc-content">
  531. <Form layout='horizontal' onSubmit={this.edithandleSubmit} id="demand-form">
  532. <Spin spinning={this.state.loading}>
  533. <div className="clearfix">
  534. <FormItem
  535. labelCol={{ span: 7 }}
  536. wrapperCol={{ span: 12 }}
  537. label="品类名称" >
  538. <Input placeholder="组织名称" value={this.state.name}
  539. onChange={(e)=>{this.setState({name:e.target.value})}}/>
  540. </FormItem>
  541. </div>
  542. {theData.layer=='2'?<div className="clearfix">
  543. <FormItem
  544. labelCol={{ span: 7 }}
  545. wrapperCol={{ span: 12 }}
  546. label="上级品类"
  547. >
  548. <Select onChange={(e)=>{this.setState({superNameId:e})}} value={this.state.superNameId}>
  549. {
  550. dataMenu.map(item=>{
  551. return <Select.Option key={item.key} value={item.id}>{item.name}</Select.Option>
  552. })
  553. }
  554. </Select>
  555. </FormItem>
  556. </div>:''}
  557. <div className="clearfix">
  558. <FormItem
  559. labelCol={{ span: 7 }}
  560. wrapperCol={{ span: 12 }}
  561. label="业务品类图标" >
  562. <PicturesWall
  563. fileList={this.getPictureUrl}
  564. pictureUrl={this.state.pictureUrl}
  565. visible={this.props.visible}
  566. />
  567. </FormItem>
  568. </div>
  569. <div className="clearfix">
  570. <FormItem
  571. labelCol={{ span: 7 }}
  572. wrapperCol={{ span: 12 }}
  573. label="品类序号"
  574. >
  575. <span>{theData.sort}</span>
  576. </FormItem>
  577. </div>
  578. <div className="clearfix">
  579. <FormItem
  580. labelCol={{ span: 7 }}
  581. wrapperCol={{ span: 12 }}
  582. label="品类层级"
  583. >
  584. <span>{theData.layerName}</span>
  585. </FormItem>
  586. </div>
  587. <FormItem
  588. labelCol={{ span: 7 }}
  589. wrapperCol={{ span: 12 }}
  590. label="所属模块" >
  591. {theData.layer=='1'?<Select value ={this.state.modules} onChange={(e)=>{this.setState({modules:e})}} style={{width:160}}>
  592. {typeModule.map(item=>{
  593. return <Select.Option key={item.value} value={item.value}>{item.key}</Select.Option>
  594. })}
  595. </Select>:<span>{getTypeModule(this.state.modules)}</span>}
  596. </FormItem>
  597. <div className="clearfix">
  598. <FormItem
  599. labelCol={{ span: 7 }}
  600. wrapperCol={{ span: 12 }}
  601. label="品类编号"
  602. >
  603. <span>{theData.number}</span>
  604. </FormItem>
  605. </div>
  606. <div className="clearfix" >
  607. <FormItem
  608. labelCol={{ span: 7 }}
  609. wrapperCol={{ span: 12 }}
  610. label="创建人"
  611. >
  612. <span>超级管理员</span>
  613. </FormItem>
  614. </div>
  615. <div className="clearfix">
  616. <FormItem
  617. labelCol={{ span: 7 }}
  618. wrapperCol={{ span: 12 }}
  619. label="创建时间"
  620. >
  621. <span>{this.state.createTime}</span>
  622. </FormItem>
  623. </div>
  624. <FormItem wrapperCol={{ span: 12, offset: 7 }}>
  625. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  626. <Button className="set-submit" type="ghost" onClick={this.edithandleCancel} style={{marginLeft:'100px'}}>取消</Button>
  627. </FormItem>
  628. </Spin>
  629. </Form >
  630. </Modal>
  631. </div>
  632. </div>
  633. </div>
  634. );
  635. }
  636. }));
  637. export default BusinessCategory;