vap1 0.0.1

package/components/Tables/Components/Actions.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COL_OPERACTION = exports.ACTION = exports.DELETE = exports.EDIT = exports.INFO = void 0;
+const react_1 = __importDefault(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const antd_1 = require("antd");
+const Icon_1 = require("../../_adapt/Icon");
+const utils_1 = require("../../../utils");
+const Const_1 = require("../../_setup/Const");
+const DEFAULT_CLASS = {
+    INFO: 'c-oper-info',
+    EDIT: 'c-oper-edit',
+    DELETE: 'c-oper-delete',
+};
+const INFO = props => {
+    if (props.roleCode && !utils_1.PageUtil.hasRole(props.roleCode))
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    const title = utils_1.i18n.getText(props.ik, props.title, Const_1.V.BTN_INFO);
+    return react_1.default.createElement("span", { className: DEFAULT_CLASS.INFO, onClick: evt => utils_1.PageUtil.stopEvent(evt, props.onClick), title: `${title} ${props.name || ''}` },
+        react_1.default.createElement(Icon_1.Icon, { type: 'search' }),
+        react_1.default.createElement("span", null, title));
+};
+exports.INFO = INFO;
+const EDIT = props => {
+    if (props.roleCode && !utils_1.PageUtil.hasRole(props.roleCode))
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    const title = utils_1.i18n.getText(props.ik, props.title, Const_1.V.ACT_UPDATE);
+    return react_1.default.createElement("span", { className: DEFAULT_CLASS.EDIT, onClick: evt => utils_1.PageUtil.stopEvent(evt, props.onClick), title: `${title} ${props.name || ''}` },
+        react_1.default.createElement(Icon_1.Icon, { type: 'edit' }),
+        react_1.default.createElement("span", null, title));
+};
+exports.EDIT = EDIT;
+const DELETE = props => {
+    if (props.roleCode && !utils_1.PageUtil.hasRole(props.roleCode))
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    const title = utils_1.i18n.getText(props.ik, props.title, Const_1.V.ACT_DELETE);
+    let popTitle = utils_1.i18n.txt(Const_1.V.ACT_DELETE_CONFIRM, props.name || '');
+    return react_1.default.createElement(antd_1.Popconfirm, { onConfirm: e => utils_1.PageUtil.stopEvent(e, () => props.onClick()), placement: "right", title: react_1.default.createElement("span", null, popTitle), overlayClassName: 'c-table-action-confirm' },
+        react_1.default.createElement("span", { className: DEFAULT_CLASS.DELETE, title: `${title} ${props.name || ''}` },
+            react_1.default.createElement(Icon_1.Icon, { type: 'delete' }),
+            react_1.default.createElement("span", null, title)));
+};
+exports.DELETE = DELETE;
+const ACTION = props => {
+    if (props.roleCode && !utils_1.PageUtil.hasRole(props.roleCode))
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    const title = utils_1.i18n.getText(props.ik, props.title);
+    let className = lodash_1.default.has(DEFAULT_CLASS, props.type) ? DEFAULT_CLASS[props.type] : DEFAULT_CLASS.EDIT;
+    if (!lodash_1.default.has(props, 'confrim')) {
+        return react_1.default.createElement("span", { className: className, onClick: evt => utils_1.PageUtil.stopEvent(evt, props.onClick), title: `${props.name || ''}` },
+            props.icon && react_1.default.createElement(Icon_1.Icon, { type: props.icon }),
+            react_1.default.createElement("span", null, title));
+    }
+    return react_1.default.createElement(antd_1.Popconfirm, { onConfirm: () => props.onClick(), title: props.confrim, placement: "right", overlayClassName: 'c-table-action-confirm' },
+        react_1.default.createElement("span", { className: className, title: props.name || undefined, onClick: utils_1.PageUtil.stopEvent },
+            props.icon && react_1.default.createElement(Icon_1.Icon, { type: props.icon }),
+            react_1.default.createElement("span", null, title)));
+};
+exports.ACTION = ACTION;
+const RenderWidthMap = new Map();
+const COL_OPERACTION = (props) => {
+    const clazz = ['c-table-actions'];
+    if (lodash_1.default.isFunction(props)) {
+        let len = 0;
+        if (RenderWidthMap.has(props)) {
+            len = RenderWidthMap.get(props);
+        }
+        else {
+            try {
+                let result = props('', {}, 0);
+                if (lodash_1.default.isArray(result) && result.length) {
+                    len = result.length;
+                }
+            }
+            catch (_a) { }
+            RenderWidthMap.set(props, len);
+        }
+        if (len > 0) {
+            clazz.push('c-table-actions-' + len);
+        }
+        return { align: 'center', title: utils_1.i18n.getText(Const_1.V.TXT_OPERATION), ellipsis: false, className: clazz.join(' '), render: props };
+    }
+    else if (props.className) {
+        clazz.push(props.className);
+    }
+    return Object.assign(Object.assign({ align: 'center' }, props), { title: utils_1.i18n.getText(props.ik, null, Const_1.V.TXT_OPERATION), ellipsis: false, className: clazz.join(' ') });
+};
+exports.COL_OPERACTION = COL_OPERACTION;

package/components/Tables/Components/Summary.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { NumberFormat } from '../../../utils/Format';
+type SummaryItem = {
+    field: string;
+    type: 'count' | 'max' | 'min' | 'avg' | 'text' | 'total';
+    title: string;
+    ik?: string;
+    format?: NumberFormat | ((num: number) => string);
+};
+export declare const Summary: (data: any, items: SummaryItem) => React.JSX.Element;
+export {};

package/components/Tables/Components/Summary.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Summary = void 0;
+const react_1 = __importDefault(require("react"));
+const Summary = (data, items) => {
+    return react_1.default.createElement("div", null);
+};
+exports.Summary = Summary;

package/components/Tables/Components/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { TableColumn } from '../index';
+import type { ActionPorps, CustomAcitonProps } from './Actions';
+import type { TableAction, TableActionButton } from './ActionBar';
+export declare const defineTable: (table: TableDefined) => void;
+export type TableDefined = {
+    INFO: React.FC<ActionPorps>;
+    EDIT: React.FC<ActionPorps>;
+    DELETE: React.FC<ActionPorps>;
+    ACTION: React.FC<CustomAcitonProps>;
+    COL_OPERACTION: (props: TableColumn | ((value: any, record: any, index: number) => React.ReactNode)) => TableColumn;
+    BUTTON_ADD: (onClick: TableAction, props?: Partial<TableActionButton>) => TableActionButton;
+    BUTTON_DELETE: (onClick: TableAction, props?: Partial<TableActionButton>) => TableActionButton;
+    BUTTON_IMPORT: (onClick: TableAction, props?: Partial<TableActionButton>) => TableActionButton;
+    BUTTON_EXPORT: (onClick: TableAction, props?: Partial<TableActionButton>) => TableActionButton;
+    BUTTON_MORE: (children: TableActionButton[]) => TableActionButton;
+};

package/components/Tables/Components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+// import type { ForwardRefExoticComponent, ExoticComponent } from 'react';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineTable = void 0;
+const Actions_1 = require("./Actions");
+const ActionBar_1 = require("./ActionBar");
+const defineTable = (table) => {
+    table.INFO = Actions_1.INFO;
+    table.ACTION = Actions_1.ACTION;
+    table.DELETE = Actions_1.DELETE;
+    table.EDIT = Actions_1.EDIT;
+    table.COL_OPERACTION = Actions_1.COL_OPERACTION;
+    table.BUTTON_ADD = ActionBar_1.BUTTON_ADD;
+    table.BUTTON_DELETE = ActionBar_1.BUTTON_DELETE;
+    table.BUTTON_IMPORT = ActionBar_1.BUTTON_IMPORT;
+    table.BUTTON_EXPORT = ActionBar_1.BUTTON_EXPORT;
+    table.BUTTON_MORE = ActionBar_1.BUTTON_MORE;
+};
+exports.defineTable = defineTable;

package/components/Tables/STable.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ListInit } from '../../hooks/_list';
+import type { BaseTableProps } from './index';
+export type STableProps = BaseTableProps & ListInit;
+export declare const STable: (props: STableProps) => React.JSX.Element;

