.env.build_prod

@@ -2,4 +2,4 @@
 NODE_ENV = 'production'
 
 # 打包模式连生产服
-VUE_APP_BASE_API = '/api-prod'
+VUE_APP_BASE_API = '/api-prod'

.env.dev_prod

@@ -3,4 +3,4 @@ NODE_ENV = 'development'
 
 # 开发模式连生产服
 VUE_APP_BASE_API = '/api-prod'
-VUE_APP_COOKIE = ''
+VUE_APP_COOKIE = ''

auto-imports.d.ts

@@ -3,5 +3,4 @@ export {}
 declare global {
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const ElNotification: typeof import('element-plus/es')['ElNotification']
 }

components.d.ts

@@ -13,15 +13,14 @@ declare module '@vue/runtime-core' {
     DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default']
     Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
     EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -36,9 +35,9 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
@@ -53,6 +52,8 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default']
     GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default']
     Hamburger: typeof import('./src/components/Hamburger/index.vue')['default']

src/icons/svg/component.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h54.857v54.857H0V0zm0 73.143h54.857V128H0V73.143zm73.143 0H128V128H73.143V73.143zm27.428-18.286C115.72 54.857 128 42.577 128 27.43 128 12.28 115.72 0 100.571 0 85.423 0 73.143 12.28 73.143 27.429c0 15.148 12.28 27.428 27.428 27.428z"/></svg>
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h54.857v54.857H0V0zm0 73.143h54.857V128H0V73.143zm73.143 0H128V128H73.143V73.143zm27.428-18.286C115.72 54.857 128 42.577 128 27.43 128 12.28 115.72 0 100.571 0 85.423 0 73.143 12.28 73.143 27.429c0 15.148 12.28 27.428 27.428 27.428z"/></svg>

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,7 +3,7 @@
     <template
       v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !(item.meta && item.meta.alwaysShow)">
       <app-link class="link" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item  class="left-menu-item" v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)"
+        <el-menu-item class="left-menu-item" v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)"
           :class="{ 'submenu-title-noDropdown': !isNest }">
 
           <!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> -->

src/router/index.ts

@@ -1,15 +1,15 @@
-// import { markRaw } from 'vue';
+import { markRaw } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router'; // createWebHashHistory, createWebHistory
 import type { Router, RouteRecordRaw, RouteComponent } from 'vue-router';
-// import { Help as IconHelp } from '@element-plus/icons-vue';
+import { Help as IconHelp } from '@element-plus/icons-vue';
 
 /* Layout */
 const Layout = ():RouteComponent => import('@/layout/index.vue');
 
 /* Router Modules */
-// import componentsRouter from './modules/components';
+import componentsRouter from './modules/components';
-// import chartsRouter from './modules/charts';
+import chartsRouter from './modules/charts';
-// import nestedRouter from './modules/nested';
+import nestedRouter from './modules/nested';
 import tableRouter from './modules/table';
 
 /**
@@ -51,44 +51,44 @@ export const constantRoutes:RouteRecordRaw[] = [
     component: () => import('@/views/error-page/401.vue'),
     meta: { hidden: true }
   },
-  // {
+  {
-  //   path: '/',
+    path: '/',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/dashboard',
+    redirect: '/dashboard',
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'dashboard',
+        path: 'dashboard',
-  //       component: () => import('@/views/dashboard/index.vue'),
+        component: () => import('@/views/dashboard/index.vue'),
-  //       name: 'Dashboard',
+        name: 'Dashboard',
-  //       meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
-  // {
+  {
-  //   path: '/documentation',
+    path: '/documentation',
-  //   component: Layout,
+    component: Layout,
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'index',
+        path: 'index',
-  //       component: () => import('@/views/documentation/index.vue'),
+        component: () => import('@/views/documentation/index.vue'),
-  //       name: 'Documentation',
+        name: 'Documentation',
-  //       meta: { title: 'Documentation', icon: 'documentation', affix: true }
+        meta: { title: 'Documentation', icon: 'documentation', affix: true }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
-  // {
+  {
-  //   path: '/guide',
+    path: '/guide',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/guide/index',
+    redirect: '/guide/index',
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'index',
+        path: 'index',
-  //       component: () => import('@/views/guide/index.vue'),
+        component: () => import('@/views/guide/index.vue'),
-  //       name: 'Guide',
+        name: 'Guide',
-  //       meta: { title: 'Guide', icon: 'guide', noCache: true }
+        meta: { title: 'Guide', icon: 'guide', noCache: true }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
   {
     path: '/profile',
     component: Layout,
@@ -118,91 +118,91 @@ export const asyncRoutes:RouteRecordRaw[] = [
     redirect: '/permission/page',
     name: 'Permission',
     meta: {
-      // alwaysShow: true, // will always show the root menu
+      alwaysShow: true, // will always show the root menu
-      title: '内部系统'
+      title: 'Permission',
-      // icon: 'lock'
+      icon: 'lock',
-      // roles: ['admin', 'editor'] // you can set roles in root nav
+      roles: ['admin', 'editor'] // you can set roles in root nav
     },
     children: [
-      // {
+      {
-      //   path: 'page',
+        path: 'page',
-      //   component: () => import('@/views/permission/page.vue'),
+        component: () => import('@/views/permission/page.vue'),
-      //   name: 'PagePermission',
+        name: 'PagePermission',
-      //   meta: {
+        meta: {
-      //     title: 'Page Permission',
+          title: 'Page Permission',
-      //     roles: ['admin'] // or you can only set roles in sub nav
+          roles: ['admin'] // or you can only set roles in sub nav
-      //   }
+        }
-      // },
+      },
-      // {
+      {
-      //   path: 'directive',
+        path: 'directive',
-      //   component: () => import('@/views/permission/directive.vue'),
+        component: () => import('@/views/permission/directive.vue'),
-      //   name: 'DirectivePermission',
+        name: 'DirectivePermission',
-      //   meta: {
+        meta: {
-      //     title: 'Directive Permission'
+          title: 'Directive Permission'
-      //     // if do not set roles, means: this page does not require permission
+          // if do not set roles, means: this page does not require permission
-      //   }
+        }
-      // },
+      },
-      // {
+      {
-      //   path: 'role',
+        path: 'role',
-      //   component: () => import('@/views/permission/role.vue'),
+        component: () => import('@/views/permission/role.vue'),
-      //   name: 'RolePermission',
+        name: 'RolePermission',
-      //   meta: {
+        meta: {
-      //     title: 'Role Permission',
+          title: 'Role Permission',
-      //     roles: ['admin']
+          roles: ['admin']
-      //   }
+        }
-      // }
+      }
     ]
   },
 
-  // {
+  {
-  //   path: '/icon',
+    path: '/icon',
-  //   component: Layout,
+    component: Layout,
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'index',
+        path: 'index',
-  //       component: () => import('@/views/icons/index.vue'),
+        component: () => import('@/views/icons/index.vue'),
-  //       name: 'Icons',
+        name: 'Icons',
-  //       meta: { title: 'Icons', icon: 'icon', noCache: true }
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
   // /** when your routing map is too long, you can split it into small modules **/
