From 32574ddae0e16a9154f30855bd0a8497aec257d9 Mon Sep 17 00:00:00 2001
From: sunshineLixun <1261142605@qq.com>
Date: Mon, 16 Jan 2023 17:31:28 +0800
Subject: [PATCH 1/4] feat: add ProFormRadio

---
 .../pro-field/src/components/Radio/index.tsx  | 58 +++++++++++++++++++
 .../pro-field/src/components/Radio/types.ts   | 12 ++++
 .../src/components/TimePicker/index.tsx       |  4 +-
 packages/pro-field/src/index.tsx              | 18 ++++++
 packages/pro-form/examples/views/ProForm.vue  | 35 +++++++++--
 .../pro-form/src/components/Radio/index.tsx   | 53 +++++++++++++++++
 packages/pro-form/src/components/index.ts     | 29 +++++-----
 7 files changed, 190 insertions(+), 19 deletions(-)
 create mode 100644 packages/pro-field/src/components/Radio/index.tsx
 create mode 100644 packages/pro-field/src/components/Radio/types.ts
 create mode 100644 packages/pro-form/src/components/Radio/index.tsx

diff --git a/packages/pro-field/src/components/Radio/index.tsx b/packages/pro-field/src/components/Radio/index.tsx
new file mode 100644
index 00000000..c6005ef5
--- /dev/null
+++ b/packages/pro-field/src/components/Radio/index.tsx
@@ -0,0 +1,58 @@
+import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
+import { fieldRadioProps, FieldRadioProps } from './types';
+import { Radio } from 'ant-design-vue';
+import { getSlot } from '@ant-design-vue/pro-utils';
+
+export const slots = ['renderExtraFooter', 'suffixIcon', 'clearIcon'];
+
+const FieldRadio = defineComponent({
+  name: 'FieldRadio',
+  inheritAttrs: false,
+  props: fieldRadioProps,
+  slots,
+  setup(props, { slots }) {
+
+    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as Function;
+    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as Function;
+		const children = getSlot(slots, props.fieldProps as Record<string, any>, 'default');
+
+    return () => {
+      const { mode, text, fieldProps = {} } = props;
+			const { options } = fieldProps
+	
+			if (mode === 'read') {
+				const optionsValue = fieldProps.value;
+				const dom = <>{optionsValue}</>;
+		
+				if (render) {
+					return render(text, { mode, ...fieldProps }, dom) || null;
+				}
+				return dom;
+			}
+
+      if (mode === 'edit') {
+        const dom = (
+          <Radio.Group
+            {...fieldProps}
+						options={options}
+						v-slots={{
+							default: children
+						}}
+          />
+        );
+        if (renderFormItem) {
+          return renderFormItem(text, { mode, ...fieldProps }, dom);
+        }
+        return dom;
+      }
+      return null;
+    };
+  },
+});
+
+FieldRadio.install = (app: App) => {
+  app.component(FieldRadio.name, FieldRadio);
+  return app;
+};
+
+export default FieldRadio as DefineComponent<FieldRadioProps> & Plugin;
diff --git a/packages/pro-field/src/components/Radio/types.ts b/packages/pro-field/src/components/Radio/types.ts
new file mode 100644
index 00000000..3544bd1b
--- /dev/null
+++ b/packages/pro-field/src/components/Radio/types.ts
@@ -0,0 +1,12 @@
+import type { ExtractPropTypes, PropType } from "vue";
+import type { RadioGroupProps } from "ant-design-vue/es/radio/Group";
+import { proFieldFC } from "../typings";
+
+export const fieldRadioProps = {
+  ...proFieldFC,
+  fieldProps: {
+    type: Object as PropType<RadioGroupProps>,
+  },
+};
+
+export type FieldRadioProps = Partial<ExtractPropTypes<typeof fieldRadioProps>>;
diff --git a/packages/pro-field/src/components/TimePicker/index.tsx b/packages/pro-field/src/components/TimePicker/index.tsx
index 97e63315..4206801a 100644
--- a/packages/pro-field/src/components/TimePicker/index.tsx
+++ b/packages/pro-field/src/components/TimePicker/index.tsx
@@ -21,8 +21,8 @@ const FieldTimePicker = defineComponent({
       'renderExtraFooter'
     );
 
-    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as any;
-    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as any;
+    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as Function;
+    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as Function;
 
     return () => {
       const { mode, text, fieldProps } = props;
diff --git a/packages/pro-field/src/index.tsx b/packages/pro-field/src/index.tsx
index e7e83463..a744e4c2 100644
--- a/packages/pro-field/src/index.tsx
+++ b/packages/pro-field/src/index.tsx
@@ -75,6 +75,11 @@ import { fieldTimeRangePickerProps, type FieldTimeRangePickerProps } from './com
 import FieldTimeRangePicker, { slots as timeRangePickerSlots } from './components/TimeRangePicker';
 export { FieldTimeRangePicker, fieldTimeRangePickerProps, timeRangePickerSlots, FieldTimeRangePickerProps };
 
+import { fieldRadioProps, type FieldRadioProps } from './components/Radio/types';
+import FieldRadio from './components/Radio';
+export { FieldRadio, fieldRadioProps, FieldRadioProps };
+
+
 // style
 import './default.less';
 import './style.less';
@@ -268,6 +273,19 @@ const defaultRenderText = (
     );
   }
 
+  if (valueType === 'radio' || valueType === 'radioButton') {
+    const { fieldProps } = props
+    return (
+      <FieldRadio 
+        {...props}
+        fieldProps={{
+          ...fieldProps,
+        }}
+        text={dataValue as string} 
+      />
+    )
+  }
+
   if (valueType === 'select') {
     let text = '';
     if (dataValue instanceof Array) {
diff --git a/packages/pro-form/examples/views/ProForm.vue b/packages/pro-form/examples/views/ProForm.vue
index b44d2370..516cc20a 100644
--- a/packages/pro-form/examples/views/ProForm.vue
+++ b/packages/pro-form/examples/views/ProForm.vue
@@ -252,19 +252,37 @@
                 </div>
             </template>
         </ProFormDateTimeRangePicker>
+        <ProFormRadio             
+            name="radio"
+            label="Checkbox.Group"
+        >
+            <Radio value="a">Hangzhou</Radio>
+            <Radio value="b">Shanghai</Radio>
+            <Radio value="c">Beijing</Radio>
+            <Radio value="d" disabled>Chengdu</Radio>
+        </ProFormRadio>
+        <ProFormRadio             
+            name="radio1"
+            label="Checkbox.Group"
+            :field-props="{
+                options: optionsWithDisabled
+            }"
+        />
+            
     </pro-form>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, FunctionalComponent, CSSProperties, onMounted } from 'vue';
+import { ref, FunctionalComponent, CSSProperties } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
 import {
     RadioGroup,
     RadioButton,
+    Radio,
     Switch,
     Divider,
     SelectOption,
-    type SelectProps
+    type SelectProps, RadioGroupProps
 } from 'ant-design-vue';
 import type { FormLayout } from 'ant-design-vue/es/form/Form';
 import {
@@ -279,7 +297,8 @@ import {
     ProFormDatePickerQuarter,
     ProFormDateTimeRangePicker,
     ProFormTimePicker,
-    ProFormTimeRangePicker
+    ProFormTimeRangePicker,
+    ProFormRadio
 } from '@ant-design-vue/pro-form';
 import dayjs, { type Dayjs } from 'dayjs';
 import type { Recordable } from '@/typings';
@@ -332,7 +351,9 @@ const formModel = ref({
     yearTime: ref<Dayjs>(),
     timeDate: ref<Dayjs>(),
     timeRangeDate: ref<Dayjs>(),
-    dateTimeRange: ref<RangeValue>()
+    dateTimeRange: ref<RangeValue>(),
+    radio: 'a',
+    radio1: ''
 });
 
 const sex = ref([
@@ -386,6 +407,12 @@ const langs = ref([
     }
 ]);
 
+const optionsWithDisabled: RadioGroupProps['options'] = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: true },
+];
+
 const formLayoutType = ref<FormLayout>('horizontal');
 const grid = ref(true);
 const readonly = ref(false);
diff --git a/packages/pro-form/src/components/Radio/index.tsx b/packages/pro-form/src/components/Radio/index.tsx
new file mode 100644
index 00000000..64f7fe69
--- /dev/null
+++ b/packages/pro-form/src/components/Radio/index.tsx
@@ -0,0 +1,53 @@
+import { defineComponent, type PropType, ExtractPropTypes, App, DefineComponent, Plugin } from 'vue';
+import type { RadioGroupProps } from 'ant-design-vue/es/radio/Group';
+import { getSlot } from '@ant-design-vue/pro-utils';
+import { pick } from 'lodash-es';
+import ProFormField, { proFormFieldProps } from '../Field';
+import { proFormItemProps } from '../FormItem';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+
+const props = {
+  ...proFormFieldProps,
+  fieldProps: {
+    type: Object as PropType<RadioGroupProps>,
+  },
+};
+export type ProFormRadioProps = Partial<ExtractPropTypes<typeof props>>;
+
+export const ProFormRadio = defineComponent({
+  name: 'ProFormRadio',
+  inheritAttrs: false,
+  props,
+  setup(props, { slots }) {
+    const formItemProps = {
+      ...props.formItemProps,
+      ...pick(props, Object.keys(proFormItemProps)),
+    };
+
+    const children = getSlot(slots, props, 'default') as Function;
+
+    return () => {
+      const { fieldProps, colProps } = props;
+      return (
+        <ProFormField
+          valueType={'radio' || 'radioButton'}
+          fieldProps={{
+            ...fieldProps,
+            default: children
+          }}
+          filedConfig={{ valueType: 'radio' || 'radioButton'}}
+          colProps={colProps}
+          formItemProps={formItemProps}
+          {...formItemProps}
+        />
+      );
+    };
+  },
+});
+
+ProFormRadio.install = (app: App) => {
+  app.component(ProFormRadio.name, ProFormRadio);
+  return app;
+};
+
+export default ProFormRadio as DefineComponent<ProFormRadioProps> & Plugin;
diff --git a/packages/pro-form/src/components/index.ts b/packages/pro-form/src/components/index.ts
index 6b8de0ea..4aaf84db 100644
--- a/packages/pro-form/src/components/index.ts
+++ b/packages/pro-form/src/components/index.ts
@@ -1,38 +1,41 @@
-import ProFormText, { type ProFieldPropsType } from './Text';
+import ProFormText, { type ProFieldPropsType } from "./Text";
 export { ProFormText, ProFieldPropsType };
 
-import ProFormPassword, { type ProFieldPasswordPropsType } from './Password';
+import ProFormPassword, { type ProFieldPasswordPropsType } from "./Password";
 export { ProFormPassword, ProFieldPasswordPropsType };
 
-import { ProFormSelect } from './Select';
+import { ProFormSelect } from "./Select";
 export { ProFormSelect };
 
-import { default as ProFormDatePicker } from './DatePicker';
+import { default as ProFormDatePicker } from "./DatePicker";
 export { ProFormDatePicker };
 
-import { ProFormDatePickerWeek } from './DatePicker/WeekPicker';
+import { ProFormDatePickerWeek } from "./DatePicker/WeekPicker";
 export { ProFormDatePickerWeek };
 
-import { ProFormDatePickerMonth } from './DatePicker/MonthPicker';
+import { ProFormDatePickerMonth } from "./DatePicker/MonthPicker";
 export { ProFormDatePickerMonth };
 
-import { ProFormDatePickerQuarter } from './DatePicker/QuarterPicker';
+import { ProFormDatePickerQuarter } from "./DatePicker/QuarterPicker";
 export { ProFormDatePickerQuarter };
 
-import { ProFormDatePickerYear } from './DatePicker/YearPicker';
+import { ProFormDatePickerYear } from "./DatePicker/YearPicker";
 export { ProFormDatePickerYear };
 
-import { ProFormDateRangePicker } from './DateRangePicker';
+import { ProFormDateRangePicker } from "./DateRangePicker";
 export { ProFormDateRangePicker };
 
-import { ProFormDateTimePicker } from './DateTimePicker';
+import { ProFormDateTimePicker } from "./DateTimePicker";
 export { ProFormDateTimePicker };
 
-import { ProFormDateTimeRangePicker } from './DateTimeRangePicker';
+import { ProFormDateTimeRangePicker } from "./DateTimeRangePicker";
 export { ProFormDateTimeRangePicker };
 
-import { ProFormTimePicker } from './TimePicker';
+import { ProFormTimePicker } from "./TimePicker";
 export { ProFormTimePicker };
 
-import { ProFormTimeRangePicker } from './TimeRangePicker';
+import { ProFormTimeRangePicker } from "./TimeRangePicker";
 export { ProFormTimeRangePicker };
+
+import { ProFormRadio } from "./Radio";
+export { ProFormRadio };

From a6a8a7783499f2c49ffde59ca9185b4f8f13b483 Mon Sep 17 00:00:00 2001
From: sunshineLixun <1261142605@qq.com>
Date: Sat, 28 Jan 2023 15:58:46 +0800
Subject: [PATCH 2/4] feat: add ProFormRadio

---
 .../pro-field/src/components/Radio/index.tsx  |  85 +++++++----
 .../pro-field/src/components/Select/index.tsx | 143 +++++++++++++++---
 packages/pro-field/src/components/typings.ts  |  40 +++--
 packages/pro-field/src/index.tsx              |   8 +-
 packages/pro-form/examples/views/ProForm.vue  |  25 +--
 .../pro-form/src/components/Select/index.tsx  |   1 -
 packages/utils/src/getType/index.ts           |  16 ++
 packages/utils/src/index.ts                   |  28 ++--
 packages/utils/src/objToMap/index.ts          |   8 +
 packages/utils/src/typings.ts                 |  56 ++++++-
 10 files changed, 318 insertions(+), 92 deletions(-)
 create mode 100644 packages/utils/src/getType/index.ts
 create mode 100644 packages/utils/src/objToMap/index.ts

diff --git a/packages/pro-field/src/components/Radio/index.tsx b/packages/pro-field/src/components/Radio/index.tsx
index c6005ef5..b63630b2 100644
--- a/packages/pro-field/src/components/Radio/index.tsx
+++ b/packages/pro-field/src/components/Radio/index.tsx
@@ -1,43 +1,72 @@
-import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
-import { fieldRadioProps, FieldRadioProps } from './types';
-import { Radio } from 'ant-design-vue';
-import { getSlot } from '@ant-design-vue/pro-utils';
+import {
+  defineComponent,
+  type App,
+  DefineComponent,
+  Plugin,
+  computed,
+} from "vue";
+import { fieldRadioProps, FieldRadioProps } from "./types";
+import { Radio } from "ant-design-vue";
+import { getSlot, VueText, objToMap } from "@ant-design-vue/pro-utils";
+import { proFieldParsingText } from "../Select";
 
-export const slots = ['renderExtraFooter', 'suffixIcon', 'clearIcon'];
+export const slots = ["renderExtraFooter", "suffixIcon", "clearIcon"];
 
 const FieldRadio = defineComponent({
-  name: 'FieldRadio',
+  name: "FieldRadio",
   inheritAttrs: false,
   props: fieldRadioProps,
   slots,
   setup(props, { slots }) {
-
-    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as Function;
-    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as Function;
-		const children = getSlot(slots, props.fieldProps as Record<string, any>, 'default');
+    const render = getSlot(
+      slots,
+      props.fieldProps as Record<string, any>,
+      "render"
+    ) as Function;
+    const renderFormItem = getSlot(
+      slots,
+      props.fieldProps as Record<string, any>,
+      "renderFormItem"
+    ) as Function;
+    const children = getSlot(
+      slots,
+      props.fieldProps as Record<string, any>,
+      "default"
+    );
 
     return () => {
-      const { mode, text, fieldProps = {} } = props;
-			const { options } = fieldProps
-	
-			if (mode === 'read') {
-				const optionsValue = fieldProps.value;
-				const dom = <>{optionsValue}</>;
-		
-				if (render) {
-					return render(text, { mode, ...fieldProps }, dom) || null;
-				}
-				return dom;
-			}
-
-      if (mode === 'edit') {
+      const { mode, text, valueEnum, fieldProps = {} } = props;
+      const { options } = fieldProps;
+
+      if (mode === "read") {
+        const optionsValueEnum = options?.length
+          ? options?.reduce((pre: any, cur: any) => {
+              return { ...pre, [cur.value ?? ""]: cur.label };
+            }, {})
+          : undefined;
+        const dom = (
+          <>
+            {proFieldParsingText(
+              text as VueText,
+              objToMap(valueEnum || optionsValueEnum)
+            )}
+          </>
+        );
+
+        if (render) {
+          return render(text, { mode, ...fieldProps }, dom) || null;
+        }
+        return dom;
+      }
+
+      if (mode === "edit") {
         const dom = (
           <Radio.Group
             {...fieldProps}
-						options={options}
-						v-slots={{
-							default: children
-						}}
+            options={options}
+            v-slots={{
+              default: children,
+            }}
           />
         );
         if (renderFormItem) {
diff --git a/packages/pro-field/src/components/Select/index.tsx b/packages/pro-field/src/components/Select/index.tsx
index 525be8ed..507f5a80 100644
--- a/packages/pro-field/src/components/Select/index.tsx
+++ b/packages/pro-field/src/components/Select/index.tsx
@@ -1,11 +1,67 @@
-import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
-import { getSlot, type ProFieldRequestData } from '@ant-design-vue/pro-utils';
-import { Spin } from 'ant-design-vue';
-import renderEmpty from 'ant-design-vue/es/config-provider/renderEmpty';
-import SearchSelect from './SearchSelect';
-import type { SearchSelectProps } from './SearchSelect/types';
-import { proFieldFC } from '../typings';
-import { useFetchData } from './hooks/useFetchData';
+import {
+  defineComponent,
+  computed,
+  type App,
+  DefineComponent,
+  Plugin,
+  PropType,
+  ExtractPropTypes,
+  Fragment,
+} from "vue";
+import {
+  getSlot,
+  objToMap,
+  type ProFieldRequestData,
+  ProFieldValueEnumType,
+  ProSchemaValueEnumObj,
+  VueNode,
+} from "@ant-design-vue/pro-utils";
+import { Spin, Space } from "ant-design-vue";
+import renderEmpty from "ant-design-vue/es/config-provider/renderEmpty";
+import SearchSelect from "./SearchSelect";
+import type { SearchSelectProps } from "./SearchSelect/types";
+import { proFieldFC } from "../typings";
+import { useFetchData } from "./hooks/useFetchData";
+
+export const proFieldParsingText = (
+  text: string | number | (string | number)[],
+  valueEnumParams: ProFieldValueEnumType,
+  key?: number | string
+): VueNode => {
+  if (Array.isArray(text)) {
+    return (
+      // Space暂时还不支出split属性
+      <Space key={key} size={2} wrap>
+        {text.map((value, index) =>
+          // @ts-ignore
+          proFieldParsingText(value, valueEnumParams, index)
+        )}
+      </Space>
+    );
+  }
+
+  const valueEnum = objToMap(valueEnumParams);
+
+  if (!valueEnum.has(text) && !valueEnum.has(`${text}`)) {
+    // @ts-ignore
+    return text?.label || text;
+  }
+
+  const domText = (valueEnum.get(text) || valueEnum.get(`${text}`)) as {
+    text: VueNode;
+    color?: string;
+  };
+
+  if (!domText) {
+    // @ts-ignore
+    return <Fragment key={key}>{text?.label || text}</Fragment>;
+  }
+
+  // 什么都没有使用 text
+  return (
+    <Fragment key={key}>{domText.text || (domText as any as VueNode)}</Fragment>
+  );
+};
 
 export const fieldSelectProps = {
   ...proFieldFC,
@@ -15,30 +71,71 @@ export const fieldSelectProps = {
   // 请求
   request: {
     type: Function as PropType<ProFieldRequestData>,
-  },
+  }
 };
-export type FieldSelectProps = Partial<ExtractPropTypes<typeof fieldSelectProps>>;
+export type FieldSelectProps = Partial<
+  ExtractPropTypes<typeof fieldSelectProps>
+>;
 
 const FieldSelect = defineComponent({
   inheritAttrs: false,
   props: fieldSelectProps,
-  slots: ['render', 'renderFormItem'],
+  slots: ["render", "renderFormItem"],
   setup(props, { slots }) {
     const { defaultKeyWords, loading, options } = useFetchData(props);
-    return () => {
-      const { mode, text, fieldProps } = props;
-      const render = getSlot(slots, props, 'render') as any;
-      const renderFormItem = getSlot(slots, props, 'renderFormItem') as any;
 
-      if (mode === 'read') {
-        const dom = <>{text}</>;
+    const optionsValueEnum = computed(() => {
+      if (props.mode !== "read") return;
+
+      const {
+        label: labelPropsName = "label",
+        value: valuePropsName = "value",
+        options: optionsPropsName = "options",
+      } = (props.fieldProps || {}).fieldNames || {};
+
+      const valuesMap = new Map();
+
+      const traverseOptions = (_options: SearchSelectProps['options']) => {
+        if (!_options?.length) {
+          return valuesMap;
+        }
+        const length = _options.length;
+        let i = 0;
+        while (i < length) {
+          const cur = _options[i++];
+          valuesMap.set(cur[valuePropsName], cur[labelPropsName]);
+          traverseOptions(cur[optionsPropsName]);
+        }
+        return valuesMap;
+      };
+
+      return traverseOptions(options.value);
+    });
+
+
+    return () => {
+      const { mode, text, valueEnum, fieldProps } = props;
+      const render = getSlot(slots, props, "render") as any;
+      const renderFormItem = getSlot(slots, props, "renderFormItem") as any;
+      
+      if (mode === "read") {
+        const dom = (
+          <>
+            {proFieldParsingText(
+              text as string | string[],
+              objToMap(
+                valueEnum || optionsValueEnum.value
+              ) as unknown as ProSchemaValueEnumObj
+            )}
+          </>
+        );
         if (render) {
           return render(text, { mode, fieldProps }, dom) || null;
         }
         return dom;
       }
-      if (mode === 'edit' || mode === 'update') {
-        const hasChildren = typeof fieldProps?.default === 'function';
+      if (mode === "edit" || mode === "update") {
+        const hasChildren = typeof fieldProps?.default === "function";
         const renderDom = (
           <SearchSelect
             style={{
@@ -49,10 +146,14 @@ const FieldSelect = defineComponent({
             options={hasChildren ? undefined : options.value}
             default={hasChildren ? fieldProps?.default : undefined}
             fetchData={(value) => (defaultKeyWords.value = value)}
-            resetData={() => (defaultKeyWords.value = '')}
+            resetData={() => (defaultKeyWords.value = "")}
             v-slots={{
               notFoundContent: () => {
-                return loading.value ? <Spin size={'small'} /> : fieldProps?.notFoundContent || renderEmpty('Select');
+                return loading.value ? (
+                  <Spin size={"small"} />
+                ) : (
+                  fieldProps?.notFoundContent || renderEmpty("Select")
+                );
               },
             }}
           />
diff --git a/packages/pro-field/src/components/typings.ts b/packages/pro-field/src/components/typings.ts
index 14d789f5..76365838 100644
--- a/packages/pro-field/src/components/typings.ts
+++ b/packages/pro-field/src/components/typings.ts
@@ -1,6 +1,12 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { ProFieldFCMode, VueNode, ProFieldTextType } from '@ant-design-vue/pro-utils';
-import type { FormItemProps, FormProps } from 'ant-design-vue';
+import type { PropType, ExtractPropTypes } from "vue";
+import type {
+  ProFieldFCMode,
+  VueNode,
+  ProFieldTextType,
+  ProSchemaValueEnumObj,
+  ProSchemaValueEnumMap,
+} from "@ant-design-vue/pro-utils";
+import type { FormItemProps, FormProps } from "ant-design-vue";
 
 // BaseProFieldProps
 export const baseProFieldFC = {
@@ -14,7 +20,7 @@ export const baseProFieldFC = {
   /** 模式类型 */
   mode: {
     type: String as PropType<ProFieldFCMode>,
-    default: 'edit',
+    default: "edit",
   },
   /** 简约模式 */
   plain: {
@@ -24,6 +30,10 @@ export const baseProFieldFC = {
   light: {
     type: Boolean as PropType<boolean>,
   },
+  /** 映射值的类型 */
+  valueEnum: {
+    type: Object as PropType<ProSchemaValueEnumObj | ProSchemaValueEnumMap>,
+  },
   /** Label */
   label: {
     type: String as PropType<VueNode>,
@@ -32,7 +42,7 @@ export const baseProFieldFC = {
   formItemProps: {
     type: Object as PropType<
       FormItemProps & {
-        model?: FormProps['model'];
+        model?: FormProps["model"];
       }
     >,
   },
@@ -41,12 +51,20 @@ export const baseProFieldFC = {
 export const proRenderFieldPropsType = {
   render: {
     type: Function as PropType<
-      (text: ProFieldTextType, props: ProFieldFCRenderProps, dom: ProFieldTextType) => VueNode
+      (
+        text: ProFieldTextType,
+        props: ProFieldFCRenderProps,
+        dom: ProFieldTextType
+      ) => VueNode
     >,
   },
   renderFormItem: {
     type: Function as PropType<
-      (text: ProFieldTextType, props: ProFieldFCRenderProps, dom: ProFieldTextType) => VueNode
+      (
+        text: ProFieldTextType,
+        props: ProFieldFCRenderProps,
+        dom: ProFieldTextType
+      ) => VueNode
     >,
   },
 };
@@ -67,10 +85,14 @@ export const proFieldFCRenderProps = {
 };
 
 // RenderProps
-export type ProFieldFCRenderProps = Partial<ExtractPropTypes<typeof proFieldFCRenderProps>>;
+export type ProFieldFCRenderProps = Partial<
+  ExtractPropTypes<typeof proFieldFCRenderProps>
+>;
 
 export type ProFieldFC = Partial<ExtractPropTypes<typeof proFieldFC>>;
 
 export type BaseProFieldFC = Partial<ExtractPropTypes<typeof baseProFieldFC>>;
 
-export type ProRenderFieldPropsType = Partial<ExtractPropTypes<typeof proRenderFieldPropsType>>;
+export type ProRenderFieldPropsType = Partial<
+  ExtractPropTypes<typeof proRenderFieldPropsType>
+>;
diff --git a/packages/pro-field/src/index.tsx b/packages/pro-field/src/index.tsx
index a744e4c2..8877860c 100644
--- a/packages/pro-field/src/index.tsx
+++ b/packages/pro-field/src/index.tsx
@@ -287,13 +287,7 @@ const defaultRenderText = (
   }
 
   if (valueType === 'select') {
-    let text = '';
-    if (dataValue instanceof Array) {
-      text = dataValue.join(',');
-    } else {
-      text = dataValue as string;
-    }
-    return <FieldSelect {...props} text={text} />;
+    return <FieldSelect {...props} text={dataValue} />;
   }
   if (valueType === 'password') {
     return <FieldPassword {...props} text={dataValue as string} />;
diff --git a/packages/pro-form/examples/views/ProForm.vue b/packages/pro-form/examples/views/ProForm.vue
index 516cc20a..81fd431d 100644
--- a/packages/pro-form/examples/views/ProForm.vue
+++ b/packages/pro-form/examples/views/ProForm.vue
@@ -255,17 +255,24 @@
         <ProFormRadio             
             name="radio"
             label="Checkbox.Group"
+            :col-props="{
+                span: 24                
+            }"
         >
             <Radio value="a">Hangzhou</Radio>
             <Radio value="b">Shanghai</Radio>
-            <Radio value="c">Beijing</Radio>
-            <Radio value="d" disabled>Chengdu</Radio>
+            <Radio value="c" disabled>Beijing</Radio>
+            <Radio value="d">Chengdu</Radio>
         </ProFormRadio>
         <ProFormRadio             
             name="radio1"
             label="Checkbox.Group"
+            :col-props="{
+                xs: 24
+            }"
             :field-props="{
-                options: optionsWithDisabled
+                options: optionsWithDisabled,
+                optionType: 'button'
             }"
         />
             
@@ -353,7 +360,7 @@ const formModel = ref({
     timeRangeDate: ref<Dayjs>(),
     dateTimeRange: ref<RangeValue>(),
     radio: 'a',
-    radio1: ''
+    radio1: 'A'
 });
 
 const sex = ref([
@@ -374,11 +381,11 @@ const girlNameoptions = ref<SelectProps['options']>([
         label: 'Manager',
         options: [
             {
-                value: 'jack',
+                value: 'j',
                 label: 'Jack'
             },
             {
-                value: 'lucy',
+                value: 'l',
                 label: 'Lucy'
             }
         ]
@@ -408,9 +415,9 @@ const langs = ref([
 ]);
 
 const optionsWithDisabled: RadioGroupProps['options'] = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange', disabled: true },
+  { label: 'Apple', value: 'A' },
+  { label: 'Pear', value: 'P' },
+  { label: 'Orange', value: 'O', disabled: true },
 ];
 
 const formLayoutType = ref<FormLayout>('horizontal');
diff --git a/packages/pro-form/src/components/Select/index.tsx b/packages/pro-form/src/components/Select/index.tsx
index 86e5fcc1..f81fa371 100644
--- a/packages/pro-form/src/components/Select/index.tsx
+++ b/packages/pro-form/src/components/Select/index.tsx
@@ -1,5 +1,4 @@
 import { defineComponent, computed, unref, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
-// import { searchSelectSlots } from '@ant-design-vue/pro-field';
 import { getSlot, type VueNode } from '@ant-design-vue/pro-utils';
 import { pick } from 'lodash-es';
 import type { SelectProps, DefaultOptionType } from 'ant-design-vue/es/select';
diff --git a/packages/utils/src/getType/index.ts b/packages/utils/src/getType/index.ts
new file mode 100644
index 00000000..a0267ee8
--- /dev/null
+++ b/packages/utils/src/getType/index.ts
@@ -0,0 +1,16 @@
+/**
+ * 获取类型的 type
+ *
+ * @param obj
+ */
+export function getType(obj: any) {
+  // @ts-ignore
+  const type = Object.prototype.toString
+    .call(obj)
+    .match(/^\[object (.*)\]$/)[1]
+    .toLowerCase();
+  if (type === "string" && typeof obj === "object") return "object"; // Let "new String('')" return 'object'
+  if (obj === null) return "null"; // PhantomJS has type "DOMWindow" for null
+  if (obj === undefined) return "undefined"; // PhantomJS has type "DOMWindow" for undefined
+  return type;
+}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index c3c05a30..aac13b69 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,16 +1,18 @@
-import isImg from './isImg';
-import isNil from './isNil';
-import isUrl from './isUrl';
-import { getSlotVNode, getSlot } from './getSlot';
+import isImg from "./isImg";
+import isNil from "./isNil";
+import isUrl from "./isUrl";
+import { getSlotVNode, getSlot } from "./getSlot";
+export { getType } from "./getType";
+export { objToMap } from "./objToMap";
 
-export * from './is';
+export * from "./is";
 export { isImg, isNil, isUrl, getSlotVNode, getSlot };
 
-import omitUndefined from './omitUndefined';
-import pickProProps from './pickProProps';
+import omitUndefined from "./omitUndefined";
+import pickProProps from "./pickProProps";
 export { omitUndefined, pickProProps };
 
-import { proxyToRaw } from './proxyToRaw';
+import { proxyToRaw } from "./proxyToRaw";
 export { proxyToRaw };
 
 // type
@@ -23,7 +25,11 @@ import {
   ProFieldValueObjectType,
   ProFieldValueType,
   ProFieldValueTypeWithFieldProps,
-} from './typings';
+  ProSchemaValueEnumType,
+  ProSchemaValueEnumMap,
+  ProSchemaValueEnumObj,
+  ProFieldValueEnumType,
+} from "./typings";
 export {
   VueNode,
   ProFieldFCMode,
@@ -33,4 +39,8 @@ export {
   ProFieldValueObjectType,
   ProFieldValueType,
   ProFieldValueTypeWithFieldProps,
+  ProSchemaValueEnumType,
+  ProSchemaValueEnumMap,
+  ProSchemaValueEnumObj,
+  ProFieldValueEnumType,
 };
diff --git a/packages/utils/src/objToMap/index.ts b/packages/utils/src/objToMap/index.ts
new file mode 100644
index 00000000..4a8a3538
--- /dev/null
+++ b/packages/utils/src/objToMap/index.ts
@@ -0,0 +1,8 @@
+import { getType } from "../getType";
+
+export const objToMap = (value: any) => {
+  if (getType(value) === "map") {
+    return value;
+  }
+  return new Map(Object.entries(value || {}));
+};
diff --git a/packages/utils/src/typings.ts b/packages/utils/src/typings.ts
index ed3d10b6..56c5090e 100644
--- a/packages/utils/src/typings.ts
+++ b/packages/utils/src/typings.ts
@@ -1,7 +1,10 @@
-import type { Slot, VNode, VNodeChild } from 'vue';
-import type { DefaultOptionType } from 'ant-design-vue/es/select';
+import type { Slot, VNode, VNodeChild } from "vue";
+import type { DefaultOptionType } from "ant-design-vue/es/select";
 
-import type { ProFieldValueType, ProFieldValueTypeWithFieldProps } from './types';
+import type {
+  ProFieldValueType,
+  ProFieldValueTypeWithFieldProps,
+} from "./types";
 
 export { ProFieldValueType, ProFieldValueTypeWithFieldProps };
 
@@ -25,19 +28,25 @@ export type VueNode =
   | undefined;
 
 // Mode
-export type ProFieldFCMode = 'read' | 'edit' | 'update';
+export type ProFieldFCMode = "read" | "edit" | "update";
 
 // Text
 export type VueText = string | number;
 
 // Text
-export type ProFieldTextType = VueNode | VueNode[] | Record<string, any> | Record<string, any>[];
+export type ProFieldTextType =
+  | VueNode
+  | VueNode[]
+  | Record<string, any>
+  | Record<string, any>[];
 
-export type ProFieldRequestData<U = any> = (params?: U) => Promise<DefaultOptionType[]>;
+export type ProFieldRequestData<U = any> = (
+  params?: U
+) => Promise<DefaultOptionType[]>;
 
 export type ProFieldValueObjectType = {
-  type: 'progress' | 'money' | 'percent' | 'image';
-  status?: 'normal' | 'active' | 'success' | 'exception' | undefined;
+  type: "progress" | "money" | "percent" | "image";
+  status?: "normal" | "active" | "success" | "exception" | undefined;
   locale?: string;
   /** Percent */
   showSymbol?: ((value: any) => boolean) | boolean;
@@ -48,3 +57,34 @@ export type ProFieldValueObjectType = {
   /** Image */
   width?: number;
 };
+
+export type ProSchemaValueEnumType = {
+  /** @name 演示的文案 */
+  text: VueNode;
+
+  /** @name 预定的颜色 */
+  status?: string;
+  /** @name 自定义的颜色 */
+  color?: string;
+  /** @name 是否禁用 */
+  disabled?: boolean;
+};
+
+/**
+ * 支持 Map 和 Record<string,any>
+ *
+ * @name ValueEnum 的类型
+ */
+export type ProSchemaValueEnumMap = Map<
+  VueText,
+  ProSchemaValueEnumType | VueNode
+>;
+
+export type ProSchemaValueEnumObj = Record<
+  string,
+  ProSchemaValueEnumType | VueNode
+>;
+
+export type ProFieldValueEnumType =
+  | ProSchemaValueEnumMap
+  | ProSchemaValueEnumObj;

From ca90d9c08516b986ff7d7f7a236e20fd265dd152 Mon Sep 17 00:00:00 2001
From: sunshineLixun <1261142605@qq.com>
Date: Wed, 14 Jun 2023 15:01:40 +0800
Subject: [PATCH 3/4] bugfix

---
 packages/pro-form/examples/views/QueryFilter.vue      | 8 ++++++--
 packages/pro-form/src/BaseForm/hooks/useFormEvents.ts | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/pro-form/examples/views/QueryFilter.vue b/packages/pro-form/examples/views/QueryFilter.vue
index b6c3830b..75cb11a9 100644
--- a/packages/pro-form/examples/views/QueryFilter.vue
+++ b/packages/pro-form/examples/views/QueryFilter.vue
@@ -1,5 +1,5 @@
 <template>
-    <QueryFilter :model="formModel" @finish="handleSubmit" @collapsed="onCollapsed">
+    <QueryFilter :model="formModel" @finish="handleSubmit" @collapsed="onCollapsed" @reset="onReset">
         <ProFormText
             name="name"
             label="应用名称"
@@ -109,7 +109,7 @@ const fetchUser = async () => {
 
 const formModel = reactive({
     name: '456',
-    country: undefined,
+    country: [],
     expirationTime: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
     rangeTimes: ref<RangeValue>(),
     weakTime: ref<Dayjs>(),
@@ -135,4 +135,8 @@ function handleSubmit(params: any) {
 function onCollapsed(collapsed: boolean) {
     console.log(collapsed);
 }
+
+function onReset(params: any) {
+    console.log(params);
+}
 </script>
diff --git a/packages/pro-form/src/BaseForm/hooks/useFormEvents.ts b/packages/pro-form/src/BaseForm/hooks/useFormEvents.ts
index 35d43257..d90642e0 100644
--- a/packages/pro-form/src/BaseForm/hooks/useFormEvents.ts
+++ b/packages/pro-form/src/BaseForm/hooks/useFormEvents.ts
@@ -57,7 +57,7 @@ export const useFromEvents = (params: EventsParams) => {
   const resetFields = (name?: NamePath) => {
     unref(formInstanceRef)?.resetFields(name);
 
-    props.onReset?.(model.value);
+    props.onReset?.(handleFormValues(model.value));
     submitOnReset && handleSubmit();
   };
 

From 0fdb9b1469b40a52cc4af8f7c923534f928ce471 Mon Sep 17 00:00:00 2001
From: sunshineLixun <1261142605@qq.com>
Date: Wed, 14 Jun 2023 16:54:38 +0800
Subject: [PATCH 4/4] refactor: useGridHelpers

---
 packages/pro-form/examples/layouts/BasicLayout.vue          | 6 ++++--
 packages/pro-form/src/BaseForm/BaseForm.tsx                 | 2 +-
 .../src/QueryFilter/components/form-action/action.tsx       | 2 ++
 packages/pro-form/src/helpers/grid.tsx                      | 6 ------
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/pro-form/examples/layouts/BasicLayout.vue b/packages/pro-form/examples/layouts/BasicLayout.vue
index 2e2961aa..b8205fd9 100644
--- a/packages/pro-form/examples/layouts/BasicLayout.vue
+++ b/packages/pro-form/examples/layouts/BasicLayout.vue
@@ -19,11 +19,11 @@
     <!-- custom right-content -->
     <template #rightContentRender>
       <div style="margin-right: 12px">
-        <a-avatar shape="square" size="small">
+        <Avatar shape="square" size="small">
           <template #icon>
             <UserOutlined />
           </template>
-        </a-avatar>
+        </Avatar>
       </div>
     </template>
     <!-- custom breadcrumb itemRender  -->
@@ -72,6 +72,8 @@
 import { computed, reactive, ref, watchEffect, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { getMenuData, clearMenuItem, type RouteContextProps } from '@ant-design-vue/pro-layout';
+import { Avatar } from 'ant-design-vue';
+
 
 const watermarkContent = ref('Pro Layout');
 const loading = ref(false);
diff --git a/packages/pro-form/src/BaseForm/BaseForm.tsx b/packages/pro-form/src/BaseForm/BaseForm.tsx
index 5aef05e1..de5d0059 100644
--- a/packages/pro-form/src/BaseForm/BaseForm.tsx
+++ b/packages/pro-form/src/BaseForm/BaseForm.tsx
@@ -37,7 +37,7 @@ const BaseForm = defineComponent({
             ...formEvents,
             ...formMethods
         } as BaseFormType;
-
+        
         createFromInstance(instance);
 
         expose(instance);
diff --git a/packages/pro-form/src/QueryFilter/components/form-action/action.tsx b/packages/pro-form/src/QueryFilter/components/form-action/action.tsx
index 2c12471a..dee8f992 100644
--- a/packages/pro-form/src/QueryFilter/components/form-action/action.tsx
+++ b/packages/pro-form/src/QueryFilter/components/form-action/action.tsx
@@ -37,7 +37,9 @@ export const Action = defineComponent({
   },
   emits: ['collapsed'],
   setup(props, { emit }) {
+
     const { submit, resetForm } = useFormInstance();
+
     const onCollapsed = () => {
       emit('collapsed', !props.collapsed);
     };
diff --git a/packages/pro-form/src/helpers/grid.tsx b/packages/pro-form/src/helpers/grid.tsx
index 9056098f..8bdea756 100644
--- a/packages/pro-form/src/helpers/grid.tsx
+++ b/packages/pro-form/src/helpers/grid.tsx
@@ -54,14 +54,8 @@ export const gridHelpers: (config: ProFormGridConfig & CommonProps) => GridHelpe
 });
 
 export const useGridHelpers = (props?: (ProFormGridConfig & CommonProps) | boolean) => {
-  const formInstance = useFormInstance();
   const _grid = ref<boolean>();
   const _colProps = ref<ColProps>();
-  if (formInstance) {
-    const { grid, colProps } = unref(formInstance.getFormProps);
-    _grid.value = grid;
-    _colProps.value = colProps;
-  }
 
   const config = computed(() => {
     if (typeof props === 'object') {