package/components/Tables/STable.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STable = void 0;
+const react_1 = __importStar(require("react"));
+const useArray_1 = require("../../hooks/useArray");
+const VTable_1 = require("./VTable");
+const STable = (props) => {
+    const model = (0, useArray_1.useArray)(props);
+    (0, react_1.useEffect)(() => {
+        model.setList(props.list);
+    }, [props.list]);
+    return react_1.default.createElement(VTable_1.VTable, Object.assign({}, props, { model: model }));
+};
+exports.STable = STable;

package/components/Tables/TopTable.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { BaseTableProps } from './index';
+import type { PlainObject } from '../../basetype';
+import type { ListModel } from '../../hooks/_list';
+import type { UseAjaxQueryHook } from '../../hooks/useAjaxQuery';
+export type TopTableProps = Omit<BaseTableProps, 'mode' | 'select' | 'selectDisabled' | 'actionBar' | 'searchBar' | 'default'> & {
+    /**
+     * 说明： 在 TopTable list /model  / ajaxQuery 必须 三选一
+     *
+     * list 为一个数组： 可以自行定义
+    */
+    list?: PlainObject[];
+    /**
+     * model 为一个api 模型，可以使用 useApi, useArray 等生成
+     * */
+    model?: ListModel;
+    /**
+     * ajaxQuery 请求模型，可以由 useAjaxQuery 生成
+     * */
+    ajaxQuery?: UseAjaxQueryHook<any>;
+    mustSelect?: boolean;
+    onRowSelect?: (row: PlainObject) => void;
+};
+export declare const TopTable: React.FC<TopTableProps>;

