Merge remote-tracking branch 'upstream/master'

Author: Ninjaxsh

Diff for: package.json

@@ -53,6 +53,7 @@
     "color": "^4.2.3",
     "echarts": "^5.5.0",
     "element-plus": "^2.7.3",
+    "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",
@@ -64,8 +65,7 @@
     "stompjs": "^2.3.3",
     "vue": "^3.4.27",
     "vue-i18n": "9.9.1",
-    "vue-router": "^4.3.2",
-    "xlsx": "^0.18.5"
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",

Diff for: src/assets/icons/backtop.svg

@@ -59,13 +59,18 @@
         <template v-for="item in defaultToolbar" :key="item">
           <!-- 刷新 -->
           <template v-if="item === 'refresh'">
-            <el-button icon="refresh" circle @click="handleToolbar(item)" />
+            <el-button
+              icon="refresh"
+              circle
+              title="刷新"
+              @click="handleToolbar(item)"
+            />
           </template>
-          <!-- 列设置 -->
+          <!-- 筛选列 -->
           <template v-else-if="item === 'filter'">
             <el-popover placement="bottom" trigger="click">
               <template #reference>
-                <el-button icon="Operation" circle />
+                <el-button icon="Operation" circle title="筛选列" />
               </template>
               <el-scrollbar max-height="350px">
                 <template v-for="col in cols" :key="col">
@@ -78,9 +83,23 @@
               </el-scrollbar>
             </el-popover>
           </template>
+          <!-- 导出 -->
+          <template v-else-if="item === 'exports'">
+            <el-button
+              icon="FolderOpened"
+              circle
+              title="导出"
+              @click="handleToolbar(item)"
+            />
+          </template>
           <!-- 搜索 -->
           <template v-else-if="item === 'search'">
-            <el-button icon="search" circle @click="handleToolbar(item)" />
+            <el-button
+              icon="search"
+              circle
+              title="搜索"
+              @click="handleToolbar(item)"
+            />
           </template>
         </template>
       </div>
@@ -285,6 +304,7 @@
 </template>
 
 <script setup lang="ts">
+import ExcelJS from "exceljs";
 import { ref, reactive } from "vue";
 import { useDateFormat } from "@vueuse/core";
 import { hasAuth } from "@/plugins/permission";
@@ -352,7 +372,7 @@ export interface IContentConfig<T = any> {
       }
   >;
   // 表格工具栏右侧图标
-  defaultToolbar?: ("refresh" | "filter" | "search")[];
+  defaultToolbar?: ("refresh" | "filter" | "exports" | "search")[];
   // table组件列属性(额外的属性templet,operat,slotName)
   cols: Array<{
     type?: "default" | "selection" | "index" | "expand";
@@ -417,6 +437,7 @@ const toolbar = props.contentConfig.toolbar ?? ["add", "delete"];
 const defaultToolbar = props.contentConfig.defaultToolbar ?? [
   "refresh",
   "filter",
+  "exports",
   "search",
 ];
 // 表格列
@@ -487,12 +508,44 @@ function handleDelete(id?: number | string) {
     }
   });
 }
