dva/router#Link JavaScript Examples

render() {
    const { logo = defaultLogo, collapsed, title, styles = {} } = this.props;
    const logoClassNames = [styles.logo];
    if (collapsed) {
      logoClassNames.push(styles.collapsed);
    }
    return (
      <div className={logoClassNames.join(' ')}>
        <Link to="/">
          {this.renderIcon(logo)}
          {!collapsed && (
            <h1 className={styles.title} title={title}>
              {title}
            </h1>
          )}
        </Link>
      </div>
    );
  }

function Normal501Exception(props) {
  const { normal501: { status, message } = {} } = props;
  return (
    <Exception
      type="500"
      style={{ minHeight: 500, height: '80%' }}
      linkElement={Link}
      title={status || 'UnKnow'}
      desc={message || 'UnKnow Message'}
    />
  );
}

render() {
    const { title, collapsed, onCollapse } = this.props;
    const { logo, openKeys } = this.state;
    // Don't show popup menu when it is been collapsed
    const menuProps = collapsed
      ? {}
      : {
          openKeys,
          onOpenChange: this.handleOpenChange,
        };
    // if pathname can't match, use the nearest parent's key
    let selectedKeys = this.getSelectedMenuKeys();
    if (!selectedKeys.length) {
      selectedKeys = [openKeys[openKeys.length - 1]];
    }
    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="lg"
        onCollapse={onCollapse}
        width={256}
        className={styles.sider}
      >
        <div className={styles.logo} key="logo">
          <Link to="/">
            <img src={logo} alt="" />
            {!collapsed && <h1 title={title}>{title}</h1>}
          </Link>
        </div>
        <Menu
          key="menu"
          theme="dark"
          mode="inline"
          {...menuProps}
          selectedKeys={selectedKeys}
          style={{ padding: '16px 0', width: '100%', flex: 'auto', overflowY: 'auto' }}
        >
          {this.getNavMenuItems(this.menus)}
        </Menu>
      </Sider>
    );
  }

DefaultNotFound = () => (
  <Exception type="404" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
)

