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>

      <div>
        <el-form :model="formData" class="order-el-form" ref="formData" label-width="120px">

          <el-col :span="12" style="margin-left: 0px">
              <span style="font-size: 14px;color: #909399">当前工位:&nbsp&nbsp&nbsp&nbsp<span
                style="font-size: 16px;color: #000000"
              >{{ this.formData.workplaceName }}</span>
              &nbsp&nbsp&nbsp&nbsp<el-button type="primary" icon="el-icon-sort" @click="toggleWorkplace"
                                             v-if="workPlaceClass == 2"
                                             style="margin-left: 10px;"
                >切换工位</el-button>
              </span>

            <span style="font-size: 14px;color: #909399;margin-left: 20px" v-if="workPlaceClass == 1">当前业务名称:&nbsp&nbsp&nbsp&nbsp<span
              style="font-size: 16px;color: #000000"
            >{{ this.formData.busName }}</span>
              &nbsp&nbsp&nbsp&nbsp <el-button type="primary" icon="el-icon-sort" @click="toggleBusType"
                                              style="margin-left: 10px;"
              >切换业务</el-button>
            </span>

          </el-col>

        </el-form>
      </div>

      <el-col :span="10" 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; 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">
        <el-menu
          :default-active="menuActive"
          class="el-menu-vertical-demo"
          style="width: 100%"
          unique-opened="true"
          @open="handleOpen"
        >

          <div v-if=" this.productType != 1">
            <el-menu-item :index=0 @click="clickMenuItem(0)" v-if="workPlaceClass == 1">

              <span slot="title">处理单据</span>
            </el-menu-item>
            <!--<el-menu-item :index=9 @click="clickMenuItem(9)" v-if="workPlaceClass == 1">-->

            <!--  <span slot="title">取药确认</span>-->
            <!--</el-menu-item>-->

            <el-menu-item :index=10 @click="clickMenuItem(10)" v-if="workPlaceClass == 1">

              <span slot="title">单据审核</span>
            </el-menu-item>

            <!--<el-menu-item :index=4 @click="clickMenuItem(4)" v-if="workPlaceClass == 1">-->

            <!--  <span slot="title">待处理单</span>-->
            <!--</el-menu-item>-->
            <!--<el-menu-item :index=11 @click="clickMenuItem(11)" v-if="workPlaceClass == 1">-->

            <!--  <span slot="title">单据校验</span>-->
            <!--</el-menu-item>-->
            <el-menu-item :index=5 @click="clickMenuItem(5)" v-if="workPlaceClass == 1">

              <span slot="title">已完成单</span>
            </el-menu-item>
            <el-menu-item :index=6 @click="clickMenuItem(6)" v-if="workPlaceClass == 1">

              <span slot="title">单据上传</span>
            </el-menu-item>


            <el-menu-item :index=1 @click="clickMenuItem(1)" v-if="workPlaceClass == 2 && jobMode == 0">

              <span slot="title">工位上货</span>
            </el-menu-item>
            <el-menu-item :index=15 @click="clickMenuItem(15)" v-if="workPlaceClass == 2 && jobMode == 1">

              <span slot="title">拆零上货</span>
            </el-menu-item>
            <el-menu-item :index=16 @click="clickMenuItem(16)" v-if="workPlaceClass == 2 && jobMode == 1">

              <span slot="title">整取上货</span>
            </el-menu-item>
            <!--<el-menu-item :index=13 @click="clickMenuItem(13)" v-if="workPlaceClass == 2">-->

            <!--  <span slot="title">工位剔除</span>-->
            <!--</el-menu-item>-->
            <el-menu-item :index=8 @click="clickMenuItem(8)" v-if="workPlaceClass == 2">

              <span slot="title">上货推荐</span>
            </el-menu-item>

            <el-menu-item :index=3 @click="clickMenuItem(3)" v-if="workPlaceClass == 2 || workPlaceClass == 1">

              <span slot="title">工位库存</span>
            </el-menu-item>

            <el-menu-item :index=17 @click="clickMenuItem(17)" v-if="workPlaceClass == 2">

              <span slot="title">库存预览</span>
            </el-menu-item>
            <el-menu-item :index=7 @click="clickMenuItem(7)" v-if="workPlaceClass == 2">

              <span slot="title">拆零管理</span>
            </el-menu-item>
            <el-menu-item :index=2 @click="clickMenuItem(2)" v-if="workPlaceClass == 2">

              <span slot="title">工位退货</span>
            </el-menu-item>
            <el-menu-item :index=12 @click="clickMenuItem(12)" v-if="workPlaceClass == 2">

              <span slot="title">上货记录</span>
            </el-menu-item>
