app-base-web/src/pages/right/Safeinfo/Team.js

web development common base package.

import React, { Suspense, lazy } from 'react';
import { Layout, Table, Form, Modal, Row, Col, Button, Input,Switch, message } from 'antd';
import api from "../../../library/util-axios"
export default class Team extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "分组管理",
      url: "Team/",
      params: {
        outId: this.props.outId || [],
        isExpert: 1
      },
      data: [],
      pagination: {},
      loading: false,
      selected: [],//Table checked
      showGrid: "none",
    };
  }
  componentDidMount() {
    this.onLoad(this.state.params || {});
  }
  /*** Table ***/
  async onLoad(params) {
    this.setState({ loading: true, showGrid: "" });
    const rs = await api.get(this.state.url + "getList", params);
    const pagination = {
      pageSizeOptions: ["20", "100", "200", "500", "1000"],
      pageSize: params.pageSize || 20,
      defaultPageSize: params.pageSize || 20,
      showSizeChanger: true,
      showQuickJumper: true,
      total: rs.total,
      showTotal: (total) => { return `总记录 ${total} ` }
    };
    let selected = [];
    console.log(rs.data)
    for (let i = 0; i < rs.data.length; i++) {
      let map = rs.data[i];
      if (map && map._id1) {
        selected.push(map._id1);
      }
    }
    this.setState({
      loading: false,
      data: rs.data,
      pagination,
      selected,
    });
  }
  onChange = (pagination, filters, sorter) => {
    let params = this.state.params;
    params.pageSize = pagination.pageSize;
    params.pageIndex = pagination.current;
    this.onLoad(params);
  }
  onSelect = (selectedRowKeys) => {
    if (this.props.outId.length == 0) {
      message.error("请选择一条维权信息记录!");
      return false;
    }
    this.setState({
      selected: selectedRowKeys
    });
    let params = {
      outId: this.props.outId,
      userId: JSON.stringify(selectedRowKeys)
    }
    api.post(this.state.url + "save", params).then(function (rs) {
      if (rs.success) {
        message.info(rs.msg);
      } else { message.error(rs.msg); }
    });
  }
  onSearch = (value) => {
    let params = this.state.params;
    params.name = value;
    this.onLoad(params);
  }
  setExpertType = (teamId, checked) => {
    if(!teamId){
      message.warn("请先选择专家组成一个专家组。");
      return;
    }
    let me = this;
    api.post(me.state.url + "setExpertType", {
      "id": teamId,
      "checked": checked
    }).then(function (rs) {
      if (rs.success) {
        message.info(rs.msg);
        me.onLoad(me.state.params || {});
      } else { message.error(rs.msg); }
    });
  }
  /*** ****/
  render() {
    var tableCfg = {
      "size": "middle",
      "bordered": false,
      "rowKey": "id",
      "scroll": { "x": "100%" },
      columns: [{
        title: "专家名称",
        dataIndex: "name"
      },
        {
          title: "专家类型",
          dataIndex: "type",
          render: (text, record) => {
            return <Switch onChange={(checked) => {
              this.setExpertType(record.teamId, checked);
            }} checkedChildren="组长" unCheckedChildren="" checked={Boolean(text)} />
          }
        }, {
          title: "调解承诺书",
          dataIndex: "fileUrl"
        }],
      rowSelection: {
        columnWidth: 60,
        selectedRowKeys: this.state.selected,
        onChange: (selectedRowKeys, selectedRows) => {
          return this.onSelect(selectedRowKeys);
        }
      },
      dataSource: this.state.data,
      pagination: this.state.pagination,
      loading: this.state.loading,
      onChange: this.onChange
    }
    return (
      <div className="app-admin">
        <div style={{ height: "100%", background: "#fff", display: this.state.showGrid }}>
          <Row className="main-toolbar">
            <Col xs={12}>
              <Button className="btn-reload" onClick={() => { this.onSearch("") }}><i className="iconfont icon-reload"></i>刷新</Button>
            </Col>
            <Col className="query-filed" xs={12}>
              <Input.Search placeholder="请输入名称" onSearch={value => this.onSearch(value.trim())} enterButton />
            </Col>
          </Row>
          <Table {...tableCfg} />
        </div>
      </div>
    );
  }
}