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

package/page/KgPageSqlClient/components/KgSqlClient.Toolbar.Top.tsx

@@ -0,0 +1,132 @@
+import { Icon } from '@iconify/vue';
+import { Button, Select, SelectOption, Tooltip } from 'ant-design-vue';
+import { defineComponent } from 'vue';
+import './KgSqlClient.css';
+import { useKg } from '../../../config';
+
+/**
+ * <p>数据库客户端:工具栏:顶部.</p>
+ */
+export const KgSqlClientToolbarTop = defineComponent({
+    name: 'KgSqlClientToolbarTop',
+    emits: ['execute'],
+    setup(props, { emit, expose }) {
+        const kg = useKg();
+
+        return () => (
+            <div class="kg-sql-client--toolbar-top">
+                <div class="left">
+                    <Button
+                        type={'primary'}
+                        ghost={true}
+                        onClick={() => {
+                            emit('execute');
+                        }}
+                        style={{ alignItems: 'center', display: 'flex' }}
+                    >
+                        <span class="icon">
+                            <Icon icon="ant-design:clock-circle-outline" />
+                        </span>
+                        {kg.t('kg.KgSqlClient.Toolbar.Top.viewHistory')}
+                    </Button>
+
+                    <Button
+                        type={'primary'}
+                        ghost={true}
+                        onClick={() => {
+                            emit('execute');
+                        }}
+                        style={{ alignItems: 'center', display: 'flex' }}
+                    >
+                        <span class="icon">
+                            <Icon icon="ant-design:file-text-outline" />
+                        </span>
+                        {kg.t('kg.KgSqlClient.Toolbar.Top.viewTemplate')}
+                    </Button>
+
+                    <Button
+                        type={'primary'}
+                        onClick={() => {
+                            emit('execute');
+                        }}
+                        style={{ alignItems: 'center', display: 'flex' }}
+                    >
+                        <span class="icon">
+                            <Icon icon="ant-design:plus-outlined" />
+                        </span>
+                        {kg.t('kg.KgSqlClient.Toolbar.Top.saveAsTemplate')}
+                    </Button>
+
+                    <Button
+                        type={'primary'}
+                        onClick={() => {
+                            emit('execute');
+                        }}
+                        style={{ alignItems: 'center', display: 'flex' }}
+                    >
+                        <span class="icon">
+                            <Icon icon="ant-design:check-outlined" />
+                        </span>
+                        {kg.t('kg.KgSqlClient.Toolbar.Top.saveCurrentTemplate')}
+                    </Button>
+
+                    <Button
+                        type={'primary'}
+                        danger={true}
+                        onClick={() => {
+                            emit('execute');
+                        }}
+                        style={{ alignItems: 'center', display: 'flex' }}
+                    >
+                        <span class="icon">
+                            <Icon icon="ant-design:delete-outlined" />
+                        </span>
+                        {kg.t('kg.KgSqlClient.Toolbar.Top.deleteCurrentTemplate')}
+                    </Button>
+                </div>
+
+                <div class="right">
+                    <Tooltip
+                        title={kg.t('kg.KgAppSelect.tooltip')}
+                        placement="topLeft"
+                    >
+                        <Select
+                            value={'TODO'}
+                            onChange={(value) => {
+                                /*TODO*/
+                            }}
+                            dropdownClassName="kg-app-select--dropdown"
+                            allowClear={true}
+                            class="kg-app-select"
+                            style="width: 500px"
+                        >
+                            {{
+                                default: () => (
+                                    <>
+                                        {[].map((i) => (
+                                            <SelectOption value={'TODO'}>{'TODO'}</SelectOption>
+                                        ))}
+                                    </>
+                                ),
+                                suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                            }}
+                        </Select>
+                    </Tooltip>
+
+                    <Button
+                        type={'primary'}
+                        onClick={() => {
+                            emit('execute');
+                        }}
+                        style={{ alignItems: 'center', display: 'flex' }}
+                    >
+                        <span class="icon">
+                            <Icon icon="ant-design:caret-right-outlined" />
+                        </span>
+                        {kg.t('kg.execute')}
+                    </Button>
+                </div>
+            </div>
+        );
+    },
+});

