Merge pull request #124 from Tencent/feat/tab-router

Feat/tab router

Author: uyarn

package.json

@@ -24,7 +24,7 @@
     "nprogress": "^0.2.0",
     "qrcode.vue": "^1.7.0",
     "tdesign-icons-vue": "~0.0.8",
-    "tdesign-vue": "~0.41.0",
+    "tdesign-vue": "~0.41.5",
     "tvision-color": "~1.3.0",
     "typescript": "^4.2.4",
     "vue": "^2.6.11",

src/layouts/index.tsx

@@ -173,8 +173,9 @@ export default Vue.extend({
     renderContent(): VNode {
       const { showBreadcrumb } = this.setting;
       const { showFooter } = this;
+
       return (
-        <t-layout class={[`${prefix}-layout`]}>
+        <t-layout class={[`${prefix}-layout`]} key={this.$route.name}>
           {this.isUseTabsRouter && (
             <t-tabs
               theme="card"

src/pages/form/base/index.vue

@@ -15,7 +15,7 @@
         <!-- 表单内容 -->
 
         <!-- 合同名称,合同类型 -->
-        <t-row class="row-gap" :gutter="[16, 0]">
+        <t-row class="row-gap" :gutter="[16, 24]">
           <t-col :span="6">
             <t-form-item label="合同名称" name="name">
               <t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />

src/pages/list/base/index.vue

@@ -15,7 +15,6 @@
       </t-row>
 
       <div class="table-container">
-        <!-- 如果开启多标签tab页 请修改offsetTop的配置 -->
         <t-table
           :columns="columns"
           :data="data"
@@ -29,7 +28,7 @@
           @change="rehandleChange"
           @select-change="rehandleSelectChange"
           :headerAffixedTop="true"
-          :headerAffixProps="{ offsetTop: 0, container: getContainer }"
+          :headerAffixProps="{ offsetTop: offsetTop, container: getContainer }"
         >
           <template #status="{ row }">
             <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">审核失败</t-tag>
@@ -163,6 +162,9 @@ export default Vue.extend({
       }
       return '';
     },
+    offsetTop() {
+      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
+    },
   },
   mounted() {
     this.dataLoading = true;

src/pages/list/components/CommonTable.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="list-common-table">
-    <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
+    <t-form
+      ref="form"
+      :data="formData"
+      :label-width="80"
+      colon
+      @reset="onReset"
+      @submit="onSubmit"
+      :style="{ marginBottom: '8px' }"
+    >
       <t-row>
         <t-col :span="10">
-          <t-row :gutter="[16]">
+          <t-row :gutter="[16, 24]">
             <t-col :flex="1">
               <t-form-item label="合同名称" name="name">
                 <t-input
@@ -55,7 +63,6 @@
       </t-row>
     </t-form>
     <div class="table-container">
-      <!-- 如果开启多标签tab页 请修改offsetTop的配置 -->
       <t-table
         :data="data"
         :columns="columns"
@@ -67,7 +74,7 @@
         @change="rehandleChange"
         :loading="dataLoading"
         :headerAffixedTop="true"
-        :headerAffixProps="{ offsetTop: 0, container: getContainer }"
+        :headerAffixProps="{ offsetTop, container: getContainer }"
       >
         <template #status="{ row }">
           <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">审核失败</t-tag>
@@ -206,6 +213,9 @@ export default {
       }
       return '';
     },
+    offsetTop() {
+      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
+    },
   },
   mounted() {
     this.dataLoading = true;

src/store/modules/tab-router.ts

@@ -12,36 +12,52 @@ export type TTabRouterType = {
   tabRouterList: Array<TRouterInfo>;
 };
 
+const homeRoute: Array<TRouterInfo> = [
+  {
+    path: '/dashboard/base',
+    routeIdx: 0,
+    title: '仪表盘',
+    name: 'DashboardBase',
+    isHome: true,
+  },
+];
+
 const state: TTabRouterType = {
-  tabRouterList: [{ path: '/dashboard/base', routeIdx: 0, name: 'DashboardBase', title: '仪表盘', isHome: true }],
+  tabRouterList: homeRoute,
   isRefreshing: false,
 };
 
 const mutations = {
+  // 处理刷新
   toggleTabRouterAlive(state: TTabRouterType, routeIdx: number) {
     state.isRefreshing = !state.isRefreshing;
     state.tabRouterList[routeIdx].isAlive = !state.tabRouterList[routeIdx].isAlive;
   },
+  // 处理新增
   appendTabRouterList(state: TTabRouterType, newRoute: TRouterInfo) {
     if (!state.tabRouterList.find((route: TRouterInfo) => route.path === newRoute.path))
       // eslint-disable-next-line no-param-reassign
       state.tabRouterList = state.tabRouterList.concat(newRoute);
   },
+  // 处理关闭当前
   subtractCurrentTabRouter(state: TTabRouterType, newRoute: TRouterInfo) {
     const { routeIdx } = newRoute;
     state.tabRouterList = state.tabRouterList.slice(0, routeIdx).concat(state.tabRouterList.slice(routeIdx + 1));
   },
+  // 处理关闭右侧
   subtractTabRouterBehind(state: TTabRouterType, newRoute: TRouterInfo) {
     const { routeIdx } = newRoute;
     state.tabRouterList = state.tabRouterList.slice(0, routeIdx + 1);
   },
+  // 处理关闭左侧
   subtractTabRouterAhead(state: TTabRouterType, newRoute: TRouterInfo) {
     const { routeIdx } = newRoute;
-    state.tabRouterList = state.tabRouterList.slice(routeIdx);
+    state.tabRouterList = homeRoute.concat(state.tabRouterList.slice(routeIdx));
   },
+  // 处理关闭其他
   subtractTabRouterOther(state: TTabRouterType, newRoute: TRouterInfo) {
     const { routeIdx } = newRoute;
-    state.tabRouterList = [state.tabRouterList?.[routeIdx]];
+    state.tabRouterList = homeRoute.concat([state.tabRouterList?.[routeIdx]]);
   },
   removeTabRouterList() {
     state.tabRouterList = [];