proservlist.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "react-quill/dist/quill.bubble.css";
  4. import moment from "moment";
  5. import {
  6. Form,
  7. Icon,
  8. Button,
  9. Input,
  10. Select,
  11. Table,
  12. message,
  13. DatePicker,
  14. Modal,
  15. Upload,
  16. Popconfirm,
  17. Cascader,
  18. InputNumber,
  19. Radio,
  20. TimePicker,
  21. Tabs,
  22. Tag
  23. } from "antd";
  24. import { areaSelect, getProvince } from "@/NewDicProvinceList"; //省市区
  25. import {
  26. getGameState,
  27. splitUrl,
  28. getprovince,
  29. getStatuslist,
  30. getLvl,
  31. beforeUploadFile,
  32. getSecretType,
  33. getBuyAuditType,
  34. getPicPath
  35. } from "@/tools.js";
  36. import Img01 from "./image/cgg.jpg";
  37. import Img02 from "./image/ttt.jpg";
  38. import Img03 from "./image/xxxd.jpg";
  39. import Img04 from "./image/bbb.jpg";
  40. import SpinContainer from "../../SpinContainer";
  41. //上传图片组件
  42. const PicturesWall = React.createClass({
  43. getInitialState() {
  44. return {
  45. previewVisible: false,
  46. previewImage: "",
  47. fileList: this.props.pictureUrl,
  48. imgflag: this.props.flagimg
  49. };
  50. },
  51. getDefaultProps() {
  52. return {
  53. changeClick: this.modifyChange
  54. };
  55. },
  56. handleCancel() {
  57. this.setState({ previewVisible: false });
  58. },
  59. handlePreview(file) {
  60. this.setState({
  61. previewImage: file.url || file.thumbUrl,
  62. previewVisible: true
  63. });
  64. },
  65. handleChange(info) {
  66. let fileList = info.fileList;
  67. this.setState({ fileList });
  68. this.props.fileList(fileList);
  69. },
  70. componentWillReceiveProps(nextProps) {
  71. this.state.fileList = nextProps.pictureUrl;
  72. },
  73. render() {
  74. const { previewVisible, previewImage, fileList, flagimg } = this.state;
  75. const uploadButton = (
  76. <div>
  77. <Icon type="plus" />
  78. <div className="ant-upload-text">点击上传</div>
  79. </div>
  80. );
  81. return (
  82. <div style={{ display: "inline-block" }} className={flagimg}>
  83. <Upload
  84. beforeUpload={beforeUploadFile}
  85. action={globalConfig.context + "/api/admin/organization/uploadFile"}
  86. data={{ sign: "purchase_picture" }}
  87. listType="picture-card"
  88. fileList={fileList}
  89. onPreview={this.handlePreview}
  90. onChange={this.handleChange}
  91. >
  92. {fileList && fileList.length >= 1 ? null : uploadButton}
  93. </Upload>
  94. <Modal
  95. maskClosable={false}
  96. visible={previewVisible}
  97. footer={null}
  98. onCancel={this.handleCancel}
  99. >
  100. <img alt="" style={{ width: "100%" }} src={previewImage} />
  101. </Modal>
  102. </div>
  103. );
  104. }
  105. });
  106. //主体
  107. const Proservlist = Form.create()(
  108. React.createClass({
  109. loadData(pageNo) {
  110. this.state.data = [];
  111. this.setState({
  112. loading: true,
  113. page: pageNo
  114. });
  115. $.ajax({
  116. method: "get",
  117. dataType: "json",
  118. crossDomain: false,
  119. url: globalConfig.context + "/api/admin/organization/listOrganization",
  120. data: {
  121. pageNo: pageNo || this.state.pagination.current || 1,
  122. pageSize: this.state.pagination.pageSize,
  123. name: this.state.nameSearch
  124. },
  125. success: function (data) {
  126. let theArr = [];
  127. if (!data.data || !data.data.list) {
  128. if (data.error && data.error.length) {
  129. message.warning(data.error[0].message);
  130. }
  131. } else {
  132. for (let i = 0; i < data.data.list.length; i++) {
  133. let thisdata = data.data.list[i];
  134. theArr.push({
  135. key: i + 1,
  136. id: thisdata.id,
  137. name: thisdata.name,
  138. pictureUrl: thisdata.pictureUrl,
  139. releaseStatus: thisdata.releaseStatus,
  140. status: thisdata.status,
  141. sort: thisdata.sort,
  142. releaseTimeConvert: thisdata.releaseTimeConvert
  143. });
  144. }
  145. this.state.pagination.current = data.data.pageNo;
  146. this.state.pagination.total = data.data.totalCount;
  147. }
  148. this.setState({
  149. dataSource: theArr,
  150. pagination: this.state.pagination
  151. });
  152. }.bind(this)
  153. }).always(
  154. function () {
  155. this.setState({
  156. loading: false
  157. });
  158. }.bind(this)
  159. );
  160. },
  161. getInitialState() {
  162. return {
  163. loading: false,
  164. flag: true,
  165. timesArr: [],
  166. totalData: {
  167. mark: false
  168. },
  169. purchaseImg: [],
  170. pagination: {
  171. defaultCurrent: 1,
  172. defaultPageSize: 10,
  173. showQuickJumper: true,
  174. pageSize: 10,
  175. onChange: function (page) {
  176. this.loadData(page);
  177. this.setState({
  178. selectedRowKeys: []
  179. });
  180. }.bind(this),
  181. showTotal: function (total) {
  182. return "共" + total + "条数据";
  183. }
  184. },
  185. //数据类型
  186. columns: [
  187. {
  188. title: "序号",
  189. dataIndex: "key",
  190. key: "key"
  191. },
  192. {
  193. title: "是否发布",
  194. dataIndex: "releaseStatus",
  195. key: "releaseStatus",
  196. render: s => {
  197. return s ? (
  198. <Tag color="#87d068">已发布</Tag>
  199. ) : (
  200. <Tag color="#f50">未发布</Tag>
  201. );
  202. }
  203. },
  204. {
  205. title: "是否首页",
  206. dataIndex: "status",
  207. key: "status",
  208. render: s => {
  209. return s ? (
  210. <Tag color="#87d068">是</Tag>
  211. ) : (
  212. <Tag color="#f50">否</Tag>
  213. );
  214. }
  215. },
  216. {
  217. title: "战略合作机构",
  218. dataIndex: "name",
  219. key: "name"
  220. },
  221. {
  222. title: "LOGO缩率图",
  223. dataIndex: "pictureUrl",
  224. key: "pictureUrl",
  225. render: url => {
  226. let path = getPicPath(globalConfig.avatarUploadHost, url);
  227. return (
  228. <div style={{ textAlign: "center" }}>
  229. <img src={path} style={{ width: "100px", height: 50 }} />
  230. <Button
  231. className="buttonimg"
  232. style={{ marginLeft: 10 }}
  233. onClick={e => {
  234. e.stopPropagation();
  235. this.maximg(path);
  236. }}
  237. >
  238. 查看大图
  239. </Button>
  240. </div>
  241. );
  242. }
  243. },
  244. {
  245. title: "排序",
  246. dataIndex: "sort",
  247. key: "sort"
  248. },
  249. {
  250. title: "操作",
  251. dataIndex: "ads",
  252. key: "ads",
  253. render: (text, record, index) => {
  254. return (
  255. <div>
  256. {
  257. <Button
  258. type="primary"
  259. onClick={event => {
  260. this.stopPropagation(event);
  261. this.edit(record);
  262. }}
  263. >
  264. 编辑
  265. </Button>
  266. }
  267. {
  268. <Popconfirm
  269. okText="确定"
  270. cancelText="取消"
  271. title="您确定删除?删除后,合作信息将不再显示"
  272. onConfirm={() => {
  273. this.delete(record.id);
  274. }}
  275. >
  276. <Button
  277. type="danger"
  278. style={{ marginLeft: "10px" }}
  279. onClick={event => {
  280. this.stopPropagation(event);
  281. }}
  282. >
  283. 删除
  284. </Button>
  285. </Popconfirm>
  286. }
  287. {
  288. <Button
  289. type="primary"
  290. style={{ marginLeft: "10px" }}
  291. onClick={e => {
  292. e.stopPropagation();
  293. if (record.status) {
  294. this.toTop(record, 0);
  295. } else {
  296. this.toTop(record, 1);
  297. }
  298. }}
  299. >
  300. {record.status ? "从首页撤下" : "推荐至首页"}
  301. </Button>
  302. }
  303. <Button
  304. type="primary"
  305. style={{ marginLeft: "10px" }}
  306. onClick={event => {
  307. this.stopPropagation(event);
  308. if (record.releaseStatus) {
  309. this.remove(record, 0);
  310. } else {
  311. this.remove(record, 1);
  312. }
  313. }}
  314. >
  315. {record.releaseStatus ? "撤销发布" : "发布"}
  316. </Button>
  317. </div>
  318. );
  319. }
  320. }
  321. ],
  322. //数据列表
  323. dataSource: []
  324. };
  325. },
  326. componentWillMount() {
  327. this.loadData();
  328. },
  329. stopPropagation(e) {
  330. e.stopPropagation();
  331. e.nativeEvent.stopImmediatePropagation();
  332. },
  333. //点击大图
  334. maximg(url) {
  335. this.setState({
  336. imgeditvisible: true,
  337. maximg: url
  338. });
  339. },
  340. imghandleCancel() {
  341. this.setState({
  342. imgeditvisible: false
  343. });
  344. },
  345. //删除按钮
  346. delete(id) {
  347. $.ajax({
  348. method: "post",
  349. dataType: "json",
  350. crossDomain: false,
  351. url:
  352. globalConfig.context + "/api/admin/organization/deleteOrganization",
  353. data: {
  354. id
  355. },
  356. success: function (data) {
  357. let theArr = [];
  358. if (data.error && data.error.length) {
  359. message.warning(data.error[0].message);
  360. } else {
  361. this.loadData();
  362. }
  363. }.bind(this)
  364. }).always(
  365. function () {
  366. this.setState({
  367. loading: false
  368. });
  369. }.bind(this)
  370. );
  371. },
  372. //项目列表整行点击
  373. tableRowClick(record, index) {
  374. this.state.RowData = record;
  375. this.setState({
  376. editvisible: true
  377. });
  378. this.edit(record);
  379. },
  380. edithandleCancel(e) {
  381. this.setState(
  382. {
  383. editvisible: false
  384. },
  385. () => {
  386. this.addReset();
  387. }
  388. );
  389. this.loadData();
  390. },
  391. search() {
  392. this.loadData();
  393. },
  394. add() {
  395. this.setState({
  396. editvisible: true,
  397. flag: false
  398. });
  399. },
  400. //撤下
  401. remove(record, flag) {
  402. $.ajax({
  403. method: "post",
  404. dataType: "json",
  405. crossDomain: false,
  406. url:
  407. globalConfig.context + "/api/admin/organization/updateOrganization",
  408. data: {
  409. id: record.id,
  410. releaseStatus: flag
  411. },
  412. success: function (data) {
  413. if (data.error && data.error.length) {
  414. message.warning(data.error[0].message);
  415. } else {
  416. this.loadData();
  417. }
  418. }.bind(this)
  419. }).always(
  420. function () {
  421. this.setState({
  422. loading: false
  423. });
  424. }.bind(this)
  425. );
  426. },
  427. addNew(flag) {
  428. this.setState({
  429. loading: true
  430. });
  431. if (this.state.flag) {
  432. $.ajax({
  433. method: "post",
  434. dataType: "json",
  435. crossDomain: false,
  436. url:
  437. globalConfig.context + "/api/admin/organization/updateOrganization",
  438. data: {
  439. id: this.state.id,
  440. name: this.state.name,
  441. releaseStatus: flag,
  442. sort: this.state.sort,
  443. pictureUrl: this.state.pictureUrl
  444. ? this.state.pictureUrl[0].response.data
  445. : undefined
  446. },
  447. success: function (data) {
  448. this.setState({
  449. loading: false
  450. });
  451. if (data.error.length || data.data.list == "") {
  452. if (data.error && data.error.length) {
  453. message.warning(data.error[0].message);
  454. }
  455. } else {
  456. this.edithandleCancel();
  457. }
  458. }.bind(this)
  459. }).always(
  460. function () {
  461. this.setState({
  462. loading: false
  463. });
  464. }.bind(this)
  465. );
  466. } else {
  467. $.ajax({
  468. method: "post",
  469. dataType: "json",
  470. crossDomain: false,
  471. url: globalConfig.context + "/api/admin/organization/addOrganization",
  472. data: {
  473. name: this.state.name,
  474. releaseStatus: flag,
  475. sort: this.state.sort,
  476. pictureUrl: this.state.pictureUrl
  477. ? this.state.pictureUrl[0].response.data
  478. : undefined
  479. },
  480. success: function (data) {
  481. this.setState({
  482. loading: false
  483. });
  484. if (data.error.length || data.data.list == "") {
  485. if (data.error && data.error.length) {
  486. message.warning(data.error[0].message);
  487. }
  488. } else {
  489. this.cancelAdd();
  490. }
  491. }.bind(this)
  492. }).always(
  493. function () {
  494. this.setState({
  495. loading: false
  496. });
  497. }.bind(this)
  498. );
  499. }
  500. },
  501. saveNew() {
  502. this.change("releaseStatus", 0, () => {
  503. this.addNew();
  504. });
  505. },
  506. issueNew() {
  507. this.change("releaseStatus", 1, () => {
  508. this.addNew();
  509. });
  510. },
  511. //编辑按钮操作
  512. edit(record, index) {
  513. this.setState({
  514. editvisible: true,
  515. loading: true
  516. });
  517. $.ajax({
  518. method: "get",
  519. dataType: "json",
  520. crossDomain: false,
  521. url:
  522. globalConfig.context + "/api/admin/organization/selectOrganization",
  523. data: {
  524. id: record.id
  525. },
  526. success: function (data) {
  527. if (data.error && data.error.length) {
  528. message.warning(data.error[0].message);
  529. } else {
  530. const thisdata = data.data;
  531. this.setState({
  532. id: thisdata.id,
  533. name: thisdata.name,
  534. pictureUrl: thisdata.pictureUrl
  535. ? splitUrl(
  536. thisdata.pictureUrl,
  537. ",",
  538. globalConfig.avatarUploadHost
  539. )
  540. : [],
  541. releaseStatus: thisdata.releaseStatus,
  542. sort: thisdata.sort,
  543. releaseTimeConvert: thisdata.releaseTimeConvert,
  544. createTimeConvert: thisdata.createTimeConvert
  545. });
  546. }
  547. }.bind(this)
  548. }).always(
  549. function () {
  550. this.setState({
  551. loading: false
  552. });
  553. }.bind(this)
  554. );
  555. },
  556. cancelAdd() {
  557. this.setState(
  558. {
  559. editvisible: false
  560. },
  561. () => {
  562. this.setState({
  563. flag: true
  564. });
  565. this.addReset();
  566. }
  567. );
  568. this.loadData();
  569. },
  570. //新增框的清零
  571. addReset() {
  572. this.setState({
  573. totalData: {},
  574. purchaseImg: []
  575. });
  576. },
  577. //搜索部分的清零
  578. reset() {
  579. this.state.nameSearch = undefined;
  580. this.loadData();
  581. },
  582. getOrgCodeUrl(e) {
  583. this.setState({ pictureUrl: e });
  584. },
  585. toTop(record, num) {
  586. this.setState({
  587. loading: true
  588. });
  589. $.ajax({
  590. method: "post",
  591. dataType: "json",
  592. crossDomain: false,
  593. url:
  594. globalConfig.context + "/api/admin/organization/updateOrganization",
  595. data: {
  596. id: record.id,
  597. status: num
  598. },
  599. success: function (data) {
  600. let theArr = [];
  601. if (data.error && data.error.length) {
  602. message.warning(data.error[0].message);
  603. } else {
  604. this.loadData();
  605. }
  606. }.bind(this)
  607. }).always(
  608. function () {
  609. this.setState({
  610. loading: false
  611. });
  612. }.bind(this)
  613. );
  614. },
  615. render() {
  616. const FormItem = Form.Item;
  617. const rowSelection = {
  618. selectedRowKeys: this.state.selectedRowKeys,
  619. onChange: (selectedRowKeys, selectedRows) => {
  620. this.setState({
  621. selectedRows: selectedRows.slice(-1),
  622. selectedRowKeys: selectedRowKeys.slice(-1)
  623. });
  624. }
  625. };
  626. let data = this.state.totalData;
  627. const { TextArea } = Input; //文本域
  628. const { TabPane } = Tabs; //标签页
  629. const { MonthPicker, RangePicker, WeekPicker } = DatePicker; //日期输入框
  630. return (
  631. <div className="user-content">
  632. <div className="content-title">
  633. <span>战略合作列表</span>
  634. <div className="user-search">
  635. <Input
  636. placeholder="请输入公司关键字"
  637. style={{
  638. width: "150px",
  639. marginRight: "10px",
  640. marginBottom: "10px"
  641. }}
  642. value={this.state.nameSearch}
  643. onChange={e => {
  644. this.setState({ nameSearch: e.target.value });
  645. }}
  646. />
  647. <Button
  648. type="primary"
  649. onClick={this.search}
  650. style={{ marginRight: "10px" }}
  651. >
  652. 搜索
  653. </Button>
  654. <Button onClick={this.reset} style={{ marginRight: "10px" }}>
  655. 重置
  656. </Button>
  657. <Button
  658. type="primary"
  659. onClick={this.add}
  660. style={{ marginLeft: "100px" }}
  661. >
  662. 新增案例
  663. </Button>
  664. </div>
  665. <div className="patent-table">
  666. <SpinContainer spinning={this.state.loading}>
  667. <Table
  668. columns={this.state.columns}
  669. dataSource={this.state.dataSource}
  670. pagination={this.state.pagination}
  671. onRowClick={this.tableRowClick}
  672. size="small"
  673. bordered
  674. />
  675. </SpinContainer>
  676. </div>
  677. </div>
  678. <div className="patent-desc">
  679. <Modal
  680. className="customeDetails"
  681. title={this.state.flag ? "案例详情" : "新增案例信息"}
  682. width="350"
  683. visible={this.state.editvisible}
  684. onOk={this.edithandleCancel}
  685. onCancel={
  686. this.state.flag ? this.edithandleCancel : this.cancelAdd
  687. }
  688. footer=""
  689. >
  690. <Form
  691. layout="horizontal"
  692. onSubmit={this.edithandleSubmit}
  693. id="demand-form"
  694. >
  695. <SpinContainer spinning={this.state.loading}>
  696. <div className="clearfix">
  697. <FormItem
  698. labelCol={{ span: 4 }}
  699. wrapperCol={{ span: 8 }}
  700. label="名称"
  701. >
  702. <Input
  703. placeholder="请输入名称"
  704. value={this.state.name}
  705. onChange={e => {
  706. this.setState({
  707. name: e.target.value
  708. });
  709. }}
  710. style={{ width: "240px" }}
  711. />
  712. </FormItem>
  713. </div>
  714. <div className="clearfix">
  715. <FormItem
  716. labelCol={{ span: 4 }}
  717. wrapperCol={{ span: 8 }}
  718. label="LOGO"
  719. >
  720. <PicturesWall
  721. flagimg={this.state.flag}
  722. fileList={this.getOrgCodeUrl}
  723. pictureUrl={this.state.pictureUrl}
  724. />
  725. <p>建议尺寸:250X86</p>
  726. </FormItem>
  727. </div>
  728. <div className="clearfix">
  729. <FormItem
  730. labelCol={{ span: 4 }}
  731. wrapperCol={{ span: 8 }}
  732. label="排序"
  733. >
  734. <Input
  735. placeholder="请输入数字"
  736. value={this.state.sort}
  737. onChange={e => {
  738. this.setState({
  739. sort: e.target.value
  740. });
  741. }}
  742. style={{ width: "240px" }}
  743. />
  744. </FormItem>
  745. </div>
  746. <div className="clearfix">
  747. <Button
  748. type="primary"
  749. size="large"
  750. onClick={e => {
  751. this.addNew(0);
  752. }}
  753. style={{
  754. float: "right",
  755. marginRight: "80px",
  756. marginTop: "20px"
  757. }}
  758. >
  759. 保存
  760. </Button>
  761. <Button
  762. type="primary"
  763. size="large"
  764. onClick={e => {
  765. this.addNew(1);
  766. }}
  767. style={{
  768. float: "right",
  769. marginRight: "20px",
  770. marginTop: "20px"
  771. }}
  772. >
  773. 保存并发布
  774. </Button>
  775. </div>
  776. </SpinContainer>
  777. </Form>
  778. </Modal>
  779. <Modal
  780. visible={this.state.imgeditvisible}
  781. onCancel={this.imghandleCancel}
  782. onOk={this.imgOk}
  783. >
  784. <img style={{ width: "100%" }} src={this.state.maximg} />
  785. </Modal>
  786. </div>
  787. </div>
  788. );
  789. }
  790. })
  791. );
  792. export default Form.create()(Proservlist);