advertisementList.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818
  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 if (text == 7) {
  207. return <span>网站地图</span>;
  208. } else {
  209. return "未知"
  210. }
  211. }
  212. },
  213. {
  214. title: "广告缩略图",
  215. dataIndex: "bannerUrl",
  216. key: "bannerUrl",
  217. render: url => {
  218. let path = getPicPath(globalConfig.avatarUploadHost, url);
  219. return (
  220. <div style={{ textAlign: "center" }}>
  221. <img src={path} style={{ width: "100px", height: 50 }} />
  222. <Button
  223. className="buttonimg"
  224. style={{ marginLeft: 10 }}
  225. onClick={e => {
  226. this.stopPropagation(e);
  227. this.maximg(path);
  228. }}
  229. >
  230. 查看大图
  231. </Button>
  232. </div>
  233. );
  234. }
  235. },
  236. {
  237. title: "跳转链接",
  238. dataIndex: "jumpUrl",
  239. key: "jumpUrl",
  240. width: 200,
  241. render: r => {
  242. return (
  243. <span style={{
  244. width: 200,
  245. overflow: 'hidden',
  246. whiteSpace: 'nowrap',
  247. display: 'block',
  248. textOverflow: 'ellipsis',
  249. }}>{r === 'javascript:;' ? '' : r}</span>
  250. )
  251. }
  252. },
  253. {
  254. title: "是否显示",
  255. dataIndex: "display",
  256. key: "display",
  257. render: s => {
  258. return s ? (
  259. <Tag color="#87d068">显示</Tag>
  260. ) : (
  261. <Tag color="#f50">未显示</Tag>
  262. );
  263. }
  264. },
  265. {
  266. title: "排序",
  267. dataIndex: "sort",
  268. key: "sort"
  269. },
  270. {
  271. title: "操作",
  272. dataIndex: "c",
  273. render: (text, record, index) => {
  274. return (
  275. <div>
  276. {
  277. <Button
  278. type="primary"
  279. onClick={event => {
  280. this.stopPropagation(event);
  281. this.tableRowClick(record);
  282. }}
  283. >
  284. 编辑
  285. </Button>
  286. }
  287. {
  288. <Popconfirm
  289. okText="确定"
  290. cancelText="取消"
  291. title="您确定删除?删除后,广告将不再显示"
  292. onConfirm={() => {
  293. this.delete(record.id);
  294. }}
  295. >
  296. <Button
  297. type="danger"
  298. style={{ marginLeft: "10px" }}
  299. onClick={event => {
  300. this.stopPropagation(event);
  301. }}
  302. >
  303. 删除
  304. </Button>
  305. </Popconfirm>
  306. }
  307. {!record.display ? (
  308. <Button
  309. type="primary"
  310. style={{ marginLeft: "10px" }}
  311. onClick={event => {
  312. this.stopPropagation(event);
  313. this.edit(record, "1");
  314. }}
  315. >
  316. 显示
  317. </Button>
  318. ) : (
  319. <Button
  320. type="primary"
  321. style={{ marginLeft: "10px" }}
  322. onClick={event => {
  323. this.stopPropagation(event);
  324. this.edit(record, "0");
  325. }}
  326. >
  327. 隐藏
  328. </Button>
  329. )}
  330. </div>
  331. );
  332. }
  333. }
  334. ],
  335. //数据列表
  336. dataSource: [
  337. ]
  338. };
  339. },
  340. componentWillMount() {
  341. this.loadData();
  342. },
  343. detailes(record) {
  344. this.setState({
  345. loading: true
  346. });
  347. $.ajax({
  348. method: "get",
  349. dataType: "json",
  350. crossDomain: false,
  351. url: globalConfig.context + "/api/admin/banners/selectBanners",
  352. data: {
  353. id: record.id
  354. },
  355. success: function (data) {
  356. let thisdata = data.data;
  357. this.setState({
  358. id: thisdata.id,
  359. title: thisdata.title,
  360. jumpUrl: thisdata.jumpUrl === 'javascript:;' ? undefined : thisdata.jumpUrl,
  361. bannerUrl: thisdata.bannerUrl
  362. ? splitUrl(thisdata.bannerUrl, ",", globalConfig.avatarUploadHost)
  363. : [],
  364. sortNumber: thisdata.sort,
  365. display: thisdata.display,
  366. position: thisdata.position
  367. });
  368. }.bind(this)
  369. }).always(
  370. function () {
  371. this.setState({
  372. loading: false
  373. });
  374. }.bind(this)
  375. );
  376. },
  377. //点击大图
  378. maximg(url) {
  379. this.setState({
  380. imgeditvisible: true,
  381. maximg: url
  382. });
  383. },
  384. //删除按钮
  385. delete(id) {
  386. $.ajax({
  387. method: "post",
  388. dataType: "json",
  389. crossDomain: false,
  390. url: globalConfig.context + "/api/admin/banners/deleteBanners",
  391. data: {
  392. id
  393. },
  394. success: function (data) {
  395. this.loadData();
  396. }.bind(this)
  397. }).always(
  398. function () {
  399. this.setState({
  400. loading: false
  401. });
  402. }.bind(this)
  403. );
  404. },
  405. //阻止默认冒泡
  406. stopPropagation(e) {
  407. e.stopPropagation();
  408. e.nativeEvent.stopImmediatePropagation();
  409. },
  410. imghandleCancel() {
  411. this.setState({
  412. imgeditvisible: false
  413. });
  414. },
  415. //项目列表整行点击
  416. tableRowClick(record, index) {
  417. this.state.RowData = record;
  418. this.setState({
  419. editvisible: true
  420. });
  421. this.detailes(record);
  422. },
  423. edithandleCancel(e) {
  424. this.setState(
  425. {
  426. editvisible: false
  427. },
  428. () => {
  429. this.addReset();
  430. }
  431. );
  432. this.loadData();
  433. },
  434. search() {
  435. this.loadData();
  436. },
  437. add() {
  438. this.setState({
  439. editvisible: true,
  440. flag: false
  441. });
  442. this.addReset();
  443. },
  444. cancelAdd() {
  445. this.setState(
  446. {
  447. editvisible: false
  448. },
  449. () => {
  450. this.setState({
  451. flag: true
  452. });
  453. this.addReset();
  454. }
  455. );
  456. this.loadData();
  457. },
  458. edit(record, display) {
  459. if (!display) {
  460. if (!this.state.bannerUrl || !this.state.bannerUrl.length) {
  461. message.warning("请上传图片!");
  462. return;
  463. }
  464. if (!this.state.title) {
  465. message.warning("请填写广告标题");
  466. return;
  467. }
  468. }
  469. $.ajax({
  470. method: "post",
  471. dataType: "json",
  472. url: globalConfig.context + "/api/admin/banners/updateBanners",
  473. data: {
  474. id: record ? record.id : this.state.id,
  475. sort: this.state.sortNumber,
  476. display: display || this.state.display,
  477. position: this.state.position,
  478. bannerUrl: this.state.bannerUrl
  479. ? this.state.bannerUrl[0].response.data
  480. : undefined,
  481. title: this.state.title,
  482. jumpUrl: this.state.jumpUrl || 'javascript:;',
  483. },
  484. success: function (data) {
  485. let theArr = [];
  486. if (data.error.length || data.data.list == "") {
  487. if (data.error && data.error.length) {
  488. message.warning(data.error[0].message);
  489. }
  490. } else {
  491. this.cancelAdd();
  492. }
  493. }.bind(this)
  494. }).always(
  495. function () {
  496. this.setState({
  497. loading: false
  498. });
  499. }.bind(this)
  500. );
  501. },
  502. addNew() {
  503. if (!this.state.bannerUrl || !this.state.bannerUrl.length) {
  504. message.warning("请上传图片!");
  505. return;
  506. }
  507. if (!this.state.title) {
  508. message.warning("请填写广告标题");
  509. return;
  510. }
  511. this.setState({
  512. loading: true
  513. });
  514. $.ajax({
  515. method: "post",
  516. dataType: "json",
  517. url: globalConfig.context + "/api/admin/banners/addBanners",
  518. data: {
  519. sort: this.state.sortNumber,
  520. display: this.state.display,
  521. position: this.state.position,
  522. bannerUrl: this.state.bannerUrl
  523. ? this.state.bannerUrl[0].response.data
  524. : undefined,
  525. title: this.state.title,
  526. jumpUrl: this.state.jumpUrl || 'javascript:;',
  527. },
  528. success: function (data) {
  529. this.setState({
  530. loading: false
  531. });
  532. let theArr = [];
  533. if (data.error.length || data.data.list == "") {
  534. if (data.error && data.error.length) {
  535. message.warning(data.error[0].message);
  536. }
  537. } else {
  538. this.loadData();
  539. this.cancelAdd();
  540. }
  541. }.bind(this)
  542. }).always(
  543. function () {
  544. this.setState({
  545. loading: false
  546. });
  547. }.bind(this)
  548. );
  549. },
  550. //新增框的清零
  551. addReset() {
  552. this.setState({
  553. bannerUrl: undefined,
  554. title: undefined,
  555. jumpUrl: undefined,
  556. sortNumber: undefined,
  557. display: 1,
  558. position: "0"
  559. });
  560. },
  561. //搜索部分的清零
  562. reset() {
  563. this.state.positionSearch = undefined;
  564. this.loadData();
  565. },
  566. imgOk() {
  567. this.setState({
  568. imgeditvisible: false
  569. });
  570. },
  571. getOrgCodeUrl(e) {
  572. this.setState({ bannerUrl: e });
  573. },
  574. render() {
  575. const FormItem = Form.Item;
  576. const rowSelection = {
  577. selectedRowKeys: this.state.selectedRowKeys,
  578. onChange: (selectedRowKeys, selectedRows) => {
  579. this.setState({
  580. selectedRows: selectedRows.slice(-1),
  581. selectedRowKeys: selectedRowKeys.slice(-1)
  582. });
  583. }
  584. };
  585. const { TextArea } = Input; //文本域
  586. const { TabPane } = Tabs; //标签页
  587. const { MonthPicker, RangePicker, WeekPicker } = DatePicker; //日期输入框
  588. const dateFormat = "YYYY/MM/DD"; //日期格式
  589. const theData = this.state.data || {};
  590. return (
  591. <div className="user-content">
  592. <div className="content-title">
  593. <span>广告列表</span>
  594. <div className="user-search">
  595. <Select
  596. placeholder="请选择广告位置"
  597. style={{ width: 150 }}
  598. value={
  599. this.state.positionSearch
  600. ? this.state.positionSearch + ""
  601. : []
  602. }
  603. onChange={e => {
  604. this.setState({
  605. positionSearch: e
  606. });
  607. }}
  608. >
  609. <Option value="0">首页</Option>
  610. <Option value="1">产品中心</Option>
  611. <Option value="2">战略合作</Option>
  612. <Option value="3">服务客户</Option>
  613. <Option value="4">新闻动态</Option>
  614. <Option value="5">关于科德</Option>
  615. <Option value="6">联系我们</Option>
  616. <Option value="7">网站地图</Option>
  617. </Select>
  618. <Button
  619. type="primary"
  620. onClick={this.search}
  621. style={{ marginRight: "10px" }}
  622. >
  623. 搜索
  624. </Button>
  625. <Button onClick={this.reset} style={{ marginRight: "10px" }}>
  626. 重置
  627. </Button>
  628. <Button
  629. type="primary"
  630. onClick={this.add}
  631. style={{ marginLeft: "100px" }}
  632. >
  633. 新增广告
  634. </Button>
  635. </div>
  636. <div className="patent-table">
  637. <SpinContainer spinning={this.state.loading}>
  638. <Table
  639. columns={this.state.columns}
  640. dataSource={this.state.dataSource}
  641. onRowClick={this.tableRowClick}
  642. pagination={this.state.pagination}
  643. bordered
  644. size="small"
  645. />
  646. </SpinContainer>
  647. </div>
  648. </div>
  649. <div className="patent-desc">
  650. <Modal
  651. className="customeDetails"
  652. title={this.state.flag ? "广告详情" : "新增广告"}
  653. visible={this.state.editvisible}
  654. onOk={this.edithandleCancel}
  655. width={"500px"}
  656. onCancel={
  657. this.state.flag ? this.edithandleCancel : this.cancelAdd
  658. }
  659. footer=""
  660. >
  661. <Form
  662. layout="horizontal"
  663. onSubmit={this.edithandleSubmit}
  664. id="demand-form"
  665. >
  666. <SpinContainer spinning={this.state.loading}>
  667. <div className="clearfix">
  668. <FormItem
  669. className="half-item"
  670. labelCol={{ span: 8 }}
  671. wrapperCol={{ span: 12 }}
  672. label="广告位置"
  673. >
  674. <Select
  675. placeholder="请选择广告位置"
  676. style={{ width: 120 }}
  677. value={this.state.position + ""}
  678. onChange={e => {
  679. this.setState({
  680. position: e
  681. });
  682. }}
  683. >
  684. <Option value="0">首页</Option>
  685. <Option value="1">产品中心</Option>
  686. <Option value="2">战略合作</Option>
  687. <Option value="3">服务客户</Option>
  688. <Option value="4">新闻动态</Option>
  689. <Option value="5">关于科德</Option>
  690. <Option value="6">联系我们</Option>
  691. <Option value="7">网站地图</Option>
  692. </Select>
  693. </FormItem>
  694. <div className="clearfix">
  695. <FormItem
  696. className="half-item"
  697. labelCol={{ span: 8 }}
  698. wrapperCol={{ span: 12 }}
  699. label="广告标题"
  700. >
  701. <Input
  702. placeholder="请输入标题"
  703. value={this.state.title}
  704. onChange={e => {
  705. this.setState({ title: e.target.value });
  706. }}
  707. style={{ width: "240px" }}
  708. />
  709. </FormItem>
  710. </div>
  711. <div className="clearfix">
  712. <FormItem
  713. className="half-item"
  714. labelCol={{ span: 8 }}
  715. wrapperCol={{ span: 12 }}
  716. label="跳转链接"
  717. >
  718. <Input
  719. placeholder="请输入跳转链接"
  720. value={this.state.jumpUrl}
  721. onChange={e => {
  722. this.setState({ jumpUrl: e.target.value });
  723. }}
  724. style={{ width: "240px" }}
  725. />
  726. </FormItem>
  727. </div>
  728. <div className="clearfix">
  729. <FormItem
  730. className="half-item"
  731. labelCol={{ span: 8 }}
  732. wrapperCol={{ span: 12 }}
  733. label="排序"
  734. >
  735. <Input
  736. placeholder="请输入排序"
  737. value={this.state.sortNumber}
  738. onChange={e => {
  739. this.setState({ sortNumber: e.target.value });
  740. }}
  741. style={{ width: "240px" }}
  742. />
  743. </FormItem>
  744. </div>
  745. <FormItem
  746. className="half-item"
  747. labelCol={{ span: 8 }}
  748. wrapperCol={{ span: 12 }}
  749. label="是否显示"
  750. >
  751. <Radio.Group
  752. onChange={e => {
  753. this.setState({
  754. display: e.target.value
  755. });
  756. }}
  757. value={this.state.display}
  758. >
  759. <Radio value={1}>是</Radio>
  760. <Radio value={0}>否</Radio>
  761. </Radio.Group>
  762. </FormItem>
  763. </div>
  764. <div className="clearfix">
  765. <FormItem
  766. labelCol={{ span: 4 }}
  767. wrapperCol={{ span: 18 }}
  768. label="广告大图"
  769. >
  770. <PicturesWall
  771. fileList={this.getOrgCodeUrl}
  772. pictureUrl={this.state.bannerUrl}
  773. />
  774. <p>图片尺寸:1920X680 图片建议:要清晰。</p>
  775. </FormItem>
  776. </div>
  777. <div className="clearfix">
  778. <Button
  779. type="primary"
  780. size="large"
  781. onClick={() => {
  782. this.state.flag ? this.edit() : this.addNew();
  783. }}
  784. style={{
  785. display: "block",
  786. margin: "auto"
  787. }}
  788. >
  789. 保存
  790. </Button>
  791. </div>
  792. </SpinContainer>
  793. </Form>
  794. </Modal>
  795. </div>
  796. <Modal
  797. visible={this.state.imgeditvisible}
  798. onCancel={this.imghandleCancel}
  799. onOk={this.imgOk}
  800. >
  801. <img style={{ width: "100%" }} src={this.state.maximg} />
  802. </Modal>
  803. </div>
  804. );
  805. }
  806. })
  807. );
  808. export default AdvertisementList;