package/page/KgPageSqlClient/components/KgSqlClient.css

@@ -0,0 +1,171 @@
+.kg-sql-client {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 6px;
+}
+
+/* region kg-sql-client--toolbar-top*/
+.kg-sql-client .kg-sql-client--toolbar-top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 4px;
+}
+
+.kg-sql-client .kg-sql-client--toolbar-top > .left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.kg-sql-client .kg-sql-client--toolbar-top > .left .ant-btn {
+    margin-right: 4px;
+}
+
+.kg-sql-client .kg-sql-client--toolbar-top > .left .ant-btn .icon {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* endregion */
+
+/* region kg-sql-client--editor */
+.kg-sql-client .kg-sql-client--editor {
+    width: 100%;
+    flex: 1;
+    min-height: 32px;
+}
+
+.kg-sql-client .kg-sql-client--editor > textarea.ant-input {
+    height: 100%;
+    resize: none;
+    padding: 1px;
+    line-height: 1;
+    font-family: Monaco, Consolas, 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.kg-sql-client .kg-sql-client--editor > textarea.ant-input:focus,
+.kg-sql-client .kg-sql-client--editor > textarea.ant-input-focused {
+    box-shadow: none !important;
+}
+
+/* endregion */
+
+/* region kg-sql-client--result*/
+.kg-sql-client .kg-sql-client--result {
+    width: 100%;
+    margin-top: 4px;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs {
+    height: 100%;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-content {
+    height: 100%;
+    padding: 0px;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav {
+    margin-bottom: 0px;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav > .ant-tabs-nav-wrap {
+    background: #fafafa;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 3px 3px 0 0;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav > .ant-tabs-nav-wrap .ant-tabs-nav-list {
+    border-radius: 3px 0 0 0;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav > .ant-tabs-nav-wrap .ant-tabs-nav-list > .ant-tabs-tab {
+    padding: 9px 16px;
+    border-right: 1px solid #e5e7eb;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav > .ant-tabs-nav-wrap .ant-tabs-nav-list > .ant-tabs-tab:first-child {
+    border-radius: 3px 0 0 0;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav > .ant-tabs-nav-wrap .ant-tabs-nav-list > .ant-tabs-tab + .ant-tabs-tab {
+    margin-left: 0px;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-nav > .ant-tabs-nav-wrap .ant-tabs-nav-list > .ant-tabs-tab.ant-tabs-tab-active {
+    background: #ffffff;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-content > .ant-tabs-tabpane {
+    height: 100%;
+    background: #fff;
+    border-radius: 0 0 3px 3px;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-content > .ant-tabs-tabpane > div.info {
+    flex: initial;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-content > .ant-tabs-tabpane > div.info > .row {
+    display: flex;
+    align-items: center;
+}
+
+.kg-sql-client .kg-sql-client--result .ant-tabs .ant-tabs-content > .ant-tabs-tabpane > div.info > .row > .label {
+    margin-right: 6px;
+    min-width: 120px;
+    text-align: right;
+}
+
+/* endregion */
+
+/* region kg-sql-client--result-tab */
+.kg-sql-client .kg-sql-client--result-tab {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+}
+
+.kg-sql-client .kg-sql-client--result-tab > .info {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    background: #ffffff;
+    padding: 6px;
+}
+
+.kg-sql-client .kg-sql-client--result-tab > .info > .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.kg-sql-client .kg-sql-client--result-tab > .info > .row > .label {
+    width: 120px;
+    text-align: right;
+    margin-right: 4px;
+}
+
+.kg-sql-client .kg-sql-client--result-tab > .kg-var {
+    flex: 1;
+    min-height: 0;
+}
+
+.kg-sql-client .kg-sql-client--result-tab > .kg-var > .ant-spin-nested-loading > .ant-spin-container {
+    padding: 0 6px 6px 6px;
+    border-radius: 3px;
+}
+
+/* endregion */

package/page/KgPageSqlClient/components/KgSqlClient.tsx

@@ -0,0 +1,110 @@
+import { Badge, Tabs } from 'ant-design-vue';
+import { defineComponent, nextTick, ref } from 'vue';
+import { API } from '../../../api';
+import './KgSqlClient.css';
+import { ExecuteQuery, ExecuteResultDTO } from '../../../api/WMS/models';
+import { IKgResizableProps, KgResizable } from '../../../component/KgResizable';
+import { useKg } from '../../../config';
+import { KgSqlClientEditor, KgSqlClientEditorRef } from './KgSqlClient.Editor';
+import { KgSqlClientResultTab } from './KgSqlClient.ResultTab';
+import { KgSqlClientToolbarTop } from './KgSqlClient.Toolbar.Top';
+
+/**
+ * <p>数据库客户端.</p>
+ */
+export const KgSqlClient = defineComponent({
+    name: 'KgSqlClient',
+    setup() {
+        const kg = useKg();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 执行结果列表.
+         */
+        const executeResultList$ = ref<Array<ExecuteResultDTO>>([]);
+        const executeResultListKgResizableProps$ = ref<IKgResizableProps>({ kgHeight: 543 });
+        const kgSqlClientEditorRef$ = ref<KgSqlClientEditorRef | null>(null);
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 点击执行按钮.
+         */
+        async function onKgSqlClientToolbarTopExecute() {
+            await execute();
+        }
+
+        /**
+         * 触发 CTRL + ENTER 快捷键.
+         */
+        async function onKgSqlClientEditorExecute() {
+            await execute();
+        }
+
+        /**
+         * 执行.
+         */
+        async function execute() {
+            const sql = kgSqlClientEditorRef$.value?.getSqlTextForExecute();
+            if (!sql) {
+                return;
+            }
+
+            const executeResultList = await API.WMS.SqlClientController.Execute({ data: new ExecuteQuery({ sql: sql }) });
+
+            executeResultList$.value = [];
+            await nextTick();
+
+            executeResultList$.value = executeResultList;
+        }
+
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => (
+            <div class="kg-sql-client">
+                <KgSqlClientToolbarTop onExecute={onKgSqlClientToolbarTopExecute} />
+
+                <KgSqlClientEditor
+                    ref={kgSqlClientEditorRef$}
+                    onExecute={onKgSqlClientEditorExecute}
+                />
+
+                {executeResultList$.value.length > 0 && (
+                    <KgResizable
+                        kgClass="kg-sql-client--result"
+                        kgType={'top'}
+                        kgResizeHandleVisible={false}
+                        kgMinHeight={42}
+                        kgHeight={executeResultListKgResizableProps$.value.kgHeight}
+                        onUpdate:kgHeight={(value) => (executeResultListKgResizableProps$.value.kgHeight = value)}
+                    >
+                        <Tabs hideAdd>
+                            {executeResultList$.value.map((executeResult, index) => (
+                                <Tabs.TabPane
+                                    key={index}
+                                    tab={
+                                        <>
+                                            {executeResult.success && <Badge status="success" />}
+                                            {!executeResult.success && <Badge status="error" />}
+                                            {kg.t('kg.KgSqlClient.ResultTab.tabTitlePrefix')} {index + 1}
+                                        </>
+                                    }
+                                >
+                                    <KgSqlClientResultTab
+                                        key={index}
+                                        executeResult={executeResult}
+                                        index={index}
+                                    />
+                                </Tabs.TabPane>
+                            ))}
+                        </Tabs>
+                    </KgResizable>
+                )}
+            </div>
+        );
+    },
+});

package/page/index.ts

@@ -0,0 +1,55 @@
+import { RouteRecordRaw } from 'vue-router';
+import { KG_APP_PREFIXS } from '../model';
+import { KgPageCircularShuttleMonitor } from './KgPageCircularShuttleMonitor';
+import KgPageDda from './KgPageDda';
+import { KgPageSqlClient } from './KgPageSqlClient';
+
+export { useKgCircularShuttleMonitor, type IUseKgCircularShuttleMonitor } from '../component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.hooks';
+export * from '../component/KgCircularShuttleMonitor/KgCircularShuttleMonitor.model';
+
+/**
+ * 路由.
+ *
+ * @param layout 布局组件.
+ */
+export function KG_ROUTES(layout: () => any): Array<any> {
+    return [
+        /**
+         * @deprecated 已弃用, KgPageCircleVis 已经重命名为 KgPageCircularShuttleMonitor, 因此请使用下面的 /wcs/KgPageCircularShuttleMonitor,
+         */
+        {
+            path: '/wcs/KgPageCircleVis',
+            name: '/wcs/KgPageCircleVis',
+            component: layout,
+            children: [{ path: '', name: 'KgPageCircleVis', component: KgPageCircularShuttleMonitor }],
+        },
+        // WCS/环形穿梭车可视化,
+        {
+            path: '/wcs/KgPageCircularShuttleMonitor',
+            name: '/wcs/KgPageCircularShuttleMonitor',
+            component: layout,
+            children: [{ path: '', name: 'KgPageCircularShuttleMonitor', component: KgPageCircularShuttleMonitor }],
+        },
+        // 系统管理/系统管理/DDA,
+        {
+            path: '/sys/dda/.sys.dda',
+            name: '/sys/dda/.sys.dda',
+            component: layout,
+            children: [{ path: '', name: 'KgPageDda', component: KgPageDda }],
+        },
+        // 系统管理/系统管理/数据操作,
+        {
+            path: '/sys/KgPageSqlClient',
+            name: '/sys/KgPageSqlClient',
+            component: layout,
+            children: [{ path: '', name: 'KgPageSqlClient', component: KgPageSqlClient }],
+        },
+        // DDA,
+        ...KG_APP_PREFIXS.map((prefix) => ({
+            path: `${prefix}/dda/:id`,
+            name: `${prefix}/dda/index`,
+            component: layout,
+            children: [{ path: '', name: 'KgVarFactory', component: {} }],
+        })),
+    ] as Array<RouteRecordRaw>;
+}

package/project/build/config/themeConfig.ts

@@ -0,0 +1,67 @@
+import { generate } from '@ant-design/colors';
+
+export const primaryColor = '#1890FF';
+
+// export const darkMode = 'light';
+
+type Fn = (...arg: any) => any;
+
+type GenerateTheme = 'default' | 'dark';
+
+export interface GenerateColorsParams {
+    mixLighten: Fn;
+    mixDarken: Fn;
+    tinycolor: any;
+    color?: string;
+}
+
+export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
+    return generate(color, {
+        theme,
+    });
+}
+
+export function getThemeColors(color?: string) {
+    const tc = color || primaryColor;
+    const lightColors = generateAntColors(tc);
+    const primary = lightColors[5];
+    const modeColors = generateAntColors(primary, 'dark');
+
+    return [...lightColors, ...modeColors];
+}
+
+export function generateColors({ color = primaryColor, mixLighten, mixDarken, tinycolor }: GenerateColorsParams) {
+    const arr = new Array(19).fill(0);
+    const lightens = arr.map((_t, i) => {
+        return mixLighten(color, i / 5);
+    });
+
+    const darkens = arr.map((_t, i) => {
+        return mixDarken(color, i / 5);
+    });
+
+    const alphaColors = arr.map((_t, i) => {
+        return tinycolor(color)
+            .setAlpha(i / 20)
+            .toRgbString();
+    });
+
+    const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
+
+    const tinycolorLightens = arr
+        .map((_t, i) => {
+            return tinycolor(color)
+                .lighten(i * 5)
+                .toHexString();
+        })
+        .filter((item) => item !== '#ffffff');
+
+    const tinycolorDarkens = arr
+        .map((_t, i) => {
+            return tinycolor(color)
+                .darken(i * 5)
+                .toHexString();
+        })
+        .filter((item) => item !== '#000000');
+    return [...lightens, ...darkens, ...alphaColors, ...shortAlphaColors, ...tinycolorDarkens, ...tinycolorLightens].filter((item) => !item.includes('-'));
+}

package/project/build/generate/generateModifyVars.ts

@@ -0,0 +1,40 @@
+// @ts-ignore
+import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+import { generateAntColors, primaryColor } from '../config/themeConfig';
+
+/**
+ * less global variable
+ */
+export function generateModifyVars(dark = false) {
+    const palettes = generateAntColors(primaryColor);
+    const primary = palettes[5];
+
+    const primaryColorObj: Record<string, string> = {};
+
+    for (let index = 0; index < 10; index++) {
+        primaryColorObj[`primary-${index + 1}`] = palettes[index];
+    }
+
+    const modifyVars = getThemeVariables({ dark });
+    return {
+        ...modifyVars,
+        // Used for global import to avoid the need to import each style file separately
+        // reference:  Avoid repeated references
+        hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
+        'primary-color': primary,
+        ...primaryColorObj,
+        'info-color': primary,
+        'processing-color': primary,
+        'success-color': '#55D187', //  Success color
+        'error-color': '#ED6F6F', //  False color
+        'warning-color': '#EFBD47', //   Warning color
+        //'border-color-base': '#EEEEEE',
+        'font-size-base': '14px', //  Main font size
+        'border-radius-base': '3px', //  Component/float fillet
+        'link-color': primary, //   Link color
+        'app-content-background': '#fafafa', //   Link color
+        'table-padding-vertical': '12px',
+        'table-padding-horizontal': '12px',
+    };
+}

package/project/src/api/sys/menu.ts

@@ -0,0 +1,37 @@
+import { httpClient } from '../../../../service';
+import { KgUtil } from '../../../../util';
+import { Menu } from '../../router/types';
+import { getMenuListResultModel } from './model/menuModel';
+
+enum Api {
+    GetMenuList = '/sys/permission/getUserPermissionByToken',
+}
+
+/**
+ * 查询菜单列表.
+ */
+export async function getMenuList() {
+    /**
+     * 排序.
+     *
+     * @param _menus 菜单列表.
+     */
+    const sortMenus = (_menus: Array<Menu>) => {
+        _menus.sort((x, y) => Number(x?.meta?.sortNo ?? 0) - Number(y?.meta?.sortNo ?? 0));
+
+        _menus.forEach((_menu) => {
+            if (_menu.children) {
+                sortMenus(_menu.children);
+            }
+        });
+    };
+
+    const res = await httpClient().request<getMenuListResultModel>({ url: Api.GetMenuList });
+    const menus = Array.isArray(res) ? (res as any) : res['menu'];
+
+    sortMenus(menus);
+
+    KgUtil.translateMenus(menus);
+
+    return menus;
+}

package/project/src/api/sys/model/menuModel.ts

@@ -0,0 +1,17 @@
+import type { RouteMeta } from 'vue-router';
+
+export interface RouteItem {
+    path: string;
+    component: any;
+    meta: RouteMeta;
+    name?: string;
+    alias?: string | string[];
+    redirect?: string;
+    caseSensitive?: boolean;
+    children?: RouteItem[];
+}
+
+/**
+ * @description: Get menu return value
+ */
+export type getMenuListResultModel = RouteItem[];

package/project/src/api/sys/model/userModel.ts

@@ -0,0 +1,58 @@
+/**
+ * @description: Login interface parameters
+ */
+export interface LoginParams {
+    username: string;
+    password: string;
+}
+
+export interface ThirdLoginParams {
+    token: string;
+    thirdType: string;
+}
+
+export interface RoleInfo {
+    roleName: string;
+    value: string;
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {
+    userId: string | number;
+    token: string;
+    role: RoleInfo;
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetUserInfoModel {
+    roles: RoleInfo[];
+    // 用户id
+    userId: string | number;
+    // 用户名
+    username: string;
+    // 真实名字
+    realname: string;
+    // 头像
+    avatar: string;
+    // 介绍
+    desc?: string;
+    // 用户信息
+    userInfo?: any;
+    // 缓存字典项
+    sysAllDictItems?: any;
+    userWarehouses?: any;
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetResultModel {
+    code: number;
+    message: string;
+    result: object;
+    success: Boolean;
+}