rt-sim-training-client/src/views/bigTrainRunplanManage/index.vue

<template>
  <div>
    <div class="BTRpMenuBarOut">
      <div class="BTRpMenuBar">
        <div class="eachBTRpMenuBar" @click="addTab('StationTrack')">车站股道</div>
        <div class="eachBTRpMenuBar">车站出入口</div>
        <div class="eachBTRpMenuBar" @click="addTab('TrainFixedPath')">列车固定路径</div>
        <div class="eachBTRpMenuBar">车站用户管理</div>
        <div class="eachBTRpMenuBar">备份区名称</div>
        <div class="eachBTRpMenuBar">工作区选择</div>
        <div class="eachBTRpMenuBar">帮助</div>
      </div>
      <div class="BTRunplanClose">
        <i class="el-icon-close" />
      </div>
    </div>
    <div class="BTRpTabs">
      <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item) in currentTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <component
            :is="item.component"
            :ref="item.name"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import StationTrack from './stationTrack';
import TrainFixedPath from './trainFixedPath';
export default {
    name:'BigTrainRunplanManage',
    data() {
        return {
            activeTab:'StationTrack',
            currentTabs: [
                {
                    title: '车站股道',
                    name: 'StationTrack',
                    component:StationTrack
                },
                {
                    title: '列车固定径路',
                    name: 'TrainFixedPath',
                    component:TrainFixedPath
                }
            ]
        };
    },
    methods:{
        removeTab(targetName) {
            const tabs = this.currentTabs;
            let activeName = this.activeTab;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        const nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.activeTab = activeName;
            this.currentTabs = tabs.filter(tab => tab.name !== targetName);
        },
        addTab(name) {
            debugger;
            const nameMap = {'StationTrack':{title:'车站股道', component:StationTrack }, 'TrainFixedPath':{title:'列车固定路径', component:TrainFixedPath}};
            const findTab = this.currentTabs.find(tab=>{
                return tab.name == name;
            });
            if (!findTab) {
                this.currentTabs.push(Object.assign( {name:name}, nameMap[name]));
            }
            this.activeTab = name;
        }
    //      addTab(targetName) {
    //     let newTabName = ++this.tabIndex + '';
    //     this.editableTabs.push({
    //       title: 'New Tab',
    //       name: newTabName,
    //       content: 'New Tab content'
    //     });
    //     this.editableTabsValue = newTabName;
    //   },
        // '车站股道'
        // 列车固定路径
    }

};
</script>
<style lang="scss" scoped>
.BTRpMenuBarOut{
    width: 100%;
    background: #bad8fb;
    border-bottom: 1px #8fb2dd solid;
    height: 29px;
}
.BTRpMenuBar{
    display: inline-block;
    background: #d2e0f3;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right: 10px;
    border-right: 1px #93a3b4 solid;
    border-bottom: 1px #cadaef solid;
    position: absolute;
    height: 29px;
}
.eachBTRpMenuBar{
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    cursor: pointer;
    height: 29px;
}
.eachBTRpMenuBar:hover{
    background: #a6cdfb;
}
.BTRunplanClose{
    display: inline-block;
    float: right;
    margin-right: 10px;
    padding: 4px 8px;
    cursor: pointer;
}
</style>
<style lang="scss">
.BTRpTabs .el-tabs--card>.el-tabs__header{background: #c5dffd;font-size: 13px;color: #1f4678;border-bottom: 2px #84827f solid;}
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-top.is-active{background:#fafbfa;}
.BTRpTabs .el-tabs__item.is-active{color: #003589;font-weight: bold;}
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-top{font-size:13px;border-top-right-radius: 40px;height: 30px;
line-height: 30px;padding: 0 15px 0px 10px;background: #b9d2f1;vertical-align: text-bottom;border-top: 1px #5e6a79 solid;
border-left: 1px #94b6f0 solid;border-right: 1px #c9d3e0 solid;}
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__nav{border:none}
</style>