mh-sms-web/src/components/MainPage/FoUserInfoShow.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import { initFilter, extendRule, extendInclude, setDataFieldValue, guid, initQueryFilter } from "../../utils/common";
import { Modal, Upload, Form, Button, Descriptions, Icon, message } from 'antd';
import config from "../../config.js";
import storage from '../../utils/storage'


class FoUserInfoShow extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: null,
            userPhone: "",
            Department: "",
            teamName: "",
            postName: "",
            SignPhoto: 0,
            SignaturePhoto: "",
            visible: false
        }
    }

    handleOk = e => {
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
        var orgId = this.props.login ? this.props.login.OrgId : '';   //登录后有存储登录信息
        var userId = this.props.login ? this.props.login.userId : '';   //登录后有存储登录信息   
        let json = initFilter(orgId);
        extendRule(json, 'ID', 1, userId);    //ID=‘’，字段，等于，条件值， 1代表=，2代表不等于，3小于，4小于等于，5大于，6大于等于，7以开始的Like,8以结束的Like，9包含 
        extendInclude(json, 'Nav_Department');
        extendInclude(json, 'Nav_Person.Nav_Post');
        extendInclude(json, 'Nav_Person.Nav_TeamPersons.Nav_Team');
        extendInclude(json, 'Nav_UserSignFiles.Nav_ImgFile.Nav_File');
        this.props.dispatch({
            type: 'app/getDataByPost',
            payload: json,
            url: 'FM/User/OrderPaged',
            onComplete: (ret) => {    //返回查询结果ret
                if (ret) {    //判断是否有记录
                    let teamName = "";
                    let postName = "";
                    if (ret[0]?.Nav_Person?.Nav_TeamPersons && ret[0]?.Nav_Person?.Nav_TeamPersons.length > 0) {
                        teamName = ret[0].Nav_Person.Nav_TeamPersons[0].Nav_Team?.NAME
                    }
                    postName = ret[0]?.Nav_Person.Nav_Post?.NAME
                    this.setState({   //设置setState全局变量                        
                        userPhone: ret[0]?.PHONE,
                        Department: ret[0]?.Nav_Department.NAME,
                        teamName: teamName,
                        postName: postName,
                    })
                    if (ret[0]?.Nav_UserSignFiles.length > 0) {
                        if ((ret[0].Nav_UserSignFiles[0].Nav_ImgFile.Nav_File.FILE_PATH).length > 0) {
                            this.setState({
                                SignPhoto: 1,
                                SignaturePhoto: config.picServerHost + ret[0].Nav_UserSignFiles[0].Nav_ImgFile.Nav_File.FILE_PATH,
                            })
                        }
                    }

                }
            }
        });
    };

    render() {
        const Tenant = storage('lacal').getItem('Tenant').val;
        const that = this;
        const uploadprops = {
            name: 'file',
            action: config.serviceHost('api/PF/File/UploadFileEditSign'),
            data: { OrgId: this.props.login.OrgId, userID: this.props.login.userId },
            headers: {
                Tenant: Tenant,
            },
            showUploadList:false,
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    message.error('只能上传jpg或者png格式图片!');
                }
                const isLt2M = file.size / 1024 / 1024 < 0.5;
                if (!isLt2M) {
                    message.error('只能上传小于500k图片!');
                }
                return isJpgOrPng && isLt2M;

            },
            onChange(info) {
                if (info.file.status === 'done') {
                    that.setState({
                        SignPhoto: 1,
                        SignaturePhoto: config.picServerHost + info.file.response.Data.imgFilePath,
                    })
                    message.success(`${info.file.name} 上传成功!`);
                } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} 上传失败!`);
                }
            },
        };
        return (
            <div>
                <span onClick={this.showModal}>我的资料</span>
                <Modal title="我的资料" width={'800px'} visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}>
                    <Descriptions bordered>
                        <Descriptions.Item label="编码">{this.props.login.user.CODE}</Descriptions.Item>
                        <Descriptions.Item label="姓名">{this.props.login.user.NAME}</Descriptions.Item>
                        <Descriptions.Item label="手机">{this.state.userPhone}</Descriptions.Item>
                        <Descriptions.Item label="部门">{this.state.Department}</Descriptions.Item>
                        <Descriptions.Item label="班组">{this.state.teamName}</Descriptions.Item>
                        <Descriptions.Item label="岗位">{this.state.postName}</Descriptions.Item>
                        <Descriptions.Item label="签名" span={3}>{this.state.SignPhoto === 1 ? <img width='30%' src={this.state.SignaturePhoto} /> : ""}</Descriptions.Item>
                        <Descriptions.Item label="">
                            {this.state.SignPhoto === 1 ?
                                <Upload {...uploadprops}><Button><Icon type="upload" /> 重新上传签名照</Button></Upload> :
                                <Upload {...uploadprops}><Button><Icon type="upload" /> 上传签名照</Button></Upload>
                            }
                        </Descriptions.Item>
                    </Descriptions>
                </Modal>
            </div>

        );
    }
}

export default withRouter(connect(({ login }) => ({ login }))(FoUserInfoShow))