홈 탐색 도움말
로그인
luojigou_h5
/
xiaodou-ai-admin
3
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

feat: table pro

lvkun996 3 년 전
부모
763af168c8
커밋
619b10120c
16개의 변경된 파일과 242개의 추가작업 그리고 36개의 파일을 삭제
분할 보기 변경상태 보기
  1. 2 1
      .eslintrc.js
  2. 1 1
      public/index.html
  3. 1 1
      src/components/ModalPro/index.vue
  4. 18 0
      src/components/PagePro/index.vue
  5. 102 0
      src/components/SiderPro/index.vue
  6. 52 4
      src/components/TablePro/index.vue
  7. 13 12
      src/layout/layout.vue
  8. 2 0
      src/layout/navbar.vue
  9. 10 3
      src/layout/sider.vue
  10. 1 1
      src/main.ts
  11. 19 3
      src/pages/Dashboard/index.vue
  12. 3 1
      src/pages/Iot/index.vue
  13. 9 0
      src/pages/Visual/index.vue
  14. 5 9
      src/router/index.ts
  15. 0 0
      src/styles/theme.less
  16. 4 0
      src/utils/UsePro.ts

+ 2 - 1
.eslintrc.js
파일 보기 

@@ -18,6 +18,7 @@ module.exports = {
 
     '@typescript-eslint/no-var-requires': 0,
 
     'arrow-body-style': ['off'],
 
     'no-return-assign': 'off',
 
-    'func-call-spacing': 'off'
 
+    'func-call-spacing': 'off',
 
+    '@typescript-eslint/ban-types': 'off'
 
   }
 
 }

+ 1 - 1
public/index.html
파일 보기 

@@ -5,7 +5,7 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="logo.ico">
 
-    <title>蛟龙云联</title>
 
+    <title>7788</title>
 
   </head>
 
   <body>
 
     <noscript>

+ 1 - 1
src/components/ModalPro/index.vue
파일 보기 

@@ -5,12 +5,12 @@
 
     @ok="handleOk"
 
     @cancel="close"
 
     :closable="false"
 
-    :confirmLoading="state.confirmLoading"
 
     v-bind="{
 
       cancelText: '取消',
 
       okText: '确定',
 
       ...propsState
 
     }"
 
+    :confirmLoading="state.confirmLoading"
 
   >
 
     <template #title>
 
       <div ref="modalTitleRef" style="width: 100%; cursor: move">{{propsState.label || 'model'}}</div>

+ 18 - 0
src/components/PagePro/index.vue
파일 보기 

@@ -0,0 +1,18 @@
 
+<template>
 
+  <a-row>
 
+    <a-col><sider-pro /></a-col>
 
+    <a-col><slot></slot></a-col>
 
+  </a-row>
 
+</template>
 
+
 
+<script setup lang="ts"  >
 
+
 
+export interface PagePro {
 
+  openSiderPro: boolean
 
+}
 
+
 
+</script>
 
+
 
+<style lang="less" scoped >
 
+
 
+</style>

+ 102 - 0
src/components/SiderPro/index.vue
파일 보기 

@@ -0,0 +1,102 @@
 
+<template>
 
+  <a-row class="sider-pro"  >
 
+    <a-col class="sider-pro-title" ><div class="title" >{{props.title}}</div></a-col>
 
+    <a-col
 
+      class="sider-pro-item"
 
+      v-for="item in props.siders"
 
+      :key="item.title"
 
+      @click="changeSider(item)"
 
+    >
 
+      <div :class="['title', state.active == item.title ? 'active' : '']" >{{item.title}}</div>
 
+    </a-col>
 
+  </a-row>
 
+</template>
 
+
 
+<script lang="ts" setup name="SiderPro" >
 
+import { reactive } from 'vue'
 
+
 
+export interface SiderItemProps {
 
+  title: string,
 
+  children: Partial<SiderItemProps>[],
 
+  link: string
 
+}
 
+
 
+export interface SiderProProps {
 
+  title: string,
 
+  siders: Partial<SiderItemProps>[]
 
+}
 
+
 
+const initProps: Partial<SiderProProps> = {
 
+  title: '云服务器列表',
 
+  siders: [
 
+    { title: '总览' },
 
+    { title: '事件' }
 
+  ]
 
+}
 
+
 
+const props = initProps
 
+
 
+const state = reactive({
 
+  active: '总览'
 
+})
 
+
 
+const changeSider = (records: SiderItemProps) => state.active = records.title
 
+
 
+</script>
 
+
 
+<style lang="less" scoped >
 
