| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 | import React,{Component} from 'react';import {Form, Input, Modal, Spin, Radio, Button, Icon, Upload, message, Checkbox} from "antd";import TextArea from "antd/es/input/TextArea";import {    splitUrl,    beforeUploadFile,} from "@/tools.js";import $ from "jquery/src/ajax";import {companyList, getCompanyValueArray} from "../../../../common/configure";const FormItem = Form.Item;const RadioGroup = Radio.Group;// 上传文件const PicturesWall = React.createClass({    getInitialState() {        return {            previewVisible: false,            previewImage: "",            fileList: this.props.pictureUrl        };    },    getDefaultProps() {        return {            changeClick: this.modifyChange        };    },    handleCancel() {        this.setState({ previewVisible: false });    },    handlePreview(file) {        this.setState({            previewImage: file.url || file.thumbUrl,            previewVisible: true        });    },    handleChange(info) {        let fileList = info.fileList;        this.setState({ fileList });        this.props.fileList(fileList);    },    componentWillReceiveProps(nextProps) {        this.state.fileList = nextProps.pictureUrl;    },    render() {        const { previewVisible, previewImage, fileList } = this.state;        // 点击上传        const uploadButton = (            <div>                <Icon type="plus" />                <div className="ant-upload-text">点击上传</div>            </div>        );        return (            //上传组件            <div style={{ display: "inline-block" }}>                <Upload                    beforeUpload={beforeUploadFile}                    action={globalConfig.context + "/api/admin/activity/upload"}                    listType="picture-card"                    fileList={fileList}                    onPreview={this.handlePreview}                    onChange={this.handleChange}                >                    {fileList && fileList.length >= 1 ? null : uploadButton}                </Upload>                <Modal                    maskClosable={false}                    visible={previewVisible}                    footer={null}                    onCancel={e => {                        this.setState({ previewVisible: false });                    }}                >                    <img alt="" style={{ width: "100%" }} src={previewImage} />                </Modal>            </div>        );    }});class ActivityOperation extends Component{    constructor(props) {        super(props);        this.state={            loading: false,            pictureUrl: [],            details: {},            locations: [],        }        this.submit = this.submit.bind(this);        this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);    }    submit(e){        e.preventDefault();        let _this = this;        this.props.form.validateFields((err, values) => {            if(values.title.length > 6){                message.warning('标题最多六个字');                return;            }            if(this.state.locations.length === 0){                message.warning('请选择城市');                return;            }            if (!err) {                this.setState({                    loading: true                })                values.pictureUrl = values.pictureUrl ? values.pictureUrl[0].response.data : undefined;                let url = this.props.id ? "/api/admin/activity/update" : "/api/admin/activity/add";                if(this.props.id){                    values.id = this.props.id;                }                values.locations = this.state.locations.join(',')                $.ajax({                    method: "post",                    dataType: "json",                    crossDomain: false,                    url: globalConfig.context + url,                    data: values,                    success: function(data) {                        if (data.error && data.error.length) {                            message.warning(data.error[0].message);                        } else {                            message.success('添加成功')                            _this.props.onCancel();                        }                    }.bind(this)                }).always(                    function() {                        this.setState({                            loading: false                        });                    }.bind(this)                );            }        });    }    getOrgCodeUrl(e) {        this.setState({ pictureUrl: e });        this.props.form.setFieldsValue({            pictureUrl: e        })    }    getSelect(){        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/activity/select",            data: {                id:this.props.id,            },            success: function(data) {                if (data.error.length) {                    message.warning(data.error[0].message);                } else {                    this.props.form.setFieldsValue({                        title:data.data.title,                        publisher:data.data.publisher,                        sort:data.data.sort,                        releaseStatus:data.data.releaseStatus,                        content:data.data.content,                        pictureUrl:data.data.pictureUrl                            ? splitUrl(                                data.data.pictureUrl,                                ",",                                globalConfig.avatarUploadHost                            )                            : []                    });                    this.setState({                        locations:data.data.locations,                        checked:data.data.locations.length === companyList.length,                        indeterminate: data.data.locations.length < companyList.length,                        pictureUrl:data.data.pictureUrl                            ? splitUrl(                                data.data.pictureUrl,                                ",",                                globalConfig.avatarUploadHost                            )                            : []                    })                }            }.bind(this)        }).always(            function() {                this.setState({                    loading: false                });            }.bind(this)        );    }    componentDidMount() {        if(this.props.id){            this.getSelect();        }    }    render() {        const { getFieldDecorator } = this.props.form;        return (            <Modal                className="customeDetails"                title={this.props.id?"修改活动":"新增活动"}                width="700px"                onCancel={this.props.onCancel}                visible={this.props.visible}                footer={false}            >                <Form                    layout="horizontal"                    onSubmit={this.submit}                    id="demand-form"                >                    <Spin spinning={this.state.loading}>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 8 }}                            label="活动标题"                        >                            {getFieldDecorator('title', {                                rules: [{ required: true, message: '请输入活动标题!' }],                            })(                                <Input placeholder="请输入活动标题" />                            )}                        </FormItem>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 8 }}                            label="发布人"                        >                            {getFieldDecorator('publisher', {                                rules: [{ required: true, message: '请输入发布人名称!' }],                            })(                                <Input placeholder="请输入发布人名称" />                            )}                        </FormItem>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 8 }}                            label="排序"                        >                            {getFieldDecorator('sort', {                                rules: [{ required: true, message: '请输入排序!' }],                            })(                                <Input placeholder="请输入排序" type={'number'}/>                            )}                        </FormItem>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 8 }}                            label="是否发布"                        >                            {getFieldDecorator('releaseStatus',{                                rules: [{ required: true, message: '请选择是否显示!' }],                            })(                                <RadioGroup>                                    <Radio value={0}>否</Radio>                                    <Radio value={1}>是</Radio>                                </RadioGroup>                            )}                        </FormItem>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 12 }}                            label="公司"                        >                            <Checkbox indeterminate={this.state.indeterminate} checked={this.state.checked} onChange={(e)=>{                                this.setState({                                    locations: e.target.checked ? getCompanyValueArray():[],                                    indeterminate: false,                                    checked:e.target.checked                                })                            }}>全选</Checkbox>                            <Checkbox.Group                                options={companyList}                                value={this.state.locations}                                onChange={(e) => {                                    this.setState({                                        locations: e,                                        indeterminate: companyList.length > e.length,                                        checked: companyList.length === e.length                                    });                                }}                            />                        </FormItem>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 8 }}                            label="活动简介"                        >                            {getFieldDecorator('content', {                                rules: [{ required: true, message: '请输入活动简介!' }],                            })(                                <TextArea placeholder="请输入活动简介" type={'number'}/>                            )}                        </FormItem>                        <FormItem                            labelCol={{ span: 8 }}                            wrapperCol={{ span: 8 }}                            label="活动大图"                            extra="图片尺寸:1240X440"                        >                            {getFieldDecorator('pictureUrl', {                                rules: [{ required: true, message: '请选择活动大图!' }],                            })(                                <PicturesWall                                    fileList={this.getOrgCodeUrl}                                    pictureUrl={this.state.pictureUrl}                                />                            )}                        </FormItem>                        <FormItem                           style={{                               display: 'flex',                               justifyContent: 'center',                           }}                        >                            <Button                                loading={this.state.loading}                                type="primary"                                htmlType="submit"                            >                                {this.props.id ? '保存':'添加' }                            </Button>                        </FormItem>                    </Spin>                </Form>            </Modal>        );    }}const ActivityOperationForm = Form.create()(ActivityOperation);export default ActivityOperationForm;
 |