<!--            <el-menu-item :index=14 @click="clickMenuItem(14)" v-if="workPlaceClass == 1">-->

<!--              <span slot="title">处理预验收</span>-->
<!--            </el-menu-item>-->


          </div>

          <div v-if=" this.productType == 1">


            <el-menu-item :index=10000 @click="clickMenuItem(10000)" v-if="workPlaceClass == 1">

              <span slot="title">处理单据</span>
            </el-menu-item>
            <el-menu-item :index=1000 @click="clickMenuItem(1000)" v-if="workPlaceClass == 1">

              <span slot="title">单据审核</span>
            </el-menu-item>
            <!--<el-menu-item :index=400 @click="clickMenuItem(400)" v-if="workPlaceClass == 1">-->

            <!--  <span slot="title">待处理单</span>-->
            <!--</el-menu-item>-->
            <el-menu-item :index=500 @click="clickMenuItem(500)" v-if="workPlaceClass == 1">

              <span slot="title">已完成单</span>
            </el-menu-item>
            <el-menu-item :index=600 @click="clickMenuItem(600)" v-if="workPlaceClass == 1">

              <span slot="title">单据上传</span>
            </el-menu-item>

            <el-menu-item :index=100 @click="clickMenuItem(100)" v-if="workPlaceClass == 2">

              <span slot="title">工位上货</span>
            </el-menu-item>
            <!--<el-menu-item :index=1300 @click="clickMenuItem(1300)" v-if="workPlaceClass == 2">-->

            <!--  <span slot="title">工位剔除</span>-->
            <!--</el-menu-item>-->
            <el-menu-item :index=800 @click="clickMenuItem(800)" v-if="workPlaceClass == 2">

              <span slot="title">上货推荐</span>
            </el-menu-item>

            <el-menu-item :index=300 @click="clickMenuItem(300)" v-if="workPlaceClass == 2 || workPlaceClass == 1">

              <span slot="title">工位库存</span>
            </el-menu-item>
            <el-menu-item :index=700 @click="clickMenuItem(700)" v-if="workPlaceClass == 2">

              <span slot="title">拆零管理</span>
            </el-menu-item>
            <el-menu-item :index=200 @click="clickMenuItem(200)" v-if="workPlaceClass == 2">

              <span slot="title">工位退货</span>
            </el-menu-item>
            <el-menu-item :index=1200 @click="clickMenuItem(1200)" v-if="workPlaceClass == 2">

              <span slot="title">上货记录</span>
            </el-menu-item>
            <el-menu-item :index=1400 @click="clickMenuItem(1400)" v-if="workPlaceClass == 1">

              <span slot="title">处理预验收</span>
            </el-menu-item>

          </div>

        </el-menu>
      </el-col>

      <el-col :span="22">
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
                 @tab-click="upodateMenuActive" @contextmenu.native.prevent="handleContextMenu"
        >
          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            @contextmenu.stop.prevent="handleTabContextMenu($event, item)"
            style="background-color: white"
          >
            <div>
              <component v-if="showChild" :is="item.component" v-bind="item.componentProps"
                         :reset-key="resetKeys[item.name]" @parent-method="parentMethod"
                         style="margin-top: -14px"
              />
            </div>
          </el-tab-pane>
        </el-tabs>

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


    <el-dialog
      title="选择业务类型"
      :visible.sync="selectBusTypeDisabled"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="selectBusTypeClosrrButDisabled"
      v-if="selectBusTypeDisabled"
      width="65%"
      append-to-body
    >
      <el-row :gutter="24">
        <el-col :span="24" style="display: flex; justify-content: flex-end;">
          <el-button @click="toggleContent" type="primary" style="margin-right: 20px;">
            <span v-if="!isContentVisible">查看更多业务类型</span>
            <span v-if="isContentVisible">查看常用业务类型</span>
            <i :class="{'el-icon-caret-right': !isContentVisible, 'el-icon-caret-bottom': isContentVisible}"> </i>
          </el-button>
        </el-col>
      </el-row>

      <el-row>

        <el-col v-for="(info, index)  in busTypeList" :key="index" :xs="12" :sm="8" :md="8" :lg="6">
          <el-card :body-style="{margin:'20px'}"
                   style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
          >

            <div
              style="display: flex; justify-content: space-between; align-items: center; height: 46px; /* 约为 200px 的 1/3 */"
              @click="selectBusType(info)"
            >
              <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.busName }}</p>
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"
            >
              <!-- 假设这里有一些信息内容 -->
              <p style="font-size: 14px;background-color: #e1f3fb" @click="selectBusType(info)">
                {{ info.remark }}</p>
              <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb"
                         @click="selectBusType(info)"
              >开始作业
              </el-button>

            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>


    <el-dialog
      title="选择作业工位"
      :visible.sync="selectWorkplaceeDisabled"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="selectBusTypeClosrrButDisabled"
      v-if="selectWorkplaceeDisabled"
      width="65%"
      append-to-body
    >

      <el-row>
        <el-col v-for="(info, index)  in curWorkPlaces" :key="index" :xs="12" :sm="8" :md="8" :lg="6">
          <el-card :body-style="{margin:'20px'}"
                   style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
          >

            <div
              style="display: flex; justify-content: space-between; align-items: center; height: 46px; /* 约为 200px 的 1/3 */"
              @click="selectWorkplace(info)"
            >
              <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.workplaceName }}</p>
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"
            >
              <!-- 假设这里有一些信息内容 -->
              <p style="font-size: 14px;background-color: #e1f3fb" @click="selectWorkplace(info)">
                {{ info.remark }}</p>
              <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb"
                         @click="selectWorkplace(info)"
              >开始作业
              </el-button>

            </div>


          </el-card>
        </el-col>
      </el-row>
    </el-dialog>

  </div>


