index.jsx 15 KB

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