@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgSubmit/KgSubmit.less

@@ -1,174 +0,0 @@
-.kg-submit {
-    transform: none !important;
-
-    // 表单
-    .ant-form {
-        width: 100%;
-        height: 100%;
-        padding: 12px 12px 6px;
-
-        & > div {
-            height: 100%;
-
-            // 提交字段分组
-            div.section {
-                display: flex;
-                height: 100%;
-                margin-left: -12px;
-
-                // 左侧分组菜单
-                > .ant-menu {
-                    flex-basis: fit-content;
-                    min-width: 200px;
-                    margin-top: -12px;
-                    margin-bottom: -6px;
-                    margin-right: 12px;
-                    padding-top: 12px;
-                    border-radius: 6px 0 0 6px;
-
-                    .ant-menu-item {
-                        margin-top: 0 !important;
-                        margin-bottom: 1px !important;
-                    }
-                }
-
-                // 右侧表单
-                > div {
-                    flex: 1;
-                    min-width: 0;
-                }
-            }
-        }
-    }
-
-    // 自动调整字段宽度
-    &.kg-submit--responsive {
-        .kg-submit--col-1 {
-            .kg-form-item:not(.kg-form-item--col-fixed) {
-                flex: 0 0 100% !important;
-                max-width: 100% !important;
-            }
-        }
-
-        .kg-submit--col-2 {
-            .kg-form-item:not(.kg-form-item--col-fixed) {
-                flex: 0 0 50% !important;
-                max-width: 50% !important;
-            }
-        }
-
-        .kg-submit--col-3 {
-            .kg-form-item:not(.kg-form-item--col-fixed) {
-                flex: 0 0 33.33333333% !important;
-                max-width: 33.33333333% !important;
-            }
-        }
-
-        .kg-submit--col-4 {
-            .kg-form-item:not(.kg-form-item--col-fixed) {
-                flex: 0 0 25% !important;
-                max-width: 25% !important;
-            }
-        }
-
-        .kg-submit--col-5 {
-            .kg-form-item:not(.kg-form-item--col-fixed) {
-                flex: 0 0 20% !important;
-                max-width: 20% !important;
-            }
-        }
-    }
-
-    // 删除时, 提示确认删除
-    &.kg-submit--delete-message {
-        .ant-modal-body {
-            overflow: hidden !important;
-        }
-    }
-
-    // 拥有分组
-    &.kg-submit--section {
-        > .ant-modal-content {
-            > .ant-modal-body {
-                overflow: hidden;
-
-                .ant-form {
-                    .section {
-                        > div {
-                            overflow-x: hidden;
-                            overflow-y: auto;
-                            margin-top: -12px;
-                            margin-right: -12px;
-                            margin-bottom: -6px;
-                            padding-top: 12px;
-                            padding-right: 12px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.kg-submit .ant-modal-body > .ant-spin-nested-loading {
-    height: 100%;
-}
-
-.kg-submit .ant-modal-body > .ant-spin-nested-loading > .ant-spin-container {
-    height: 100%;
-}
-
-.kg-submit .ant-modal-footer > div {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-.kg-submit .ant-modal-footer > div .ant-btn {
-    display: inline-flex !important;
-    align-items: center !important;
-}
-
-// 隐藏底部,
-.kg-submit.kg-submit--footer-invisible .ant-modal-footer {
-    display: none;
-}
-
-// 弹窗
-.kg-submit--modal {
-}
-
-// 在表格内
-.kg-submit--table {
-    display: none !important;
-}
-
-/* region 嵌入页面 */
-.kg-submit--inline {
-    position: initial !important;
-}
-
-/* region 隐藏标题 */
-.kg-submit--inline:not(.kg-submit--inline--show-title) .ant-modal .ant-modal-content .ant-modal-body {
-    height: calc(100% - 46px) !important;
-}
-
-.kg-submit--inline:not(.kg-submit--inline--show-title) .ant-modal-header {
-    display: none;
-}
-
-.kg-submit--inline:not(.kg-submit--inline--show-title) .ant-modal-close {
-    display: none;
-}
-
-/* endregion */
-
-.kg-submit--inline .kg-modal--header--buttons--fullscreen {
-    display: none !important;
-}
-
-.kg-submit--inline .ant-modal .ant-modal-content {
-    border-color: #d9d9d9 !important;
-}
-
-/* endregion */

package/component/KgSubmit/KgSubmit.model.ts

@@ -1,82 +0,0 @@
-import { KG__VAR_SUBMIT_CONFIG__LAYOUT } from '../../model';
-import { KG_MODAL_BORDER_WIDTH, KG_MODAL_SCROLL_WIDTH } from '../KgModal/KgModal.model';
-
-/**
- * 表单的左边距.
- */
-export const FORM_PADDING_LEFT = 6;
-
-/**
- * 表单的右边距.
- */
-export const FOMR_PADDING_RIGHT = 6;
-
-/**
- * 表单控件宽度.
- */
-export const FOMR_ITEM_WIDTH = 400;
-
-/**
- * 表单控件间隔距离.
- */
-export const FOMR_ITEM_MARGIN = 12;
-
-/**
- * 除去表单之外, 其他部分所有的宽度之和.
- */
-export const KG_SUBMIT_FRAME_WIDTH = FORM_PADDING_LEFT + FOMR_PADDING_RIGHT + KG_MODAL_SCROLL_WIDTH + KG_MODAL_BORDER_WIDTH + KG_MODAL_BORDER_WIDTH;
-
-/**
- * 获取弹窗宽度.
- *
- * @param param.span 列数.
- */
-export function getKgModalWidth(param: { span: number }) {
-    let _span = Math.round(Number(param.span));
-
-    if (Number.isNaN(_span) || _span < 1) {
-        _span = 1;
-    }
-
-    return (FOMR_ITEM_WIDTH + FOMR_ITEM_MARGIN) * _span + KG_SUBMIT_FRAME_WIDTH;
-}
-
-/**
- * 获取栅格布局行的宽度.
- *
- * @param param.span 列数.
- */
-export function getRowWidth(param: { span: number }) {
-    let _span = Math.round(Number(param.span));
-
-    if (Number.isNaN(_span) || _span < 1) {
-        _span = 1;
-    }
-
-    return (FOMR_ITEM_WIDTH + FOMR_ITEM_MARGIN) * _span;
-}
-
-/**
- * 默认最小宽度, 刚好放下一个表单控件.
- */
-export const SUBMIT_DEFAULT_MIN_WIDTH = getKgModalWidth({ span: 1 });
-
-/**
- * 默认宽度.
- */
-export const SUBMIT_DEFAULT_WIDTH = getKgModalWidth({ span: 2 });
-
-/**
- * 默认布局方式.
- */
-export const SUBMIT_DEFAULT_LAYOUT = KG__VAR_SUBMIT_CONFIG__LAYOUT.VERTICAL;
-
-/**
- * 单位为 SPAN 时, 文本的默认宽度.
- */
-export const SUBMIT_DEFAULT_LABEL_COL_FOR_SPAN = 4;
-
-/**
- * 单位为 PX 时, 文本的默认宽度.
- */
-export const SUBMIT_DEFAULT_LABEL_COL_FOR_PX = 100;

package/component/KgSubmit/KgSubmit.service.tsx

@@ -1,368 +0,0 @@
-import dayjs from 'dayjs';
-import { debounce, isNil } from 'lodash-es';
-import { computed, inject, onBeforeUnmount, Ref, ref, UnwrapRef, watch } from 'vue';
-import { VarSubmitDetail } from '../../api/WMS/models';
-import { useKg } from '../../config';
-import { KG, KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE } from '../../model';
-import { KgUtil } from '../../util';
-import { useKgVar } from '../KgVar';
-import { KgSubmitProps } from './KgSubmit';
-import { getRowWidth, SUBMIT_DEFAULT_WIDTH } from './KgSubmit.model';
-
-//region useFormModel() 表单数据对象
-//----------------------------------------------------------------------------------------------------
-export function useFormModel() {
-    const $dayjs = inject('$dayjs', dayjs);
-
-    const kgVar = useKgVar();
-
-    const formModel$ = ref<Record<string, any>>({});
-    const selectedData$$ = computed(() => {
-        if (kgVar.varGridConfig$Props$$.value?.componentVersion === '02') {
-            return kgVar.kgTable02.selectedData;
-        }
-
-        return kgVar.kgTable.selectedRow.value;
-    });
-
-    const currentVarSubmitDetailsWatchCallback = debounce(
-        (varSubmitDetailList: Array<VarSubmitDetail> | null) => {
-            formModel$.value = {};
-
-            // 「提交表单字段」尚未加载完成,
-            if (!varSubmitDetailList) {
-                return;
-            }
-
-            // 「提交表单字段」为空,
-            if (!varSubmitDetailList?.length) {
-                return kgVar.kgSubmit.store.setFormModel(kgVar.fid, formModel$.value);
-            }
-
-            const idKey = kgVar.kgTable.idKey.value;
-
-            for (const varSubmitDetail of varSubmitDetailList) {
-                const vname = varSubmitDetail.var_nam ?? '';
-
-                formModel$.value[vname] = undefined;
-
-                switch (true) {
-                    case kgVar.isCreating.value: {
-                        // 回显表单
-                        formModel$.value[vname] = KgUtil.transformVarSubmitDetailValue({
-                            $dayjs: $dayjs,
-                            buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                            formID: kgVar.fid,
-                            oldValue: varSubmitDetail.default_value ?? undefined,
-                            varName: vname,
-                        });
-
-                        break;
-                    }
-
-                    case kgVar.isUpdating.value: {
-                        formModel$.value[idKey] = selectedData$$.value?.[idKey];
-
-                        // 回显表单
-                        formModel$.value[vname] = !isNil(varSubmitDetail.default_value)
-                            ? KgUtil.transformVarSubmitDetailValue({
-                                  $dayjs: $dayjs,
-                                  buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                                  formID: kgVar.fid,
-                                  oldValue: varSubmitDetail.default_value,
-                                  varName: vname,
-                              })
-                            : KgUtil.transformVarSubmitDetailValue({
-                                  $dayjs: $dayjs,
-                                  buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                                  formID: kgVar.fid,
-                                  isParseDynamicParam: false,
-                                  oldValue: selectedData$$.value?.[vname] ?? undefined,
-                                  varName: vname,
-                              });
-
-                        break;
-                    }
-
-                    case kgVar.isCopying.value: {
-                        formModel$.value[idKey] = selectedData$$.value?.[idKey];
-
-                        // 回显表单
-                        formModel$.value[vname] = !isNil(varSubmitDetail.default_value)
-                            ? KgUtil.transformVarSubmitDetailValue({
-                                  $dayjs: $dayjs,
-                                  buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                                  formID: kgVar.fid,
-                                  oldValue: varSubmitDetail.default_value,
-                                  varName: vname,
-                              })
-                            : KgUtil.transformVarSubmitDetailValue({
-                                  $dayjs: $dayjs,
-                                  buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                                  oldValue: selectedData$$.value?.[vname] ?? undefined,
-                                  formID: kgVar.fid,
-                                  isParseDynamicParam: false,
-                                  varName: vname,
-                              });
-
-                        break;
-                    }
-
-                    case kgVar.isDeleting.value: {
-                        formModel$.value[idKey] = selectedData$$.value?.[idKey];
-
-                        // 回显表单
-                        formModel$.value[vname] = !isNil(varSubmitDetail.default_value)
-                            ? KgUtil.transformVarSubmitDetailValue({
-                                  $dayjs: $dayjs,
-                                  buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                                  formID: kgVar.fid,
-                                  oldValue: varSubmitDetail.default_value,
-                                  varName: vname,
-                              })
-                            : KgUtil.transformVarSubmitDetailValue({
-                                  $dayjs: $dayjs,
-                                  buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                                  formID: kgVar.fid,
-                                  isParseDynamicParam: false,
-                                  oldValue: selectedData$$.value?.[vname] ?? undefined,
-                                  varName: vname,
-                              });
-
-                        break;
-                    }
-
-                    default: {
-                        formModel$.value[vname] = KgUtil.transformVarSubmitDetailValue({
-                            $dayjs: $dayjs,
-                            buttonVarName: kgVar.kgButton.currentButton?.var_nam,
-                            formID: kgVar.fid,
-                            oldValue: varSubmitDetail.default_value ?? undefined,
-                            varName: vname,
-                        });
-                        break;
-                    }
-                }
-            }
-
-            kgVar.kgSubmit.store.setFormModel(kgVar.fid, formModel$.value);
-        },
-        200,
-        { leading: false, trailing: true },
-    );
-
-    // 表单字段发生变更, 需要清空表单对象, 然后重新设置表单对象
-    watch(kgVar.kgSubmit.currentVarSubmitDetails, currentVarSubmitDetailsWatchCallback, { immediate: true });
-
-    return { model: formModel$ };
-}
-//endregion
-
-//region _useResizeObserver() 监控表单尺寸
-//----------------------------------------------------------------------------------------------------
-export type IUseResizeObserver = {};
-export function _useResizeObserver(kgFormRef: Ref<UnwrapRef<HTMLDivElement | null>>): IUseResizeObserver {
-    let kgFormResizeObserver: ResizeObserver | null = null;
-
-    watch(
-        kgFormRef as any,
-        (div: HTMLDivElement) => {
-            if (div) {
-                kgFormResizeObserver = new ResizeObserver((entries) => {
-                    const width: number = entries[0].borderBoxSize[0]?.inlineSize ?? 0;
-
-                    switch (true) {
-                        case width < getRowWidth({ span: 2 }):
-                            div.classList.remove(...[2, 3, 4, 5].map((i) => `kg-submit--col-${i}`));
-                            div.classList.add('kg-submit--col-1');
-                            break;
-
-                        case width >= getRowWidth({ span: 2 }) && width < getRowWidth({ span: 3 }):
-                            div.classList.remove(...[1, 3, 4, 5].map((i) => `kg-submit--col-${i}`));
-                            div.classList.add('kg-submit--col-2');
-                            break;
-
-                        case width >= getRowWidth({ span: 3 }) && width < getRowWidth({ span: 4 }):
-                            div.classList.remove(...[1, 2, 4, 5].map((i) => `kg-submit--col-${i}`));
-                            div.classList.add('kg-submit--col-3');
-                            break;
-
-                        case width >= getRowWidth({ span: 4 }) && width < getRowWidth({ span: 5 }):
-                            div.classList.remove(...[1, 2, 3, 5].map((i) => `kg-submit--col-${i}`));
-                            div.classList.add('kg-submit--col-4');
-                            break;
-
-                        case width >= getRowWidth({ span: 5 }):
-                            div.classList.remove(...[1, 2, 3, 4].map((i) => `kg-submit--col-${i}`));
-                            div.classList.add('kg-submit--col-5');
-                            break;
-                    }
-                });
-
-                const rowDiv = div.querySelector('.kg-form-item')?.parentElement as HTMLDivElement;
-                if (rowDiv) {
-                    kgFormResizeObserver.observe(rowDiv);
-                }
-            }
-        },
-        { immediate: true },
-    );
-
-    onBeforeUnmount(() => {
-        kgFormResizeObserver?.disconnect();
-    });
-
-    return {};
-}
-//endregion
-
-//region _useTitle() 标题
-//----------------------------------------------------------------------------------------------------
-export function _useTitle() {
-    const kg = useKg();
-    const kgVar = useKgVar();
-
-    const vname = kgVar.kgButton.currentButton?.var_nam;
-    const text = kgVar.t(vname).value;
-
-    const title = computed<string>(() => {
-        switch (true) {
-            case kgVar.isCreating.value: {
-                if (vname === text) {
-                    return kg.t('kg.create', {}, '创建');
-                } else {
-                    return text;
-                }
-            }
-
-            case kgVar.isUpdating.value: {
-                if (vname === text) {
-                    return kg.t('kg.update', {}, '更新');
-                } else {
-                    return text;
-                }
-            }
-
-            case kgVar.isCopying.value: {
-                if (vname === text) {
-                    return kg.t('kg.copy', {}, '复制');
-                } else {
-                    return text;
-                }
-            }
-
-            case kgVar.isDeleting.value: {
-                if (vname === text) {
-                    return kg.t('kg.delete', {}, '删除');
-                } else {
-                    return text;
-                }
-            }
-
-            default: {
-                return text;
-            }
-        }
-    });
-
-    return {
-        /**
-         * 弹窗标题.
-         */
-        title: title,
-    };
-}
-//endregion
-
-//region _useClass() 样式
-//----------------------------------------------------------------------------------------------------
-export function _useClass(props: KgSubmitProps) {
-    const kgProps = inject(KG.DI.KG_VAR.KG_PROPS, null);
-
-    const kgVar = useKgVar();
-
-    /**
-     * 弹窗样式.
-     */
-    const class$$ = computed<Record<string, boolean>>(() => {
-        return {
-            'kg-submit': true,
-            'kg-submit--responsive': kgVar.kgSubmit.currentVarSubmitConfig.value?.responsive_flg !== 0,
-
-            // 删除时, 没有表单字段, 提示确认删除,
-            'kg-submit--delete-message': kgVar.isDeleting.value && (kgVar.kgSubmit.currentVarSubmitDetails.value?.length ?? 0) === 0,
-
-            // 拥有分组
-            'kg-submit--section': kgVar.kgSubmit.currentVarSubmitDetailSectionsForVisible.value.length > 0,
-
-            // 隐藏底部,
-            'kg-submit--footer-invisible': kgVar.kgSubmit.currentVarSubmitConfig$Props.value.footer?.isShow === false,
-
-            [`${(kgProps?.value ?? kgVar.props.value)?.KgSubmit?.kgClass}`]: !!(kgProps?.value ?? kgVar.props.value)?.KgSubmit?.kgClass,
-            [`${props.kgClass}`]: !(kgProps?.value ?? kgVar.props.value)?.KgSubmit?.kgClass && !!props.kgClass,
-        };
-    });
-
-    /**
-     * 弹窗容器样式.
-     */
-    const wrapClass$$ = computed<string>(() => {
-        let _class = '';
-
-        switch (kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value) {
-            case KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.MODAL:
-                _class += ' kg-submit--modal';
-                break;
-            case KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.TABLE:
-                _class += ' kg-submit--table';
-                break;
-            case KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.INLINE:
-                _class += ' kg-submit--inline';
-                break;
-        }
-
-        if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.displayType?.INLINE?.isShowTitle === true) {
-            _class += ' kg-submit--inline--show-title';
-        }
-
-        return _class;
-    });
-
-    return {
-        /**
-         * 弹窗样式.
-         */
-        class$$: class$$,
-
-        /**
-         * 弹窗容器样式.
-         */
-        wrapClass$$: wrapClass$$,
-    };
-}
-//endregion
-
-//region _useDefaultWidth() 默认宽度
-//----------------------------------------------------------------------------------------------------
-export function _useDefaultWidth() {
-    const kgVar = useKgVar();
-
-    const getDefaultWidth = computed<number>(() => {
-        // 配置尚未加载完成, 返回宽度为 0, 从而隐藏弹窗
-        if (!kgVar.kgSubmit.currentVarSubmitConfig.value) {
-            return 0;
-        }
-
-        const defaultWidth = kgVar.kgSubmit.currentVarSubmitConfig.value?.dft_width;
-
-        return defaultWidth || SUBMIT_DEFAULT_WIDTH;
-    });
-
-    return {
-        /**
-         * 默认宽度.
-         */
-        getDefaultWidth: getDefaultWidth,
-    };
-}
-//endregion