newList.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797
  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. Spin,
  12. Table,
  13. message,
  14. DatePicker,
  15. Modal,
  16. Upload,
  17. Popconfirm,
  18. Cascader,
  19. InputNumber,
  20. Radio,
  21. TimePicker,
  22. Tabs,
  23. } from "antd";
  24. import { areaSelect, getProvince } from "@/NewDicProvinceList"; //省市区
  25. import {
  26. getGameState,
  27. splitUrl,
  28. getprovince,
  29. getBuyAuditType,
  30. getStatuslist,
  31. getLvl,
  32. beforeUploadFile,
  33. getSecretType,
  34. } from "@/tools.js";
  35. import Editors from "@/richTextEditors";
  36. const PicturesWall = React.createClass({
  37. getInitialState() {
  38. return {
  39. previewVisible: false,
  40. previewImage: "",
  41. fileList: this.props.pictureUrl,
  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/news/upload"}
  79. data={{ sign: "news_title_picture" }}
  80. listType="picture-card"
  81. fileList={fileList}
  82. onPreview={this.handlePreview}
  83. onChange={this.handleChange}
  84. >
  85. {fileList.length >= 18 ? null : uploadButton}
  86. </Upload>
  87. <Modal
  88. maskClosable={false}
  89. visible={previewVisible}
  90. footer={null}
  91. onCancel={this.handleCancel}
  92. >
  93. <img alt="example" style={{ width: "100%" }} src={previewImage} />
  94. </Modal>
  95. </div>
  96. );
  97. },
  98. });
  99. //主体
  100. const NewList = Form.create()(
  101. React.createClass({
  102. loadData(pageNo) {
  103. this.state.data = [];
  104. this.setState({
  105. loading: true,
  106. page: pageNo,
  107. });
  108. $.ajax({
  109. method: "get",
  110. dataType: "json",
  111. crossDomain: false,
  112. url: globalConfig.context + "/api/admin/news/list",
  113. data: {
  114. pageNo: pageNo || 1,
  115. pageSize: this.state.pagination.pageSize,
  116. type: this.state.typeSearch,
  117. title: this.state.titleSearch,
  118. releaseStatus: this.state.releaseStatusSearch,
  119. startCreateTime: this.state.startCreateTimeSearch,
  120. endCreateTime: this.state.endCreateTimeSearch,
  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. theArr.push({
  132. key: i,
  133. id: thisdata.id,
  134. title: thisdata.title,
  135. type: thisdata.type,
  136. author: thisdata.author,
  137. releaseStatus: thisdata.releaseStatus,
  138. topNumber: thisdata.topNumber,
  139. sortNumber: thisdata.sortNumber,
  140. hotspot: thisdata.hotspot,
  141. releaseDate: thisdata.releaseDate,
  142. userName: thisdata.userName,
  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. content: "<p></p>",
  169. },
  170. classList: [],
  171. titleImg: [],
  172. pagination: {
  173. defaultCurrent: 1,
  174. defaultPageSize: 10,
  175. showQuickJumper: true,
  176. pageSize: 10,
  177. onChange: function (page) {
  178. this.loadData(page);
  179. this.setState({
  180. selectedRowKeys: [],
  181. });
  182. }.bind(this),
  183. showTotal: function (total) {
  184. return "共" + total + "条数据";
  185. },
  186. },
  187. columns: [
  188. {
  189. title: "序号",
  190. dataIndex: "key",
  191. key: "key",
  192. },
  193. {
  194. title: "标题",
  195. dataIndex: "title",
  196. key: "title",
  197. },
  198. {
  199. title: "类型",
  200. dataIndex: "type",
  201. key: "type",
  202. render: (text, record) => {
  203. if (text !== undefined) {
  204. let value = "";
  205. this.state.classList.map((obj) => {
  206. if (obj.showNumber === text) {
  207. value = obj.typeName;
  208. }
  209. });
  210. return value;
  211. }
  212. },
  213. },
  214. {
  215. title: "发布状态",
  216. dataIndex: "releaseStatus",
  217. key: "releaseStatus",
  218. render: (text) => {
  219. return text ? "已发布" : "未发布";
  220. },
  221. },
  222. {
  223. title: "发布时间",
  224. dataIndex: "releaseDate",
  225. key: "releaseDate",
  226. },
  227. {
  228. title: "排序",
  229. dataIndex: "sortNumber",
  230. key: "sortNumber",
  231. },
  232. {
  233. title: "置顶",
  234. dataIndex: "topNumber",
  235. key: "topNumber",
  236. render: (text) => {
  237. return text ? "否" : "是";
  238. },
  239. },
  240. {
  241. title: "操作",
  242. dataIndex: "a",
  243. key: "a",
  244. render: (text, record, index) => {
  245. return (
  246. <div>
  247. {
  248. <Button
  249. type="primary"
  250. onClick={(event) => {
  251. this.stopPropagation(event);
  252. this.tableRowClick(record);
  253. }}
  254. >
  255. 修改
  256. </Button>
  257. }
  258. {
  259. <Popconfirm
  260. okText="确定"
  261. cancelText="取消"
  262. title="是否确认删除?"
  263. onConfirm={() => {
  264. this.delete(record.id);
  265. }}
  266. >
  267. <Button
  268. type="primary"
  269. style={{ marginLeft: "10px" }}
  270. onClick={(event) => {
  271. this.stopPropagation(event);
  272. }}
  273. >
  274. 删除
  275. </Button>
  276. </Popconfirm>
  277. }
  278. </div>
  279. );
  280. },
  281. },
  282. ],
  283. dataSource: [],
  284. };
  285. },
  286. classList(pageNo) {
  287. $.ajax({
  288. method: "get",
  289. dataType: "json",
  290. crossDomain: false,
  291. url: globalConfig.context + "/api/admin/news/ListNewsType",
  292. data: {
  293. pageNo: 1,
  294. pageSize: 99,
  295. },
  296. success: function (data) {
  297. let theArr = [];
  298. if (!data.data || !data.data.list) {
  299. if (data.error && data.error.length) {
  300. message.warning(data.error[0].message);
  301. }
  302. } else {
  303. for (let i = 0; i < data.data.list.length; i++) {
  304. let thisdata = data.data.list[i];
  305. theArr.push({
  306. key: i,
  307. id: thisdata.id,
  308. typeName: thisdata.typeName,
  309. showNumber: thisdata.showNumber,
  310. });
  311. }
  312. this.state.pagination.current = data.data.pageNo;
  313. this.state.pagination.total = data.data.totalCount;
  314. }
  315. this.setState({
  316. classList: theArr,
  317. });
  318. }.bind(this),
  319. }).always(
  320. function () {
  321. this.setState({
  322. loading: false,
  323. });
  324. }.bind(this)
  325. );
  326. },
  327. componentWillMount() {
  328. this.loadData();
  329. this.classList();
  330. },
  331. detailes(record) {
  332. this.setState({
  333. loading: true,
  334. });
  335. $.ajax({
  336. method: "get",
  337. dataType: "json",
  338. crossDomain: false,
  339. url: globalConfig.context + "/api/admin/news/detail",
  340. data: {
  341. id: record.id,
  342. },
  343. success: function (data) {
  344. let theArr = [];
  345. let thisdata = data.data;
  346. if (!data.data || !data.data.list) {
  347. if (data.error && data.error.length) {
  348. message.warning(data.error[0].message);
  349. }
  350. }
  351. this.setState({
  352. titleImg: thisdata.titleImg
  353. ? splitUrl(
  354. thisdata.titleImg,
  355. ",",
  356. globalConfig.avatarHost + "/upload"
  357. )
  358. : [],
  359. });
  360. Object.assign(
  361. this.state.totalData,
  362. {
  363. content: thisdata.content,
  364. createTimes: thisdata.createTimes,
  365. editTimes: thisdata.editTimes,
  366. releaseDates: thisdata.releaseDates,
  367. },
  368. this.state.RowData
  369. );
  370. }.bind(this),
  371. }).always(
  372. function () {
  373. this.setState({
  374. loading: false,
  375. });
  376. }.bind(this)
  377. );
  378. },
  379. stopPropagation(e) {
  380. e.stopPropagation();
  381. e.nativeEvent.stopImmediatePropagation();
  382. },
  383. //项目列表整行点击
  384. tableRowClick(record, index) {
  385. this.state.RowData = record;
  386. this.setState({
  387. editvisible: true,
  388. });
  389. this.detailes(record);
  390. },
  391. edithandleCancel(e) {
  392. this.setState(
  393. {
  394. editvisible: false,
  395. },
  396. () => {
  397. this.addReset();
  398. }
  399. );
  400. this.loadData();
  401. },
  402. search() {
  403. this.loadData();
  404. },
  405. add() {
  406. this.setState({
  407. editvisible: true,
  408. flag: false,
  409. });
  410. },
  411. addNew() {
  412. let theorgCodeUrl = [];
  413. if (this.state.titleImg.length) {
  414. let picArr = [];
  415. this.state.titleImg.map(function (item) {
  416. if (
  417. item.response &&
  418. item.response.data &&
  419. item.response.data.length
  420. ) {
  421. picArr.push(item.response.data);
  422. }
  423. });
  424. theorgCodeUrl = picArr.join(",");
  425. }
  426. this.setState({
  427. loading: true,
  428. });
  429. if (!this.state.flag) {
  430. this.change("auditStatus", 2);
  431. }
  432. if (theorgCodeUrl.length) {
  433. this.change("titleImg", theorgCodeUrl);
  434. } else {
  435. this.change("titleImg", []);
  436. }
  437. $.ajax({
  438. method: "post",
  439. dataType: "json",
  440. crossDomain: false,
  441. url: this.state.flag
  442. ? "/api/admin/news/update"
  443. : "/api/admin/news/apply",
  444. data: this.state.totalData,
  445. }).done(
  446. function (data) {
  447. this.setState({
  448. loading: false,
  449. });
  450. if (!data.error.length) {
  451. message.success("保存成功!");
  452. this.cancelAdd();
  453. } else {
  454. message.warning(data.error[0].message);
  455. }
  456. }.bind(this)
  457. );
  458. },
  459. saveNew() {
  460. this.change("releaseStatus", 0, () => {
  461. this.addNew();
  462. });
  463. },
  464. issueNew() {
  465. this.change("releaseStatus", 1, () => {
  466. this.addNew();
  467. });
  468. },
  469. delete(id) {
  470. this.setState({
  471. loading: true,
  472. });
  473. $.ajax({
  474. method: "post",
  475. dataType: "json",
  476. crossDomain: false,
  477. url: "/api/admin/news/deleteById",
  478. data: {
  479. id: id,
  480. },
  481. }).done(
  482. function (data) {
  483. this.setState({
  484. loading: false,
  485. });
  486. if (!data.error.length) {
  487. message.success("删除成功!");
  488. this.loadData();
  489. } else {
  490. message.warning(data.error[0].message);
  491. }
  492. }.bind(this)
  493. );
  494. },
  495. cancelAdd() {
  496. this.setState(
  497. {
  498. editvisible: false,
  499. },
  500. () => {
  501. this.setState({
  502. flag: true,
  503. });
  504. this.addReset();
  505. }
  506. );
  507. this.loadData();
  508. },
  509. //新增框的清零
  510. addReset() {
  511. this.setState({
  512. titleImg: [],
  513. totalData: {
  514. content: "<p></p>",
  515. },
  516. });
  517. },
  518. //搜索部分的清零
  519. reset() {
  520. this.setState({
  521. releaseStatusSearch: undefined,
  522. typeSearch: undefined,
  523. startCreateTimeSearch: undefined,
  524. endCreateTimeSearch: undefined,
  525. titleSearch: undefined,
  526. });
  527. this.loadData();
  528. },
  529. getOrgCodeUrl(e) {
  530. this.setState({ titleImg: e });
  531. },
  532. change(key, e, f) {
  533. if (f === undefined) {
  534. this.state.totalData[key] = e;
  535. this.setState({
  536. totalData: this.state.totalData,
  537. });
  538. } else if (typeof f === "function") {
  539. this.state.totalData[key] = e;
  540. this.setState(
  541. {
  542. totalData: this.state.totalData,
  543. },
  544. f
  545. );
  546. }
  547. },
  548. render() {
  549. const FormItem = Form.Item;
  550. const rowSelection = {
  551. selectedRowKeys: this.state.selectedRowKeys,
  552. onChange: (selectedRowKeys, selectedRows) => {
  553. this.setState({
  554. selectedRows: selectedRows.slice(-1),
  555. selectedRowKeys: selectedRowKeys.slice(-1),
  556. });
  557. },
  558. };
  559. let data = this.state.totalData;
  560. const { TextArea } = Input; //文本域
  561. const { TabPane } = Tabs; //标签页
  562. const { MonthPicker, RangePicker, WeekPicker } = DatePicker; //日期输入框
  563. return (
  564. <div className="user-content">
  565. <div className="content-title">
  566. <span>新闻列表管理</span>
  567. <div className="user-search">
  568. <Input
  569. placeholder="企业名称"
  570. style={{
  571. width: "150px",
  572. marginRight: "10px",
  573. marginBottom: "10px",
  574. }}
  575. value={this.state.nameSearch}
  576. onChange={(e) => {
  577. this.setState({ nameSearch: e.target.value });
  578. }}
  579. />
  580. <Button
  581. type="primary"
  582. onClick={this.search}
  583. style={{ marginRight: "10px" }}
  584. >
  585. 搜索
  586. </Button>
  587. <Button onClick={this.reset} style={{ marginRight: "10px" }}>
  588. 重置
  589. </Button>
  590. <Button
  591. type="primary"
  592. onClick={this.add}
  593. style={{ marginLeft: "100px" }}
  594. >
  595. 新增新闻
  596. </Button>
  597. </div>
  598. <div className="patent-table">
  599. <Spin spinning={this.state.loading}>
  600. <Table
  601. columns={this.state.columns}
  602. dataSource={this.state.dataSource}
  603. pagination={this.state.pagination}
  604. onRowClick={this.tableRowClick}
  605. />
  606. </Spin>
  607. </div>
  608. </div>
  609. <div className="patent-desc">
  610. <Modal
  611. className="customeDetails"
  612. title={this.state.flag ? "新闻列表详情" : "新增新闻列表"}
  613. width="1000px"
  614. visible={this.state.editvisible}
  615. onOk={this.edithandleCancel}
  616. onCancel={
  617. this.state.flag ? this.edithandleCancel : this.cancelAdd
  618. }
  619. footer=""
  620. >
  621. <Form
  622. layout="horizontal"
  623. onSubmit={this.edithandleSubmit}
  624. id="demand-form"
  625. >
  626. <Spin spinning={this.state.loading}>
  627. <div className="clearfix">
  628. <FormItem
  629. className="half-item"
  630. labelCol={{ span: 8 }}
  631. wrapperCol={{ span: 12 }}
  632. label="新闻标题"
  633. >
  634. <Input
  635. placeholder="请输入新闻标题"
  636. value={data.title}
  637. onChange={(e) => {
  638. this.change("title", e.target.value);
  639. }}
  640. style={{ width: "240px" }}
  641. />
  642. </FormItem>
  643. <FormItem
  644. className="half-item"
  645. labelCol={{ span: 8 }}
  646. wrapperCol={{ span: 12 }}
  647. label="新闻类别"
  648. >
  649. <Select
  650. value={data.type}
  651. style={{ width: 120 }}
  652. placeholder="请选择新闻类别"
  653. onChange={(e) => {
  654. this.change("type", e);
  655. }}
  656. >
  657. {this.state.classList.map((obj) => {
  658. return (
  659. <Option value={obj.showNumber}>
  660. {obj.typeName}
  661. </Option>
  662. );
  663. })}
  664. </Select>
  665. </FormItem>
  666. <FormItem
  667. className="half-item"
  668. labelCol={{ span: 8 }}
  669. wrapperCol={{ span: 12 }}
  670. label="排序"
  671. >
  672. <Input
  673. placeholder="请输入排序"
  674. value={data.sortNumber}
  675. onChange={(e) => {
  676. this.change("sortNumber", e.target.value);
  677. }}
  678. style={{ width: "240px" }}
  679. />
  680. </FormItem>
  681. <FormItem
  682. className="half-item"
  683. labelCol={{ span: 8 }}
  684. wrapperCol={{ span: 12 }}
  685. label="是否置顶"
  686. >
  687. <Radio.Group
  688. onChange={(e) => {
  689. this.change("topNumber", e.target.value);
  690. }}
  691. value={data.topNumber}
  692. >
  693. <Radio value={0}>是</Radio>
  694. <Radio value={1}>否</Radio>
  695. </Radio.Group>
  696. </FormItem>
  697. </div>
  698. <div className="clearfix">
  699. <FormItem
  700. labelCol={{ span: 4 }}
  701. wrapperCol={{ span: 18 }}
  702. label="新闻大图"
  703. >
  704. <PicturesWall
  705. fileList={this.getOrgCodeUrl}
  706. pictureUrl={this.state.titleImg}
  707. />
  708. <p>图片建议:要清晰。</p>
  709. </FormItem>
  710. </div>
  711. <div className="clearfix">
  712. <FormItem
  713. labelCol={{ span: 4 }}
  714. wrapperCol={{ span: 18 }}
  715. label="新闻内容"
  716. >
  717. <Editors
  718. textContent={data.content}
  719. uploadUrl={
  720. "/api/admin/militaryEnterprises/uploadPicture"
  721. }
  722. uploadSign={"enterprises_pucture"}
  723. handleRichText={(value) => {
  724. this.change("content", value);
  725. }}
  726. visible={data.visible}
  727. />
  728. </FormItem>
  729. </div>
  730. <div className="clearfix">
  731. {!data.releaseStatus ? (
  732. <Button
  733. type="primary"
  734. size="large"
  735. onClick={this.saveNew}
  736. style={{
  737. float: "right",
  738. marginRight: "80px",
  739. marginTop: "20px",
  740. }}
  741. >
  742. 保存
  743. </Button>
  744. ) : (
  745. <Button
  746. type="primary"
  747. size="large"
  748. onClick={this.saveNew}
  749. style={{
  750. float: "right",
  751. marginRight: "80px",
  752. marginTop: "20px",
  753. background: "coral",
  754. border: "none",
  755. }}
  756. >
  757. 撤回
  758. </Button>
  759. )}
  760. <Button
  761. type="primary"
  762. size="large"
  763. onClick={this.issueNew}
  764. style={{
  765. float: "right",
  766. marginRight: "20px",
  767. marginTop: "20px",
  768. }}
  769. >
  770. 保存并发布
  771. </Button>
  772. </div>
  773. </Spin>
  774. </Form>
  775. </Modal>
  776. </div>
  777. </div>
  778. );
  779. },
  780. })
  781. );
  782. export default NewList;