package/components/Tables/TopTable.js

@@ -0,0 +1,157 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopTable = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const utils_1 = require("../../utils");
+const Util_1 = require("./Util");
+const VTable_1 = require("./VTable");
+const TopTable = props => {
+    var _a;
+    const [columns, setColumns] = (0, react_1.useState)([]);
+    const tableRef = (0, react_1.useRef)(null);
+    let isQuerying = false;
+    let rowKey = 'id';
+    let list = [];
+    if (props.list) {
+        list = props.list.slice(0);
+    }
+    else if (props.ajaxQuery) {
+        if (lodash_1.default.isArray(props.ajaxQuery[1])) {
+            isQuerying = props.ajaxQuery[0];
+            list = props.ajaxQuery[1];
+        }
+        else {
+            console.warn('ajaxQuery 数据必须返回一个数组');
+        }
+    }
+    else if (props.model) {
+        if (props.model.rowKey)
+            rowKey = props.model.rowKey;
+        list = props.model.list;
+        isQuerying = props.model.isQuerying;
+    }
+    if (props.rowKey)
+        rowKey = props.rowKey;
+    const [scroll, setScroll] = (0, react_1.useState)(undefined);
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let cols = [];
+        if (props.showIndex !== false) {
+            cols.push((0, Util_1.getIdxColumn)({ current: 0 }, props.showIndex, true));
+        }
+        props.columns.map(col => {
+            if (col.roleCode) {
+                if (!utils_1.PageUtil.hasRole(col.roleCode)) {
+                    return;
+                }
+            }
+            if (col.ik) {
+                let title = utils_1.i18n.txt(col.ik);
+                cols.push(Object.assign(Object.assign({}, col), { title: title == '' ? col.title : title }));
+            }
+            else {
+                cols.push(col);
+            }
+        });
+        setColumns(cols);
+    }, [props.columns]);
+    const onRowSelect = (0, react_1.useCallback)((data) => {
+        if (selected == null || data[rowKey] != selected[rowKey]) {
+            setSelected(data);
+            props.onRowSelect(data);
+            return;
+        }
+        if (props.mustSelect)
+            return;
+        setSelected(null);
+        props.onRowSelect(null);
+    }, [selected]);
+    const resizePid = (0, react_1.useRef)(null);
+    const resize = () => {
+        if (props.scroll === null)
+            return;
+        clearTimeout(resizePid.current);
+        resizePid.current = setTimeout(() => {
+            const thead = (0, VTable_1.getHeightByTagName)(tableRef.current, 'thead') || 40;
+            tableRef.current.style.display = 'none';
+            let height = tableRef.current.parentElement.getBoundingClientRect().height;
+            if (height == 0) {
+                setScroll(undefined);
+            }
+            else {
+                setScroll({ y: Math.ceil(height - (thead || 40)), x: true });
+            }
+            tableRef.current.style.display = 'block';
+        }, 50);
+    };
+    (0, react_1.useEffect)(() => {
+        resize();
+        window.addEventListener('resize', resize, false);
+        return () => window.removeEventListener('resize', resize);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (lodash_1.default.isArray(list) && list.length && props.mustSelect && props.onRowSelect) {
+            setSelected(list[0]);
+            props.onRowSelect(list[0]);
+        }
+    }, [props.list, (_a = props.model) === null || _a === void 0 ? void 0 : _a.list]);
+    const tableProps = {
+        tableLayout: 'fixed',
+        rowKey,
+        size: utils_1.GLOBAL.CONFIG.TABLE.SIZE,
+        // showSorterTooltip: false,
+        pagination: false,
+    };
+    if (lodash_1.default.isFunction(props.onRowSelect)) {
+        tableProps.onRow = row => ({
+            onClick: (event) => {
+                utils_1.PageUtil.stopEvent(event, () => onRowSelect(row));
+            }
+        });
+    }
+    return react_1.default.createElement(antd_1.Table, Object.assign({}, tableProps, props, { 
+        // ref={tableRef}
+        rowClassName: (record, i) => {
+            let clazz = [];
+            if (i <= 3)
+                clazz.push('c-table-top-' + i);
+            if (lodash_1.default.isFunction(props.onRowSelect)) {
+                if (selected && selected[rowKey] == record[rowKey]) {
+                    clazz.push('ant-table-row-selected');
+                }
+                else {
+                    clazz.push('c-table-top-cursor');
+                }
+            }
+            return clazz.join(' ');
+        }, scroll: scroll, className: utils_1.StringUtil.className(['c-table', 'c-table-top'], props.className), columns: columns, dataSource: list, loading: isQuerying }));
+};
+exports.TopTable = TopTable;

