advertisementList.jsx 24 KB

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