大铁项目 管理终端 车站股道页面添加

src/views/bigTrainRunplanManage/index.vue

@@ -2,9 +2,9 @@
   <div>
     <div class="BTRpMenuBarOut">
       <div class="BTRpMenuBar">
-        <div class="eachBTRpMenuBar">车站股道</div>
+        <div class="eachBTRpMenuBar" @click="addTab('StationTrack')">车站股道</div>
         <div class="eachBTRpMenuBar">车站出入口</div>
-        <div class="eachBTRpMenuBar">列车固定路径</div>
+        <div class="eachBTRpMenuBar" @click="addTab('TrainFixedPath')">列车固定路径</div>
         <div class="eachBTRpMenuBar">车站用户管理</div>
         <div class="eachBTRpMenuBar">备份区名称</div>
         <div class="eachBTRpMenuBar">工作区选择</div>
@@ -17,33 +17,38 @@
     <div class="BTRpTabs">
       <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
         <el-tab-pane
-          v-for="(item, index) in currentTabs"
+          v-for="(item) in currentTabs"
           :key="item.name"
           :label="item.title"
           :name="item.name"
         >
-          <!-- {{ item.content }} -->
+          <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:1,
+            activeTab:'StationTrack',
             currentTabs: [
                 {
                     title: '车站股道',
-                    name: 1
-                    // content: 'Tab 1 content'
+                    name: 'StationTrack',
+                    component:StationTrack
                 },
                 {
                     title: '列车固定径路',
-                    name: 2
-                    // content: 'Tab 1 content'
+                    name: 'TrainFixedPath',
+                    component:TrainFixedPath
                 }
             ]
         };
@@ -64,7 +69,29 @@ export default {
             }
             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;
+    //   },
+        // '车站股道'
+        // 列车固定路径
     }
 
 };

src/views/bigTrainRunplanManage/stationTrack.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    {{ '车站股道' }}
+  </div>
+</template>
+<script>
+export default {
+    name:'TrainFixedPath',
+    data() {
+        return {
+        };
+    }
+};
+</script>

src/views/bigTrainRunplanManage/trainFixedPath.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    {{ '列车固定径路' }}
+  </div>
+</template>
+<script>
+export default {
+    name:'StationTrack',
+    data() {
+        return {
+        };
+    }
+};
+</script>