dva/router#routerRedux JavaScript Examples

@Bind()
  handleUpdate(record = {}) {
    const { dispatch } = this.props;
    this.setState(
      {
        isCopy: false,
      },
      () => {
        const { isCopy } = this.state;
        const payload = { ...record, isCopy };
        dispatch(
          routerRedux.push({
            pathname: `/hmsg/message-template/detail/${record.templateId}`,
            payload,
          })
        );
      }
    );
  }

Model = {
  namespace: 'userAndlogin',
  state: {
    status: undefined,
  },
  effects: {
    *login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      }); // Login successfully

      if (response.status === 'ok') {
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params;

        if (redirect) {
          const redirectUrlParams = new URL(redirect);

          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);

            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = redirect;
            return;
          }
        }

        yield put(routerRedux.replace(redirect || '/'));
      }
    },

    *getCaptcha({ payload }, { call }) {
      yield call(getFakeCaptcha, payload);
    },
  },
  reducers: {
    changeLoginStatus(state, { payload }) {
      setAuthority(payload.currentAuthority);
      return { ...state, status: payload.status, type: payload.type };
    },
  },
}

/**
   * 保存
   */
  @Bind()
  handleSave() {
    const {
      dispatch,
      form,
      match,
      reportDefinition: { header = {} },
    } = this.props;
    const { metaColumns = [] } = header;
    form.validateFields((err, values) => {
      const { layout = undefined, statColumnLayout = undefined, ...otherValues } = values;
      const options = { layout, statColumnLayout };
      if (!err) {
        if (isUndefined(match.params.id)) {
          dispatch({
            type: 'reportDefinition/createReportDefinition', // 新增逻辑
            payload: {
              metaColumns: JSON.stringify(metaColumns),
              options: JSON.stringify(options),
              ...otherValues,
            },
          }).then((res) => {
            if (res) {
              notification.success();
              dispatch(
                routerRedux.push({
                  pathname: `/hrpt/report-definition/detail/${res.reportId}`,
                })
              );
            }
          });
        } else {
          dispatch({
            type: 'reportDefinition/updateReportDefinition', // 更新逻辑
            payload: {
              ...header,
              metaColumns: JSON.stringify(metaColumns),
              options: JSON.stringify(options),
              ...otherValues,
            },
          }).then((res) => {
            if (res) {
              notification.success();
              this.handleSearch();
            }
          });
        }
      }
    });
  }

card = (props) => {
  const { info, dispatch } = props;
  const { com_name, com_description, file_path,id } = info;

  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = e => {
    setVisible(false);
  };

  const handleCancel = e => {
    setVisible(false);
  };

  const PageJumpToDetail = () => {
    dispatch(routerRedux.push(`/${id}/componentDrag`));
  }

  return (
    <div style={{ width: '200px', marginRight: '20px', marginBottom: '20px' }}>
      <div className={styles.container}>
        <img style={{ width: '100px' }} src={file_path} />
      </div>
      <div style={{ padding: '24px' }}>
        <h4>{com_name}</h4>
        <div style={{ height: '50px'}}>{com_description}</div>
      </div>
      <div>
        <div
          style={{
            margin: 0,
            padding: 0,
            background: '#e8e8e8',
            display: 'flex',
          }}
        >
          <span style={{ flex: 1, textAlign: 'center' }} onClick={PageJumpToDetail}>更新</span>
          <span style={{ flex: 1, textAlign: 'center' }} onClick={showModal}>
            预览
          </span>
          <span style={{ flex: 1, textAlign: 'center' }}>设置</span>
        </div>
        <Modal
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          footer = {null}
        >
          <div >
            <img style={{ width: '400px' }} src={file_path} />
          </div>
        </Modal>
      </div>
    </div>
  );
}

Model = {
  namespace: 'login',
  state: {
    code: 0,
  },
  effects: {
    *login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      }); // Login successfully
      if (response.code === 0) {
        const params = getPageQuery();
        let { redirect } = params;
        if (redirect) {
          window.location.href = redirect;
        }else {
          window.location.href = "/"
        }
      }else {
        message.error("登录失败，请检查用户名或密码是否正确！")
      }
    },

    *getCaptcha({ payload }, { call }) {
      yield call(getFakeCaptcha, payload);
    },

    *logout(_, { call, put  }) {
      const { redirect } = getPageQuery(); // redirect

      const response = yield call(accountLogout);
      // Login successfully
      console.log('logout response', response);

      if (response.code === 0) {
        yield put({
          type: 'changeLoginStatus',
          payload: {
            status: false,
            data: {
              currentAuthority: 'guest',
            },
          },
        });
        yield put(
          routerRedux.push({
            pathname: '/user/login',
            search: stringify({
              redirect: window.location.href,
            }),
          })
        );
      }

    },
  },
  reducers: {
    changeLoginStatus(state, { payload }) {
      if (payload.code === 0) {
        setAuthority(payload.data.currentAuthority);
      }else {
        setAuthority({
          currentAuthority: 'guest',
        });
      }
      return { ...state, code: payload.code, type: payload.type };
    },
  },
}

