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

package/page/KgPageDda/components/KgPageDda.Create.tsx

@@ -0,0 +1,330 @@
+import { Icon } from '@iconify/vue';
+import { Button, notification, Spin, Steps } from 'ant-design-vue';
+import { cloneDeep, compact, uniq } from 'lodash-es';
+import { computed, defineComponent, ExtractPropTypes, PropType, ref, toRaw } from 'vue';
+import { API } from '../../../api';
+import { VarVariable } from '../../../api/WMS/models';
+import { pinia, useKg } from '../../../config';
+import { KG__VAR_BUTTON__TYPE, KG_CUSTOM_LEVEL } from '../../../model';
+import { KgUtil } from '../../../util';
+import KgPageDdaCreateBasic from './KgPageDda.Create.Basic';
+import './KgPageDda.Create.less';
+import KgPageDdaCreateButton from './KgPageDda.Create.Button';
+import KgPageDdaCreateMenu from './KgPageDda.Create.Menu';
+import KgPageDdaCreateSearch from './KgPageDda.Create.Search';
+import { useKgPageDdaCreateStore } from './KgPageDda.Create.store';
+import KgPageDdaCreateSubmit from './KgPageDda.Create.Submit';
+import KgPageDdaCreateTable from './KgPageDda.Create.Table';
+
+export const getProps = () => ({
+    /**
+     * 是否显示.
+     * @default false
+     */
+    kgVisible: Boolean as PropType<boolean>,
+    onKgOk: Function as PropType<() => void>,
+
+    'onUpdate:kgVisible': Function as PropType<(value: boolean) => void>,
+});
+
+export type KgPageDdaCreateProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 创建
+export default defineComponent({
+    emits: ['update:kgVisible', 'kgOk'],
+    name: 'KgPageDdaCreate',
+    props: getProps(),
+    setup(props, { emit }) {
+        const kg = useKg();
+        const store = useKgPageDdaCreateStore(pinia);
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /** 当前是第几步. */
+        const currentStep = ref<number>(1);
+        /** 样式. */
+        const getClass = computed<string>(() => {
+            let _class = 'kg-page-dda-create';
+
+            _class += ` kg-page-dda-create--step-${currentStep.value}`;
+
+            return _class;
+        });
+        /** '上一步'按钮是否禁用. */
+        const isButtonPreviousStepDisabled = computed<boolean>(() => {
+            if (store.getIsLoading) {
+                return true;
+            }
+
+            return false;
+        });
+        /** '下一步'按钮是否禁用. */
+        const isButtonNextStepDisabled = computed<boolean>(() => {
+            if (store.getIsLoading) {
+                return true;
+            }
+
+            return false;
+        });
+        /** '完成'按钮是否禁用. */
+        const isButtonDoneDisabled = computed<boolean>(() => {
+            if (store.getIsLoading) {
+                return true;
+            }
+
+            return false;
+        });
+        /** '取消'按钮是否禁用. */
+        const isButtonCancelDisabled = computed<boolean>(() => {
+            return false;
+        });
+        const kgPageDdaCreateBasicRef = ref<any>(null);
+        const kgPageDdaCreateSearchRef = ref<any>(null);
+        const kgPageDdaCreateTableRef = ref<any>(null);
+        const kgPageDdaCreateSubmitRef = ref<any>(null);
+        const kgPageDdaCreateButtonRef = ref<any>(null);
+        const kgPageDdaCreateMenuRef = ref<any>(null);
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 点击'上一步'按钮.
+         */
+        function onButtonPreviousStepClick() {
+            if (currentStep.value === 1) {
+                return;
+            }
+
+            currentStep.value -= 1;
+        }
+
+        /**
+         * 点击'下一步'按钮.
+         */
+        async function onButtonNextStepClick() {
+            switch (currentStep.value) {
+                case 1:
+                    try {
+                        await kgPageDdaCreateBasicRef.value?.onSubmit();
+                        currentStep.value += 1;
+                    } catch (e) {}
+                    break;
+
+                case 2:
+                    try {
+                        await kgPageDdaCreateSearchRef.value?.onSubmit();
+                        currentStep.value += 1;
+                    } catch (e) {}
+                    break;
+
+                case 3:
+                    try {
+                        await kgPageDdaCreateTableRef.value?.onSubmit();
+                        currentStep.value += 1;
+                    } catch (e) {}
+                    break;
+
+                case 4:
+                    try {
+                        await kgPageDdaCreateSubmitRef.value?.onSubmit();
+                        currentStep.value += 1;
+                    } catch (e) {}
+                    break;
+
+                case 5:
+                    try {
+                        await kgPageDdaCreateButtonRef.value?.onSubmit();
+                        currentStep.value += 1;
+                    } catch (e) {}
+                    break;
+
+                case 6:
+                    break;
+            }
+        }
+
+        /**
+         * 点击'完成'按钮.
+         */
+        async function onButtonDoneClick() {
+            try {
+                await kgPageDdaCreateMenuRef.value?.onSubmit();
+
+                const query = cloneDeep(toRaw(store.getCreateVarDdaQuery));
+
+                // 变量列表
+                const varNames = uniq(
+                    compact([
+                        ...query.varButtons!.map((i) => i.var_nam),
+                        ...query.varGridDetails!.map((i) => i.var_nam),
+                        ...query.varProfileDetails!.map((i) => i.var_nam),
+                        ...query.varSubmitDetails!.map((i) => i.var_nam),
+                        query.varGridMaster!.grd_var_nam,
+                        query.varProfileMaster!.prf_var_nam,
+                    ]),
+                );
+
+                // 生成变量列表
+                query.varVariables = varNames.map(
+                    (i) =>
+                        new VarVariable({
+                            frm_id: query.frmId,
+                            var_nam: i,
+                            grp_nam: 'WMS',
+                        }),
+                );
+
+                // 删除未使用的变量翻译
+                query.varConfigDescriptions = toRaw(query.varConfigDescriptions!.filter((i) => varNames.includes(i.var_nam!)));
+
+                query.varButtons!.forEach((button, index) => {
+                    // 删除该按钮的临时主键
+                    delete button.id;
+
+                    // 添加该按钮的「提交表单配置」
+                    query.varSubmitConfigs!.push({
+                        button_var_name: button.var_nam,
+                        cust_lvl: KG_CUSTOM_LEVEL.L0,
+                        frm_id: query.frmId,
+                    });
+
+                    // 「删除按钮」无需「提交表单字段」,
+                    if (button.typ !== KG__VAR_BUTTON__TYPE.DELETE) {
+                        // 添加该按钮的「提交表单字段」
+                        query.varSubmitDetails!.push(
+                            ...query
+                                .varSubmitDetails!.filter((i) => !i.button_var_name)!
+                                .map((i) => ({
+                                    ...i,
+                                    button_var_name: button.var_nam,
+                                })),
+                        );
+                    }
+                });
+
+                // 删除未关联按钮的「提交表单字段」
+                query.varSubmitDetails = query.varSubmitDetails!.filter((i) => !!i.button_var_name);
+
+                await API.WMS.VarDdaController.Create({ data: query });
+
+                notification.success({ message: kg.t('创建成功.') });
+
+                emit('update:kgVisible', false);
+                emit('kgOk');
+
+                store.initCreateVarDdaQuery();
+            } catch (e) {}
+        }
+
+        /**
+         * 点击'取消'按钮.
+         */
+        function onButtonCancelClick() {
+            KgUtil.confirm({
+                content: kg.t('kg.KgPageDdaCreate.confirm-cancel'),
+                onOk: () => {
+                    emit('update:kgVisible', false);
+                },
+            });
+        }
+        //endregion
+
+        return () => {
+            return (
+                <div class={getClass.value}>
+                    <div class="header">
+                        <Steps
+                            current={currentStep.value - 1}
+                            size={'small'}
+                            labelPlacement={'vertical'}
+                        >
+                            <Steps.Step title={'基础信息'}></Steps.Step>
+                            <Steps.Step title={'查询条件'}></Steps.Step>
+                            <Steps.Step title={'表格视图'}></Steps.Step>
+                            <Steps.Step title={'表单字段'}></Steps.Step>
+                            <Steps.Step title={'按钮'}></Steps.Step>
+                            <Steps.Step title={'菜单'}></Steps.Step>
+                        </Steps>
+                    </div>
+
+                    <div class="body">
+                        <Spin
+                            spinning={store.getIsLoading}
+                            delay={250}
+                        >
+                            <KgPageDdaCreateBasic
+                                ref={kgPageDdaCreateBasicRef}
+                                class="kg-page-dda-create--basic"
+                            />
+                            <KgPageDdaCreateSearch
+                                ref={kgPageDdaCreateSearchRef}
+                                class="kg-page-dda-create--search"
+                            />
+                            <KgPageDdaCreateTable
+                                ref={kgPageDdaCreateTableRef}
+                                class="kg-page-dda-create--table"
+                            />
+                            <KgPageDdaCreateSubmit
+                                ref={kgPageDdaCreateSubmitRef}
+                                class="kg-page-dda-create--submit"
+                            />
+                            <KgPageDdaCreateButton ref={kgPageDdaCreateButtonRef} />
+                            <KgPageDdaCreateMenu
+                                ref={kgPageDdaCreateMenuRef}
+                                class="kg-page-dda-create--menu"
+                            />
+                        </Spin>
+                    </div>
+
+                    <div class="footer">
+                        {currentStep.value !== 1 && (
+                            <Button
+                                type={'primary'}
+                                ghost={!isButtonPreviousStepDisabled.value}
+                                disabled={isButtonPreviousStepDisabled.value}
+                                onClick={onButtonPreviousStepClick}
+                            >
+                                <Icon icon="ant-design:caret-left-outlined" />
+                                {kg.t('kg.KgPageDdaCreate.previous-step')}
+                            </Button>
+                        )}
+
+                        {currentStep.value !== 6 && (
+                            <Button
+                                type={'primary'}
+                                ghost={!isButtonNextStepDisabled.value}
+                                disabled={isButtonNextStepDisabled.value}
+                                onClick={onButtonNextStepClick}
+                            >
+                                {kg.t('kg.KgPageDdaCreate.next-step')}
+                                <Icon icon="ant-design:caret-right-outlined" />
+                            </Button>
+                        )}
+
+                        {currentStep.value === 6 && (
+                            <Button
+                                type={'primary'}
+                                ghost={!isButtonDoneDisabled.value}
+                                disabled={isButtonDoneDisabled.value}
+                                onClick={onButtonDoneClick}
+                            >
+                                <Icon icon="ant-design:check-outlined" />
+                                {kg.t('kg.KgPageDdaCreate.done')}
+                            </Button>
+                        )}
+
+                        <Button
+                            danger={true}
+                            disabled={isButtonCancelDisabled.value}
+                            onClick={onButtonCancelClick}
+                        >
+                            <Icon icon="ant-design:stop-outlined" />
+                            {kg.t('kg.cancel')}
+                        </Button>
+                    </div>
+                </div>
+            );
+        };
+    },
+});

