1

src/components/table2/index.vue

@@ -1,44 +1,96 @@
 <template>
   <div class="table2">
+    <div
+      :class="isStatus || isStatuser ? 'flex' : 'flex-end'"
+      class="data-table-btn"
+    >
+      <div v-if="isStatus || isStatuser" class="vStatus">
+        <slot name="header" />
+      </div>
+      <template v-if="isBtn">
+        <template v-if="isAuth">
+          <el-button size="small" plain type="primary" @click="handleAdd"
+            >新增</el-button
+          >
+        </template>
+      </template>
+    </div>
     <el-auto-resizer>
       <template #default="{ height, width }">
-        <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" fixed />
+        <el-table-v2
+          :columns="columns"
+          :data="data"
+          :width="width"
+          :height="height"
+          fixed
+        />
       </template>
     </el-auto-resizer>
   </div>
 </template>
 
 <script setup lang="ts">
-const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+const props = defineProps({
+  //是否显示新增按钮
+  isBtn: {
+    type: Boolean,
+    default: true,
+  },
+  //是否启用权限按钮
+  isAuth: {
+    type: Boolean,
+    default: false,
+  },
+  //是否显示状态
+  isStatus: {
+    type: Boolean,
+    default: false,
+  },
+  //是否显示名称
+  isStatuser: {
+    type: Boolean,
+    default: false,
+  },
+});
+const generateColumns = (length = 10, prefix = "column-", props?: any) =>
   Array.from({ length }).map((_, columnIndex) => ({
     ...props,
     key: `${prefix}${columnIndex}`,
     dataKey: `${prefix}${columnIndex}`,
     title: `Column ${columnIndex}`,
-    width: 150
-  }))
+    width: 150,
+  }));
 
-const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = "row-"
+) =>
   Array.from({ length }).map((_, rowIndex) => {
     return columns.reduce(
       (rowData, column, columnIndex) => {
-        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
-        return rowData
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
+        return rowData;
       },
       {
         id: `${prefix}${rowIndex}`,
-        parentId: null
+        parentId: null,
       }
-    )
-  })
+    );
+  });
 
-const columns = generateColumns(10)
-const data = generateData(columns, 200)
+const columns = generateColumns(10);
+const data = generateData(columns, 200);
 </script>
 
 <style lang="scss" scoped>
 .table2 {
   padding: 20px;
   height: 100%;
+  .data-table-btn {
+    margin-top: 13px;
+    line-height: 32px;
+    margin-bottom: 20px;
+  }
 }
-</style>
+</style>

src/router/index.ts

@@ -1,43 +1,44 @@
-import { createRouter, createWebHashHistory, Router } from 'vue-router'
-import Layout from '@/layout'
-import { RouterTy } from '~/router'
-import routesOne from './routes/routes-file-one'
-import routesTwo from './routes/routes-file-two'
+import { createRouter, createWebHashHistory, Router } from "vue-router";
+import Layout from "@/layout";
+import { RouterTy } from "~/router";
+import routesOne from "./routes/routes-file-one";
+import routesTwo from "./routes/routes-file-two";
+import routesThree from "./routes/routes-file-three";
 const routesPush = (arr, routes) => {
-  if (!Array.isArray(arr)) return '请传入数组格式路由表'
+  if (!Array.isArray(arr)) return "请传入数组格式路由表";
   for (let i = 0; i < arr.length; i++) {
-    routes.push(arr[i])
+    routes.push(arr[i]);
   }
-}
+};
 
 export const constantRoutes: RouterTy = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect"),
+      },
+    ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login/Login.vue'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/login/Login.vue"),
+    hidden: true,
   },
   {
-    path: '/404',
-    component: () => import('@/views/error-page/404.vue'),
-    hidden: true
+    path: "/404",
+    component: () => import("@/views/error-page/404.vue"),
+    hidden: true,
   },
   {
-    path: '/401',
-    component: () => import('@/views/error-page/401.vue'),
-    hidden: true
-  }
-]
+    path: "/401",
+    component: () => import("@/views/error-page/401.vue"),
+    hidden: true,
+  },
+];
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
@@ -45,17 +46,17 @@ export const constantRoutes: RouterTy = [
 export const asyncRoutes: RouterTy = [
   // 404 page must be placed at the end !!!
   // using pathMatch install of "*" in vue-router 4.0
-  { path: '/:pathMatch(.*)', redirect: '/404', hidden: true }
-]
+  { path: "/:pathMatch(.*)", redirect: "/404", hidden: true },
+];
 
 // 插入路由
-routesPush([...routesOne, ...routesTwo], asyncRoutes)
+routesPush([...routesOne, ...routesTwo, ...routesThree], asyncRoutes);
 
 const router: Router = createRouter({
   history: createWebHashHistory(),
   scrollBehavior: () => ({ top: 0 }),
-  routes: constantRoutes
-})
+  routes: constantRoutes,
+});
 
 // export function resetRouter() {
 //   const newRouter = createRouter({
@@ -65,4 +66,4 @@ const router: Router = createRouter({
 //   })
 // }
 
-export default router
+export default router;

src/router/routes/routes-file-three.ts

@@ -0,0 +1,25 @@
+import Layout from "@/layout";
+
+const HomeRoutes = {
+  path: "/BasicsData",
+  component: Layout,
+  children: [
+    {
+      path: "/BasicsData",
+      name: "BasicsData",
+      component: () => import("@/views/BasicsData/index.vue"),
+      //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
+      meta: { title: "航司信息维护", elSvgIcon: "Fold" },
+      children: [
+        {
+          path: "/BasicsData",
+          name: "BasicsData",
+          component: () =>
+            import("@/views/BasicsData/airlineCompany/index.vue"),
+        },
+      ],
+    },
+  ],
+};
+
+export default [HomeRoutes];

src/styles/index.scss

@@ -1,8 +1,8 @@
-@import './variables.scss';
-@import './transition.scss';
-@import './scss-suger.scss';
-@import './reset-style.scss';
-@import './elemenet-style-overflow.scss';
+@import "./variables.scss";
+@import "./transition.scss";
+@import "./scss-suger.scss";
+@import "./reset-style.scss";
+@import "./elemenet-style-overflow.scss";
 
 //scroll
 @mixin main-show-wh() {
@@ -85,7 +85,7 @@
       background: #eb2f3b;
       border-radius: 50%;
       margin-right: 15px;
-      background: url('@/assets/status/ic_close_hint.png') no-repeat;
+      background: url("@/assets/status/ic_close_hint.png") no-repeat;
       background-size: 100% 100%;
       display: inline-block;
       position: relative;
@@ -117,3 +117,17 @@
   //   margin-left: 0px;
   // }
 }
+.flex-wrap {
+  display: flex;
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

src/views/BasicsData/airlineCompany/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="airportInfo">
+    <div class="wrap">
+      <DataTable :is-auth="true" :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">航司信息维护</div>
+          </div>
+        </template>
+      </DataTable>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import DataTable from "@/components/table2/index.vue";
+
+export default defineComponent({
+  components: {
+    DataTable,
+  },
+  setup() {},
+});
+</script>
+<style lang="scss" scoped>
+.airportInfo {
+}
+</style>

src/views/BasicsData/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>