Merge pull request #141 from liujiayii/feature/table

feat: pro-field
liujiayii · Nov 14, 2024 · f95b66f · f95b66f
2 parents eef6ef8 + 901ed44
commit f95b66f
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 36 deletions.
diff --git a/packages/field/src/components/date-time/index.tsx b/packages/field/src/components/date-time/index.tsx
@@ -10,7 +10,7 @@ export default defineComponent({
   name: "DateTime",
   setup() {
     const mode = inject<ProFieldProps["mode"]>("mode", "read");
-    const value = inject<ProFieldProps["value"]>("value", "-");
+    const value = inject<ProFieldProps["value"]>("value", computed(() => "-"));
     const formState = inject<ProFieldProps["formState"]>("formState", {});
     const column = inject<ComputedRef<ProColumns>>("column", computed(() => ({}) as ProColumns));
     return () => {
@@ -27,7 +27,7 @@ export default defineComponent({
             />
           );
         default:
-          return <>{value === "-" ? value : dayjs(value).format(VALUE_FORMAT)}</>;
+          return <>{value.value === "-" ? value : dayjs(value.value).format(VALUE_FORMAT)}</>;
       }
     };
   },

diff --git a/packages/field/src/components/date/index.tsx b/packages/field/src/components/date/index.tsx
@@ -10,7 +10,7 @@ export default defineComponent({
   name: "DateTime",
   setup() {
     const mode = inject<ProFieldProps["mode"]>("mode", "read");
-    const value = inject<ProFieldProps["value"]>("value", "-");
+    const value = inject<ProFieldProps["value"]>("value", computed(() => "-"));
     const formState = inject<ProFieldProps["formState"]>("formState", {});
     const column = inject<ComputedRef<ProColumns>>("column", computed(() => ({}) as ProColumns));
     return () => {
@@ -26,7 +26,7 @@ export default defineComponent({
             />
           );
         default:
-          return <>{value === "-" ? value : dayjs(value).format(VALUE_FORMAT)}</>;
+          return <>{value.value === "-" ? value : dayjs(value.value).format(VALUE_FORMAT)}</>;
       }
     };
   },

diff --git a/packages/field/src/components/money/index.tsx b/packages/field/src/components/money/index.tsx
@@ -7,7 +7,7 @@ export default defineComponent({
   name: "Money",
   setup() {
     const mode = inject<ProFieldProps["mode"]>("mode", "read");
-    const value = inject<ProFieldProps["value"]>("value", "-");
+    const value = inject<ProFieldProps["value"]>("value", computed(() => "-"));
     const formState = inject<ProFieldProps["formState"]>("formState", {});
     const column = inject<ComputedRef<ProColumns>>("column", computed(() => ({}) as ProColumns));
     return () => {
@@ -22,7 +22,7 @@ export default defineComponent({
             />
           );
         default:
-          return <>{value === "-" ? "-" : `￥${value}`}</>;
+          return <>{value.value === "-" ? "-" : `￥${value.value}`}</>;
       }
     };
   },

diff --git a/packages/field/src/components/select/index.tsx b/packages/field/src/components/select/index.tsx
@@ -8,7 +8,7 @@ export default defineComponent({
   name: "Select",
   setup() {
     const mode = inject<ProFieldProps["mode"]>("mode", "read");
-    const value = inject<ProFieldProps["value"]>("value", "-");
+    const value = inject<ProFieldProps["value"]>("value", computed(() => "-"));
     const formState = inject<ProFieldProps["formState"]>("formState", {});
     const column = inject<ComputedRef<ProColumns>>("column", computed(() => ({}) as ProColumns));
 
@@ -25,8 +25,8 @@ export default defineComponent({
       return [];
     });
     const fieldValue = computed(() => {
-      if (column.value?.valueEnum && value !== "-") {
-        const item = (column.value?.valueEnum as ValueEnum)[value];
+      if (column.value?.valueEnum && value.value !== "-") {
+        const item = (column.value?.valueEnum as ValueEnum)[value.value];
         return (typeof item === "object" ? <Badge {...item} /> : item) || "-";
       }
       return "-";

diff --git a/packages/field/src/components/text/index.tsx b/packages/field/src/components/text/index.tsx
@@ -7,7 +7,7 @@ export default defineComponent({
   name: "Text",
   setup() {
     const mode = inject<ProFieldProps["mode"]>("mode", "read");
-    const value = inject<ProFieldProps["value"]>("value", "-");
+    const value = inject<ProFieldProps["value"]>("value", computed(() => "-"));
     const formState = inject<ProFieldProps["formState"]>("formState", {});
     const column = inject<ComputedRef<ProColumns>>("column", computed(() => ({}) as ProColumns));
     return () => {
@@ -22,7 +22,7 @@ export default defineComponent({
             />
           );
         default:
-          return <>{value}</>;
+          return <>{value.value}</>;
       }
     };
   },

diff --git a/packages/field/src/components/time/index.tsx b/packages/field/src/components/time/index.tsx
@@ -10,7 +10,7 @@ export default defineComponent({
   name: "DateTime",
   setup() {
     const mode = inject<ProFieldProps["mode"]>("mode", "read");
-    const value = inject<ProFieldProps["value"]>("value", "-");
+    const value = inject<ProFieldProps["value"]>("value", computed(() => "-"));
     const formState = inject<ProFieldProps["formState"]>("formState", {});
     const column = inject<ComputedRef<ProColumns>>("column", computed(() => ({}) as ProColumns));
     return () => {
@@ -27,7 +27,7 @@ export default defineComponent({
             />
           );
         default:
-          return <>{value === "-" ? value : dayjs(value).format(VALUE_FORMAT)}</>;
+          return <>{value.value === "-" ? value : dayjs(value.value).format(VALUE_FORMAT)}</>;
       }
     };
   },

diff --git a/packages/field/src/field.tsx b/packages/field/src/field.tsx
@@ -23,9 +23,10 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const value = computed(() => props.value);
     const column = computed(() => props.column);
     const valueType = computed<ValueType>(() => props.column.valueType || "text");
-    provide("value", props.value);
+    provide("value", value);
     provide("mode", props.mode);
     provide("column", column);
     // console.log(props, "props");

diff --git a/packages/field/src/types.ts b/packages/field/src/types.ts
@@ -1,8 +1,10 @@
+import type { ComputedRef } from "vue";
+
 export interface ProFieldProps {
   /** @name 模式 */
   mode: "edit" | "read";
   /** @name 值 */
-  value: any;
+  value: ComputedRef<any>;
   /** @name 表单值 */
   formState: Record<string, any>;
 }
diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx
@@ -1,7 +1,7 @@
 import type { SearchConfig } from "@antd-vc/pro-form";
 import type { SizeType } from "ant-design-vue/es/config-provider";
 import type { TablePaginationConfig } from "ant-design-vue/es/table";
-import type { ActionType, ProColumns } from "./typing";
+import type { ActionType } from "./typing";
 import { ProField } from "@antd-vc/pro-field";
 import { QueryFilter } from "@antd-vc/pro-form";
 import { Card, Table } from "ant-design-vue";
@@ -12,25 +12,6 @@ import ToolBar from "./components/ToolBar";
 import { ProTableProps } from "./typing";
 import { pageConfig } from "./utils";
 
-function formatTableColumns(data: ProColumns[]) {
-  return data
-    .map((item) => {
-      if (item.hideInTable) {
-        return undefined;
-      }
-      const row = {
-        ...item,
-        customRender: item.customRender ?? function ({ text }) {
-          return <ProField mode="read" value={text} column={item} />;
-        },
-      };
-      ;
-      delete row.colSpan;
-      return row;
-    })
-    .filter(Boolean);
-}
-
 export default defineComponent({
   name: "ProTable",
   props: ProTableProps,
@@ -41,7 +22,22 @@ export default defineComponent({
     const tableSize = ref<SizeType[]>(["middle"]);
     const formState = reactive<Record<any, any>>({});
     provide("tableSize", tableSize);
-    const tableColumns = computed(() => formatTableColumns(props.columns as any));
+
+    const tableColumns = computed(() => {
+      return props.columns.map((item) => {
+        if (item.hideInTable) {
+          return undefined;
+        }
+        const row = {
+          ...item,
+          customRender: item.customRender ?? function ({ text }) {
+            return <ProField mode="read" value={text} column={item} />;
+          },
+        };
+        delete row.colSpan;
+        return row;
+      }).filter(Boolean);
+    });
     const useFetchData = (
       params: { current?: number; pageSize?: number } = { current: 1, pageSize: 10 },
     ) => {