From a7fe8da292b4a08eda61f1da3a45e1d0cf6bd37c Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Mon, 26 Aug 2024 11:01:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=A2=E5=8C=85=E5=B1=91+tabs?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                      |  22 +-
 src/views/collect/CollectOrderTabs.vue   | 246 +++++++++++++++++++++++
 src/views/collect/DealOrder.vue          |  35 ++--
 src/views/collect/DealOrderBlank.vue     |  35 ++--
 src/views/collect/IoCreateOrder.vue      |   8 +-
 src/views/collect/IoCreateOrderBlank.vue |   8 +-
 6 files changed, 295 insertions(+), 59 deletions(-)
 create mode 100644 src/views/collect/CollectOrderTabs.vue

diff --git a/src/router/index.js b/src/router/index.js
index 04760f3e..7534d21a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,27 +63,7 @@ export const constantRoutes = [
   },
   {
     path: '/tagCodeBlank',
-    component: (resolve) => require([`@/views/collect/DealOrderBlank`],resolve),
-    hidden: true
-  },
-  {
-    path: '/CollectOrderAllotBlank',
-    component: (resolve) => require([`@/views/collect/CollectOrderAllotBlank`],resolve),
-    hidden: true
-  },
-  {
-    path: '/CollectOrderEndBlank',
-    component: (resolve) => require([`@/views/collect/CollectOrderEndBlank`],resolve),
-    hidden: true
-  },
-  {
-    path: '/IoCreateOrderBlank',
-    component: (resolve) => require([`@/views/collect/IoCreateOrderBlank`],resolve),
-    hidden: true
-  },
-  {
-    path: '/ioSplitFifoCodeBlank',
-    component: (resolve) => require([`@/views/collect/ioSplitFifoCodeBlank`],resolve),
+    component: (resolve) => require([`@/views/collect/CollectOrderTabs`],resolve),
     hidden: true
   },
   {
diff --git a/src/views/collect/CollectOrderTabs.vue b/src/views/collect/CollectOrderTabs.vue
new file mode 100644
index 00000000..35276363
--- /dev/null
+++ b/src/views/collect/CollectOrderTabs.vue
@@ -0,0 +1,246 @@
+<template>
+  <el-row class="tac">
+    <el-col :span="2">
+<!--      <h5>默认颜色</h5>-->
+      <el-menu
+        :default-active="menuActive"
+        class="el-menu-vertical-demo"
+        @open="handleOpen">
+        <el-menu-item :index=0 @click="clickMenuItem(0)">
+          <i class="el-icon-menu"></i>
+          <span slot="title">处理单据</span>
+        </el-menu-item>
+        <el-menu-item :index=1 @click="clickMenuItem(1)">
+          <i class="el-icon-menu"></i>
+          <span slot="title">工位上货</span>
+        </el-menu-item>
+        <el-menu-item :index=2 @click="clickMenuItem(2)">
+          <i class="el-icon-document"></i>
+          <span slot="title">工位退货</span>
+        </el-menu-item>
+        <el-menu-item :index=3 @click="clickMenuItem(3)">
+          <i class="el-icon-setting"></i>
+          <span slot="title">工位存量</span>
+        </el-menu-item>
+        <el-menu-item :index=4 @click="clickMenuItem(4)">
+          <i class="el-icon-setting"></i>
+          <span slot="title">待处理单</span>
+        </el-menu-item>
+        <el-menu-item :index=5 @click="clickMenuItem(5)">
+          <i class="el-icon-setting"></i>
+          <span slot="title">已完成单</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+
+    <el-col :span="22">
+      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="upodateMenuActive">
+        <el-tab-pane
+          v-for="(item, index) in editableTabs"
+          :key="item.name"
+          :label="item.title"
+          :name="item.name"
+
+        >
+          <component :is="item.component" v-bind="item.componentProps" />
+        </el-tab-pane>
+      </el-tabs>
+
+
+<!--      <el-tabs :tab-position="tabPosition" style="height: 100%">-->
+<!--        <el-tab-pane label="处理单据" style="height: 100%"  @click="addTab('DealOrderBlank')">-->
+<!--          <DealOrderBlank>-->
+<!--          </DealOrderBlank>-->
+<!--        </el-tab-pane>-->
+
+<!--        <el-tab-pane label="工位上货"style="height: 100%"  @click="addTab('IoCreateOrderBlankReturn')">-->
+<!--          <IoCreateOrderBlankReturn-->
+<!--            :splitType="'return'"-->
+<!--          >-->
+<!--          </IoCreateOrderBlankReturn>-->
+<!--        </el-tab-pane>-->
+
+<!--        <el-tab-pane label="工位退货" style="height: 100%"  @click="addTab('IoCreateOrderBlankOut')">-->
+<!--          <IoCreateOrderBlankOut-->
+<!--            :splitType="'out'"-->
+<!--          >-->
+<!--          </IoCreateOrderBlankOut>-->
+<!--        </el-tab-pane>-->
+
+<!--        <el-tab-pane label="工位存量" style="height: 100%"  @click="addTab('ioSplitFifoCodeBlank')">-->
+<!--          <ioSplitFifoCodeBlank>-->
+<!--          </ioSplitFifoCodeBlank>-->
+<!--        </el-tab-pane>-->
+
+<!--        <el-tab-pane label="待处理单" style="height: 100%"  @click="addTab('CollectOrderAllotBlank')">-->
+<!--          <CollectOrderAllotBlank>-->
+<!--          </CollectOrderAllotBlank>-->
+<!--        </el-tab-pane>-->
+
+<!--        <el-tab-pane label="已完成单" style="height: 100%"  @click="addTab('CollectOrderEndBlank')">-->
+<!--          <CollectOrderEndBlank>-->
+<!--          </CollectOrderEndBlank>-->
+<!--        </el-tab-pane>-->
+
+<!--      </el-tabs>-->
+    </el-col>
+  </el-row>
+
+
+
+
+</template>
+
+<script>
+import DealOrderBlank from "@/views/collect/DealOrderBlank.vue";
+import CollectOrderAllotBlank from "@/views/collect/CollectOrderAllotBlank.vue";
+import CollectOrderEndBlank from "@/views/collect/CollectOrderEndBlank.vue";
+import IoCreateOrderBlankReturn from "@/views/collect/IoCreateOrderBlank.vue";
+import IoCreateOrderBlankOut from "@/views/collect/IoCreateOrderBlank.vue";
+import ioSplitFifoCodeBlank from "@/views/collect/ioSplitFifoCodeBlank.vue";
+
+
+export default {
+  components:{
+    DealOrderBlank,IoCreateOrderBlankReturn,IoCreateOrderBlankOut,ioSplitFifoCodeBlank,CollectOrderAllotBlank,CollectOrderEndBlank
+  },
+  name: 'CollectOrderTabs',
+  data() {
+    return {
+      tabPosition: 'left',
+      editableTabsValue: 'DealOrderBlank',
+      componentTables: [
+      {
+        number: 0,
+        title: '处理单据',
+        name: 'DealOrderBlank',
+        component: DealOrderBlank,
+        // 假设你需要传递的参数
+        componentProps: {
+          title: '这是单据的标题'
+        }
+      },
+      {
+        number: 1,
+        title: '工位上货',
+        name: 'IoCreateOrderBlankReturn',
+        component: IoCreateOrderBlankReturn,
+        // 假设你需要传递的参数
+        componentProps: {
+          splitType: 'return'
+        }
+      },
+      {
+        number: 2,
+        title: '工位退货',
+        name: 'IoCreateOrderBlankOut',
+        component: IoCreateOrderBlankOut,
+        // 假设你需要传递的参数
+        componentProps: {
+          splitType: 'out'
+        }
+      },
+      {
+        number: 3,
+        title: '工位存量',
+        name: 'ioSplitFifoCodeBlank',
+        component: ioSplitFifoCodeBlank,
+        // 假设你需要传递的参数
+        componentProps: {
+
+        }
+      },
+      {
+        number: 4,
+        title: '待处理单',
+        name: 'CollectOrderAllotBlank',
+        component: CollectOrderAllotBlank,
+        // 假设你需要传递的参数
+        componentProps: {
+
+        }
+      },
+      {
+        number: 5,
+        title: '已完成单',
+        name: 'CollectOrderEndBlank',
+        component: CollectOrderEndBlank,
+        // 假设你需要传递的参数
+        componentProps: {
+
+        }
+      }],
+      editableTabs: [{
+        number: 0,
+        title: '处理单据',
+        name: 'DealOrderBlank',
+        component: DealOrderBlank,
+        // 假设你需要传递的参数
+        componentProps: {
+          title: '这是单据的标题'
+        }
+      },
+      ],
+      tabIndex: 0,
+      menuActive: 0
+    }
+    },
+  methods: {
+    upodateMenuActive(tab, event){
+      const foundTab = this.findTabByName(tab.name);
+      if (foundTab) {
+        // 如果找到了，执行一些操作
+        this.menuActive = foundTab.number;
+      }
+    },
+    clickMenuItem(val){
+      //分两种 一种已存在 一种未存在
+      let item = this.componentTables[(val)]
+
+      const foundTab = this.findTabByName(item.name);
+      if (foundTab) {
+        // 如果找到了，执行一些操作
+        this.editableTabsValue = foundTab.name;
+      } else {
+        // 如果没有找到，执行其他操作
+          this.addTab(item)
+      }
+
+    },
+    findTabByName(name) {
+      // 使用find方法找到ID等于tabId的对象
+      const tab = this.editableTabs.find(tab => tab.name === name);
+      // 如果找到了，返回该对象；否则返回undefined
+      return tab;
+    },
+    addTab(item) {
+       ++this.tabIndex;
+      this.editableTabs.push(item);
+      this.editableTabsValue = item.name;
+    },
+    removeTab(targetName) {
+      let tabs = this.editableTabs;
+      let activeName = this.editableTabsValue;
+
+      if (activeName === targetName) {
+        tabs.forEach((tab, index) => {
+          if (tab.name === targetName) {
+            let nextTab = tabs[index + 1] || tabs[index - 1];
+            if (nextTab) {
+              activeName = nextTab.name;
+              this.menuActive = nextTab.number;
+            }
+          }
+        });
+      }
+
+      this.editableTabsValue = activeName;
+      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+    }
+  }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/collect/DealOrder.vue b/src/views/collect/DealOrder.vue
index c1fc485f..64f9f391 100644
--- a/src/views/collect/DealOrder.vue
+++ b/src/views/collect/DealOrder.vue
@@ -53,20 +53,20 @@
               >处理完成
               </el-button>
 
-              <el-dropdown @command="handleCommand">
-                <el-button type="primary">
-                  更多功能<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item divided @click.native="handleClickOut('IoCreateOrderBlank')">工位上货</el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClickReturn('IoCreateOrderBlank')">工位退货
-                  </el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClick('ioSplitFifoCodeBlank')">工位存量</el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClick('CollectOrderAllotBlank')">待处理单
-                  </el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClick('CollectOrderEndBlank')">已完成单</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+<!--              <el-dropdown @command="handleCommand">-->
+<!--                <el-button type="primary">-->
+<!--                  更多功能<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
+<!--                </el-button>-->
+<!--                <el-dropdown-menu slot="dropdown">-->
+<!--                  <el-dropdown-item divided @click.native="handleClickOut('IoCreateOrderBlank')">工位上货</el-dropdown-item>-->
+<!--                  <el-dropdown-item divided @click.native="handleClickReturn('IoCreateOrderBlank')">工位退货-->
+<!--                  </el-dropdown-item>-->
+<!--                  <el-dropdown-item divided @click.native="handleClick('ioSplitFifoCodeBlank')">工位存量</el-dropdown-item>-->
+<!--                  <el-dropdown-item divided @click.native="handleClick('CollectOrderAllotBlank')">待处理单-->
+<!--                  </el-dropdown-item>-->
+<!--                  <el-dropdown-item divided @click.native="handleClick('CollectOrderEndBlank')">已完成单</el-dropdown-item>-->
+<!--                </el-dropdown-menu>-->
+<!--              </el-dropdown>-->
             </el-button-group>
           </el-col>
         </el-row>
@@ -284,9 +284,9 @@
                 <!--            </div>-->
               </div>
               <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"
-                   @click="selectBusType(info.documentTypeCode)">
+                  >
                 <!-- 假设这里有一些信息内容 -->
-                <p style="font-size: 14px;background-color: #e1f3fb">{{ info.documentTypeCode }}</p>
+                <p style="font-size: 14px;background-color: #e1f3fb"  @click="selectBusType(info.documentTypeCode)">{{ info.documentTypeCode }}</p>
                 <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb"
                            @click="selectBusType(info.documentTypeCode)">开始作业
                 </el-button>
@@ -453,10 +453,11 @@ export default {
               if (this.formDataVisible.scanType == 1) {
                 this.findFromInvList("");
               }
+              this.findCurOrder();
             } else {
               this.formData.busType = null
             }
-            this.findCurOrder();
+
           }
 
         }