render() {
    const {
      getClassName: getHeaderClassName,
      logo,
      title,
      realName,
      roleName,
      dataHierarchyFlag,
      collapsed,
      dispatch,
      roleList = [],
      extraRight = [],
      hierarchicalSelectList = [],
      isModal,
      isSelect,
    } = this.props;
    const { userAvatar, dropdownVisible1 = false } = this.state;
    const {
      VERSION_IS_OP,
      // WEBSOCKET_URL,
      TRACE_LOG_ENABLE,
      MULTIPLE_SKIN_ENABLE,
      ENV_SIGN,
      MULTIPLE_LANGUAGE_ENABLE,
    } = this.config;
    // let hasWebsocketUrl = false;
    // if (
    //   WEBSOCKET_URL !== ['BUILD_', 'WEBSOCKET_', 'HOST'].join('') &&
    //   WEBSOCKET_URL !== 'undefined'
    // ) {
    //   hasWebsocketUrl = WEBSOCKET_URL;
    // } else {
    //   hasWebsocketUrl = false;
    // }

    let _extraRight;
    if (extraRight) {
      if (Array.isArray(extraRight)) {
        _extraRight = extraRight;
      } else {
        _extraRight = [extraRight];
      }
    }

    let isTraceLog = false;
    try {
      isTraceLog = TRACE_LOG_ENABLE ? JSON.parse(TRACE_LOG_ENABLE) : false;
    } catch (e) {
      isTraceLog = false;
    }

    let isUed = false;
    try {
      isUed = MULTIPLE_SKIN_ENABLE ? JSON.parse(MULTIPLE_SKIN_ENABLE) : false;
    } catch (e) {
      isUed = false;
    }

    let hasMultiLanguage = true;
    try {
      hasMultiLanguage = MULTIPLE_LANGUAGE_ENABLE ? JSON.parse(MULTIPLE_LANGUAGE_ENABLE) : true;
    } catch (e) {
      hasMultiLanguage = true;
    }

    return (
      <div className={getHeaderClassName('container')}>
        <div className={getHeaderClassName('left')}>
          {!isEqual(ENV_SIGN, 'undefined') && (
            <div className={getHeaderClassName('sign')}>
              <img
                src={trialInfo}
                alt="trial-info"
                className={getHeaderClassName('trail-img-icon')}
              />
              <span className={getHeaderClassName('sign-title')}>{ENV_SIGN}</span>
            </div>
          )}
          <div
            className={
              !isEqual(ENV_SIGN, 'undefined')
                ? getHeaderClassName('logo-sign')
                : getHeaderClassName('logo')
            }
          >
            <Link to="/">
              {this.renderIcon(logo)}
              {!collapsed && <h1 className={getHeaderClassName('title')}>{title}</h1>}
            </Link>
          </div>
        </div>
        <div className={getHeaderClassName('right')}>
          {_extraRight.map((eleOrComponent) => (
            <div className={classNames(getHeaderClassName('right', 'item'))}>
              {React.isValidElement(eleOrComponent)
                ? eleOrComponent
                : React.createElement(eleOrComponent)}
            </div>
          ))}
          {_extraRight.length !== 0 && (
            <span
              className={classNames(
                getHeaderClassName('right', 'item'),
                getHeaderClassName('right', 'item', 'divider')
              )}
            />
          )}
          {hasMultiLanguage && (
            <DefaultLanguageSelect
              className={classNames(
                getHeaderClassName('right', 'item'),
                getHeaderClassName('right', 'item', 'select'),
                getHeaderClassName('right', 'item', 'language')
              )}
            />
          )}
          {!VERSION_IS_OP && (
            <NormalTenantSelect
              className={classNames(
                getHeaderClassName('right', 'item'),
                getHeaderClassName('right', 'item', 'select')
              )}
            />
          )}
          {!!dataHierarchyFlag && !!isModal && isTenantRoleLevel() && (
            <NormalDataHierarchies
              className={classNames(
                getHeaderClassName('right', 'item'),
                getHeaderClassName('right', 'item', 'data')
              )}
            />
          )}
          {!!dataHierarchyFlag &&
            !!isSelect &&
            isTenantRoleLevel() &&
            hierarchicalSelectList.map((item) => {
              return (
                <NormalDataHierarchiesSelect
                  dataHierarchyCode={item.dataHierarchyCode}
                  className={classNames(
                    getHeaderClassName('right', 'item'),
                    getHeaderClassName('right', 'item', 'select')
                  )}
                />
              );
            })}
          {isTraceLog && <DefaultTraceLog dispatch={dispatch} />}
          {isUed && <ThemeButton />}
          <DefaultNoticeIcon
            className={classNames(
              getHeaderClassName('right', 'item'),
              getHeaderClassName('right', 'item', 'notice')
            )}
          />
          <NormalWrapDropdown
            onItemClick={this.handleItemClick1}
            menuClassName={getHeaderClassName('right', 'item', 'avatar', 'dropdown')}
            host={
              <span
                className={classNames(
                  getHeaderClassName('right', 'item'),
                  getHeaderClassName('right', 'item', 'avatar'),
                  getHeaderClassName('right', 'item', 'last')
                )}
              >
                <Avatar
                  className={getHeaderClassName('right', 'item', 'avatar', 'img')}
                  size="small"
                  src={userAvatar}
                  title={realName || roleName || ''}
                />
                <span className={getHeaderClassName('right', 'item', 'avatar', 'name')}>
                  {realName}
                  <Icon
                    type="down"
                    className={getHeaderClassName('right', 'item', 'avatar', 'name', 'realName')}
                  />
                </span>
              </span>
            }
            items={[
              roleList.length !== 0 && [
                {
                  key: 'role',
                  type: 'subItem',
                  ele: <DefaultRoleSelect />,
                },
              ],
              [
                {
                  key: 'user-info',
                  ele: (
                    <a
                      style={{
                        color: '#666',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        wordBreak: 'break-all',
                        whiteSpace: 'nowrap',
                      }}
                      href="#/hiam/user/info"
                      onClick={(e) => {
                        e.preventDefault();
                        openTab({
                          title: 'hzero.common.title.userInfo',
                          key: '/hiam/user',
                          path: '/hiam/user/info',
                          icon: 'user',
                          closable: true,
                        });
                      }}
                    >
                      {intl.get('hzero.common.basicLayout.userInfo').d('个人中心')}
                    </a>
                  ),
                },
              ],
              {
                key: 'logout',
                ele: (
                  <div className={getHeaderClassName('right', 'item', 'user', 'logout')}>
                    <span>{intl.get('hzero.common.message.loginOut').d('退出登录')}</span>
                    <Icon className="logout-icon" />
                  </div>
                ),
              },
            ].filter(Boolean)}
            visible={dropdownVisible1}
            onVisibleChange={this.handleDropdownVisibleChange1}
          />
        </div>
      </div>
    );
  }