</template>

<script>
import logoImg from '@/assets/logo/logo_dm.png'
import DealOrder from '@/views/collect/DealOrder.vue'
import DealOrderPre from '@/views/collect/DealOrderPre.vue'
import ConfirmDrugDealOrder from '@/views/collect/ConfirmDrugDealOrder.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 IoCreateOrderOutRecord from '@/views/collect/IoCreateOrderOutRecord.vue'
import ioSplitFifoCode from '@/views/collect/ioSplitFifoCode.vue'
import CollectOrderUpload from '@/views/collect/CollectOrderUpload.vue'
import IoDestroyOrder from '@/views/collect/IoDestroyOrder.vue'
import IoSplitFifoRemind from '@/views/collect/IoSplitFifoRemind.vue'
import IocCollectOrderCheckCode from '@/views/collect/IocCollectOrderCheckCode.vue'
import IocCollectOrderVerify from '@/views/collect/IocCollectOrderVerify.vue'
import IoSplitFifoRemove from '@/views/collect/IoSplitFifoRemove.vue'
import IoSplitCreateOrder from '@/views/collect/IoCreateOrder.vue'
import IoFullCreateOrder from '@/views/collect/IoCreateOrder.vue'
import IosplitFifoStock from '@/views/collect/IosplitFifoStock.vue'


