#3992

src/@next/components/base/tab-component/index.vue

@@ -2,14 +2,15 @@
     <div class="mtp-tab-component">
         <component :is="currentTabComponent.component" :name="currentTabComponent.code" v-bind="options"
             v-if="currentTabComponent" />
-        <mtp-tabbar class="mtp-tabbar--bottom" :data-source="dynamicComponents" label="title" @change="componentChange">
-            <slot name="tabbar"></slot>
+        <mtp-tabbar class="mtp-tabbar--bottom" :data-source="tabs" v-model:selectedIndex="tabIndex" label="title"
+            @change="componentChange">
+            <slot></slot>
         </mtp-tabbar>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed, PropType, ref, toRaw } from 'vue'
 import { useDynamicComponent } from '@/@next/hooks/common'
 import MtpTabbar from '@/@next/components/base/tabbar/index.vue'
 
@@ -20,12 +21,33 @@ export default defineComponent({
     props: {
         code: String,
         options: Object,
+        filters: {
+            type: Array as PropType<string[]>,
+            default: () => ([])
+        }
     },
     setup(props) {
         const { dynamicComponents, currentTabComponent, componentChange } = useDynamicComponent(props.code);
+        const tabIndex = ref(0);
+
+        const tabs = computed(() => {
+            const data = dynamicComponents.value;
+            const result = data.filter((e) => !props.filters.includes(e.code));
+
+            if (result.length) {
+                currentTabComponent.value = toRaw(data[0]);
+                tabIndex.value = 0;
+            } else {
+                currentTabComponent.value = undefined;
+                tabIndex.value = -1;
+            }
+
+            return result;
+        })
 
         return {
-            dynamicComponents,
+            tabs,
+            tabIndex,
             currentTabComponent,
             componentChange,
         }

src/@next/components/base/tabbar/index.vue

@@ -2,7 +2,8 @@
 <template>
   <div class="mtp-tabbar">
     <ul class="tabs" v-if="dataSource.length">
-      <li :class="['tabs-item', dataIndex === index && 'active']" v-for="(item,index) in dataSource" :key="index" @click="onChange(index)">
+      <li :class="['tabs-item', dataIndex === index && 'active']" v-for="(item, index) in dataSource" :key="index"
+        @click="onChange(index)">
         {{ label ? item[label] : '标签' + index }}
       </li>
     </ul>

src/@next/hooks/common/index.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent, shallowRef, Ref } from 'vue'
+import { defineAsyncComponent, shallowRef, ref, Ref, toRaw } from 'vue'
 import { OperationTabMenu, OperationTabMenuAuth } from '@/services/go/commonService/interface'
 import { initData } from '@/common/methods'
 import { useRoute } from 'vue-router'
@@ -85,9 +85,9 @@ export function useMenu() {
  */
 export function useDynamicComponent(menucode?: string) {
     const { getChildrenMenu } = useMenu();
-    const dynamicComponents: DynamicComponent[] = [];
-    const currentAuth: BtnListType[] = []; // 当前操作权限
+    const dynamicComponents = ref<DynamicComponent[]>([]);
     const currentTabComponent = shallowRef<DynamicComponent>(); // 当前选中的子组件
+    const currentAuth: BtnListType[] = []; // 当前操作权限
 
     // 处理动态组件
     const parseComponent = (items: OperationTabMenu[]) => {
@@ -130,7 +130,7 @@ export function useDynamicComponent(menucode?: string) {
 
     // 切换组件
     const componentChange = (component: DynamicComponent) => {
-        currentTabComponent.value = component;
+        currentTabComponent.value = toRaw(component);
     }
 
     initData(() => {
@@ -149,7 +149,7 @@ export function useDynamicComponent(menucode?: string) {
             }
             if (children) {
                 const components = parseComponent(children);
-                dynamicComponents.push(...components);
+                dynamicComponents.value.push(...components);
                 if (components.length) {
                     currentTabComponent.value = components[0];
                 }

src/views/hedgeditem/trade/running/index.vue

@@ -45,14 +45,14 @@
             </a-table>
         </template>
     </mtp-table-scroll>
-    <mtp-tab-component class="table-detail" :options="{ selectedRow }" />
+    <mtp-tab-component class="table-detail" :options="{ selectedRow }" :filters="tabFilters" />
     <component :is="componentId" v-if="componentId" v-bind="{ selectedRow }" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
 import { computed, ref, onBeforeUnmount } from 'vue'
 import { queryTableList, MtpTableButton, defineAsyncComponent, defineComponent, handleComposeTable } from '@/common/export/commonTable'
-import { getHedgedTypeName } from '@/@next/constants/enum/hedgedType'
+import { getHedgedTypeName, HedgedType } from '@/@next/constants/enum/hedgedType'
 import { Ermcp8RunningHedgeditemReq, Ermcp2HedgedItemRsp, HedgedItemMiddleGoodsList } from '@/services/go/ermcp/hedgedItem/interface'
 import { queryErmcp8RunningHedgeditem } from '@/services/go/ermcp/hedgedItem'
 import { useMenu } from '@/@next/hooks/common'
@@ -134,6 +134,15 @@ export default defineComponent({
             tableName: 'table_pcweb_hedgeditem_trade_running',
         })
 
+        // 过滤标签
+        const tabFilters = computed(() => {
+            const row = composeTable.selectedRow.value
+            if (row && row.hedgedtype === HedgedType.Spot) {
+                return ['hedgeditem_trade_running_plan'];
+            }
+            return [];
+        })
+
         const dataList = computed(() => {
             const result: (Ermcp2HedgedItemRsp & HedgedItemMiddleGoodsList)[] = [];
             tableList.value.forEach((item) => {
@@ -205,6 +214,7 @@ export default defineComponent({
             loading,
             dataList,
             headerButtons,
+            tabFilters,
             tableButtons,
             second,
             counter,