+.sider-pro {
 
+  width: 188px;
 
+  height: 100%;
 
+  background-color: #fff;
 
+  border-left: 1px solid #c3c5ca;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: flex-start;
 
+  align-items: center;
 
+  overflow: hidden;
 
+  overflow-y: scroll;
 
+  // scrollbar-width: none;
 
+  scrollbar-width: 0;
 
+  /* Firefox */
 
+  -ms-overflow-style: none;
 
+  .sider-pro-title {
 
+    width: 100%;
 
+    height: 51px;
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    margin-bottom: 8px;
 
+    .title {
 
+      width: calc(100% - 40px);
 
+      height: 100%;
 
+      border-bottom: 1px solid #c3c5ca;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      font-size: 16px;
 
+    }
 
+  }
 
+  .sider-pro-item {
 
+    width: 100%;
 
+    height: 38px;
 
+    display: flex;
 
+    justify-content: flex-start;
 
+    align-items: center;
 
+    padding: 0 20px;
 
+    box-sizing: border-box;
 
+    cursor: pointer;
 
+    .title {
 
+      padding-left: 8px;
 
+      box-sizing: border-box;
 
+      border-left: 1px solid transparent;
 
+    }
 
+    .active {
 
+      border-left: 1px solid #5e7ce0;
 
+      color: #526eec;
 
+      box-sizing: border-box;
 
+    }
 
+  }
 
+}
 
+</style>

+ 52 - 4
src/components/TablePro/index.vue
파일 보기 

@@ -1,16 +1,64 @@
 
 <template>
 
-  <a-table>
 
-
 
-  </a-table>
 
+  <a-table
 
+    style="width: 100%;"
 
+    v-bind="{...props}"
 
+    :dataSource="state.data"
 
+    :loading="state.loading"
 
+    :pagination="state.pagination"
 
+    @change="handleTableChange"
 
+  />
 
 </template>
 
 
 <script lang="ts" setup >
 
 import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
 
+import { onMounted, reactive, watch } from 'vue'
 
 
 export interface TablePropPorps extends TableProps {
 
-  column: string
 
+  request: (params: any) => any
 
+  params: any
 
+}
 
+
 
+const props = defineProps<TablePropPorps>()
 
+
 
+const state = reactive({
 
+  loading: false,
 
+  data: [],
 
+  pagination: {
 
+    current: 1,
 
+    total: 0,
 
+    pageSize: 10
 
+  }
 
+})
 
+
 
+const handleTableChange = (pag: { pageSize: number; current: number }) => {
 
+  state.pagination = {
 
+    ...state.pagination,
 
+    pageSize: pag.pageSize,
 
+    current: pag.current
 
+  }
 
 }
 
 
+const request = async () => {
 
+  state.loading = true
 
+  const data = await props.request(props.params)
 
+  state.loading = false
 
+  console.log(data)
 
+  state.data = data
 
+}
 
+
 
+watch(
 
+  () => props.request,
 
+  () => request(),
 
+  {
 
+    deep: true,
 
+    immediate: true
 
+  }
 
+)
 
+
 
+onMounted(() => {
 
+
 
+})
 
+
 
 </script>
 
 
 <style>

+ 13 - 12
src/layout/layout.vue
파일 보기 

@@ -1,17 +1,18 @@
 
 <template>
 
     <a-layout class="a-layout" >
 
-        <Navbar />
 
-        <a-layout>
 
-        <Sider :router="silders" />
 
-        <a-layout style="padding: 0 24px 24px">
 
-          <Breadcrumb />
 
-            <a-layout-content
 
-            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
 
-            >
 
-              <RouterView></RouterView>
 
-            </a-layout-content>
 
-        </a-layout>
 
-        </a-layout>
 
+      <Navbar />
 
+      <a-layout>
 
+      <Sider :router="silders" />
 
+
 
+      <a-layout style="padding: 0 24px 24px; margin-top: 20px;">
 
+        <Breadcrumb />
 
+          <a-layout-content
 
+          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
 
+          >
 
+            <RouterView></RouterView>
 
+          </a-layout-content>
 
+      </a-layout>
 
+      </a-layout>
 
   </a-layout>
 
 </template>

+ 2 - 0
src/layout/navbar.vue
파일 보기 

@@ -45,6 +45,8 @@ const changeRouter = (path: string) => appRouter.changeNavbar(path)
 
 
 <style lang="less" scoped >
 
 .header {
 
+  position: relative;
 
+  z-index: 2;
 
   // width: 100vw;
 
   // display: flex;
 
   // height: 50px;

+ 10 - 3
src/layout/sider.vue
파일 보기 

@@ -11,13 +11,14 @@
 
             @breakpoint="onBreakpoint"
 
         >
 
          <a-menu
 
-            v-model:selectedKeys="selectedKeys2"
 
+            :selectedKeys="selectedKeys2"
 
             v-model:openKeys="openKeys"
 
             mode="inline"
 
             :style="{ height: '100%', borderRight: 0 }"
 
             >
 
+
 
             <template v-for="item in appRouter.router.sider.route" :key="item.path">
 
-              <a-sub-menu  v-if="item.children" :key="item.path">
 
+              <a-sub-menu  v-if="item.children" :key="item.path" >
 
                 <template #title>
 
                   <user-outlined />
 
                   <span>
 
@@ -28,7 +29,8 @@
 
                   <user-outlined />{{_.name}}
 
                 </a-menu-item>
 
               </a-sub-menu>
 
-              <a-menu-item v-else @click="changeRoute(item)" >
 
+              <!-- v-if="!item.children"  :key="item.path" -->
 
+              <a-menu-item v-if="!item.children"  :key="item.path"  @click="changeRoute(item)" >
 
                 <user-outlined />
 
                 <span>{{item.name}}</span>
 
               </a-menu-item>
 
@@ -62,6 +64,8 @@ const selectedKeys2 = ref<string[]>([appRouter.router.sider!.selectPath])
 
 const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)
 
 
 emitter.on(Emitter.NAVBAR, () => {
 
+  console.log('[appRouter.router.sider!.selectPath]:', [appRouter.router.sider!.selectPath])
 
+
 
   selectedKeys2.value = [appRouter.router.sider!.selectPath]
 
   openKeys.value = appRouter.router.sider!.openKeys
 
 })
 
