render()

in src/routes/System/User/index.js [233:418]
112 lines of code
1 McCabe index (conditional complexity)

  render() {
    const { manage, loading, dispatch } = this.props;
    const { userList, total } = manage;
    const { currentPage, pageSize, selectedRowKeys, userName, popup } =
      this.state;
    const userColumns = [
      {
        align: "center",
        title: getIntlContent("SHENYU.SYSTEM.USERNAME"),
        dataIndex: "userName",
        key: "userName",
        ellipsis: true,
      },
      {
        align: "center",
        title: getIntlContent("SHENYU.SYSTEM.STATUS"),
        dataIndex: "enabled",
        key: "enabled",
        ellipsis: true,
        render: (text, row) => (
          <AuthButton
            perms="system:manager:edit"
            noAuth={
              text ? (
                <div className="open">
                  {getIntlContent("SHENYU.COMMON.OPEN")}
                </div>
              ) : (
                <div className="close">
                  {getIntlContent("SHENYU.COMMON.CLOSE")}
                </div>
              )
            }
          >
            <Switch
              disabled={row.userName === "admin"}
              checkedChildren={getIntlContent("SHENYU.COMMON.OPEN")}
              unCheckedChildren={getIntlContent("SHENYU.COMMON.CLOSE")}
              checked={text}
              onChange={(checked) => {
                dispatch({
                  type: "manage/updateUserStatus",
                  payload: {
                    id: row.id,
                    enabled: checked,
                    userName: row.userName,
                  },
                  callback: () => {
                    this.getAllUsers();
                  },
                });
              }}
            />
          </AuthButton>
        ),
      },
      {
        align: "center",
        title: getIntlContent("SHENYU.SYSTEM.CREATETIME"),
        dataIndex: "dateCreated",
        key: "dateCreated",
        ellipsis: true,
        sorter: (a, b) => (a.dateCreated > b.dateCreated ? 1 : -1),
      },
      {
        align: "center",
        title: getIntlContent("SHENYU.SYSTEM.UPDATETIME"),
        dataIndex: "dateUpdated",
        key: "dateUpdated",
        ellipsis: true,
        sorter: (a, b) => (a.dateUpdated > b.dateUpdated ? 1 : -1),
      },
      {
        align: "center",
        title: getIntlContent("SHENYU.COMMON.OPERAT"),
        dataIndex: "operate",
        key: "operate",
        ellipsis: true,
        render: (text, record) => {
          return (
            record.userName !== "admin" && (
              <div>
                <AuthButton perms="system:manager:edit">
                  <span
                    className="edit"
                    onClick={() => {
                      this.editClick(record);
                    }}
                  >
                    {getIntlContent("SHENYU.SYSTEM.EDITOR")}
                  </span>
                </AuthButton>
                <AuthButton perms="system:manager:configureDataPermission">
                  &nbsp;&nbsp;&nbsp;
                  <span
                    className="edit"
                    onClick={() => {
                      this.permissionConfig(record);
                    }}
                  >
                    {getIntlContent("SHENYU.BUTTON.DATA.PERMISSION.CONFIG")}
                  </span>
                </AuthButton>
              </div>
            )
          );
        },
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: (record) => ({
        disabled: record.userName === "admin",
      }),
    };

    return (
      <div className="plug-content-wrap">
        <div style={{ display: "flex" }}>
          <Input
            allowClear
            value={userName}
            onChange={this.searchOnchange}
            placeholder={getIntlContent("SHENYU.SYSTEM.USER.NAME")}
            style={{ width: 240 }}
          />
          <AuthButton perms="system:manager:list">
            <Button
              style={{ marginLeft: 20 }}
              type="primary"
              onClick={this.searchClick}
            >
              {getIntlContent("SHENYU.SYSTEM.SEARCH")}
            </Button>
          </AuthButton>
          <AuthButton perms="system:manager:delete">
            <Popconfirm
              title={getIntlContent("SHENYU.COMMON.DELETE")}
              placement="bottom"
              onConfirm={() => {
                this.deleteClick();
              }}
              okText={getIntlContent("SHENYU.COMMON.SURE")}
              cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
            >
              <Button style={{ marginLeft: 20 }} type="danger">
                {getIntlContent("SHENYU.SYSTEM.DELETEDATA")}
              </Button>
            </Popconfirm>
          </AuthButton>
          <AuthButton perms="system:manager:add">
            <Button
              style={{ marginLeft: 20 }}
              type="primary"
              onClick={this.addClick}
            >
              {getIntlContent("SHENYU.SYSTEM.ADDDATA")}
            </Button>
          </AuthButton>
        </div>

        <Table
          size="small"
          style={{ marginTop: 30 }}
          bordered
          loading={loading}
          columns={userColumns}
          dataSource={userList}
          rowSelection={rowSelection}
          pagination={{
            total,
            showTotal: (showTotal) => `${showTotal}`,
            showSizeChanger: true,
            pageSizeOptions: ["12", "20", "50", "100"],
            current: currentPage,
            pageSize,
            onShowSizeChange: this.onShowSizeChange,
            onChange: this.pageOnchange,
          }}
        />
        {popup}
      </div>
    );
  }