@kengic/vue 0.30.1-beta.93 → 0.30.1-beta.95

package/component/KgVarConfig/KgVarConfig.tsx

@@ -0,0 +1,139 @@
+import { ____WARN_____ } from '@kengic/core.core';
+import { useMagicKeys } from '@vueuse/core';
+import { filter, max } from 'lodash-es';
+import { defineComponent, provide, ref, watch } from 'vue';
+import { KG } from '../../model';
+import KgVarConfigSelectFormIdModal, { KgVarConfigSelectFormIdModalProps } from './components/KgVarConfig.SelectFormIdModal';
+import { KG_VAR_CONFIG_MODAL__CONTEXT, KgVarConfigModal, KgVarConfigModalProps } from './components/KgVarConfigModal';
+import { useKgVarConfig } from './KgVarConfig.hooks';
+import './KgVarConfig.less';
+
+// 变量配置弹窗
+export default defineComponent({
+    name: 'KgVarConfig',
+    setup() {
+        const kgVarConfig = useKgVarConfig();
+
+        kgVarConfig.$onAction(async ({ name, args }) => {
+            switch (name) {
+                case 'open':
+                    const { hostFormID: _hostFormID, kgContext } = args[0];
+                    fid$Host$.value = _hostFormID;
+
+                    kgVarConfigModalProps.value.kgContext = kgContext;
+                    kgVarConfigModalProps.value.visible = true;
+                    break;
+            }
+        });
+
+        const magicKeys = useMagicKeys();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /** 所有可配置的界面标识. */
+        const fidList$ = ref<Array<string>>([]);
+
+        /** 正在被配置的界面标识. */
+        const fid$Host$ = ref<string | null>(null);
+
+        provide(KG.DI.KG_VAR_CONFIG.HOST_FORM_ID, fid$Host$);
+
+        const kgVarConfigModalProps = ref<KgVarConfigModalProps>({ kgContext: KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT, visible: false });
+        const kgVarConfigSelectFormIdModalProps = ref<KgVarConfigSelectFormIdModalProps>({ visible: false });
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            magicKeys['Ctrl+Shift+F5'],
+            (v) => {
+                if (!v) {
+                    return;
+                }
+
+                toggleVisible();
+            },
+            { immediate: true },
+        );
+        watch(
+            magicKeys['Ctrl+Alt+S'],
+            (v) => {
+                if (!v) {
+                    return;
+                }
+
+                toggleVisible();
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 打开或者关闭弹窗.
+         */
+        function toggleVisible() {
+            // 打开
+            if (!kgVarConfigModalProps.value.visible) {
+                // 获取所有可配置的界面
+                let kgVarElements = filter(document.querySelectorAll('div.kg-var'), (i) => {
+                    const boundingClientRect = i.getBoundingClientRect();
+                    const style = window.getComputedStyle(i);
+
+                    return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' && boundingClientRect.width > 0 && boundingClientRect.height > 0;
+                }) as Array<HTMLDivElement>;
+
+                // 获取最大的界面层级, 界面层级表示界面是否可配置的优先级,
+                const maxLevel = max(kgVarElements.map((i) => Number(i.getAttribute('kg-level'))));
+
+                fidList$.value = filter(kgVarElements, (i) => Number(i.getAttribute('kg-level')) === maxLevel).map((i) => i.getAttribute('kg-form-id')!);
+
+                switch (fidList$.value.length) {
+                    case 0:
+                        ____WARN_____('当前界面没有启用变量.');
+                        return;
+
+                    case 1:
+                        fid$Host$.value = fidList$.value[0];
+                        kgVarConfigModalProps.value.kgContext = KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT;
+                        kgVarConfigModalProps.value.visible = true;
+                        break;
+
+                    default:
+                        kgVarConfigSelectFormIdModalProps.value.visible = true;
+                        break;
+                }
+            }
+            // 关闭
+            else {
+                kgVarConfigModalProps.value.visible = false;
+            }
+        }
+
+        function okKgVarConfigSelectFormIdModalOk(formID: string) {
+            fid$Host$.value = formID;
+            kgVarConfigModalProps.value.visible = !kgVarConfigModalProps.value.visible;
+        }
+        //endregion
+
+        return () => (
+            <>
+                <KgVarConfigSelectFormIdModal
+                    visible={kgVarConfigSelectFormIdModalProps.value.visible}
+                    formIDs={fidList$.value}
+                    onUpdate:visible={(value) => (kgVarConfigSelectFormIdModalProps.value.visible = value)}
+                    onKgOk={okKgVarConfigSelectFormIdModalOk}
+                />
+
+                {kgVarConfigModalProps.value.visible && (
+                    <KgVarConfigModal
+                        visible={kgVarConfigModalProps.value.visible}
+                        onUpdate:visible={(value) => (kgVarConfigModalProps.value.visible = value)}
+                        kgContext={kgVarConfigModalProps.value.kgContext}
+                    />
+                )}
+            </>
+        );
+    },
+});

package/component/KgVarConfig/components/KgVarConfig.SelectFormIdModal.tsx

@@ -0,0 +1,138 @@
+import { Table } from 'ant-design-vue';
+import { Key } from 'ant-design-vue/es/_util/type';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { TableRowSelection } from 'ant-design-vue/lib/table/interface';
+import { computed, defineComponent, ExtractPropTypes, PropType, ref, watch } from 'vue';
+import { useKg } from '../../../config';
+import KgModal from '../../KgModal/KgModal';
+import { useKgVar } from '../../KgVar';
+
+export const getProps = () => ({
+    visible: Boolean as PropType<boolean>,
+    'onUpdate:visible': Function as PropType<(value: boolean) => void>,
+    formIDs: Array as PropType<Array<string>>,
+    onKgOk: Function as PropType<(formID: string) => void>,
+});
+
+export type KgVarConfigSelectFormIdModalProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+type Row = { formID: string; formName: string | null | undefined };
+
+/**
+ * <p>界面标识选择弹窗.</p>
+ * <p>当前界面存在多个界面标识时, 需要用户手动选择要配置哪个弹窗.</p>
+ */
+export default defineComponent({
+    name: 'KgVarConfigSelectFormIdModal',
+    props: getProps(),
+    emits: ['update:visible', 'kgOk'],
+    setup(props, { emit }) {
+        const kg = useKg();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const selectedRowKeys = ref<Array<Key>>([]);
+        const rowSelection = ref<TableRowSelection<Row>>({
+            fixed: true,
+            columnWidth: 32,
+            hideSelectAll: true,
+            selectedRowKeys: selectedRowKeys as any,
+            onSelect: (value) => onRowClick(null, value),
+        });
+        const datas = computed<Array<Row>>(() => {
+            const datas =
+                props.formIDs?.map((formID) => {
+                    const _kgVar = useKgVar(formID);
+                    return { formID: formID, formName: _kgVar.t(_kgVar.varDda.value?.frm_nam).value };
+                }) ?? [];
+
+            return datas;
+        });
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            () => props.visible,
+            (visible) => {
+                if (visible) {
+                    // 默认勾选第一个
+                    if (props.formIDs?.length) {
+                        selectedRowKeys.value = [props.formIDs[0]];
+                    }
+                }
+            },
+        );
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /** 单击某行. */
+        function onRowClick(event: MouseEvent | null, row: Row) {
+            switch (event?.detail) {
+                case 2:
+                    onOk();
+                    break;
+
+                default:
+                    selectedRowKeys.value = [row.formID!];
+                    break;
+            }
+        }
+
+        /** 确定. */
+        function onOk(): void {
+            emit('update:visible', false);
+            emit('kgOk', selectedRowKeys.value[0]);
+        }
+
+        /** 取消. */
+        function onCancel(): void {
+            emit('update:visible', false);
+        }
+
+        function columns(): ColumnsType {
+            return [
+                {
+                    title: kg.t('kg.formId'),
+                    dataIndex: 'formID',
+                    width: 600,
+                },
+                {
+                    title: kg.t('kg.formName'),
+                    dataIndex: 'formName',
+                    width: 300,
+                },
+            ];
+        }
+        //endregion
+
+        return () => (
+            <KgModal
+                visible={props.visible}
+                title={kg.t('kg.KgVarConfigSelectFormIdModal.title')}
+                width={'1000px'}
+                confirmLoading={false}
+                wrapClassName="kg-var-config--select-form-id-modal"
+                okButtonProps={{ disabled: selectedRowKeys.value.length < 1 }}
+                kgFullHeight={false}
+                onCancel={onCancel}
+                onOk={onOk}
+            >
+                <Table
+                    pagination={false}
+                    class="kg-flex-table"
+                    size={'small'}
+                    scroll={{ x: '754px', y: 'auto' }}
+                    columns={columns()}
+                    rowKey="formID"
+                    dataSource={datas.value}
+                    rowSelection={rowSelection.value}
+                    customRow={(row: Row) => ({
+                        onClick: (event) => onRowClick(event, row),
+                    })}
+                ></Table>
+            </KgModal>
+        );
+    },
+});

