| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710 | import React from 'react';import { Icon, Modal, message, AutoComplete, Spin, Input, Select, Button, Form, Popconfirm, TreeSelect } from 'antd';import $ from 'jquery/src/ajax';import './userMangagement.less';import { cityArr, station, post } from '../../../dataDic.js';import { splitUrl } from '../../../tools.js';import moment from 'moment';import ImgList from "../../../common/imgList";import StaffSearch from '../../../../component/common/staffSearch';//图片组件const PicturesWall = React.createClass({  getInitialState() {    return {      previewVisible: false,      previewImage: '',      fileList: [],      role: [],      district: [],      cityOption: [],    }  },  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" }}>        <ImgList          domId={this.props.domId}          uploadConfig={{            action: globalConfig.context + "/api/admin/superviser/uploadAdminImg",            data: { 'sign': this.props.pictureSign },            multiple: true,            listType: "picture-card",          }}          onChange={(infor) => {            this.handleChange(infor)          }}          fileList={fileList}        />      </div>    );  }});const Newuser = Form.create()(React.createClass({  getInitialState() {    return {      orgCodeUrl: [],      loading: false,      loaduser: {},      datauser: [],      role: []    };  },  getDefaultProps() {    return {      userDetaile: false    }  },  handleSubmit(e) {    e.preventDefault();    if (!this.state.role || this.state.role.length === 0) {      message.warning('请选择角色');      return false;    };    // if (!this.state.status && this.props.userDetaile) {    //     message.warning('请选择角色状态');    //     return false;    // };    if (window.adminData.isSuperAdmin) {      if (!this.state.departmentId) {        message.warning('请选择组织部门');        return false;      };    }    if (!this.state.theTypes && !this.state.superiorId) {      message.warning('请输入正确的上级主管');      return false;    };    if (!this.state.reviewer) {      message.warning('请输入正确的公出审核人');      return false;    }    if (this.state.contactMobile) {      if (!(/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile))) {        message.warning("不是完整的11位手机号或者正确的手机号前七位");        this.setState({          loading: false        });        return false;      }    }    // if (this.state.ambId == null || this.state.ambId == undefined) {    //     message.warning('请选择所属巴');    //     return false;    // }    let theorgCodeUrl = [];    if (this.state.orgCodeUrl.length) {      let picArr = [];      this.state.orgCodeUrl.map(function (item) {        if (item.response && item.response.data && item.response.data.length) {          picArr.push(item.response.data);        }      });      theorgCodeUrl = picArr.join(",");    };    let api = this.props.userDetaile ? "/api/admin/superviser/updateAdmin" : '/api/admin/superviser/insertAdmin'    this.setState({      loading: true    });    $.ajax({      method: "POST",      dataType: "json",      crossDomain: false,      url: globalConfig.context + api,      data: {        roles: this.state.role,        data: JSON.stringify({          id: this.state.id ? this.state.id : this.props.addId,          mobile: this.state.mobile,          seniorStaff: this.state.seniorStaff,          publicPurview: this.state.publicPurview,          status: this.state.status,          contactMobile: this.state.contactMobile,          name: this.state.name,          departmentId: window.adminData.isSuperAdmin ? this.state.departmentId : window.adminData.departmentId,          duty: this.state.duty,          position: this.state.position,//岗位          email: this.state.email,          superiorId: this.state.theTypes ? this.state.theTypes : this.state.superiorId,          reviewer: this.state.reviewer,          district: this.state.district,          headPortraitUrl: theorgCodeUrl.length ? theorgCodeUrl : '',          entryTime: this.state.selTime,          ambId: !!this.state.ambId ? this.state.ambId : null,          managerId: this.state.managerId,          expenseSuperExamine: this.state.expenseSuperExamine, // 报销是否需要上级审核          publicCarbonCopy: this.state.publicCarbonCopy,// 公出抄送        })      }    }).done(function (data) {      this.setState({        loading: false      });      if (!data.error.length) {        message.success('保存成功!');        this.handleOk();      } else {        message.warning(data.error[0].message);      }    }.bind(this));  },  //主管初始加载(自动补全)  supervisor(e) {    $.ajax({      method: "post",      dataType: "json",      crossDomain: false,      url: globalConfig.context + "/api/admin/organization/selectName",      data: {        name: e      },      success: function (data) {        let thedata = data.data;        if (!thedata) {          if (data.error && data.error.length) {            message.warning(data.error[0].message);          };          thedata = {};        };        this.setState({          customerArr: thedata,        });      }.bind(this),    }).always(function () {      this.setState({        loading: false      });    }.bind(this));  },  //上级主管输入框失去焦点是判断客户是否存在  selectAuto(value) {    let theType = '';    let contactLists = this.state.customerArr || [];    if (value) {      contactLists.map(function (item) {        if (item.name === value.toString()) {          theType = item.id;        }      });    }    this.setState({      theTypes: theType,      superior: value    })    if (!this.state.reviewerName || !this.state.reviewer) {      this.setState({        reviewerName: value,        reviewer: theType      })    }  },  //值改变时请求客户名称  httpChange(e) {    if (e.length >= 1) {      this.supervisor(e);    }    this.setState({      superior: e    })  },  //查看基本详情基本信息  loaduser(record) {    if (record) {      $.ajax({        method: "post",        dataType: "json",        crossDomain: false,        url: globalConfig.context + '/api/admin/superviser/selectAllByid',        data: {          id: record.id        },        success: function (data) {          let thisdata = data.data;          if (!thisdata) {            if (data.error && data.error.length) {              message.warning(data.error[0].message);            };            thisdata = {};          };          this.setState({            id: thisdata.id,            mobile: thisdata.mobile,            name: thisdata.name,            email: thisdata.email,            createTime: thisdata.createTime,            district: thisdata.district != ' ' ? JSON.parse(thisdata.district) : undefined,            position: thisdata.position ? thisdata.position : undefined,            superior: thisdata.superior,            superiorId: thisdata.superiorId,//上级Id            reviewerName: thisdata.reviewerName,            reviewer: thisdata.reviewer, // 公出审核人            managerName: thisdata.managerName,            managerId: thisdata.managerId, // 经理审核            theTypes: '',            duty: thisdata.duty ? thisdata.duty : undefined,//职务            publicPurview: thisdata.publicPurview,            seniorStaff: thisdata.seniorStaff,            status: Number(thisdata.status),            contactMobile: thisdata.contactMobile ? thisdata.contactMobile : undefined,//手机号            departmentId: thisdata.departmentId ? thisdata.departmentId : undefined,//部门id            userNo: thisdata.userNo,            orgCodeUrl: thisdata.headPortraitUrl ? splitUrl(thisdata.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [],            role: this.props.role,            entryTime: thisdata.entryTime ? moment(thisdata.entryTime, 'YYYY-MM-DD') : undefined,            selTime: thisdata.entryTime,            ambId: !!thisdata.ambId && Number(thisdata.ambId), // 分巴id            expenseSuperExamine: thisdata.expenseSuperExamine, // 报销是否需要上级主管审核            publicCarbonCopy: thisdata.publicCarbonCopy, // 公出抄送            publicCarbonCopyName: thisdata.publicCarbonCopyName,          });        }.bind(this),      }).always(function () {        this.setState({          loading: false        });      }.bind(this));    }  },  //重置密码  resetPwd() {    this.setState({      loading: true    })    $.ajax({      type: 'post',      url: globalConfig.context + "/api/admin/superviser/resetPwd",      dataType: "json",      data: {        id: this.props.datauser.id      },    }).done((res) => {      if (res.error && res.error.length) {        message.error(res.error[0].message);      } else {        message.success("密码重置成功");      }    }).always(() => {      this.setState({        loading: false      })    });  },  handleOk(e) {    this.props.closeDesc(false, true);  },  handleCancel(e) {    this.props.closeDesc(false);  },  //入职时间选择  selTime(e, index) {    this.setState({      entryTime: e,      selTime: index    })  },  getOrgCodeUrl(e) {    this.setState({ orgCodeUrl: e });  },  componentWillMount(e) {    const cityArrs = [];    cityArr.map(function (item) {      cityArrs.push(        <Select.Option key={item.value}>{item.key}</Select.Option>      )    });    this.state.cityOption = cityArrs;  },  componentDidMount() {    if (this.props.datauser.id) {      this.loaduser(this.props.datauser)      this.setState({        rolek: this.props.role      })    }  },  render() {    const FormItem = Form.Item    const formItemLayout = {      labelCol: { span: 8 },      wrapperCol: { span: 14 },    };    const dataSources = this.state.customerArr || [];    const options = dataSources.map((group, index) =>      <Select.Option key={index} value={group.name}>{group.name}</Select.Option>    )    const departmentArr = this.props.departmentArr || [];    const roleArrS = this.props.roleArr || [];    const rolst = this.state.rolek || [];    return (      <div>        <Modal maskClosable={false} visible={this.props.showDesc}          onOk={this.handleOk} onCancel={this.handleCancel}          width='800px'          title={this.props.userDetaile ? '用户详情' : '新建用户'}          footer=''          className="admin-desc-content">          <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">            <Spin spinning={this.state.loading}>              <div className="clearfix">                <div className="clearfix">                  <FormItem className="half-item"                    {...formItemLayout}                    label="用户名" >                    <Input placeholder="输入登录用户名" value={this.state.mobile}                      onChange={(e) => { this.setState({ mobile: e.target.value }) }} required="required" style={{ width: '200px' }} />                    <span className="mandatory">*</span>                  </FormItem>                  {this.props.userDetaile ?                    <Popconfirm                      title={"用户 [ " + this.props.datauser.name + " ] 的密码将会重置为123456,确认操作?"}                      onConfirm={this.resetPwd}                      okText="确认"                      cancelText="取消"                      placement="topLeft">                      <Button>重置密码</Button>                    </Popconfirm> : ''}                </div>                <FormItem className="half-item"                  {...formItemLayout}                  label="用户角色"                >                  {roleArrS.length > 0 ?                    <Select                      mode="multiple"                      optionFilterProp={'title'}                      tokenSeparators={[',']}                      placeholder="选择用户角色"                      value={this.state.role}                      style={{ width: '200px', minHeight: '59px' }}                      onChange={(e) => {                        this.setState({                          role: e                        })                      }}>                      {                        roleArrS.map(function (item, _) {                          return <Select.Option title={item.roleName} value={item.id}>{item.roleName}</Select.Option>                        })                      }                    </Select> : null                  }                  <span className="mandatory">*</span>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label=""                >                  <span style={{ display: rolst.length > 1 ? 'block' : 'none', color: 'red' }}>存在多个角色</span>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="员工" >                  <Select                    placeholder="请选择"                    value={this.state.seniorStaff}                    style={{ width: '200px' }}                    onChange={(e) => { this.setState({ seniorStaff: e }) }}                  >                    <Select.Option value={0} >新员工</Select.Option>                    <Select.Option value={1} >老员工</Select.Option>                  </Select>                  <span className="mandatory">*</span>                </FormItem>                {this.props.userDetaile ? <FormItem className="half-item"                  {...formItemLayout}                  label="用户状态" >                  <Select                    placeholder="用户状态"                    value={this.state.status}                    style={{ width: '200px' }}                    onChange={(e) => { this.setState({ status: e }) }}                  >                    <Select.Option value={0} >正常</Select.Option>                    <Select.Option value={1} >锁定</Select.Option>                  </Select>                  <span className="mandatory">*</span>                </FormItem> : ''}                <FormItem className="half-item"                  {...formItemLayout}                  label="用户姓名" >                  <Input placeholder="请输入用户姓名" style={{ width: '200px' }} value={this.state.name}                    onChange={(e) => { this.setState({ name: e.target.value }) }} required="required" />                  <span className="mandatory">*</span>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="联系方式" >                  <Input placeholder="请输入手机号" style={{ width: '200px' }} value={this.state.contactMobile}                    onChange={(e) => { this.setState({ contactMobile: e.target.value }) }} />                </FormItem>                {/*<FormItem className="half-item"				                            {...formItemLayout}				                            label="入职时间" >				                            <DatePicker				                              style={{marginTop:'0',width:'200px',height:'27px'}}										      showTime										      format="YYYY-MM-DD"										      placeholder="选择入职时间"										      value={this.state.entryTime}										      onChange={(e,time)=>{this.selTime(e,time)}}										    />			                    		</FormItem>*/}                {window.adminData.isSuperAdmin ? <FormItem className="half-item"                  {...formItemLayout}                  label="组织部门" >                  <Select placeholder="选择组织部门"                    style={{ width: 200 }}                    value={this.state.departmentId}                    onChange={(e) => { this.setState({ departmentId: e }) }}>                    {                      departmentArr.map(function (item) {                        return <Select.Option key={item.id} >{item.name}</Select.Option>                      })                    }                  </Select>                  <span className="mandatory">*</span>                </FormItem> : ''}                <FormItem className="half-item"                  {...formItemLayout}                  label="职务"                >                  <Select placeholder="选择职务" style={{ width: '200px' }} value={this.state.duty} onChange={(e) => { this.setState({ duty: e }) }}>                    {                      post.map(function (item) {                        return <Select.Option key={item.value} >{item.key}</Select.Option>                      })                    }                  </Select>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="岗位"                >                  <Select placeholder="选择岗位" style={{ width: '200px' }} value={this.state.position} onChange={(e) => { this.setState({ position: e }) }}>                    {                      station.map(function (item) {                        return <Select.Option key={item.value} >{item.key}</Select.Option>                      })                    }                  </Select>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="电子邮箱" >                  <Input placeholder="请输入邮箱" style={{ width: '200px' }} value={this.state.email}                    onChange={(e) => { this.setState({ email: e.target.value }) }} />                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="上级主管"                >                  <AutoComplete                    className="certain-category-search"                    dropdownClassName="certain-category-search-dropdown"                    dropdownMatchSelectWidth={false}                    size="large"                    style={{ width: '200px' }}                    dataSource={options}                    placeholder="输入名称"                    value={this.state.superior}                    onChange={this.httpChange}                    filterOption={true}                    onSelect={this.selectAuto}                  >                    <Input />                  </AutoComplete>                  <span className="mandatory">*</span>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="报销是否需上级主管审核"                >                  <Select                    placeholder="请选择"                    value={this.state.expenseSuperExamine}                    style={{ width: '200px' }}                    onChange={(e) => { this.setState({ expenseSuperExamine: e }) }}                  >                    <Select.Option value={0} >否</Select.Option>                    <Select.Option value={1} >是</Select.Option>                  </Select>                </FormItem>                {this.props.userDetaile ?                  <FormItem className="half-item"                    {...formItemLayout}                    label="用户编号" >                    <span>{this.state.userNo}</span>                  </FormItem>                  : ''}                <FormItem className="half-item"                  {...formItemLayout}                  label="公出审核"                >                  <StaffSearch                    valueName={this.state.reviewerName}                    placeholder="输入名称"                    onBlurText={e => {                      this.setState({                        reviewerName: e.title                      })                    }}                    onBlurChange={(obj) => {                      this.setState({                        reviewer: obj.value,                      })                    }}                  />                  <span className="mandatory">*</span>                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="经理审核"                >                  <StaffSearch                    valueName={this.state.managerName}                    placeholder="输入名称"                    onBlurText={e => {                      this.setState({                        managerName: e.title                      })                    }}                    onBlurChange={(obj) => {                      this.setState({                        managerId: obj.value,                      })                    }}                  />                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="公出抄送"                >                  <StaffSearch                    valueName={this.state.publicCarbonCopyName}                    placeholder="输入名称"                    onBlurText={e => {                      this.setState({                        publicCarbonCopyName: e.title                      })                    }}                    onBlurChange={(obj) => {                      this.setState({                        publicCarbonCopy: obj.value,                      })                    }}                  />                </FormItem>                <FormItem className="half-item"                  {...formItemLayout}                  label="业务员"                >                  <Select                    placeholder="请选择"                    value={this.state.publicPurview}                    style={{ width: '200px' }}                    onChange={(e) => { this.setState({ publicPurview: e }) }}                  >                    <Select.Option value={0} >否</Select.Option>                    <Select.Option value={1} >是</Select.Option>                  </Select>                </FormItem>                <div className='clearfix'>                  <FormItem className="half-item"                    {...formItemLayout}                    label="地区" >                    <Select                      multiple                      style={{ width: '580px' }}                      placeholder="选择地区"                      filterOption={(input, option) => { return option.props.children.indexOf(input) >= 0 }}                      value={this.state.district}                      onChange={(pids) => {                        this.state.district = pids;                        this.setState({                          district: this.state.district                        })                      }}                    >                      {this.state.cityOption}                    </Select>                  </FormItem>                </div>                <div className="clearfix">                  <FormItem                    className="half-item"                    {...formItemLayout}                    label="用户头像"                  >                    <PicturesWall                      domId={'newUser1'}                      pictureSign="customer_sys_file"                      fileList={this.getOrgCodeUrl}                      pictureUrl={this.state.orgCodeUrl} />                    <p>图片建议:要清晰。</p>                  </FormItem>                  <FormItem                    className="half-item"                    {...formItemLayout}                    label="分巴"                  >                    <TreeSelect                      style={{ width: 200 }}                      value={this.state.ambId}                      dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}                      treeData={this.props.level1Data}                      placeholder="请选择"                      showSearch                      treeNodeFilterProp="title"                      onChange={(e) => {                        this.setState({                          ambId: e,                        });                      }}                    />                  </FormItem>                </div>              </div>              <FormItem wrapperCol={{ span: 12, offset: 4 }}>                <Button className="set-submit" type="primary" htmlType="submit">保存</Button>                <Button className="set-submit" type="ghost" onClick={this.handleCancel}>取消</Button>              </FormItem>            </Spin>          </Form >        </Modal>      </div>    )  }}));export default Newuser;
 |