// 导入器械相关工位上货页面
import DevicesIoCreateOrderOut from '@/views/collect/device/DevicesIoCreateOrder.vue'
import DevicesIoSplitFifoRemove from '@/views/collect/device/DevicesIoSplitFifoRemove.vue'
import DevicesIoSplitFifoRemind from '@/views/collect/device/DevicesIoSplitFifoRemind.vue'
import DevicesIoSplitFifoCode from '@/views/collect/device/DevicesIoSplitFifoCode.vue'
import DevicesIoDestroyOrder from '@/views/collect/device/DevicesIoDestroyOrder.vue'
import DevicesIoCreateOrderReturn from '@/views/collect/device/DevicesIoCreateOrder.vue'
import DevicesIoCreateOrderOutRecord from '@/views/collect/device/DevicesIoCreateOrderOutRecord.vue'
import DevicesDealOrderPre from '@/views/collect/device/DevicesDealOrderPre.vue'

import { listPage, switchWorkplaceStatus } from '@/api/basic/workPlace/sysWorkplaceManage'
import {
  filterListByWorkplace,
} from '@/api/basic/workPlace/sysWorkplaceDocuments'
import { EventBus } from '@/eventBus'

import DevicesDealOrder from '@/views/collect/device/DevicesDealOrder.vue'
import DevicesIocCollectOrderCheckCode from '@/views/collect/device/DevicesIocCollectOrderCheckCode.vue'
import DevicesCollectOrderAllot from '@/views/collect/device/DevicesCollectOrderAllot.vue'
import DevicesCollectOrderEnd from '@/views/collect/device/DevicesCollectOrderEnd.vue'
import DevicesCollectOrderUpload from '@/views/collect/device/DevicesCollectOrderUpload.vue'

