udiwms-vue-frame/src/views/collect/CollectOrderTabs.vue

<template>
<div>
  <el-row :gutter="0" v-if="isLinkDisabled" style="margin-top: 15px">
    <el-col :span="2" align="left">
      <img v-if="logo" :src="logo" class="sidebar-logo"/>
    </el-col>
    <el-col :span="22" align="right" style="margin-top: 10px">
      <div class="inv-hos-title">
            <span
              style="margin: 10px;color: #2d8cf0;font-size: 14px;"
            >部门&nbsp:&nbsp{{ this.userInfo.deptName }}</span>

        <span style="font-weight: 500;color:rgb(51 48 48); font-size: 14px;">用户&nbsp:&nbsp
          <!--            {{-->
          <!--              this.userInfo.companyName-->
          <!--            }}-->
          </span>
        <span
          style="font-weight: 500;color:rgb(51 48 48); font-size: 14px; margin-right: 20px"
        >&nbsp&nbsp&nbsp&nbsp(用户&nbsp:&nbsp{{
            this.userInfo.userName
          }})</span>
      </div>
    </el-col>
  </el-row>

  <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-edit-outline"></i>
          <span slot="title">处理单据</span>
        </el-menu-item>
        <el-menu-item :index=1 @click="clickMenuItem(1)">
          <i class="el-icon-s-unfold"></i>
          <span slot="title">工位上货</span>
        </el-menu-item>
        <el-menu-item :index=2 @click="clickMenuItem(2)">
          <i class="el-icon-s-fold"></i>
          <span slot="title">工位退货</span>
        </el-menu-item>
        <el-menu-item :index=3 @click="clickMenuItem(3)">
          <i class="el-icon-s-platform"></i>
          <span slot="title">工位存量</span>
        </el-menu-item>
        <el-menu-item :index=4 @click="clickMenuItem(4)">
          <i class="el-icon-s-order"></i>
          <span slot="title">待处理单</span>
        </el-menu-item>
        <el-menu-item :index=5 @click="clickMenuItem(5)">
          <i class="el-icon-s-claim"></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>

  </div>
</template>

<script>
import logoImg from '@/assets/logo/logo_dm.png'
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 {
      logo: logoImg,
      isLinkDisabled: false,
      userInfo: {
        inv: this.$store.getters.locInvName,
        deptName: this.$store.getters.locDeptName,
        userName: this.$store.getters.name,
        companyName: this.$store.getters.companyName
      },
      tabPosition: 'left',
      editableTabsValue: 'DealOrderBlank',
      componentTables: [
        {
          number: 0,
          title: '处理单据',
          name: 'DealOrderBlank',
          component: DealOrderBlank,
          // 假设你需要传递的参数
          componentProps: {
            title: '这是单据的标题'
          }
        },
        {
          number: 1,
          title: '工位上货',
          name: 'IoCreateOrderBlankOut',
          component: IoCreateOrderBlankOut,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'out'
          }
        },
        {
          number: 2,
          title: '工位退货',
          name: 'IoCreateOrderBlankReturn',
          component: IoCreateOrderBlankReturn,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'return'
          }
        },
        {
          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)
    }
  },
  created() {
    if (this.$route.query.workplaceId != null) {
      this.isLinkDisabled = true
    }
  }
}
</script>

<style scoped>
.sidebar-logo {
  width: 80px;
  height: 60px;
  vertical-align: middle;
  margin-left: 25px;
}
</style>