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

package/component/KgVarConfig/components/button/KgVarConfig.Modal.Button.VarButtonConfig.tsx

@@ -0,0 +1,64 @@
+import { defineComponent, ExtractPropTypes, inject } from 'vue';
+import { VarButtonConfig } from '../../../../api/WMS/models';
+import { KG } from '../../../../model';
+import { KgUtil } from '../../../../util';
+import { KgVar, transformVarButtonConfig, useKgVar } from '../../../KgVar';
+import { FORM_ID__BUTTON__VAR_BUTTON_CONFIG } from '../../KgVarConfig.model';
+
+export const getProps = () => ({}) as any;
+
+export type KgVarConfigModalButtonVarButtonConfigProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 变量配置弹窗:按钮:按钮配置
+export default defineComponent({
+    name: 'KgVarConfigModalButtonVarButtonConfig',
+    props: getProps(),
+    setup() {
+        const fid$Host = inject(KG.DI.KG_VAR_CONFIG.HOST_FORM_ID, null);
+
+        const kgVar = useKgVar(FORM_ID__BUTTON__VAR_BUTTON_CONFIG);
+        const kgVar$Host = useKgVar(fid$Host?.value);
+
+        kgVar.kgTable.onBeforeParseRequestParameter(async ({ params }) => {
+            params.frm_id = fid$Host?.value;
+
+            return false;
+        });
+
+        kgVar.kgTable.onBeforeSetDatas(async ({ datas, total }) => {
+            // 如果没有「按钮配置」, 则显示一个默认的「按钮配置」,
+            if (datas.value.length === 0) {
+                datas.value = [new VarButtonConfig({ frm_id: kgVar$Host.fid })];
+            }
+
+            transformVarButtonConfig(datas.value[0]);
+            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 });
+
+            return false;
+        });
+
+        return () => (
+            <KgVar
+                class="kg-var-config--modal--button--var-button-config"
+                id={FORM_ID__BUTTON__VAR_BUTTON_CONFIG}
+                kgLevel={kgVar$Host.store.getLevel(kgVar$Host.fid) + 2}
+            />
+        );
+    },
+});

package/component/KgVarConfig/components/button/KgVarConfig.Modal.Button.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 KgVarConfigModalButtonVarButton from './KgVarConfig.Modal.Button.VarButton';
+import KgVarConfigModalButtonVarButtonConfig from './KgVarConfig.Modal.Button.VarButtonConfig';
+
+export const getProps = () => ({}) as any;
+
+// 变量配置弹窗:按钮
+export default defineComponent({
+    name: 'KgVarConfigModalButton',
+    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.KgVarConfigModalButton.VarButton')}
+                >
+                    <KgVarConfigModalButtonVarButton />
+                </Tabs.TabPane>
+
+                <Tabs.TabPane
+                    key="2"
+                    tab={kg.t('kg.KgVarConfigModalButton.VarButtonConfig')}
+                >
+                    <KgVarConfigModalButtonVarButtonConfig />
+                </Tabs.TabPane>
+            </Tabs>
+        );
+    },
+});

package/component/KgVarConfig/components/child/KgVarConfig.Modal.Child.tsx