/**
   * @function handleSelectTenant - 选择租户
   * @param {object} record - 选择的租户行数据
   * @param {string} record.tenantId - 租户ID
   * @param {string} record.tenantName - 租户名称
   * @param {string} record.tenantNum - 租户编码
   */
  @Bind()
  handleSelectTenant(record) {
    const { dispatch } = this.props;
    this.setState({
      // modalVisible: false,
      // 设置 loading
      updateTenantLoading: true,
      selectTenant: record.tenantName,
    });
    this.setState({
      selectTenant: record.tenantName,
    });
    // warn 清空 tabs 信息
    cleanMenuTabs();
    // 切换租户成功后跳转首页，刷新页面
    dispatch(routerRedux.push({ pathname: '/' }));
    // 缓存当前用户的租户
    dispatch({
      type: 'user/updateCurrentTenant',
      payload: { tenantId: record.tenantId },
    }).then((res) => {
      if (res) {
        setSession(menuHistorySessionKey, []);
        dispatch(routerRedux.push({ pathname: '/workplace' }));
        // 成功 刷新页面
        window.location.reload();
      } else {
        // 失败 不关闭模态框
        this.setState({
          updateTenantLoading: false,
        });
      }
    });
  }

function ResourcePage(props) {
  const {
    zoneEnv,
    list,
    loadZoneEnvTree,
    listLoading,
    loadList,
    showModalCreateResource,
    pagination,
  } = props;
  const { page = 0, pageSize = 10, env = null, zone = null, query = '' } = props.location.query;

  useEffect(() => {
    loadZoneEnvTree();

    loadList(0, 10, query);
  }, []);

  const ResourceTableColumns = [
    {
      title: 'ID',
      key: 'id',
      dataIndex: 'id',
    },
    {
      title: 'Env',
      key: 'env',
      dataIndex: 'env',
      filters: Object.keys(zoneEnv).map((env) => {
        return {
          text: env,
          value: env,
        };
      }),
    },
    {
      title: 'Zone',
      key: 'zone_code',
      dataIndex: 'zone_code',
      filters: (function () {
        let zoneMap = {};
        Object.keys(zoneEnv).map((env) => {
          zoneEnv[env].map((zone) => {
            zoneMap[zone.zone_code] = zone;
          });
        });

        return Object.keys(zoneMap).map((zone) => {
          return {
            text: zone,
            value: zone,
          };
        });
      })(),
    },
    {
      title: 'Name',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (val) => {
        return (
          val &&
          val.map((t) => {
            return <Tag color={'blue'}>{t}</Tag>;
          })
        );
      },
    },
    {
      title: 'Description',
      key: 'description',
      dataIndex: 'description',
    },
    {
      title: 'Latest Version',
      key: 'latest_version',
      dataIndex: 'latest_version',
      render: (val) => {
        return <Tag>{val}</Tag>;
      },
    },
    {
      title: 'Last Update',
      key: 'last_update',
      dataIndex: 'last_update',
      render: (val) => {
        return moment(val).format('YYYY-MM-DD HH:mm:ss');
      },
    },
  ];

  const handleTableChange = (pagination, filters, sorter) => {
    loadList(pagination.current - 1, pagination.pageSize, query, filters.env, filters.zone_code);
    props.dispatch(
      routerRedux.push({
        query: {
          ...props.location.query,
          ...filters,
          page: pagination.page,
          pageSize: pagination.pageSize,
        },
      }),
    );
  };

  const onSearch = (value) => {
    props.dispatch(
      routerRedux.push({
        query: {
          ...props.location.query,
          query: value,
        },
      }),
    );

    loadList(page, pageSize, value, env, zone);
  };

  return (
    <PageHeaderWrapper>
      <Card>
        <Space direction={'vertical'} style={{ width: '100%' }}>
          <Row justify={'space-between'}>
            <Col>
              <Button onClick={() => showModalCreateResource(true)}>
                <FileAddOutlined />
                新建
              </Button>
            </Col>

            <Col>
              <Input.Search defaultValue={query} onSearch={onSearch} placeholder={'搜索资源名称'} />
            </Col>
          </Row>

          <Table
            loading={listLoading}
            rowKey={'id'}
            columns={[
              ...ResourceTableColumns,
              {
                title: '操作',
                render: (row) => {
                  return (
                    <Button.Group>
                      <Button
                        onClick={() => {
                          console.log(row);
                          props.showModalEdit({
                            visible: true,
                            ...row,
                          });
                        }}
                      >
                        更新
                      </Button>
                    </Button.Group>
                  );
                },
              },
            ]}
            dataSource={list}
            pagination={{
              ...pagination,
              current: pagination.current + 1,
            }}
            onChange={handleTableChange}
          />
        </Space>
      </Card>

      <ModalCreateResource onOk={() => loadList()} />

      <ModalEditResource onOk={() => loadList()} />
    </PageHeaderWrapper>
  );
}