render() {
    const {
      fetchConfigListLoading = false,
      getConfigDetailLoading = false,
      createConfigDetailLoad = false,
      editConfigListLoading = false,
      match: { path },
      location: { search },
      isSiteFlag,
      ssoConfig: { pagination = {}, ssoConfigList = [], typeList = [], ssoConfigDetail = {} },
    } = this.props;
    const { modalVisible, editflag } = this.state;
    const { access_token: accessToken } = queryString.parse(search.substring(1));
    const columns = [
      isSiteFlag && {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.tenantName').d('租户名称'),
        width: 180,
        dataIndex: 'tenantName',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.companyName').d('公司名称'),
        dataIndex: 'companyName',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.domainUrl').d('单点登录域名'),
        width: 200,
        dataIndex: 'domainUrl',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoTypeCode').d('单点登录类型'),
        dataIndex: 'ssoTypeMeaning',
        width: 150,
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoServerUrl').d('单点登录服务器地址'),
        width: 200,
        dataIndex: 'ssoServerUrl',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoLoginUrl').d('单点登录地址'),
        width: 200,
        dataIndex: 'ssoLoginUrl',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoLogoutUrl').d('单点登出地址'),
        dataIndex: 'ssoLogoutUrl',
        width: 200,
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.clientHostUrl').d('客户端地址'),
        width: 200,
        dataIndex: 'clientHostUrl',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoClientId').d('oAuth认证ClientId'),
        width: 200,
        dataIndex: 'ssoClientId',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoClientPwd').d('oAuth认证Client密码'),
        width: 200,
        dataIndex: 'ssoClientPwd',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.ssoUserInfo').d('oAuth认证用户信息'),
        width: 200,
        dataIndex: 'ssoUserInfo',
      },
      {
        title: intl.get('hiam.ssoConfig.model.ssoConfig.samlMetaUrl').d('SAML元数据地址'),
        width: 200,
        dataIndex: 'samlMetaUrl',
      },
      {
        title: intl.get('hzero.common.button.action').d('操作'),
        width: 200,
        fixed: 'right',
        render: (text, record) => {
          const operators = [
            {
              key: 'edit',
              ele: (
                <ButtonPermission
                  type="text"
                  permissionList={[
                    {
                      code: `${path}.button.edit`,
                      type: 'button',
                      meaning: '域名配置-编辑',
                    },
                  ]}
                  onClick={() => {
                    this.showModal(record, true);
                  }}
                >
                  {intl.get('hzero.common.button.edit').d('编辑')}
                </ButtonPermission>
              ),
              len: 2,
              title: intl.get('hzero.common.button.edit').d('编辑'),
            },
            {
              key: 'detail',
              ele: (
                <Link
                  to={
                    path.indexOf('/private') === 0
                      ? `/private/hiam/domain-config/template/${record.domainId}/${record.tenantId}?access_token=${accessToken}`
                      : `/hiam/domain-config/template/${record.domainId}/${record.tenantId}`
                  }
                >
                  {intl.get('hiam.ssoConfig.view.message.title.detail').d('分配模板')}
                </Link>
              ),
              len: 4,
              title: intl.get('hiam.ssoConfig.view.message.title.detail').d('分配模板'),
            },
            {
              key: 'delete',
              ele: (
                <Popconfirm
                  title={intl.get('hzero.common.message.confirm.delete').d('是否删除此条记录？')}
                  onConfirm={() => this.handleDelete(record)}
                >
                  <ButtonPermission
                    type="text"
                    permissionList={[
                      {
                        code: `${path}.button.delete`,
                        type: 'button',
                        meaning: '域名配置-删除',
                      },
                    ]}
                  >
                    {intl.get('hzero.common.button.delete').d('删除')}
                  </ButtonPermission>
                </Popconfirm>
              ),
              len: 2,
              title: intl.get('hzero.common.button.delete').d('删除'),
            },
          ];
          return operatorRender(operators);
        },
      },
    ].filter(Boolean);
    return (
      <>
        <Header title={intl.get('hiam.ssoConfig.view.message.title.list').d('域名配置')}>
          <ButtonPermission
            permissionList={[
              {
                code: `${path}.button.create`,
                type: 'button',
                meaning: '域名配置-新建',
              },
            ]}
            icon="plus"
            type="primary"
            onClick={() => this.showModal({}, false)}
          >
            {intl.get('hzero.common.button.create').d('新建')}
          </ButtonPermission>
        </Header>
        <Content>
          <FilterForm
            onSearch={this.handleSearch}
            isSiteFlag={isSiteFlag}
            ref={this.filterFormRef}
          />
          <Table
            bordered
            rowKey="domainId"
            loading={fetchConfigListLoading}
            dataSource={ssoConfigList}
            columns={columns}
            scroll={{ x: tableScrollWidth(columns) }}
            pagination={pagination}
            onChange={this.handlePagination}
          />
          <Drawer
            title={
              editflag
                ? intl.get('hiam.ssoConfig.view.message.modal.edit').d('编辑单点登录页面')
                : intl.get('hiam.ssoConfig.view.message.modal.create').d('新建单点登录页面')
            }
            editflag={editflag}
            modalVisible={modalVisible}
            onOk={this.handleConfirm}
            onCancel={this.hideModal}
            initData={ssoConfigDetail}
            typeList={typeList}
            initLoading={getConfigDetailLoading}
            loading={createConfigDetailLoad || editConfigListLoading}
            isSiteFlag={isSiteFlag}
            tenantId={getCurrentOrganizationId()}
          />
        </Content>
      </>
    );
  }