package/components/Tables/TopTableModal.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { VModalProps } from '../_adapt/Modal';
+import type { TopTableProps } from './TopTable';
+export type TopTableModalProps = TopTableProps & VModalProps;
+export declare const TopTableModal: React.FC<TopTableModalProps>;

package/components/Tables/TopTableModal.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopTableModal = void 0;
+const react_1 = __importDefault(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const Modal_1 = require("../_adapt/Modal");
+const TopTable_1 = require("./TopTable");
+const TOP_TABLE_PROPERTIES = [
+    'mode', 'columns', 'showIndex', 'rowKey', 'autoLoad', 'model', 'list', 'ajaxQuery', 'mustSelect', 'onRowSelect'
+];
+const TopTableModal = props => {
+    const modalProps = lodash_1.default.omit(props, TOP_TABLE_PROPERTIES);
+    const tableProps = lodash_1.default.pick(props, TOP_TABLE_PROPERTIES);
+    return react_1.default.createElement(Modal_1.Modal, Object.assign({}, modalProps),
+        react_1.default.createElement(TopTable_1.TopTable, Object.assign({}, tableProps)));
+};
+exports.TopTableModal = TopTableModal;

package/components/Tables/Util.d.ts

@@ -0,0 +1,3 @@
+import type { MutableRefObject } from 'react';
+import type { TableColumn } from './index';
+export declare const getIdxColumn: (ref: MutableRefObject<number>, showIndex?: string, isRank?: boolean) => TableColumn;

package/components/Tables/Util.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIdxColumn = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const Const_1 = require("../_setup/Const");
+const getIdxColumn = (ref, showIndex = null, isRank = false) => {
+    const idxRender = (x, y, i) => ref.current + i + 1;
+    let title;
+    if (lodash_1.default.isString(showIndex)) {
+        if (utils_1.i18n.hasKey(showIndex)) {
+            title = utils_1.i18n.txt(showIndex);
+        }
+        else {
+            title = showIndex;
+        }
+    }
+    else {
+        title = utils_1.i18n.txt(isRank ? Const_1.V.TXT_RANK : Const_1.V.TXT_IDX);
+    }
+    let width = 48;
+    if (ref.current < 1000) {
+        width = 48;
+    }
+    else if (ref.current < 10000) {
+        width = 60;
+    }
+    else {
+        width = 72;
+    }
+    return {
+        className: '_index',
+        title,
+        width,
+        render: idxRender
+    };
+};
+exports.getIdxColumn = getIdxColumn;

package/components/Tables/VTable.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BaseTableProps } from './index';
+import type { ListModel } from '../../hooks/_list';
+export declare const getHeightByTagName: (root: HTMLElement, tagName: string) => number;
+/**
+ * VTable 支持多种模型，内置模型有 API/DATA/STATIC,也支持模型规范的自定义模型
+*/
+export type VTableProps = BaseTableProps & {
+    model: ListModel;
+};
+export declare const VTable: React.FC<VTableProps>;