IndexView = props => {
  const { dispatch, componentView, form, match } = props;
  const { params } = match;
  const { getFieldDecorator } = form;

  const [comListHidden, setComListHidden] = useState(false);

  /**
   * @description 左边切换的事件，是否显示componentList
   */
  const toggleComponentList = () => {
    setComListHidden(!comListHidden);
  };

  const cls = classNames(styles.ComponentList, {
    [styles.hidden]: comListHidden === true,
  });

  /**
   * @description 生成预览代码
   */
  const CodePreview = () => {
    console.log('com', componentView);
    dispatch(routerRedux.push('/codePreview'));
  };

  useEffect(() => {
    // 首次执行
    console.log('mount----');
    // 发送setcurrentview
    dispatch({
      type: 'drag/getComponentCode',
      payload: {
        id: params.id,
      },
    });
  }, []);

  /**
   * @description 发送到服务器
   */
  const postToServer = () => {
    if (componentValidator(componentView)) {
      dispatch({
        type: 'drag/putComponentCode',
        payload: {
          id: params.id,
          code: componentView,
        },
      });
    }
  };

  const basicObj = {
    type: 'div',
    nested: true,
    props: {
      style: {
        height: '',
        width: '',
        marginTop: '',
      },
    },
    needDiv: false,
    children: [],
  };
  // 组件不能为空
  const componentValidator = componentView => {
    if (componentView.length === 0) {
      // 提示不能为空
      message.error('组件不能为空');
      return false;
    } else if (componentView.length === 1) {
      return true;
    } else {
      confirm({
        title: '组件必须在被包裹在一个根组件下,是否自动生成外层根组件包裹?',
        content: '当你点击ok，自动生成包裹根组件',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          return new Promise((resolve, reject) => {
            // dispatch
            const basic = basicObj;
            basic.children = componentView;
            dispatch({
              type: 'drag/setCurrentView',
              payload: [basic],
              isPage: false,
            });
            setTimeout(resolve, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
      return false;
    }
  };

  /**
   * @description 跳转代码广场
   */
  const comSquare = () => {
    dispatch(routerRedux.push('/comsquare'));
  };

  return (
    <div className={styles.container}>
      <div className={styles.LeftContainer}>
        <div className={styles.header}>
          <div className={styles.btnList}>
            <div className={styles.logo}>React-Drag</div>
            <div className={styles.operation}>
              <div className={styles.btn} style={{ color: '#1890FF' }}>
                <HighlightOutlined style={{ fontSize: '22px' }} />
                组件编辑
              </div>
              <div className={styles.btn} onClick={comSquare}>
                <AppstoreOutlined style={{ fontSize: '22px' }} />
                组件广场
              </div>
              <div className={styles.btn} onClick={postToServer}>
                <CheckCircleOutlined style={{ fontSize: '22px' }} />
                保存到服务器
              </div>
            </div>
            <div className={styles.userCenter}>
              <div className={styles.btn} onClick={CodePreview}>
                <UserOutlined style={{ fontSize: '22px' }} />
                用户中心
              </div>
            </div>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.settings}>
            <span onClick={toggleComponentList}>
              <SmileTwoTone style={{ fontSize: '24px' }} />
            </span>
          </div>
          <div className={styles.editRegion}>
            <div className={cls}>
              <Tabs>
                <TabPane tab="公共组件" key="1">
                  <ComponentList />
                </TabPane>
              </Tabs>
            </div>
            <div className={styles.dragRegion}>
              <DragCanvas isPage={false} />
            </div>
          </div>
          <div className={styles.RightContainer}>
            <div className={styles.title}>属性编辑区</div>
            <ComponentConfig isPage={false} />
          </div>
        </div>
        <div className={styles.footer}>
          {' '}
          MIT Licensed | Copyright © 2019.12.31-present Daisy
        </div>
      </div>
    </div>
  );
}