index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. import React,{Component} from 'react';
  2. import {Button, Input, Spin, Table, Select, message, Popconfirm, Modal, Tag} from "antd";
  3. import $ from "jquery/src/ajax";
  4. import {
  5. getPicPath
  6. } from "@/tools.js";
  7. import ActivityOperation from './components/activityOperation';
  8. class Activity extends Component{
  9. constructor(props) {
  10. super(props);
  11. this.state={
  12. loading: false,
  13. title: '',
  14. releaseStatus: '',
  15. pageNo: 1,
  16. dataSource: [],
  17. imgeditvisible: false,
  18. maximg: '',
  19. pagination: {
  20. defaultCurrent: 1,
  21. defaultPageSize: 10,
  22. showQuickJumper: true,
  23. pageSize: 10,
  24. onChange: function(page) {
  25. this.loadData(page);
  26. }.bind(this),
  27. showTotal: function(total) {
  28. return "共" + total + "条数据";
  29. }
  30. },
  31. activityId:'',
  32. columns: [
  33. {
  34. title: "序号",
  35. dataIndex: "key",
  36. key: "key",
  37. render: (v,a,k) => {
  38. return (
  39. (this.state.pageNo-1)*10+k+1
  40. )
  41. }
  42. },
  43. {
  44. title: "标题",
  45. dataIndex: "title",
  46. key: "title"
  47. },
  48. {
  49. title: "缩略图",
  50. dataIndex: "pictureUrl",
  51. key: "pictureUrl",
  52. render: url => {
  53. let path = getPicPath(globalConfig.avatarUploadHost, url);
  54. return (
  55. <div style={{
  56. display: 'flex',
  57. alignItems: 'center',
  58. justifyContent: 'center',
  59. }}>
  60. <img src={path} style={{ width: "100px", height: 50 }} />
  61. <Button
  62. className="buttonimg"
  63. style={{ marginLeft: 10 }}
  64. onClick={e => {
  65. e.stopPropagation();
  66. this.setState({
  67. imgeditvisible: true,
  68. maximg: path,
  69. })
  70. }}
  71. >
  72. 查看大图
  73. </Button>
  74. </div>
  75. );
  76. }
  77. },
  78. {
  79. title: "是否发布",
  80. dataIndex: "releaseStatus",
  81. key: "releaseStatus",
  82. render: text => {
  83. return (
  84. <span>
  85. {text === 0 ? <Tag color="#f50">未发布</Tag> : text === 1 ? <Tag color="#87d068">已发布</Tag> : <Tag>未知</Tag>}
  86. </span>
  87. )
  88. }
  89. },
  90. {
  91. title: "排序",
  92. dataIndex: "sort",
  93. key: "sort"
  94. },
  95. {
  96. title: "操作",
  97. dataIndex: "id",
  98. key: "id",
  99. render: (text,record) => {
  100. return (
  101. <span>
  102. <Button
  103. type="primary"
  104. style={{ marginLeft: "10px" }}
  105. onClick={(e) => {
  106. e.stopPropagation();
  107. this.setState({
  108. activityId: text,
  109. visible:true,
  110. })
  111. }}
  112. >
  113. 编辑
  114. </Button>
  115. <Popconfirm
  116. title="您确定删除该新闻吗?"
  117. onConfirm={(e) => {e.stopPropagation();this.delete(text);}}
  118. okText="是"
  119. cancelText="否"
  120. >
  121. <Button
  122. type="danger"
  123. style={{ marginLeft: "10px" }}
  124. onClick={e => {
  125. e.stopPropagation();
  126. }}
  127. >
  128. 删除
  129. </Button>
  130. </Popconfirm>
  131. {(record.releaseStatus === 0 || record.releaseStatus === 1) && <Button
  132. type="primary"
  133. style={{ marginLeft: "10px" }}
  134. onClick={e => {
  135. e.stopPropagation();
  136. this.update(text,record.releaseStatus === 0 ? 1 : 0);
  137. }}
  138. >
  139. {record.releaseStatus === 0 ? '发布' : '隐藏'}
  140. </Button>}
  141. </span>
  142. )
  143. }
  144. },
  145. ],
  146. visible: false,
  147. }
  148. this.loadData = this.loadData.bind(this);
  149. this.reset = this.reset.bind(this);
  150. }
  151. imghandleCancel() {
  152. this.setState({
  153. imgeditvisible: false
  154. });
  155. }
  156. loadData(pageNo) {
  157. this.setState({
  158. loading: true,
  159. });
  160. //发送请求
  161. $.ajax({
  162. method: "get",
  163. dataType: "json",
  164. crossDomain: false,
  165. url: globalConfig.context + "/api/admin/activity/list",
  166. data: {
  167. pageNo: pageNo || 1,
  168. pageSize: this.state.pagination.pageSize,
  169. title: this.state.title || undefined,
  170. releaseStatus: this.state.releaseStatus || undefined,
  171. },
  172. success: function(data) {
  173. if (!data.data || !data.data.list) {
  174. if (data.error && data.error.length) {
  175. message.warning(data.error[0].message);
  176. }
  177. } else {
  178. this.state.pagination.current = data.data.pageNo;
  179. this.state.pagination.total = data.data.totalCount;
  180. this.setState({
  181. pageNo:data.data.pageNo,
  182. dataSource: data.data.list,
  183. pagination: this.state.pagination
  184. });
  185. }
  186. }.bind(this)
  187. }).always(
  188. function() {
  189. this.setState({
  190. loading: false
  191. });
  192. }.bind(this)
  193. );
  194. }
  195. reset(){
  196. this.setState({
  197. title: '',
  198. releaseStatus: '',
  199. pageNo: 1,
  200. },()=>{
  201. this.loadData();
  202. })
  203. }
  204. delete(id){
  205. this.setState({
  206. loading: true
  207. });
  208. $.ajax({
  209. method: "post",
  210. dataType: "json",
  211. crossDomain: false,
  212. url: globalConfig.context + "/api/admin/activity/delete",
  213. data: {
  214. id
  215. },
  216. success: function(data) {
  217. if (data.error && data.error.length) {
  218. message.warning(data.error[0].message);
  219. } else {
  220. message.success('删除成功')
  221. this.loadData(this.state.pageNo);
  222. }
  223. }.bind(this)
  224. }).always(
  225. function() {
  226. this.setState({
  227. loading: false
  228. });
  229. }.bind(this)
  230. );
  231. }
  232. update(id,releaseStatus){
  233. this.setState({
  234. loading: true
  235. });
  236. $.ajax({
  237. method: "post",
  238. dataType: "json",
  239. crossDomain: false,
  240. url: globalConfig.context + "/api/admin/activity/update",
  241. data: {
  242. id,
  243. releaseStatus
  244. },
  245. success: function(data) {
  246. if (data.error && data.error.length) {
  247. message.warning(data.error[0].message);
  248. } else {
  249. message.success('修改成功')
  250. this.loadData(this.state.pageNo);
  251. }
  252. }.bind(this)
  253. }).always(
  254. function() {
  255. this.setState({
  256. loading: false
  257. });
  258. }.bind(this)
  259. );
  260. }
  261. componentDidMount() {
  262. this.loadData();
  263. }
  264. render() {
  265. return (
  266. <div className="user-content">
  267. <div className="content-title">
  268. <span>活动列表</span>
  269. </div>
  270. <div className="user-search">
  271. <Input
  272. placeholder="请输入活动标题"
  273. style={{
  274. width: "150px",
  275. marginRight: "10px",
  276. marginBottom: "10px"
  277. }}
  278. value={this.state.title}
  279. onChange={e => {
  280. this.setState({ title: e.target.value });
  281. }}
  282. />
  283. <Select
  284. placeholder="选择发布状态"
  285. style={{ width: 150, marginRight: '10px' }}
  286. value={this.state.releaseStatus}
  287. onChange={(e) => {
  288. this.setState({ releaseStatus: e })
  289. }}
  290. >
  291. <Select.Option value={0}>未发布</Select.Option>
  292. <Select.Option value={1}>已发布</Select.Option>
  293. </Select>
  294. <Button
  295. type="primary"
  296. onClick={e => {
  297. this.loadData();
  298. }}
  299. style={{ marginRight: "10px" }}
  300. >
  301. 搜索
  302. </Button>
  303. <Button onClick={this.reset} style={{ marginRight: "10px" }}>
  304. 重置
  305. </Button>
  306. <Button
  307. type="primary"
  308. onClick={()=>{
  309. this.setState({
  310. visible: true
  311. })
  312. }}
  313. style={{ marginLeft: "100px" }}
  314. >
  315. 新增活动
  316. </Button>
  317. </div>
  318. {/* 新闻表单 */}
  319. <div className="patent-table">
  320. <Spin spinning={this.state.loading}>
  321. <Table
  322. columns={this.state.columns}
  323. dataSource={this.state.dataSource}
  324. pagination={this.state.pagination}
  325. onRowClick={(value)=>{
  326. this.setState({
  327. activityId: value.id,
  328. visible:true,
  329. })
  330. }}
  331. bordered
  332. size="small"
  333. ellipsis="true"
  334. />
  335. </Spin>
  336. </div>
  337. <Modal
  338. visible={this.state.imgeditvisible}
  339. onCancel={()=>{this.imghandleCancel()}}
  340. onOk={()=>{this.imghandleCancel()}}
  341. footer={false}
  342. >
  343. <img style={{ width: "100%" }} src={this.state.maximg} />
  344. </Modal>
  345. {this.state.visible && <ActivityOperation
  346. id={this.state.activityId}
  347. visible={this.state.visible}
  348. onCancel={()=>{
  349. this.loadData(this.state.pageNo);
  350. this.setState({
  351. activityId: '',
  352. visible:false,
  353. })
  354. }}
  355. />}
  356. </div>
  357. )
  358. }
  359. }
  360. export default Activity;