feat: 增加菜单配置功能

src/api/system/user.ts

@@ -73,7 +73,7 @@ export function delUser(params) {
   });
 }
 
-interface LoginParams {
+export interface LoginParams {
   username: string;
   password: string;
 }
@@ -119,11 +119,10 @@ export function editUserInfo(params) {
 /**
  * @description: 用户登出
  */
-export function logout(params) {
-  return http.request({
-    url: '/user/doLogout',
+export function logoutApi() {
+  return http.request<void>({
+    url: '/login/logout',
     method: 'POST',
-    params,
   });
 }
 

src/components/Login.vue

@@ -6,7 +6,13 @@
         <span>登录</span>
       </header>
       <main class="login-form__main">
-        <el-form ref="formRef" :model="formValue" label-width="auto" class="login-form__form">
+        <el-form
+          ref="formRef"
+          :model="formValue"
+          label-width="auto"
+          class="login-form__form"
+          @keydown.enter="handleLogin"
+        >
           <el-form-item prop="username" :rules="[{ required: true, message: '账号不能为空' }]">
             <el-input
               placeholder="请输入您的账号"
@@ -50,10 +56,8 @@
   import exitIcon from 'assets/svg/exit.svg';
   import type { FormInstance } from 'element-plus';
   import { ElMessage } from 'element-plus';
-  import { storeToRefs } from 'pinia';
 
   import { useUserStore } from '@/store/modules/user';
-  import { login } from '@/api/system/user';
   const userStore = useUserStore();
 
   const formValue = reactive({
@@ -67,9 +71,14 @@
     formRef.value.validate((valid: boolean, ...rest) => {
       if (valid) {
         console.log('valid', formValue);
-        userStore.login(formValue).then((res) => {
-          window.location.reload();
-        });
+        userStore
+          .login(formValue)
+          .then((res) => {
+            window.location.reload();
+          })
+          .catch((err) => {
+            ElMessage.error(err.message || '登录失败');
+          });
       }
     });
   };

src/components/Page/index.ts

@@ -0,0 +1,2 @@
+export { default as PageWrapper } from './src/PageWrapper.vue';
+export { default as PageFooter } from './src/PageFooter.vue';

src/components/Page/src/PageFooter.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-card
+    shadow="never"
+    :body-style="{ padding: '0', width: '100%' }"
+    class="border-none page-wrapper-footer"
+    :class="{ 'dark-bg': getDarkTheme }"
+  >
+    <div class="flex items-center w-full">
+      <div class="flex-1 page-wrapper-footer-left"><slot name="left"></slot></div>
+      <div class="page-wrapper-footer-right"><slot name="right"></slot></div>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+
+  const { getDarkTheme } = useDesignSetting();
+</script>
+
+<style lang="scss" scoped>
+  .page-wrapper-footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 15px 24px;
+    // box-shadow: -3px 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.08),
+    //   -3px 5px 12px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    background: #fff;
+    border-radius: 0;
+  }
+
+  .dark-bg {
+    background: rgb(24, 24, 28);
+  }
+</style>

src/components/Page/src/PageWrapper.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="page-wrapper" :class="{ 'footer-space': showFooter && getShowFooter }">
+    <div class="mb-3.5 n-layout-page-header" v-if="title || content || $slots.headerContent">
+      <el-card shadow="never" class="border-none">
+        <template #header>
+          <div class="header-title">{{ title }}</div>
+        </template>
+        {{ content }}
+        <slot name="headerContent"></slot>
+      </el-card>
+    </div>
+    <div class="page-wrapper-content" :style="contentStyle" :class="contentClass">
+      <slot></slot>
+    </div>
+    <PageFooter v-if="showFooter && getShowFooter" :style="getFooterWidth">
+      <template #left>
+        <slot name="leftFooter"></slot>
+      </template>
+      <template #right>
+        <slot name="rightFooter"></slot>
+      </template>
+    </PageFooter>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, useSlots } from 'vue';
+  import { basicProps } from './wrapperProps';
+  import PageFooter from './PageFooter.vue';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+  const slots = useSlots();
+  defineProps({ ...basicProps });
+
+  const { getMenuSetting } = useProjectSetting();
+
+  const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
+
+  const getFooterWidth = computed(() => {
+    const { menuWidth, minMenuWidth, collapsed } = getMenuSetting.value;
+    const wh = collapsed ? minMenuWidth : menuWidth;
+    return {
+      width: `calc(100% - ${wh}px)`,
+    };
+  });
+</script>
+
+<style lang="scss" scoped>
+  .page-wrapper {
+    .mb-4 {
+      margin-bottom: 1rem;
+    }
+    .header-title {
+      font-weight: 700;
+      font-size: 16px;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .footer-space {
+    padding-bottom: 64px;
+  }
+</style>

src/components/Page/src/wrapperProps.ts

@@ -0,0 +1,27 @@
+export const basicProps = {
+  //pageHeader title
+  title: {
+    type: String,
+    default: '',
+  },
+  //pageHeader Content 内容
+  content: {
+    type: String,
+    default: '',
+  },
+  //主体区域样式
+  contentStyle: {
+    type: Object,
+    default: () => {},
+  },
+  //主体区域 class
+  contentClass: {
+    type: String,
+    default: '',
+  },
+  //是否显示底部区域 class
+  showFooter: {
+    type: Boolean,
+    default: true,
+  },
+};

src/components/UserInfo.vue

@@ -9,7 +9,7 @@
       <el-dropdown-menu>
         <el-dropdown-item @click="emit('switchAccount')">切换账号</el-dropdown-item>
         <el-dropdown-item @click="emit('modifyPassword')">修改密码</el-dropdown-item>
-        <el-dropdown-item @click="userInfo = ''">退出登录</el-dropdown-item>
+        <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -19,8 +19,14 @@
   import UserAvatar from 'assets/images/user-avatar@1X.png';
   import ArrowIcon from 'assets/svg/arrow.svg';
   import { useUserStore } from '@/store/modules/user';
+  import router from '@/router';
   const userStore = useUserStore();
   const emit = defineEmits(['switchAccount', 'modifyPassword']);
+
+  const handleLogout = () => {
+    userStore.logout();
+    router.push({ path: '/home' });
+  };
 </script>
 
 <style lang="scss" scoped>

src/constant/nav.ts

@@ -67,4 +67,12 @@ export const NAV_LIST = [
       title: '物联集成',
     },
   },
+  {
+    name: 'System',
+    path: '/system',
+    component: 'MENU_LAYOUT',
+    meta: {
+      title: '系统设置',
+    },
+  },
 ];

src/router/full-routes.ts

@@ -36,14 +36,14 @@ export const HOME_PAGE: RouteRecordString = {
 export const disasterPreventionRoute = {
   children: [
     {
-      component: '/todo/todo',
+      component: '/disaster/overview/PageOverview',
       id: 1025,
       meta: {
         activeMenu: null,
         alwaysShow: false,
         frameSrc: '',
-        hidden: false,
-        icon: 'DashboardOutlined',
+        hidden: true,
+        icon: 'OverviewIcon',
         isFrame: 0,
         isRoot: false,
         noCache: false,
@@ -56,14 +56,14 @@ export const disasterPreventionRoute = {
       redirect: '',
     },
     {
-      component: '/todo/todo',
+      component: '/disaster/monitor/PageMonitor',
       id: 1026,
       meta: {
         activeMenu: null,
         alwaysShow: false,
         frameSrc: '',
         hidden: false,
-        icon: '',
+        icon: 'RiskPointMonitoringIcon',
         isFrame: 0,
         isRoot: false,
         noCache: false,
@@ -76,14 +76,56 @@ export const disasterPreventionRoute = {
       redirect: '',
     },
     {
-      component: '/todo/todo',
+      children: [
+        {
+          component: '/disaster/disaster-warning/PageWarningInfo',
+          id: 1035,
+          meta: {
+            activeMenu: '/disaster-prevention/disaster-warning',
+            alwaysShow: false,
+            frameSrc: '',
+            hidden: true,
+            icon: '',
+            isFrame: 0,
+            isRoot: false,
+            noCache: false,
+            query: '',
+            title: '预警信息',
+          },
+          name: '/disaster-prevention/disaster-warning/warning-info',
+          parentId: 1027,
+          path: 'warning-info',
+          redirect: '',
+        },
+        {
+          component: '/disaster/disaster-warning/PageDefenseNotice',
+          id: 1037,
+          meta: {
+            activeMenu: null,
+            alwaysShow: false,
+            frameSrc: '',
+            hidden: false,
+            icon: '',
+            isFrame: 0,
+            isRoot: false,
+            noCache: false,
+            query: '',
+            title: '防御通知',
+          },
+          name: '/disaster-prevention/disaster-warning/defense-notice',
+          parentId: 1027,
+          path: 'defense-notice',
+          redirect: '',
+        },
+      ],
+      component: '',
       id: 1027,
       meta: {
         activeMenu: null,
         alwaysShow: false,
         frameSrc: '',
         hidden: false,
-        icon: '',
+        icon: 'DisasterWarningIcon',
         isFrame: 0,
         isRoot: false,
         noCache: false,
@@ -98,13 +140,13 @@ export const disasterPreventionRoute = {
     {
       children: [
         {
-          component: '/todo/todo',
+          component: '/disaster/disaster-precaution/PageTaskManagement',
           id: 1029,
           meta: {
             activeMenu: null,
             alwaysShow: false,
             frameSrc: '',
-            hidden: false,
+            hidden: true,
             icon: '',
             isFrame: 0,
             isRoot: false,
@@ -118,7 +160,7 @@ export const disasterPreventionRoute = {
           redirect: '',
         },
         {
-          component: '/todo/todo',
+          component: '/disaster/disaster-precaution/PageTaskExecution',
           id: 1030,
           meta: {
             activeMenu: null,
@@ -138,13 +180,13 @@ export const disasterPreventionRoute = {
           redirect: '',
         },
         {
-          component: '/todo/todo',
+          component: '/disaster/disaster-precaution/PageTaskTemplate',
           id: 1031,
           meta: {
-            activeMenu: null,
+            activeMenu: '/disaster-prevention/disaster-precaution/task-execution',
             alwaysShow: false,
             frameSrc: '',
-            hidden: false,
+            hidden: true,
             icon: '',
             isFrame: 0,
             isRoot: false,
@@ -157,15 +199,36 @@ export const disasterPreventionRoute = {
           path: 'task-template',
           redirect: '',
         },
+        {
+          component: '/todo/todo',
+          id: 1032,
+          meta: {
+            activeMenu: '/disaster-prevention/disaster-precaution/task-template',
+            alwaysShow: false,
+            frameSrc: '',
+            hidden: false,
+            icon: '',
+            isFrame: 0,
+            isRoot: false,
+            noCache: false,
+            query: '',
+            title: '任务模板详情',
+            isHidden: true,
+          },
+          name: '/disaster-prevention/disaster-precaution/template-detail',
+          parentId: 1028,
+          path: 'template-detail/:id',
+          redirect: '',
+        },
       ],
-      component: '/todo/todo',
+      component: '',
       id: 1028,
       meta: {
         activeMenu: null,
         alwaysShow: false,
         frameSrc: '',
         hidden: false,
-        icon: '',
+        icon: 'DisasterPrecaution',
         isFrame: 0,
         isRoot: false,
         noCache: false,
@@ -178,14 +241,14 @@ export const disasterPreventionRoute = {
       redirect: '',
     },
     {
-      component: '/todo/todo',
+      component: '/disaster/disaster-control/PageDisasterControl',
       id: 1032,
       meta: {
         activeMenu: null,
         alwaysShow: false,
         frameSrc: '',
         hidden: false,
-        icon: '',
+        icon: 'DisasterControlIcon',
         isFrame: 0,
         isRoot: false,
         noCache: false,
@@ -211,7 +274,6 @@ export const disasterPreventionRoute = {
     noCache: false,
     query: '',
     title: '灾害防范',
-    ignoreAuth: false,
   },
   name: 'DisasterPrevention',
   parentId: -1,
@@ -219,9 +281,7 @@ export const disasterPreventionRoute = {
   redirect: '',
 };
 
-const fullRoutes: AppRouteRecordRaw[] = [
-  disasterPreventionRoute,
-
+export const userRoutes: AppRouteRecordRaw =
   /**
    * 用户管理
    */
@@ -275,7 +335,112 @@ const fullRoutes: AppRouteRecordRaw[] = [
         },
       },
     ],
-  },
+  };
+
+export const systemRoutes =
+  /**
+   * 系统管理 （只有超管可见）
+   */
+  {
+    path: '/system',
+    name: 'System',
+    component: 'MENU_LAYOUT',
+    meta: {
+      icon: 'OptionsSharp',
+      title: '系统管理',
+    },
+    redirect: 'SystemMenu',
+    children: [
+      {
+        // 租户管理
+        path: 'tenant',
+        name: 'SystemTenant',
+        component: '/system/tenant/tenant',
+        meta: {
+          icon: '',
+          title: '租户管理',
+        },
+      },
+      {
+        // 菜单管理
+        path: 'menu',
+        name: 'SystemMenu',
+        component: '/system/menu/menu',
+        meta: {
+          icon: '',
+          title: '菜单管理',
+        },
+      },
+      {
+        // 权限管理
+        path: 'permission',
+        name: 'SystemPermission',
+        component: '/system/permssion/PagePermission',
+        meta: {
+          icon: '',
+          title: '权限管理',
+        },
+      },
+      {
+        // 权限管理
+        path: 'comments',
+        name: 'SystemComments',
+        component: '/system/comments/PageCommentsManage',
+        meta: {
+          icon: '',
+          title: '评论管理',
+        },
+      },
+      {
+        // 意见反馈
+        path: 'feedback',
+        name: 'SystemFeedback',
+        component: '/feedback/feedback',
+        meta: {
+          icon: '',
+          title: '意见反馈',
+        },
+      },
+      {
+        // 反馈处理 。意见反馈的二级页面。菜单不可见！！！
+        path: 'feedback-handle',
+        name: 'SystemFeedbackHandle',
+        component: '/feedback/handleFeedback',
+        meta: {
+          icon: '',
+          title: '反馈处理',
+          activeMenu: 'SystemFeedback',
+        },
+      },
+      // {
+      //   // 字典管理 （暂时用不到）
+      //   path: 'dictionary',
+      //   name: 'SystemDictionary',
+      //   component: '/system/dictionary/dictionary',
+      //   meta: {
+      //     icon: '',
+      //     title: '字典管理',
+      //   },
+      // },
+      {
+        // 日志管理
+        path: 'log',
+        name: 'SystemLog',
+        component: '/system/log/log',
+        meta: {
+          icon: '',
+          title: '日志管理',
+        },
+      },
+    ],
+  };
+
+export const fullRoutes: AppRouteRecordRaw[] = [
+  disasterPreventionRoute,
+
+  userRoutes,
+
+  systemRoutes,
 
   /**
    * 消息管理
@@ -420,102 +585,6 @@ const fullRoutes: AppRouteRecordRaw[] = [
     ],
   },
 
-  /**
-   * 系统管理 （只有超管可见）
-   */
-  {
-    path: '/system',
-    name: 'System',
-    component: 'LAYOUT',
-    meta: {
-      icon: 'OptionsSharp',
-      title: '系统管理',
-    },
-    children: [
-      {
-        // 租户管理
-        path: 'tenant',
-        name: 'SystemTenant',
-        component: '/system/tenant/tenant',
-        meta: {
-          icon: '',
-          title: '租户管理',
-        },
-      },
-      {
-        // 菜单管理
-        path: 'menu',
-        name: 'SystemMenu',
-        component: '/system/menu/menu',
-        meta: {
-          icon: '',
-          title: '菜单管理',
-        },
-      },
-      {
-        // 权限管理
-        path: 'permission',
-        name: 'SystemPermission',
-        component: '/system/permssion/PagePermission',
-        meta: {
-          icon: '',
-          title: '权限管理',
-        },
-      },
-      {
-        // 权限管理
-        path: 'comments',
-        name: 'SystemComments',
-        component: '/system/comments/PageCommentsManage',
-        meta: {
-          icon: '',
-          title: '评论管理',
-        },
-      },
-      {
-        // 意见反馈
-        path: 'feedback',
-        name: 'SystemFeedback',
-        component: '/feedback/feedback',
-        meta: {
-          icon: '',
-          title: '意见反馈',
-        },
-      },
-      {
-        // 反馈处理 。意见反馈的二级页面。菜单不可见！！！
-        path: 'feedback-handle',
-        name: 'SystemFeedbackHandle',
-        component: '/feedback/handleFeedback',
-        meta: {
-          icon: '',
-          title: '反馈处理',
-          activeMenu: 'SystemFeedback',
-        },
-      },
-      // {
-      //   // 字典管理 （暂时用不到）
-      //   path: 'dictionary',
-      //   name: 'SystemDictionary',
-      //   component: '/system/dictionary/dictionary',
-      //   meta: {
-      //     icon: '',
-      //     title: '字典管理',
-      //   },
-      // },
-      {
-        // 日志管理
-        path: 'log',
-        name: 'SystemLog',
-        component: '/system/log/log',
-        meta: {
-          icon: '',
-          title: '日志管理',
-        },
-      },
-    ],
-  },
-
   /**
    * 异常页面
    */

src/router/index.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { RedirectRoute } from '@/router/base';
 import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './router-guards';
-import { disasterPreventionRoute, HOME_PAGE, RootRoute } from './full-routes';
+import { disasterPreventionRoute, fullRoutes, HOME_PAGE, RootRoute } from './full-routes';
 import { asyncImportRoute, routerGenerator } from './generator-routers';
 
 const modules: any = import.meta.glob('./modules/**/*.ts', { eager: true });
@@ -23,7 +23,7 @@ function sortRoute(a, b) {
 routeModuleList.sort(sortRoute);
 
 const { children, ...disasterPreventionTopRoute } = disasterPreventionRoute;
-const navRoutes = [RootRoute, HOME_PAGE, disasterPreventionTopRoute, RedirectRoute];
+const navRoutes = [RootRoute, HOME_PAGE, disasterPreventionTopRoute, RedirectRoute, ...fullRoutes];
 
 //需要验证权限
 export const asyncRoutes = [...routeModuleList];

src/store/modules/user.ts

@@ -3,7 +3,7 @@ import { createStorage } from '@/utils/Storage';
 import { store } from '@/store';
 import { ACCESS_TOKEN, CURRENT_USER, IS_LOCKSCREEN, TENANT_TOKEN } from '@/store/mutation-types';
 import { ResultEnum } from '@/enums/httpEnum';
-import { getUserInfo, login } from '@/api/system/user';
+import { getUserInfo, login, LoginParams, logoutApi } from '@/api/system/user';
 import { storage } from '@/utils/Storage';
 import { useGlobSetting } from '@/hooks/setting';
 import { PERM } from '@/types/permission/type';
@@ -34,7 +34,6 @@ export interface IUserState {
     tenantCode: string;
     tenantId: number;
   };
-  tenantId: number;
   showLogin: boolean;
 }
 
@@ -42,21 +41,17 @@ export const useUserStore = defineStore({
   id: 'app-user',
   state: (): IUserState => ({
     token: Storage.get(ACCESS_TOKEN, ''),
-    tenantId: Storage.get(TENANT_TOKEN, ''),
-    // username: '',
     welcome: '',
     avatar: '',
     permissions: [],
-    info: Storage.get(CURRENT_USER, {}),
+    info: {} as IUserState['info'],
     showLogin: false,
   }),
   getters: {
     getToken(): string {
       return this.token;
     },
-    getTenantId(): number {
-      return this.tenantId;
-    },
+
     getAvatar(): string {
       return this.avatar;
     },
@@ -75,9 +70,6 @@ export const useUserStore = defineStore({
     },
   },
   actions: {
-    setTenantId(tenantId: number) {
-      this.tenantId = tenantId;
-    },
     setToken(token: string) {
       this.token = token;
     },
@@ -91,25 +83,20 @@ export const useUserStore = defineStore({
       this.info = info;
     },
     // 登录
-    async login(userInfo) {
+    async login(userInfo: LoginParams) {
       try {
         const response = await login(userInfo);
         const { data: result, code } = response;
         if (parseInt(code) === ResultEnum.SUCCESS) {
           const ex = 7 * 24 * 60 * 60 * 1000;
           const token = result.satoken;
-          const tenantId = result.tenantId;
           storage.set(ACCESS_TOKEN, token, ex);
-          storage.set(TENANT_TOKEN, tenantId, ex);
-          storage.set(CURRENT_USER, result, ex);
-          storage.set(IS_LOCKSCREEN, false);
-          storage.setCookie('satoken', token);
-          storage.setCookie('tenantId', tenantId);
           this.setToken(token);
-          this.setTenantId(tenantId);
           this.setUserInfo(result);
+          return Promise.resolve(response);
+        } else {
+          return Promise.reject(response);
         }
-        return Promise.resolve(response);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -142,8 +129,7 @@ export const useUserStore = defineStore({
       storage.remove(ACCESS_TOKEN);
       storage.remove(CURRENT_USER);
       storage.remove('username');
-      storage.remove('lxUsername');
-      return Promise.resolve('');
+      return logoutApi();
     },
 
     /**

src/views/auth/dept/dept.vue

@@ -1,7 +1,7 @@
 <template>
   <PageWrapper>
     <el-card :bordered="false" class="proCard">
-     <template #header>
+      <template #header>
         <el-space align="center">
           <el-button type="primary" @click="openCreateDrawer" v-permission="{ action: [PERM_USER.DEPT_ADD] }">
             <template #icon>
@@ -23,10 +23,18 @@
           <template #default="scope">
             <el-space>
               <div class="el-space el-space--horizontal">
-                <div class="el-space__item" @click="handleEdit(scope.row)" v-permission="{ action: [PERM_USER.DEPT_EDIT] }">
+                <div
+                  class="el-space__item"
+                  @click="handleEdit(scope.row)"
+                  v-permission="{ action: [PERM_USER.DEPT_EDIT] }"
+                >
                   <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
                 </div>
-                <div class="el-space__item" @click="handleDelete(scope.row)" v-permission="{ action: [PERM_USER.DEPT_DELETE] }">
+                <div
+                  class="el-space__item"
+                  @click="handleDelete(scope.row)"
+                  v-permission="{ action: [PERM_USER.DEPT_DELETE] }"
+                >
                   <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
                 </div>
               </div>
@@ -57,6 +65,7 @@
 <script lang="ts" setup>
   import { onMounted, reactive, ref } from 'vue';
   import { ElMessage } from 'element-plus';
+  import { PageWrapper } from '@/components/Page';
   import { getAllDepartments, deleteDepartments } from '@/api/auth/dept';
   import { FileAddOutlined } from '@vicons/antd';
   import CreateDrawer from './CreateDrawer.vue';
@@ -98,7 +107,7 @@
   };
 
   function reloadTable() {
-    loadDataTable()
+    loadDataTable();
   }
 
   function openCreateDrawer() {
@@ -120,9 +129,9 @@
         message.success('删除成功');
         loadDataTable();
       } else {
-        message.error(res.data)
+        message.error(res.data);
       }
-    })
+    });
   }
 
   onMounted(() => {
@@ -152,4 +161,4 @@
   .el-space__item:hover {
     cursor: pointer;
   }
-</style>
+</style>

src/views/auth/post/post.vue

@@ -53,18 +53,15 @@
       </BasicTable>
     </el-card>
 
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      :roleList="roleData"
-      @change="reloadTable"
-    />
+    <CreateDrawer ref="createDrawerRef" :title="drawerTitle" :roleList="roleData" @change="reloadTable" />
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
   import { h, reactive, ref } from 'vue';
   import { ElMessage } from 'element-plus';
+  import { PageWrapper } from '@/components/Page';
+
   import { BasicTable, TableAction, BasicColumn } from '@/components/Table';
   import { postList, deletePost } from '@/api/auth/post';
   import { FileAddOutlined, SearchOutlined } from '@vicons/antd';

src/views/form/advancedForm/advancedForm.vue

@@ -1,422 +0,0 @@
-<template>
-  <PageWrapper
-    title="高级表单"
-    content="当一次性提交大量数据时，可使用高级表单，根据自身情况选择是否使用 BasicForm
-        组件，以下布局支持自适应"
-  >
-    <el-form
-      ref="formRef"
-      :label-width="100"
-      :model="formValue"
-      :rules="rules"
-      label-placement="left"
-    >
-      <el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
-        <template #header>
-          <div class="card-header">
-            <span>预约信息</span>
-          </div>
-        </template>
-
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约姓名" prop="name">
-              <el-input v-model="formValue.name" placeholder="输入姓名" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约号码" prop="mobile">
-              <el-input v-model="formValue.mobile" placeholder="电话号码" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约时间" prop="datetime">
-              <el-date-picker class="w-full" v-model="formValue.datetime" type="datetime" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约医生" prop="doctor">
-              <el-select v-model="formValue.doctor" placeholder="请选择预约医生" class="w-full">
-                <el-option
-                  v-for="item in doctorList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-              /></el-select>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约事项" prop="matter">
-              <el-select
-                v-model="formValue.matter"
-                multiple
-                placeholder="请选择预约事项"
-                class="w-full"
-              >
-                <el-option
-                  v-for="item in matterList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约备注" prop="remark">
-              <el-input v-model="formValue.remark" placeholder="请输入预约备注" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="预约备注" prop="remark">
-              <el-input v-model="formValue.remark" placeholder="请输入预约备注" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="出生日期" prop="dateBirth">
-              <el-date-picker
-                class="w-full"
-                v-model="formValue.dateBirth"
-                type="datetime"
-                placeholder="请选择出生日期"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-card>
-
-      <el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
-        <template #header>
-          <div class="card-header">
-            <span>就诊信息</span>
-          </div>
-        </template>
-
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="过敏史" prop="allergiChistory">
-              <el-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="既往史" prop="pastHistory">
-              <el-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="传染史" prop="contagion">
-              <el-input v-model="formValue.contagion" placeholder="请输入传染史" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="身份证号" prop="idNo">
-              <el-input v-model="formValue.idNo" placeholder="请输入身份证号" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="介绍人" prop="introducer">
-              <el-input v-model="formValue.introducer" placeholder="请输入介绍人" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="就诊医生" prop="seeDoctor">
-              <el-select v-model="formValue.seeDoctor" placeholder="请选择就诊医生" class="w-full">
-                <el-option
-                  v-for="item in doctorList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="初诊日期" prop="firstDatetime">
-              <el-date-picker
-                class="w-full"
-                v-model="formValue.firstDatetime"
-                type="datetime"
-                placeholder="请选择初诊日期"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="近次复诊" prop="subsequent">
-              <el-date-picker
-                class="w-full"
-                v-model="formValue.subsequent"
-                type="datetime"
-                placeholder="请选择近次复诊"
-              />
-            </el-form-item>
-          </el-col>
-          <!--          <el-col>-->
-          <!--            <el-form-item label="图片" prop="img">-->
-          <!--              <BasicUpload-->
-          <!--                v-model="uploadList"-->
-          <!--                :action="`${uploadUrl}/v1.0/files`"-->
-          <!--                :data="{ type: 0 }"-->
-          <!--                :headers="uploadHeaders"-->
-          <!--                :height="100"-->
-          <!--                :width="100"-->
-          <!--                helpText="单个文件不超过20MB，最多只能上传10个文件"-->
-          <!--                name="files"-->
-          <!--                @uploadChange="uploadChange"-->
-          <!--              />-->
-          <!--            </el-form-item>-->
-          <!--          </el-col>-->
-        </el-row>
-      </el-card>
-
-      <el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
-        <template #header>
-          <div class="card-header">
-            <span>患者信息</span>
-          </div>
-        </template>
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="过敏史" prop="allergiChistory">
-              <el-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="既往史" prop="pastHistory">
-              <el-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="传染史" prop="contagion">
-              <el-input v-model="formValue.contagion" placeholder="请输入传染史" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="身份证号" prop="idNo">
-              <el-input v-model="formValue.idNo" placeholder="请输入身份证号" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="介绍人" prop="introducer">
-              <el-input v-model="formValue.introducer" placeholder="请输入介绍人" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="就诊医生" prop="seeDoctor">
-              <el-select v-model="formValue.seeDoctor" placeholder="请选择就诊医生" class="w-full">
-                <el-option
-                  v-for="item in doctorList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="初诊日期" prop="firstDatetime">
-              <el-date-picker
-                class="w-full"
-                v-model="formValue.firstDatetime"
-                type="datetime"
-                placeholder="请选择初诊日期"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
-            <el-form-item label="近次复诊" prop="subsequent">
-              <el-date-picker
-                class="w-full"
-                v-model="formValue.subsequent"
-                type="datetime"
-                placeholder="请选择近次复诊"
-              />
-            </el-form-item>
-          </el-col>
-          <!--          <el-col>-->
-          <!--            <el-form-item label="图片" prop="img">-->
-          <!--              <BasicUpload-->
-          <!--                v-model="uploadList"-->
-          <!--                :action="`${uploadUrl}/v1.0/files`"-->
-          <!--                :data="{ type: 0 }"-->
-          <!--                :headers="uploadHeaders"-->
-          <!--                :height="100"-->
-          <!--                :width="100"-->
-          <!--                helpText="单个文件不超过20MB，最多只能上传10个文件"-->
-          <!--                name="files"-->
-          <!--                @uploadChange="uploadChange"-->
-          <!--              />-->
-          <!--            </el-form-item>-->
-          <!--          </el-col>-->
-        </el-row>
-      </el-card>
-    </el-form>
-    <template #rightFooter>
-      <el-space>
-        <el-button @click="resetForm(formRef)">重置</el-button>
-        <el-button type="primary" @click="formSubmit(formRef)">提交</el-button>
-      </el-space>
-    </template>
-  </PageWrapper>
-</template>
-
-<script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { ElMessage } from 'element-plus';
-  // import { BasicUpload } from '@/components/Upload';
-  // import { useGlobSetting } from '@/hooks/setting';
-  import type { ElForm } from 'element-plus';
-
-  type FormInstance = InstanceType<typeof ElForm>;
-
-  const formRef = ref<FormInstance>();
-
-  // const globSetting = useGlobSetting();
-
-  const matterList = [
-    {
-      label: '种牙',
-      value: 1,
-    },
-    {
-      label: '补牙',
-      value: 2,
-    },
-    {
-      label: '根管',
-      value: 3,
-    },
-  ];
-
-  const doctorList = [
-    {
-      label: '李医生',
-      value: 1,
-    },
-    {
-      label: '黄医生',
-      value: 2,
-    },
-    {
-      label: '张医生',
-      value: 3,
-    },
-  ];
-
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入预约姓名',
-      trigger: 'blur',
-    },
-    remark: {
-      required: true,
-      message: '请输入预约备注',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入预约电话号码',
-      trigger: ['input'],
-    },
-    datetime: {
-      required: true,
-      type: 'number',
-      message: '请选择预约时间',
-      trigger: ['blur', 'change'],
-    },
-    seeDoctor: {
-      required: true,
-      type: 'number',
-      message: '请选择就诊时间',
-      trigger: ['blur', 'change'],
-    },
-    firstDatetime: {
-      required: true,
-      type: 'number',
-      message: '请选择初诊时间',
-      trigger: ['blur', 'change'],
-    },
-    doctor: {
-      required: true,
-      type: 'number',
-      message: '请选择预约医生',
-      trigger: 'change',
-    },
-  };
-
-  // const { uploadUrl } = globSetting;
-
-  interface IformValue {
-    name: string;
-    mobile: string;
-    remark: string;
-    sex: number;
-    matter: number[];
-    doctor: number;
-    dateBirth: string;
-    allergiChistory: string;
-    pastHistory: string;
-    contagion: string;
-    idNo: string;
-    introducer: string;
-    seeDoctor: string;
-    firstDatetime: string;
-    subsequent: string;
-    datetime: [];
-  }
-
-  const formValue = reactive<IformValue>({
-    name: '',
-    mobile: '',
-    remark: '',
-    sex: 1,
-    matter: [1],
-    doctor: 1,
-    dateBirth: '',
-    allergiChistory: '',
-    pastHistory: '',
-    contagion: '',
-    idNo: '',
-    subsequent: '',
-    firstDatetime: '',
-    seeDoctor: '',
-    introducer: '',
-    datetime: [],
-  });
-  // const uploadList = ref([
-  //   'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-  // ]);
-  // const uploadHeaders = reactive({
-  //   platform: 'miniPrograms',
-  //   timestamp: new Date().getTime(),
-  //   token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-  // });
-
-  function formSubmit(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    formEl.validate((valid) => {
-      if (valid) {
-        console.log('submit!');
-        ElMessage.success('验证成功');
-      } else {
-        ElMessage.error('验证失败，请填写完整信息');
-      }
-    });
-  }
-
-  function resetForm(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    formEl.resetFields();
-  }
-
-  // function uploadChange(list: string[]) {
-  //   console.log(list);
-  // }
-</script>

src/views/form/basicForm/index.vue

@@ -1,213 +0,0 @@
-<template>
-  <PageWrapper
-    title="基础表单"
-    content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。"
-  >
-    <el-card shadow="never" class="mt-3 proCard">
-      <el-row :gutter="20" justify="center">
-        <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
-          <el-form
-            ref="formRef"
-            :label-width="80"
-            :model="formValue"
-            :rules="rules"
-            class="py-8"
-            label-placement="left"
-          >
-            <el-form-item label="预约姓名" prop="name">
-              <el-input v-model="formValue.name" placeholder="输入姓名" clearable />
-            </el-form-item>
-            <el-form-item label="预约号码" prop="mobile">
-              <el-input v-model="formValue.mobile" placeholder="电话号码" clearable />
-            </el-form-item>
-            <el-form-item label="预约时间" prop="datetime">
-              <el-date-picker
-                v-model="formValue.datetime"
-                placeholder="请选择预约时间"
-                type="datetime"
-                clearable
-              />
-            </el-form-item>
-            <el-form-item label="预约医生" prop="doctor">
-              <el-select v-model="formValue.doctor" placeholder="请选择预约医生" clearable>
-                <el-option
-                  v-for="item in doctorList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="预约事项" prop="matter">
-              <el-select v-model="formValue.matter" multiple placeholder="请选择预约事项" clearable>
-                <el-option
-                  v-for="item in matterList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="性别" prop="sex">
-              <el-radio-group v-model="formValue.sex" name="sex">
-                <el-space>
-                  <el-radio :label="1">男</el-radio>
-                  <el-radio :label="2">女</el-radio>
-                </el-space>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="预约备注" prop="remark">
-              <el-input
-                v-model="formValue.remark"
-                placeholder="请输入预约备注"
-                type="textarea"
-                clearable
-              />
-            </el-form-item>
-            <!-- <el-form-item label="图片" prop="img">
-            <BasicUpload
-              v-model="uploadList"
-              :action="`${uploadUrl}/v1.0/files`"
-              :data="{ type: 0 }"
-              :headers="uploadHeaders"
-              :height="100"
-              :width="100"
-              helpText="单个文件不超过20MB，最多只能上传10个文件"
-              name="files"
-              @uploadChange="uploadChange"
-            />
-          </el-form-item> -->
-            <el-form-item>
-              <el-space>
-                <el-button type="primary" @click="formSubmit(formRef)">提交预约</el-button>
-                <el-button @click="resetForm(formRef)">重置</el-button>
-              </el-space>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
-    </el-card>
-  </PageWrapper>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'BasicForm',
-  };
-</script>
-<script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { ElMessage, FormRules } from 'element-plus';
-  // import { BasicUpload } from '@/components/Upload';
-  // import { useGlobSetting } from '@/hooks/setting';
-  import type { ElForm } from 'element-plus';
-
-  type FormInstance = InstanceType<typeof ElForm>;
-
-  const formRef = ref<FormInstance>();
-
-  // const globSetting = useGlobSetting();
-
-  const matterList = [
-    {
-      label: '种牙',
-      value: 1,
-    },
-    {
-      label: '补牙',
-      value: 2,
-    },
-    {
-      label: '根管',
-      value: 3,
-    },
-  ];
-
-  const doctorList = [
-    {
-      label: '李医生',
-      value: 1,
-    },
-    {
-      label: '黄医生',
-      value: 2,
-    },
-    {
-      label: '张医生',
-      value: 3,
-    },
-  ];
-
-  const rules: FormRules = {
-    name: {
-      required: true,
-      message: '请输入预约姓名',
-      trigger: 'blur',
-    },
-    remark: {
-      required: true,
-      message: '请输入预约备注',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入预约电话号码',
-      trigger: 'blur',
-    },
-    datetime: {
-      required: true,
-      type: 'date',
-      message: '请选择预约时间',
-      trigger: 'change',
-    },
-    doctor: {
-      required: true,
-      type: 'number',
-      message: '请选择预约医生',
-      trigger: 'change',
-    },
-  };
-
-  // const { uploadUrl } = globSetting;
-
-  const formValue = reactive({
-    name: '',
-    mobile: '',
-    remark: '',
-    sex: 1,
-    matter: undefined,
-    doctor: undefined,
-    datetime: undefined,
-  });
-
-  // const uploadList = ref([
-  //   'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-  // ]);
-
-  // const uploadHeaders = reactive({
-  //   platform: 'miniPrograms',
-  //   timestamp: new Date().getTime(),
-  //   token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-  // });
-
-  function formSubmit(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    formEl.validate((valid) => {
-      if (valid) {
-        console.log('submit!');
-        ElMessage.success('验证成功');
-      } else {
-        ElMessage.error('验证失败，请填写完整信息');
-      }
-    });
-  }
-
-  function resetForm(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    formEl.resetFields();
-  }
-
-  // function uploadChange(list: string[]) {
-  //   console.log(list);
-  // }
-</script>

src/views/form/detail/index.vue

@@ -1,83 +0,0 @@
-<template>
-  <PageWrapper title="表单详情" content="表单除了提交数据，有时也用于显示只读信息。">
-    <el-card shadow="never" class="mt-3 proCard">
-      <el-descriptions label-placement="left" class="py-2" title="基本信息">
-        <el-descriptions-item>
-          <template #label>收款人姓名</template>
-          啊俊
-        </el-descriptions-item>
-        <el-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</el-descriptions-item>
-        <el-descriptions-item label="付款类型">支付宝</el-descriptions-item>
-        <el-descriptions-item label="付款账户">NaiveUiAdmin@163.com</el-descriptions-item>
-        <el-descriptions-item label="转账金额">￥1980.00</el-descriptions-item>
-        <el-descriptions-item label="状态">
-          <el-tag type="success"> 已到账</el-tag>
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-card>
-    <el-card shadow="never" class="mt-3 proCard">
-      <el-descriptions label-placement="left" class="py-2" title="其它信息">
-        <el-descriptions-item>
-          <template #label>城市</template>
-          深圳
-        </el-descriptions-item>
-        <el-descriptions-item label="性别">男</el-descriptions-item>
-        <el-descriptions-item label="邮箱">NaiveUiAdmin@qq.com</el-descriptions-item>
-        <el-descriptions-item label="地址">广东省深圳市南山区</el-descriptions-item>
-        <el-descriptions-item label="生日">1991-06-04</el-descriptions-item>
-        <el-descriptions-item label="认证">
-          <el-tag type="success"> 已认证</el-tag>
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-card>
-    <el-card
-      shadow="never"
-      title="表格信息"
-      class="mt-3 proCard"
-      size="small"
-      :segmented="{ content: 'hard' }"
-    >
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="name" label="姓名" />
-        <el-table-column prop="gender" label="性别" />
-        <el-table-column prop="address" label="地址" />
-        <el-table-column prop="birthday" label="生日" />
-        <el-table-column fixed="right" label="操作" width="140">
-          <template #default>
-            <el-button type="danger" size="small">删除</el-button>
-            <el-button type="primary" size="small">编辑</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </PageWrapper>
-</template>
-
-<script lang="ts" setup>
-  const tableData = [
-    {
-      name: 'Ah jung',
-      gender: '男',
-      address: '深圳',
-      birthday: '2000-12-09',
-    },
-    {
-      name: '西门飞雪',
-      gender: '男',
-      address: '广州',
-      birthday: '1991-09-11',
-    },
-    {
-      name: '泰坦巨人',
-      gender: '男',
-      address: '北京',
-      birthday: '1990-11-03',
-    },
-    {
-      name: '猎魔人',
-      gender: '女',
-      address: '上海',
-      birthday: '1992-03-11',
-    },
-  ];
-</script>

src/views/form/stepForm/Step1.vue

@@ -1,125 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :label-width="95"
-    :model="formValue"
-    :rules="rules"
-    label-placement="left"
-    style="margin: 40px auto 0 0px"
-  >
-    <el-form-item label="付款账户" prop="myAccount">
-      <el-select v-model="formValue.myAccount" class="w-full" placeholder="请选择付款账户">
-        <el-option
-          v-for="item in myAccountList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="收款账户" prop="account">
-      <el-select v-model="formValue.accountType" class="w-1/5 mr-3" placeholder="请选择">
-        <el-option
-          v-for="item in accountTypeList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-      <el-input v-model="formValue.account" class="flex-1" placeholder="请输入收款账户" />
-    </el-form-item>
-    <el-form-item label="收款人姓名" prop="name">
-      <el-input v-model="formValue.name" placeholder="请输入收款人姓名" />
-    </el-form-item>
-    <el-form-item label="转账金额" prop="money">
-      <el-input v-model="formValue.money" placeholder="请输入转账金额">
-        <template #prefix>
-          <span class="text-gray-400">￥</span>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="formSubmit(formRef)">下一步</el-button>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import type { ElForm } from 'element-plus';
-
-  type FormInstance = InstanceType<typeof ElForm>;
-
-  const formRef = ref<FormInstance>();
-
-  const myAccountList = [
-    {
-      label: 'NaiveUiAdmin@163.com',
-      value: 1,
-    },
-    {
-      label: 'NaiveUiAdmin@qq.com',
-      value: 2,
-    },
-  ];
-
-  const accountTypeList = [
-    {
-      label: '微信',
-      value: 1,
-    },
-    {
-      label: '支付宝',
-      value: 2,
-    },
-  ];
-
-  const emit = defineEmits(['nextStep']);
-
-  const formValue = ref({
-    accountType: 1,
-    myAccount: null,
-    account: 'xioama@qq.com',
-    money: '1980',
-    name: 'Ah jung',
-  });
-
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入收款人姓名',
-      trigger: 'blur',
-    },
-    account: {
-      required: true,
-      message: '请输入收款账户',
-      trigger: 'blur',
-    },
-    money: {
-      required: true,
-      message: '请输入转账金额',
-      trigger: 'blur',
-    },
-    myAccount: {
-      required: true,
-      type: 'number',
-      message: '请选择付款账户',
-      trigger: 'change',
-    },
-  };
-
-  function formSubmit(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    formEl.validate((valid) => {
-      if (valid) {
-        emit('nextStep');
-      } else {
-        ElMessage({
-          message: '验证失败，请填写完整信息',
-          type: 'error',
-        });
-      }
-    });
-  }
-</script>

src/views/form/stepForm/Step2.vue

@@ -1,79 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :label-width="90"
-    :model="formValue"
-    :rules="rules"
-    style="margin: 40px auto 0 0"
-  >
-    <el-form-item label="付款账户" prop="myAccount">
-      <span>NaiveUiAdmin@163.com</span>
-    </el-form-item>
-    <el-form-item label="收款账户" prop="account">
-      <span>NaiveUiAdmin@qq.com</span>
-    </el-form-item>
-    <el-form-item label="收款人姓名" prop="name">
-      <span>Ah jung</span>
-    </el-form-item>
-    <el-form-item label="转账金额" prop="money">
-      <span>￥1980</span>
-    </el-form-item>
-    <el-divider />
-    <el-form-item label="支付密码" prop="password">
-      <el-input v-model="formValue.password" type="password" />
-    </el-form-item>
-    <el-form-item>
-      <el-space>
-        <el-button :loading="loading" type="primary" @click="formSubmit(formRef)">提交</el-button>
-        <el-button @click="prevStep">上一步</el-button>
-      </el-space>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import type { ElForm } from 'element-plus';
-
-  type FormInstance = InstanceType<typeof ElForm>;
-
-  const formRef = ref<FormInstance>();
-
-  const loading = ref(false);
-
-  const formValue = ref({
-    password: '086611',
-  });
-
-  const rules = {
-    password: {
-      required: true,
-      message: '请输入支付密码',
-      trigger: 'blur',
-    },
-  };
-
-  const emit = defineEmits(['prevStep', 'nextStep']);
-
-  function prevStep() {
-    emit('prevStep');
-  }
-
-  function formSubmit(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    loading.value = true;
-    formEl.validate((valid) => {
-      if (valid) {
-        setTimeout(() => {
-          emit('nextStep');
-        }, 1500);
-      } else {
-        ElMessage({
-          message: '验证失败，请填写完整信息',
-          type: 'error',
-        });
-      }
-    });
-  }
-</script>

src/views/form/stepForm/Step3.vue

@@ -1,67 +0,0 @@
-<template>
-  <el-result icon="success" class="step-result" sub-title="预计两小时内到账" title="操作成功">
-    <template #extra>
-      <div class="information">
-        <el-row class="my-1" :gutter="20">
-          <el-col :span="10">付款账户：</el-col>
-          <el-col :span="14">NaiveUiAdmin@163.com</el-col>
-        </el-row>
-        <el-row class="my-1" :gutter="20">
-          <el-col :span="10">收款账户：</el-col>
-          <el-col :span="14">xiaoma@qq.com</el-col>
-        </el-row>
-        <el-row class="my-1" :gutter="20">
-          <el-col :span="10">收款人姓名：</el-col>
-          <el-col :span="14">啊俊</el-col>
-        </el-row>
-        <el-row class="my-1" :gutter="20">
-          <el-col :span="10">转账金额：</el-col>
-          <el-col :span="14">￥<span class="money">1980</span> 元</el-col>
-        </el-row>
-      </div>
-      <div class="flex justify-center mt-8">
-        <el-button class="mr-4" type="primary" @click="finish">再转一笔</el-button>
-        <el-button @click="prevStep">查看账单</el-button>
-      </div>
-    </template>
-  </el-result>
-</template>
-
-<script lang="ts" setup>
-  const emit = defineEmits(['finish', 'prevStep']);
-
-  function prevStep() {
-    emit('prevStep');
-  }
-
-  function finish() {
-    emit('finish');
-  }
-</script>
-
-<style lang="scss" scoped>
-  .step-result {
-    max-width: 560px;
-    margin: 20px auto 0;
-
-    :deep(.n-result-content) {
-      background-color: #fafafa;
-      padding: 24px 40px;
-    }
-
-    .information {
-      line-height: 22px;
-
-      .ant-row:not(:last-child) {
-        margin-bottom: 24px;
-      }
-    }
-
-    .money {
-      font-family: 'Helvetica Neue', sans-serif;
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 14px;
-    }
-  }
-</style>

src/views/form/stepForm/stepForm.vue

@@ -1,48 +0,0 @@
-<template>
-  <PageWrapper
-    title="分步表单"
-    content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
-  >
-    <el-card shadow="never" class="mt-3 proCard">
-      <el-row :gutter="20" justify="center">
-        <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
-          <el-steps align-center :active="currentTab" class="mt-4">
-            <el-step title="填写转账信息" description="确保填写正确" />
-            <el-step title="确认转账信息" description="确认转账信息" />
-            <el-step title="完成转账" description="恭喜您，转账成功" />
-          </el-steps>
-          <step1 v-if="currentTab === 1" @next-step="nextStep" />
-          <step2 v-if="currentTab === 2" @next-step="nextStep" @prev-step="prevStep" />
-          <step3 v-if="currentTab === 3" @prev-step="prevStep" @finish="finish" />
-        </el-col>
-      </el-row>
-    </el-card>
-  </PageWrapper>
-</template>
-
-<script setup>
-  import { ref } from 'vue';
-  import step1 from './Step1.vue';
-  import step2 from './Step2.vue';
-  import step3 from './Step3.vue';
-
-  const currentTab = ref(1);
-
-  function nextStep() {
-    if (currentTab.value < 3) {
-      currentTab.value += 1;
-    }
-  }
-
-  function prevStep() {
-    if (currentTab.value > 1) {
-      currentTab.value -= 1;
-    }
-  }
-
-  function finish() {
-    currentTab.value = 1;
-  }
-</script>
-
-<style lang="scss" scoped></style>

src/views/system/dictionary/dictionary.vue

@@ -101,6 +101,8 @@
   import { dictTypeList, dictInfo, delDictType, delDictData } from '@/api/system/dictionary';
   import AddDictType from './components/AddDictType.vue';
   import AddDictData from './components/AddDictData.vue';
+  import { PageWrapper } from '@/components/Page';
+
   import { ElMessage, ElCheckbox, ElTag } from 'element-plus';
   import { FileAddOutlined, SearchOutlined } from '@vicons/antd';
 

src/views/system/logs/logininfor.vue

@@ -20,12 +20,7 @@
       </el-space>
     </el-card>
     <el-card :bordered="false" class="proCard">
-      <BasicTable
-        :columns="columns"
-        :request="loadDataTable"
-        :row-key="(row) => row.id"
-        ref="basicTableRef"
-      />
+      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef" />
     </el-card>
   </PageWrapper>
 </template>
@@ -35,6 +30,8 @@
   import { BasicTable } from '@/components/Table';
   import { loginLogList } from '@/api/system/logs';
   import { SearchOutlined } from '@vicons/antd';
+  import { PageWrapper } from '@/components/Page';
+
   import { columns } from './loginColumns';
 
   const basicTableRef = ref();

src/views/system/logs/operlog.vue

@@ -20,12 +20,7 @@
       </el-space>
     </el-card>
     <el-card :bordered="false" class="proCard">
-      <BasicTable
-        :columns="columns"
-        :request="loadDataTable"
-        :row-key="(row) => row.id"
-        ref="basicTableRef"
-      />
+      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef" />
     </el-card>
   </PageWrapper>
 </template>
@@ -35,6 +30,8 @@
   import { BasicTable } from '@/components/Table';
   import { operlogList } from '@/api/system/logs';
   import { SearchOutlined } from '@vicons/antd';
+  import { PageWrapper } from '@/components/Page';
+
   import { columns } from './columns';
 
   const basicTableRef = ref();

src/views/system/menu/CreateDrawer.vue

@@ -20,12 +20,12 @@
     defineProps<{
       title?: string;
       width?: number;
-      parentMenuTree: MenuTree
+      parentMenuTree: MenuTree;
     }>(),
     {
       title: '添加顶级菜单',
       width: 580,
-    }
+    },
   );
 
   const emit = defineEmits(['change']);

src/views/system/menu/menu.vue

@@ -80,12 +80,7 @@
         </el-card>
       </el-col>
     </el-row>
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      :parent-menu-tree="menuTree"
-      @change="handleMenuChange"
-    />
+    <CreateDrawer ref="createDrawerRef" :title="drawerTitle" :parent-menu-tree="menuTree" @change="handleMenuChange" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -99,14 +94,15 @@
   import CreateDrawer from './CreateDrawer.vue';
   import MenuForm from './MenuForm.vue';
   import { cloneDeep } from 'lodash-es';
+  import { PageWrapper } from '@/components/Page';
 
   const menuDetailTree = shallowRef<MenuDetailTree>([]); // 菜单详情树
   const menuTree = shallowRef<MenuTree>([]); // 菜单树，用于展示
   const selectedMenuId = ref<MenuDetail['id']>(null); // 选中的菜单
   const loading = ref(true); // 左侧菜单树加载
-  const expandedKeys = ref([]); 
- 
-  const isEditMenu = ref(false); 
+  const expandedKeys = ref([]);
+
+  const isEditMenu = ref(false);
   const treeItemTitle = ref('');
   const pattern = ref('');
   const drawerTitle = ref('');
@@ -194,14 +190,14 @@
     if (menus == null) {
       return [];
     }
-  
+
     const tree: MenuTree = [];
     for (const item of menus) {
-      const treeItem: Menu = { 
-        id: item.id!, 
-        label: item.menuName, 
+      const treeItem: Menu = {
+        id: item.id!,
+        label: item.menuName,
         routeName: item.routeName,
-        children: null
+        children: null,
       };
 
       if (Array.isArray(item.children) && item.children?.length > 0) {
@@ -228,4 +224,3 @@
     expandedKeys.value = keys;
   }
 </script>
-

src/views/system/online/online.vue

@@ -38,6 +38,8 @@
   import { BasicTable, TableAction, BasicColumn } from '@/components/Table';
   import { onlineList, onlineLogOut } from '@/api/system/user';
   import { SearchOutlined } from '@vicons/antd';
+  import { PageWrapper } from '@/components/Page';
+
   import { columns } from './columns';
 
   const message = ElMessage;