diff --git a/src/views/collect/DealOrderBlank.vue b/src/views/collect/DealOrderBlank.vue
index c1fc485f..651626a7 100644
--- a/src/views/collect/DealOrderBlank.vue
+++ b/src/views/collect/DealOrderBlank.vue
@@ -53,20 +53,20 @@
               >处理完成
               </el-button>
 
-              <el-dropdown @command="handleCommand">
-                <el-button type="primary">
-                  更多功能<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item divided @click.native="handleClickOut('IoCreateOrderBlank')">工位上货</el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClickReturn('IoCreateOrderBlank')">工位退货
-                  </el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClick('ioSplitFifoCodeBlank')">工位存量</el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClick('CollectOrderAllotBlank')">待处理单
-                  </el-dropdown-item>
-                  <el-dropdown-item divided @click.native="handleClick('CollectOrderEndBlank')">已完成单</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+              <!--              <el-dropdown @command="handleCommand">-->
+              <!--                <el-button type="primary">-->
+              <!--                  更多功能<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
+              <!--                </el-button>-->
+              <!--                <el-dropdown-menu slot="dropdown">-->
+              <!--                  <el-dropdown-item divided @click.native="handleClickOut('IoCreateOrderBlank')">工位上货</el-dropdown-item>-->
+              <!--                  <el-dropdown-item divided @click.native="handleClickReturn('IoCreateOrderBlank')">工位退货-->
+              <!--                  </el-dropdown-item>-->
+              <!--                  <el-dropdown-item divided @click.native="handleClick('ioSplitFifoCodeBlank')">工位存量</el-dropdown-item>-->
+              <!--                  <el-dropdown-item divided @click.native="handleClick('CollectOrderAllotBlank')">待处理单-->
+              <!--                  </el-dropdown-item>-->
+              <!--                  <el-dropdown-item divided @click.native="handleClick('CollectOrderEndBlank')">已完成单</el-dropdown-item>-->
+              <!--                </el-dropdown-menu>-->
+              <!--              </el-dropdown>-->
             </el-button-group>
           </el-col>
         </el-row>