+// 导出
+function handleExports() {
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet("sheet");
+  const columns: Partial<ExcelJS.Column>[] = [];
+  cols.value.forEach((col) => {
+    if (col.label && col.prop) {
+      columns.push({ header: col.label, key: col.prop });
+    }
+  });
+  worksheet.columns = columns;
+  worksheet.addRows(pageData.value);
+  workbook.xlsx
+    .writeBuffer()
+    .then((buffer) => {
+      const blob = new Blob([buffer], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const downloadLink = document.createElement("a");
+      downloadLink.href = downloadUrl;
+      downloadLink.download = props.contentConfig.pageName;
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+      window.URL.revokeObjectURL(downloadUrl);
+    })
+    .catch((error) => console.log("Error writing excel export", error));
+}
 // 操作栏
 function handleToolbar(name: string) {
   switch (name) {
     case "refresh":
       handleRefresh();
       break;
+    case "exports":
+      handleExports();
+      break;
     case "search":
       emit("searchClick");
       break;

Diff for: src/components/PageContent/index.vue

@@ -100,7 +100,8 @@
                 :prop="item.prop"
                 :formData="formData"
                 :attrs="item.attrs"
-              ></slot>
+              >
+              </slot>
             </template>
           </el-form-item>
         </template>
@@ -224,7 +225,8 @@
                   :prop="item.prop"
                   :formData="formData"
                   :attrs="item.attrs"
-                ></slot>
+                >
+                </slot>
               </template>
             </el-form-item>
           </template>
@@ -251,7 +253,7 @@ import type {
   DrawerProps,
 } from "element-plus";
 import { useThrottleFn } from "@vueuse/core";
-import { reactive, ref, watch, watchEffect } from "vue";
+import { reactive, ref, watch, watchEffect, nextTick } from "vue";
 
 // 对象类型
 export type IObject = Record<string, any>;
@@ -398,7 +400,9 @@ const handleSubmit = useThrottleFn(() => {
 function handleCloseModal() {
   modalVisible.value = false;
   formRef.value?.resetFields();
-  formRef.value?.clearValidate();
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
 }
 // 显示modal
 function setModalVisible(data: IObject = {}) {

Diff for: src/components/PageModal/index.vue

@@ -1,3 +1,4 @@
+import type { App } from "vue";
 import { createI18n } from "vue-i18n";
 import { useAppStoreHook } from "@/store/modules/app";
 // 本地语言包
@@ -22,4 +23,9 @@ const i18n = createI18n({
   globalInjection: true,
 });
 
+// 全局注册 i18n
+export function setupI18n(app: App<Element>) {
+  app.use(i18n);
+}
+
 export default i18n;

Diff for: src/lang/index.ts

@@ -28,6 +28,10 @@
         </div>
         <AppMain />
         <Settings v-if="defaultSettings.showSettings" />
+        <!-- 返回顶部 -->
+        <el-backtop target=".main-container">
+          <svg-icon icon-class="backtop" size="24px" />
+        </el-backtop>
       </div>
     </div>
 
@@ -39,6 +43,10 @@
       </div>
       <AppMain />
       <Settings v-if="defaultSettings.showSettings" />
+      <!-- 返回顶部 -->
+      <el-backtop target=".main-container">
+        <svg-icon icon-class="backtop" size="24px" />
+      </el-backtop>
     </div>
   </div>
 </template>
@@ -248,10 +256,6 @@ watch(route, () => {
   }
 
   &.layout-mix {
-    .fixed-header {
-      left: $sidebar-width-collapsed;
-    }
-
     .sidebar-container {
       width: 100% !important;
     }

Diff for: src/layout/index.vue

@@ -1,9 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from "@/router";
-import { setupStore } from "@/store";
-import { setupDirective } from "@/directive";
-import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
+import setupPlugins from "@/plugins";
 
 // 本地SVG图标
 import "virtual:svg-icons-register";
@@ -15,14 +12,5 @@ import "uno.css";
 import "animate.css";
 
 const app = createApp(App);
-// 全局注册 自定义指令(directive)
-setupDirective(app);
-// 全局注册 状态管理(store)
-setupStore(app);
-// 全局注册Element-plus图标
-setupElIcons(app);
-// 国际化
-setupI18n(app);
-// 注册动态路由
-setupPermission();
-app.use(router).mount("#app");
+app.use(setupPlugins);
+app.mount("#app");

Diff for: src/main.ts

@@ -1,3 +1,24 @@
-export * from "./icons";
-export * from "./i18n";
-export * from "./permission";
+import { setupDirective } from "@/directive";
+import { setupI18n } from "@/lang";
+import { setupRouter } from "@/router";
+import { setupStore } from "@/store";
+import type { App } from "vue";
+import { setupElIcons } from "./icons";
+import { setupPermission } from "./permission";
+
+export default {
+  install(app: App<Element>) {
+    // 自定义指令(directive)
+    setupDirective(app);
+    // 路由(router)
+    setupRouter(app);
+    // 状态管理(store)
+    setupStore(app);
+    // 国际化
+    setupI18n(app);
+    // Element-plus图标
+    setupElIcons(app);
+    // 路由守卫
+    setupPermission();
+  },
+};

Diff for: src/plugins/i18n.ts

@@ -1,3 +1,4 @@
+import type { App } from "vue";
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 
 export const Layout = () => import("@/layout/index.vue");
@@ -117,6 +118,11 @@ const router = createRouter({
   scrollBehavior: () => ({ left: 0, top: 0 }),
 });
 
+// 全局注册 router
+export function setupRouter(app: App<Element>) {
+  app.use(router);
+}
+
 /**
  * 重置路由
  */

Diff for: src/plugins/index.ts

@@ -1,7 +1,7 @@
 @use "./reset";
 
 .app-container {
-  padding: 10px;
+  padding: 15px;
 }
 
 .search-container {

Diff for: src/router/index.ts

@@ -325,12 +325,14 @@ declare module "vue" {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<(typeof import("vue"))["EffectScope"]>;
+    readonly ElForm: UnwrapRef<(typeof import("element-plus/es"))["ElForm"]>;
     readonly ElMessage: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessage"]
     >;
     readonly ElMessageBox: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessageBox"]
     >;
+    readonly ElTree: UnwrapRef<(typeof import("element-plus/es"))["ElTree"]>;
     readonly acceptHMRUpdate: UnwrapRef<
       (typeof import("pinia"))["acceptHMRUpdate"]
     >;
@@ -1053,12 +1055,14 @@ declare module "@vue/runtime-core" {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<(typeof import("vue"))["EffectScope"]>;
+    readonly ElForm: UnwrapRef<(typeof import("element-plus/es"))["ElForm"]>;
     readonly ElMessage: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessage"]
     >;
     readonly ElMessageBox: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessageBox"]
     >;
+    readonly ElTree: UnwrapRef<(typeof import("element-plus/es"))["ElTree"]>;
     readonly acceptHMRUpdate: UnwrapRef<
       (typeof import("pinia"))["acceptHMRUpdate"]
     >;

Diff for: src/styles/index.scss

@@ -14,6 +14,7 @@ declare module "vue" {
     DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"];
     Dictionary: (typeof import("./../components/Dictionary/index.vue"))["default"];
     DictItem: (typeof import("./../views/system/dict/components/dict-item.vue"))["default"];
+    ElBacktop: (typeof import("element-plus/es"))["ElBacktop"];
     ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"];
     ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
     ElButton: (typeof import("element-plus/es"))["ElButton"];
@@ -52,12 +53,16 @@ declare module "vue" {
     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"];
+    ElText: (typeof import("element-plus/es"))["ElText"];
     ElTooltip: (typeof import("element-plus/es"))["ElTooltip"];
     ElTree: (typeof import("element-plus/es"))["ElTree"];
     ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"];
     ElUpload: (typeof import("element-plus/es"))["ElUpload"];
     ElWatermark: (typeof import("element-plus/es"))["ElWatermark"];
+    Form: (typeof import("./../components/PageModal/Form.vue"))["default"];
     FunnelChart: (typeof import("./../views/dashboard/components/FunnelChart.vue"))["default"];
     GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"];
     Hamburger: (typeof import("./../components/Hamburger/index.vue"))["default"];
@@ -69,10 +74,11 @@ declare module "vue" {
     IEpDownload: (typeof import("~icons/ep/download"))["default"];
     IEpEdit: (typeof import("~icons/ep/edit"))["default"];
     IEpPlus: (typeof import("~icons/ep/plus"))["default"];
+    IEpPosition: (typeof import("~icons/ep/position"))["default"];
+    IEpQuestionFilled: (typeof import("~icons/ep/question-filled"))["default"];
     IEpRefresh: (typeof import("~icons/ep/refresh"))["default"];
     IEpRefreshLeft: (typeof import("~icons/ep/refresh-left"))["default"];
     IEpSearch: (typeof import("~icons/ep/search"))["default"];
-    IEpSetting: (typeof import("~icons/ep/setting"))["default"];
     IEpTop: (typeof import("~icons/ep/top"))["default"];
     IEpUploadFilled: (typeof import("~icons/ep/upload-filled"))["default"];
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];