render() {
    const {
      template: { templateTargetList = [], templateTargetPagination = {}, code = {} },
      queryLines = false,
      detailId,
      templateType,
    } = this.props;
    const columns = [
      {
        title: intl.get('himp.template.view.title.pageNumber').d('页序号'),
        width: 200,
        dataIndex: 'sheetIndexMeaning',
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('sheetIndex', {
                  initialValue: `${record.sheetIndex}`,
                  rules: [
                    {
                      required: true,
                      message: intl.get('hzero.common.validation.notNull', {
                        name: intl.get('himp.template.view.title.pageNumber').d('页序号'),
                      }),
                    },
                  ],
                })(
                  <Select style={{ width: 150 }}>
                    {(code['HIMP.IMPORT_SHEET'] || []).map((n) => (
                      <Select.Option key={n.value} value={n.value}>
                        {n.meaning}
                      </Select.Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            );
          } else {
            return val;
          }
        },
      },
      {
        title: intl.get('himp.template.view.title.pageName').d('页名称'),
        width: 200,
        dataIndex: 'sheetName',
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('sheetName', {
                  initialValue: val,
                  rules: [
                    {
                      required: true,
                      message: intl.get('hzero.common.validation.notNull', {
                        name: intl.get('himp.template.view.title.pageName').d('页名称'),
                      }),
                    },
                  ],
                })(<Input />)}
              </Form.Item>
            );
          } else {
            return val;
          }
        },
      },
      {
        title: intl.get('himp.template.view.title.dataSource').d('数据源'),
        dataIndex: 'datasourceDesc',
        width: 200,
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('datasourceCode', {
                  initialValue: record.datasourceCode,
                  rules: [
                    {
                      required: templateType === 'S',
                      message: intl.get('hzero.common.validation.notNull', {
                        name: intl.get('himp.template.view.title.dataSource').d('数据源'),
                      }),
                    },
                  ],
                })(
                  <Lov
                    allowClear={false}
                    textValue={record.datasourceDesc}
                    code={isTenantRoleLevel() ? 'HPFM.DATASOURCE' : 'HPFM.SITE.DATASOURCE'}
                    queryParams={{ enabledFlag: 1, dsPurposeCode: 'DI' }}
                  />
                )}
              </Form.Item>
            );
          } else {
            return val;
          }
        },
      },
      {
        title: intl.get('himp.template.view.title.startLine').d('导入起始行'),
        width: 200,
        dataIndex: 'startLine',
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('startLine', {
                  initialValue: val === undefined ? 2 : val,
                  rules: [
                    {
                      required: true,
                      message: intl.get('hzero.common.validation.notNull', {
                        name: intl.get('himp.template.view.title.startLine').d('导入起始行'),
                      }),
                    },
                  ],
                })(<InputNumber min={2} step={1} />)}
              </Form.Item>
            );
          } else {
            return val;
          }
        },
      },
      {
        title: intl.get('himp.template.view.title.officialDataTableName').d('正式数据表名'),
        dataIndex: 'tableName',
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('tableName', {
                  initialValue: val,
                  rules: [
                    {
                      required: templateType === 'S',
                      message: intl.get('hzero.common.validation.notNull', {
                        name: intl
                          .get('himp.template.view.title.officialDataTableName')
                          .d('正式数据表名'),
                      }),
                    },
                    {
                      pattern: CODE,
                      message: intl
                        .get('hzero.common.validation.code')
                        .d('大小写及数字，必须以字母、数字开头，可包含“-”、“_”、“.”、“/”'),
                    },
                  ],
                })(<Input trim inputChinese={false} />)}
              </Form.Item>
            );
          } else {
            return val;
          }
        },
      },
      {
        title: intl.get('himp.template.view.title.validationRule').d('校验规则'),
        dataIndex: 'scriptDescription',
        width: 200,
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('ruleScriptCode', {
                  initialValue: record.ruleScriptCode,
                })(
                  <Lov
                    allowClear={false}
                    textValue={record.scriptDescription}
                    code="HIMP.IMPORT_SCRIPT"
                    queryParams={{ enabledFlag: 1 }}
                  />
                )}
              </Form.Item>
            );
          } else {
            return val;
          }
        },
      },
      {
        title: intl.get(`hzero.common.status.enable`).d('启用'),
        dataIndex: 'enabledFlag',
        width: 100,
        render: (val, record) => {
          if (record._status === 'update' || record._status === 'create') {
            const { getFieldDecorator } = record.$form;
            return (
              <Form.Item>
                {getFieldDecorator('enabledFlag', {
                  initialValue: record.enabledFlag,
                })(<Checkbox />)}
              </Form.Item>
            );
          } else {
            return enableRender(val);
          }
        },
      },
      {
        title: intl.get('hzero.common.button.action').d('操作'),
        width: 160,
        fixed: 'right',
        render: (val, record) => {
          const operators = [];
          if (record._status === 'update') {
            operators.push({
              key: 'cancel',
              ele: (
                <a onClick={() => this.handleSheetEdit(record, false)}>
                  {intl.get('hzero.common.button.cancel').d('取消')}
                </a>
              ),
              len: 2,
              title: intl.get('hzero.common.button.cancel').d('取消'),
            });
          } else if (record._status === 'create') {
            operators.push({
              key: 'delete',
              ele: (
                <Popconfirm
                  title={intl.get(`himp.template.view.message.title.confirmDelete`).d('确定删除？')}
                  onConfirm={() => this.handleDeleteSheet(record)}
                  style={{ textAlign: 'center' }}
                >
                  <a>{intl.get('hzero.common.button.delete').d('删除')}</a>
                </Popconfirm>
              ),
              len: 2,
              title: intl.get('hzero.common.button.delete').d('删除'),
            });
          } else {
            if (record.id !== undefined) {
              operators.push({
                key: 'delete',
                ele: (
                  <Link to={`/himp/template/column/${detailId}/${record.id}/${templateType}`}>
                    {intl.get('himp.template.model.template.editTemplateCol').d('维护模板列')}
                  </Link>
                ),
                len: 5,
                title: intl.get('himp.template.model.template.editTemplateCol').d('维护模板列'),
              });
            }
            operators.push({
              key: 'edit',
              ele: (
                <a onClick={() => this.handleSheetEdit(record, true)}>
                  {intl.get('hzero.common.button.edit').d('编辑')}
                </a>
              ),
              len: 2,
              title: intl.get('hzero.common.button.edit').d('编辑'),
            });
          }
          return operatorRender(operators, record);
        },
      },
    ];
    return (
      <>
        <div className="table-list-operator">
          <Button onClick={this.handleCreateSheet} type="primary">
            {intl.get('hzero.common.button.create').d('新建')}
          </Button>
        </div>
        <EditTable
          bordered
          rowKey="id"
          loading={queryLines}
          columns={columns}
          scroll={{ x: tableScrollWidth(columns) }}
          dataSource={templateTargetList}
          pagination={templateTargetPagination}
          // FIXME: 这边没有 loadLines 方法, 也没有继承
          onChange={(page) => this.loadLines(page)}
        />
      </>
    );
  }

