antd#Tree JavaScript Examples

storiesOf('antd/tree', module).add('customized-icon', () => 
  <Tree
    showIcon
    defaultExpandAll
    defaultSelectedKeys={['0-0-0']}
    switcherIcon={<DownOutlined />}
    treeData={treeData}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can customize icons for different nodes.</p></>) } });

render() {
    return (
      <>
        <Search style={{marginBottom: 8}} placeholder="Search" onChange={this.onChange} />
        <Tree
          showIcon
          className="draggable-tree"
          defaultExpandedKeys={this.state.expandedKeys}
          draggable
          blockNode
          switcherIcon={<DownOutlined />}
          onDragEnter={this.onDragEnter}
          onDrop={this.onDrop}
          treeData={this.state.gData}
        />
      </>
    );
  }

HierarchicalTreeGenes = (props) => {
  const {
    treeData,
    onGeneReorder,
  } = props;

  const onDrop = (info) => {
    const {
      dragNode, node, dropPosition, dropToGap,
    } = info;

    // if dropped in place, ignore
    // dragNode.key is str, dropPosition is int
    if (dragNode.key == dropPosition) return;

    // If not dropped in gap, ignore
    if (!dropToGap) return;

    let newPosition = dropPosition - (dragNode.key < dropPosition ? 1 : 0);
    newPosition = Math.max(0, newPosition);

    onGeneReorder(dragNode.key, newPosition);
  };

  if (!treeData) return <Skeleton active />;

  return (
    <Tree
      data-testid='HierachicalTreeGenes'
      draggable
      treeData={treeData}
      onDrop={onDrop}
    />
  );
}

render() {
    const { showLine, showIcon, showLeafIcon, expandedKeys } = this.state;
    const { setShowLine, setShowIcon, setShowLeafIcon } = this;
    return (
      <>
        <div style={{ marginBottom: 16 }}>
          showLine: <Switch checked={showLine} onChange={setShowLine} />
          <br />
          <br />
          showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
          <br />
          <br />
          showLeafIcon: <Switch checked={showLeafIcon} onChange={setShowLeafIcon} />
        </div>
        <Tree
          showLine={showLine}
          showIcon={showIcon}
          className="draggable-tree"
          defaultExpandedKeys={expandedKeys}
          draggable
          blockNode
          onDragEnter={this.onDragEnter}
          onDrop={this.onDrop}
          treeData={this.state.gData}
        />
      </>
    );
  }

LabelList = observer(({ regionStore }) => {
  const treeData = regionStore.asLabelsTree((item, idx, isLabel, children, onClick) => {
    return {
      key: item.id,
      title: (data) => {
        return isLabel ? (
          <LabelItem item={item} idx={idx} regions={data.children} regionStore={regionStore} />
        ) : (
          <RegionItem item={item} idx={idx} onClick={onClick}/>
        );
      },
    };
  });

  return (
    <Tree
      className={styles.treelabels}
      treeData={treeData}
      showIcon={false}
      blockNode={true}
      defaultExpandAll={true}
      autoExpandParent={true}
      switcherIcon={<LsChevron opacity="0.25" />}
    />
  );
})

render() {
    return (
      <Tree
        className="draggable-tree"
        defaultExpandedKeys={this.state.expandedKeys}
        draggable
        blockNode
        onDragEnter={this.onDragEnter}
        onDrop={this.onDrop}
        treeData={this.state.gData}
      />
    );
  }

TreeNode = Tree.TreeNode

storiesOf('antd/tree', module).add('virtual-scroll', () => <Tree treeData={treeData} height={233} defaultExpandAll />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use virtual list through <code>height</code> prop.</p></>) } });

{ TreeNode } = Tree

{ TreeNode } = Tree

{ TreeNode } = Tree

{ DirectoryTree } = Tree

TreeNode = Tree.TreeNode

{ TreeNode } = Tree

TreeNode = Tree.TreeNode

TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
  const transferDataSource = [];
  function flatten(list = []) {
    list.forEach(item => {
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(dataSource);

  return (
    <Transfer
      {...restProps}
      targetKeys={targetKeys}
      dataSource={transferDataSource}
      className="tree-transfer"
      render={item => item.title}
      showSelectAll={false}
    >
      {({ direction, onItemSelect, selectedKeys }) => {
        if (direction === 'left') {
          const checkedKeys = [...selectedKeys, ...targetKeys];
          return (
            <Tree
              blockNode
              checkable
              checkStrictly
              defaultExpandAll
              checkedKeys={checkedKeys}
              treeData={generateTree(dataSource, targetKeys)}
              onCheck={(_, { node: { key } }) => {
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
              onSelect={(_, { node: { key } }) => {
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
            />
          );
        }
      }}
    </Transfer>
  );
}

TreeNode = Tree.TreeNode

Demo = () => <Tree defaultExpandAll height={400} treeData={treeData} />

{ TreeNode, DirectoryTree } = Tree

{ DirectoryTree, TreeNode } = Tree

render() {
    return (
      <Tree
        showLine
        switcherIcon={<DownOutlined />}
        defaultExpandedKeys={['0-0-0']}
        onSelect={this.onSelect}
        treeData={[
          {
            title: 'parent 1',
            key: '0-0',
            children: [
              {
                title: 'parent 1-0',
                key: '0-0-0',
                children: [
                  {
                    title: 'leaf',
                    key: '0-0-0-0',
                  },
                  {
                    title: 'leaf',
                    key: '0-0-0-1',
                  },
                  {
                    title: 'leaf',
                    key: '0-0-0-2',
                  },
                ],
              },
              {
                title: 'parent 1-1',
                key: '0-0-1',
                children: [
                  {
                    title: 'leaf',
                    key: '0-0-1-0',
                  },
                ],
              },
              {
                title: 'parent 1-2',
                key: '0-0-2',
                children: [
                  {
                    title: 'leaf',
                    key: '0-0-2-0',
                  },
                  {
                    title: 'leaf',
                    key: '0-0-2-1',
                  },
                ],
              },
            ],
          },
        ]}
      />
    );
  }

TreeNode = Tree.TreeNode

{ TreeNode } = Tree

TreeNode = Tree.TreeNode

render () {
    const { stateUserAuthority } = this.props
    const { getFieldDecorator } = this.props.form
    const { authority_type_select, authority_parent_name } = this.state

    const customLabel = data => {
      return (
        <div className="box-tree-title clearfix">
          <div className="pull-left">
            <span className="title">{data.authority_name} </span>
          </div>
          <div className="pull-right">
            <Icon
              onClick={() => {
                this.showCreateModal(data)
                this.setState({
                  is_create: true
                })
              }}
              type="plus-circle-o"
            />
            <Icon
              onClick={() => {
                this.showEditModal(data)
                this.setState({
                  is_create: false
                })
                this.props.dispatch({
                  type: 'SET_CURRENT_USER_AUTHORITY_INFO',
                  data: data
                })
              }}
              type="edit"
            />
            <Icon
              onClick={() => this.handleDeleteAuthority(data)}
              type="delete"
            />
          </div>
        </div>
      )
    }

    const TreeNodeTree = data => {
      return data.length > 0
        ? data.map(item => {
          return (
            <TreeNode key={item.authority_id} title={customLabel(item)}>
              {TreeNodeTree(item.children)}
            </TreeNode>
          )
        })
        : null
    }

    const itemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    const tailItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 5
        }
      }
    }

    return (
      <div className="layout-main">
        <div className="layout-main-title">
          <Breadcrumb>
            <Breadcrumb.Item href="#/manager/index">
              <Icon type="home" />
            </Breadcrumb.Item>
            <Breadcrumb.Item href="#/manager/index">
              <span>主页</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item href="#">
              <span>用户管理</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item>用户权限菜单</Breadcrumb.Item>
          </Breadcrumb>
        </div>

        <div className="layout-nav-btn">
          <button
            className="btn btn-danger"
            icon="plus"
            onClick={() => this.showCreateModal()}
            type="primary"
          >
            创建权限
          </button>
        </div>

        <div className="card admin-authority">
          <div className="card-body">
            <Modal
              footer={null}
              onCancel={this.handleCancel}
              title="权限"
              visible={this.state.visible}
            >
              <Form className="login-form" onSubmit={this.handleSubmit}>
                {authority_parent_name ? (
                  <Form.Item {...itemLayout} label="父权限名称">
                    <Input
                      disabled={true}
                      type="text"
                      value={this.state.authority_parent_name}
                    />
                  </Form.Item>
                ) : (
                    ''
                  )}

                <Form.Item {...itemLayout} hasFeedback label="权限名称">
                  {getFieldDecorator('authority_name', {
                    rules: [
                      {
                        required: true,
                        message: '请输入权限名称'
                      }
                    ]
                  })(<Input type="text" />)}
                </Form.Item>

                <Form.Item {...itemLayout} hasFeedback label="权限类型">
                  {getFieldDecorator('authority_type', {
                    rules: [
                      {
                        required: true,
                        message: '请选择权限类型！'
                      }
                    ]
                  })(
                    <Select
                      onChange={this.authority_type_Change}
                      placeholder="请选择权限类型！"
                    >
                      <Option value="1">基础菜单</Option>
                      <Option value="2">操作和功能</Option>
                    </Select>
                  )}
                </Form.Item>

                {Number(authority_type_select) === 2 ? (
                  <Form.Item {...itemLayout} hasFeedback label="权限路径">
                    {getFieldDecorator('authority_url', {
                      rules: [
                        {
                          required: true,
                          message: '请输入权限路径'
                        }
                      ]
                    })(
                      <Input
                        addonBefore="/api-client/v1"
                        placeholder="请输入权限路径"
                        type="text"
                      />
                    )}
                  </Form.Item>
                ) : (
                    <Form.Item {...itemLayout} hasFeedback label="权限Key">
                      {getFieldDecorator('authority_url', {
                        rules: [
                          {
                            required: true,
                            message: '请输入权限Key'
                          }
                        ]
                      })(<Input placeholder="请输入权限Key" type="text" />)}
                    </Form.Item>
                  )}

                <Form.Item {...itemLayout} label="排序">
                  {getFieldDecorator('authority_sort')(<InputNumber />)}
                </Form.Item>
                <Form.Item {...itemLayout} hasFeedback label="权限描述">
                  {getFieldDecorator('authority_description', {
                    rules: [
                      {
                        required: true,
                        message: '请输入权限描述'
                      }
                    ]
                  })(<Input placeholder="请输入权限描述" type="text" />)}
                </Form.Item>

                {Number(authority_type_select) !== 2 ? (
                  <Form.Item {...itemLayout} label="是否显示">
                    {getFieldDecorator('enable', { valuePropName: 'checked' })(
                      <Switch />
                    )}
                  </Form.Item>
                ) : (
                    ''
                  )}
                <Form.Item {...tailItemLayout}>
                  <Button
                    className="login-form-button"
                    htmlType="submit"
                    type="primary"
                  >
                    {this.state.is_create ? '提交' : '修改'}
                  </Button>
                  <Button onClick={this.handleReset} style={{ marginLeft: 8 }}>
                    重置
                  </Button>
                </Form.Item>
              </Form>
            </Modal>

            <Tree defaultExpandAll={true} showLine ref="tree">
              {stateUserAuthority.user_authority_list.map(item => {
                return (
                  <TreeNode key={item.authority_id} title={customLabel(item)}>
                    {TreeNodeTree(item.children)}
                  </TreeNode>
                )
              })}
            </Tree>
          </div>
        </div>
      </div>
    )
  }

render() {
    const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        filters: [
          { text: 'Joe', value: 'Joe' },
          { text: 'Jim', value: 'Jim' },
        ],
        filteredValue: null,
        onFilter: (value, record) => record.name.includes(value),
        sorter: (a, b) => a.name.length - b.name.length,
        sortOrder: true,
        ellipsis: true,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        sorter: false,
        sortOrder: true,
        ellipsis: true,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        filters: [
          { text: 'London', value: 'London' },
          { text: 'New York', value: 'New York' },
        ],
        filteredValue: null,
        onFilter: (value, record) => record.address.includes(value),
        sorter: false,
        sortOrder: true,
        ellipsis: true,
      },
    ];
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Switch
            unCheckedChildren="disabled"
            checkedChildren="disabled"
            checked={disabled}
            onChange={this.handleDisable}
            style={{ marginBottom: 16 }}
          />
          <Card title="Card Title">
            <Card.Grid>Content</Card.Grid>
            <Card.Grid hoverable={false}>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
            <Card.Grid>Content</Card.Grid>
          </Card>
          <Collapse>
            <Panel header="This is panel header 1" key="1">
              <Collapse defaultActiveKey="1">
                <Panel header="This is panel nest panel" key="1">
                  <p>{text}</p>
                </Panel>
              </Collapse>
            </Panel>
            <Panel header="This is panel header 2" key="2">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 3" key="3">
              <p>{text}</p>
            </Panel>
          </Collapse>
          <Transfer
            dataSource={mockData}
            titles={['Source', 'Target']}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onChange={this.handleTransferChange}
            onSelectChange={this.handleTransferSelectChange}
            render={item => item.title}
            disabled={disabled}
          />
          <TableTransfer
            dataSource={mockData}
            targetKeys={targetKeys}
            disabled={disabled}
            showSearch={showSearch}
            onChange={this.handleTableTransferChange}
            filterOption={(inputValue, item) =>
              item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
            }
            leftColumns={[
              {
                dataIndex: 'title',
                title: 'Name',
              },
              {
                dataIndex: 'description',
                title: 'Description',
              },
            ]}
            rightColumns={[
              {
                dataIndex: 'title',
                title: 'Name',
              },
            ]}
          />
          <Switch
            unCheckedChildren="disabled"
            checkedChildren="disabled"
            checked={disabled}
            onChange={this.triggerDisable}
            style={{ marginTop: 16 }}
          />
          <Switch
            unCheckedChildren="showSearch"
            checkedChildren="showSearch"
            checked={showSearch}
            onChange={this.triggerShowSearch}
            style={{ marginTop: 16 }}
          />
          <Anchor>
            <Link href="#components-anchor-demo-basic" title="Basic demo" />
            <Link href="#components-anchor-demo-static" title="Static demo" />
            <Link
              href="#components-anchor-demo-basic"
              title="Basic demo with Target"
              target="_blank"
            />
            <Link href="#API" title="API">
              <Link href="#Anchor-Props" title="Anchor Props" />
              <Link href="#Link-Props" title="Link Props" />
            </Link>
          </Anchor>
          <Tabs type="card">
            <TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
          <Timeline>
            <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
            <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
              Technical testing 2015-09-01
            </Timeline.Item>
            <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
          </Timeline>
          <Calendar />
          <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
            <TreeNode title="parent 1" key="0-0">
              <TreeNode title="parent 1-0" key="0-0-0">
                <TreeNode title="leaf" key="0-0-0-0" />
                <TreeNode title="leaf" key="0-0-0-1" />
                <TreeNode title="leaf" key="0-0-0-2" />
              </TreeNode>
              <TreeNode title="parent 1-1" key="0-0-1">
                <TreeNode title="leaf" key="0-0-1-0" />
              </TreeNode>
              <TreeNode title="parent 1-2" key="0-0-2">
                <TreeNode title="leaf" key="0-0-2-0" />
                <TreeNode title="leaf" key="0-0-2-1" />
              </TreeNode>
            </TreeNode>
          </Tree>
          <Table columns={columns} dataSource={data} footer={() => 'Footer'} />
          <Table
            columns={columnsTable}
            dataSource={dataTable}
            pagination={false}
            id="table-demo-summary"
            bordered
            summary={pageData => {
              let totalBorrow = 0;
              let totalRepayment = 0;

              pageData.forEach(({ borrow, repayment }) => {
                totalBorrow += borrow;
                totalRepayment += repayment;
              });

              return (
                <>
                  <tr>
                    <th>Total</th>
                    <td>
                      <Text type="danger">{totalBorrow}</Text>
                    </td>
                    <td>
                      <Text>{totalRepayment}</Text>
                    </td>
                  </tr>
                  <tr>
                    <th>Balance</th>
                    <td colSpan={2}>
                      <Text type="danger">{totalBorrow - totalRepayment}</Text>
                    </td>
                  </tr>
                </>
              );
            }}
          />
          <br />
          <Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
          <Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
          <Card
            hoverable
            style={{ width: 240 }}
            cover={
              <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            }
          >
            <Meta title="Europe Street beat" description="www.instagram.com" />
          </Card>
          <Slider defaultValue={30} />
          <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
          <Badge count={5}>
            <a href="#" className="head-example" />
          </Badge>
        </Modal>
      </>
    );
  }

