~liuwh/nsjcy.git

/**
 * 徐祥健<xuxj@hugeinfo.com.cn>
 * 2018年12月10日 11:06
 *
 */
 
 
import React from 'react';
import HeadView from '../view/HeadView';
import TableBtnView from '../view/TableBtnView';
import { Input, Button, DatePicker, Divider, message, Modal, Tabs, Badge } from 'antd';
import moment from 'moment';
import Fetch from '../fetch';
import TableView from '../view/TableView';
const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;
export default class InsideUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      log: [],
      addLog: [],
      resLog: [],
      loading: false,
      visible: false,
      savedate: {},
      formdata: {},
      resetKey: Date.now(),
      closeKey: Date.now()
    };
  }
  componentDidMount() {
    document.title = '内部用户管理';
    this.getData();
  }
 
  getLog = () => {
    Fetch.getLog()
      .then(res => {
        for (var i = 0; i < res.length; i++) {
          res[i]['index'] = i + 1;
        }
        this.setState({
          log: res
        });
      });
  }
  getUserLog = () => {
    Fetch.getUserLog()
      .then(res => {
        for (var i = 0; i < res.addLog.length; i++) {
          res.addLog[i]['index'] = i + 1;
        }
        for (var i = 0; i < res.resLog.length; i++) {
          res.resLog[i]['index'] = i + 1;
        }
        this.setState({
          addLog: res.addLog,
          resLog: res.resLog
        });
      });
  }
 
 
  getData = () => {
    const { formdata } = this.state;
    Fetch.getInsideUser(formdata)
      .then(res => {
        for (var i = 0; i < res.length; i++) {
          res[i]['index'] = i + 1;
        }
        this.setState({
          data: res
        });
      });
  }
  onInputChange = ({ target: { value, name } }) => {
    this.setState(({ formdata }) => ({
      formdata: {
        ...formdata,
        [name]: value
      }
    }))
  }
  saveInputChange = ({ target: { value, name } }) => {
    this.setState(({ savedate }) => ({
      savedate: {
        ...savedate,
        [name]: value
      }
    }))
  }
  Seaech = () => {
    const { formdata } = this.state;
    Fetch.getInsideUser(formdata)
      .then(res => {
        for (var i = 0; i < res.length; i++) {
          res[i]['index'] = i + 1;
        }
        this.setState({
          data: res
        });
      });
  }
  Reset = () => {
    this.setState({
      resetKey: Date.now(),
      formdata: {}
    }, this.getData);
  }
 
  showModal = (id) => {
    this.setState({
      visible: true,
    });
    Fetch.getUDtetail(id)
      .then(res => {
        console.log(res);
        this.setState({ savedate: res })
      })
  }
 
  handleOk = () => {
    this.setState({ loading: true });
    const { savedate } = this.state;
    if (savedate.mobile) {
      if (!validator.mobile(savedate.mobile)) {
        this.setState({
          loading: false
        });
        return message.warning("电话号码格式不正确");
      }
    }
    if (savedate.email) {
      if (!validator.email(savedate.email)) {
        this.setState({
          loading: false
        });
        return message.warning("电子邮箱格式不正确");
      }
    }
    if (!savedate.qywxUserid) {
      this.setState({
        loading: false
      });
      return message.warning("账号不能为空");
    }
    if (!savedate.userPassword) {
      this.setState({
        loading: false
      });
      return message.warning("密码不能为空");
    } else {
      var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$');
      if (!regex.test(savedate.userPassword)) {
        this.setState({
          loading: false
        });
        return message.warning("密码不符合规则");
      }
    }
    Fetch.saveUser(savedate)
      .then(res => {
        if (res.code === 0) {
          this.setState({
            loading: false,
            visible: false,
            closeKey: Date.now()
          }, this.getData);
          message.success("提交成功！")
        } else {
          this.setState({
            loading: false
          });
          message.error(res.msg, 2)
        }
      });
  }
 
  handleCancel = () => {
    this.setState({
      closeKey: Date.now(),
      visible: false
    });
  }
 
  deleteItems = (id) => {
    confirm({
      title: '确认要删除这条数据吗?',
      onOk: () => {
        Fetch.deleteUser(id)
          .then(data => {
            if (data.code == 0) {
              message.success("删除成功！")
              this.setState({
                resetKey: Date.now(),
                formdata: {}
              }, this.getData);
            } else {
              message.error('删除失败，请联系管理员', 2)
            }
          })
      }
    });
  }
 
  unlocking = (id) => {
    confirm({
      title: '确认要解锁这个账号吗?',
      onOk: () => {
        Fetch.unlocking(id)
          .then(data => {
            if (data.code == 0) {
              message.success("解锁成功！")
              this.setState({
                resetKey: Date.now(),
                formdata: {}
              }, this.getData);
            } else {
              message.error('解锁失败，请联系管理员', 2)
            }
          })
      }
    });
  }
 
  tabClike = (val) => {
    console.log(val);
    switch (val) {
      case '1':
        this.getData();
        break;
      case '2':
        this.getLog();
        break;
      case '3':
      case '4':
        this.getUserLog();
        break;
    }
  }
 
  render() {
    const columns = [{
      title: '序号',
      dataIndex: 'index',
      key: 'index'
    }, {
      title: '用户名称',
      dataIndex: 'qywxUsername',
      key: 'qywxUsername'
    }, {
      title: '登陆名称',
      dataIndex: 'qywxUserid',
      key: 'qywxUserid',
    }
      , {
      title: '登陆密码',
      dataIndex: 'userPassword',
      key: 'userPassword',
    }, {
      title: '联系电话',
      dataIndex: 'mobile',
      key: 'mobile',
    }, {
      title: '联系邮箱',
      dataIndex: 'email',
      key: 'email',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
    }, {
      title: '账户状态',
      dataIndex: 'islock',
      key: 'islock',
      render: text => (text === 0 ?
        <Badge count={'正常'} style={{ backgroundColor: '#52c41a' }} /> : <Badge count={'已锁'} />
      )
    }, {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <label onClick={() => this.showModal(record.qywxUserid)} className='theme-color' style={{ cursor: 'pointer' }}>编辑</label>
          <Divider type="vertical" />
          <label onClick={() => this.deleteItems(record.id)} className='theme-color' style={{ cursor: 'pointer' }}>删除</label>
          {record.islock === 1 ?
            <Divider type="vertical" /> : null
          }
          {record.islock === 1 ?
            <label onClick={() => this.unlocking(record.qywxUserid)} className='theme-color' style={{ cursor: 'pointer' }}>解锁</label>
            : null
          }
 
 
        </span>
      ),
    }];
 
    const columnsLog = [{
      title: '序号',
      dataIndex: 'index',
      key: 'index'
    }, {
      title: '登陆用户',
      dataIndex: 'user',
      key: 'user'
    }, {
      title: '登陆IP',
      dataIndex: 'ip',
      key: 'ip',
    }
      , {
      title: '登陆终端',
      dataIndex: 'terminal',
      key: 'terminal',
    }, {
      title: '浏览器',
      dataIndex: 'browser',
      key: 'browser',
    }, {
      title: '登陆时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
    }];
 
 
    const columnsAddLog = [{
      title: '序号',
      dataIndex: 'index',
      key: 'index'
    }, {
      title: '操作人',
      dataIndex: 'doUser',
      key: 'doUser'
    }, {
      title: '操作时间',
      dataIndex: 'doTime',
      key: 'doTime',
      render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
    }
      , {
      title: '添加人姓名',
      dataIndex: 'toUser',
      key: 'toUser',
    }];
 
    const columnsResouceLog = [{
      title: '序号',
      dataIndex: 'index',
      key: 'index'
    }, {
      title: '操作人',
      dataIndex: 'doUser',
      key: 'doUser'
    }, {
      title: '操作时间',
      dataIndex: 'doTime',
      key: 'doTime',
      render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
    }
      , {
      title: '被分配角色名称',
      dataIndex: 'toUser',
      key: 'toUser',
    }, {
      title: '被分配资源名称',
      dataIndex: 'resName',
      key: 'resName',
    }];
 
    const { data, resetKey, visible, loading, savedate, closeKey, log, addLog, resLog } = this.state;
    return (
      <div className="app-page">
        <HeadView history={this.props.history} />
        <div className="card-container">
          <Tabs type="card" onChange={(value) => this.tabClike(value)}>
            <TabPane tab="用户管理" key="1" onClick={() => this.getData}>
              <TableBtnView key={-resetKey} type="infoManage" name='内部用户管理' btnName='新建用户' onClick={() => this.showModal('new')}>
                <Input placeholder="根据账号模糊查询" style={{ width: "200px" }} name='qywxUserid' onChange={this.onInputChange} />
                <Input placeholder="根据用户名称模糊查询" style={{ width: "200px" }} name='qywxUsername' onChange={this.onInputChange} />
                <Input placeholder="根据联系电话模糊查询" style={{ width: "200px" }} name='mobile' onChange={this.onInputChange} />
                <DatePicker onChange={(_, value) => this.onInputChange({ target: { name: 'createTime', value } })} placeholder="根据创建时间查询" />
                <Button type="primary" onClick={this.Seaech}>查询</Button>
                <Button onClick={this.Reset}>重置</Button>
              </TableBtnView>
              <TableView columns={columns} data={data} pageSize='7' size='default' />
            </TabPane>
            <TabPane tab="登陆日志" key="2" onClick={() => this.getLog}>
              <TableView columns={columnsLog} data={log} pageSize='10' size='default' />
            </TabPane>
            <TabPane tab="用户添加日志" key="3" onClick={() => this.getUserLog}>
              <TableView columns={columnsAddLog} data={addLog} pageSize='10' size='default' />
            </TabPane>
            <TabPane tab="用户权限分配日志" key="4" onClick={() => this.getUserLog}>
              <TableView columns={columnsResouceLog} data={resLog} pageSize='10' size='default' />
            </TabPane>
          </Tabs>
        </div>
        <Modal
          key={closeKey}
          confirmLoading={loading}
          visible={visible}
          title="用户信息"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          bodyStyle={{ lineHeight: 4 }}
        >
          <Input addonBefore="登陆账号" name='qywxUserid' onChange={this.saveInputChange} value={savedate.qywxUserid || ''} />
          <Input addonBefore="登陆密码" name='userPassword' onChange={this.saveInputChange} value={savedate.userPassword || ''} />
          <p style={{ lineHeight: 'initial', fontSize: '12px', color: '#1790FF' }}>密码规则：在数字，大写字母，小写字母，特殊字符四选三组成的密码强度，且长度在8到20个字符之间</p>
          <Input addonBefore="用户名称" name='qywxUsername' onChange={this.saveInputChange} value={savedate.qywxUsername || ''} />
          <Input addonBefore="用户部门" name='upasPostname' onChange={this.saveInputChange} value={savedate.upasPostname || ''} />
          <Input addonBefore="联系电话" name='mobile' onChange={this.saveInputChange} value={savedate.mobile || ''} />
          <Input addonBefore="电子邮箱" name='email' onChange={this.saveInputChange} value={savedate.email || ''} />
        </Modal>
      </div>
    );
  }
 
}