render() {
    const {
      sysLoading = false,
      noticeLoading = false,
      messageCard: { systemMessageList = [], announcementList = [], notificationList = [] } = {},
    } = this.props;
    const { tabBar } = this.state;
    const systemProps = {
      systemMessageList,
      handleUserMessage: this.handleUserMessage,
      handleRead: this.handleRead,
      handleDetails: this.handleDetails,
    };
    const announcementProps = {
      announcementList,
      handleAnnouncementList: this.handleAnnouncementList,
      handleDetails: this.handleDetails,
    };
    const notificationProps = {
      notificationList,
      handleUserMessage: this.handleUserMessage,
      handleRead: this.handleRead,
      handleDetails: this.handleDetails,
    };
    const operations = (
      <div className={styles['tab-right']}>
        {tabBar === 'message' && (
          <div className={styles['tab-right-content']}>
            <Link to="/hmsg/user-message/list">
              {intl.get('hmsg.cards.message.messageCenter').d('消息中心')}
              <Icon type="double-right" className={styles['tab-icon-padding']} />
            </Link>
            <a onClick={() => this.handleUserMessage('MSG')} className={styles['tab-a']}>
              {intl.get('hzero.common.button.reload').d('重新加载')}
              <Icon type="reload" className={styles['tab-icon-padding']} />
            </a>
          </div>
        )}
        {tabBar === 'notification' && (
          <div className={styles['tab-right-content']}>
            <Link to="/hmsg/user-message/list">
              {intl.get('hmsg.cards.message.messageCenter').d('消息中心')}
              <Icon type="double-right" className={styles['tab-icon-padding']} />
            </Link>
            <a onClick={() => this.handleUserMessage('NOTICE')} className={styles['tab-a']}>
              {intl.get('hzero.common.button.reload').d('重新加载')}
              <Icon type="reload" className={styles['tab-icon-padding']} />
            </a>
          </div>
        )}
        {tabBar === 'announcement' && (
          <div className={styles['tab-right-content']}>
            <Link to="/hmsg/user-message/list">
              {intl.get('hmsg.cards.message.messageCenter').d('消息中心')}
              <Icon type="double-right" className={styles['tab-icon-padding']} />
            </Link>
            <a onClick={() => this.handleAnnouncementList()} className={styles['tab-a']}>
              {intl.get('hzero.common.button.reload').d('重新加载')}
              <Icon type="reload" className={styles['tab-icon-padding']} />
            </a>
          </div>
        )}
      </div>
    );
    return (
      <Tabs
        tabBarExtraContent={operations}
        size="large"
        tabBarGutter={0}
        onChange={this.handleCallback}
        className={styles.height}
        animated={false}
        defaultActiveKey="message"
      >
        <Tabs.TabPane
          tab={intl.get('hmsg.cards.message.stationMessages').d('站内消息')}
          key="message"
          className={styles.message}
        >
          <div className={styles['message-overflow']}>
            <Spin spinning={sysLoading}>
              <System {...systemProps} />
            </Spin>
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane
          tab={intl.get('hmsg.cards.message.systemNotification').d('系统通知')}
          key="notification"
          className={styles.notification}
        >
          <div className={styles['notification-overflow']}>
            <Spin spinning={sysLoading}>
              <Notification {...notificationProps} />
            </Spin>
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane
          tab={intl.get('hmsg.cards.message.platformAnnounce').d('平台公告')}
          key="announcement"
          className={styles.notice}
        >
          <div className={styles['notice-overflow']}>
            <Spin spinning={noticeLoading}>
              <Announcement {...announcementProps} />
            </Spin>
          </div>
        </Tabs.TabPane>
      </Tabs>
    );
  }