@@ -80,6 +84,9 @@ const changeRoute = (route: Router.RoutesProps) => {
 
   display: flex;
 
   justify-content: center;
 
   align-items: center;
 
+}
 
 
+/deep/ .ant-layout-sider-children {
 
+  margin-top: -4px;
 
 }
 
 </style>

+ 1 - 1
src/main.ts
파일 보기 

@@ -3,7 +3,7 @@ import App from './App.vue'
 
 import router from './router'
 
 import '@/router/before'
 
 import { createPinia } from 'pinia'
 
-import antd, { ConfigProvider } from 'ant-design-vue'
 
+import antd from 'ant-design-vue'
 
 import 'ant-design-vue/dist/antd.css'
 
 import UsePro from './utils/UsePro'

+ 19 - 3
src/pages/Dashboard/index.vue
파일 보기 

@@ -1,11 +1,27 @@
 
 <template>
 
-  <div class="Dashboard" >
 
-    Dashboard
 
-  </div>
 
+  <a-row>
 
+    <a-col> <sider-pro /></a-col>
 
+    <a-col> <div class="Dashboard" >2233</div></a-col>
 
+    <a-col :span="10" >
 
+      <table-pro
 
+        :params="{a: 123, b: 456}"
 
+        :request="getFn"
 
+      />
 
+    </a-col>
 
+  </a-row>
 
 </template>
 
 
 <script lang="ts" setup >
 
 
+const getFn = (params) => {
 
+  console.log('params:', params)
 
+  return new Promise(resolve => {
 
+    setTimeout(() => {
 
+      resolve([])
 
+    }, 2000)
 
+  })
 
+}
 
+
 
 </script>
 
 
 <style lang="less" scoped >

+ 3 - 1
src/pages/Iot/index.vue
파일 보기 

@@ -1,5 +1,7 @@
 
 <template>
 
+
 
   <div class="iot" >
 
+
 
     <a-button type="primary"  @click="openModal" >上传背景</a-button>
 
     <modal-pro
 
       :visible="state.visible"
 
@@ -15,7 +17,7 @@
 
 import { reactive } from 'vue'
 
 
 const state = reactive({
 
-  visible: true
 
+  visible: false
 
 })
 
 
 const openModal = () => {

+ 9 - 0
src/pages/Visual/index.vue
파일 보기 

@@ -0,0 +1,9 @@
 
+<template>
 
+  <div class="Visual" >
 
+    Visual
 
+  </div>
 
+</template>
 
+
 
+<script setup lang="ts" >
 
+
 
+</script>

+ 5 - 9
src/router/index.ts
파일 보기 

@@ -6,11 +6,13 @@ const routes: Array<ROUTER.RoutesProps> = [
 
     name: '首页',
 
     title: '首页',
 
     component: () => import('@/layout/layout.vue'),
 
+    redirect: '/dashboard',
 
     children: [
 
       {
 
         path: '/dashboard',
 
         name: '仪表盘',
 
         component: () => import('@/pages/Dashboard/index.vue'),
 
+        redirect: '/dashboard-item',
 
         children: [
 
           {
 
             path: '/dashboard-item',
 
@@ -26,18 +28,12 @@ const routes: Array<ROUTER.RoutesProps> = [
 
     name: '视觉平台',
 
     title: '视觉平台',
 
     component: () => import('@/layout/layout.vue'),
 
+    redirect: '/visual-dashboard',
 
     children: [
 
       {
 
         path: '/visual-dashboard',
 
-        name: '仪表盘',
 
-        component: () => import('@/pages/Dashboard/index.vue'),
 
-        children: [
 
-          {
 
-            path: '/visual-dashboard-item',
 
-            name: '仪表盘item',
 
-            component: () => import('@/pages/Dashboard/index.vue')
 
-          }
 
-        ]
 
+        name: '视觉平台仪表盘',
 
+        component: () => import('@/pages/Visual/index.vue')
 
       }
 
     ]
 
   },

+ 0 - 0
src/styles/theme.less
파일 보기


+ 4 - 0
src/utils/UsePro.ts
파일 보기 

@@ -1,6 +1,10 @@
 
 import ModalPro from '@/components/ModalPro/index.vue'
 
+import SiderPro from '@/components/SiderPro/index.vue'
 
+import TablePro from '@/components/TablePro/index.vue'
 
 import { App } from 'vue'
 
 
 export default function (app: App) {
 
   app.component('modal-pro', ModalPro)
 
+  app.component('sider-pro', SiderPro)
 
+  app.component('table-pro', TablePro)
 
 }