-  // componentsRouter,
+  componentsRouter,
-  // chartsRouter,
+  chartsRouter,
-  // nestedRouter,
+  nestedRouter,
   tableRouter,
-  //
+
-  // {
+  {
-  //   path: '/example',
+    path: '/example',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/example/list',
+    redirect: '/example/list',
-  //   name: 'Example',
+    name: 'Example',
-  //   meta: {
+    meta: {
-  //     title: 'Example',
+      title: 'Example',
-  //     icon: markRaw(IconHelp)
+      icon: markRaw(IconHelp)
-  //   },
+    },
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'create',
+        path: 'create',
-  //       component: () => import('@/views/example/create.vue'),
+        component: () => import('@/views/example/create.vue'),
-  //       name: 'CreateArticle',
+        name: 'CreateArticle',
-  //       meta: { title: 'Create Article', icon: 'edit' }
+        meta: { title: 'Create Article', icon: 'edit' }
-  //     },
+      },
-  //     {
+      {
-  //       path: 'edit/:id(\\d+)',
+        path: 'edit/:id(\\d+)',
-  //       component: () => import('@/views/example/edit.vue'),
+        component: () => import('@/views/example/edit.vue'),
-  //       name: 'EditArticle',
+        name: 'EditArticle',
-  //       meta: { hidden: true, title: 'Edit Article', noCache: true, activeMenu: '/example/list' }
+        meta: { hidden: true, title: 'Edit Article', noCache: true, activeMenu: '/example/list' }
-  //     },
+      },
-  //     {
+      {
-  //       path: 'list',
+        path: 'list',
-  //       component: () => import('@/views/example/list.vue'),
+        component: () => import('@/views/example/list.vue'),
-  //       name: 'ArticleList',
+        name: 'ArticleList',
-  //       meta: { title: 'Article List', icon: 'list' }
+        meta: { title: 'Article List', icon: 'list' }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
   {
     path: '/tab',
@@ -212,35 +212,35 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'index',
         component: () => import('@/views/tab/index.vue'),
         name: 'Tab',
-        meta: { title: '日报', icon: 'tab' }
+        meta: { title: 'Tab', icon: 'tab' }
       }
     ]
   },
 
-  // {
+  {
-  //   path: '/error',
+    path: '/error',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: 'noRedirect',
+    redirect: 'noRedirect',
-  //   name: 'ErrorPages',
+    name: 'ErrorPages',
-  //   meta: {
+    meta: {
-  //     title: 'Error Pages',
+      title: 'Error Pages',
-  //     icon: '404'
+      icon: '404'
-  //   },
+    },
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: '401',
+        path: '401',
-  //       component: () => import('@/views/error-page/401.vue'),
+        component: () => import('@/views/error-page/401.vue'),
-  //       name: 'Page401',
+        name: 'Page401',
-  //       meta: { title: '401', noCache: true }
+        meta: { title: '401', noCache: true }
-  //     },
+      },
-  //     {
+      {
-  //       path: '404',
+        path: '404',
-  //       component: () => import('@/views/error-page/404.vue'),
+        component: () => import('@/views/error-page/404.vue'),
-  //       name: 'Page404',
+        name: 'Page404',
-  //       meta: { title: '404', noCache: true }
+        meta: { title: '404', noCache: true }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
   {
     path: '/error-log',
@@ -250,7 +250,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'log',
         component: () => import('@/views/error-log/index.vue'),
         name: 'ErrorLog',
-        meta: { title: '消息', icon: 'bug' }
+        meta: { title: 'Error Log', icon: 'bug' }
       }
     ]
   },
@@ -261,7 +261,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
     redirect: '/excel/export-excel',
     name: 'Excel',
     meta: {
-      title: '申请和审批',
+      title: 'Excel',
       icon: 'excel'
     },
     children: [
@@ -269,63 +269,63 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'export-excel',
         component: () => import('@/views/excel/export-excel.vue'),
         name: 'ExportExcel',
-        meta: { title: '提交申请' }
+        meta: { title: 'Export Excel' }
       },
       {
         path: 'export-selected-excel',
         component: () => import('@/views/excel/select-excel.vue'),
         name: 'SelectExcel',
-        meta: { title: '我的审批' }
+        meta: { title: 'Export Selected' }
       },
       {
         path: 'export-merge-header',
         component: () => import('@/views/excel/merge-header.vue'),
         name: 'MergeHeader',
-        meta: { title: '记录查询' }
+        meta: { title: 'Merge Header' }
+      },
+      {
+        path: 'upload-excel',
+        component: () => import('@/views/excel/upload-excel.vue'),
+        name: 'UploadExcel',
+        meta: { title: 'Upload Excel' }
       }
-      // {
-      //   path: 'upload-excel',
-      //   component: () => import('@/views/excel/upload-excel.vue'),
-      //   name: 'UploadExcel',
-      //   meta: { title: 'Upload Excel' }
-      // }
     ]
   },
 