render() {
    const {
      fetchNoticeLoading,
      publicLoading,
      match: { path },
      hmsgNotice: {
        noticeList = [],
        pagination = {},
        systemNoticePublishModalVisible = false,
        systemNoticePublishRecord,
        systemNoticeHistoryDataSource,
        systemNoticeHistoryPagination,
        systemNoticeHistorySelectedRows,
        systemNoticeHistorySelectedRowKeys,
        systemNoticeReceiveDataSource,
        systemNoticeReceivePagination,
        receiverRecordType = [],
      },
      querySystemHistoryLoading,
      queryReceiverLoading,
      createReceiverLoading,
      publishSystemNoticeLoading,
      removeDraftReceiveLoading,
      isTenantRole,
      organizationId,
    } = this.props;
    const { actionNoticeId } = this.state;
    const columns = [
      {
        title: intl.get('hmsg.notice.model.notice.receiverType').d('发布类别'),
        width: 100,
        dataIndex: 'receiverTypeMeaning',
      },
      {
        title: intl.get('hmsg.notice.model.notice.title').d('公告标题'),
        dataIndex: 'title',
      },
      {
        title: intl.get('hmsg.notice.model.notice.publishedByUser').d('发布人'),
        width: 150,
        dataIndex: 'publishedByUser',
      },
      {
        title: intl.get('hmsg.notice.model.notice.statusCode').d('公告状态'),
        width: 100,
        dataIndex: 'statusMeaning',
      },
      {
        title: intl.get('hmsg.notice.model.notice.publishedDate').d('发布时间'),
        width: 200,
        dataIndex: 'publishedDate',
        render: dateTimeRender,
      },
      {
        title: intl.get('hzero.common.button.action').d('操作'),
        width: 150,
        fixed: 'right',
        render: (text, record) => {
          const operators = [];
          operators.push({
            key: 'edit',
            ele: (
              <Link to={`/hmsg/notices/detail/${record.noticeId}`}>
                {intl.get('hzero.common.button.edit').d('编辑')}
              </Link>
            ),
            len: 2,
            title: intl.get('hzero.common.button.edit').d('编辑'),
          });
          if (record.statusCode === 'DELETED') {
            operators.push({
              key: 'revoke',
              ele: (
                <ButtonPermission
                  type="text"
                  permissionList={[
                    {
                      code: `${path}.button.revoke2`,
                      type: 'button',
                      meaning: '公告管理-撤销',
                    },
                  ]}
                  onClick={() => this.handleRevokeNotice(record)}
                >
                  {intl.get('hmsg.notice.button.revoke').d('撤销')}
                </ButtonPermission>
              ),
              len: 2,
              title: intl.get('hmsg.notice.button.revoke').d('撤销'),
            });
          } else if (publicLoading && record.noticeId === actionNoticeId) {
            operators.push({
              key: 'loading',
              ele: <Icon type="loading" style={{ marginLeft: 20 }} />,
              len: 2,
            });
          } else {
            operators.push({
              key: 'release',
              ele: (
                <ButtonPermission
                  type="text"
                  permissionList={[
                    {
                      code: `${path}.button.release2`,
                      type: 'button',
                      meaning: '公告管理-发布',
                    },
                  ]}
                  onClick={() => this.handlePublicNotice(record)}
                >
                  {intl.get('hzero.common.button.release').d('发布')}
                </ButtonPermission>
              ),
              len: 2,
              title: intl.get('hzero.common.button.release').d('发布'),
            });
          }
          operators.push({
            key: 'delete',
            ele: (
              <Popconfirm
                title={intl.get('hzero.common.message.confirm.delete').d('是否删除此条记录？')}
                onConfirm={() => {
                  this.handleDeleteNotice(record);
                }}
              >
                <ButtonPermission
                  type="text"
                  permissionList={[
                    {
                      code: `${path}.button.delete`,
                      type: 'button',
                      meaning: '公告管理-删除',
                    },
                  ]}
                >
                  {intl.get('hzero.common.button.delete').d('删除')}
                </ButtonPermission>
              </Popconfirm>
            ),
            len: 2,
            title: intl.get('hzero.common.button.delete').d('删除'),
          });
          return operatorRender(operators);
        },
      },
    ];
    return (
      <>
        <Header title={intl.get('hmsg.notice.view.message.title.list').d('公告管理')}>
          <ButtonPermission
            permissionList={[
              {
                code: `${path}.button.create`,
                type: 'button',
                meaning: '公告管理-新建',
              },
            ]}
            icon="plus"
            type="primary"
            onClick={this.handleCreate}
          >
            {intl.get('hzero.common.button.create').d('新建')}
          </ButtonPermission>
        </Header>
        <Content>
          <div className="table-list-search">{this.renderFilterForm()}</div>
          <Table
            bordered
            rowKey="noticeId"
            loading={fetchNoticeLoading || publicLoading}
            dataSource={noticeList}
            columns={columns}
            scroll={{ x: tableScrollWidth(columns) }}
            pagination={pagination}
            onChange={this.handlePagination}
          />
          {systemNoticePublishModalVisible && (
            <SystemNoticePublishDrawer
              visible={systemNoticePublishModalVisible}
              record={systemNoticePublishRecord}
              receiverRecordType={receiverRecordType}
              onOk={this.handleSystemNoticeModalOk}
              onCancel={this.handleSystemNoticeModalCancel}
              querySystemHistory={this.querySystemHistory}
              queryReceiver={this.queryReceiver}
              createReceiver={this.createReceiver}
              publishSystemNotice={this.publishSystemNotice}
              removeDraftReceive={this.removeDraftReceive}
              querySystemHistoryLoading={querySystemHistoryLoading}
              queryReceiverLoading={queryReceiverLoading}
              createReceiverLoading={createReceiverLoading}
              publishSystemNoticeLoading={publishSystemNoticeLoading}
              removeDraftReceiveLoading={removeDraftReceiveLoading}
              systemNoticeHistoryDataSource={systemNoticeHistoryDataSource}
              systemNoticeHistoryPagination={systemNoticeHistoryPagination}
              systemNoticeHistorySelectedRows={systemNoticeHistorySelectedRows}
              systemNoticeHistorySelectedRowKeys={systemNoticeHistorySelectedRowKeys}
              systemNoticeReceiveDataSource={systemNoticeReceiveDataSource}
              systemNoticeReceivePagination={systemNoticeReceivePagination}
              organizationId={organizationId}
              isTenantRole={isTenantRole}
            />
          )}
        </Content>
      </>
    );
  }

