kede-officialWeb-currency-client/js/component/administration/business/activity/index.jsx

import React,{Component} from 'react';
import {Button, Input, Table, Select, message, Popconfirm, Modal, Tag, Checkbox, Tooltip} from "antd";
import $ from "jquery/src/ajax";
import {
    getPicPath
} from "@/tools.js";
import ActivityOperation from './components/activityOperation';
import SpinContainer from "../../../SpinContainer";
import {companyList, getCompanyName} from "../../../common/configure";

class Activity extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            title: '',
            releaseStatus: '',
            locationSearch: '',
            pageNo: 1,
            dataSource: [],
            imgeditvisible: false,
            maximg: '',
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function(page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function(total) {
                    return "共" + total + "条数据";
                }
            },
            activityId:'',
            columns: [
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                    render: (v,a,k) => {
                        return (
                            (this.state.pageNo-1)*10+k+1
                        )
                    }
                },
                {
                    title: "标题",
                    dataIndex: "title",
                    key: "title"
                },
                {
                    title: "缩略图",
                    dataIndex: "pictureUrl",
                    key: "pictureUrl",
                    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: "locations",
                    key: "locations",
                    width:150,
                    render: r => {
                        let text = '';
                        r && r.map((v,i)=>(
                            text += (i === 0 ? '':',')+getCompanyName(v)
                        ))
                        return(
                            <Tooltip placement="top" title={text}>
                                {
                                    r && r.map((v,i)=>(
                                        i <= 2 ? (i === 0 ? '':',')+getCompanyName(v) : null
                                    ))
                                }
                                {
                                    r.length > 3 ? '.....' : null
                                }
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "是否发布",
                    dataIndex: "releaseStatus",
                    key: "releaseStatus",
                    render: text => {
                        return (
                            <span>
                                {text === 0 ? <Tag color="#f50">未发布</Tag> : text === 1 ? <Tag color="#87d068">已发布</Tag> : <Tag>未知</Tag>}
                            </span>
                        )
                    }
                },
                {
                    title: "排序",
                    dataIndex: "sort",
                    key: "sort"
                },
                {
                    title: "操作",
                    dataIndex: "id",
                    key: "id",
                    render: (text,record) => {
                        return (
                            <span>
                                <Button
                                    type="primary"
                                    style={{ marginLeft: "10px" }}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.setState({
                                            activityId: text,
                                        },()=>{
                                            this.setState({
                                                visible:true,
                                            })
                                        })
                                    }}
                                >
                                编辑
                              </Button>
                              <Popconfirm
                                  title="您确定删除该新闻吗？"
                                  onConfirm={(e) => {e.stopPropagation();this.delete(text);}}
                                  okText="是"
                                  cancelText="否"
                              >
                                <Button
                                    type="danger"
                                    style={{ marginLeft: "10px" }}
                                    onClick={e => {
                                        e.stopPropagation();
                                    }}
                                >
                                  删除
                                </Button>
                              </Popconfirm>
                                {(record.releaseStatus === 0 || record.releaseStatus === 1) && <Button
                                  type="primary"
                                  style={{ marginLeft: "10px" }}
                                  onClick={e => {
                                      e.stopPropagation();
                                      this.update(text,record.releaseStatus === 0 ? 1 : 0);
                                  }}
                              >
                                  {record.releaseStatus === 0 ? '发布' : '隐藏'}
                              </Button>}
                            </span>
                        )
                    }
                },

            ],
            visible: false,
        }
        this.loadData = this.loadData.bind(this);
        this.reset = this.reset.bind(this);
    }

    imghandleCancel() {
        this.setState({
            imgeditvisible: false
        });
    }

    loadData(pageNo) {
        this.setState({
            loading: true,
        });
        //发送请求
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/activity/list",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                title: this.state.title || undefined,
                releaseStatus: this.state.releaseStatus || undefined,
                locationSearch: this.state.locationSearch || undefined,
                location: this.state.locationSearch,
            },
            success: function(data) {
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                    this.setState({
                        pageNo:data.data.pageNo,
                        dataSource: data.data.list,
                        pagination: this.state.pagination
                    });
                }
            }.bind(this)
        }).always(
            function() {
                this.setState({
                    loading: false
                });
            }.bind(this)
        );
    }

    reset(){
        this.setState({
            title: '',
            releaseStatus: '',
            locationSearch: '',
            pageNo: 1,

        },()=>{
            this.loadData();
        })
    }

    delete(id){
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/activity/delete",
            data: {
                id
            },
            success: function(data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('删除成功')
                    this.loadData(this.state.pageNo);
                }
            }.bind(this)
        }).always(
            function() {
                this.setState({
                    loading: false
                });
            }.bind(this)
        );
    }

    update(id,releaseStatus){
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/activity/update",
            data: {
                id,
                releaseStatus
            },
            success: function(data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('修改成功')
                    this.loadData(this.state.pageNo);
                }
            }.bind(this)
        }).always(
            function() {
                this.setState({
                    loading: false
                });
            }.bind(this)
        );
    }

    componentDidMount() {
        this.loadData();
    }

    render() {
        return (
            <div className="user-content">
                <div className="content-title">
                    <span>活动列表</span>
                </div>
                <div className="user-search">
                    <Input
                        placeholder="请输入活动标题"
                        style={{
                            width: "150px",
                            marginRight: "10px",
                            marginBottom: "10px"
                        }}
                        value={this.state.title}
                        onChange={e => {
                            this.setState({ title: e.target.value });
                        }}
                    />
                    <Select
                        placeholder="选择发布状态"
                        style={{ width: 150, marginRight: '10px' }}
                        value={this.state.releaseStatus || undefined}
                        onChange={(e) => {
                            this.setState({ releaseStatus: e })
                        }}
                    >
                        <Select.Option value={0}>未发布</Select.Option>
                        <Select.Option value={1}>已发布</Select.Option>
                    </Select>
                    <Select
                        placeholder="请选择公司"
                        style={{ width: 150 }}
                        value={this.state.locationSearch.length !== 0?this.state.locationSearch:undefined}
                        onChange={e => {
                            this.setState({
                                locationSearch: e
                            });
                        }}
                    >
                        {
                            companyList.map((v)=>(
                                <Select.Option key={v.value} value={v.value}>{v.label}</Select.Option>
                            ))
                        }
                    </Select>
                    <Button
                        type="primary"
                        onClick={e => {
                            this.loadData();
                        }}
                        style={{ marginRight: "10px" }}
                    >
                        搜索
                    </Button>
                    <Button onClick={this.reset} style={{ marginRight: "10px" }}>
                        重置
                    </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={(value)=>{
                                this.setState({
                                    activityId: value.id,
                                    visible:true,
                                })
                            }}
                            bordered
                            size="small"
                            ellipsis="true"
                        />
                    </SpinContainer>
                </div>
                <Modal
                    visible={this.state.imgeditvisible}
                    onCancel={()=>{this.imghandleCancel()}}
                    onOk={()=>{this.imghandleCancel()}}
                    footer={false}
                >
                    <img style={{ width: "100%" }} src={this.state.maximg} />
                </Modal>
                {this.state.visible && <ActivityOperation
                    id={this.state.activityId}
                    visible={this.state.visible}
                    onCancel={()=>{
                        this.loadData(this.state.pageNo);
                        this.setState({
                            activityId: '',
                            visible:false,
                        })
                    }}
                />}
            </div>
        )
    }
}

export default Activity;