-  // {
+  {
-  //   path: '/zip',
+    path: '/zip',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/zip/download',
+    redirect: '/zip/download',
-  //   name: 'Zip',
+    name: 'Zip',
-  //   meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
+    meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'download',
+        path: 'download',
-  //       component: () => import('@/views/zip/index.vue'),
+        component: () => import('@/views/zip/index.vue'),
-  //       name: 'ExportZip',
+        name: 'ExportZip',
-  //       meta: { title: 'Export Zip' }
+        meta: { title: 'Export Zip' }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
-  // {
+  {
-  //   path: '/pdf',
+    path: '/pdf',
-  //   component: Layout,
+    component: Layout,
-  //   redirect: '/pdf/index',
+    redirect: '/pdf/index',
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'index',
+        path: 'index',
-  //       component: () => import('@/views/pdf/index.vue'),
+        component: () => import('@/views/pdf/index.vue'),
-  //       name: 'PDF',
+        name: 'PDF',
-  //       meta: { title: 'PDF', icon: 'pdf' }
+        meta: { title: 'PDF', icon: 'pdf' }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
-  // {
+  {
-  //   path: '/pdf/download',
+    path: '/pdf/download',
-  //   component: () => import('@/views/pdf/download.vue'),
+    component: () => import('@/views/pdf/download.vue'),
-  //   meta: { hidden: true }
+    meta: { hidden: true }
-  // },
+  },
 
   {
     path: '/theme',
@@ -335,65 +335,65 @@ export const asyncRoutes:RouteRecordRaw[] = [
         path: 'index',
         component: () => import('@/views/theme/index.vue'),
         name: 'Theme',
-        meta: { title: '个人信息管理', icon: 'theme' }
+        meta: { title: 'Theme', icon: 'theme' }
       }
     ]
   },
 
-  // {
+  {
-  //   path: '/clipboard',
+    path: '/clipboard',
-  //   component: Layout,
+    component: Layout,
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'index',
+        path: 'index',
-  //       component: () => import('@/views/clipboard/index.vue'),
+        component: () => import('@/views/clipboard/index.vue'),
-  //       name: 'ClipboardDemo',
+        name: 'ClipboardDemo',
-  //       meta: { title: 'Clipboard', icon: 'clipboard' }
+        meta: { title: 'Clipboard', icon: 'clipboard' }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
-  // {
+  {
-  //   path: '/external-link',
+    path: '/external-link',
-  //   component: Layout,
+    component: Layout,
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'https://element-plus.midfar.com',
+        path: 'https://element-plus.midfar.com',
-  //       meta: { title: 'External Link', icon: 'link' },
+        meta: { title: 'External Link', icon: 'link' },
-  //       redirect: ''
+        redirect: ''
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
-  //
+
-  // {
+  {
-  //   path: '/my-demo',
+    path: '/my-demo',
-  //   component: Layout,
+    component: Layout,
-  //   name: 'MyDemo',
+    name: 'MyDemo',
-  //   meta: {
+    meta: {
-  //     title: 'MyDemo',
+      title: 'MyDemo',
-  //     icon: 'component'
+      icon: 'component'
-  //   },
+    },
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'element-demo',
+        path: 'element-demo',
-  //       component: () => import('@/views/mydemo/ElementDemo.vue'),
+        component: () => import('@/views/mydemo/ElementDemo.vue'),
-  //       name: 'ElementDemo',
+        name: 'ElementDemo',
-  //       meta: { title: 'ElementDemo', icon: 'skill' }
+        meta: { title: 'ElementDemo', icon: 'skill' }
-  //     },
+      },
-  //     {
+      {
-  //       path: 'store-demo',
+        path: 'store-demo',
-  //       component: () => import('@/views/mydemo/StoreDemo.vue'),
+        component: () => import('@/views/mydemo/StoreDemo.vue'),
-  //       name: 'StoreDemo',
+        name: 'StoreDemo',
-  //       meta: { title: 'StoreDemo', icon: 'lock' }
+        meta: { title: 'StoreDemo', icon: 'lock' }
-  //     },
+      },
-  //     {
+      {
-  //       path: 'webSocket-demo',
+        path: 'webSocket-demo',
-  //       component: () => import('@/views/mydemo/WebSocketDemo.vue'),
+        component: () => import('@/views/mydemo/WebSocketDemo.vue'),
-  //       name: 'WebSocketDemo',
+        name: 'WebSocketDemo',
-  //       meta: { title: 'WebSocketDemo', icon: 'lock' }
+        meta: { title: 'WebSocketDemo', icon: 'lock' }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
   // 404 page must be placed at the end !!!
   { path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true }}

src/router/modules/table.ts

@@ -8,7 +8,7 @@ const tableRouter = {
   redirect: '/table/complex-table',
   name: 'Table',
   meta: {
-    title: '个人项目',
+    title: 'Table',
     icon: 'table'
   },
   children: [
@@ -16,25 +16,25 @@ const tableRouter = {
       path: 'dynamic-table',
       component: () => import('@/views/table/dynamic-table/index.vue'),
       name: 'DynamicTable',
-      meta: { title: '我参与的' }
+      meta: { title: 'Dynamic Table' }
     },
     {
       path: 'drag-table',
       component: () => import('@/views/table/drag-table.vue'),
       name: 'DragTable',
-      meta: { title: '我管理的' }
+      meta: { title: 'Drag Table' }
+    },
+    {
+      path: 'inline-edit-table',
+      component: () => import('@/views/table/inline-edit-table.vue'),
+      name: 'InlineEditTable',
+      meta: { title: 'Inline Edit' }
     },
-    // {
-    //   path: 'inline-edit-table',
-    //   component: () => import('@/views/table/inline-edit-table.vue'),
-    //   name: 'InlineEditTable',
-    //   meta: { title: 'Inline Edit' }
-    // },
     {
       path: 'complex-table',
       component: () => import('@/views/table/complex-table.vue'),
       name: 'ComplexTable',
-      meta: { title: '我负责的' }
+      meta: { title: 'Complex Table' }
     }
   ]
 };

src/utils/request.js

@@ -4,7 +4,7 @@ import { getToken } from '@/utils/auth';
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: process.env.VUE_APP_BASE_API = 'https://nbxt.oa.x-lf.cn', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 });

src/views/error-log/index.vue

@@ -1,219 +1,33 @@
-
 <template>
-
+  <div class="errPage-container">
-    <div style=" width:100%">
+    <ErrorA />
-        <el-card style="max-width: 100vw;margin: 1.5vw;">
+    <ErrorB />
-            <template #header><span>消息</span></template>
+    <h3>Please click the bug icon in the upper right corner</h3>
-            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+    <aside>
-                <div>
+      Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
-                    时间
+      <a target="_blank" class="link-type" href="https://vue3-element-admin-site.midfar.com/guide/advanced/error.html">
-                    <el-date-picker
+        Document introduction
-                        v-model="value2"
+      </a>
-                        type="daterange"
+    </aside>
-                        unlink-panels
+    <a href="#">
-                        range-separator="To"
+      <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
-                        start-placeholder="开始时间"
+    </a>
-                        end-placeholder="结束时间"
+  </div>
-                        :shortcuts="shortcuts"
-                        :size="large"
-                    />
-                </div>
-                <div>
-                    状态
-                    <el-select
-                        v-model="value"
-                        clearable
-                        placeholder="Select"
-                        style="width: 240px"
-                    >
-                        <el-option
-                            v-for="item in options"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-
-                </div>
-
-                <div>
-                    <el-button type="primary">查询</el-button>
-                    <el-button>重置</el-button>
-
-                </div>
-            </div>
-        </el-card>
-        <el-card style="max-width: 100vw;height:50vh;margin:1.3vw">
-            <div style="display:flex;flex-direction: row;justify-content: space-between">
-                <el-button
-                        text
-                        type=''
-                >历史记录</el-button
-                >
-            </div>
-
-            <div v-for="(row, index) in tableData" :key="index" class="table-row">
-                <div class="table-cell">
-                    <div class="date" style="display:flex;flex-direction: column">
-                        <span style="color:skyblue">{{row.name}}</span>
-                        <span>{{ row.date }}</span>
-                    </div>
-                </div>
-                <div class="table-cell">
-                            <div>address: {{ row.address }}</div>
-                </div>
-                <div class="table-cell table-cell-right">
-                    <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
-                </div>
-            </div>
-            <el-pagination
-
-                background
-                layout="prev, pager, next"
-                :total="50"
-                class="mt-[5vh]"
-            />
-        </el-card>
-
-    </div>
 </template>
 
-<script lang="ts" setup>
+<script>
-import { ref } from 'vue';
+import { defineComponent } from 'vue';
-// 时间选择器
+import ErrorA from './components/ErrorTestA';
+import ErrorB from './components/ErrorTestB';
 
-const value2 = ref('');
+export default defineComponent({
-
+  name: 'ErrorLog',
-const shortcuts = [
+  components: { ErrorA, ErrorB }
-  {
+});
-    text: 'Last week',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last month',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last 3 months',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-      return [start, end];
-    }
-  }
-];
-
-// 状态选择器
-
-const value = ref('');
-const options = [
-  {
-    value: 'Option1',
-    label: 'Option1'
-  },
-  {
-    value: 'Option2',
-    label: 'Option2'
-  },
-  {
-    value: 'Option3',
-    label: 'Option3'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
-  }
-];
-
-// 表格
-interface User {
-    date: string
-    name: string
-    address: string
-}
-
-const handleDelete = (index: number, row: User) => {
-  console.log(index, row);
-};
-
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  }
-];
 </script>