@@ -284,9 +284,9 @@
                 <!--            </div>-->
               </div>
               <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"
-                   @click="selectBusType(info.documentTypeCode)">
+              >
                 <!-- 假设这里有一些信息内容 -->
-                <p style="font-size: 14px;background-color: #e1f3fb">{{ info.documentTypeCode }}</p>
+                <p style="font-size: 14px;background-color: #e1f3fb"  @click="selectBusType(info.documentTypeCode)">{{ info.documentTypeCode }}</p>
                 <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb"
                            @click="selectBusType(info.documentTypeCode)">开始作业
                 </el-button>
@@ -453,10 +453,11 @@ export default {
               if (this.formDataVisible.scanType == 1) {
                 this.findFromInvList("");
               }
+              this.findCurOrder();
             } else {
               this.formData.busType = null
             }
-            this.findCurOrder();
+
           }
 
         }
diff --git a/src/views/collect/IoCreateOrder.vue b/src/views/collect/IoCreateOrder.vue
index bcea792e..466893a6 100644
--- a/src/views/collect/IoCreateOrder.vue
+++ b/src/views/collect/IoCreateOrder.vue
@@ -362,6 +362,10 @@ export default {
       type: Object,
       required: true,
     },
+    splitType: {//splitType
+      type: Object,
+      required: true,
+    },
 
 
   },
