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

package/component/KgVarConfig/components/table/KgVarConfig.Modal.Table.VarGridMaster.tsx

@@ -0,0 +1,398 @@
+import { KgCoreUtil } from '@kengic/core.core';
+import { Table, Transfer } from 'ant-design-vue';
+import { TransferItem } from 'ant-design-vue/es/transfer';
+import { cloneDeep, without } from 'lodash-es';
+import { computed, defineComponent, ExtractPropTypes, inject, ref, toRaw } from 'vue';
+import { API } from '../../../../api';
+import { CreateVarGridMasterQuery, VarGridDetail, VarGridMasterDTO } from '../../../../api/WMS/models';
+import { pinia, useKg } from '../../../../config';
+import { KG, KG__VAR_BUTTON__TYPE, KG_CUSTOM_LEVEL, KG_FORM_CONTEXT } from '../../../../model';
+import { KgUtil } from '../../../../util';
+import { IKgProps, IKgSlots, KgVar, transformVarGridDetails, transformVarGridMasters, useKgVar } from '../../../KgVar';
+import { FORM_ID__TABLE__VAR_GRID_MASTER } from '../../KgVarConfig.model';
+import { _useDragToSortRow, _useTransferColumns } from './KgVarConfig.Modal.Table.VarGridMaster.service';
+
+export const getProps = () => ({}) as any;
+
+export type KgVarConfigModalTableVarGridMasterProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 表格:配置弹窗:表格视图
+export default defineComponent({
+    name: 'KgVarConfigModalTableVarGridMaster',
+    props: getProps(),
+    setup(props) {
+        const fid$Host = inject(KG.DI.FORM_ID, null) ?? inject(KG.DI.KG_VAR_CONFIG.HOST_FORM_ID, null)?.value;
+
+        const kg = useKg();
+
+        const kgVar = useKgVar(FORM_ID__TABLE__VAR_GRID_MASTER);
+        const kgVar$Host = useKgVar(fid$Host);
+
+        kgVar.kgSearch.onReady(async () => {
+            if (kgVar.kgSearch.formModel.value) {
+                kgVar.kgSearch.formModel.value.frm_id = kgVar$Host.fid;
+            }
+            return false;
+        });
+
+        kgVar.kgForm.onSelectBeforeRequest(async ({ context, response, varName }) => {
+            switch (context) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    switch (varName) {
+                        case 'usr_id': {
+                            response.value = [
+                                { value: 'ALL', label: kg.t('kg.allUser') },
+                                { value: kg.useUserStore?.(pinia)?.userInfo?.username, label: kg.useUserStore?.(pinia)?.userInfo?.realname },
+                            ];
+                            return true;
+                        }
+                    }
+                    break;
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    switch (varName) {
+                        case 'usr_id': {
+                            response.value = [
+                                { value: 'ALL', label: kg.t('kg.allUser') },
+                                { value: kg.useUserStore?.(pinia)?.userInfo?.username, label: kg.useUserStore?.(pinia)?.userInfo?.realname },
+                            ];
+                            return true;
+                        }
+                    }
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        kgVar.kgTable.onBeforeSetDatas(async ({ datas }) => {
+            // 翻译「所有用户」
+            datas.value.forEach((row) => {
+                if (row.usr_id === 'ALL') {
+                    row.usr_id_dsc = kg.t('kg.allUser');
+                }
+            });
+
+            transformVarGridMasters(datas.value);
+            return false;
+        });
+
+        kgVar.kgSubmit.onOpen(async () => {
+            // 根据变量列表, 构造所有字段列表,
+            allVarGridDetails.value = transformVarGridDetails(
+                cloneDeep(
+                    toRaw(
+                        (kgVar$Host.varVariables.value ?? [])
+                            .filter(
+                                (i) =>
+                                    // 排除不能作为表格字段的变量名
+                                    ![
+                                        ...(kgVar$Host.varGridMasters.value?.map((j) => j.grd_var_nam ?? '') ?? []),
+                                        ...(kgVar$Host.varProfileMasters.value?.map((j) => j.prf_var_nam ?? '') ?? []),
+                                        ...kgVar$Host.varButtons.value.map((j) => j.var_nam ?? ''),
+                                        ...kgVar$Host.varButtons.value.map((j) => j.export_excel_filename ?? ''),
+                                        KG__VAR_BUTTON__TYPE.SEARCH,
+                                        KG__VAR_BUTTON__TYPE.CREATE,
+                                        KG__VAR_BUTTON__TYPE.UPDATE,
+                                        KG__VAR_BUTTON__TYPE.COPY,
+                                        KG__VAR_BUTTON__TYPE.DELETE,
+                                        KG__VAR_BUTTON__TYPE.IMPORT,
+                                        KG__VAR_BUTTON__TYPE.IMPORT_TEMPLATE,
+                                        KG__VAR_BUTTON__TYPE.EXPORT,
+                                        KG__VAR_BUTTON__TYPE.OTHER,
+                                    ].includes(i.var_nam!),
+                            )
+                            .map((i, index) =>
+                                // 用变量名做为主键
+                                ({ id: i.var_nam, var_nam: i.var_nam, srtseq: index }),
+                            ),
+                    ),
+                ),
+            );
+
+            switch (true) {
+                case kgVar.isCreating.value: {
+                    targetKeys.value = [];
+                    break;
+                }
+
+                case kgVar.isUpdating.value:
+                case kgVar.isCopying.value: {
+                    if (kgVar.kgTable.selectedRow.value?.id) {
+                        try {
+                            kgVar.kgSubmit.setIsLoading({ value: true });
+
+                            const varGridMaster = await API.WMS.VarGridMasterController.QueryByID({ params: { id: kgVar.kgTable.selectedRow.value?.id } });
+
+                            allVarGridDetails.value = allVarGridDetails.value.map((allVarGridDetail) => {
+                                const varGridDetail = varGridMaster?.varGridDetails?.find((i) => i.var_nam === allVarGridDetail.var_nam);
+
+                                // 属性回填
+                                if (varGridDetail) {
+                                    return {
+                                        ...allVarGridDetail,
+                                        ...varGridDetail,
+                                        id: varGridDetail.var_nam,
+                                    };
+                                } else {
+                                    return allVarGridDetail;
+                                }
+                            });
+
+                            // 已勾选的 VarGridDetail 列表
+                            const varNames = varGridMaster?.varGridDetails?.map((i) => i.var_nam!) ?? [];
+                            targetKeys.value = allVarGridDetails.value.filter((j) => varNames.includes(j.var_nam!)).map((i) => i.id!);
+                        } catch (e) {
+                            throw e;
+                        } finally {
+                            kgVar.kgSubmit.setIsLoading({ value: false });
+                        }
+                    } else {
+                        targetKeys.value = [];
+                    }
+
+                    break;
+                }
+            }
+
+            switch (true) {
+                case kgVar.isCopying.value: {
+                    kgVar.kgSubmit.formModel.value.grd_var_nam = (kgVar.kgSubmit.formModel.value.grd_var_nam ?? '') + '_COPY';
+                    kgVar.kgSubmit.formModel.value.grd_var_nam_dsc = (kgVar.kgSubmit.formModel.value.grd_var_nam_dsc ?? kgVar.kgSubmit.formModel.value.grd_var_nam ?? '') + '_COPY';
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onAfterValidate(async ({}) => {
+            KgUtil.insertHashToDynamicQueryParams(kgVar.kgSubmit.formModel.value);
+            return false;
+        });
+
+        kgVar.kgSubmit.onBeforeRequest(async ({ data }) => {
+            KgUtil.insertHashToDynamicQueryParams(data.value);
+            return false;
+        });
+
+        kgVar.kgSubmit.onBeforeOk(async () => {
+            // 表单提交之前, 处理字段的值,
+            const _model = kgVar.kgSubmit.formModel.value as CreateVarGridMasterQuery;
+
+            _model.frm_id = kgVar$Host.fid;
+            _model.varGridDetails = cloneDeep(allVarGridDetails.value?.filter((i) => targetKeys.value.includes(i.id!)) ?? []).map((i) => {
+                delete i.id;
+                i.frm_id = kgVar$Host.fid;
+
+                return i;
+            });
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onOk(async () => {
+            // 重新加载变量配置数据
+            // TODO 只加载变更的这部分配置
+            kgVar$Host.requestAll({ isForceRequest: true });
+            return false;
+        });
+
+        kgVar.kgButton.onClick(({ button }) => {
+            const row = kgVar.kgTable.selectedRow.value as VarGridMasterDTO;
+
+            if (button?.typ === KG__VAR_BUTTON__TYPE.UPDATE && row?.cust_lvl === KG_CUSTOM_LEVEL.L0) {
+                return new Promise((resolve) => {
+                    // 提示系统视图不允许被修改
+                    KgUtil.confirm({
+                        content: kg.t('kg.KgVarConfig.canNotUpdateSystemVarGridMaster'),
+                        okButtonProps: { danger: false },
+                        onOk: () => {
+                            kgVar.kgButton.setCurrentButton({ type: KG__VAR_BUTTON__TYPE.COPY });
+                            resolve(true);
+                        },
+                        onCancel: () => {
+                            resolve(true);
+                        },
+                    });
+                });
+            }
+
+            return Promise.resolve(false);
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /** 所有字段. */
+        const allVarGridDetails = ref<Array<VarGridDetail>>([]);
+        /** 当前选的字段. */
+        const targetKeys = ref<Array<string>>([]);
+        /** 右侧表格的行. */
+        const transferRightRows = ref<Array<VarGridDetail>>([]);
+
+        const { leftColumns, rightColumns } = _useTransferColumns(fid$Host, allVarGridDetails);
+        _useDragToSortRow(fid$Host, allVarGridDetails, transferRightRows);
+
+        const kgProps = computed<IKgProps>(() => {
+            const varGridMaster = kgVar.kgTable.selectedRow.value as VarGridMasterDTO | null;
+
+            return {
+                KgSubmit: {
+                    kgClass: 'kg-var-config--modal--table--var-var-grid-master--kg-submit',
+                },
+                KgButton: {
+                    kgDisabled: (button) => {
+                        switch (button.var_nam) {
+                            // '设为默认视图'
+                            case 'set-default':
+                                if (varGridMaster?.def_flg === 1) {
+                                    return true;
+                                }
+                                break;
+                        }
+
+                        return undefined;
+                    },
+                },
+            };
+        });
+
+        const kgSlots = ref<IKgSlots>({
+            KgSubmit: {
+                'KgForm.Item.control': {
+                    varGridDetails: () => {
+                        return (
+                            <Transfer
+                                dataSource={allVarGridDetails.value}
+                                targetKeys={targetKeys.value}
+                                onUpdate:targetKeys={(value) => (targetKeys.value = value)}
+                                rowKey={(row) => row.id}
+                                showSearch={true}
+                                showSelectAll={false}
+                                searchPlaceholder={' '}
+                                filterOption={(value, item: VarGridDetail & TransferItem) => !!item.var_nam?.includes(value)}
+                            >
+                                {{
+                                    children: ({
+                                        direction,
+                                        filteredItems,
+                                        selectedKeys,
+                                        disabled: transferDisabled,
+                                        onItemSelectAll,
+                                        onItemSelect,
+                                    }: {
+                                        direction: 'left' | 'right';
+                                        filteredItems: Array<VarGridDetail & TransferItem>;
+                                        selectedKeys: string[];
+                                        disabled: boolean;
+                                        onItemSelectAll: (keys: string[], selected: boolean) => void;
+                                        onItemSelect: (key: string, selected: boolean) => void;
+                                    }) => {
+                                        const items = filteredItems.sort((x, y) => (x.srtseq ?? 0) - (y.srtseq ?? 0));
+                                        transferRightRows.value = items;
+
+                                        return (
+                                            <Table
+                                                pagination={false}
+                                                class="kg-flex-table"
+                                                size={'small'}
+                                                scroll={{
+                                                    x: direction === 'left' ? '370px' : `${1612 + 32}px`,
+                                                    y: 'auto',
+                                                }}
+                                                columns={direction === 'left' ? leftColumns() : rightColumns()}
+                                                rowKey="id"
+                                                dataSource={items}
+                                                customRow={(record: VarGridDetail) => {
+                                                    let props: Record<string, any> = {
+                                                        onClick: (event: any) => onVarGridDetailRowClick(event, record, direction, selectedKeys),
+                                                    };
+
+                                                    if (direction === 'right') {
+                                                        props['kg-host-frm_id'] = kgVar$Host.fid;
+                                                        props['kg-var-name'] = record.var_nam;
+                                                    }
+
+                                                    return props;
+                                                }}
+                                                rowSelection={getRowSelection({
+                                                    disabled: transferDisabled,
+                                                    selectedKeys,
+                                                    onItemSelectAll,
+                                                    onItemSelect,
+                                                })}
+                                            />
+                                        );
+                                    },
+                                }}
+                            </Transfer>
+                        );
+                    },
+                },
+            },
+        });
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        const getRowSelection = ({ disabled, selectedKeys, onItemSelectAll, onItemSelect }: Record<string, any>) => {
+            return {
+                getCheckboxProps: (item: Record<string, string | boolean>) => ({
+                    disabled: disabled || item.disabled,
+                }),
+                onSelectAll(selected: boolean, selectedRows: Record<string, string | boolean>[]) {
+                    const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key);
+                    onItemSelectAll(treeSelectedKeys, selected);
+                },
+                onSelect({ key }: Record<string, string>, selected: boolean) {
+                    onItemSelect(key, selected);
+                },
+                selectedRowKeys: selectedKeys,
+                columnWidth: 32,
+            };
+        };
+
+        /** 字段: 单击某行. */
+        function onVarGridDetailRowClick(event: MouseEvent, row: VarGridDetail, direction: 'left' | 'right', selectedKeys: string[]) {
+            if (KgCoreUtil.isNotClickable(event.target as Element, ['ant-input'])) {
+                return;
+            }
+
+            selectedKeys.length = 0;
+
+            switch (event.detail) {
+                // 单击
+                case 1:
+                    selectedKeys[0] = row.id!;
+                    break;
+
+                // 双击
+                case 2:
+                    switch (direction) {
+                        case 'left':
+                            targetKeys.value.push(row.id!);
+                            break;
+
+                        case 'right':
+                            targetKeys.value = without(targetKeys.value, row.id!);
+                            break;
+                    }
+                    break;
+            }
+        }
+        //endregion
+
+        return () => (
+            <KgVar
+                class="kg-var-config--modal--table--var-grid-master"
+                id={FORM_ID__TABLE__VAR_GRID_MASTER}
+                kgLevel={kgVar$Host ? kgVar$Host.store.getLevel(kgVar$Host.fid) + 1 : 1}
+                kgProps={kgProps.value}
+                kgSlots={kgSlots.value}
+            />
+        );
+    },
+});

package/component/KgVarConfig/components/table/KgVarConfig.Modal.Table.tsx

@@ -0,0 +1,44 @@
+import { Tabs } from 'ant-design-vue';
+import { Key } from 'ant-design-vue/es/_util/type';
+import { defineComponent, ref } from 'vue';
+import { useKg } from '../../../../config';
+import KgVarConfigModalTableVarGridConfig from './KgVarConfig.Modal.Table.VarGridConfig';
+import KgVarConfigModalTableVarGridMaster from './KgVarConfig.Modal.Table.VarGridMaster';
+
+export const getProps = () => ({}) as any;
+
+// 表格:配置弹窗:内容
+export default defineComponent({
+    name: 'KgVarConfigModalTable',
+    props: getProps(),
+    setup(props, { emit }) {
+        const kg = useKg();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const tab = ref<Key>('1');
+        //endregion
+
+        return () => (
+            <Tabs
+                activeKey={tab.value}
+                onUpdate:activeKey={(value) => (tab.value = value)}
+                size={'small'}
+            >
+                <Tabs.TabPane
+                    key="1"
+                    tab={kg.t('kg.KgVarConfig.VarGridMaster')}
+                >
+                    <KgVarConfigModalTableVarGridMaster />
+                </Tabs.TabPane>
+
+                <Tabs.TabPane
+                    key="2"
+                    tab={kg.t('kg.KgVarConfig.VarGridConfig')}
+                >
+                    <KgVarConfigModalTableVarGridConfig />
+                </Tabs.TabPane>
+            </Tabs>
+        );
+    },
+});

package/component/KgVarConfig/components/var/KgVarConfig.Modal.Var.VarConfigControl.tsx

@@ -0,0 +1,162 @@
+import { computed, defineComponent, inject } from 'vue';
+import { VarConfigControl } from '../../../../api/WMS/models';
+import { useKg } from '../../../../config';
+import { KG, KG__VAR_BUTTON__TYPE, KG_CUSTOM_LEVEL, KG_FORM_CONTEXT } from '../../../../model';
+import { localeList } from '../../../../i18n/i18n.setup';
+import { KgUtil } from '../../../../util';
+import { IKgProps, KgVar, transformVarConfigControls, useKgVar } from '../../../KgVar';
+import { FORM_ID__VAR__VAR_CONFIG_CONTROL, FORM_ID__VAR__VAR_VARIABLE } from '../../KgVarConfig.model';
+
+// 变量配置弹窗:变量配置:表单控件
+export default defineComponent({
+    name: 'KgVarConfigModalVarVarConfigControl',
+    setup() {
+        const fid$Host = inject(KG.DI.KG_VAR_CONFIG.HOST_FORM_ID, null);
+
+        const kg = useKg();
+
+        const kgVar = useKgVar(FORM_ID__VAR__VAR_CONFIG_CONTROL);
+        const kgVar$Host = useKgVar(fid$Host?.value);
+        const kgVar$VarVariable = useKgVar(FORM_ID__VAR__VAR_VARIABLE);
+
+        kgVar.kgTable.onBeforeParseRequestParameter(async ({ params }) => {
+            params.frm_id = [fid$Host?.value, 'ALL'];
+
+            kgVar.kgSearch.dynamicQueryOperatorModel.value.frm_id = KG.DYNAMIC_QUERY_OPERATOR.IN;
+
+            return false;
+        });
+
+        kgVar.kgTable.onBeforeSetDatas(async ({ datas }) => {
+            transformVarConfigControls(datas.value);
+
+            datas.value.forEach((row: VarConfigControl & Record<string, any>) => {
+                // 设置按钮文本
+                row.button_var_name_dsc = kgVar$Host.kgButton.getButtonDescription({ varName: row.button_var_name });
+            });
+
+            return false;
+        });
+
+        kgVar.kgForm.onSelectBeforeRequest(async ({ context, response, varName }) => {
+            switch (context) {
+                case KG_FORM_CONTEXT.SEARCH: {
+                    switch (varName) {
+                        case 'button_var_name': {
+                            response.value = kgVar$Host.varButtons.value.map((i) => ({
+                                value: i.var_nam,
+                                label: kgVar$Host.kgButton.getButtonDescription({ varName: i.var_nam }),
+                            }));
+                            return true;
+                        }
+                    }
+                    break;
+                }
+
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    switch (varName) {
+                        case 'frm_id': {
+                            response.value = [
+                                { value: 'ALL', label: `${kg.t('kg.KgVarConfig.allForm')} （ALL）` },
+                                { value: fid$Host?.value, label: `${kg.t('kg.KgVarConfig.currentForm')} （${fid$Host?.value}）` },
+                            ];
+                            return true;
+                        }
+
+                        case 'locale_id': {
+                            response.value = [{ value: 'ALL', label: `${kg.t('kg.KgVarConfig.allLanguage')} （ALL）` }, ...localeList.map((i) => ({ value: i.event, label: `${i.text}（${i.event}）` }))];
+                            return true;
+                        }
+
+                        case 'button_var_name': {
+                            response.value = kgVar$Host.varButtons.value.map((i) => ({
+                                value: i.var_nam,
+                                label: kgVar$Host.kgButton.getButtonDescription({ varName: i.var_nam }),
+                            }));
+                            return true;
+                        }
+                    }
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onOpen(async () => {
+            switch (true) {
+                case kgVar.isCreating.value: {
+                    kgVar.kgSubmit.formModel.value.var_nam = kgVar.parentKgVar$$.value?.kgTable?.selectedRow?.value?.var_nam;
+                    kgVar.kgSubmit.formModel.value.frm_id = fid$Host?.value;
+                    kgVar.kgSubmit.formModel.value.locale_id = kg.locale?.value;
+
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onAfterValidate(async ({}) => {
+            KgUtil.insertHashToDynamicQueryParams(kgVar.kgSubmit.formModel.value);
+            return false;
+        });
+
+        kgVar.kgSubmit.onBeforeRequest(async ({ data }) => {
+            KgUtil.insertHashToDynamicQueryParams(data.value);
+            return false;
+        });
+
+        kgVar.kgSubmit.onOk(async ({}) => {
+            // 重新加载变量配置数据
+            // TODO 只加载变更的这部分配置
+            kgVar$Host.requestAll({ isForceRequest: true });
+
+            kgVar$VarVariable.kgSearch.search({ isSearchFirstPage: false, isPreserveSelectedRows: true });
+
+            return false;
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const kgProps = computed<IKgProps>(() => ({
+            KgButton: {
+                kgDisabled: (button) => {
+                    switch (button.typ) {
+                        case KG__VAR_BUTTON__TYPE.UPDATE: {
+                            if (kgVar.kgTable.selectedRows.value?.some((i) => i.cust_lvl === KG_CUSTOM_LEVEL.L0)) {
+                                return true;
+                            }
+
+                            break;
+                        }
+
+                        case KG__VAR_BUTTON__TYPE.DELETE: {
+                            if (kgVar.kgTable.selectedRows.value?.some((i) => i.cust_lvl === KG_CUSTOM_LEVEL.L0)) {
+                                return true;
+                            }
+
+                            break;
+                        }
+                    }
+
+                    return undefined;
+                },
+            },
+        }));
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => (
+            <KgVar
+                id={FORM_ID__VAR__VAR_CONFIG_CONTROL}
+                kgLevel={kgVar$Host.level.value + 1}
+                kgProps={kgProps.value}
+            />
+        );
+    },
+});