firemoon2000 commented 6 years ago

因为客户更喜欢点一个菜单加一个标签页,点一个菜单加一个标签页,(重复的不出). 这样工作时就可以来回切比较方便. 并且可以有类似"除此之外全部关闭"之类的快速关闭方法.

不知道改动起来需要改动哪些地方(希望能够可以简单提些思路) 不过这样做的话好像就不能用url的router映射了吧?

刚开始学.不太清楚.望斧正. 感谢

pkaq commented 6 years ago

667

478

795

二期工作 #717

ddcat1115 commented 6 years ago

最简单的改动是给 src/common/menu.js 中给每项菜单增加 target 属性。。。但每个tab之间数据是不共享的，确定这样更方便？

pkaq commented 6 years ago

qq 20180131112751

估计大部分就是想要上图中的样子

ddcat1115 commented 6 years ago

我以为是真的『标签页』......

chenshuai2144 commented 6 years ago

你可能需要把meun.js的事件重写一下了。点击一次增加一个标签页

firemoon2000 commented 6 years ago

估计大部分就是想要上图中的样子

Yes. 大概想要的就是@pkaq 上图中的样子. 不过这样的话.又会有人问"怎么不兼容手机上看了" 哎.鱼与熊掌不可兼得.

抱歉.之前有问过这么多的我还在问.我没看到..可能昨天搜索关键字错了.

chenshuai2144 commented 6 years ago

这种系统应该很常见把。我原来写的就是这样的不过用的easyui

pkaq commented 6 years ago

不过这样的话.又会有人问"怎么不兼容手机上看了" 哎.鱼与熊掌不可兼得.

这种管理型系统的常用需求也没什么必要兼容手机显示了吧。。。

longzhaobi commented 6 years ago

1️⃣官方的例子为例：你如果是只要实现这个功能的话，那我就简简单单的给你弄一个，反正功能是实现了，至于优雅不优雅，样式美化不美化你就自己去琢磨了。首先在layouts文件夹下创建TabController.js文件，然后复制下面的代码到刚刚创建的文件里。

import React, { PropTypes } from 'react';
import { Tabs, Buttonm, Button, Icon, message, Badge } from 'antd';
const TabPane = Tabs.TabPane;
import { routerRedux } from 'dva/router';
/**
* tab控制
*/
export default class TabController extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: null,
      panes: [],
        };
  }

    componentWillMount() {
    const { name, keys, component } = this.props;
    if(keys === '/' || !name) {
      return;
    }
        const panes = this.state.panes;
        const activeKey = keys;
        panes.push({ name, key: activeKey, component });
        this.setState({ panes, activeKey });
    }

    componentWillReceiveProps(nextProps) {
    const { name, keys, component } = nextProps;
    if(keys === '/' || !name) {
      return;
    }
        const panes = this.state.panes;
        const activeKey = keys;
        let isExist = false;
        for (let i = 0; i < panes.length; i++) {
            if (panes[i].key === activeKey) {
                isExist = true;
                break;
            }
        }

        if (isExist) {
            //如果已经存在
            this.setState({
                activeKey
            });
        } else {
            panes.push({ name, key: activeKey, component });
            this.setState({ panes, activeKey });
        }
    }

    onChange = (activeKey) => {
    // this.setState({ activeKey });
    this.props.dispatch(routerRedux.push({
      pathname: activeKey,
    }))
    }

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }

    remove = (targetKey) => {
        if(this.state.panes.length === 1) {
            message.warning('窗口不能全部关闭');
            return;
        }
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }

    render() {
    const { location, match } = this.props;
        return (
            <div>
                <Tabs
                    hideAdd
                    onChange={this.onChange}
                    activeKey={this.state.activeKey}
          type="editable-card"
                    onEdit={this.onEdit}
                >
                    {this.state.panes.map(pane => <TabPane tab={pane.name}  key={pane.key} style={{height: 'calc(100vh - 102px)',overflowY:'auto'}}>
            <pane.component location={location} match={match}/>
          </TabPane>)}
                </Tabs>
            </div>
        )

    }
}

让面代码复制好后，就更改BasicLayout.js文件，很简单：第一步：引入组件

import TabController from './TabController';

第二步：弄一个上面组件需要的props

const tasParams = {
      ...this.props.routerData[location.pathname],
      keys: location.pathname,
      location,
      dispatch:this.props.dispatch,
      match,
 }

第三步：在Content组件下使用TabController 组件

<Content style={{ margin: '24px 24px 0', height: '100%' }}>
          <TabController {...tasParams}/>

这个时候你发现已经有标签页了，点击左边菜单也会增加标签，点击叉叉也会关闭，至于那些全部关闭，关闭其他自己要实现就自己去实现了。

但发现右边内容里内容渲染了两次，这是因为自身的AuthorizedRoute组件也渲染了一次，如果直接把component这个参数删了，这个组件AuthorizedRoute就会报错，感觉不灵活，你可以自己去改改里面的判断。

还有种更简单的解决办法就是直接把AuthorizedRoute换成Route组件，你如果不用他们的权限的话。

longzhaobi commented 6 years ago

alt

这里是个效果，自己就随便玩玩看看，不要弄到正式系统。还是等官方的比较好！

appbest commented 6 years ago

@longzhaobi

这个方案运行报错

longzhaobi commented 6 years ago

@appbest 你最后一句读了没？是不是没有把AuthorizedRoute换成Route？

roc2539 commented 6 years ago

@chenshuai2144 官方会支持吗？

chenshuai2144 commented 6 years ago

暂时没有排期

gatspy commented 6 years ago

2.0 的是顶部菜单导航，也不知道官方会不会支持多标签页面?

chenzway commented 6 years ago

这里是个效果，自己就随便玩玩看看，不要弄到正式系统。还是等官方的比较好！

你好，我是react新手。请问能不能将BasicLayout.js的源代码发出来看一下。谢谢！

L-TF commented 6 years ago

@longzhaobi 加入下面这块代码页面一直加载是怎么回事
const tasParams = { ...this.props.routerData[location.pathname], keys: location.pathname, location, dispatch:this.props.dispatch, match, }

SynChron1zed commented 6 years ago

@L-TF @longzhaobi 解决了么

Pentium286 commented 5 years ago

props

tasParams 报错，可以看一下 BasicLayout.js 的代码吗？

Pentium286 commented 5 years ago

@L-TF @longzhaobi 解决了么

解决问题了吗？

Pentium286 commented 5 years ago

@longzhaobi 加入下面这块代码页面一直加载是怎么回事 const tasParams = { ...this.props.routerData[location.pathname], keys: location.pathname, location, dispatch:this.props.dispatch, match, }

解决问题了吗？

Pentium286 commented 5 years ago