diff --git a/packages/field/src/components/date-time/index.tsx b/packages/field/src/components/date-time/index.tsx index f75df48..b6412a6 100644 --- 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("mode", "read"); - const value = inject("value", "-"); + const value = inject("value", computed(() => "-")); const formState = inject("formState", {}); const column = inject>("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 index 6472b0c..70424c9 100644 --- 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("mode", "read"); - const value = inject("value", "-"); + const value = inject("value", computed(() => "-")); const formState = inject("formState", {}); const column = inject>("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 index f7a33ca..fef543b 100644 --- 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("mode", "read"); - const value = inject("value", "-"); + const value = inject("value", computed(() => "-")); const formState = inject("formState", {}); const column = inject>("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 index 87ea4fc..97520d0 100644 --- 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("mode", "read"); - const value = inject("value", "-"); + const value = inject("value", computed(() => "-")); const formState = inject("formState", {}); const column = inject>("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" ? : item) || "-"; } return "-"; diff --git a/packages/field/src/components/text/index.tsx b/packages/field/src/components/text/index.tsx index 90edc5a..9d89ed6 100644 --- 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("mode", "read"); - const value = inject("value", "-"); + const value = inject("value", computed(() => "-")); const formState = inject("formState", {}); const column = inject>("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 index 54ba292..9f05a5b 100644 --- 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("mode", "read"); - const value = inject("value", "-"); + const value = inject("value", computed(() => "-")); const formState = inject("formState", {}); const column = inject>("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 index b088d62..b8b2bb9 100644 --- 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(() => 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 index 71d0a77..575a566 100644 --- 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; /** @name 表单值 */ formState: Record; } diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx index 07f12ec..ea45a6f 100644 --- 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 ; - }, - }; - ; - delete row.colSpan; - return row; - }) - .filter(Boolean); -} - export default defineComponent({ name: "ProTable", props: ProTableProps, @@ -41,7 +22,22 @@ export default defineComponent({ const tableSize = ref(["middle"]); const formState = reactive>({}); 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 ; + }, + }; + delete row.colSpan; + return row; + }).filter(Boolean); + }); const useFetchData = ( params: { current?: number; pageSize?: number } = { current: 1, pageSize: 10 }, ) => {