export default {
  components: {
    DealOrder,
    DealOrderPre,
    ConfirmDrugDealOrder,
    IoCreateOrderReturn,
    IoCreateOrderOut,
    ioSplitFifoCode,
    CollectOrderAllot,
    CollectOrderEnd,
    CollectOrderUpload,
    IoDestroyOrder,
    IocCollectOrderCheckCode,
    IoCreateOrderOutRecord,
    IocCollectOrderVerify,
    IoSplitFifoRemove,
    IoSplitCreateOrder,
    IosplitFifoStock,

    //器械页面
    DevicesDealOrder,
    DevicesIocCollectOrderCheckCode,
    DevicesCollectOrderAllot,
    DevicesCollectOrderEnd,
    DevicesCollectOrderUpload,

    DevicesIoCreateOrderOut,
    DevicesIoSplitFifoRemove,
    DevicesIoSplitFifoRemind,
    DevicesIoSplitFifoCode,
    DevicesIoDestroyOrder,
    DevicesIoCreateOrderReturn,
    DevicesIoCreateOrderOutRecord,
    DevicesDealOrderPre

  },
  name: 'CollectOrderTabs',
  data() {
    return {
      isContentVisible: false, // 控制内容是否显示
      showContextMenu: false, // 控制上下文菜单的显示
      contextMenuPosition: { x: 0, y: 0 }, // 上下文菜单的位置
      selectWorkplaceClosrrButDisabled: false,
      selectWorkplaceeDisabled: false,
      selectBusTypeDisabled: false,
      selectBusTypeClosrrButDisabled: false,
      selectWorkplaceStatusDisabled: false,
      busQuery: {
        busKey: '',
        isPopular: 1,
        // userId : this.$store.getters.adminId,
        workplaceCode: null,
        page: 1,
        limit: 100
      },
      formData: {
        busName: null,
        workplaceName: null,
        workplaceStatus: null
      },
      curWorkPlaces: [],
      busTypeList: [],
      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',
            fifoSplitTag: 0
          }
        },
        {
          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: {}
        },
        {
          number: 8,
          title: '上货推荐',
          name: 'IoSplitFifoRemind',
          component: IoSplitFifoRemind,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 9,
          title: '取药确认',
          name: 'ConfirmDrugDealOrder',
          component: ConfirmDrugDealOrder,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 10,
          title: '单据审核',
          name: 'IocCollectOrderCheckCode',
          component: IocCollectOrderCheckCode,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 11,
          title: '单据校验',
          name: 'IocCollectOrderVerify',
          component: IocCollectOrderVerify,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 12,
          title: '上货记录',
          name: 'IoCreateOrderOutRecord',
          component: IoCreateOrderOutRecord,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 13,
          title: '工位剔除',
          name: 'IoSplitFifoRemove',
          component: IoSplitFifoRemove,
          // 假设你需要传递的参数
          componentProps: {
            message: ''
          }
        },
        {
          number: 14,
          title: '处理预验收',
          name: 'DealOrderPre',
          component: DealOrderPre,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 15,
          title: '拆零上货',
          name: 'IoSplitCreateOrder',
          component: IoSplitCreateOrder,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'out',
            fifoSplitTag: 1
          }
        },
        {
          number: 16,
          title: '整取上货',
          name: 'IoFullCreateOrder',
          component: IoFullCreateOrder,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'out',
            fifoSplitTag: 2
          }
        },
        {
          number: 17,
          title: '库存预览',
          name: 'IosplitFifoStock',
          component: IosplitFifoStock,
          // 假设你需要传递的参数
          componentProps: {
          }
        },

        //器械页面
        {
          number: 10000,
          title: '处理单据',
          name: 'DevicesDealOrder',
          component: DevicesDealOrder,
          // 假设你需要传递的参数
          componentProps: {
            // title: '这是单据的标题',
          }
        },
        {
          number: 1000,
          title: '单据审核',
          name: 'DevicesIocCollectOrderCheckCode',
          component: DevicesIocCollectOrderCheckCode,
          // 假设你需要传递的参数
          componentProps: {
            // title: '这是单据的标题',
          }
        },
        {
          number: 400,
          title: '待处理单',
          name: 'DevicesCollectOrderAllot',
          component: DevicesCollectOrderAllot,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 500,
          title: '已完成单',
          name: 'DevicesCollectOrderEnd',
          component: DevicesCollectOrderEnd,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 600,
          title: '单据上传',
          name: 'DevicesCollectOrderUpload',
          component: DevicesCollectOrderUpload,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 100,
          title: '工位上货',
          name: 'DevicesIoCreateOrderOut',
          component: DevicesIoCreateOrderOut,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'out',
            fifoSplitTag: 0
          }
        },
        {
          number: 1300,
          title: '工位剔除',
          name: 'DevicesIoSplitFifoRemove',
          component: DevicesIoSplitFifoRemove,
          // 假设你需要传递的参数
          componentProps: {
            message: ''
          }
        },
        {
          number: 800,
          title: '上货推荐',
          name: 'DevicesIoSplitFifoRemind',
          component: DevicesIoSplitFifoRemind,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 300,
          title: '工位库存',
          name: 'DevicesIoSplitFifoCode',
          component: DevicesIoSplitFifoCode,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 700,
          title: '拆零管理',
          name: 'DevicesIoDestroyOrder',
          component: DevicesIoDestroyOrder,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 200,
          title: '工位退货',
          name: 'DevicesIoCreateOrderReturn',
          component: DevicesIoCreateOrderReturn,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'return'
          }
        },
        {
          number: 1200,
          title: '上货记录',
          name: 'DevicesIoCreateOrderOutRecord',
          component: DevicesIoCreateOrderOutRecord,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 1400,
          title: '处理预验收',
          name: 'DevicesDealOrderPre',
          component: DevicesDealOrderPre,
          // 假设你需要传递的参数
          componentProps: {}
        }
      ],
      editableTabs: [{
        number: 0,
        title: '处理单据',
        name: 'DealOrder',
        component: DealOrder,
        // 假设你需要传递的参数
        componentProps: {
          // title: '这是单据的标题'
        }
      }
      ],
      tabIndex: 0,
      menuActive: 0,
      autoTag: 0,
      inAndOutType: 0,
      workPlaceClass: 1,
      resetKeys: {},
      sendData: '',
      //默认业务类型 为药品 sys_workplace_document
      productType: 2,
      //作业模式
      jobMode : 0,
    }
  },
  methods: {
    toggleContent() {
      // 切换isContentVisible的值
      this.isContentVisible = !this.isContentVisible
      //判断是否展开 展开 就查全部/折叠就是 常用的
      // todo 2024/09/09
      if (this.isContentVisible) {
        this.busQuery.isPopular = 0
      } else {
        this.busQuery.isPopular = 1
      }
      this.getWorkBindBusTypes(this.formData.workplaceId)
    },
    toggleWorkplaceStatus() {
      if (this.formData.workplaceStatus == 0) {
        this.formData.workplaceStatus = 1
      } else {
        this.formData.workplaceStatus = 0
      }
      switchWorkplaceStatus(this.formData).then(resp => {
        if (resp.code == 20000) {
          this.$message.success('切换成功!')

        } else {
          this.$message.error(resp.message)
          if (this.formData.workplaceStatus == 0) {
            this.formData.workplaceStatus = 1
          } else {
            this.formData.workplaceStatus = 0
          }
        }
      }).catch(() => {

      })
    },
    toggleBusType() {
      //隐藏下拉框内容
      // this.$refs.selectHeadEmpId.blur();

      //切换业务时 可以有关闭按钮展示
      this.selectBusTypeClosrrButDisabled = true
      this.selectBusTypeDisabled = true
    },
    toggleWorkplace() {
      //切换业务时 可以有关闭按钮展示
      this.selectWorkplaceClosrrButDisabled = true
      this.selectWorkplaceeDisabled = true
    },
    selectBusType(info) {
      let val = info.documentTypeCode
      this.formData.busType = val
      let newQuery = { ...this.$route.query }
      delete newQuery.billNo
      newQuery.busType = val
      this.$router.push({ query: newQuery, path: this.$route.path })
      this.formData.busName = info.busName
      this.autoTag = info.autoTag
      this.editableTabs = []
      if (this.productType == 2) {
        this.clickMenuItem(10)
      } else {
        this.clickMenuItem(1000)
      }

      this.showChild = false
      this.$nextTick(() => {
        this.showChild = true
      })

      this.selectBusTypeDisabled = false
      this.selectBusTypeClosrrButDisabled = false
    },
    selectWorkplace(info) {
      let val = info.workplaceId
      this.formData.workplaceId = val
      let newQuery = { ...this.$route.query }
      delete newQuery.billNo
      newQuery.workplaceId = val
      delete newQuery.workPlaceClass
      newQuery.workPlaceClass = info.workPlaceClass
      this.$router.push({ query: newQuery, path: this.$route.path })
      this.formData.workplaceName = info.workplaceName
      this.editableTabs = []

      if (this.productType == 2) {
        this.clickMenuItem(1)
      } else {
        this.clickMenuItem(100)
      }

      this.showChild = false
      this.$nextTick(() => {
        this.showChild = true
      })
      this.selectWorkplaceClosrrButDisabled = false
      this.selectWorkplaceeDisabled = false
      location.reload()
    },
    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())
        this.$store.commit('tabActive/SET_MENU_ACTIVE', foundTab.number)
      }
    },
    clickMenuItem(val) {
      //分两种 一种已存在 一种未存在
      let item = this.componentTables.find(tab => tab.number === val)
      if (val == 13 || val == 1300) {
        //如果是第一次 剔除页面没有创建 需要组件参数传递过去
        item.componentProps.message = this.sendData
      }
      const foundTab = this.findTabByName(item.name)
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.editableTabsValue = foundTab.name
        this.$set(this.resetKeys, foundTab.name, Date.now())
        this.menuActive = foundTab.number
        this.$store.commit('tabActive/SET_MENU_ACTIVE', foundTab.number)
        // 将消息传递给 foundTab
        if (val == 13 || val == 1300) {
          //tab格子已经被添加 剔除页面已经被创建 发送槽位编码过去
          EventBus.$emit('sendData', { message: this.sendData })
        }
      } 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
      this.$store.commit('tabActive/SET_MENU_ACTIVE', 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.$store.commit('tabActive/SET_MENU_ACTIVE', nextTab.number)
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    //获取当前货位
    findCurWorkPlaces(val) {
      let query = {
        key: val,
        status: 1,
        // invCode: this.formData.invCode,
        workPlaceClass: this.$route.query.workPlaceClass,
        page: 1,
        limit: 100
      }
      listPage(query).then((res) => {
        this.curWorkPlaces = res.data.list || []
        if (this.$route.query.workplaceId != null) {
          let item = this.curWorkPlaces.find(item => item.workplaceId == this.$route.query.workplaceId)
          this.formData.workplaceName = item.workplaceName
          this.formData.workplaceStatus = item.workplaceStatus
        } else if (this.curWorkPlaces.length == 1 && this.formData.workPlaceCode == null) {
          this.formData.workPlaceCode = this.curWorkPlaces[0].workplaceId
          // this.workPlaceCodeChange(this.formData.workPlaceCode)
        }
      })
    },
    getWorkBindBusTypes(workplaceId) {
      this.busQuery.workplaceCode = workplaceId
      filterListByWorkplace(this.busQuery).then(res => {
        if (res.code == 20000) {
          this.busTypeList = res.data.list
          this.busTypeTotal = res.data.total

          if (this.$route.query.busType != null) {
            this.formData.busType = this.$route.query.busType
            let busType = this.busTypeList.find(item => item.documentTypeCode == this.formData.busType)
            this.formData.busName = busType.busName
            this.autoTag = busType.autoTag
            this.inAndOutType = busType.inAndOutType
          } else if (this.busTypeList.length == 1) {
            this.formData.busType = this.busTypeList[0].documentTypeCode
            this.autoTag = this.busTypeList[0].autoTag
            this.inAndOutType = this.busTypeList[0].inAndOutType
            this.$router.push({
              query: { ...this.$route.query, busType: this.formData.busType },
              path: this.$route.path
            })
            this.selectBusTypeDisabled = false
            this.formData.busName = this.busTypeList.find(item => item.documentTypeCode == this.formData.busType).busName
          } else {
            this.selectBusTypeDisabled = true
            this.formData.busType = null
          }

          if (this.inAndOutType == 1) {
            if (this.productType == 2) {
              this.closeAllTabs()
              this.editableTabsValue = 'IocCollectOrderCheckCode'
              this.menuActive = 10
              this.editableTabs = [{
                number: 10,
                title: '单据审核',
                name: 'IocCollectOrderCheckCode',
                component: IocCollectOrderCheckCode,
                // 假设你需要传递的参数
                componentProps: {}
              }
              ]
            } else {
              this.closeAllTabs()
              this.editableTabsValue = 'DevicesIocCollectOrderCheckCode'
              this.menuActive = 1000
              this.editableTabs = [{
                number: 1000,
                title: '单据审核',
                name: 'DevicesIocCollectOrderCheckCode',
                component: DevicesIocCollectOrderCheckCode,
                // 假设你需要传递的参数
                componentProps: {}
              }
              ]
            }

          }

        }
        return
      })
    },

    handleContextMenu() {
      this.showContextMenu = true
    },
    handleTabContextMenu(event, tab) {
      this.showContextMenu = true
      // this.contextMenuTab = tab;
      // this.contextMenuPosition = { x: event.clientX, y: event.clientY };
    },

    closeContextMenu() {
      this.showContextMenu = false
      // this.contextMenuStyle.display = 'none'; // 隐藏上下文菜单
    },
    closeCurrentTab(index) {
      // 关闭当前标签页的逻辑
      this.editableTabs.splice(index, 1) // 假设这是关闭标签页的方式
      this.editableTabsValue = this.editableTabs.length > 0 ? this.editableTabs[0].name : ''
      this.closeContextMenu()
    },
    closeOtherTabs() {
      // 关闭其他标签页的逻辑
      // ...
      this.closeContextMenu()
    },
    closeAllTabs() {
      // 关闭所有标签页的逻辑
      this.editableTabs = []
      this.editableTabsValue = ''
      this.closeContextMenu()
    }

  },
  computed: {
    contextMenuPosition() {
      return {
        position: 'fixed', // 使用 fixed 定位确保它浮动在顶层
        left: `${this.contextMenuPosition.x}px`,
        top: `${this.contextMenuPosition.y}px`,
        zIndex: 1000 // 确保它在其他内容之上
        // 其他样式...
      }
    }
  },
  created() {
    this.workPlaceClass = this.$route.query.workPlaceClass
    this.productType = this.$route.query.productType
    this.jobMode = this.$route.query.jobMode
    if (this.workPlaceClass == 2) {
      this.closeAllTabs()
      if (this.productType == 2){
        if (this.jobMode == 0){
          this.editableTabsValue = 'IoCreateOrderOut'
          this.menuActive = 1,
            this.editableTabs = [{
              number: 1,
              title: '工位上货',
              name: 'IoCreateOrderOut',
              component: IoCreateOrderOut,
              // 假设你需要传递的参数
              componentProps: {
                fromSplitType: 'out',
                fifoSplitTag:0
              }
            }
            ]
        }
        if (this.jobMode == 1){
          this.editableTabsValue = 'IoSplitCreateOrder'
          this.menuActive = 15,
            this.editableTabs = [{
              number: 15,
              title: '拆零上货',
              name: 'IoSplitCreateOrder',
              component: IoSplitCreateOrder,
              // 假设你需要传递的参数
              componentProps: {
                fromSplitType: 'out',
                fifoSplitTag:1
              }
            }
            ]
        }

      }else if (this.productType == 1){
        this.editableTabsValue = 'DevicesIoCreateOrderOut'
        this.menuActive = 100,
          this.editableTabs = [{
            number: 100,
            title: '工位上货',
            name: 'DevicesIoCreateOrderOut',
            component: DevicesIoCreateOrderOut,
            // 假设你需要传递的参数
            componentProps: {
              fromSplitType: 'out',
              fifoSplitTag: 0
            }
          }
          ]
      }
    }else if (this.workPlaceClass == 1 && this.productType == 1 ) {
      this.closeAllTabs()
        this.editableTabsValue = 'DevicesDealOrder'
        this.menuActive = 10000,
          this.editableTabs = [{
            number: 10000,
            title: '处理单据',
            name: 'DevicesDealOrder',
            component: DevicesDealOrder,
            // 假设你需要传递的参数
            componentProps: {
              // title: '这是单据的标题',
            }
          }
          ]
    }


    this.findCurWorkPlaces(this.$route.query.workplaceId)
    if (this.$route.query.workplaceId != null) {
      this.isLinkDisabled = true
      this.formData.workPlaceCode = Number(this.$route.query.workplaceId)
      this.formData.workplaceId = Number(this.$route.query.workplaceId)
      if (this.workPlaceClass == 1) {
        this.getWorkBindBusTypes(this.formData.workPlaceCode)
      } else if (this.workPlaceClass == 2) {
        this.busQuery.workplaceCode = this.formData.workPlaceCode
        filterListByWorkplace(this.busQuery).then(res => {
          if (res.code == 20000) {
            this.busTypeList = res.data.list
            this.busTypeTotal = res.data.total
          }
          return
        })
      }
    }
  },
  mounted() {
    EventBus.$on('update-data', (data) => {
      //接受上货页面 传递过来的 槽位编码
      this.sendData = data.message
    })
  },
  beforeDestroy() {
    EventBus.$off('update-data')
  }
}
</script>

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

.context-menu {
  zIndex: 100000;
  position: fixed;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  /* 其他样式... */
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
  /* 其他样式... */
}

.context-menu li:hover {
  background-color: #e1e1e1;
}

.rounded-box {
  border-radius: 10px;
  background-color: #f8f9fa; /* 浅灰色背景，可选 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选，添加阴影以增加立体感 */
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
}


</style>