Merge branch 'main' into pages

src/plugins/i18n.ts

@@ -50,7 +50,7 @@ function getObjectKeys(obj) {
       if (obj[k] && isObject(obj[k])) {
         stack.push({ obj: obj[k], key: newKey });
       } else {
-        keys.add(newKey);
+        keys.add(key);
       }
     }
   }

src/style/element-plus.scss

@@ -163,9 +163,10 @@
 
 /* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
 .pure-scrollbar {
+  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
+
   /* Firefox */
   scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
-  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
   ::-webkit-scrollbar {
     width: 6px; /* 滚动条宽度 */
   }

src/views/system/dept/utils/hook.tsx

@@ -123,7 +123,7 @@ export function useDept() {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/system/menu/utils/hook.tsx

@@ -165,7 +165,7 @@ export function useMenu() {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/system/role/utils/hook.tsx

@@ -195,7 +195,7 @@ export function useRole(treeRef: Ref) {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/system/user/utils/hook.tsx

@@ -331,7 +331,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef }),
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
       beforeSure: (done, { options }) => {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;

src/views/table/high/excel/index.vue

@@ -6,11 +6,7 @@ const { columns, dataList, exportExcel } = useColumns();
 
 <template>
   <div>
-    <el-button
-      type="primary"
-      class="mb-[20px] float-right"
-      @click="exportExcel"
-    >
+    <el-button type="primary" class="mb-[20px]" @click="exportExcel">
       导出
     </el-button>
     <pure-table row-key="id" border :data="dataList" :columns="columns" />

src/views/table/high/header/columns.tsx

@@ -0,0 +1,57 @@
+import { tableData } from "../data";
+import { ref, onMounted } from "vue";
+import { clone, delay } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const columns = ref<TableColumnList>([
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ]);
+
+  function onChange() {
+    // 动态表头只需给 columns.value 重新赋值即可，如下
+    columns.value = [
+      {
+        label: "日期" + Math.round(Math.random() * 99),
+        prop: "date"
+      },
+      {
+        label: Math.round(Math.random() * 99) + "姓名",
+        prop: "name"
+      },
+      {
+        label: "地址",
+        prop: "address"
+      }
+    ];
+  }
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
+    });
+  });
+
+  return {
+    columns,
+    dataList,
+    onChange
+  };
+}

src/views/table/high/header/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+
+const { columns, dataList, onChange } = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" class="mb-[20px]" @click="onChange">
+      切换表头
+    </el-button>
+    <pure-table
+      ref="tableRef"
+      border
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :data="dataList"
+      :columns="columns"
+    />
+  </div>
+</template>

src/views/table/high/list.tsx

@@ -1,5 +1,6 @@
 import Adaptive from "./adaptive/index.vue";
 import Page from "./page/index.vue";
+import Header from "./header/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
@@ -25,6 +26,12 @@ export const list = [
     title: "分页、加载动画、动态列",
     component: Page
   },
+  {
+    key: "header",
+    content: rendContent("header"),
+    title: "动态表头",
+    component: Header
+  },
   {
     key: "tableSelect",
     content: rendContent("table-select"),

src/views/table/high/prints/index.vue

@@ -9,7 +9,7 @@ const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =
 
 <template>
   <div>
-    <el-button type="primary" class="mb-[20px] float-right" @click="print">
+    <el-button type="primary" class="mb-[20px]" @click="print">
       打印
     </el-button>
     <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->