@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgForm.Item/KgForm.Item.tsx

@@ -0,0 +1,642 @@
+import { Icon } from '@iconify/vue';
+import { KgCoreUtil } from '@kengic/core.core';
+import { Col, Form, Tooltip } from 'ant-design-vue';
+import { get, isFunction } from 'lodash-es';
+import { computed, CSSProperties, defineComponent, inject, provide, ref } from 'vue';
+import { VarConfigControl, VarConfigLookup, VarConfigTip, VarProfileDetail, VarProfileMasterDTO } from '../../api/WMS/models';
+import { IKgVarSubmitDetailProperties, KG, KG__SPAN, KG__VAR_BUTTON__TYPE, KG__VAR_CONFIG_TIP__PLACEMENT, KG__VAR_SUBMIT_CONFIG__LAYOUT, KG_FORM_CONTEXT } from '../../model';
+import { KgAny } from '../../type';
+import { emit, IKgForm$EventListenerParameter$onChange } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import KgFormItemAddonDynamicQueryOperator from './KgForm.Item.Addon.DynamicQueryOperator';
+import KgFormItemAddonLookup from './KgForm.Item.Addon.Lookup';
+import KgFormItemCheckbox from './KgForm.Item.Checkbox';
+import KgFormItemCheckboxGroup from './KgForm.Item.CheckboxGroup';
+import KgFormItemDate from './KgForm.Item.Date';
+import KgFormItemDateRange from './KgForm.Item.DateRange';
+import KgFormItemImage from './KgForm.Item.Image';
+import KgFormItemInput from './KgForm.Item.Input';
+import KgFormItemInputNumber from './KgForm.Item.InputNumber';
+import KgFormItemInputPassword from './KgForm.Item.InputPassword';
+import KgFormItemLink from './KgForm.Item.Link';
+import { getProps, IKgFormItemSlotControlParameter, IKgFormItemSlotControlRightParameter, KgFormItemProps } from './KgForm.Item.model';
+import KgFormItemRadioGroup from './KgForm.Item.RadioGroup';
+import KgFormItemSelect from './KgForm.Item.Select';
+import { useFormRules, useKgFormItem } from './KgForm.Item.service';
+import KgFormItemSwitch from './KgForm.Item.Switch';
+import KgFormItemTextArea from './KgForm.Item.TextArea';
+import './KgForm.Item.less';
+
+// 表单控件
+export default defineComponent({
+    emits: ['kgSubmit', 'kgSelectChange'],
+    name: 'KgFormItem',
+    props: getProps(),
+    setup(props, { slots }) {
+        const formModel = inject(KG.DI.KG_FORM.FORM_MODEL)!;
+        const formRef = inject(KG.DI.KG_FORM.FORM_REF, ref(null));
+
+        provide(KG.DI.KG_FORM_ITEM.VAR_NAME, props.kgVarName);
+        provide(KG.DI.KG_FORM_ITEM.CONTEXT, props.kgContext);
+
+        const kgVar = useKgVar();
+
+        kgVar.kgForm.onLookupOk(async ({ var_nam, model, isMultiple, values }) => {
+            switch (var_nam) {
+                case props.kgVarName: {
+                    if (model.value) {
+                        let value: KgAny;
+
+                        if (isMultiple) {
+                            value = values;
+                        } else {
+                            value = values?.[0] ?? null;
+                        }
+
+                        model.value[props.kgVarName!] = value;
+
+                        emit<IKgForm$EventListenerParameter$onChange>({
+                            id: kgVar.fid,
+                            event: 'onChange',
+                            parameter: {
+                                context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                                isCopying: kgVar.isCopying.value,
+                                isCreating: kgVar.isCreating.value,
+                                isDeleting: kgVar.isDeleting.value,
+                                isUpdating: kgVar.isUpdating.value,
+                                value: value,
+                                varName: props.kgVarName ?? '',
+                                variableName: props.kgVarName ?? '',
+                            },
+                        });
+                    }
+
+                    formRef.value?.validate([props.kgVarName!]);
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const varConfigTip = computed<VarConfigTip | null>(() => kgVar.store.getVarConfigTip(kgVar.fid, props.kgVarName));
+        const varConfigLookup = computed<VarConfigLookup | null>(() => kgVar.store.getVarConfigLookup(kgVar.fid, props.kgVarName));
+        const varConfigControl = computed<VarConfigControl | null>(() => {
+            switch (props.kgContext) {
+                case KG_FORM_CONTEXT.SEARCH:
+                    return kgVar.getVarConfigControl({ varName: props.kgVarName, buttonType: KG__VAR_BUTTON__TYPE.SEARCH });
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE:
+                    return kgVar.getVarConfigControl({ varName: props.kgVarName });
+            }
+        });
+
+        const varProfileMaster = computed<VarProfileMasterDTO | null>(() => {
+            switch (props.kgContext) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    return kgVar.kgSearch.currentVarProfileMaster.value;
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    return null;
+                }
+            }
+        });
+
+        const varProfileDetail = computed<VarProfileDetail | null>(() => {
+            switch (props.kgContext) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    return kgVar.store.getVarProfileDetail(kgVar.fid, props.kgVarName);
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    return null;
+                }
+            }
+        });
+
+        const varSubmitDetail$$ = computed(() => {
+            switch (props.kgContext) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    return (
+                        kgVar.kgSubmit.getVarSubmitDetails({
+                            buttonVarName: kgVar.varButtonSearch.value?.var_nam,
+                            searchProfileVarName: varProfileMaster.value?.prf_var_nam,
+                            varName: props.kgVarName,
+                        })?.[0] ?? null
+                    );
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    return (
+                        kgVar.kgSubmit.getVarSubmitDetails({
+                            buttonVarName: kgVar.kgButton.currentButton?.var_nam,
+                            varName: props.kgVarName,
+                        })?.[0] ?? null
+                    );
+                }
+            }
+        });
+        const varSubmitDetailProps$$ = computed(() => KgCoreUtil.tryParseJSON<IKgVarSubmitDetailProperties>(varSubmitDetail$$.value?.props));
+
+        const { formRules, isFormRulesChange } = useFormRules(props);
+        const { controlType } = useKgFormItem(props);
+
+        /**
+         * 是否禁用高级查询符号下拉列表.
+         */
+        const isDynamicQueryOperatorDisable$$ = computed<boolean>(() => {
+            // 正在加载变量配置
+            if (kgVar.isRetrieving.value) {
+                return true;
+            }
+
+            // 传入的组件参数优先级更高
+            if (props.kgDisabled !== undefined) {
+                return props.kgDisabled;
+            }
+
+            return varSubmitDetail$$.value?.enable_flag === 0;
+        });
+
+        /**
+         * 是否禁用表单控件.
+         */
+        const isControlDisable$$ = computed<boolean>(() => {
+            // 正在加载变量配置
+            if (kgVar.isRetrieving.value) {
+                return true;
+            }
+
+            // 传入的组件参数优先级更高
+            if (props.kgDisabled !== undefined) {
+                return props.kgDisabled;
+            }
+
+            if (kgVar.kgSearch.dynamicQueryOperatorModel.value?.[props.kgVarName!] === KG.DYNAMIC_QUERY_OPERATOR__EMPTY || kgVar.kgSearch.dynamicQueryOperatorModel.value?.[props.kgVarName!] === KG.DYNAMIC_QUERY_OPERATOR__NOT_EMPTY) {
+                return true;
+            }
+
+            return varSubmitDetail$$.value?.enable_flag === 0;
+        });
+
+        /**
+         * 提示文字.
+         */
+        const placeholder$$ = computed<string>(() => {
+            let placeholder = ' ';
+
+            // 传入的组件参数优先级更高
+            if (props.kgPlaceholder) {
+                placeholder = props.kgPlaceholder;
+            } else {
+                placeholder = kgVar.t(varSubmitDetail$$.value?.placeholder ?? ' ').value;
+            }
+
+            return placeholder;
+        });
+
+        /**
+         * <p>计算后的控件宽度. 如果传入的或者配置的宽度是合法且有效的, 则返回该宽度, 否则返回默认宽度.</p>
+         */
+        const getSpan = computed<number>(() => {
+            let span = KG__SPAN._12;
+
+            // 传入的组件参数优先级更高
+            if (props.kgSpan !== undefined) {
+                span = props.kgSpan;
+            } else {
+                switch (props.kgContext) {
+                    case KG_FORM_CONTEXT.SEARCH:
+                        span = varSubmitDetail$$.value?.width ?? KG__SPAN._6;
+                        break;
+
+                    case KG_FORM_CONTEXT.SUBMIT:
+                        span = varSubmitDetail$$.value?.width ?? KG__SPAN._12;
+                        break;
+
+                    case KG_FORM_CONTEXT.TABLE:
+                        // 表格内宽度始终为 100%
+                        break;
+                }
+            }
+
+            span = Number(span);
+
+            return span;
+        });
+
+        /** 真实的控件宽度. 如果传入的宽度或者配置的宽度是合法且有效的, 则返回该宽度. */
+        const getActualSpan = computed<number | null>(() => {
+            let span: number | null | undefined = null;
+
+            // 传入的组件参数优先级更高
+            if (props.kgSpan !== undefined) {
+                span = props.kgSpan;
+            } else {
+                switch (props.kgContext) {
+                    case KG_FORM_CONTEXT.SEARCH:
+                        span = varSubmitDetail$$.value?.width ?? null;
+                        break;
+
+                    case KG_FORM_CONTEXT.SUBMIT:
+                        span = varSubmitDetail$$.value?.width ?? null;
+                        break;
+
+                    case KG_FORM_CONTEXT.TABLE:
+                        span = null;
+                        break;
+                }
+            }
+
+            span = Number(span);
+
+            return span;
+        });
+
+        /** 样式. */
+        const getStyle = computed<CSSProperties>(() => {
+            // 父元素必须是 <Row>
+            const parentEl = get(colRef.value, '$el.parentElement') as HTMLDivElement | undefined;
+            if (parentEl && !parentEl.classList?.contains('ant-row')) {
+                throw new Error('<KgFormItem> 的父元素必须是 <Row> 或者 <a-row>.');
+            }
+
+            let style: CSSProperties = {};
+
+            // 根据父元素 <Row> 的 margin 计算我的 padding
+            const gutter = Math.abs(Number.parseInt(get(colRef.value, '$el.parentElement.style.marginLeft') ?? '0px'));
+            if (!Number.isNaN(gutter)) {
+                style = {
+                    paddingLeft: `${gutter}px`,
+                    paddingRight: `${gutter}px`,
+                };
+            }
+
+            return style;
+        });
+
+        /** 样式. */
+        const class$$ = computed<string>(() => {
+            let _class = 'kg-form-item';
+
+            if (varConfigLookup.value) {
+                _class += ' kg-form-item-lookup';
+            }
+
+            // 如果传入了宽度, 或者配置了实际宽度, 则固定使用该宽度,
+            // 否则, 当编辑弹窗可以拖动宽度时, 表单控件的宽度也会自动调整,
+            if (getActualSpan.value) {
+                _class += ` kg-form-item--col-fixed`;
+            }
+
+            if (varSubmitDetail$$.value?.visible_flag === 0) {
+                _class += ' kg-form-item--invisible';
+            }
+
+            return _class;
+        });
+
+        /**
+         * 组件参数.
+         */
+        const props$$ = computed<KgFormItemProps>(() => {
+            const _props: KgFormItemProps = {
+                ...props,
+                value: formModel.value[props.kgVarName!],
+                'onUpdate:value': (value: any) => (formModel.value[props.kgVarName!] = value),
+                kgPlaceholder: placeholder$$.value,
+                kgDisabled: isControlDisable$$.value,
+                id: getHtmlID.value,
+            } as KgFormItemProps;
+
+            // 根据控件类型, 设置额外的参数,
+            switch (controlType.value) {
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.INPUT_NUMBER:
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.SELECT:
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.SELECT_MULTIPLE:
+                    _props.kgMode = 'multiple';
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.SWITCH:
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATE:
+                    _props.kgShowTime = false;
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATE_RANGE:
+                    _props.kgShowTime = false;
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_TIME:
+                    _props.kgPicker = 'time';
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_TIME_RANGE:
+                    _props.kgPicker = 'time';
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATETIME:
+                    _props.kgShowTime = props.kgShowTime === undefined ? true : props.kgShowTime;
+                    break;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATETIME_RANGE:
+                    _props.kgShowTime = props.kgShowTime === undefined ? true : props.kgShowTime;
+                    break;
+
+                default:
+                    break;
+            }
+
+            return _props;
+        });
+
+        /**
+         * 是否显示右侧提示文本图标.
+         */
+        const isRightTipAvailable = computed<boolean>(() => {
+            if (!varConfigTip.value?.tip) {
+                return false;
+            }
+
+            // 表单垂直布局, 并且提示文本放在标签底部, 则不显示
+            switch (props.kgContext) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    if (kgVar.kgSubmit.searchVarSubmitConfig$Layout.value === KG__VAR_SUBMIT_CONFIG__LAYOUT.VERTICAL && varConfigTip.value?.placement === KG__VAR_CONFIG_TIP__PLACEMENT.BOTTOM) {
+                        return false;
+                    }
+
+                    break;
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    if (kgVar.kgSubmit.currentVarSubmitConfig$Layout.value !== KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL && varConfigTip.value?.placement === KG__VAR_CONFIG_TIP__PLACEMENT.BOTTOM) {
+                        return false;
+                    }
+
+                    break;
+                }
+            }
+
+            return true;
+        });
+
+        /**
+         * 是否显示底部提示文本图标.
+         */
+        const isBottomTipAvailable = computed<boolean>(() => {
+            if (!varConfigTip.value?.tip) {
+                return false;
+            }
+
+            // 表单垂直布局, 并且提示文本放在标签底部, 则要显示,
+            switch (props.kgContext) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    if (kgVar.kgSubmit.searchVarSubmitConfig$Layout.value === KG__VAR_SUBMIT_CONFIG__LAYOUT.VERTICAL && varConfigTip.value?.placement === KG__VAR_CONFIG_TIP__PLACEMENT.BOTTOM) {
+                        return true;
+                    }
+
+                    break;
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    if (kgVar.kgSubmit.currentVarSubmitConfig$Layout.value !== KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL && varConfigTip.value?.placement === KG__VAR_CONFIG_TIP__PLACEMENT.BOTTOM) {
+                        return true;
+                    }
+
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        const getHtmlID = computed(() => encodeURIComponent(`${props.kgContext}~${kgVar.fid}~${props.kgVarName}`));
+        const colRef = ref<any | null>(null);
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function renderFormItem() {
+            // 表单验证规则发生变更, 需要重新渲染表单控件, 从而重置页面上已经显示的验证消息; 否则即使验证规则已经变了, 但是页面上显示的验证消息却不会变,
+            if (isFormRulesChange.value) {
+                return null;
+            }
+
+            return (
+                <Form.Item
+                    name={props.kgVarName}
+                    rules={formRules.value}
+                    validateFirst={true}
+                    class={{
+                        'kg-form-item--no-label-container': varSubmitDetailProps$$.value.isShowLabelContainer === false,
+                    }}
+                >
+                    {{
+                        default: () => (
+                            <>
+                                <KgFormItemAddonDynamicQueryOperator
+                                    kgDisabled={isDynamicQueryOperatorDisable$$.value}
+                                    kgControlType={controlType.value}
+                                />
+                                {renderControl()}
+                                {renderAddonLookup()}
+                                {renderControlRightSlot()}
+                            </>
+                        ),
+                        label: () => renderLabel(),
+                    }}
+                </Form.Item>
+            );
+        }
+
+        /** 渲染控件. */
+        function renderControl() {
+            if (isFunction(slots.control)) {
+                return slots.control({
+                    formID: kgVar.fid,
+                    frm_id: kgVar.fid,
+                    model: formModel,
+                    props: props$$,
+                    varConfigControl: varConfigControl,
+                    varName: props.kgVarName,
+                    varProfileDetail: varProfileDetail,
+                    varSubmitDetail: varSubmitDetail$$,
+                } as IKgFormItemSlotControlParameter);
+            }
+
+            switch (controlType.value) {
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.INPUT_NUMBER:
+                    return <KgFormItemInputNumber {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.INPUT_PASSWORD:
+                    return <KgFormItemInputPassword {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.TEXT_AREA:
+                    return <KgFormItemTextArea {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.SELECT:
+                    return <KgFormItemSelect {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.SELECT_MULTIPLE:
+                    return <KgFormItemSelect {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.SWITCH:
+                    return <KgFormItemSwitch {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.CHECKBOX:
+                    return <KgFormItemCheckbox {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.CHECKBOX_GROUP:
+                    return <KgFormItemCheckboxGroup {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.RADIO_GROUP:
+                    return <KgFormItemRadioGroup {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATE:
+                    return <KgFormItemDate {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATE_RANGE:
+                    return <KgFormItemDateRange {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_TIME:
+                    return <KgFormItemDate {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_TIME_RANGE:
+                    return <KgFormItemDateRange {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATETIME:
+                    return <KgFormItemDate {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.DATE_DATETIME_RANGE:
+                    return <KgFormItemDateRange {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.IMAGE:
+                    return <KgFormItemImage {...props$$.value} />;
+
+                case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.LINK:
+                    return <KgFormItemLink {...props$$.value} />;
+
+                default:
+                    return <KgFormItemInput {...props$$.value} />;
+            }
+        }
+
+        /** 渲染表单控件文本. */
+        function renderLabel() {
+            if (!props.kgShowLabel) {
+                return null;
+            }
+
+            if (varSubmitDetailProps$$.value.isShowLabelContainer === false || varSubmitDetailProps$$.value.isShowLabel === false) {
+                return null;
+            }
+
+            return (
+                <div>
+                    <div>
+                        <label
+                            kg-form-id={kgVar.fid}
+                            kg-var-name={props.kgVarName}
+                            kg-lkp_id={varConfigLookup.value?.lkp_id}
+                            kg-ret_fld={varConfigLookup.value?.ret_fld}
+                            class="title"
+                            title={kgVar.t(props.kgVarName).value}
+                            for={getHtmlID.value}
+                        >
+                            {kgVar.t(props.kgVarName).value}
+                        </label>
+
+                        {isRightTipAvailable.value && (
+                            <Tooltip
+                                placement={'top'}
+                                overlayClassName={'kg-form-item--tip--tooltip'}
+                            >
+                                {{
+                                    default: () => <Icon icon="ant-design:info-circle-outlined" />,
+                                    title: () => <div innerHTML={varConfigTip.value?.tip ?? ''} />,
+                                }}
+                            </Tooltip>
+                        )}
+                    </div>
+
+                    {isBottomTipAvailable.value && (
+                        <div
+                            class="tip"
+                            innerHTML={varConfigTip.value?.tip ?? ''}
+                        />
+                    )}
+                </div>
+            );
+        }
+
+        /** 渲染查找按钮. */
+        function renderAddonLookup() {
+            if (!varConfigLookup.value || !varConfigLookup.value?.lkp_id) {
+                return null;
+            }
+
+            return (
+                <Form.ItemRest>
+                    <KgFormItemAddonLookup
+                        kgDisabled={isControlDisable$$.value}
+                        kgLookupID={varConfigLookup.value.lkp_id}
+                    />
+                </Form.ItemRest>
+            );
+        }
+
+        /** 渲染插槽:表单控件右侧. */
+        function renderControlRightSlot() {
+            if (!slots.controlRight || !isFunction(slots.controlRight)) {
+                return null;
+            }
+
+            return slots.controlRight({
+                formID: kgVar.fid,
+                frm_id: kgVar.fid,
+                model: formModel,
+                props: props$$,
+                varConfigControl: varConfigControl,
+                varName: props.kgVarName,
+                varProfileDetail: varProfileDetail,
+                varSubmitDetail: varSubmitDetail$$,
+            } as IKgFormItemSlotControlRightParameter);
+        }
+        //endregion
+
+        return () => {
+            if (kgVar.isRetrieving.value) {
+                return null;
+            }
+
+            return (
+                <Col
+                    kg-form-id={kgVar.fid}
+                    kg-var-name={props.kgVarName}
+                    kg-lkp_id={varConfigLookup.value?.lkp_id}
+                    kg-ret_fld={varConfigLookup.value?.ret_fld}
+                    ref={colRef}
+                    class={class$$.value}
+                    span={getSpan.value}
+                    style={getStyle.value}
+                >
+                    {renderFormItem()}
+                </Col>
+            );
+        };
+    },
+});

package/component/KgImage/KgImage.less

@@ -0,0 +1,12 @@
+.kg-image {
+    overflow: hidden;
+    border-radius: 3px;
+    cursor: pointer;
+    border: 1px solid #f0f0f0;
+
+    .ant-image-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 3px;
+    }
+}