后台页面补丁

# Conflicts:
#	src/views/error-log/index.vue
#	src/views/tab/index.vue
#	src/views/table/dynamic-table/index.vue
#	src/views/theme/index.vue

.env.build_test

@@ -2,5 +2,5 @@
 NODE_ENV = 'production'
 
 # 打包模式连测试服
-#VUE_APP_BASE_API = './api-test'
+VUE_APP_BASE_API = './api-test'
 VUE_APP_BASE_API = '/'

.env.dev_prod

@@ -4,4 +4,4 @@ NODE_ENV = 'development'
 # 开发模式连生产服
 VUE_APP_BASE_API = '/api-prod'
 VUE_APP_COOKIE = ''
-VUE_APP_BASE_API2 = 'http://nbxt.oa.x-lf.cn'
+VUE_APP_INNER='http://nbxt.oa.x-lf.cn'

components.d.ts

@@ -13,46 +13,33 @@ 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']
+    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']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     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']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     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']
@@ -79,7 +66,4 @@ declare module '@vue/runtime-core' {
     UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default']
     VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

mock/demo/user.js

@@ -5,7 +5,7 @@ const tokens = {
   },
   editor: {
     token: 'editor-token'
-  }
+  },
 };
 
 const users = {
@@ -20,13 +20,13 @@ const users = {
     introduction: 'I am an editor',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Normal Editor'
-  }
+  },
 };
 
 export default [
   // user login
   {
-    url: '/vue-element-admin/user/login',
+    url: '/auth/login',
     method: 'post',
     response: config => {
       const { username } = config.body;

package-lock.json

@@ -30,6 +30,7 @@
         "xlsx": "0.18.5"
       },
       "devDependencies": {
+        "@types/sortablejs": "^1.15.8",
         "@vitejs/plugin-vue": "3.2.0",
         "@vitejs/plugin-vue-jsx": "2.1.1",
         "@vue/cli-plugin-typescript": "5.0.8",
@@ -1211,6 +1212,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",

package.json

@@ -33,6 +33,7 @@
     "xlsx": "0.18.5"
   },
   "devDependencies": {
+    "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "3.2.0",
     "@vitejs/plugin-vue-jsx": "2.1.1",
     "@vue/cli-plugin-typescript": "5.0.8",

src/api/article.js

@@ -1,10 +1,17 @@
 import request from '@/utils/request';
-
-export function fetchList(query) {
+function getCurrentTimestamp() {
+  return new Date().getTime();
+}
+export function SystemGetByProjId(projectId, token) {
   return request({
-    url: '/vue-element-admin/article/list',
+    url: '/module/get',
     method: 'get',
-    params: query
+    params: { projectId },
+    headers: {
+      'Authorization':'Bearer '+token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
   });
 }
 

src/api/user.js

@@ -1,24 +1,40 @@
 import request from '@/utils/request';
+
+
+function getCurrentTimestamp() {
+  return new Date().getTime();
+}
 export function login(data) {
   return request({
     url: '/auth/login',
     method: 'post',
-    data
+    data,
+    headers: {
+      'Timestamp':getCurrentTimestamp()
+    }
   });
 }
 
 export function getInfo(token) {
   return request({
-    url: '/vue-element-admin/user/info',
+    url: '/user/profile/get',
     method: 'get',
-    params: { token }
+    // params: {token},
+    headers: {
+      'Authorization':'Bearer '+token,
+      'Timestamp': getCurrentTimestamp()
+    }
   });
 }
 
+
 export function logout(token) {
   return request({
-    url: '/vue-element-admin/user/logout',
-    method: 'post',
-    params: { token }
+    url: '/auth/logout',
+    method: 'get',
+    headers: {
+      'Authorization':'Bearer '+token,
+      'Timestamp': getCurrentTimestamp()
+    }
   });
 }

src/components/Breadcrumb/index.vue

@@ -3,7 +3,7 @@
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
         <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
-            item.meta.title
+             item.meta.title
         }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>

src/components/Hamburger/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <!--    顶部缩放侧边栏icon-->
   <div style="padding: 0 15px;" @click="toggleClick">
     <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
       width="64" height="64">

src/components/Screenfull/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <!--    顶部全屏icon-->
   <div>
     <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
   </div>

src/layout/components/Navbar.vue

@@ -62,6 +62,7 @@ import Search from '@/components/HeaderSearch';
 import { defineComponent } from 'vue';
 import { CaretBottom } from '@element-plus/icons-vue';
 
+
 export default defineComponent({
   components: {
     Breadcrumb,
@@ -86,7 +87,10 @@ export default defineComponent({
       store.app().toggleSidebar();
     },
     async logout() {
+        console.log('5989569898')
+        // store.user().login()
       await store.user().logout();
+      console.log('hhhh')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     }
   }

src/layout/components/Sidebar/index.vue

@@ -35,7 +35,7 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(store.app, ['sidebar']),
+    ...mapState(store.app, ['Sidebar']),
     ...mapState(store.permission, {
       permission_routes: 'routes'
     }),

src/permission.ts

@@ -10,6 +10,7 @@ NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
 const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist
 
+//每次路由变动，都会调用这个路由守卫
 router.beforeEach(async (to, from, next) => {
   console.log('router.beforeEach', to.path, from.path);
   // start progress bar
@@ -20,29 +21,43 @@ router.beforeEach(async (to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken();
+  console.log('88888',hasToken)
 
   if (hasToken) {
+    //有token
+    // 且前往登录
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
       NProgress.done(); // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
       next({ path: '/' });
     } else {
+      // 有token，但是不去登录
       // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = userStore().roles && userStore().roles.length > 0;
+      // const hasRoles = userStore().roles && userStore().roles.length > 0;
+      const hasRoles = true;
+
       // console.log('hasRoles=', hasRoles);
+      // 如果用角色
       if (hasRoles) {
+        // 继续执行
+        const accessRoutes = await permissionStore().generateRoutes(['admin']);
+        accessRoutes.forEach(item => {
+          router.addRoute(item);
+        });
         next();
       } else {
+        // 没有角色
         try {
           // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const infoRes = await userStore().getInfo() as any;
-          let roles = [];
+          const infoRes = await userStore().getInfo() as any;     //获取角色，调用查询个人信息的接口
+          console.log('permissionuserinfor:',infoRes)
+          let roles:any = [];
           if (infoRes.roles) {
             roles = infoRes.roles;
           }
-
+          roles = ['admin']
           // generate accessible routes map based on roles
           const accessRoutes = await permissionStore().generateRoutes(roles);
           // console.log('accessRoutes=', accessRoutes)
@@ -68,6 +83,7 @@ router.beforeEach(async (to, from, next) => {
       }
     }
   } else {
+    // 没有token
     /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly

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 chartsRouter from './modules/charts';
-// import nestedRouter from './modules/nested';
+import componentsRouter from './modules/components';
+import chartsRouter from './modules/charts';
+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: '/',
-  //   component: Layout,
-  //   redirect: '/dashboard',
-  //   children: [
-  //     {
-  //       path: 'dashboard',
-  //       component: () => import('@/views/dashboard/index.vue'),
-  //       name: 'Dashboard',
-  //       meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/documentation',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/documentation/index.vue'),
-  //       name: 'Documentation',
-  //       meta: { title: 'Documentation', icon: 'documentation', affix: true }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/guide',
-  //   component: Layout,
-  //   redirect: '/guide/index',
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/guide/index.vue'),
-  //       name: 'Guide',
-  //       meta: { title: 'Guide', icon: 'guide', noCache: true }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        component: () => import('@/views/dashboard/index.vue'),
+        name: 'Dashboard',
+        meta: { title: '我管理的', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/documentation',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/documentation/index.vue'),
+        name: 'Documentation',
+        meta: { title: 'Documentation', icon: 'documentation', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/guide',
+    component: Layout,
+    redirect: '/guide/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/guide/index.vue'),
+        name: 'Guide',
+        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
-      title: '内部系统'
-      // icon: 'lock'
-      // roles: ['admin', 'editor'] // you can set roles in root nav
+      alwaysShow: true, // will always show the root menu
+      title: 'Permission',
+      icon: 'lock',
+      roles: ['admin', 'editor','teacher_user', 'xiao_lfeng'] // you can set roles in root nav
     },
     children: [
-      // {
-      //   path: 'page',
-      //   component: () => import('@/views/permission/page.vue'),
-      //   name: 'PagePermission',
-      //   meta: {
-      //     title: 'Page Permission',
-      //     roles: ['admin'] // or you can only set roles in sub nav
-      //   }
-      // },
-      // {
-      //   path: 'directive',
-      //   component: () => import('@/views/permission/directive.vue'),
-      //   name: 'DirectivePermission',
-      //   meta: {
-      //     title: 'Directive Permission'
-      //     // if do not set roles, means: this page does not require permission
-      //   }
-      // },
-      // {
-      //   path: 'role',
-      //   component: () => import('@/views/permission/role.vue'),
-      //   name: 'RolePermission',
-      //   meta: {
-      //     title: 'Role Permission',
-      //     roles: ['admin']
-      //   }
-      // }
+      {
+        path: 'page',
+        component: () => import('@/views/permission/page.vue'),
+        name: 'PagePermission',
+        meta: {
+          title: 'Page Permission',
+          roles: ['admin','teacher_user'] // or you can only set roles in sub nav
+        }
+      },
+      {
+        path: 'directive',
+        component: () => import('@/views/permission/directive.vue'),
+        name: 'DirectivePermission',
+        meta: {
+          title: 'Directive Permission'
+          // if do not set roles, means: this page does not require permission
+        }
+      },
+      {
+        path: 'role',
+        component: () => import('@/views/permission/role.vue'),
+        name: 'RolePermission',
+        meta: {
+          title: 'Role Permission',
+          roles: ['admin','teacher']
+        }
+      }
     ]
   },
 
-  // {
-  //   path: '/icon',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/icons/index.vue'),
-  //       name: 'Icons',
-  //       meta: { title: 'Icons', icon: 'icon', noCache: true }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/icon',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/icons/index.vue'),
+        name: 'Icons',
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
+      }
+    ]
+  },
 
   // /** when your routing map is too long, you can split it into small modules **/
-  // componentsRouter,
-  // chartsRouter,
-  // nestedRouter,
+  componentsRouter,
+  chartsRouter,
+  nestedRouter,
   tableRouter,
-  //
-  // {
-  //   path: '/example',
-  //   component: Layout,
-  //   redirect: '/example/list',
-  //   name: 'Example',
-  //   meta: {
-  //     title: 'Example',
-  //     icon: markRaw(IconHelp)
-  //   },
-  //   children: [
-  //     {
-  //       path: 'create',
-  //       component: () => import('@/views/example/create.vue'),
-  //       name: 'CreateArticle',
-  //       meta: { title: 'Create Article', icon: 'edit' }
-  //     },
-  //     {
-  //       path: 'edit/:id(\\d+)',
-  //       component: () => import('@/views/example/edit.vue'),
-  //       name: 'EditArticle',
-  //       meta: { hidden: true, title: 'Edit Article', noCache: true, activeMenu: '/example/list' }
-  //     },
-  //     {
-  //       path: 'list',
-  //       component: () => import('@/views/example/list.vue'),
-  //       name: 'ArticleList',
-  //       meta: { title: 'Article List', icon: 'list' }
-  //     }
-  //   ]
-  // },
+
+  {
+    path: '/example',
+    component: Layout,
+    redirect: '/example/list',
+    name: 'Example',
+    meta: {
+      title: 'Example',
+      icon: markRaw(IconHelp)
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/example/create.vue'),
+        name: 'CreateArticle',
+        meta: { title: 'Create Article', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id(\\d+)',
+        component: () => import('@/views/example/edit.vue'),
+        name: 'EditArticle',
+        meta: { hidden: true, title: 'Edit Article', noCache: true, activeMenu: '/example/list' }
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/example/list.vue'),
+        name: 'ArticleList',
+        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',
-  //   component: Layout,
-  //   redirect: 'noRedirect',
-  //   name: 'ErrorPages',
-  //   meta: {
-  //     title: 'Error Pages',
-  //     icon: '404'
-  //   },
-  //   children: [
-  //     {
-  //       path: '401',
-  //       component: () => import('@/views/error-page/401.vue'),
-  //       name: 'Page401',
-  //       meta: { title: '401', noCache: true }
-  //     },
-  //     {
-  //       path: '404',
-  //       component: () => import('@/views/error-page/404.vue'),
-  //       name: 'Page404',
-  //       meta: { title: '404', noCache: true }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'ErrorPages',
+    meta: {
+      title: 'Error Pages',
+      icon: '404'
+    },
+    children: [
+      {
+        path: '401',
+        component: () => import('@/views/error-page/401.vue'),
+        name: 'Page401',
+        meta: { title: '401', noCache: true }
+      },
+      {
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        name: 'Page404',
+        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',
-  //   component: Layout,
-  //   redirect: '/zip/download',
-  //   name: 'Zip',
-  //   meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
-  //   children: [
-  //     {
-  //       path: 'download',
-  //       component: () => import('@/views/zip/index.vue'),
-  //       name: 'ExportZip',
-  //       meta: { title: 'Export Zip' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/zip',
+    component: Layout,
+    redirect: '/zip/download',
+    name: 'Zip',
+    meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
+    children: [
+      {
+        path: 'download',
+        component: () => import('@/views/zip/index.vue'),
+        name: 'ExportZip',
+        meta: { title: 'Export Zip' }
+      }
+    ]
+  },
 
-  // {
-  //   path: '/pdf',
-  //   component: Layout,
-  //   redirect: '/pdf/index',
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/pdf/index.vue'),
-  //       name: 'PDF',
-  //       meta: { title: 'PDF', icon: 'pdf' }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/pdf/download',
-  //   component: () => import('@/views/pdf/download.vue'),
-  //   meta: { hidden: true }
-  // },
+  {
+    path: '/pdf',
+    component: Layout,
+    redirect: '/pdf/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/pdf/index.vue'),
+        name: 'PDF',
+        meta: { title: 'PDF', icon: 'pdf' }
+      }
+    ]
+  },
+  {
+    path: '/pdf/download',
+    component: () => import('@/views/pdf/download.vue'),
+    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',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/clipboard/index.vue'),
-  //       name: 'ClipboardDemo',
-  //       meta: { title: 'Clipboard', icon: 'clipboard' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/clipboard',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/clipboard/index.vue'),
+        name: 'ClipboardDemo',
+        meta: { title: 'Clipboard', icon: 'clipboard' }
+      }
+    ]
+  },
 
-  // {
-  //   path: '/external-link',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'https://element-plus.midfar.com',
-  //       meta: { title: 'External Link', icon: 'link' },
-  //       redirect: ''
-  //     }
-  //   ]
-  // },
-  //
-  // {
-  //   path: '/my-demo',
-  //   component: Layout,
-  //   name: 'MyDemo',
-  //   meta: {
-  //     title: 'MyDemo',
-  //     icon: 'component'
-  //   },
-  //   children: [
-  //     {
-  //       path: 'element-demo',
-  //       component: () => import('@/views/mydemo/ElementDemo.vue'),
-  //       name: 'ElementDemo',
-  //       meta: { title: 'ElementDemo', icon: 'skill' }
-  //     },
-  //     {
-  //       path: 'store-demo',
-  //       component: () => import('@/views/mydemo/StoreDemo.vue'),
-  //       name: 'StoreDemo',
-  //       meta: { title: 'StoreDemo', icon: 'lock' }
-  //     },
-  //     {
-  //       path: 'webSocket-demo',
-  //       component: () => import('@/views/mydemo/WebSocketDemo.vue'),
-  //       name: 'WebSocketDemo',
-  //       meta: { title: 'WebSocketDemo', icon: 'lock' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/external-link',
+    component: Layout,
+    children: [
+      {
+        path: 'https://element-plus.midfar.com',
+        meta: { title: 'External Link', icon: 'link' },
+        redirect: ''
+      }
+    ]
+  },
+
+  {
+    path: '/my-demo',
+    component: Layout,
+    name: 'MyDemo',
+    meta: {
+      title: 'MyDemo',
+      icon: 'component'
+    },
+    children: [
+      {
+        path: 'element-demo',
+        component: () => import('@/views/mydemo/ElementDemo.vue'),
+        name: 'ElementDemo',
+        meta: { title: 'ElementDemo', icon: 'skill' }
+      },
+      {
+        path: 'store-demo',
+        component: () => import('@/views/mydemo/StoreDemo.vue'),
+        name: 'StoreDemo',
+        meta: { title: 'StoreDemo', icon: 'lock' }
+      },
+      {
+        path: 'webSocket-demo',
+        component: () => import('@/views/mydemo/WebSocketDemo.vue'),
+        name: 'WebSocketDemo',
+        meta: { title: 'WebSocketDemo', icon: 'lock' }
+      }
+    ]
+  },
 
   // 404 page must be placed at the end !!!
   { path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true }}

src/store/modules/permission.ts

@@ -55,10 +55,15 @@ export default defineStore({
       this.routes = constantRoutes.concat(routes);
     },
     generateRoutes(roles: string[]) {
+      console.log("asdasd")
       let accessedRoutes;
       if (roles.includes('admin')) {
+        console.log("123")
+
         accessedRoutes = asyncRoutes || [];
       } else {
+        console.log("456")
+
         accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
       }
       this.setRoutes(accessedRoutes);

src/store/modules/user.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { login as apiLogin, logout as apiLogout, getInfo as apiGetInfo } from '@/api/user';
+import {login as apiLogin, logout as apiLogout, getInfo as apiGetInfo, } from '@/api/user';
 import { getToken, setToken, removeToken } from '@/utils/auth';
 import router, { resetRouter } from '@/router';
 import tagsViewStore from './tagsView';
@@ -16,26 +16,53 @@ export interface IUserState {
 
 export default defineStore({
   id: 'user',
-  state: ():IUserState => ({
+  state: ():{
+    address: string;
+    signature: string;
+    sex: string;
+    roles: any[];
+    description: string;
+    avatar: string;
+    token: any;
+    phone: string;
+    nickname: string;
+    id: string;
+    email: string;
+    age: string;
+    username: string
+  } => ({
     token: getToken(),
-    userId: '',
-    name: '',
-    avatar: '',
-    introduction: '',
-    roles: []
+    id:'',
+    username:'',
+    address:'',
+    phone:'',
+    email:'',
+    age:'',
+    signature:'',
+    avatar:'',
+    nickname:'',
+    sex:'',
+    description:'',
+    roles:['admin']
   }),
   getters: {},
   actions: {
     // user login
-    login({ commit }, userInfo):Promise<void> {
+
+
+    login(userInfo):Promise<void> {
       const { username, password } = userInfo;
       return new Promise((resolve, reject) => {
-        apiLogin({ username: username.trim(), password: password }).then(response => {
+        apiLogin({ user: username.trim(), password: password }).then(response => {
           const { data } = response;
-          commit('SET_TOKEN', data.token);
+          this.token = data.token;
           setToken(data.token);
+          console.log("token", this.token)
+          router.push('/')
           resolve();
+          console.log('2222',response)
         }).catch(error => {
+          console.log('3333',error)
           reject(error);
         });
       });
@@ -46,22 +73,28 @@ export default defineStore({
       return new Promise((resolve, reject) => {
         apiGetInfo(this.token).then(response => {
           const { data } = response;
-
+          console.log('66666',data)
           if (!data) {
             reject('Verification failed, please Login again.');
           }
-
-          const { roles, name, avatar, introduction } = data;
-
+          const { id,username,address,phone,email,age,signature,avatar,nickname,sex,description } = data;
           // roles must be a non-empty array
-          if (!roles || roles.length <= 0) {
-            reject('getInfo: roles must be a non-null array!');
-          }
-
-          this.roles = roles;
-          this.name = name;
+          // if (!roles || roles.length <= 0) {
+          //   reject('getInfo: roles must be a non-null array!');
+          // }
+          this.id = id;
+          // this.roles = roles;
+          // this.roles =['admin'];
+          this.username = username;
           this.avatar = avatar;
-          this.introduction = introduction;
+          this.description = description;
+          this.sex = sex;
+          this.age = age;
+          this.address = address;
+          this.phone = phone;
+          this.email = email;
+          this.signature = signature;
+          this.nickname = nickname;
           resolve(data);
         }).catch(error => {
           reject(error);
@@ -71,17 +104,17 @@ export default defineStore({
 
     // user logout
     logout():Promise<void> {
+      console.log("token",this.token)
       return new Promise((resolve, reject) => {
         apiLogout(this.token).then(() => {
           this.token = '';
           this.roles = [];
+          console.log('退出',this.token)
           removeToken();
           resetRouter();
-
           // reset visited views and cached views
           // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
           tagsViewStore().delAllViews();
-
           resolve();
         }).catch(error => {
           reject(error);
@@ -105,11 +138,11 @@ export default defineStore({
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const infoRes = await this.getInfo() as any;
-      let roles = [];
+      let roles : any[] = [];
       if (infoRes.roles) {
         roles = infoRes.roles;
       }
-
+      roles = ['admin']
       resetRouter();
 
       // generate accessible routes map based on roles

src/utils/request.js

@@ -1,30 +1,25 @@
 import axios from 'axios';
 import store from '@/store';
-import { getToken } from '@/utils/auth';
+import {getToken, removeToken} from '@/utils/auth';
 
+const BaseURL ='https://nbxt.oa.x-lf.cn'
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: BaseURL, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 10000 // request timeout
 });
 
-const service2 = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
-  // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
-});
 
-// request interceptor
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-
+    console.log('wwww')
     if (store.user().token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken();
+      config.headers['Token'] = getToken();
     }
     return config;
   },
@@ -35,6 +30,8 @@ service.interceptors.request.use(
   }
 );
 
+
+
 // response interceptor
 service.interceptors.response.use(
   /**
@@ -49,9 +46,10 @@ service.interceptors.response.use(
    */
   response => {
     const res = response.data;
-
+    // console.log("removeToken:",removeToken())
+    console.log('999999',response)
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 20000 && res.code !== 200) {
       ElMessage({
         message: res.message || 'Error',
         type: 'error',
@@ -86,74 +84,6 @@ service.interceptors.response.use(
   }
 );
 
-service2.interceptors.request.use(
-  config => {
-    // do something before request is sent
-
-    if (store.user().token) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken();
-    }
-    return config;
-  },
-  error => {
-    // do something with request error
-    console.log(error); // for debug
-    return Promise.reject(error);
-  }
-);
 
 // response interceptor
-service2.interceptors.response.use(
-  /**
-   * If you want to get http information such as headers or status
-   * Please return  response => response
-   */
-
-  /**
-   * Determine the request status by custom code
-   * Here is just an example
-   * You can also judge the status by HTTP Status Code
-   */
-  response => {
-    const res = response.data;
-
-    // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
-      ElMessage({
-        message: res.message || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      });
-
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        // to re-login
-        ElMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.user().resetToken();
-          location.reload();
-        });
-      }
-      return Promise.reject(new Error(res.message || 'Error'));
-    } else {
-      return res;
-    }
-  },
-  error => {
-    console.log('err' + error); // for debug
-    ElMessage({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    });
-    return Promise.reject(error);
-  }
-);
-
-export default { service, service2 };
+export default service ;

src/utils/validate.ts

@@ -15,7 +15,7 @@ export function isExternal(path) {
  * @returns {Boolean}
  */
 export function validUsername(str) {
-  const valid_map = ['admin', 'editor'];
+  const valid_map = ['admin', 'editor', 'teacher_user', 'xiao_lfeng'];
   return valid_map.indexOf(str.trim()) >= 0;
 }
 

src/views/dashboard/admin/components/TransactionTable.vue

@@ -32,7 +32,7 @@ export default defineComponent({
     };
   },
   created() {
-    this.fetchData();
+    // this.fetchData();
   },
   methods: {
     statusFilter(status) {

src/views/error-log/index.vue

@@ -1,9 +1,10 @@
-
 <template>
-
-    <div style=" width:100%">
+  
+  <div style=" width:100%">
         <el-card style="max-width: 100vw;margin: 1.5vw;">
-            <template #header><span>消息</span></template>
+          <template #header>
+                <span>消息</span>
+            </template>
             <div style="display:flex;flex-direction:row;justify-content: space-around ">
                 <div>
                     时间
@@ -11,11 +12,12 @@
                         v-model="value2"
                         type="daterange"
                         unlink-panels
-                        range-separator="To"
+                        range-separator="——"
                         start-placeholder="开始时间"
                         end-placeholder="结束时间"
                         :shortcuts="shortcuts"
                         :size="large"
+                        style="margin-left:0.5vw"
                     />
                 </div>
                 <div>
@@ -23,8 +25,8 @@
                     <el-select
                         v-model="value"
                         clearable
-                        placeholder="Select"
-                        style="width: 240px"
+                        placeholder="Status"
+                        style="width: 240px;margin-left:0.5vw"
                     >
                         <el-option
                             v-for="item in options"
@@ -37,13 +39,13 @@
                 </div>
 
                 <div>
-                    <el-button type="primary">查询</el-button>
-                    <el-button>重置</el-button>
+                  <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
 
                 </div>
             </div>
         </el-card>
-        <el-card style="max-width: 100vw;height:50vh;margin:1.3vw">
+        <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
@@ -64,26 +66,41 @@
                 </div>
                 <div class="table-cell table-cell-right">
                     <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
+                    <el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
+                    <el-dialog v-model="centerDialogVisible" title="删除" width="500"  :modal="false">
+    <span>
+是否确认删除此条信息？
+    </span>
+                        <template #footer>
+                            <div class="dialog-footer">
+                                <el-button @click="centerDialogVisible = false">取消</el-button>
+                                <el-button type="primary" @click="centerDialogVisible = false">
+                                    确认
+                                </el-button>
+                            </div>
+                        </template>
+                    </el-dialog>
                 </div>
             </div>
             <el-pagination
-
+                size="large"
                 background
                 layout="prev, pager, next"
                 :total="50"
-                class="mt-[5vh]"
+                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
             />
         </el-card>
 
     </div>
+
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+// 删除对话框
+const centerDialogVisible = ref(false);
 // 时间选择器
-
 const value2 = ref('');
-
 const shortcuts = [
   {
     text: 'Last week',
@@ -120,15 +137,15 @@ const value = ref('');
 const options = [
   {
     value: 'Option1',
-    label: 'Option1'
+    label: '未开始'
   },
   {
     value: 'Option2',
-    label: 'Option2'
+    label: '进行中'
   },
   {
     value: 'Option3',
-    label: 'Option3'
+    label: '暂停'
   },
   {
     value: 'Option4',
@@ -136,7 +153,7 @@ const options = [
   },
   {
     value: 'Option5',
-    label: 'Option5'
+    label: '已完成'
   }
 ];
 
@@ -167,6 +184,11 @@ const tableData: User[] = [
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles'
   },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
   {
     date: '2016-05-01',
     name: 'Tom',
@@ -216,4 +238,4 @@ const tableData: User[] = [
 .date el-icon {
     margin-right: 10px;
 }
-</style>
+</style>

src/views/login/index.vue

@@ -30,7 +30,7 @@
       </el-tooltip>
 
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.prevent="handleLogin">
-        登录</el-button>
+        Login</el-button>
 
       <div style="position:relative">
         <div class="tips">
@@ -65,6 +65,7 @@ import SocialSign from './components/SocialSignin.vue';
 import type { FormItemRule } from 'element-plus';
 import type { IForm } from '@/types/element-plus';
 import store from '@/store';
+
 export default defineComponent({
   name: 'Login',
   components: { SocialSign },
@@ -85,7 +86,7 @@ export default defineComponent({
     };
     return {
       loginForm: {
-        username: 'teacher_demo',
+        username: 'teacher_user',
         password: '123456'
       },
       loginRules: {
@@ -144,7 +145,7 @@ export default defineComponent({
       (this.$refs.loginForm as IForm).validate(valid => {
         if (valid) {
           this.loading = true;
-          this.$store.dispatch("login", this.loginForm)
+          store.user().login(this.loginForm)
             .then(() => {
               this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
               this.loading = false;
@@ -166,6 +167,24 @@ export default defineComponent({
         return acc;
       }, {});
     }
+    // afterQRScan() {
+    //   if (e.key === 'x-admin-oauth-code') {
+    //     const code = getQueryObject(e.newValue)
+    //     const codeMap = {
+    //       wechat: 'code',
+    //       tencent: 'code'
+    //     }
+    //     const type = codeMap[this.auth_type]
+    //     const codeName = code[type]
+    //     if (codeName) {
+    //       store.user().LoginByThirdparty(codeName).then(() => {
+    //         this.$router.push({ path: this.redirect || '/' })
+    //       })
+    //     } else {
+    //       alert('第三方登录失败')
+    //     }
+    //   }
+    // }
   }
 });
 </script>

src/views/redirect/index.vue

@@ -3,7 +3,7 @@ import { defineComponent, h } from 'vue';
 
 export default defineComponent({
   created() {
-    // console.log('redirect', this.$route);
+    //console.log('redirect', this.$route);
     const { params, query } = this.$route;
     const { path } = params;
     this.$router.replace({ path: '/' + path, query });

src/views/tab/index.vue

@@ -1,161 +1,148 @@
-<!--<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 style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><span>日报</span></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          项目
+          <el-autocomplete 
+              v-model="state"
+               :fetch-suggestions="querySearch"
+               popper-class="my-autocomplete"
+              placeholder="Please input" 
+              @select="handleSelect" 
+               style="margin-left:0.5vw"
+          >
+            <template #suffix>
+              <el-icon class="el-input__icon" @click="handleIconClick">
+                <ArrowDownBold />
+              </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="——" 
+             start-placeholder="开始时间"
+             end-placeholder="结束时间"
+             :shortcuts="shortcuts" 
+             style="margin-left:0.5vw" 
+            />
+        </div>
+        <div>
+          <el-button type="primary" style="width: 80px">查询</el-button>
+               <el-button style="width: 80px">重置</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 >历史记录</el-button>
+        <el-button type="primary" @click="AddDialogVisible=true">新建</el-button>
+                    <el-dialog v-model="AddDialogVisible"  width="500" center :modal="false" :show-close="false">
+                        <template #header>
+                         <div style="display:flex;flex-direction: row;justify-content: flex-start;color:red;font-size:large" >新增日报</div>
+                            <el-divider content-position="left" style="background:red"><el-icon><CaretTop /></el-icon></el-divider>
+                        </template>
 
-    <div style=" width:100%">
-        <el-card style="max-width: 100vw;margin: 1.5vw;">
-            <template #header><span>日报</span></template>
-            <div style="display:flex;flex-direction:row;justify-content: space-around ">
-            <div>
-                项目
-                <el-autocomplete
-                    v-model="state"
-                    :fetch-suggestions="querySearch"
-                    popper-class="my-autocomplete"
-                    placeholder="Please input"
-                    @select="handleSelect"
-                >
-                    <template #suffix>
-                        <el-icon class="el-input__icon" @click="handleIconClick">
-                            <edit />
-                        </el-icon>
+                        <div>
+                            <div style="margin-top:-4vh ">
+	                                <span style="color:red">项目名称：</span>
+                                <el-input
+                                    v-model="input"
+                                    style="width: 200px"
+                                    placeholder="请输入"
+                                />
+                            </div>
+                            <div style="margin-top:2vh ">
+	                               <span style="color:red"> 工作时间：</span>
+                                <el-date-picker
+                                    v-model="value1"
+                                    type="date"
+                                    placeholder="请选择日期"
+                                    style="width: 200px"
+                                    :default-value="new Date(2010, 9, 1)"
+                                />
+                            </div>
+                            <div style="margin-top:2vh ;display:flex;flex-direction:row;">
+	                                <span style="color: red">日报内容：</span>
+                                <el-input
+                                    v-model="textarea"
+                                    style="width: 300px;"
+                                    :rows="4"
+                                    type="textarea"
+                                    placeholder="请输入"
+                                />
+                            </div>
+                        </div>
+                    <template #footer>
+                        <div class="dialog-footer">
+                            <el-button @click="AddDialogVisible = false" type="info" style="width: 80px">取消  </el-button>
+                            <el-button type="danger" style="width:80px" @click="AddDialogVisible = false">
+                                新增
+                            </el-button>
+                        </div>
                     </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-dialog>
+      </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>
+          <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>-->
+        <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 size="small" text style="color:deepskyblue" @click="EditDialogVisible = true">修改</el-button>
+            <el-dialog v-model="EditDialogVisible" title="删除" width="500"  :modal="false">
+                <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="EditDialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="EditDialogVisible = false">
+                            确认
+                        </el-button>
+                    </div>
+                </template>
+            </el-dialog>
+        </el-table-column>
+      </el-table>
+      <el-pagination 
+          larger 
+          background 
+          layout="prev, pager, next" 
+          :total="50" class="mt-4" 
+          style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+         />
+    </el-card>
+ 
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElTable } from 'element-plus';
-
+import { ArrowDownBold, CaretTop } from '@element-plus/icons-vue';
+const value1 = ref('');
+// 修改对话框
+const EditDialogVisible = ref(false);
+// 新建对话框
+const AddDialogVisible = ref(false);
 interface User {
-    date: string
-    name: string
-    address: string
+  date: string
+  name: string
+  address: string
 }
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@@ -191,11 +178,11 @@ const tableData: User[] = [
 
 // 输入框1
 import { onMounted } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
+
 
 interface LinkItem {
-    value: string
-    link: string
+  value: string
+  link: string
 }
 
 const state = ref('');
@@ -205,7 +192,7 @@ const querySearch = (queryString: string, cb) => {
   const results = queryString
     ? links.value.filter(createFilter(queryString))
     : links.value;
-    // call callback function to return suggestion objects
+  // call callback function to return suggestion objects
   cb(results);
 };
 const createFilter = (queryString) => {
@@ -238,7 +225,7 @@ onMounted(() => {
 });
 
 // 时间选择器
-const value1 = ref('');
+
 const value2 = ref('');
 
 const shortcuts = [
@@ -271,20 +258,24 @@ const shortcuts = [
   }
 ];
 </script>
+
 <style>
 .my-autocomplete li {
-    line-height: normal;
-    padding: 7px;
+  line-height: normal;
+  padding: 7px;
 }
+
 .my-autocomplete li .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
+
 .my-autocomplete li .addr {
-    font-size: 12px;
-    color: #b4b4b4;
+  font-size: 12px;
+  color: #b4b4b4;
 }
+
 .my-autocomplete li .highlighted .addr {
-    color: #ddd;
+  color: #ddd;
 }
-</style>
+</style>

src/views/table/drag-table.vue

@@ -32,17 +32,51 @@
   <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-column prop="id" label="序号">
+          <template v-slot="{row}">
+            <span>{{ row.id }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="子系统称">
+          <template v-slot="{row}">
+            <span>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="workLoad" label="工作量">
+          <template v-slot="{row}">
+            <span>{{ row.workLoad }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="cycle" label="周期">
+          <template v-slot="{row}">
+            <span>{{ row.cycle }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="principalId" label="负责人">
+          <template v-slot="{row}">
+            <span>{{ row.principalId }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template v-slot="{row}">
+            <span>{{ row.status }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="子系统简介">
+          <template v-slot="{row}">
+            <span>{{ row.description }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="id" label="文档（点击下载）">
+          <template v-slot="{row}">
+            <span>{{ row.id }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="completeTime" label="截止时间">
+          <template v-slot="{row}">
+            <span>{{ row.completeTime }}</span>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <div style="display: flex; justify-content: center;margin-top: 2vh">
@@ -90,8 +124,8 @@ const tableData = [
   },
 ];
 </script>
-<!--
-<template>
+
+<!--<template>
   <div class="app-container">
     &lt;!&ndash; Note that row-key is necessary to get a correct row order. &ndash;&gt;
     <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
@@ -156,20 +190,22 @@ const tableData = [
 
 <script>
 import { defineComponent } from 'vue';
-import { fetchList } from '@/api/article';
-import Sortable from 'sortablejs';
+import { SystemGetByProjId } from '@/api/article';
+import Sortable from "sortablejs";
 import { parseTime } from '@/utils';
+const token: string | null = window.localStorage.getItem('token')
 
 export default defineComponent({
   name: 'DragTable',
   data() {
     return {
-      list: null,
+      list: [],
       total: null,
       listLoading: true,
       listQuery: {
-        page: 1,
-        limit: 10
+        /* page: 1,
+        limit: 10 */
+        projectId:'',
       },
       sortable: null,
       oldList: [],
@@ -191,7 +227,7 @@ export default defineComponent({
     },
     async getList() {
       this.listLoading = true;
-      const { data } = await fetchList(this.listQuery);
+      const { data } = await SystemGetByProjId(this.listQuery, token);
       this.list = data.items;
       this.total = data.total;
       this.listLoading = false;
@@ -222,7 +258,7 @@ export default defineComponent({
     }
   }
 });
-</script>
+</script>-->
 
 <style>
 .sortable-ghost{
@@ -245,4 +281,3 @@ export default defineComponent({
   margin-top: 15px;
 }
 </style>
--->

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

@@ -0,0 +1,137 @@
+
+<template>
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;max-height:100vh;height:80vh ">
+            <template #header>
+                <strong>子模块1</strong>
+            </template>
+
+            <!--            <div  style=" display: flex;flex-direction: column;justify-content: center">-->
+            <div class="ModuleData" style="margin-left: 30vw;width: 24vw;height: 55vh;display: flex;flex-direction: column;justify-content: space-around;
+">
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>01.模块名称 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>02.模块周期</strong>
+                    <span  style="width: 250px">13天</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>03.工作量 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>04.负责人 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>05.状态 </strong>
+                    <el-autocomplete
+                            v-model="state"
+                            :fetch-suggestions="querySearch"
+                            popper-class="my-autocomplete"
+                            placeholder="Please input"
+                            @select="handleSelect"
+                            style="width: 250px"
+                    >
+                        <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 style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>06.截止时间 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>07.简介 </strong>
+                    <el-input
+                            v-model="textarea2"
+                            style="width: 250px"
+                            :autosize="{ minRows: 4, maxRows: 6 }"
+                            type="textarea"
+                            placeholder="Please input"
+                            :row="4"
+                    />
+                </div>
+            </div>
+            <!--            </div>-->
+        </el-card>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } 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: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' }
+    ];
+};
+const handleSelect = (item: LinkItem) => {
+    console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+    console.log(ev);
+};
+
+onMounted(() => {
+    links.value = loadAll();
+});
+</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/table/dynamic-table/EngageChildSystem.vue

@@ -0,0 +1,202 @@
+<template>
+
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+            <template #header><strong >子系统1</strong></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <div>
+                    名称
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    状态
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</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="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+            />
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+
+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: 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);
+};
+
+// 时间选择器
+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/table/dynamic-table/index.vue

@@ -1,105 +1,71 @@
-<!--<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 style=" width:100%">
-        <el-card style="max-width: 100vw;margin: 1.5vw;">
-            <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"
-            >
+  <div style=" width:100%">
+      <el-card style="max-width: 100vw;margin: 1.5vw;">
+        <template #header><strong >项目1</strong></template>
+          <div style="display:flex;flex-direction:row;justify-content: space-around ">
+              <div>
+                  名称
+                  <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+              </div>
+              <div>
+                  状态
+                  <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+              </div>
+              <div>
+                <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</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>-->
+              <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="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+          />
+      </el-card>
+   
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElTable } from 'element-plus';
-
 interface User {
     date: string
     name: string
@@ -137,87 +103,7 @@ const tableData: User[] = [
 
 ];
 
-// 输入框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 {
@@ -235,4 +121,4 @@ const shortcuts = [
 .my-autocomplete li .highlighted .addr {
     color: #ddd;
 }
-</style>
+</style>

src/views/theme/index.vue

@@ -1,227 +1,140 @@
-<!--<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 v-for="(row, index) in tableData" :key="index" class="table-row">
-            <div class="table-cell">
-                <div class="date">
-                    <el-icon><timer /></el-icon>
-                    <span>{{ row.date }}</span>
-                </div>
-            </div>
-            <div class="table-cell">
-                <el-popover effect="light" trigger="hover" placement="top" width="auto">
-                    <template #default>
-                        <div>name: {{ row.name }}</div>
-                        <div>address: {{ row.address }}</div>
-                    </template>
-                    <template #reference>
-                        <el-tag>{{ row.name }}</el-tag>
-                    </template>
-                </el-popover>
-            </div>
-            <div class="table-cell">
-                <el-button size="small" @click="handleEdit(index, row)">Edit</el-button>
-                <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
-            </div>
-        </div>
+   <div>
+    <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>
-</template>
+    <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>
+
+  </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 {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
+.field-label{
+  vertical-align: middle;
 }
-
-.table-cell {
-    flex: 1;
-    padding: 5px;
+.box-card {
+  width: 400px;
+  max-width: 100%;
+  margin: 20px auto;
 }
-
-.date {
-    display: flex;
-    align-items: center;
+.block {
+  padding: 30px 24px;
 }
-
-.date el-icon {
-    margin-right: 10px;
+.tag-item {
+  margin-right: 15px;
 }
 </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>

vite.config.js

@@ -65,13 +65,12 @@ export default defineConfig(({ command, mode }) => {
       host: 'localhost',
       port: 8001,
       proxy: {
-        '/api-test': {
-          target: 'https://api.midfar.com/dspt_test/api',
+        '/api-prod': {
+          target: 'https://nbxt.oa.x-lf.cn',
           changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api-test/, '')
-        },
-        headers: {
-          Cookie: env.VUE_APP_COOKIE
+          pathRewrite: {
+            '^/api-prod': ''
+          }
         }
       }
     }