advertisementList.jsx 23 KB

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