package/page/KgPageDda/index.ts

@@ -0,0 +1,4 @@
+import { default as KgPageDda } from './KgPageDda';
+
+export default KgPageDda as typeof KgPageDda;
+export { type IKgPageDdaProps } from './KgPageDda';

package/page/KgPageSqlClient/KgPageSqlClient.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue';
+import { KgSqlClient } from './components/KgSqlClient';
+
+/**
+ * <p>系统管理/系统管理/数据操作.</p>
+ * <p>通过页面执行 SQL 语句, 记录执行人等相关信息.</p>
+ */
+export default defineComponent({
+    name: 'KgPageSqlClient',
+    props: {},
+    setup() {
+        return () => <KgSqlClient />;
+    },
+});

package/page/KgPageSqlClient/components/KgSqlClient.Editor.tsx

@@ -0,0 +1,84 @@
+import { Textarea } from 'ant-design-vue';
+import { defineComponent, ref } from 'vue';
+import './KgSqlClient.css';
+
+export interface KgSqlClientEditorRef {
+    /**
+     * 获取待执行的文本.
+     */
+    getSqlTextForExecute(): string;
+}
+
+/**
+ * <p>数据库客户端:编辑器.</p>
+ */
+export const KgSqlClientEditor = defineComponent({
+    name: 'KgSqlClientEditor',
+    emits: ['execute'],
+    setup(props, { emit, expose }) {
+        const text$ = ref('');
+        const textareaRef$ = ref<typeof Textarea | null>(null);
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function onUpdateValue(value: string) {
+            text$.value = value;
+        }
+
+        /**
+         * 键盘按键弹起事件.
+         *
+         * @param event 事件对象.
+         */
+        function onKeyup(event: KeyboardEvent) {
+            // CTRL + ENTER 快捷键,
+            if (event.ctrlKey && event.key === 'Enter') {
+                emit('execute');
+            }
+        }
+
+        /**
+         * <p>获取待执行的文本.</p>
+         * <ul>
+         *     <li>如果有选中的文本, 则取选中的文本,</li>
+         *     <li>否则取所有的文本,</li>
+         * </ul>
+         */
+        function getSqlTextForExecute(): string {
+            const textarea = textareaRef$.value?.resizableTextArea?.textArea;
+            if (textarea) {
+                /**
+                 * 获取选中的文本
+                 */
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const selectedText = textarea.value.substring(start, end);
+                if (selectedText && selectedText.trim().length > 0) {
+                    return selectedText;
+                }
+
+                /**
+                 * 如果没有选中文本, 则获取所有的文本,
+                 */
+                return text$.value ?? '';
+            }
+
+            return '';
+        }
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        expose({ getSqlTextForExecute });
+
+        return () => (
+            <div class="kg-sql-client--editor">
+                <Textarea
+                    ref={textareaRef$}
+                    value={text$.value}
+                    onUpdate:value={onUpdateValue}
+                    onKeyup={onKeyup}
+                />
+            </div>
+        );
+    },
+});

