update

src/components/base/tabs/index.less

@@ -1,5 +1,5 @@
 .app-tabs {
-    display       : flex;
+    display: flex;
     flex-direction: column;
 
     &--top,
@@ -18,14 +18,14 @@
     }
 
     &--right {
-        flex-direction : row;
-        flex-flow      : row-reverse;
+        flex-direction: row;
+        flex-flow: row-reverse;
         justify-content: left;
     }
 
     &__navbar {
-        display        : flex;
-        align-items    : center;
+        display: flex;
+        align-items: center;
         justify-content: space-between;
 
         .tabs {
@@ -36,10 +36,14 @@
     }
 
     &__container {
-        position      : relative;
-        flex          : 1;
-        overflow-y    : auto;
-        display       : flex;
+        position: relative;
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
         flex-direction: column;
+
+        &:empty {
+            display: none;
+        }
     }
 }

src/packages/pc/assets/themes/default/default.less

@@ -75,10 +75,13 @@
             display: flex;
             align-items: center;
             background-color: #fff;
-            border-top: 1px solid #f2f2f2;
             box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .1);
             padding: 8px 20px 0 20px;
 
+            &:empty {
+                display: none;
+            }
+
             .tabs {
                 &-item {
                     height: 40px;

src/packages/pc/components/layouts/main/index.less

@@ -1,32 +0,0 @@
-.app-main {
-    flex      : 1;
-    overflow-y: auto;
-
-    &__scrollbar {
-        height: auto;
-    }
-
-    &__container {
-        height: 100%;
-    }
-
-    &__teleport {
-        position  : absolute;
-        z-index   : 9;
-        left      : 0;
-        top       : 0;
-        width     : 100%;
-        height    : 100%;
-        overflow-y: auto;
-
-        /* teleport 为空时隐藏元素 */
-        &:empty {
-            display: none;
-        }
-
-        /* teleport 非空时隐藏兄弟元素 */
-        &:not(:empty)+.el-scrollbar {
-            opacity: 0;
-        }
-    }
-}

src/packages/pc/components/layouts/main/index.vue

@@ -1,41 +1,11 @@
 <template>
-    <app-tabs class="app-main" prop-label="title" :data-list="secondMenus" v-model:data-index="dataIndex"
-        @change="onTabChange">
-        <div id="appMainTeleport" class="app-main__teleport"></div>
-        <el-scrollbar class="app-main__scrollbar" view-class="app-main__container" always>
-            <!-- 二级路由 -->
-            <router-view v-slot="{ Component, route }">
-                <component :is="Component" :key="route.fullPath" />
-            </router-view>
-        </el-scrollbar>
-    </app-tabs>
+    <el-scrollbar always>
+        <!-- 二级路由 -->
+        <router-view v-slot="{ Component, route }">
+            <component :is="Component" :key="route.fullPath" />
+        </router-view>
+    </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
-import { useMenu } from '@/hooks/menu'
-import AppTabs from '@/components/base/tabs/index.vue'
-
-const { route, router, getChildrenMenus } = useMenu()
-const parentRoute = route.matched[route.matched.length - 2] // 父级路由信息
-const secondMenus = shallowRef<Ermcp.UserMenu[]>([]) // 二级菜单
-const dataIndex = shallowRef(0) // 选中的标签
-
-if (parentRoute) {
-    const menus = getChildrenMenus(parentRoute.name?.toString())
-    const index = menus.findIndex((e) => e.code === route.name)
-    secondMenus.value = menus
-    if (index > -1) {
-        dataIndex.value = index
-    }
-}
-
-// 切换标签
-const onTabChange = (index: number, { code }: Ermcp.UserMenu) => {
-    router.push({ name: code })
-}
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/pc/components/layouts/page/index.less

@@ -1,30 +1,31 @@
 .app-page {
     display: flex;
-    height : 100%;
+    height: 100%;
 
     &__sidebar {
-        height                    : 100%;
-        overflow-y                : auto;
+        height: 100%;
+        overflow-y: auto;
         -webkit-overflow-scrolling: touch;
     }
 
     &__wrapper {
-        flex            : 1;
-        display         : flex;
-        flex-direction  : column;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
         background-color: #e7ebed;
-        overflow        : hidden;
+        overflow: hidden;
     }
 
     &__wrapper &__header {
         background-color: #fff;
+        border-bottom: 1px solid #f2f2f2;
 
         .icon-fold-expand {
             margin-right: 10px;
 
             [class^='g-icon']::before {
                 font-size: 20px;
-                cursor   : pointer;
+                cursor: pointer;
             }
 
             .g-icon--expand::before {
@@ -37,11 +38,9 @@
         }
     }
 
-    &__wrapper &__main {
-        flex          : 1;
-        display       : flex;
-        flex-direction: column;
-        overflow      : hidden;
+    &__wrapper &__tabs {
+        flex: 1;
+        overflow: hidden;
     }
 
     /* teleport 为空时隐藏元素 */
@@ -57,13 +56,13 @@
     .view-enter-from,
     .view-leave-to {
         transform: translateX(20px);
-        opacity  : 0;
+        opacity: 0;
     }
 
     .view-enter-active,
     .view-leave-active {
         pointer-events: none;
-        will-change   : opacity, transform;
-        transition    : opacity 200ms, transform 200ms;
+        will-change: opacity, transform;
+        transition: opacity 200ms, transform 200ms;
     }
 }

src/packages/pc/components/layouts/page/index.vue

@@ -13,12 +13,13 @@
           </template>
         </app-header>
       </div>
-      <div id="appPageTeleport" class="app-page__main app-page__teleport"></div>
-      <div class="app-page__main">
+      <app-tabs class="app-page__tabs" prop-label="title" :data-list="secondMenus" v-model:data-index="dataIndex"
+        @change="onTabChange">
+        <div id="appPageTeleport" class="app-page__main app-page__teleport"></div>
         <router-view v-slot="{ Component, route }">
-          <component :is="Component" :key="route.fullPath" />
+          <component class="app-page__main" :is="Component" :key="route.fullPath" />
         </router-view>
-      </div>
+      </app-tabs>
       <div class="app-page__footer">
         <app-footer />
       </div>
@@ -27,13 +28,38 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { shallowRef, computed, watch } from 'vue'
+import { useMenu } from '@/hooks/menu'
 import client from '@/utils/client'
+import AppTabs from '@/components/base/tabs/index.vue'
 import AppHeader from '../header/index.vue'
 import AppFooter from '../footer/index.vue'
 import AppSidebar from '../sidebar/index.vue'
 
-const isCollapse = ref(client.state.isMobile)
+const { route, router, getChildrenMenus } = useMenu()
+const dataIndex = shallowRef(0) // 选中的标签
+const isCollapse = shallowRef(client.state.isMobile)
+
+// 二级菜单
+const secondMenus = computed<Ermcp.UserMenu[]>(() => {
+  const parentRoute = route.matched[route.matched.length - 2] // 父级路由信息
+  console.log(parentRoute.name)
+  return parentRoute ? getChildrenMenus(parentRoute.name?.toString()) : []
+})
+
+// 切换标签
+const onTabChange = (index: number, { code }: Ermcp.UserMenu) => {
+  router.push({ name: code })
+}
+
+watch(secondMenus, (menus) => {
+  const index = menus.findIndex((e) => e.code === route.name)
+  if (index > -1) {
+    dataIndex.value = index
+  }
+}, {
+  immediate: true
+})
 </script>
 
 <style lang="less">

src/packages/pc/views/order/main/components/details/index.vue

@@ -1,6 +1,6 @@
 <!-- 订单管理-详情 -->
 <template>
-    <teleport to="#appMainTeleport">
+    <teleport :to="teleportTo">
         <app-view class="app-details" v-bind="$attrs">
             <template #header>
                 <div>
@@ -28,7 +28,7 @@
                     {{ (value * 100).toFixed(1) }}
                 </template>
                 <template #isauto="{ value }">
-                    {{ value ? '是' : '否'}}
+                    {{ value ? '是' : '否' }}
                 </template>
                 <!-- 启动类型 -->
                 <template #steplanchtype="{ value }">
@@ -51,6 +51,10 @@ import AppTable from '@pc/components/base/table/index.vue'
 
 const props = defineProps({
     code: String,
+    teleportTo: {
+        type: String,
+        default: '#appPageTeleport'
+    },
     selectedRow: {
         type: Object as PropType<Ermcp.MyPerformancRsp>,
         default: () => ({})

src/packages/pc/views/trade/buy/components/details/index.vue

@@ -40,7 +40,7 @@ import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vu
 const props = defineProps({
     code: String,
     teleportTo: {
-        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
+        type: String,
         default: '#appPageTeleport'
     },
     selectedRow: {

src/packages/pc/views/trade/delisting/components/details/index.vue

@@ -12,52 +12,54 @@
                         <tbody>
                             <tr>
                                 <td>成交单号</td>
-                                <td>{{selectedRow.wrtradedetailid}}</td>
+                                <td>{{ selectedRow.wrtradedetailid }}</td>
                             </tr>
                             <tr>
                                 <td>商品编号</td>
-                                <td>{{selectedRow.goodsno}}</td>
+                                <td>{{ selectedRow.goodsno }}</td>
                             </tr>
                             <tr>
                                 <td>方向</td>
-                                <td>{{buyorsell}}</td>
+                                <td>{{ buyorsell }}</td>
                             </tr>
                             <tr>
                                 <td>资金账号</td>
-                                <td>{{buyorsell === BuyOrSell.Buy ? selectedRow.buyaccountid :
-                                selectedRow.sellaccountid}}</td>
+                                <td>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buyaccountid :
+                                        selectedRow.sellaccountid
+                                }}</td>
                             </tr>
                             <tr>
                                 <td>对手方</td>
-                                <td>{{selectedRow.matchusername}}</td>
+                                <td>{{ selectedRow.matchusername }}</td>
                             </tr>
                             <tr>
                                 <td>成交价格</td>
-                                <td>{{selectedRow.tradeprice}}</td>
+                                <td>{{ selectedRow.tradeprice }}</td>
                             </tr>
                             <tr>
                                 <td>手续费</td>
-                                <td>{{buyorsell === BuyOrSell.Buy ? selectedRow.buychargevalue :
-                                selectedRow.sellchargevalue}}</td>
+                                <td>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buychargevalue :
+                                        selectedRow.sellchargevalue
+                                }}</td>
                             </tr>
                             <tr>
                                 <td>汇率</td>
-                                <td>{{selectedRow.exchangerate}}</td>
+                                <td>{{ selectedRow.exchangerate }}</td>
                             </tr>
                             <tr>
                                 <td>成交时间</td>
-                                <td>{{selectedRow.tradetime}}</td>
+                                <td>{{ selectedRow.tradetime }}</td>
                             </tr>
                             <tr>
                                 <td>履约计划</td>
-                                <td>{{selectedRow.performanceplanid}}</td>
+                                <td>{{ selectedRow.performanceplanid }}</td>
                             </tr>
                             <tr>
                                 <td>履约规则</td>
                                 <td>
                                     <ul>
-                                        <li v-for="(item,index) in dataList" :key="index">
-                                            {{item.steptypename}}
+                                        <li v-for="(item, index) in dataList" :key="index">
+                                            {{ item.steptypename }}
                                         </li>
                                     </ul>
                                 </td>
@@ -77,7 +79,7 @@ import { usePerformancePlanStep } from '@/business/order'
 
 const props = defineProps({
     teleportTo: {
-        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
+        type: String,
         default: '#appPageTeleport'
     },
     buyorsell: {

src/packages/pc/views/trade/purchase/components/details/index.vue

@@ -12,7 +12,7 @@
                         <tbody>
                             <tr>
                                 <td>委托单号</td>
-                                <td>{{selectedRow.wrtradeorderid}}</td>
+                                <td>{{ selectedRow.wrtradeorderid }}</td>
                             </tr>
                             <tr>
                                 <td>买方</td>
@@ -20,43 +20,43 @@
                             </tr>
                             <tr>
                                 <td>钻石分类</td>
-                                <td>{{selectedRow.zscategorydisplay}}</td>
+                                <td>{{ selectedRow.zscategorydisplay }}</td>
                             </tr>
                             <tr>
                                 <td>货币类型</td>
-                                <td>{{selectedRow.zscurrencytypedisplay}}</td>
+                                <td>{{ selectedRow.zscurrencytypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>尺寸</td>
-                                <td>{{selectedRow.zssize}}</td>
+                                <td>{{ selectedRow.zssize }}</td>
                             </tr>
                             <tr>
                                 <td>形状</td>
-                                <td>{{selectedRow.zsshapetypedisplay}}</td>
+                                <td>{{ selectedRow.zsshapetypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>切工</td>
-                                <td>{{selectedRow.zscuttypedisplay}}</td>
+                                <td>{{ selectedRow.zscuttypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>颜色</td>
-                                <td>{{selectedRow.zscolortypedisplay}}</td>
+                                <td>{{ selectedRow.zscolortypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>抛光</td>
-                                <td>{{selectedRow.zspolishtypedisplay}}</td>
+                                <td>{{ selectedRow.zspolishtypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>净度</td>
-                                <td>{{selectedRow.zsclaritytypedisplay}}</td>
+                                <td>{{ selectedRow.zsclaritytypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>对称</td>
-                                <td>{{selectedRow.zssymmetrytypedisplay}}</td>
+                                <td>{{ selectedRow.zssymmetrytypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>荧光</td>
-                                <td>{{selectedRow.zsfluorescencetypedisplay}}</td>
+                                <td>{{ selectedRow.zsfluorescencetypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>履约规则</td>
@@ -67,7 +67,7 @@
                             </tr>
                             <tr>
                                 <td>备注</td>
-                                <td>{{selectedRow.remark}}</td>
+                                <td>{{ selectedRow.remark }}</td>
                             </tr>
                         </tbody>
                     </table>
@@ -101,7 +101,7 @@ import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vu
 
 const props = defineProps({
     teleportTo: {
-        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
+        type: String,
         default: '#appPageTeleport'
     },
     selectedRow: {

src/packages/pc/views/trade/sale/components/details/index.vue

@@ -12,43 +12,43 @@
                         <tbody>
                             <tr>
                                 <td>委托单号</td>
-                                <td>{{selectedRow.wrtradeorderid}}</td>
+                                <td>{{ selectedRow.wrtradeorderid }}</td>
                             </tr>
                             <tr>
                                 <td>委托时间</td>
-                                <td>{{selectedRow.ordertime}}</td>
+                                <td>{{ selectedRow.ordertime }}</td>
                             </tr>
                             <tr>
                                 <td>冻结保证金</td>
-                                <td>{{selectedRow.freezemargin}}</td>
+                                <td>{{ selectedRow.freezemargin }}</td>
                             </tr>
                             <tr>
                                 <td>解冻保证金</td>
-                                <td>{{selectedRow.unfreezemargin}}</td>
+                                <td>{{ selectedRow.unfreezemargin }}</td>
                             </tr>
                             <tr>
                                 <td>委托状态</td>
-                                <td>{{selectedRow.wrtradeorderstatus}}</td>
+                                <td>{{ selectedRow.wrtradeorderstatus }}</td>
                             </tr>
                             <tr>
                                 <td>商品编号</td>
-                                <td>{{selectedRow.goodsno}}</td>
+                                <td>{{ selectedRow.goodsno }}</td>
                             </tr>
                             <tr>
                                 <td>资金账号</td>
-                                <td>{{selectedRow.accountid}}</td>
+                                <td>{{ selectedRow.accountid }}</td>
                             </tr>
                             <tr>
                                 <td>冻结手续费</td>
-                                <td>{{selectedRow.freezecharge}}</td>
+                                <td>{{ selectedRow.freezecharge }}</td>
                             </tr>
                             <tr>
                                 <td>解冻手续费</td>
-                                <td>{{selectedRow.unfreezecharge}}</td>
+                                <td>{{ selectedRow.unfreezecharge }}</td>
                             </tr>
                             <tr>
                                 <td>汇率</td>
-                                <td>{{selectedRow.exchangerate}}</td>
+                                <td>{{ selectedRow.exchangerate }}</td>
                             </tr>
                             <tr>
                                 <td>履约规则</td>
@@ -89,7 +89,7 @@ import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vu
 
 const props = defineProps({
     teleportTo: {
-        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
+        type: String,
         default: '#appPageTeleport'
     },
     selectedRow: {

src/packages/pc/views/warehousing/goods/components/details/index.vue

@@ -19,16 +19,16 @@
 
                     </div>
                     <div class="info">
-                        <h1>【{{details.zscategorydisplay}}】 商品编号 {{details.goodsno}}</h1>
+                        <h1>【{{ details.zscategorydisplay }}】 商品编号 {{ details.goodsno }}</h1>
                         <table>
                             <tbody>
                                 <tr>
                                     <td>商品备注</td>
-                                    <td>{{details.remark}}</td>
+                                    <td>{{ details.remark }}</td>
                                 </tr>
                                 <tr>
                                     <td>克拉重量</td>
-                                    <td>{{details.weight}}克拉</td>
+                                    <td>{{ details.weight }}克拉</td>
                                 </tr>
                                 <tr>
                                     <td>价格</td>
@@ -44,21 +44,22 @@
                                     </td>
                                 </tr>
                                 <tr v-if="details.zscurrencytype !== CurrencyType.CNY">
-                                    <td>{{exchangeRate(details.zscurrencytype,details.price)}}</td>
-                                    <td>汇率:{{getExrate(details.zscurrencytype)}}</td>
+                                    <td>{{ exchangeRate(details.zscurrencytype, details.price) }}</td>
+                                    <td>汇率:{{ getExrate(details.zscurrencytype) }}</td>
                                 </tr>
                                 <tr>
                                     <td>卖家名称</td>
-                                    <td>{{details.sellusername}}</td>
+                                    <td>{{ details.sellusername }}</td>
                                 </tr>
                                 <tr>
                                     <td>联系电话</td>
-                                    <td>{{details.mobile}}</td>
+                                    <td>{{ details.mobile }}</td>
                                 </tr>
                                 <tr>
                                     <td>仓库地址</td>
-                                    <td>{{[details.provincename, details.cityname, details.districtname,
-                                    details.address].join(' ')}}</td>
+                                    <td>{{ [details.provincename, details.cityname, details.districtname,
+                                        details.address].join(' ')
+                                    }}</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -74,43 +75,43 @@
                         <tbody>
                             <tr>
                                 <td>形状</td>
-                                <td>{{details.zsshapetypedisplay}}</td>
+                                <td>{{ details.zsshapetypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>颜色</td>
-                                <td>{{details.zscolortype1display}}</td>
+                                <td>{{ details.zscolortype1display }}</td>
                             </tr>
                             <tr>
                                 <td>净度</td>
-                                <td>{{details.zsclaritytype1display}}</td>
+                                <td>{{ details.zsclaritytype1display }}</td>
                             </tr>
                             <tr>
                                 <td>切工</td>
-                                <td>{{details.zscuttype1display}}</td>
+                                <td>{{ details.zscuttype1display }}</td>
                             </tr>
                             <tr>
                                 <td>对称度</td>
-                                <td>{{details.zssymmetrytype1display}}</td>
+                                <td>{{ details.zssymmetrytype1display }}</td>
                             </tr>
                             <tr>
                                 <td>抛光度</td>
-                                <td>{{details.zspolishtype1display}}</td>
+                                <td>{{ details.zspolishtype1display }}</td>
                             </tr>
                             <tr>
                                 <td>荧光</td>
-                                <td>{{details.zsfluorescencetype1display}}</td>
+                                <td>{{ details.zsfluorescencetype1display }}</td>
                             </tr>
                             <tr>
                                 <td>尺寸</td>
-                                <td>{{details.sizedisplay}}</td>
+                                <td>{{ details.sizedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>证书类型</td>
-                                <td>{{details.zscerttypedisplay}}</td>
+                                <td>{{ details.zscerttypedisplay }}</td>
                             </tr>
                             <tr>
                                 <td>证书编号</td>
-                                <td>{{details.cerno}}</td>
+                                <td>{{ details.cerno }}</td>
                             </tr>
                         </tbody>
                     </table>
@@ -139,7 +140,7 @@ const componentMap = new Map<string, unknown>([
 
 const props = defineProps({
     teleportTo: {
-        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
+        type: String,
         default: '#appPageTeleport'
     },
     selectedRow: {