render() {
    const {
      saving,
      fetchDataLoading,
      createLoading,
      match,
      location: { search },
      country: { countryList = [], modalVisible, pagination = {} },
    } = this.props;
    const { access_token: accessToken } = queryString.parse(search.substring(1));
    const { countryFormData = {} } = this.state;
    const columns = [
      {
        title: intl.get('hpfm.country.model.country.countryCode').d('国家代码'),
        width: 150,
        dataIndex: 'countryCode',
      },
      {
        title: intl.get('hpfm.country.model.country.countryName').d('国家名称'),
        dataIndex: 'countryName',
      },
      {
        title: intl.get('hpfm.country.model.country.quickIndex').d('快速索引'),
        dataIndex: 'quickIndex',
        width: 150,
      },
      {
        title: intl.get('hpfm.country.model.country.abbreviation').d('简称'),
        dataIndex: 'abbreviation',
        width: 150,
      },
      {
        title: intl.get('hzero.common.status').d('状态'),
        width: 100,
        dataIndex: 'enabledFlag',
        render: enableRender,
      },
      {
        title: intl.get('hzero.common.button.action').d('操作'),
        width: 130,
        render: (text, record) => {
          const operators = [
            {
              key: 'area',
              ele: (
                <Link
                  to={
                    match.path.indexOf('/private') === 0
                      ? `/private/hpfm/mdm/country/region/${record.countryId}/${record.countryCode}/${record.countryName}?access_token=${accessToken}`
                      : `/hpfm/mdm/country/region/${record.countryId}/${record.countryCode}/${record.countryName}`
                  }
                >
                  {intl.get('hpfm.country.model.country.area').d('地区定义')}
                </Link>
              ),
              len: 4,
              title: intl.get('hpfm.country.model.country.area').d('地区定义'),
            },
            {
              key: 'edit',
              ele: (
                <ButtonPermission
                  type="text"
                  permissionList={[
                    {
                      code: `${match.path}.button.edit`,
                      type: 'button',
                      meaning: '国家定义-编辑',
                    },
                  ]}
                  onClick={() => this.handleUpdateCountry(record)}
                >
                  {intl.get('hzero.common.button.edit').d('编辑')}
                </ButtonPermission>
              ),
              len: 2,
              title: intl.get('hzero.common.button.edit').d('编辑'),
            },
          ];
          return operatorRender(operators, record);
        },
      },
    ];
    return (
      <>
        <Header title={intl.get('hpfm.country.view.message.title').d('国家定义')}>
          <ButtonPermission
            icon="plus"
            type="primary"
            permissionList={[
              {
                code: `${match.path}.button.create`,
                type: 'button',
                meaning: '国家定义-新建',
              },
            ]}
            onClick={this.showModal}
          >
            {intl.get('hzero.common.button.create').d('新建')}
          </ButtonPermission>
        </Header>
        <Content>
          <div className="more-fields-search-form">
            <FilterForm
              onSearch={this.handleSearch}
              onReset={this.handleResetSearch}
              onRef={this.handleBindRef}
            />
          </div>
          <Table
            bordered
            rowKey="countryId"
            loading={fetchDataLoading}
            dataSource={countryList}
            columns={columns}
            pagination={pagination}
            onChange={this.handlePagination}
          />
          <CountryForm
            title={
              countryFormData.countryId !== undefined
                ? intl.get('hpfm.country.view.message.title.modal.edit').d('编辑国家')
                : intl.get('hpfm.country.view.message.title.modal.create').d('新建国家')
            }
            loading={countryFormData.countryId !== undefined ? saving : createLoading}
            modalVisible={modalVisible}
            initData={countryFormData}
            onCancel={this.hideModal}
            onOk={this.handleSaveCountry}
          />
        </Content>
      </>
    );
  }

