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-item :index=6 @click="clickMenuItem(6)">
          <i class="el-icon-s-claim"></i>
          <span slot="title">单据上传</span>
        </el-menu-item>
        <el-menu-item :index=7 @click="clickMenuItem(7)">
          <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  v-if="showChild" :is="item.component" v-bind="item.componentProps" :reset-key="resetKeys[item.name]" @parent-method="parentMethod"/>
          </el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import logoImg from '@/assets/logo/logo_dm.png'
import DealOrder from '@/views/collect/DealOrder.vue'
import CollectOrderAllot from '@/views/collect/CollectOrderAllot.vue'
import CollectOrderEnd from '@/views/collect/CollectOrderEnd.vue'
import IoCreateOrderReturn from '@/views/collect/IoCreateOrder.vue'
import IoCreateOrderOut from '@/views/collect/IoCreateOrder.vue'
import ioSplitFifoCode from '@/views/collect/ioSplitFifoCode.vue'
import CollectOrderUpload from '@/views/collect/CollectOrderUpload.vue'
import IoDestroyOrder from '@/views/collect/IoDestroyOrder.vue'

export default {
  components: {
    DealOrder,
    IoCreateOrderReturn,
    IoCreateOrderOut,
    ioSplitFifoCode,
    CollectOrderAllot,
    CollectOrderEnd,
    CollectOrderUpload,
    IoDestroyOrder
  },
  name: 'CollectOrderTabs',
  data() {
    return {
      logo: logoImg,
      isLinkDisabled: false,
      showChild: true,
      userInfo: {
        inv: this.$store.getters.locInvName,
        deptName: this.$store.getters.locDeptName,
        userName: this.$store.getters.user.employeeName,
        companyName: this.$store.getters.companyName
      },
      tabPosition: 'left',
      editableTabsValue: 'DealOrder',
      componentTables: [
        {
          number: 0,
          title: '处理单据',
          name: 'DealOrder',
          component: DealOrder,
          // 假设你需要传递的参数
          componentProps: {
            title: '这是单据的标题',
          }
        },
        {
          number: 1,
          title: '工位上货',
          name: 'IoCreateOrderOut',
          component: IoCreateOrderOut,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'out'
          }
        },
        {
          number: 2,
          title: '工位退货',
          name: 'IoCreateOrderReturn',
          component: IoCreateOrderReturn,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'return'
          }
        },
        {
          number: 3,
          title: '工位存量',
          name: 'ioSplitFifoCode',
          component: ioSplitFifoCode,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 4,
          title: '待处理单',
          name: 'CollectOrderAllot',
          component: CollectOrderAllot,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 5,
          title: '已完成单',
          name: 'CollectOrderEnd',
          component: CollectOrderEnd,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 6,
          title: '单据上传',
          name: 'CollectOrderUpload',
          component: CollectOrderUpload,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 7,
          title: '损耗出库',
          name: 'IoDestroyOrder',
          component: IoDestroyOrder,
          // 假设你需要传递的参数
          componentProps: {}
        }],
      editableTabs: [{
        number: 0,
        title: '处理单据',
        name: 'DealOrder',
        component: DealOrder,
        // 假设你需要传递的参数
        componentProps: {
          title: '这是单据的标题'
        }
      }
      ],
      tabIndex: 0,
      menuActive: 0,
      resetKeys:{}
    }
  },
  methods: {
    parentMethod(data) {
      const foundTab = this.findAllTabByName(data)
      this.clickMenuItem(foundTab.number)
      this.showChild = false;
      this.$nextTick(() => {
        this.showChild = true;
      });
    },
    upodateMenuActive(tab, event) {
      const foundTab = this.findTabByName(tab.name)
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.menuActive = foundTab.number
        this.$set(this.resetKeys, foundTab.name, Date.now());
      }
    },
    clickMenuItem(val) {
      //分两种 一种已存在 一种未存在
      let item = this.componentTables[(val)]
      const foundTab = this.findTabByName(item.name)
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.editableTabsValue = foundTab.name
        this.$set(this.resetKeys, foundTab.name, Date.now());
        this.menuActive = foundTab.number
      } else {
        // 如果没有找到，执行其他操作
        this.addTab(item)
      }

    },
    findTabByName(name) {
      // 使用find方法找到ID等于tabId的对象
      const tab = this.editableTabs.find(tab => tab.name === name)
      // 如果找到了，返回该对象；否则返回undefined
      return tab
    },
    findAllTabByName(name) {
      // 使用find方法找到ID等于tabId的对象
      const tab = this.componentTables.find(tab => tab.name === name)
      // 如果找到了，返回该对象；否则返回undefined
      return tab
    },
    addTab(item) {
      ++this.tabIndex
      this.editableTabs.push(item)
      this.editableTabsValue = item.name
      this.menuActive = item.number
    },
    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>