-<style>
-.my-autocomplete li {
-    line-height: normal;
-    padding: 7px;
-}
-.my-autocomplete li .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.my-autocomplete li .addr {
-    font-size: 12px;
-    color: #b4b4b4;
-}
-.my-autocomplete li .highlighted .addr {
-    color: #ddd;
-}
 
-.table-row {
+<style scoped>
-    display: flex;
+  .errPage-container {
-    align-items: center;
+    padding: 30px;
-    margin-bottom: 10px;
+  }
-}
-
-.table-cell {
-    flex: 1;
-    padding: 5px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.table-cell-right {
-    justify-content: flex-end;
-    margin-right:5vw;
-}
-.date {
-    display: flex;
-    /*align-items: center;*/
-}
-
-.date el-icon {
-    margin-right: 10px;
-}
 </style>

src/views/login/index.vue

@@ -87,7 +87,7 @@ export default defineComponent({
     return {
       loginForm: {
         username: 'admin',
-        password: '123456'
+        password: '111111'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],

src/views/tab/index.vue

@@ -1,290 +1,58 @@
-<!--<template>-->
-<!--  <div class="tab-container">-->
-<!--&lt;!&ndash;    <el-tag>mounted times ：{{ createdTimes }}</el-tag>&ndash;&gt;-->
-<!--&lt;!&ndash;    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />&ndash;&gt;-->
-<!--    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">-->
-<!--      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">-->
-<!--        <keep-alive>-->
-<!--          <tab-pane  v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />-->
-<!--        </keep-alive>-->
-<!--      </el-tab-pane>-->
-<!--    </el-tabs>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--import { defineComponent } from 'vue';-->
-<!--import TabPane from './components/TabPane';-->
-
-<!--export default defineComponent({-->
-<!--  name: 'Tab',-->
-<!--  components: { TabPane },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      tabMapOptions: [-->
-<!--        { label: 'China', key: 'CN' },-->
-<!--        { label: 'USA', key: 'US' },-->
-<!--        { label: 'Japan', key: 'JP' },-->
-<!--        { label: 'Eurozone', key: 'EU' }-->
-<!--      ],-->
-<!--      activeName: 'CN',-->
-<!--      createdTimes: 0-->
-<!--    };-->
-<!--  },-->
-<!--  // watch: {-->
-<!--  //   activeName(val) { // url变化会导致渲染异常。因此这里注释掉了-->
-<!--  //     this.$router.push(`${this.$route.path}?tab=${val}`);-->
-<!--  //   }-->
-<!--  // },-->
-<!--  created() {-->
-<!--    // init the default selected tab-->
-<!--    const tab = this.$route.query.tab;-->
-<!--    if (tab) {-->
-<!--      this.activeName = tab;-->
-<!--    }-->
-<!--  },-->
-<!--  methods: {-->
-<!--    showCreatedTimes() {-->
-<!--      this.createdTimes = this.createdTimes + 1;-->
-<!--    }-->
-<!--  }-->
-<!--});-->
-<!--</script>-->
-
-<!--<style scoped>-->
-<!--  .tab-container {-->
-<!--    margin: 30px;-->
-<!--  }-->
-<!--</style>-->
-
 <template>
-
+  <div class="tab-container">
-    <div style=" width:100%">
+    <el-tag>mounted times ：{{ createdTimes }}</el-tag>
-        <el-card style="max-width: 100vw;margin: 1.5vw;">
+    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
-            <template #header><span>日报</span></template>
+    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
-            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
-            <div>
+        <keep-alive>
-                项目
+          <tab-pane  v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
-                <el-autocomplete
+        </keep-alive>
-                    v-model="state"
+      </el-tab-pane>
-                    :fetch-suggestions="querySearch"
+    </el-tabs>
-                    popper-class="my-autocomplete"
-                    placeholder="Please input"
-                    @select="handleSelect"
-                >
-                    <template #suffix>
-                        <el-icon class="el-input__icon" @click="handleIconClick">
-                            <edit />
-                        </el-icon>
-                    </template>
-                    <template #default="{ item }">
-                        <div class="value">{{ item.value }}</div>
-                        <span class="link">{{ item.link }}</span>
-                    </template>
-                </el-autocomplete>
-            </div>
-           <div>
-               时间
-               <el-date-picker
-                   v-model="value2"
-                   type="daterange"
-                   unlink-panels
-                   range-separator="To"
-                   start-placeholder="开始时间"
-                   end-placeholder="结束时间"
-                   :shortcuts="shortcuts"
-                   :size="large"
-               />
-           </div>
-           <div>
-               <el-button type="primary">查询</el-button>
-               <el-button>重置</el-button>
-
-           </div>
-            </div>
-        </el-card>
-        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
-            <div style="display:flex;flex-direction: row;justify-content: space-between">
-                <el-button
-                    text
-                    type=''
-                >历史记录</el-button
-                >
-                <el-button type="primary">新建</el-button>
-            </div>
-    <el-table
-            ref="multipleTableRef"
-            :data="tableData"
-            style="max-width: 100vw;"
-            @selection-change="handleSelectionChange"
-    >
-        <el-table-column type="selection" width="55" />
-        <el-table-column label="序号" width="120">
-            <template #default="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column property="name" label="项目名称" width="120" />
-        <el-table-column property="address" label="项目负责人" show-overflow-tooltip />
-        <el-table-column property="address" label="日报"  />
-        <el-table-column property="address" label="日报填写者"  />
-        <el-table-column property="address" label="填写时间"  />
-        <el-table-column property="address" label="工作时间"  />
-        <el-table-column property="address" label="操作"  />
-    </el-table>
-            <el-pagination
-                larger
-                background
-                layout="prev, pager, next"
-                :total="50"
-                class="mt-4"
-                style="margin-top:2vh"
-            />
-        </el-card>
-<!--    <div style="margin-top: 20px">-->
-<!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
-<!--        >Toggle selection status of second and third rows</el-button-->
-<!--        >-->
-<!--        <el-button @click="toggleSelection()">Clear selection</el-button>-->
-<!--    </div>-->
   </div>
 </template>
 
-<script lang="ts" setup>
+<script>
-import { ref } from 'vue';
+import { defineComponent } from 'vue';
-import { ElTable } from 'element-plus';
+import TabPane from './components/TabPane';
 
-interface User {
+export default defineComponent({
-    date: string
+  name: 'Tab',
-    name: string
+  components: { TabPane },
-    address: string
+  data() {
-}
+    return {
-
+      tabMapOptions: [
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+        { label: 'China', key: 'CN' },
-const multipleSelection = ref<User[]>([]);
+        { label: 'USA', key: 'US' },
-
+        { label: 'Japan', key: 'JP' },
-const handleSelectionChange = (val: User[]) => {
+        { label: 'Eurozone', key: 'EU' }
-  multipleSelection.value = val;
+      ],
-};
+      activeName: 'CN',
-
+      createdTimes: 0
-const tableData: User[] = [
+    };
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
   },
-  {
+  // watch: {
-    date: '2016-05-02',
+  //   activeName(val) { // url变化会导致渲染异常。因此这里注释掉了
-    name: 'Tom',
+  //     this.$router.push(`${this.$route.path}?tab=${val}`);
-    address: 'No. 189, Grove St, Los Angeles'
+  //   }
+  // },
+  created() {
+    // init the default selected tab
+    const tab = this.$route.query.tab;
+    if (tab) {
+      this.activeName = tab;
+    }
   },
-  {
+  methods: {
-    date: '2016-05-04',
+    showCreatedTimes() {
-    name: 'Tom',
+      this.createdTimes = this.createdTimes + 1;
-    address: 'No. 189, Grove St, Los Angeles'
+    }
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
   }
-
-];
-
-// 输入框1
-import { onMounted } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
-
-interface LinkItem {
-    value: string
-    link: string
-}
-
-const state = ref('');
-const links = ref<LinkItem[]>([]);
-
-const querySearch = (queryString: string, cb) => {
-  const results = queryString
-    ? links.value.filter(createFilter(queryString))
-    : links.value;
-    // call callback function to return suggestion objects
-  cb(results);
-};
-const createFilter = (queryString) => {
-  return (restaurant) => {
-    return (
-      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    );
-  };
-};
-const loadAll = () => {
-  return [
-    { value: '1' },
-    { value: '2' },
-    { value: '3' },
-    { value: '4' },
-    { value: '5' }
-
-  ];
-};
-const handleSelect = (item: LinkItem) => {
-  console.log(item);
-};
-
-const handleIconClick = (ev: Event) => {
-  console.log(ev);
-};
-
-onMounted(() => {
-  links.value = loadAll();
 });
-
-// 时间选择器
-const value1 = ref('');
-const value2 = ref('');
-
-const shortcuts = [
-  {
-    text: 'Last week',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last month',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last 3 months',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-      return [start, end];
-    }
-  }
-];
 </script>
-<style>
+
-.my-autocomplete li {
+<style scoped>
-    line-height: normal;
+  .tab-container {
-    padding: 7px;
+    margin: 30px;
-}
+  }
-.my-autocomplete li .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.my-autocomplete li .addr {
-    font-size: 12px;
-    color: #b4b4b4;
-}
-.my-autocomplete li .highlighted .addr {
-    color: #ddd;
-}
 </style>

src/views/table/complex-table.vue

@@ -1,95 +1,3 @@
-<template>
-  <el-card style="max-width: 100vw;margin: 1.5vw;">
-    <template #header>
-      <div class="card-header">
-        <span>项目1</span>
-      </div>
-    </template>
-    <div style="display: flex; gap: 100px">
-      <el-input
-          v-model="input1"
-          style="width: 550px"
-          placeholder="请输入"
-      >
-        <template #prepend>名称</template>
-      </el-input>
-      <el-input
-          v-model="input2"
-          style="width: 550px"
-          placeholder="请输入"
-      >
-        <template #prepend>状态</template>
-      </el-input>
-      <div>
-        <el-button-group>
-          <el-button type="primary">查询</el-button>
-          <el-button>重置</el-button>
-        </el-button-group>
-      </div>
-    </div>
-    <template #footer>Footer content</template>
-  </el-card>
-  <el-card  style="max-width: 100vw;margin: 1.5vw;">
-    <div>
-      <el-table :data="tableData" ref="multipleTableRef" style="width: 100%"  @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="date" label="序号"/>
-        <el-table-column prop="name" label="子系统名称"/>
-        <el-table-column prop="address" label="工作量" />
-        <el-table-column prop="address" label="周期" />
-        <el-table-column prop="address" label="负责人" />
-        <el-table-column prop="address" label="状态" />
-        <el-table-column prop="address" label="子系统简介" />
-        <el-table-column prop="address" label="截止时间" />
-        <el-table-column prop="address" label="操作" />
-      </el-table>
-    </div>
-    <div style="display: flex; justify-content: center;margin-top: 2vh">
-      <el-pagination background layout="prev, pager, next" :total="1000" />
-    </div>
-  </el-card>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { ElTable } from 'element-plus';
-const input1 = ref('');
-const input2 = ref('');
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
-const multipleSelection = ref<User[]>([]);
-
-const handleSelectionChange = (val: User[]) => {
-  multipleSelection.value = val;
-};
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-];
-</script>
-<!--
 <template>
   <div class="app-container">
     <div class="filter-container">
@@ -127,51 +35,51 @@ const tableData = [
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column label="序号" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
+      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
         <template v-slot="{row}">
           <span>{{ row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="子系统名称" width="150px" align="center">
+      <el-table-column label="Date" width="150px" align="center">
         <template v-slot="{row}">
           <span>{{ parseTime(row.timestamp, '{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="工作量" min-width="150px">
+      <el-table-column label="Title" min-width="150px">
         <template v-slot="{row}">
           <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
           <el-tag>{{ typeFilter(row.type) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="周期" width="110px" align="center">
+      <el-table-column label="Author" width="110px" align="center">
         <template v-slot="{row}">
           <span>{{ row.author }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" label="负责人" width="110px" align="center">
+      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
         <template v-slot="{row}">
           <span style="color:red;">{{ row.reviewer }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="状态" width="80px">
+      <el-table-column label="Imp" width="80px">
         <template v-slot="{row}">
           <svg-icon v-for="n in row.importance" :key="n" icon-class="star" class="meta-item__icon" />
         </template>
       </el-table-column>
-      <el-table-column label="子系统简介" align="center" width="95">
+      <el-table-column label="Readings" align="center" width="95">
         <template v-slot="{row}">
           <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
           <span v-else>0</span>
         </template>
       </el-table-column>
-      <el-table-column label="截止时间" class-name="status-col" width="100">
+      <el-table-column label="Status" class-name="status-col" width="100">
         <template v-slot="{row}">
           <el-tag :type="statusFilter(row.status)">
             {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
+      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
         <template v-slot="{row,$index}">
           <el-button type="primary" size="small" @click="handleUpdate(row)">
             Edit
@@ -477,4 +385,3 @@ export default defineComponent({
   }
 });
 </script>
--->

src/views/table/drag-table.vue

@@ -1,99 +1,6 @@
-<template>
-  <el-card style="max-width: 100vw;margin: 1.5vw;">
-    <template #header>
-      <div class="card-header">
-        <span>我管理的项目</span>
-      </div>
-    </template>
-    <div style="display: flex; gap: 100px">
-      <el-input
-          v-model="input1"
-          style="width: 550px"
-          placeholder="请输入"
-      >
-        <template #prepend>名称</template>
-      </el-input>
-      <el-input
-          v-model="input2"
-          style="width: 550px"
-          placeholder="请输入"
-      >
-        <template #prepend>状态</template>
-      </el-input>
-      <div>
-        <el-button-group>
-          <el-button type="primary">查询</el-button>
-          <el-button>重置</el-button>
-        </el-button-group>
-      </div>
-    </div>
-    <template #footer>Footer content</template>
-  </el-card>
-  <el-card  style="max-width: 100vw;margin: 1.5vw;">
-    <div>
-      <el-table :data="tableData" ref="multipleTableRef" style="width: 100%"  @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="date" label="序号"/>
-        <el-table-column prop="name" label="项目名称"/>
-        <el-table-column prop="address" label="工作量" />
-        <el-table-column prop="address" label="周期" />
-        <el-table-column prop="address" label="负责人" />
-        <el-table-column prop="address" label="状态" />
-        <el-table-column prop="address" label="标签" />
-        <el-table-column prop="address" label="文档（点击下载）" />
-        <el-table-column prop="address" label="截止时间" />
-        <el-table-column prop="address" label="操作" />
-      </el-table>
-    </div>
-    <div style="display: flex; justify-content: center;margin-top: 2vh">
-      <el-pagination background layout="prev, pager, next" :total="1000" />
-    </div>
-  </el-card>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { ElTable } from 'element-plus';
-const input1 = ref('');
-const input2 = ref('');
-interface User {
-  date: string
-  name: string
-  address: string
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
-const multipleSelection = ref<User[]>([]);
-
-const handleSelectionChange = (val: User[]) => {
-  multipleSelection.value = val;
-};
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-];
-</script>
-<!--
 <template>
   <div class="app-container">
-    &lt;!&ndash; Note that row-key is necessary to get a correct row order. &ndash;&gt;
+    <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="ID" width="65">
         <template v-slot="{row}">
@@ -245,4 +152,3 @@ export default defineComponent({
   margin-top: 15px;
 }
 </style>
--->

src/views/table/dynamic-table/index.vue

@@ -1,238 +1,25 @@
-<!--<template>-->
-<!--    -->
-<!--  <div class="app-container">-->
-<!--    <div style="margin:0 0 5px 20px">-->
-<!--      Fixed header, sorted by header order,-->
-<!--    </div>-->
-<!--    <fixed-thead />-->
-
-<!--    <div style="margin:30px 0 5px 20px">-->
-<!--      Not fixed header, sorted by click order-->
-<!--    </div>-->
-<!--    <unfixed-thead />-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--import { defineComponent } from 'vue';-->
-<!--import FixedThead from './components/FixedThead';-->
-<!--import UnfixedThead from './components/UnfixedThead';-->
-
-<!--export default defineComponent({-->
-<!--  name: 'DynamicTable',-->
-<!--  components: { FixedThead, UnfixedThead }-->
-<!--});-->
-<!--</script>-->
-
 <template>
-
+  <div class="app-container">
-    <div style=" width:100%">
+    <div style="margin:0 0 5px 20px">
-        <el-card style="max-width: 100vw;margin: 1.5vw;">
+      Fixed header, sorted by header order,
-            <template #header><span>项目1</span></template>
-            <div style="display:flex;flex-direction:row;justify-content: space-around ">
-                <div>
-                    名称
-                    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
-                </div>
-                <div>
-                    状态
-                    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
-                </div>
-                <div>
-                    <el-button type="primary">查询</el-button>
-                    <el-button>重置</el-button>
-
-                </div>
-            </div>
-        </el-card>
-        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
-            <div style="display:flex;flex-direction: row;justify-content: space-between">
-                <el-button
-                        text
-                        type=''
-                >子系统列表</el-button
-                >
-            </div>
-            <el-table
-                    ref="multipleTableRef"
-                    :data="tableData"
-                    style="max-width: 100vw;"
-                    @selection-change="handleSelectionChange"
-            >
-<!--                <el-table-column type="selection" width="55" />-->
-                <el-table-column label="序号" width="120">
-                    <template #default="scope">{{ scope.row.date }}</template>
-                </el-table-column>
-                <el-table-column property="name" label="子系统名称" width="120" />
-                <el-table-column property="address" label="工作量" show-overflow-tooltip />
-                <el-table-column property="address" label="周期"  />
-                <el-table-column property="address" label="负责人"  />
-                <el-table-column property="address" label="状态"  />
-                <el-table-column property="address" label="子系统简介"  />
-                <el-table-column property="address" label="截止时间"  />
-                <el-table-column property="address" label="操作"  >
-                    <el-button
-                            link
-                            style="color:deepskyblue"
-                    >查看详情</el-button
-                    >
-                </el-table-column>
-            </el-table>
-            <el-pagination
-                    larger
-                    background
-                    layout="prev, pager, next"
-                    :total="50"
-                    class="mt-4"
-                    style="margin-top:2vh"
-            />
-        </el-card>
-        <!--    <div style="margin-top: 20px">-->
-        <!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
-        <!--        >Toggle selection status of second and third rows</el-button-->
-        <!--        >-->
-        <!--        <el-button @click="toggleSelection()">Clear selection</el-button>-->
-        <!--    </div>-->
     </div>
+    <fixed-thead />
+
+    <div style="margin:30px 0 5px 20px">
+      Not fixed header, sorted by click order
+    </div>
+    <unfixed-thead />
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script>
-import { ref } from 'vue';
+import { defineComponent } from 'vue';
-import { ElTable } from 'element-plus';
+import FixedThead from './components/FixedThead';
+import UnfixedThead from './components/UnfixedThead';
 
-interface User {
+export default defineComponent({
-    date: string
+  name: 'DynamicTable',
-    name: string
+  components: { FixedThead, UnfixedThead }
-    address: string
-}
-
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
-const multipleSelection = ref<User[]>([]);
-
-const handleSelectionChange = (val: User[]) => {
-  multipleSelection.value = val;
-};
-
-const tableData: User[] = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  }
-
-];
-
-// 输入框1
-import { onMounted } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
-
-interface LinkItem {
-    value: string
-    link: string
-}
-
-const state = ref('');
-const links = ref<LinkItem[]>([]);
-
-const querySearch = (queryString: string, cb) => {
-  const results = queryString
-    ? links.value.filter(createFilter(queryString))
-    : links.value;
-    // call callback function to return suggestion objects
-  cb(results);
-};
-const createFilter = (queryString) => {
-  return (restaurant) => {
-    return (
-      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    );
-  };
-};
-const loadAll = () => {
-  return [
-    { value: '1' },
-    { value: '2' },
-    { value: '3' },
-    { value: '4' },
-    { value: '5' }
-
-  ];
-};
-const handleSelect = (item: LinkItem) => {
-  console.log(item);
-};
-
-const handleIconClick = (ev: Event) => {
-  console.log(ev);
-};
-
-onMounted(() => {
-  links.value = loadAll();
 });
-
-// 时间选择器
-const value1 = ref('');
-const value2 = ref('');
-
-const shortcuts = [
-  {
-    text: 'Last week',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last month',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last 3 months',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-      return [start, end];
-    }
-  }
-];
 </script>
-<style>
+
-.my-autocomplete li {
-    line-height: normal;
-    padding: 7px;
-}
-.my-autocomplete li .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.my-autocomplete li .addr {
-    font-size: 12px;
-    color: #b4b4b4;
-}
-.my-autocomplete li .highlighted .addr {
-    color: #ddd;
-}
-</style>

src/views/theme/index.vue

@@ -1,227 +1,137 @@
-<!--<template>-->
-<!--  <div class="app-container">-->
-<!--    <el-card class="box-card">-->
-<!--      <template #header>-->
-<!--        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">-->
-<!--          Theme documentation-->
-<!--        </a>-->
-<!--      </template>-->
-<!--      <div class="box-item">-->
-<!--        <span class="field-label">Change Theme : </span>-->
-<!--        <el-switch v-model="theme" />-->
-<!--        <aside style="margin-top:15px;">-->
-<!--          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.-->
-<!--        </aside>-->
-<!--      </div>-->
-<!--    </el-card>-->
-
-<!--    <div class="block">-->
-<!--      <el-button type="primary">-->
-<!--        Primary-->
-<!--      </el-button>-->
-<!--      <el-button type="success">-->
-<!--        Success-->
-<!--      </el-button>-->
-<!--      <el-button type="info">-->
-<!--        Info-->
-<!--      </el-button>-->
-<!--      <el-button type="warning">-->
-<!--        Warning-->
-<!--      </el-button>-->
-<!--      <el-button type="danger">-->
-<!--        Danger-->
-<!--      </el-button>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-button type="primary" :icon="IconEdit" />-->
-<!--      <el-button type="primary" :icon="IconShare" />-->
-<!--      <el-button type="primary" :icon="IconDelete" />-->
-<!--      <el-button type="primary" :icon="IconSearch">-->
-<!--        Search-->
-<!--      </el-button>-->
-<!--      <el-button type="primary">-->
-<!--        Upload <el-icon><icon-upload /></el-icon>-->
-<!--      </el-button>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">-->
-<!--        {{ tag.name }}-->
-<!--      </el-tag>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-radio-group v-model="radio">-->
-<!--        <el-radio :label="3">-->
-<!--          Option A-->
-<!--        </el-radio>-->
-<!--        <el-radio :label="6">-->
-<!--          Option B-->
-<!--        </el-radio>-->
-<!--        <el-radio :label="9">-->
-<!--          Option C-->
-<!--        </el-radio>-->
-<!--      </el-radio-group>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-slider v-model="slideValue" />-->
-<!--    </div>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--import { defineComponent, markRaw } from 'vue';-->
-<!--import {-->
-<!--  Edit as IconEdit,-->
-<!--  Share as IconShare,-->
-<!--  Delete as IconDelete,-->
-<!--  Search as IconSearch,-->
-<!--  Upload as IconUpload-->
-<!--} from '@element-plus/icons-vue';-->
-
-<!--export default defineComponent({-->
-<!--  name: 'Theme',-->
-<!--  components: { IconUpload },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      IconEdit: markRaw(IconEdit),-->
-<!--      IconShare: markRaw(IconShare),-->
-<!--      IconDelete: markRaw(IconDelete),-->
-<!--      IconSearch: markRaw(IconSearch),-->
-<!--      theme: false,-->
-<!--      tags: [-->
-<!--        { name: 'Tag One', type: '' },-->
-<!--        { name: 'Tag Two', type: 'info' },-->
-<!--        { name: 'Tag Three', type: 'success' },-->
-<!--        { name: 'Tag Four', type: 'warning' },-->
-<!--        { name: 'Tag Five', type: 'danger' }-->
-<!--      ],-->
-<!--      slideValue: 50,-->
-<!--      radio: 3-->
-<!--    };-->
-<!--  },-->
-<!--  watch: {-->
-<!--    theme() {-->
-<!--      console.log('watch theme', this.theme);-->
-<!--      // toggleClass(document.body, 'custom-theme');-->
-<!--      const htmlTag = document.querySelector('html');-->
-<!--      if (this.theme) {-->
-<!--        htmlTag.classList.add('dark');-->
-<!--      } else {-->
-<!--        htmlTag.classList.remove('dark');-->
-<!--      }-->
-<!--    }-->
-<!--  }-->
-<!--});-->
-<!--</script>-->
-
-<!--<style scoped>-->
-<!--.field-label{-->
-<!--  vertical-align: middle;-->
-<!--}-->
-<!--.box-card {-->
-<!--  width: 400px;-->
-<!--  max-width: 100%;-->
-<!--  margin: 20px auto;-->
-<!--}-->
-
-<!--.block {-->
-<!--  padding: 30px 24px;-->
-<!--}-->
-
-<!--.tag-item {-->
-<!--  margin-right: 15px;-->
-<!--}-->
-<!--</style>-->
-
 <template>
-    <div>
+  <div class="app-container">
-        <div v-for="(row, index) in tableData" :key="index" class="table-row">
+    <el-card class="box-card">
-            <div class="table-cell">
+      <template #header>
-                <div class="date">
+        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
-                    <el-icon><timer /></el-icon>
+          Theme documentation
-                    <span>{{ row.date }}</span>
+        </a>
-                </div>
+      </template>
-            </div>
+      <div class="box-item">
-            <div class="table-cell">
+        <span class="field-label">Change Theme : </span>
-                <el-popover effect="light" trigger="hover" placement="top" width="auto">
+        <el-switch v-model="theme" />
-                    <template #default>
+        <aside style="margin-top:15px;">
-                        <div>name: {{ row.name }}</div>
+          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
-                        <div>address: {{ row.address }}</div>
+        </aside>
-                    </template>
+      </div>
-                    <template #reference>
+    </el-card>
-                        <el-tag>{{ row.name }}</el-tag>
+
-                    </template>
+    <div class="block">
-                </el-popover>
+      <el-button type="primary">
-            </div>
+        Primary
-            <div class="table-cell">
+      </el-button>
-                <el-button size="small" @click="handleEdit(index, row)">Edit</el-button>
+      <el-button type="success">
-                <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
+        Success
-            </div>
+      </el-button>
-        </div>
+      <el-button type="info">
+        Info
+      </el-button>
+      <el-button type="warning">
+        Warning
+      </el-button>
+      <el-button type="danger">
+        Danger
+      </el-button>
     </div>
+
+    <div class="block">
+      <el-button type="primary" :icon="IconEdit" />
+      <el-button type="primary" :icon="IconShare" />
+      <el-button type="primary" :icon="IconDelete" />
+      <el-button type="primary" :icon="IconSearch">
+        Search
+      </el-button>
+      <el-button type="primary">
+        Upload <el-icon><icon-upload /></el-icon>
+      </el-button>
+    </div>
+
+    <div class="block">
+      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
+        {{ tag.name }}
+      </el-tag>
+    </div>
+
+    <div class="block">
+      <el-radio-group v-model="radio">
+        <el-radio :label="3">
+          Option A
+        </el-radio>
+        <el-radio :label="6">
+          Option B
+        </el-radio>
+        <el-radio :label="9">
+          Option C
+        </el-radio>
+      </el-radio-group>
+    </div>
+
+    <div class="block">
+      <el-slider v-model="slideValue" />
+    </div>
+  </div>
 </template>
 
+<script>
+import { defineComponent, markRaw } from 'vue';
+import {
+  Edit as IconEdit,
+  Share as IconShare,
+  Delete as IconDelete,
+  Search as IconSearch,
+  Upload as IconUpload
+} from '@element-plus/icons-vue';
+
+export default defineComponent({
+  name: 'Theme',
+  components: { IconUpload },
+  data() {
+    return {
+      IconEdit: markRaw(IconEdit),
+      IconShare: markRaw(IconShare),
+      IconDelete: markRaw(IconDelete),
+      IconSearch: markRaw(IconSearch),
+      theme: false,
+      tags: [
+        { name: 'Tag One', type: '' },
+        { name: 'Tag Two', type: 'info' },
+        { name: 'Tag Three', type: 'success' },
+        { name: 'Tag Four', type: 'warning' },
+        { name: 'Tag Five', type: 'danger' }
+      ],
+      slideValue: 50,
+      radio: 3
+    };
+  },
+  watch: {
+    theme() {
+      console.log('watch theme', this.theme);
+      // toggleClass(document.body, 'custom-theme');
+      const htmlTag = document.querySelector('html');
+      if (this.theme) {
+        htmlTag.classList.add('dark');
+      } else {
+        htmlTag.classList.remove('dark');
+      }
+    }
+  }
+});
+</script>
+
 <style scoped>
-.table-row {
+.field-label{
-    display: flex;
+  vertical-align: middle;
-    align-items: center;
+}
-    margin-bottom: 10px;
+.box-card {
+  width: 400px;
+  max-width: 100%;
+  margin: 20px auto;
 }
 
-.table-cell {
+.block {
-    flex: 1;
+  padding: 30px 24px;
-    padding: 5px;
 }
 
-.date {
+.tag-item {
-    display: flex;
+  margin-right: 15px;
-    align-items: center;
-}
-
-.date el-icon {
-    margin-right: 10px;
 }
 </style>
-
-<script lang="ts" setup>
-import { Timer } from '@element-plus/icons-vue'
-
-interface User {
-    date: string
-    name: string
-    address: string
-}
-
-const handleEdit = (index: number, row: User) => {
-    console.log(index, row)
-}
-const handleDelete = (index: number, row: User) => {
-    console.log(index, row)
-}
-
-const tableData: User[] = [
-    {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-]
-</script>