diff --git a/src/views/components/dialog/formPrimitive.vue b/src/views/components/dialog/formPrimitive.vue
new file mode 100644
index 000000000..0d6726872
--- /dev/null
+++ b/src/views/components/dialog/formPrimitive.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue
index 106535b9a..7a4722290 100644
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -3,6 +3,7 @@ import { useRouter } from "vue-router";
import { h, createVNode, ref } from "vue";
import { message } from "@/utils/message";
import forms, { type FormProps } from "./form.vue";
+import formPrimitive from "./formPrimitive.vue";
import { cloneDeep, debounce } from "@pureadmin/utils";
import {
addDialog,
@@ -316,7 +317,10 @@ function onFormTwoClick() {
addDialog({
width: "30%",
title: "结合Form表单（第二种方式）",
- contentRenderer: () => h(forms, { formInline: formInline.value }),
+ contentRenderer: () =>
+ h(forms, {
+ formInline: formInline.value
+ }),
closeCallBack: () => {
message(
`当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
@@ -338,7 +342,9 @@ function onFormThreeClick() {
width: "30%",
title: "结合Form表单（第三种方式）",
contentRenderer: () =>
- createVNode(forms, { formInline: formThreeInline.value }),
+ createVNode(forms, {
+ formInline: formThreeInline.value
+ }),
closeCallBack: () => {
message(
`当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
@@ -373,6 +379,26 @@ function onFormFourClick() {
});
}
+// 子组件 prop 为 primitive 类型的 demo
+const formPrimitiveParam = ref("Hello World");
+const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
+function onFormPrimitiveFormClick() {
+ addDialog({
+ width: "30%",
+ title: "子组件 prop 为 primitive 类型 demo",
+ contentRenderer: () =>
+ h(formPrimitive, {
+ data: formPrimitiveParam.value,
+ "onUpdate:data": val => (formPrimitiveParam.value = val)
+ }),
+ closeCallBack: () => {
+ message(`当前表单内容：${formPrimitiveParam.value}`);
+ // 重置表单数据
+ formPrimitiveParam.value = resetFormPrimitiveParam.value;
+ }
+ });
+}
+
function onBeforeCancelClick() {
addDialog({
title: "点击底部取消按钮的回调",
@@ -474,6 +500,9 @@ function onBeforeSureClick() {
结合Form表单（第四种方式）
+
+ 子组件 prop 为 primitive 类型
+
diff --git a/src/views/pure-table/high/adaptive/columns.tsx b/src/views/pure-table/high/adaptive/columns.tsx
new file mode 100644
index 000000000..75ce6ba54
--- /dev/null
+++ b/src/views/pure-table/high/adaptive/columns.tsx
@@ -0,0 +1,105 @@
+import type {
+ LoadingConfig,
+ AdaptiveConfig,
+ PaginationProps
+} from "@pureadmin/table";
+import { tableData } from "../data";
+import { ref, onMounted, reactive } from "vue";
+import { clone, delay } from "@pureadmin/utils";
+
+export function useColumns() {
+ const dataList = ref([]);
+ const loading = ref(true);
+ const columns: TableColumnList = [
+ {
+ label: "日期",
+ prop: "date"
+ },
+ {
+ label: "姓名",
+ prop: "name"
+ },
+ {
+ label: "地址",
+ prop: "address"
+ }
+ ];
+
+ /** 分页配置 */
+ const pagination = reactive({
+ pageSize: 20,
+ currentPage: 1,
+ pageSizes: [20, 40, 60],
+ total: 0,
+ align: "right",
+ background: true,
+ small: false
+ });
+
+ /** 加载动画配置 */
+ const loadingConfig = reactive({
+ text: "正在加载第一页...",
+ viewBox: "-10, -10, 50, 50",
+ spinner: `
+
+ `
+ // svg: "",
+ // background: rgba()
+ });
+
+ /** 撑满内容区自适应高度相关配置 */
+ const adaptiveConfig: AdaptiveConfig = {
+ /** 表格距离页面底部的偏移量，默认值为 `96` */
+ offsetBottom: 110
+ /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
+ // fixHeader: true
+ /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
+ // timeout: 60
+ /** 表头的 `z-index`，默认值为 `100` */
+ // zIndex: 100
+ };
+
+ function onSizeChange(val) {
+ console.log("onSizeChange", val);
+ }
+
+ function onCurrentChange(val) {
+ loadingConfig.text = `正在加载第${val}页...`;
+ loading.value = true;
+ delay(600).then(() => {
+ loading.value = false;
+ });
+ }
+
+ 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 });
+ });
+ pagination.total = dataList.value.length;
+ loading.value = false;
+ });
+ });
+
+ return {
+ loading,
+ columns,
+ dataList,
+ pagination,
+ loadingConfig,
+ adaptiveConfig,
+ onSizeChange,
+ onCurrentChange
+ };
+}
diff --git a/src/views/pure-table/high/adaptive/index.vue b/src/views/pure-table/high/adaptive/index.vue
new file mode 100644
index 000000000..0536bdff1
--- /dev/null
+++ b/src/views/pure-table/high/adaptive/index.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx
index f71f8691c..6b19f2f9e 100644
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -1,3 +1,4 @@
+import Adaptive from "./adaptive/index.vue";
import Page from "./page/index.vue";
import RowDrag from "./drag/row/index.vue";
import ColumnDrag from "./drag/column/index.vue";
@@ -13,6 +14,12 @@ const rendContent = (val: string) =>
`代码位置：src/views/pure-table/high/${val}/index.vue`;
export const list = [
+ {
+ key: "adaptive",
+ content: rendContent("adaptive"),
+ title: "自适应内容区高度",
+ component: Adaptive
+ },
{
key: "page",
content: rendContent("page"),
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index b631baea5..a014314c2 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -90,6 +90,8 @@ const {
-
+
{
-
+
部门列表
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index 50abe8e5d..d1cbce487 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -145,7 +145,9 @@ getReleases().then(({ data }) => {
-
+
+
+