qiyewechatApp/UI/src/pages/firmWeChat/addPeoplePlan.js

import React from 'react';
import { BirdGrid } from 'components/Grid';
import { BirdForm } from 'components/Form';
import { config, request, util } from 'utils'
const { WXAPIV5 } = config;
import { connect } from "dva";
import { Modal, Row, Col, Button, Icon, Upload, Model, message, Input } from 'antd';

class addPeoplePlan extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fileList: [], // 上传的文件
            file: null,// 上传的文件
            fileUrl: null,// 上传的文件路径
            addVisible: false,// 创建按钮弹窗
            userVisible: false,// 选择客服弹窗
            selectUserName: "",// 选择客服的名字
            selectUserId: null// 选择客服的ID
        }
    }

    // 选择客服显示
    showUserVisible = () => {
        this.setState({
            userVisible: true
        })
    }

    // 选择客服关闭
    closeUserVisible = () => {
        this.setState({
            userVisible: false
        })
    }

    // 选择客服
    selectUser = (data) => {
        let userName = data.name;
        let userId = data.id;
        this.setState({
            selectUserName: userName,
            selectUserId: userId,
            userVisible: false
        })
    }

    // 创建任务显示
    showAddVisible = () => {
        this.setState({
            addVisible: true
        })
    }

    // 创建任务关闭
    closeAddVisible = () => {
        this.setState({
            addVisible: false
        })
    }

    // 创建任务
    createPlanClick = () => {
        console.log(this.refs.addForm);
        let fieldArr = this.refs.addForm.props.fields;
        let falg = this.dataVerify(fieldArr)
        if(!falg){
            return;
        }

        let json = {
            planName: fieldArr[0].value,
            planCentent: fieldArr[1].value,
            planPeopleCount: fieldArr[3].value,
            userId: this.state.selectUserId,
            planFileUrl: this.state.fileUrl
        }

        request({
            url: WXAPIV5 + "/plan/" + this.props.corpid + "/create",
            method: "post",
            data: json,
        }).then(result => {
            console.log(result);
            if(result.success==1){
                message.success(result.message);
            }else {
                message.error(result.message);
            }

            this.setState({
                selectUserName: "",
                selectUserId: null,
                file: null,
                fileList: [],
                fileUrl: null,
                addVisible: false
            })
            this.refs.addForm.setState({
                initValue: {}
            })
            this.refs.grid.reload();
        })

    }

    // 创建任务数据校验
    dataVerify = (fieldArr) => {
        let planName = fieldArr[0].value;
        let planCentent = fieldArr[1].value;
        let planPeopleCount = fieldArr[3].value;
        let userId = this.state.selectUserId;
        let fileUrl = this.state.fileUrl;
        
        if(planName==null || planName===""){
            message.warn("请填写任务名称！")
            return false;
        }
        if(planCentent==null || planCentent===""){
            message.warn("请填写任务内容！")
            return false;
        }
        if(planPeopleCount==null || planPeopleCount==0){
            message.warn("请填写任务添加人数！")
            return false;
        }
        if(userId==null){
            message.warn("请选择客服！")
            return false;
        }
        if(fileUrl==null){
            message.warn("请上传Excel文件！")
            return false;
        }
        return true;
    }

    // 截断文件
    truncateFile = (file) => {
        let fileArr = this.state.fileList;
        if (fileArr.length > 0) {
            message.warn("只能上传一个文件！");
            this.setState({
                fileList: fileArr
            })
            return false;
        }
        fileArr.push(file);
        this.setState({
            fileList: fileArr,
            file: file
        });
        return true;
    }

    // 移除文件
    removeFile = (file) => {
        this.setState(state => {
            const index = state.fileList.indexOf(file);
            const newFileList = state.fileList.slice();
            newFileList.splice(index, 1);
            return {
                fileList: newFileList,
                fileUrl: null,
                file: null
            };
        });
    }

    // 文件变化
    fileChange = (e) => {
        // console.log(e);
        if (e.file != null && e.file.response != null) {
            this.setState({
                fileUrl: e.file.response
            })
        }
    }

    render() {
        var { corpid } = this.props;
        let token = util.auth.getToken();
        let self = this;
        // 任务列表
        let gridOption = {
            title: "应用管理",
            url: {
                read: WXAPIV5 + "/plan/" + corpid + "/query",
                // add: WXAPIV5 + "/plan/"+corpid+"/create",
            },
            actions: [],// 新增
            columns: [
                { title: "任务ID", data: "planId", type: "text", hide: true },
                { title: "企业微信cropid", data: "cropid", type: "text", hide: true },
                { title: "任务名称", data: "planName", type: "text", query: true },
                { title: "任务内容", data: "planCentent", type: "text" },
                { title: "所属客服", data: "userName", type: "text" },
                { title: "所属客服ID", data: "userId", type: "text", hide: true },
                { title: "任务添加人数", data: "planPeopleCount", type: "number" },
                { title: "任务添加时间", data: "dateFormat", type: "text" },
                { title: "任务添加时间", data: "planCreateTime", type: "datetime", hide: true },
                { title: "状态", data: "state", type: "text" },
                { title: "状态", data: "planState", type: "text", hide: true },
                { title: "文件路径", data: "planFileUrl", type: "text", hide: true},
                {
                    title: "操作选项", type: "command",
                    actions: []
                }
            ],
            actions: [
                {
                    name: "创建任务",
                    onClick: () => self.showAddVisible()
                }
            ]
        };

        let uploadProps = {
            accept: '.xls,.xlsx',
            beforeUpload: (file, fileList) => self.truncateFile(file, fileList),
            onRemove: (file) => self.removeFile(file),
            fileList: self.state.fileList,
            action: WXAPIV5 + "/plan/" + corpid + "/upload",
            onChange: (e) => self.fileChange(e),
            headers: {
                "Sso-Token": token
            }
        }
        // 添加任务表单
        let addFields = [
            {
                name: "任务名称",
                key: "planName",
                fieldType: "text",
                isRequired: true,
            },
            {
                name: "任务内容",
                key: "planCentent",
                fieldType: "text",
                isRequired: true,
            },
            {
                name: "选择客服",
                fieldType: "command",
                isRequired: true,
                render: () => {
                    return (
                        <Row>
                            <Col span={17}>
                                <Input ref="userInput" value={self.state.selectUserName}/>
                            </Col>
                            <Col span={6} offset={1}>
                                <Button onClick={$ => self.showUserVisible()}>添加</Button>
                            </Col>
                        </Row>
                    )
                }
            },
            {
                name: "添加人数",
                key: "planPeopleCount",
                fieldType: "number",
                defaultValue: 0,
                isRequired: true,
            },
            {
                name: "上传Excel文件",
                fieldType: "command",
                isRequired: true,
                render: () => {
                    return (
                        <Upload {...uploadProps}>
                            <Button><Icon type="upload" />选择文件</Button>
                        </Upload>
                    )
                }
            }
        ];
        // 选择客服列表
        let selectUserGrid = {
            title: "客服列表",
            url: {
                read: WXAPIV5 + "/users/" + corpid + "/getUsersList"
            },
            actions: [
            ],
            columns: [
                { title: "客服名称", data: "name", type: "text", query: true },
                { title: "所属部门", data: "departmentName", type: "text", hide: true },
                { title: "手机", data: "mobile", type: "text", query: true },
                {
                    title: "选择客服", type: "command",
                    actions: [
                        {
                            name: "选择客服",
                            onClick: (data) => self.selectUser(data),
                        }
                    ]
                }
            ]
        }

        return (
            <div>
                <BirdGrid gridOption={gridOption} ref="grid"></BirdGrid>

                {/* 创建任务弹窗 */}
                <Modal title="创建任务"
                    visible={self.state.addVisible}
                    onOk={$ => self.createPlanClick()}
                    onCancel={$ => self.closeAddVisible()}
                >
                    <BirdForm
                        fields={addFields}
                        ref="addForm"
                    />
                </Modal>

                {/* 选择客服弹窗 */}
                <Modal title="选择客服"
                    visible={self.state.userVisible}
                    onOk={$ => self.selectUser()}
                    onCancel={$ => self.closeUserVisible()}
                    footer={null}
                    width={920}
                >
                    <BirdGrid gridOption={selectUserGrid} ref="selectGrid"></BirdGrid>
                </Modal>
            </div>
        );
    }
}

//字面意思就是，把models的state变成组件的props
function mapStateToProps(state) {
    const { corpid } = state.sellmanage // test就是models命名空间名字 
    return { corpid }; // 在这return,上面才能获取到
}

export default connect(mapStateToProps)(addPeoplePlan);