index.jsx 14 KB

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