render() {
    const { routerData, match, location } = this.props;
    const { commonSourceCode, commonExternalSystemCode } = this.state;
    const { path } = match;
    const hpfmLeftRouter = {
      '/hpfm/org-info/company': intl.get('hpfm.orgInfo.view.message.route.company').d('公司'),
      '/hpfm/org-info/operation-unit': intl
        .get('hpfm.orgInfo.view.message.route.operationUnit')
        .d('业务实体'),
      '/hpfm/org-info/inventory-org': intl
        .get('hpfm.orgInfo.view.message.route.inventoryOrg')
        .d('库存组织'),
      '/hpfm/org-info/store-room': intl.get('hpfm.orgInfo.view.message.route.storeRoom').d('库房'),
      '/hpfm/org-info/library-position': intl
        .get('hpfm.orgInfo.view.message.route.libraryPosition')
        .d('库位'),
    };
    const spfmLeftRouter = {
      '/spfm/org-info/company': intl.get('hpfm.orgInfo.view.message.route.company').d('公司'),
      '/spfm/org-info/operation-unit': intl
        .get('hpfm.orgInfo.view.message.route.operationUnit')
        .d('业务实体'),
      '/spfm/org-info/inventory-org': intl
        .get('hpfm.orgInfo.view.message.route.inventoryOrg')
        .d('库存组织'),
      '/spfm/org-info/store-room': intl.get('hpfm.orgInfo.view.message.route.storeRoom').d('库房'),
      '/spfm/org-info/library-position': intl
        .get('hpfm.orgInfo.view.message.route.libraryPosition')
        .d('库位'),
    };
    return (
      <React.Fragment>
        <Content className={style['org-info']} noCard>
          <div className={style['org-info-left']}>
            <div
              className={classNames({
                [style['orgchart-item']]: true,
                [style['orgchart-light']]:
                  location.pathname.includes('group') || location.pathname === '/hpfm/org-info',
              })}
            >
              <Link
                to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/group`}
                className={style.link}
              >
                {intl.get('hpfm.orgInfo.view.message.route.group').d('集团')}
              </Link>
            </div>
            <Divider dashed type="vertical" className={style.divider} />
            <div className={style['divider-horizontal']} />
            <div className={style.orgchart}>
              <div style={{ width: '100px' }}>
                {Object.keys(path.includes('spfm') ? spfmLeftRouter : hpfmLeftRouter).map(
                  (item, index) => {
                    return (
                      <React.Fragment key={item}>
                        {index !== 0 && (
                          <Divider dashed type="vertical" className={style.divider} />
                        )}
                        <div
                          className={classNames({
                            [style['orgchart-item']]: true,
                            [style['orgchart-light']]: location.pathname.includes(item),
                          })}
                        >
                          <Link to={item} className={style.link}>
                            {path.includes('spfm') ? spfmLeftRouter[item] : hpfmLeftRouter[item]}
                          </Link>
                        </div>
                      </React.Fragment>
                    );
                  }
                )}
              </div>
              <div style={{ width: 100 }}>
                <div
                  className={classNames({
                    [style['orgchart-item']]: true,
                    [style['orgchart-light']]: location.pathname.includes('purchase-org'),
                  })}
                >
                  <Link
                    to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/purchase-org`}
                    className={style.link}
                  >
                    {intl.get('hpfm.orgInfo.view.message.route.purchaseOrg').d('采购组织')}
                  </Link>
                </div>
                <Divider type="vertical" className={style.divider} />
                <div
                  className={classNames({
                    [style['orgchart-item']]: true,
                    [style['orgchart-light']]: location.pathname.includes('purchase-agent'),
                  })}
                >
                  <Link
                    to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/purchase-agent`}
                    className={style.link}
                  >
                    {intl.get('hpfm.orgInfo.view.message.route.purchaseAgent').d('采购员')}
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className={style['org-info-right']}>
            <Switch>
              {getRoutes(match.path, routerData).map(item => {
                const InfoComp = item.component;
                return (
                  <Route
                    key={item.key}
                    path={item.path}
                    render={props => (
                      <InfoComp
                        {...props}
                        key={item.key}
                        commonSourceCode={commonSourceCode}
                        commonExternalSystemCode={commonExternalSystemCode}
                      />
                    )}
                    exact={item.exact}
                  />
                );
              })}
              <Redirect
                form={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info`}
                to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/group`}
              />
            </Switch>
          </div>
        </Content>
      </React.Fragment>
    );
  }

/**
   * render
   * @returns React.element
   */
  render() {
    const { loading, dataSource, pagination, onChange } = this.props;
    const columns = [
      {
        title: intl.get('hrpt.common.view.serialNumber').d('序号'),
        dataIndex: 'orderSeq',
        width: 70,
      },
      {
        title: intl.get('hrpt.common.report.reportCode').d('报表代码'),
        dataIndex: 'reportCode',
        width: 250,
      },
      {
        title: intl.get('hrpt.common.report.reportName').d('报表名称'),
        dataIndex: 'reportName',
        width: 200,
      },
      {
        title: intl.get('hrpt.reportQuery.model.reportQuery.reportTypeCode').d('报表类型'),
        dataIndex: 'reportTypeMeaning',
        width: 120,
        render: (text, record) => {
          const code = record.reportTypeCode;
          if (code === 'T' || code === 'ST') {
            return (
              <span>
                <Icon type="table" style={{ color: '#2B975C', marginRight: 5, fontSize: 16 }} />
                {text}
              </span>
            );
          } else if (code === 'C') {
            return (
              <span>
                <Icon type="pie-chart" style={{ color: '#AB82FF', marginRight: 5, fontSize: 16 }} />
                {text}
              </span>
            );
          } else if (code === 'D') {
            return (
              <span>
                <Icon type="profile" style={{ color: '#E95D3B', marginRight: 5, fontSize: 16 }} />
                {text}
              </span>
            );
          } else {
            return (
              <span>
                <Icon type="table" style={{ color: '#E95D3B', marginRight: 5, fontSize: 16 }} />
                {text}
              </span>
            );
          }
        },
      },
      {
        title: intl.get('hrpt.reportQuery.model.reportQuery.remark').d('备注'),
        dataIndex: 'remark',
      },
      {
        title: intl.get('hzero.common.button.action').d('操作'),
        dataIndex: 'operator',
        width: 60,
        fixed: 'right',
        render: (val, record) => {
          const operators = [];
          operators.push({
            key: 'view',
            ele: (
              <Link to={`/hrpt/report-query/detail/${record.reportUuid}/${record.reportName}`}>
                {intl.get('hzero.common.button.view').d('查看')}
              </Link>
            ),
            len: 2,
            title: intl.get('hzero.common.button.view').d('查看'),
          });
          return operatorRender(operators);
        },
      },
    ];
    return (
      <Table
        bordered
        rowKey="reportId"
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        pagination={pagination}
        onChange={onChange}
      />
    );
  }