| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420 | 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",                    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;
 |