index.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  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. name: this.state.searchUserName || undefined,
  227. startTime: this.state.time[0] || undefined,
  228. endTime: this.state.time[1] || undefined,
  229. }
  230. }).done((data1) => {
  231. if (data1.error.length !== 0) {
  232. message.warning(data1.error[0].message);
  233. } else {
  234. for (let i = 0; i < data1.data.list.length; i++) {
  235. data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
  236. }
  237. this.state.pagination.current = data1.data.pageNo;
  238. this.state.pagination.total = data1.data.totalCount;
  239. }
  240. this.setState({
  241. dataSource: data1.data.list,
  242. pagination: this.state.pagination,
  243. pageNo: data1.data.pageNo
  244. });
  245. }).always(function () {
  246. this.setState({
  247. loading: false
  248. });
  249. }.bind(this))
  250. }
  251. addProduct(){
  252. this.setState({visible:false});
  253. this.loadData(this.state.pageNo)
  254. }
  255. onCancel(){
  256. this.setState({
  257. visible:false,
  258. id:'',
  259. infor:'',
  260. })
  261. }
  262. homeOperation(id,host){
  263. this.setState({
  264. loading: true
  265. });
  266. $.ajax({
  267. method: "post",
  268. dataType: "json",
  269. crossDomain: false,
  270. url: globalConfig.context + "/api/admin/project/update",
  271. data: {
  272. id,
  273. host
  274. },
  275. success: function(data) {
  276. if (data.error && data.error.length) {
  277. message.warning(data.error[0].message);
  278. } else {
  279. message.warning('操作成功');
  280. this.loadData(this.state.pageNo);
  281. }
  282. }.bind(this)
  283. }).always(
  284. function() {
  285. this.setState({
  286. loading: false
  287. });
  288. }.bind(this)
  289. );
  290. }
  291. delete(id){
  292. this.setState({
  293. loading: true
  294. });
  295. $.ajax({
  296. method: "post",
  297. dataType: "json",
  298. crossDomain: false,
  299. url: globalConfig.context + "/api/admin/project/delete",
  300. data: {
  301. id
  302. },
  303. success: function(data) {
  304. if (data.error && data.error.length) {
  305. message.warning(data.error[0].message);
  306. } else {
  307. message.warning('删除成功');
  308. this.loadData(this.state.pageNo);
  309. }
  310. }.bind(this)
  311. }).always(
  312. function() {
  313. this.setState({
  314. loading: false
  315. });
  316. }.bind(this)
  317. );
  318. }
  319. componentDidMount() {
  320. this.loadData();
  321. }
  322. imghandleCancel() {
  323. this.setState({
  324. imgeditvisible: false
  325. });
  326. }
  327. render() {
  328. return (
  329. <div className="user-content" >
  330. <div className="content-title">
  331. <span>产品管理</span>
  332. </div>
  333. <div className="user-search">
  334. <Input placeholder="产品关键字" value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
  335. <span style={{ fontSize: 14 }} >提交日期:</span>
  336. <RangePicker
  337. value={[
  338. this.state.time[0] ? moment(this.state.time[0]) : null,
  339. this.state.time[1] ? moment(this.state.time[1]) : null
  340. ]}
  341. onChange={(data, dataString) => {
  342. this.setState({ time: dataString });
  343. }}
  344. />
  345. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  346. <Button onClick={this.reset}>重置</Button>
  347. <Button
  348. type="primary"
  349. onClick={()=>{this.setState({visible:true})}}
  350. style={{ marginLeft: "100px" }}
  351. >
  352. 新增产品
  353. </Button>
  354. </div>
  355. <div className="patent-table">
  356. <SpinContainer spinning={this.state.loading}>
  357. <Table columns={this.state.columns}
  358. dataSource={this.state.dataSource}
  359. pagination={this.state.pagination}
  360. onRowClick={this.tableRowClick} />
  361. </SpinContainer>
  362. </div>
  363. {this.state.visible ? <Add
  364. id={this.state.id}
  365. infor={this.state.infor}
  366. visible={this.state.visible}
  367. onOk={this.addProduct}
  368. onCancel={this.onCancel}
  369. /> : null}
  370. <Modal
  371. visible={this.state.imgeditvisible}
  372. onCancel={()=>{this.imghandleCancel()}}
  373. onOk={()=>{this.imghandleCancel()}}
  374. footer={false}
  375. >
  376. <img style={{ width: "100%" }} src={this.state.maximg} />
  377. </Modal>
  378. </div >
  379. )
  380. }
  381. }
  382. export default Product;