feat(preview): added createImgPreview picture preview function

src/components/Form/src/components/ApiSelect.vue

@@ -26,7 +26,6 @@
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { get, omit } from 'lodash-es';
-
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';

src/components/Form/src/components/FormAction.vue

@@ -40,13 +40,11 @@
 <script lang="ts">
   import type { ColEx } from '../types/index';
   import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
-
   import { defineComponent, computed, PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { Button } from '/@/components/Button';
   import { BasicArrow } from '/@/components/Basic/index';
   import { useFormContext } from '../hooks/useFormContext';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';
 

src/components/Form/src/components/FormItem.vue

@@ -4,17 +4,14 @@
   import type { FormSchema } from '../types/form';
   import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
   import type { TableActionType } from '/@/components/Table';
-
   import { defineComponent, computed, unref, toRefs } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
   import { BasicHelp } from '/@/components/Basic';
-
   import { isBoolean, isFunction, isNull } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
   import { createPlaceholderMessage, setComponentRuleType } from '../helper';
   import { upperFirst, cloneDeep } from 'lodash-es';
-
   import { useItemLabelWidth } from '../hooks/useLabelWidth';
   import { useI18n } from '/@/hooks/web/useI18n';
 
@@ -91,7 +88,6 @@
         if (isBoolean(dynamicDisabled)) {
           disabled = dynamicDisabled;
         }
-
         if (isFunction(dynamicDisabled)) {
           disabled = dynamicDisabled(unref(getValues));
         }
@@ -276,7 +272,6 @@
           : {
               default: () => renderComponentContent,
             };
-
         return <Comp {...compAttr}>{compSlot}</Comp>;
       }
 
@@ -317,7 +312,6 @@
         };
 
         const showSuffix = !!suffix;
-
         const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
 
         return (
@@ -338,16 +332,18 @@
           </Form.Item>
         );
       }
+
       return () => {
         const { colProps = {}, colSlot, renderColContent, component } = props.schema;
-        if (!componentMap.has(component)) return null;
+        if (!componentMap.has(component)) {
+          return null;
+        }
 
         const { baseColProps = {} } = props.formProps;
-
         const realColProps = { ...baseColProps, ...colProps };
         const { isIfShow, isShow } = getShow();
-
         const values = unref(getValues);
+
         const getContent = () => {
           return colSlot
             ? getSlot(slots, colSlot, values)

src/components/Form/src/components/RadioButtonGroup.vue

@@ -1,7 +1,6 @@
 <!--
  * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
 -->
-
 <template>
   <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
     <template v-for="item in getOptions" :key="`${item.value}`">
@@ -17,6 +16,7 @@
   import { isString } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '/@/hooks/core/useAttrs';
+
   type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
   type RadioItem = string | OptionsItem;
 
@@ -39,6 +39,7 @@
       const attrs = useAttrs();
       // Embedded in the form, just use the hook binding to perform form verification
       const [state] = useRuleFormItem(props);
+
       // Processing options value
       const getOptions = computed((): OptionsItem[] => {
         const { options } = props;

src/components/Form/src/hooks/useAdvanced.ts

@@ -2,10 +2,8 @@ import type { ColEx } from '../types';
 import type { AdvanceState } from '../types/hooks';
 import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
-
 import { computed, unref, watch } from 'vue';
 import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
-
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
 import { useDebounceFn } from '@vueuse/core';
 

src/components/Form/src/hooks/useAutoFocus.ts

@@ -16,16 +16,22 @@ export async function useAutoFocus({
   isInitedDefault,
 }: UseAutoFocusContext) {
   watchEffect(async () => {
-    if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) return;
+    if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) {
+      return;
+    }
     await nextTick();
     const schemas = unref(getSchema);
     const formEl = unref(formElRef);
     const el = (formEl as any)?.$el as HTMLElement;
-    if (!formEl || !el || !schemas || schemas.length === 0) return;
+    if (!formEl || !el || !schemas || schemas.length === 0) {
+      return;
+    }
 
     const firstItem = schemas[0];
     // Only open when the first form item is input type
-    if (!firstItem.component.includes('Input')) return;
+    if (!firstItem.component.includes('Input')) {
+      return;
+    }
 
     const inputEl = el.querySelector('.ant-row:first-child input') as Nullable<HTMLInputElement>;
     if (!inputEl) return;

src/components/Form/src/hooks/useForm.ts

@@ -1,12 +1,10 @@
-import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
-
-import { isProdMode } from '/@/utils/env';
-import { error } from '/@/utils/log';
-import { getDynamicProps } from '/@/utils';
-
 import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import type { DynamicProps } from '/#/utils';
+import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
+import { isProdMode } from '/@/utils/env';
+import { error } from '/@/utils/log';
+import { getDynamicProps } from '/@/utils';
 
 export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;
 

src/components/Form/src/hooks/useFormEvents.ts

@@ -1,9 +1,7 @@
 import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema, FormActionType } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
-
 import { unref, toRaw } from 'vue';
-
 import { isArray, isFunction, isObject, isString } from '/@/utils/is';
 import { deepMerge } from '/@/utils';
 import { dateItemType, handleInputNumberValue } from '../helper';

src/components/Form/src/hooks/useFormValues.ts

@@ -1,10 +1,8 @@
 import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
 import { dateUtil } from '/@/utils/dateUtil';
-
 import { unref } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
-
 import { set } from 'lodash-es';
 
 interface UseFormValuesContext {

src/components/Form/src/types/form.ts

@@ -1,7 +1,6 @@
 import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
 import type { VNode } from 'vue';
 import type { ButtonProps as AntdButtonProps } from 'ant-design-vue/es/button/buttonTypes';
-
 import type { FormItem } from './formItem';
 import type { ColEx, ComponentType } from './index';
 import type { TableActionType } from '/@/components/Table/src/types/table';

src/components/Form/src/types/index.ts

@@ -90,9 +90,7 @@ export type ComponentType =
   | 'InputCountDown'
   | 'Select'
   | 'ApiSelect'
-  | 'SelectOptGroup'
   | 'TreeSelect'
-  | 'Transfer'
   | 'RadioButtonGroup'
   | 'RadioGroup'
   | 'Checkbox'