@@ -0,0 +1,265 @@
+import { Icon } from '@iconify/vue';
+import { KgCoreUtil } from '@kengic/core.core';
+import { Button, Form, Select, Table } from 'ant-design-vue';
+import { fromPairs, uniqBy, without } from 'lodash-es';
+import { defineComponent, ExtractPropTypes, inject, ref } from 'vue';
+import { VarVariable } from '../../../../api/WMS/models';
+import { useKg } from '../../../../config';
+import { KG, KG_FORM_CONTEXT } from '../../../../model';
+import { IKgFormItemSlotControlParameter } from '../../../KgForm.Item/KgForm.Item.model';
+import { IKgSlots, KgVar, useKgVar } from '../../../KgVar';
+import { FORM_ID__CHILD } from '../../KgVarConfig.model';
+
+export const getProps = () => ({}) as any;
+
+export type KgVarConfigModalChildProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 变量配置弹窗:父子
+export default defineComponent({
+    name: 'KgVarConfigModalChild',
+    props: getProps(),
+    setup(props) {
+        const fid$Host = inject(KG.DI.KG_VAR_CONFIG.HOST_FORM_ID, null);
+
+        const kg = useKg();
+
+        const kgVar = useKgVar(FORM_ID__CHILD);
+        const kgVar$Host = useKgVar(fid$Host?.value);
+
+        kgVar.kgTable.onBeforeParseRequestParameter(async ({ params }) => {
+            params.frm_id = fid$Host?.value;
+
+            return false;
+        });
+
+        kgVar.kgForm.onChange(async ({ context, value, varName }) => {
+            switch (context) {
+                case KG_FORM_CONTEXT.SUBMIT:
+                case KG_FORM_CONTEXT.TABLE: {
+                    switch (varName) {
+                        case 'child_form_id': {
+                            getChildVarVariables(value);
+                            break;
+                        }
+                    }
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onOpen(async () => {
+            kgVar.kgSubmit.formModel.value.frm_id = fid$Host?.value;
+
+            if (!kgVar.kgSubmit.formModel.value.foreign_keys) {
+                kgVar.kgSubmit.formModel.value.foreign_keys = '{}';
+            }
+
+            foreignKeys.value = Object.entries(KgCoreUtil.tryParseJSON(kgVar.kgSubmit.formModel.value?.foreign_keys)).map(([key, value], index) => ({
+                id: String(Date.now() + index),
+                parentVarName: key,
+                childVarName: value as string,
+            }));
+
+            switch (true) {
+                case kgVar.isUpdating.value: {
+                    getChildVarVariables(kgVar.kgSubmit.formModel.value.child_form_id);
+                    break;
+                }
+            }
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onBeforeOk(async () => {
+            kgVar.kgSubmit.formRules.value = {
+                foreign_keys: [
+                    {
+                        validator: () => {
+                            if (foreignKeys.value.find((i) => !i.parentVarName)) {
+                                return Promise.reject(kg.t('kg.KgVarConfigModalChild.parentVarNameRequired'));
+                            }
+
+                            if (foreignKeys.value.find((i) => !i.childVarName)) {
+                                return Promise.reject(kg.t('kg.KgVarConfigModalChild.childVarNameRequired'));
+                            }
+
+                            if (new Set(foreignKeys.value.map((i) => i.parentVarName)).size < foreignKeys.value.length) {
+                                return Promise.reject(kg.t('kg.KgVarConfigModalChild.parentVarNameDuplicate'));
+                            }
+
+                            if (new Set(foreignKeys.value.map((i) => i.childVarName)).size < foreignKeys.value.length) {
+                                return Promise.reject(kg.t('kg.KgVarConfigModalChild.childVarNameDuplicate'));
+                            }
+
+                            return Promise.resolve();
+                        },
+                    },
+                ],
+            };
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onBeforeRequest(async ({ data }) => {
+            data.value.foreign_keys = JSON.stringify(fromPairs(foreignKeys.value.map((i) => [i.parentVarName, i.childVarName])));
+
+            return false;
+        });
+
+        kgVar.kgSubmit.onOk(async ({}) => {
+            // 重新加载变量配置数据
+            // TODO 只加载变更的这部分配置
+            kgVar$Host.requestAll({ isForceRequest: true });
+
+            return false;
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 关联属性表格数据.
+         */
+        const foreignKeys = ref<Array<{ id: string; parentVarName: string; childVarName: string }>>([]);
+
+        /**
+         * 子页面的变量列表.
+         */
+        const childVarVariables = ref<Array<VarVariable>>([]);
+
+        const kgSlots = ref<IKgSlots>({
+            KgSubmit: {
+                'KgForm.Item.control': {
+                    foreign_keys: ({}: IKgFormItemSlotControlParameter) => {
+                        return (
+                            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+                                <div style={{ marginBottom: '4px' }}>
+                                    <Button
+                                        type={'primary'}
+                                        class="kg-button-item"
+                                        onClick={createForeignKey}
+                                    >
+                                        <Icon icon="ant-design:plus-outlined" />
+                                        {kg.t('kg.create')}
+                                    </Button>
+                                </div>
+                                <Table
+                                    pagination={false}
+                                    class="kg-flex-table kg-var-config--modal--child--foreigh-keys-table"
+                                    size={'small'}
+                                    scroll={{ x: '600px', y: 'auto' }}
+                                    columns={[
+                                        {
+                                            dataIndex: 'parentVarName',
+                                            width: 'auto',
+                                            title: kg.t('kg.KgVarConfigModalChild.parentVarName'),
+                                            customRender: ({ record }) => (
+                                                <Form.ItemRest>
+                                                    <Select
+                                                        value={record.parentVarName}
+                                                        onUpdate:value={(value) => (record.parentVarName = value as any)}
+                                                    >
+                                                        {{
+                                                            default: () => uniqBy(kgVar$Host.varVariables.value, 'var_nam').map((i) => <Select.Option value={i.var_nam}>{i.var_nam}</Select.Option>),
+                                                            suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                                                        }}
+                                                    </Select>
+                                                </Form.ItemRest>
+                                            ),
+                                        },
+                                        {
+                                            dataIndex: 'childVarName',
+                                            width: 'auto',
+                                            title: kg.t('kg.KgVarConfigModalChild.childVarName'),
+                                            customRender: ({ record }) => (
+                                                <Form.ItemRest>
+                                                    <Select
+                                                        value={record.childVarName}
+                                                        onUpdate:value={(value) => (record.childVarName = value as any)}
+                                                    >
+                                                        {{
+                                                            default: () => childVarVariables.value.map((i) => <Select.Option value={i.var_nam}>{i.var_nam}</Select.Option>),
+                                                            suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                                                        }}
+                                                    </Select>
+                                                </Form.ItemRest>
+                                            ),
+                                        },
+                                        {
+                                            dataIndex: 'action',
+                                            width: 34,
+                                            customRender: ({ record }) => (
+                                                <Button
+                                                    danger={true}
+                                                    ghost={true}
+                                                    style={{
+                                                        alignItems: 'center',
+                                                        display: 'flex',
+                                                        justifyContent: 'center',
+                                                        padding: '0px !important',
+                                                        width: '32px',
+                                                    }}
+                                                    onClick={() => deleteForeignKey(record.id)}
+                                                >
+                                                    <Icon icon="ant-design:close-outlined" />
+                                                </Button>
+                                            ),
+                                        },
+                                    ]}
+                                    rowKey="id"
+                                    dataSource={foreignKeys.value}
+                                />
+                            </div>
+                        );
+                    },
+                },
+            },
+        });
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 添加一个关联属性.
+         */
+        function createForeignKey() {
+            foreignKeys.value = [...foreignKeys.value, { id: '', childVarName: '', parentVarName: '' }];
+        }
+
+        /**
+         * 删除一个关联属性.
+         *
+         * @param id 要删除的关联属性.
+         */
+        function deleteForeignKey(id: string) {
+            foreignKeys.value = without(foreignKeys.value, foreignKeys.value.find((i) => i.id === id)!);
+        }
+
+        /**
+         * 获取子页面的变量列表.
+         *
+         * @param childFid 子页面的界面标识.
+         */
+        async function getChildVarVariables(childFid: string) {
+            if (!childFid) {
+                return;
+            }
+
+            const childKgVar = useKgVar(childFid);
+            await childKgVar.requestAll();
+
+            childVarVariables.value = uniqBy(childKgVar.varVariables.value, 'var_nam');
+        }
+        //endregion
+
+        return () => (
+            <KgVar
+                class="kg-var-config--modal--child"
+                id={FORM_ID__CHILD}
+                kgLevel={kgVar$Host.store.getLevel(kgVar$Host.fid) + 2}
+                kgSlots={kgSlots.value}
+            />
+        );
+    },
+});

package/component/KgVarConfig/components/search/KgVarConfig.Modal.Search.VarProfileConfig.tsx

@@ -0,0 +1,64 @@
+import { defineComponent, ExtractPropTypes, inject } from 'vue';
+import { VarProfileConfig } from '../../../../api/WMS/models';
+import { KG } from '../../../../model';
+import { KgUtil } from '../../../../util';
+import { KgVar, transformVarProfileConfig, useKgVar } from '../../../KgVar';
+import { FORM_ID__SEARCH__VAR_PROFILE_CONFIG } from '../../KgVarConfig.model';
+
+export const getProps = () => ({}) as any;
+
+export type KgVarConfigModalSearchVarProfileConfigProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 查询条件:查询条件配置
+export default defineComponent({
+    name: 'KgVarConfigModalSearchVarProfileConfig',
+    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 kgVar = useKgVar(FORM_ID__SEARCH__VAR_PROFILE_CONFIG);
+        const kgVar$Host = useKgVar(fid$Host);
+
+        kgVar.kgTable.onBeforeParseRequestParameter(async ({ params }) => {
+            params.frm_id = fid$Host;
+
+            return false;
+        });
+
+        kgVar.kgTable.onBeforeSetDatas(async ({ datas, total }) => {
+            // 如果没有「查询条件配置」, 则显示一个默认的「查询条件配置」,
+            if (datas.value.length === 0) {
+                datas.value = [new VarProfileConfig({ frm_id: kgVar$Host.fid })];
+            }
+
+            transformVarProfileConfig(datas.value[1]);
+            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 });
+
+            return false;
+        });
+
+        return () => (
+            <KgVar
+                class="kg-var-config--modal--search--var-profile-config"
+                id={FORM_ID__SEARCH__VAR_PROFILE_CONFIG}
+                kgLevel={kgVar$Host ? kgVar$Host.store.getLevel(kgVar$Host.fid) + 2 : 2}
+            />
+        );
+    },
+});