package/page/KgPageSqlClient/components/KgSqlClient.ResultTab.tsx

@@ -0,0 +1,145 @@
+import { computed, defineComponent, ExtractPropTypes, PropType, ref, watch } from 'vue';
+import './KgSqlClient.css';
+import { API } from '../../../api';
+import { ExecuteQuery, ExecuteResultDTO, VarGridDetail } from '../../../api/WMS/models';
+import { KgVar, useKgVar } from '../../../component/KgVar';
+import { useKg } from '../../../config';
+import { KG } from '../../../model';
+import { KgUtil } from '../../../util';
+
+export const getProps = () => ({
+    /**
+     * 执行结果.
+     */
+    executeResult: Object as PropType<ExecuteResultDTO>,
+
+    /**
+     * 当前索引, 即当前是第几个执行结果, 从 0 开始.
+     */
+    index: Number as PropType<number>,
+});
+
+export type KgSqlClientResultTabProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+/**
+ * <p>数据库客户端:执行结果的标签页.</p>
+ */
+export const KgSqlClientResultTab = defineComponent({
+    name: 'KgSqlClientResultTab',
+    props: getProps(),
+    setup(props) {
+        const kg = useKg();
+        const kgVar = useKgVar(`CLONE[${KG.FORM_ID__KG_SQL_CLIENT__RESULT_TAB}]TO[${KG.FORM_ID__KG_SQL_CLIENT__RESULT_TAB}-${KgUtil.uuid()}]`, true);
+
+        kgVar.kgTable.onBeforeRequest(async ({ params, response }) => {
+            // 首次执行,
+            if (params.pageNo === 1 && !pageExecuteResult$.value) {
+                response.value.records = currentExecuteResult$$.value?.rows ?? [];
+                response.value.total = currentExecuteResult$$.value?.rowsTotal ?? 0;
+            }
+            // 点击分页按钮,
+            else {
+                pageExecuteResult$.value = await API.WMS.SqlClientController.ExecutePage({
+                    data: new ExecuteQuery({
+                        pageIndex: params.pageNo,
+                        pageSize: params.pageSize,
+                        sql: currentExecuteResult$$.value?.sql,
+                    }),
+                });
+
+                response.value.records = currentExecuteResult$$.value?.rows ?? [];
+                response.value.total = currentExecuteResult$$.value?.rowsTotal ?? 0;
+            }
+
+            return true;
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * <p>分页查询结果.</p>
+         * <p>组件首次加载时, 执行结果是从外部传入的, 此属性为 null; 当用户点击分页按钮, 执行分页查询后, 此属性才会有值.</p>
+         */
+        const pageExecuteResult$ = ref<ExecuteResultDTO | null>(null);
+
+        /**
+         * <p>当前执行结果.</p>
+         * <ul>
+         *     <li>如果是分页查询, 则表示当前页的查询结果,</li>
+         *     <li>否则, 直接表示执行结果,</li>
+         * </ul>
+         */
+        const currentExecuteResult$$ = computed<ExecuteResultDTO | null>(() => pageExecuteResult$.value ?? props.executeResult ?? null);
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 执行结果发生变更, 更新变量配置.
+         */
+        watch(
+            currentExecuteResult$$,
+            (currentExecuteResult) => {
+                if (!pageExecuteResult$.value) {
+                    kgVar.patchVarGridConfig({ properties: { available_flg: currentExecuteResult?.isSelect ? 1 : 0 } });
+                    kgVar.patchVarGridMaster({
+                        properties: {
+                            varGridDetails: currentExecuteResult?.columns?.map(
+                                (i, index) =>
+                                    new VarGridDetail({
+                                        ellipsis_flg: 1,
+                                        filter_flag: 0,
+                                        frm_id: kgVar.fid,
+                                        grd_var_nam: 'defaultGrid',
+                                        id: KgUtil.uuid(),
+                                        ord_flg: 0,
+                                        srtseq: index,
+                                        var_nam: i.columnName,
+                                        vis_flg: 1,
+                                        width: '120',
+                                    }),
+                            ),
+                        },
+                    });
+                }
+            },
+            { immediate: true },
+        );
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => (
+            <div class="kg-sql-client--result-tab">
+                <div class={'info'}>
+                    <div class={'row'}>
+                        <div class={'label'}>{kg.t('kg.KgSqlClient.ResultTab.resultStatusLabel')}:</div>
+                        <div class={'value'}>
+                            {currentExecuteResult$$.value?.success && <div style={{ color: '#52c41a' }}>{kg.t('kg.success')}</div>}
+                            {!currentExecuteResult$$.value?.success && <div style={{ color: '#f5222d' }}>{kg.t('kg.fail')}</div>}
+                        </div>
+                    </div>
+                    <div class={'row'}>
+                        <div class={'label'}>{kg.t('kg.KgSqlClient.ResultTab.ellapseLabel')}:</div>
+                        <div class={'value'}>
+                            {currentExecuteResult$$.value?.elapse ?? 0} {kg.t('kg.millisecond')}
+                        </div>
+                    </div>
+                    <div class={'row'}>
+                        <div class={'label'}>{kg.t('kg.KgSqlClient.ResultTab.rowsTotalLabel')}:</div>
+                        <div class={'value'}>{currentExecuteResult$$.value?.rowsTotal ?? 0}</div>
+                    </div>
+                    <div class={'row'}>
+                        <div class={'label'}>{kg.t('kg.KgSqlClient.ResultTab.messageLabel')}:</div>
+                        <div class={'value'}>
+                            {currentExecuteResult$$.value?.success && <div style={{ color: '#52c41a' }}>{currentExecuteResult$$.value?.message}</div>}
+                            {!currentExecuteResult$$.value?.success && <div style={{ color: '#f5222d' }}>{currentExecuteResult$$.value?.message}</div>}
+                        </div>
+                    </div>
+                </div>
+
+                <KgVar />
+            </div>
+        );
+    },
+});