123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400 |
- import React,{Component}from 'react';
- import {Button, DatePicker, Icon, Input, message, Modal, Popconfirm, Select, Table} from "antd";
- import SpinContainer from "../../../SpinContainer";
- import $ from "jquery/src/ajax";
- import moment from "moment";
- import Add from './add';
- import {getPicPath} from "@/tools.js";
- const { RangePicker } = DatePicker;
- class Product extends Component{
- constructor(props) {
- super(props);
- this.state={
- pageNo: 1,
- searchUserName: '',
- time: [],
- loading: false,
- imgeditvisible: false,
- maximg: '',
- columns:[
- {
- title: '序号',
- dataIndex: 'key',
- key: 'key'
- },
- {
- title: '产品分类',
- dataIndex: 'typeName',
- key: 'typeName'
- },
- {
- title: '产品ID',
- dataIndex: 'id',
- key: 'id'
- },
- {
- title: '产品缩略图',
- dataIndex: 'thumbnailUrl',
- key: 'thumbnailUrl',
- render: url => {
- let path = getPicPath(globalConfig.avatarUploadHost, url);
- return (
- <div style={{
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- }}>
- <img src={path} style={{ width: "100px", height: 50 }} />
- <Button
- className="buttonimg"
- style={{ marginLeft: 10 }}
- onClick={e => {
- e.stopPropagation();
- this.setState({
- imgeditvisible: true,
- maximg: path,
- })
- }}
- >
- 查看大图
- </Button>
- </div>
- );
- }
- },
- {
- title: '产品名称',
- dataIndex: 'name',
- key: 'name'
- },
- {
- title: '金额',
- dataIndex: 'amount',
- key: 'amount'
- },
- {
- title: '排序',
- dataIndex: 'sort',
- key: 'sort'
- },
- {
- title: '上传时间',
- dataIndex: 'createTimes',
- key: 'createTimes'
- },
- {
- title: '是否发布',
- dataIndex: 'releaseStatus',
- key: 'releaseStatus',
- render: (text, record) => {
- return (
- text === 0 ? '否' : text === 1 ? '是' : '未知'
- )
- }
- },
- {
- title: '是否首页',
- dataIndex: 'host',
- key: 'host',
- render: (text, record) => {
- return (
- text === 0 ? '否' : text === 1 ? '是' : '未知'
- )
- }
- },
- {
- title: "操作",
- dataIndex: "aab",
- key: "aab",
- render: (text, record) => {
- return (
- <div>
- <Button
- type="primary"
- onClick={(e) => {
- e.stopPropagation();
- this.edit(record);
- }}
- >
- 编辑
- </Button>
- <Popconfirm
- placement="top"
- title={"是否确认删除?"}
- onConfirm={e => {
- e.stopPropagation();
- this.delete(record.id);
- }}
- okText="确认"
- cancelText="取消"
- >
- <Button
- type="primary"
- style={{ marginLeft: 10,background:'#f00' }}
- onClick={(e)=>{
- e.stopPropagation();
- }}
- >
- 删除
- </Button>
- </Popconfirm>
- <Popconfirm
- placement="top"
- title={record.host === 0 ? "是否确认推荐首页?" : "是否确认从首页撤下?"}
- onConfirm={e => {
- this.homeOperation(record.id,record.host === 0 ? 1 : 0);
- }}
- okText="确认"
- cancelText="取消"
- >
- <Button
- type="primary"
- style={{ marginLeft: 10 }}
- onClick={(e)=>{
- e.stopPropagation();
- }}
- >
- {record.host === 0 ? "推荐首页" : '首页撤下'}
- </Button>
- </Popconfirm>
- </div>
- );
- }
- }
- ],
- dataSource:[],
- pagination: {
- defaultCurrent: 1,
- defaultPageSize: 10,
- showQuickJumper: true,
- pageSize: 10,
- onChange: function (page) {
- this.loadData(page);
- }.bind(this),
- showTotal: function (total) {
- return '共' + total + '条数据';
- }
- },
- visible:false,
- }
- this.search = this.search.bind(this);
- this.reset = this.reset.bind(this);
- this.tableRowClick = this.tableRowClick.bind(this);
- this.loadData = this.loadData.bind(this);
- this.addProduct = this.addProduct.bind(this);
- this.onCancel = this.onCancel.bind(this);
- this.edit = this.edit.bind(this);
- this.delete = this.delete.bind(this);
- this.homeOperation = this.homeOperation.bind(this);
- }
- search(){this.loadData();}
- reset(){
- this.setState({
- searchUserName: '',
- time: [],
- },()=>{
- this.loadData();
- })
- }
- tableRowClick(value){
- console.log(value)
- this.setState({
- visible:true,
- id:value.id,
- infor:value,
- })
- }
- edit(value){
- this.setState({
- visible:true,
- id:value.id,
- infor:value,
- })
- }
- loadData(pageNo = 1) {
- this.setState({
- loading: true
- });
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/project/list",
- data: {
- pageNo: pageNo || 1,
- pageSize: 10,
- userName: this.state.searchUserName || undefined,
- payState: this.state.searchPayState || undefined,
- payStart: this.state.time[0] || undefined,
- payEnd: this.state.time[1] || undefined,
- }
- }).done((data1) => {
- if (data1.error.length !== 0) {
- message.warning(data1.error[0].message);
- } else {
- for (let i = 0; i < data1.data.list.length; i++) {
- data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
- }
- this.state.pagination.current = data1.data.pageNo;
- this.state.pagination.total = data1.data.totalCount;
- }
- this.setState({
- dataSource: data1.data.list,
- pagination: this.state.pagination,
- pageNo: data1.data.pageNo
- });
- }).always(function () {
- this.setState({
- loading: false
- });
- }.bind(this))
- }
- addProduct(){
- this.setState({visible:false});
- this.loadData(this.state.pageNo)
- }
- onCancel(){
- this.setState({
- visible:false,
- id:'',
- infor:'',
- })
- }
- homeOperation(id,host){
- this.setState({
- loading: true
- });
- $.ajax({
- method: "post",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/project/update",
- data: {
- id,
- host
- },
- success: function(data) {
- if (data.error && data.error.length) {
- message.warning(data.error[0].message);
- } else {
- message.warning('操作成功');
- this.loadData(this.state.pageNo);
- }
- }.bind(this)
- }).always(
- function() {
- this.setState({
- loading: false
- });
- }.bind(this)
- );
- }
- delete(id){
- this.setState({
- loading: true
- });
- $.ajax({
- method: "post",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/project/delete",
- data: {
- id
- },
- success: function(data) {
- if (data.error && data.error.length) {
- message.warning(data.error[0].message);
- } else {
- message.warning('删除成功');
- this.loadData(this.state.pageNo);
- }
- }.bind(this)
- }).always(
- function() {
- this.setState({
- loading: false
- });
- }.bind(this)
- );
- }
- componentDidMount() {
- this.loadData();
- }
- imghandleCancel() {
- this.setState({
- imgeditvisible: false
- });
- }
- render() {
- return (
- <div className="user-content" >
- <div className="content-title">
- <span>产品管理</span>
- </div>
- <div className="user-search">
- <Input placeholder="产品关键字" value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
- <span style={{ fontSize: 14 }} >提交日期:</span>
- <RangePicker
- value={[
- this.state.time[0] ? moment(this.state.time[0]) : null,
- this.state.time[1] ? moment(this.state.time[1]) : null
- ]}
- onChange={(data, dataString) => {
- this.setState({ time: dataString });
- }}
- />
- <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
- <Button onClick={this.reset}>重置</Button>
- <Button
- type="primary"
- onClick={()=>{this.setState({visible:true})}}
- style={{ marginLeft: "100px" }}
- >
- 新增产品
- </Button>
- </div>
- <div className="patent-table">
- <SpinContainer spinning={this.state.loading}>
- <Table columns={this.state.columns}
- dataSource={this.state.dataSource}
- pagination={this.state.pagination}
- onRowClick={this.tableRowClick} />
- </SpinContainer>
- </div>
- {this.state.visible ? <Add
- id={this.state.id}
- infor={this.state.infor}
- visible={this.state.visible}
- onOk={this.addProduct}
- onCancel={this.onCancel}
- /> : null}
- <Modal
- visible={this.state.imgeditvisible}
- onCancel={()=>{this.imghandleCancel()}}
- onOk={()=>{this.imghandleCancel()}}
- footer={false}
- >
- <img style={{ width: "100%" }} src={this.state.maximg} />
- </Modal>
- </div >
- )
- }
- }
- export default Product;
|