index.jsx 14 KB

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