advertisementList.jsx 26 KB

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