| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643 | import React,{Component} from "react";import {Button, Cascader, DatePicker, Form, Input, message, Modal, Radio, Select, Spin, Checkbox} from "antd";import { areaSelect, Birthplace } from "@/areaList";import { getProvinceList } from "@/addressList";import moment from "moment";import $ from "jquery/src/ajax";import UserProcessing from './userProcessing';const FormItem = Form.Item;const formItemLayout = {    labelCol: { span: 6 },    wrapperCol: { span: 16 },};class UserProfile extends Component{    constructor(props) {        super(props);        this.state={            loading: false,            doorId:'',            employeeId:'',            name:'',            establish: props.aid ? true : false,            aid:props.aid,        }        this.verifyDoor = this.verifyDoor.bind(this);        this.verifyId = this.verifyId.bind(this);        this.addOk = this.addOk.bind(this);        this.editOk = this.editOk.bind(this);        this.editPeo = this.editPeo.bind(this);    }    componentDidMount() {        let areaArr = getProvinceList();        let Area = areaSelect(areaArr);        let Birthplaces = Birthplace(areaArr);        this.setState({            Area,            Birthplaces: Birthplaces,        });        if(this.props.ModalData && !this.state.isAddPeo){            this.editPeo();        }    }    verifyDoor() {        this.setState({            loading: true,        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/personnel/checkDoorId",            data: {                doorId: this.state.doorId,                id: this.props.id,            },            success: function (data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                } else {                    message.success("此编号未被占用");                }            }.bind(this),        }).always(            function () {                this.setState({                    loading: false,                });            }.bind(this)        );    }    verifyId() {        this.setState({            loading: true,        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/personnel/checkEmployeeId",            data: {                employeeId: this.state.employeeId,                id: this.props.id            },            success: function (data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                } else {                    message.success("此编号未被占用");                }            }.bind(this),        }).always(            function () {                this.setState({                    loading: false,                });            }.bind(this)        );    }    inspect(fn) {        if(!this.state.name){            message.warning('请输入姓名');            return;        }        if(!this.state.employeeId){            message.warning('请输入员工编号');            return;        }        if(!this.state.doorId){            message.warning('请输入门禁编号');            return;        }        if(isNaN(parseInt(this.state.sex))){            message.warning('请选择性别');            return;        }        if(!this.state.nation){            message.warning('请输入民族');            return;        }        if(!(this.state.residence) || this.state.residence.length === 0){            message.warning('请选择户籍地址');            return;        }        if((!this.state.nativePlace) || this.state.nativePlace.length === 0){            message.warning('请选择籍贯');            return;        }        if((!this.state.now) || this.state.now.length === 0){            message.warning('请选择现住地址');            return;        }        fn();    }    addOk(aid) {        this.setState({            loading: true,            aid,        });        $.ajax({            method: "post",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/personnel/add",            data: {                name: this.state.name,                doorId: this.state.doorId,                aid,                sex: this.state.sex,                nation: this.state.nation,                residenceProvince: this.state.residence[0],                residenceCity: this.state.residence[1],                residenceArea: this.state.residence[2],                residenceAddress: this.state.residenceAddress,                nativePlaceProvince: this.state.nativePlace[0],                nativePlaceCity: this.state.nativePlace[1],                nowProvince: this.state.now[0],                nowCity: this.state.now[1],                nowArea: this.state.now[2],                nowAddress: this.state.nowAddress,                idCard: this.state.idCard,                certificationAuthority: this.state.certificationAuthority,                marriage: this.state.marriage,                politicalOutlook: this.state.politicalOutlook,                son: this.state.son,                girl: this.state.girl,                birthdays: this.state.birthdays,                employeeId: this.state.employeeId,            },            success: function (data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                } else {                    message.success("添加成功!");                    this.props.setNowAid(aid);                    this.props.onCancel();                }            }.bind(this),        }).always(            function () {                this.setState({                    loading: false,                });            }.bind(this)        );    }    editOk(aid) {        this.setState({            loading: true,            aid,        });        $.ajax({            method: "post",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/personnel/update",            data: {                aid,                id: this.props.id,                name: this.state.name,                doorId: this.state.doorId,                sex: this.state.sex,                nation: this.state.nation,                residenceProvince: this.state.residence[0],                residenceCity: this.state.residence[1],                residenceArea: this.state.residence[2],                residenceAddress: this.state.residenceAddress,                nativePlaceProvince: this.state.nativePlace[0],                nativePlaceCity: this.state.nativePlace[1],                nowProvince: this.state.now[0],                nowCity: this.state.now[1],                nowArea: this.state.now[2],                nowAddress: this.state.nowAddress,                idCard: this.state.idCard,                certificationAuthority: this.state.certificationAuthority,                marriage: this.state.marriage,                politicalOutlook: this.state.politicalOutlook,                son: this.state.son,                girl: this.state.girl,                birthdays: this.state.birthdays,                employeeId: this.state.employeeId,            },            success: function (data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                } else {                    message.success("修改成功!");                    this.props.setNowAid(aid);                    this.props.onCancel();                }            }.bind(this),        }).always(            function () {                this.setState({                    loading: false,                });            }.bind(this)        );    }    editPeo() {        let residence = [];        residence[0] = this.props.ModalData.residenceProvince;        residence[1] = this.props.ModalData.residenceCity;        residence[2] = this.props.ModalData.residenceArea;        let nativePlace = [];        nativePlace[0] = this.props.ModalData.nativePlaceProvince;        nativePlace[1] = this.props.ModalData.nativePlaceCity;        let now = [];        now[0] = this.props.ModalData.nowProvince;        now[1] = this.props.ModalData.nowCity;        now[2] = this.props.ModalData.nowArea;        this.setState({            id: this.props.ModalData.id,            doorId: this.props.ModalData.doorId,            name: this.props.ModalData.name,            birthdays: this.props.ModalData.birthdays,            sex: this.props.ModalData.sex,            nation: this.props.ModalData.nation,            residence: residence ? residence : [],            residenceAddress: this.props.ModalData.residenceAddress,            now: now ? now : [],            nowAddress: this.props.ModalData.nowAddress,            nativePlace: nativePlace ? nativePlace : [],            idCard: this.props.ModalData.idCard,            certificationAuthority: this.props.ModalData.certificationAuthority,            marriage: this.props.ModalData.marriage,            son: this.props.ModalData.son,            girl: this.props.ModalData.girl,            politicalOutlook: this.props.ModalData.politicalOutlook || this.props.ModalData.politicalOutlook == 0                ? this.props.ModalData.politicalOutlook                : undefined,            employeeId: this.props.ModalData.employeeId,        });    }    render() {        return (            <Modal                maskClosable={false}                visible={this.props.visible}                footer={null}                width={800}                style={{ position: "relative", zIndex: 9999 }}                onCancel={this.props.onCancel}            >                <Spin spinning={this.state.loading}>                    <h2                        style={{                            textAlign: "center",                            paddingBottom: 10,                            marginBottom: 10,                        }}                    >                        {this.props.isAddPeo ? "新增人事档案" : "修改人事档案"}                    </h2>                    <div className="clearfix">                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="员工编号"                        >                            <Input                                placeholder="请输入员工编号"                                style={{ width: 200 }}                                value={this.state.employeeId}                                onChange={(e) => {                                    this.setState({                                        employeeId: e.target.value,                                    });                                }}                            />                            <Button                                disabled={!(this.state.employeeId || this.state.employeeId == 0)}                                style={{ position: "absolute" }}                                type={"primary"}                                onClick={this.verifyId}                            >                                验证重复                            </Button>                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="门禁编号"                        >                            <Input                                style={{ width: 200 }}                                placeholder="请输入门禁编号"                                value={this.state.doorId}                                onChange={(e) => {                                    this.setState({                                        doorId: e.target.value,                                    });                                }}                            />                            <Button                                disabled={!(this.state.doorId || this.state.doorId == 0)}                                style={{ position: "absolute" }}                                type={"primary"}                                onClick={this.verifyDoor}                            >                                验证重复                            </Button>                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem className="half-item" {...formItemLayout} label="姓名">                            <Input                                placeholder="请输入姓名"                                style={{ width: 200 }}                                value={this.state.name}                                onChange={(e) => {                                    this.setState({                                        name: e.target.value,                                    });                                }}                            />                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="出生日期"                        >                            <DatePicker                                value={                                    this.state.birthdays ? moment(this.state.birthdays) : null                                }                                onChange={(e, t) => {                                    this.setState({                                        birthdays: t,                                    });                                }}                            />                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem className="half-item" {...formItemLayout} label="性别">                            <Radio.Group                                onChange={(e) => {                                    this.setState({ sex: e.target.value });                                }}                                value={this.state.sex}                            >                                <Radio value={0}>男</Radio>                                <Radio value={1}>女</Radio>                            </Radio.Group>                        </FormItem>                        <FormItem className="half-item" {...formItemLayout} label="民族">                            <Input                                placeholder="输入民族(例:汉族)"                                style={{ width: 200 }}                                value={this.state.nation}                                onChange={(e) => {                                    this.setState({                                        nation: e.target.value,                                    });                                }}                            />                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="户籍地址"                        >                            <Cascader                                options={this.state.Area}                                value={this.state.residence}                                placeholder="选择城市"                                style={{ width: "200px" }}                                onChange={(e, pre) => {                                    this.setState({ residence: e });                                }}                            />                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="户籍街道地址"                        >                            <Input                                placeholder="输入街道地址"                                style={{ width: 200 }}                                value={this.state.residenceAddress}                                onChange={(e) => {                                    this.setState({                                        residenceAddress: e.target.value,                                    });                                }}                            />                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="现住地址"                        >                            <Cascader                                options={this.state.Area}                                value={this.state.now}                                placeholder="选择城市"                                style={{ width: "200px" }}                                onChange={(e, pre) => {                                    this.setState({ now: e });                                }}                            />                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="现住街道地址"                        >                            <Input                                placeholder="输入街道地址"                                style={{ width: 200 }}                                value={this.state.nowAddress}                                onChange={(e) => {                                    this.setState({                                        nowAddress: e.target.value,                                    });                                }}                            />                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem className="half-item" {...formItemLayout} label="籍贯">                            <Cascader                                options={this.state.Birthplaces}                                value={this.state.nativePlace}                                placeholder="选择籍贯"                                style={{ width: "200px" }}                                onChange={(e, pre) => {                                    this.setState({ nativePlace: e });                                }}                            />                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="身份证"                        >                            <Input                                placeholder="输入身份证信息"                                style={{ width: 200 }}                                value={this.state.idCard}                                onChange={(e) => {                                    this.setState({                                        idCard: e.target.value,                                    });                                }}                            />                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="身份证领证机关"                        >                            <Input                                placeholder="输入机关名称"                                style={{ width: 200 }}                                value={this.state.certificationAuthority}                                onChange={(e) => {                                    // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;                                    this.setState({                                        certificationAuthority: e.target.value,                                    });                                }}                            />                            {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="婚姻状态"                        >                            <Radio.Group                                onChange={(e) => {                                    this.setState({ marriage: e.target.value });                                }}                                value={this.state.marriage}                            >                                <Radio value={0}>未婚</Radio>                                <Radio value={1}>已婚</Radio>                                <Radio value={2}>离异</Radio>                            </Radio.Group>                        </FormItem>                    </div>                    <div className="clearfix">                        <FormItem                            className="half-item"                            labelCol={{ span: 6 }}                            wrapperCol={{ span: 30 }}                            label="子女数量"                        >                            <span>儿子:</span>                            <Input                                placeholder="输入数量"                                style={{ width: 80 }}                                type={"number"}                                value={this.state.son}                                onChange={(e) => {                                    this.setState({                                        son: e.target.value,                                    });                                }}                            />                            <span style={{ marginLeft: 10 }}>女儿:</span>                            <Input                                placeholder="输入数量"                                style={{ width: 80 }}                                type={"number"}                                value={this.state.girl}                                onChange={(e) => {                                    this.setState({                                        girl: e.target.value,                                    });                                }}                            />                        </FormItem>                        <FormItem                            className="half-item"                            {...formItemLayout}                            label="政治面貌"                        >                            <Select                                placeholder="请选择政治面貌"                                style={{ width: 200 }}                                onChange={(e) => {                                    this.setState({ politicalOutlook: e });                                }}                                value={this.state.politicalOutlook}                            >                                <Select.Option value={0}>群众</Select.Option>                                <Select.Option value={1}>中共预备党员</Select.Option>                                <Select.Option value={2}>中共党员</Select.Option>                                <Select.Option value={3}>致公党党员</Select.Option>                            </Select>                        </FormItem>                    </div>                    <Checkbox                        style={{                            paddingLeft: '34px',                            paddingTop: '10px',                        }}                        checked={this.state.establish}                        onChange={                            (e) => {                              this.setState({                                  establish: e.target.checked                            });                        }}>                        是否同步创建系统账户                    </Checkbox>                    {!this.state.establish  ? <Button                        type="primary"                        shape="round"                        size="large"                        style={{                            position: "relative",                            left: "24%",                            top: '10px',                            transform: "translateX(-50%)",                        }}                        onClick={this.props.isAddPeo ? ()=>{this.inspect(this.addOk)} : ()=>{this.inspect(this.editOk)}}                    >                        保存                    </Button> : null}                    {this.state.establish ? <div>                        <div>----------------------------------------------------------------------------------------------------------------------------------------------------------------</div>                        <UserProcessing                            userDetaile={this.state.aid ? true : false}                            name={this.state.name}                            aid={this.state.aid}                            inspect={(v)=>{this.inspect(v)}}                            onPreservation={(aid)=>{                                if(this.props.isAddPeo){                                    this.addOk(aid);                                }else{                                    this.editOk(aid);                                }                            }}                        />                    </div> : null}                </Spin>            </Modal>        )    }}export default UserProfile;
 |