render() {
		const { taskKey, task } = this.state;

		return (
			<>
				<PageHeader
					title="Tasks"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Row gutter={16} className="height-100 tree-height-100">
						<Col className="max-height-100" span={5}>
							<Tree
								showIcon
								blockNode
								treeData={this.state.data}
								onSelect={this.onSelect}
								selectedKeys={[taskKey]}
								style={{
									height: '100%',
									paddingRight: '.5rem',
									overflow: 'auto',
									background: '#0a0a0a',
									border: '1px solid #303030'
								}}
							/>
						</Col>
						<Col className="max-height-100" span={19}>
							{task ? (
								<Row gutter={[16, 14]} className="height-100" style={{ flexDirection: "column", flexWrap: "nowrap" }}>
									<Col flex="0 0 auto">
										<Row gutter={[16, 14]}>
											<Col span={24}>
												<PageHeader
													title={task.id}
													tags={
														task.stats.hasOwnProperty("status") ? (	
															HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="warning">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="processing">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="error">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="success">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="pink">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
																<Tag color="yellow">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															) : (
																<Tag color="default">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
															)
														) : null
													}
													style={{ padding: 0 }}
													extra={
														<Form layout="inline">
															<Form.Item
																label="Priority"
															>
																<InputNumber
																	min={-1}
																	max={999}
																	value={task.priority}
																	onChange={this.onChangePriority}
																	readOnly={this.state.isReadOnlyPriority}
																	bordered={false}
																/>
															</Form.Item>
															<Button
																icon={<ControlOutlined />}
																onClick={this.onClickArguments}
																style={{ marginRight: '1rem' }}
															>
																Arguments
															</Button>
															<Popconfirm
																placement="topRight"
																title="Are you sure you want to delete this task?"
																onConfirm={this.onClickDelete}
																okText="Yes"
																cancelText="No"
															>
																<Button
																	type="danger"
																	icon={<DeleteOutlined />}
																	loading={this.state.isLoadingDelete}
																>
																	Delete
																</Button>
															</Popconfirm>
														</Form>
													}
												/>
											</Col>
											<Col span={24}>
												{task.stats.hasOwnProperty("progress") ? (
													<Progress type="line" percent={Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100)} />
												) : (
													<Progress type="line" percent={0} />
												)}
											</Col>
											<Col span={24}>
												<Row gutter={[12, 10]}>
													<Col>
														<Button
															type="primary"
															icon={<PlayCircleOutlined />}
															onClick={this.onClickStart}
															loading={this.state.isLoadingStart}
														>
															Start
														</Button>
													</Col>
													<Col>
														<Button
															icon={<ReloadOutlined />}
															onClick={this.onClickRefresh}
															loading={this.state.isLoadingRefresh}
														>
															Refresh
														</Button>
													</Col>
													<Col>
														<Button
															icon={<PauseOutlined />}
															onClick={this.onClickPause}
															loading={this.state.isLoadingPause}
														>
															Pause
														</Button>
													</Col>
													<Col>
														<Button
															icon={<CaretRightOutlined />}
															onClick={this.onClickResume}
															loading={this.state.isLoadingResume}
														>
															Resume
														</Button>
													</Col>
													<Col>
														<Button
															icon={<EnvironmentOutlined />}
															onClick={this.onClickCheckpoint}
															loading={this.state.isLoadingCheckpoint}
														>
															Checkpoint
														</Button>
													</Col>
													<Col>
														<Button
															icon={<StepForwardOutlined />}
															onClick={this.onClickSkip}
															loading={this.state.isLoadingSkip}
														>
															Skip
														</Button>
													</Col>
													<Col>
														<Popconfirm
															placement="topRight"
															title="Are you sure you want to quit this task?"
															onConfirm={this.onClickQuit}
															okText="Yes"
															cancelText="No"
														>
															<Button
																type="danger"
																icon={<CloseOutlined />}
																loading={this.state.isLoadingQuit}
															>
																Quit
															</Button>
														</Popconfirm>
													</Col>
												</Row>
											</Col>
										</Row>
									</Col>
									<Col flex="1 1 auto">
										<Row gutter={[16, 14]} className="height-100">
											<Col className="max-height-100" span={16}>
												<Descriptions
													column={2}
													layout="horizontal"
													bordered
												>
													{task.stats.hasOwnProperty("status") && (
														<Descriptions.Item label="Status" span={2}>
															{HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="warning" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="processing" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="error" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
																<Badge status="success" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
																<Badge color="pink" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
																<Badge color="yellow" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															) : (
																<Badge status="default" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
															)}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("target") && (
														<Descriptions.Item label="Target" span={2}>
															{task.stats["target"]}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("progress") && (
														<Descriptions.Item label="Progress" span={2}>
															{task.stats["progress"][0] + " / " + task.stats["progress"][1] + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"}
															{task.stats.hasOwnProperty("guess") && (
																<Tooltip title={
																	<Descriptions bordered size="small" column={1} layout="horizontal">
																		{task.stats.guess.guess_base !== null ? (
																			<Descriptions.Item label="Guess Base">{task.stats.guess.guess_base} ({task.stats.guess.guess_base_offset}/{task.stats.guess.guess_base_count})</Descriptions.Item>
																		) : (
																			<Descriptions.Item label="Guess Base">-</Descriptions.Item>
																		)}
																		{task.stats.guess.guess_mod !== null ? (
																			<Descriptions.Item label="Guess Mod">{task.stats.guess.guess_mod} ({task.stats.guess.guess_mod_offset}/{task.stats.guess.guess_mod_count})</Descriptions.Item>
																		) : (
																			<Descriptions.Item label="Guess Mod">-</Descriptions.Item>
																		)}
																	</Descriptions>
																}>
																	<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
																</Tooltip>
															)}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("rejected") && (
														<Descriptions.Item label="Rejected" span={1}>
															{task.stats["rejected"]}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("restore_point") && (
														<Descriptions.Item label="Restore point" span={1}>
															{task.stats["restore_point"]}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("recovered_hashes") && (
														<Descriptions.Item label="Recovered hashes" span={1}>
															{task.stats["recovered_hashes"][0] + " / " + task.stats["recovered_hashes"][1] + " (" + Math.trunc((task.stats["recovered_hashes"][0] / task.stats["recovered_hashes"][1])*100) + "%)"}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("recovered_salts") && (
														<Descriptions.Item label="Recovered salts" span={1}>
															{task.stats["recovered_salts"][0] + " / " + task.stats["recovered_salts"][1] + " (" + Math.trunc((task.stats["recovered_salts"][0] / task.stats["recovered_salts"][1])*100) + "%)"}
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("devices") && (
														<Descriptions.Item label="Speed" span={2}>
															{humanizeSpeed(totalSpeed(task.stats["devices"]))}
															<Tooltip title={
																<Table
																	columns={[
																		{
																			title: 'ID',
																			dataIndex: 'id',
																			key: 'ID'
																		},
																		{
																			title: 'Speed',
																			dataIndex: 'speed',
																			key: 'Speed'
																		},
																		{
																			title: 'Temp',
																			dataIndex: 'temp',
																			key: 'Temp'
																		},
																		{
																			title: 'Util',
																			dataIndex: 'util',
																			key: 'Util'
																		}
																	]}
																	dataSource={task.stats["devices"].map(device =>
																		({
																			key: device.device_id,
																			id: device.device_id,
																			speed: humanizeSpeed(device.speed),
																			temp: device.hasOwnProperty("temp") ? device.temp + " °C": "-",
																			util: device.util + "%",
																		})
																	)}
																	size="small"
																	pagination={false}
																	style={{ overflow: 'auto' }}
																/>
															}>
																<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
															</Tooltip>
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("time_start") && (
														<Descriptions.Item label="Started" span={1}>
															<Tooltip title={moment.unix(task.stats["time_start"]).format("MMMM Do YYYY, HH:mm")}>
																{moment.unix(task.stats["time_start"]).fromNow()}
															</Tooltip>
														</Descriptions.Item>
													)}
													{task.stats.hasOwnProperty("estimated_stop") && (
														<Descriptions.Item label="ETA" span={1}>
															<Tooltip title={moment.unix(task.stats["estimated_stop"]).format("MMMM Do YYYY, HH:mm")}>
																{moment.unix(task.stats["estimated_stop"]).fromNow()}
															</Tooltip>
														</Descriptions.Item>
													)}
												</Descriptions>
											</Col>
											<Col className="max-height-100" span={8}>
												<div className="height-100" style={{ display: "flex", flexDirection: "column" }}>
												<span><CodeOutlined /> Terminal</span>
												<pre style={{
													flex: 'auto',
													overflow: 'auto',
													padding: '.5rem',
													margin: '0',
													border: '1px solid #303030'
												}}>
													{task.journal.map(j => j.message + "\n")}
												</pre>
												</div>
											</Col>
										</Row>
									</Col>
								</Row>
							) : (
								"No selected task."
							)}
						</Col>
					</Row>
				</Content>
			</>
		)
	}

render () {
    const { stateUserRole, stateUserAuthority } = this.props
    const { loading, is_create, user_role_type_list } = this.state
    const { getFieldDecorator } = this.props.form
    const itemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    const tailItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 5
        }
      }
    }

    return (
      <div className="layout-main">
        <div className="layout-main-title">
          <Breadcrumb>
            <Breadcrumb.Item href="#/manager/index">
              <Icon type="home" />
            </Breadcrumb.Item>
            <Breadcrumb.Item href="#/manager/index">
              <span>主页</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item href="#">
              <span>用户管理</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item>用户角色</Breadcrumb.Item>
          </Breadcrumb>
        </div>

        <div className="layout-nav-btn">
          <button
            className="btn btn-danger"
            icon="plus"
            type="primary"
            onClick={() => this.showModal(0)}
          >
            创建用户角色
          </button>
        </div>

        <div className="card user-role">
          <div className="card-body">
            <Modal
              footer={null}
              onCancel={() => {
                this.setState({
                  modal_visible_edit: false
                })
              }}
              title="填写角色"
              visible={this.state.modal_visible_edit}
            >
              <Form className="from-view" onSubmit={this.handleSubmit}>
                <Form.Item {...itemLayout} label="角色名">
                  {getFieldDecorator('user_role_name', {
                    rules: [
                      {
                        required: true,
                        message: '请输入角色名！',
                        whitespace: true
                      }
                    ]
                  })(<Input placeholder="角色名" />)}
                </Form.Item>

                <Form.Item {...itemLayout} hasFeedback label="角色类型">
                  {getFieldDecorator('user_role_type', {
                    rules: [
                      {
                        required: true,
                        message: '请选择角色类型！'
                      }
                    ]
                  })(
                    <Select placeholder="请选择角色类型！">
                      {user_role_type_list.map((item, key) => (
                        <Option value={key} key={key}>
                          {item}
                        </Option>
                      ))}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item {...itemLayout} label="角色名图标">
                  {getFieldDecorator('user_role_icon', {
                    rules: [
                      {
                        message: '请输入角色名图标！',
                        whitespace: true
                      }
                    ]
                  })(<Input placeholder="角色名图标" />)}
                </Form.Item>

                <Form.Item {...itemLayout} hasFeedback label="角色描述">
                  {getFieldDecorator('user_role_description', {
                    rules: [
                      {
                        required: true,
                        message: '请输入角色描述'
                      }
                    ]
                  })(<TextArea placeholder="请输入角色描述" type="text" />)}
                </Form.Item>

                <Form.Item {...itemLayout} label="是否显示">
                  {getFieldDecorator('is_show', { valuePropName: 'checked' })(
                    <Switch />
                  )}
                </Form.Item>

                <Form.Item {...itemLayout} label="是否有效">
                  {getFieldDecorator('enable', { valuePropName: 'checked' })(
                    <Switch />
                  )}
                </Form.Item>

                <Form.Item {...tailItemLayout}>
                  <Button
                    className="register-btn"
                    htmlType="submit"
                    type="primary"
                  >
                    {is_create ? '创建角色' : '更新'}
                  </Button>
                </Form.Item>
              </Form>
            </Modal>

            <Modal
              footer={null}
              onCancel={() => {
                this.setState({
                  visible_set_authority_modal: false
                })
              }}
              title="设置权限"
              visible={this.state.visible_set_authority_modal}
            >
              <Tree
                checkable
                checkedKeys={this.state.role_authority_list}
                onCheck={this.onCheck}
                defaultExpandAll={true}
                ref="tree"
                showLine
              >
                {this.renderTreeNodes(stateUserAuthority.user_authority_list)}
              </Tree>
              <div className="admin-role-foot">
                <Button
                  icon="save"
                  onClick={() => {
                    this.fetch_set_user_role_authority()
                  }}
                  type="primary"
                >
                  确定
                </Button>
                <Button
                  onClick={() => {
                    this.setState({
                      visible_set_authority_modal: false
                    })
                  }}
                >
                  取消
                </Button>
              </div>
            </Modal>

            <Table
              columns={this.state.columns}
              dataSource={stateUserRole.list}
              loading={loading}
              onChange={this.TablePageChange.bind(this)}
              pagination={this.state.pagination}
              rowKey="user_role_id"
            />
          </div>
        </div>
      </div>
    )
  }

render() {
        const columns = [
            {
                title:"角色ID",
                dataIndex:"id",
            },
            {
                title:"角色名称",
                dataIndex:"role_name",
                render(role_name){
                    if(role_name==1){
                        return "管理人员";
                    }else if(role_name==2){
                        return "财务人员";
                    }else if(role_name==3){
                        return "市场人员";
                    }
                }
            },
            {
                title:"创建时间",
                dataIndex:"create_time",
                render:Utils.formateDate
            },
            {
                title:"使用状态",
                dataIndex:"status",
                render(status){
                    if(status==0){
                        return "弃用";
                    }else if(status==1){
                        return "启用";
                    }
                }
            },
            {
                title:"授权时间",
                dataIndex:"authorize_time",
            },
            {
                title:"授权人",
                dataIndex:"authorize_user_name",
            }
        ]
        
        const dataSource = [
            {
              key: '1',
              id:'1',
              role_name: '1',
              create_time: '2020-10-2',
              status: '1',
              authorize_time:'2020-10-12',
              authorize_user_name:"小天",
              menus:[
                "/admin/home",
                "/admin/publish_articles",
                "/admin/manage_blog",
                "/admin/manage_articles",
                "/admin/manage_comment",
                "/admin/manage_column",
                "/admin/subscribe_colum",
                "/admin/move_blog",
                "/admin/reward_blog",
                "/admin/setting_blog",
                "/admin/card"
              ]
            },
            {
                key: '2',
                id:'2',
                role_name: '2',
                create_time: '2020-10-2',
                status: '1',
                authorize_time:'2020-10-12',
                authorize_user_name:"小天",
                menus:[
                    "/admin/statistics",
                    "/admin/manage_download",
                    "/admin/activities"
                ]
              },
              {
                key: '3',
                id:'3',
                role_name: '3',
                create_time: '2020-10-2',
                status: '0',
                authorize_time:'2020-10-12',
                authorize_user_name:"小天",
                menus:[
                    "/admin/manage_echarts",
                    "/admin/manage_echarts/bar",
                    "/admin/manage_echarts/pie",
                    "/admin/manage_echarts/line"
                ]
              },
          ];

    
        const rowSelection = {
            type:"radio",
            
            onSelect:(selectedRow,selected)=>{
                this.setState({
                    selectedRow:selectedRow
                })
            
            }
        }

        // 弹出框样式
        const formItemLayout = {
            labelCol:{span:5},
            wrapperCol:{span:19}
        }

        
        return (
            <div>
                <Card className="card-wrap">
                    <Button type="primary" onClick={()=>this.onhandleAddRole("创建角色")}>创建角色</Button>
                    <Button type="primary" onClick={()=>this.onhandleAddPerm("设置权限")}>设置权限</Button>
                    <Button type="primary" onClick={()=>this.onhandleAddUser("用户授权")}>用户授权</Button>
                </Card>
                <Card className="card-wrap">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={dataSource}
                       
                        // onRow={(record,index) => {
                        //     return {
                        //         onClick: () => {
                        //             this.onRowClick(record,index);
                        //         }, // 点击行
                        //         onDoubleClick: event => {},
                        //         onContextMenu: event => {},
                        //         onMouseEnter: event => {}, // 鼠标移入行
                        //         onMouseLeave: event => {},
                        //     };
                        //   }}
                        rowSelection={rowSelection}
                    >
                    </Table>
                </Card>
                <Modal
                    title={this.state.title}
                    visible={this.state.visible}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <Form onFinish={this.handleOk}>
                        <Form.Item   label="角色名称" name="role_name" {...formItemLayout} >
                            <Input  placeholder="请输入角色名称"/>
                        </Form.Item>

                        <Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
                            <Select placeholder="启用">
                                <Option value="1">启用</Option>
                                <Option value="2">弃用</Option>
                            </Select>
                        </Form.Item>
                        
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
                            <Button type="primary" onClick={this.handleCancel}>取消</Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal
                    title={this.state.title}
                    visible={this.state.visiblePer}
                    footer={null}
                    onCancel={this.handleCancelPer}
                    forceRender={true}
                >   
                    {/*ref绑定到form*/}
                    <Form ref={this.formRef} onFinish={this.handleOkPer}>
                        <Form.Item label="角色名称" name="role_name" {...formItemLayout} rules={[{required:true,message:"请输入用户名！"}]}>
                            <Input disabled placeholder="请输入角色名称"/>
                        </Form.Item>

                        <Form.Item label="状态" name="state" {...formItemLayout} rules={[{required:true,message:"请选择角色状态！"}]}>
                            <Select placeholder="启用">
                                <Option value="1">启用</Option>
                                <Option value="2">弃用</Option>
                            </Select>
                        </Form.Item>
                        
                            <Tree
                                checkable
                                defaultExpandAll
                                treeData={menuConfig}
                                checkedKeys={this.state.menuInfo}
                                onCheck={(checkedKeys)=>{
                                    this.onCheck(checkedKeys);
                                }}
                            >
                                {/* <TreeNode title="平台权限" key="platform_all">
                                    {this.renderTreeNodes(menuConfig)}
                                </TreeNode> */}
                            </Tree>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
                            <Button type="primary" onClick={this.handleCancelPer}>取消</Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal
                    title={this.state.title}
                    visible={this.state.visibleUser}
                    footer={null}
                    onCancel={this.handleCancelUser}
                    forceRender={true}
                >  
                    {/*ref绑定到form*/}
                    <Form ref={this.formRef_User} onFinish={this.handleOkUser}>
                        
                        <Form.Item label="角色名称" name="role_name" {...formItemLayout} >
                            <Input disabled/>
                        </Form.Item>

                        <Form.Item label="选择用户"{...formItemLayout} >
                            <Transfer
                                listStyle={{width:200,height:400}}
                                title={["待选用户","已选用户"]}
                                dataSource={this.state.mockData}
                                targetKeys={this.state.targetKeys}
                                showSearch
                                searchPlaceholder="输入用户名"
                                filterOption={this.filterOption}
                                onChange={this.handleChange}	
                                render={item => item.title}
                            />
                        </Form.Item>
                        
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{margin:'0 60px'}}>确认</Button>
                            <Button type="primary" onClick={this.handleCancelUser}>取消</Button>
                        </Form.Item>

                    </Form>
                </Modal>

            </div>
        );
    }