@@ -584,7 +588,7 @@ export default {
       this.corpOrderIdDisabled = false;
 
 
-      this.splitType = this.$route.query.splitType;
+      this.splitType = this.splitType;
       if (this.splitType == "search") {
       } else if (this.splitType == "out") {
         this.orderFormData.action = 'SC72197936495755';
@@ -1831,7 +1835,7 @@ export default {
     inputer.focus();
   },
   created() {
-    this.splitType = this.$route.query.splitType;
+    this.splitType = this.splitType;
     this.init();
     if (this.$route.query.workplaceId != null) {
       this.corpOrderIdDisabled = true
diff --git a/src/views/collect/IoCreateOrderBlank.vue b/src/views/collect/IoCreateOrderBlank.vue
index b92b50ef..d21949b8 100644
--- a/src/views/collect/IoCreateOrderBlank.vue
+++ b/src/views/collect/IoCreateOrderBlank.vue
@@ -362,6 +362,10 @@ export default {
       type: Object,
       required: true,
     },
+    splitType: {//splitType
+      type: Object,
+      required: true,
+    },
 
 
   },
@@ -584,7 +588,7 @@ export default {
       this.corpOrderIdDisabled = false;
 
 
-      this.splitType = this.$route.query.splitType;
+      this.splitType = this.splitType;
       if (this.splitType == "search") {
       } else if (this.splitType == "out") {
         this.orderFormData.action = 'SC72197936495755';
@@ -1831,7 +1835,7 @@ export default {
     inputer.focus();
   },
   created() {
-    this.splitType = this.$route.query.splitType;
+    this.splitType = this.splitType;
     this.init();
     if (this.$route.query.workplaceId != null) {
       this.corpOrderIdDisabled = true