package/component/KgVarConfig/components/KgVarConfigModal.tsx

@@ -0,0 +1,228 @@
+import { Icon } from '@iconify/vue';
+import { Button, Tabs } from 'ant-design-vue';
+import { defineComponent, ExtractPropTypes, inject, onBeforeMount, PropType, ref, watch } from 'vue';
+import { useKg } from '../../../config';
+import { KG } from '../../../model';
+import KgModal from '../../KgModal/KgModal';
+import { useKgVar } from '../../KgVar';
+import KgVarConfigModalButton from './button/KgVarConfig.Modal.Button';
+import KgVarConfigModalChild from './child/KgVarConfig.Modal.Child';
+import KgVarConfigModalSearch from './search/KgVarConfig.Modal.Search';
+import KgVarConfigModalSubmit from './submit/KgVarConfig.Modal.Submit';
+import KgVarConfigModalTable from './table/KgVarConfig.Modal.Table';
+import KgVarConfigModalVarVarVariable from './var/KgVarConfig.Modal.Var.VarVariable';
+
+export const KG_VAR_CONFIG_MODAL__CONTEXT = {
+    /**
+     * 默认, 通过快捷键 CTRL+SHIFT+F5 打开, 显示所有的配置.
+     */
+    DEFAULT: 'DEFAULT',
+
+    /**
+     * 从查询条件组件中, 点击配置按钮打开, 只显示查询条件配置.
+     */
+    SEARCH: 'SEARCH',
+
+    /**
+     * 从表格中, 点击视图配置菜单打开, 只显示表格配置.
+     */
+    TABLE: 'TABLE',
+};
+
+export type KgVarConfigModalTab = 'variable' | 'search' | 'table' | 'button' | 'submit';
+
+export const getProps = () => ({
+    /**
+     * @see KG_VAR_CONFIG_MODAL__CONTEXT
+     */
+    kgContext: { type: String as PropType<string>, default: KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT },
+
+    'onUpdate:visible': Function as PropType<(value: boolean) => void>,
+    visible: Boolean as PropType<boolean>,
+});
+
+export type KgVarConfigModalProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 变量配置弹窗
+export const KgVarConfigModal = defineComponent({
+    name: 'KgVarConfigModal',
+    props: getProps(),
+    emits: ['update:visible'],
+    setup(props, { emit }) {
+        const fid$Host = inject(KG.DI.KG_VAR_CONFIG.HOST_FORM_ID, null);
+
+        const kg = useKg();
+        const kgVar$Host = useKgVar(fid$Host?.value);
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 当前激活的标签页.
+         */
+        const currentTab = ref<KgVarConfigModalTab>(getDefaultTab());
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            () => props.visible,
+            (visible) => {
+                // 重置「当前激活的标签页」,
+                if (visible) {
+                    currentTab.value = 'variable';
+                }
+            },
+        );
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 根据参数计算默认激活的是哪个标签页.
+         */
+        function getDefaultTab(): KgVarConfigModalTab {
+            switch (props.kgContext) {
+                case KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT:
+                    return 'variable';
+                case KG_VAR_CONFIG_MODAL__CONTEXT.SEARCH:
+                    return 'search';
+                case KG_VAR_CONFIG_MODAL__CONTEXT.TABLE:
+                    return 'table';
+                default:
+                    return 'variable';
+            }
+        }
+
+        /** 取消. */
+        function onCancel(): void {
+            emit('update:visible', false);
+        }
+
+        /**
+         * 重新加载变量配置.
+         */
+        function requestAll(event: MouseEvent) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            kgVar$Host.requestAll({ isForceRequest: true });
+        }
+        //endregion
+
+        //region LIFECYCLE
+        //----------------------------------------------------------------------------------------------------
+        onBeforeMount(() => {
+            kgVar$Host.requestAll();
+        });
+        //endregion
+
+        return () => (
+            <KgModal
+                visible={props.visible}
+                title="NULL"
+                width={'80%'}
+                footer={null}
+                confirmLoading={false}
+                wrapClassName="kg-var-config--modal"
+                kgIsDefaultFullscreen={true}
+                onCancel={onCancel}
+            >
+                {{
+                    default: () => (
+                        <Tabs
+                            activeKey={currentTab.value}
+                            onUpdate:activeKey={(value) => (currentTab.value = value as any)}
+                            size={'small'}
+                        >
+                            {{
+                                default: () => (
+                                    <>
+                                        {(!props.kgContext || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT) && (
+                                            <Tabs.TabPane
+                                                key="variable"
+                                                tab={kg.t('kg.KgVarConfig.variable')}
+                                            >
+                                                <KgVarConfigModalVarVarVariable />
+                                            </Tabs.TabPane>
+                                        )}
+
+                                        {(!props.kgContext || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.SEARCH) && (
+                                            <Tabs.TabPane
+                                                key="search"
+                                                class={'ant-tabs-tabpane--search'}
+                                                tab={kg.t('kg.KgVarConfig.tabSearch')}
+                                            >
+                                                <KgVarConfigModalSearch />
+                                            </Tabs.TabPane>
+                                        )}
+
+                                        {(!props.kgContext || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.TABLE) && (
+                                            <Tabs.TabPane
+                                                key="table"
+                                                class={'ant-tabs-tabpane--table'}
+                                                tab={kg.t('kg.KgVarConfig.tabTable')}
+                                            >
+                                                <KgVarConfigModalTable />
+                                            </Tabs.TabPane>
+                                        )}
+
+                                        {(!props.kgContext || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT) && (
+                                            <Tabs.TabPane
+                                                key="button"
+                                                class={'ant-tabs-tabpane--button'}
+                                                tab={kg.t('kg.KgVarConfig.tabButton')}
+                                            >
+                                                <KgVarConfigModalButton />
+                                            </Tabs.TabPane>
+                                        )}
+
+                                        {(!props.kgContext || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT) && (
+                                            <Tabs.TabPane
+                                                key="submit"
+                                                class={'ant-tabs-tabpane--submit'}
+                                                tab={kg.t('kg.KgVarConfig.tabSubmit')}
+                                            >
+                                                <KgVarConfigModalSubmit />
+                                            </Tabs.TabPane>
+                                        )}
+
+                                        {(!props.kgContext || props.kgContext === KG_VAR_CONFIG_MODAL__CONTEXT.DEFAULT) && (
+                                            <Tabs.TabPane
+                                                key="child"
+                                                class={'ant-tabs-tabpane--child'}
+                                                tab={kg.t('kg.KgVarConfig.tabChild')}
+                                            >
+                                                <KgVarConfigModalChild />
+                                            </Tabs.TabPane>
+                                        )}
+                                    </>
+                                ),
+                                rightExtra: () => (
+                                    <>
+                                        <span>{fid$Host?.value}</span>
+                                    </>
+                                ),
+                            }}
+                        </Tabs>
+                    ),
+                    kgModalHeaderButtonsExtra: () => (
+                        <>
+                            <Button
+                                type={'primary'}
+                                ghost={true}
+                                style={{ alignItems: 'center', boxShadow: 'none', display: 'flex', height: 'calc(100% - 2px)', justifyContent: 'center', margin: '1px 1px 1px 0px' }}
+                                onClick={requestAll}
+                            >
+                                <Icon
+                                    icon="ant-design:reload-outlined"
+                                    style={{ marginRight: '4px' }}
+                                />
+                                刷新配置
+                            </Button>
+                        </>
+                    ),
+                }}
+            </KgModal>
+        );
+    },
+});