index.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. import React,{Component}from 'react';
  2. import {Button, DatePicker, Icon, Input, message, Modal, Popconfirm, Select, Table} from "antd";
  3. import SpinContainer from "../../../SpinContainer";
  4. import $ from "jquery/src/ajax";
  5. import moment from "moment";
  6. import Add from './add';
  7. import AddShare from './AddShare';
  8. import {getPicPath} from "@/tools.js";
  9. const { RangePicker } = DatePicker;
  10. class Product extends Component{
  11. constructor(props) {
  12. super(props);
  13. this.state={
  14. pageNo: 1,
  15. searchUserName: '',
  16. time: [],
  17. loading: false,
  18. imgeditvisible: false,
  19. maximg: '',
  20. columns:[
  21. {
  22. title: '序号',
  23. dataIndex: 'key',
  24. key: 'key'
  25. },
  26. {
  27. title: '产品分类',
  28. dataIndex: 'typeName',
  29. key: 'typeName'
  30. },
  31. {
  32. title: '产品ID',
  33. dataIndex: 'id',
  34. key: 'id'
  35. },
  36. {
  37. title: '产品缩略图',
  38. dataIndex: 'thumbnailUrl',
  39. key: 'thumbnailUrl',
  40. render: url => {
  41. let path = getPicPath(globalConfig.avatarUploadHost, url);
  42. return (
  43. <div style={{
  44. display: 'flex',
  45. alignItems: 'center',
  46. justifyContent: 'center',
  47. }}>
  48. <img src={path} style={{ width: "100px", height: 50 }} />
  49. <Button
  50. className="buttonimg"
  51. style={{ marginLeft: 10 }}
  52. onClick={e => {
  53. e.stopPropagation();
  54. this.setState({
  55. imgeditvisible: true,
  56. maximg: path,
  57. })
  58. }}
  59. >
  60. 查看大图
  61. </Button>
  62. </div>
  63. );
  64. }
  65. },
  66. {
  67. title: '产品名称',
  68. dataIndex: 'name',
  69. key: 'name'
  70. },
  71. {
  72. title: '金额',
  73. dataIndex: 'amount',
  74. key: 'amount'
  75. },
  76. {
  77. title: '排序',
  78. dataIndex: 'sort',
  79. key: 'sort'
  80. },
  81. {
  82. title: '上传时间',
  83. dataIndex: 'createTimes',
  84. key: 'createTimes'
  85. },
  86. {
  87. title: '是否发布',
  88. dataIndex: 'releaseStatus',
  89. key: 'releaseStatus',
  90. render: (text, record) => {
  91. return (
  92. text === 0 ? '否' : text === 1 ? '是' : '未知'
  93. )
  94. }
  95. },
  96. {
  97. title: '是否首页',
  98. dataIndex: 'host',
  99. key: 'host',
  100. render: (text, record) => {
  101. return (
  102. text === 0 ? '否' : text === 1 ? '是' : '未知'
  103. )
  104. }
  105. },
  106. {
  107. title: "操作",
  108. dataIndex: "aab",
  109. key: "aab",
  110. render: (text, record) => {
  111. return (
  112. <div>
  113. <Button
  114. type="primary"
  115. onClick={(e) => {
  116. e.stopPropagation();
  117. this.edit(record);
  118. }}
  119. >
  120. 编辑
  121. </Button>
  122. <Popconfirm
  123. placement="top"
  124. title={"是否确认删除?"}
  125. onConfirm={e => {
  126. e.stopPropagation();
  127. this.delete(record.id);
  128. }}
  129. okText="确认"
  130. cancelText="取消"
  131. >
  132. <Button
  133. type="primary"
  134. style={{ marginLeft: 10,background:'#f00' }}
  135. onClick={(e)=>{
  136. e.stopPropagation();
  137. }}
  138. >
  139. 删除
  140. </Button>
  141. </Popconfirm>
  142. <Popconfirm
  143. placement="top"
  144. title={record.host === 0 ? "是否确认推荐首页?" : "是否确认从首页撤下?"}
  145. onConfirm={e => {
  146. this.homeOperation(record.id,record.host === 0 ? 1 : 0);
  147. }}
  148. okText="确认"
  149. cancelText="取消"
  150. >
  151. <Button
  152. type="primary"
  153. style={{ marginLeft: 10 }}
  154. onClick={(e)=>{
  155. e.stopPropagation();
  156. }}
  157. >
  158. {record.host === 0 ? "推荐首页" : '首页撤下'}
  159. </Button>
  160. </Popconfirm>
  161. <Button
  162. type="primary"
  163. style={{ marginLeft: 10,background:'#2aaf65' }}
  164. onClick={(e) => {
  165. e.stopPropagation();
  166. this.shareEdit(record);
  167. }}
  168. >
  169. 编辑分享
  170. </Button>
  171. </div>
  172. );
  173. }
  174. }
  175. ],
  176. dataSource:[],
  177. pagination: {
  178. defaultCurrent: 1,
  179. defaultPageSize: 10,
  180. showQuickJumper: true,
  181. pageSize: 10,
  182. onChange: function (page) {
  183. this.loadData(page);
  184. }.bind(this),
  185. showTotal: function (total) {
  186. return '共' + total + '条数据';
  187. }
  188. },
  189. visible:false,
  190. shareVisible:false,
  191. }
  192. this.search = this.search.bind(this);
  193. this.reset = this.reset.bind(this);
  194. this.tableRowClick = this.tableRowClick.bind(this);
  195. this.loadData = this.loadData.bind(this);
  196. this.addProduct = this.addProduct.bind(this);
  197. this.onCancel = this.onCancel.bind(this);
  198. this.edit = this.edit.bind(this);
  199. this.shareEdit = this.shareEdit.bind(this);
  200. this.delete = this.delete.bind(this);
  201. this.homeOperation = this.homeOperation.bind(this);
  202. }
  203. search(){this.loadData();}
  204. reset(){
  205. this.setState({
  206. searchUserName: '',
  207. time: [],
  208. },()=>{
  209. this.loadData();
  210. })
  211. }
  212. tableRowClick(value){
  213. this.setState({
  214. visible:true,
  215. id:value.id,
  216. infor:value,
  217. })
  218. }
  219. edit(value){
  220. this.setState({
  221. visible:true,
  222. id:value.id,
  223. infor:value,
  224. })
  225. }
  226. shareEdit(value){
  227. this.setState({
  228. shareVisible:true,
  229. id:value.id,
  230. infor:value,
  231. })
  232. }
  233. loadData(pageNo = 1) {
  234. this.setState({
  235. loading: true
  236. });
  237. $.ajax({
  238. method: "get",
  239. dataType: "json",
  240. crossDomain: false,
  241. url: globalConfig.context + "/api/admin/project/list",
  242. data: {
  243. pageNo: pageNo || 1,
  244. pageSize: 10,
  245. name: this.state.searchUserName || undefined,
  246. startTime: this.state.time[0] || undefined,
  247. endTime: this.state.time[1] || undefined,
  248. }
  249. }).done((data1) => {
  250. if (data1.error.length !== 0) {
  251. message.warning(data1.error[0].message);
  252. } else {
  253. for (let i = 0; i < data1.data.list.length; i++) {
  254. data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
  255. }
  256. this.state.pagination.current = data1.data.pageNo;
  257. this.state.pagination.total = data1.data.totalCount;
  258. }
  259. this.setState({
  260. dataSource: data1.data.list,
  261. pagination: this.state.pagination,
  262. pageNo: data1.data.pageNo
  263. });
  264. }).always(function () {
  265. this.setState({
  266. loading: false
  267. });
  268. }.bind(this))
  269. }
  270. addProduct(){
  271. this.setState({visible:false,shareVisible:false});
  272. this.loadData(this.state.pageNo)
  273. }
  274. onCancel(){
  275. this.setState({
  276. visible:false,
  277. shareVisible:false,
  278. id:'',
  279. infor:'',
  280. })
  281. }
  282. homeOperation(id,host){
  283. this.setState({
  284. loading: true
  285. });
  286. $.ajax({
  287. method: "post",
  288. dataType: "json",
  289. crossDomain: false,
  290. url: globalConfig.context + "/api/admin/project/update",
  291. data: {
  292. id,
  293. host
  294. },
  295. success: function(data) {
  296. if (data.error && data.error.length) {
  297. message.warning(data.error[0].message);
  298. } else {
  299. message.warning('操作成功');
  300. this.loadData(this.state.pageNo);
  301. }
  302. }.bind(this)
  303. }).always(
  304. function() {
  305. this.setState({
  306. loading: false
  307. });
  308. }.bind(this)
  309. );
  310. }
  311. delete(id){
  312. this.setState({
  313. loading: true
  314. });
  315. $.ajax({
  316. method: "post",
  317. dataType: "json",
  318. crossDomain: false,
  319. url: globalConfig.context + "/api/admin/project/delete",
  320. data: {
  321. id
  322. },
  323. success: function(data) {
  324. if (data.error && data.error.length) {
  325. message.warning(data.error[0].message);
  326. } else {
  327. message.warning('删除成功');
  328. this.loadData(this.state.pageNo);
  329. }
  330. }.bind(this)
  331. }).always(
  332. function() {
  333. this.setState({
  334. loading: false
  335. });
  336. }.bind(this)
  337. );
  338. }
  339. componentDidMount() {
  340. this.loadData();
  341. }
  342. imghandleCancel() {
  343. this.setState({
  344. imgeditvisible: false
  345. });
  346. }
  347. render() {
  348. return (
  349. <div className="user-content" >
  350. <div className="content-title">
  351. <span>产品管理</span>
  352. </div>
  353. <div className="user-search">
  354. <Input style={{bottom:'5px'}} placeholder="产品关键字" value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
  355. <span style={{ fontSize: 14 }} >提交日期:</span>
  356. <RangePicker
  357. value={[
  358. this.state.time[0] ? moment(this.state.time[0]) : null,
  359. this.state.time[1] ? moment(this.state.time[1]) : null
  360. ]}
  361. onChange={(data, dataString) => {
  362. this.setState({ time: dataString });
  363. }}
  364. />
  365. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  366. <Button onClick={this.reset}>重置</Button>
  367. <Button
  368. type="primary"
  369. onClick={()=>{this.setState({visible:true})}}
  370. style={{ marginLeft: "100px" }}
  371. >
  372. 新增产品
  373. </Button>
  374. </div>
  375. <div className="patent-table">
  376. <SpinContainer spinning={this.state.loading}>
  377. <Table columns={this.state.columns}
  378. dataSource={this.state.dataSource}
  379. pagination={this.state.pagination}
  380. onRowClick={this.tableRowClick} />
  381. </SpinContainer>
  382. </div>
  383. {this.state.visible ? <Add
  384. id={this.state.id}
  385. infor={this.state.infor}
  386. visible={this.state.visible}
  387. onOk={this.addProduct}
  388. onCancel={this.onCancel}
  389. /> : null}
  390. {this.state.shareVisible ? <AddShare
  391. shareType='0'
  392. id={this.state.id}
  393. infor={this.state.infor}
  394. visible={this.state.shareVisible}
  395. onOk={this.addProduct}
  396. onCancel={this.onCancel}
  397. /> : null}
  398. <Modal
  399. visible={this.state.imgeditvisible}
  400. onCancel={()=>{this.imghandleCancel()}}
  401. onOk={()=>{this.imghandleCancel()}}
  402. footer={false}
  403. >
  404. <img style={{ width: "100%" }} src={this.state.maximg} />
  405. </Modal>
  406. </div >
  407. )
  408. }
  409. }
  410. export default Product;