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

package/component/KgSubmit/KgSubmit.less

@@ -0,0 +1,174 @@
+.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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,368 @@
+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