vap1 0.1.5 → 0.1.6

package/components/_setup/UForm/UFormJSONTable.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 });
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const index_1 = require("../../../index");
+const components_1 = require("../../../components");
+const hooks_1 = require("../../../hooks");
+const renderColumn = (txt, column) => {
+    if (column.options) {
+        let find = lodash_1.default.find(column.options, { value: txt });
+        if (find) {
+            return find.name;
+        }
+    }
+    return txt;
+};
+// json-table 不支持被联动，可联动其它
+// 基础组件 JSON 数组, json-array 升级版本，适用于复杂的表格
+(0, components_1.registerFormField)('json-table', props => {
+    const { field, disabled, value, } = props;
+    const config = field.config;
+    const rowKey = lodash_1.default.has(config, 'rowKey') ? config.rowKey : 'id';
+    const { modalState: { modalProps }, showAdd, showEdit, showInfo, hide } = (0, hooks_1.useModals)();
+    const onChange = (arr) => {
+        if (field.dataType == 'array') {
+            props.onChange(arr);
+        }
+        else {
+            props.onChange(JSON.stringify(arr));
+        }
+    };
+    const arr = (0, react_1.useMemo)(() => {
+        let arr = [];
+        if (lodash_1.default.isArray(value)) {
+            arr = [...props.value];
+        }
+        else if (lodash_1.default.isString(value)) {
+            try {
+                arr = JSON.parse(value);
+                if (!lodash_1.default.isArray(arr))
+                    arr = [];
+            }
+            catch (_a) { }
+        }
+        arr.map(item => {
+            if (!lodash_1.default.has(item, rowKey)) {
+                lodash_1.default.set(item, rowKey, utils_1.StringUtil.genKey());
+            }
+        });
+        return arr;
+    }, [value]);
+    const formFields = (0, react_1.useMemo)(() => {
+        if (lodash_1.default.has(config, 'formFields'))
+            return config.formFields;
+        let fields = [];
+        config.columns.map((col) => {
+            let field = { field: col.dataIndex, title: col.title, };
+            if (col.type)
+                field.type = col.type;
+            if (col.required)
+                field.required = true;
+            if (lodash_1.default.isArray(col.options))
+                field.options = col.options;
+            fields.push(field);
+        });
+        return fields;
+    }, []);
+    const tableColumns = (0, react_1.useMemo)(() => {
+        let columns = [];
+        config.columns.map((item) => {
+            let col = lodash_1.default.omit(item, ['type', 'options', 'required']);
+            if (!col.render && lodash_1.default.isArray(item.options)) {
+                col.render = utils_1.Renders.ListRender(item.options);
+            }
+            columns.push(col);
+        });
+        return columns;
+    }, []);
+    const add = (0, react_1.useCallback)((data) => onChange(utils_1.ArrayUtil.add(arr, Object.assign(Object.assign({}, data), { [rowKey]: utils_1.StringUtil.genKey() }))), [arr]);
+    const update = (0, react_1.useCallback)((data) => onChange(utils_1.ArrayUtil.update(arr, data, rowKey)), [arr]);
+    const del = (0, react_1.useCallback)((data) => onChange(utils_1.ArrayUtil.del(arr, data, rowKey)), [arr]);
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.STable, { list: arr, locale: {
+                emptyText: react_1.default.createElement(index_1.Empty, { description: react_1.default.createElement(index_1.Button, { type: "primary", icon: "plus", onClick: showAdd },
+                        "\u6DFB\u52A0",
+                        field.title) })
+            }, columns: [
+                ...tableColumns,
+                index_1.VTable.COL_OPERACTION((record) => [
+                    react_1.default.createElement(index_1.VTable.INFO, { onClick: () => showInfo(record) }),
+                    react_1.default.createElement(index_1.VTable.EDIT, { onClick: () => showEdit(record) }),
+                    react_1.default.createElement(index_1.VTable.DELETE, { onClick: () => del(record) }),
+                ])
+            ], pagination: false, footer: () => {
+                if (arr.length == 0 || disabled) {
+                    return null;
+                }
+                return react_1.default.createElement(index_1.Button, { type: "primary", icon: "plus", onClick: showAdd },
+                    "\u6DFB\u52A0",
+                    field.title);
+            } }),
+        react_1.default.createElement(index_1.UModal, Object.assign({}, modalProps, { autoTitle: field.title, fields: formFields, default: config.formDefault || {}, onOk: (data) => {
+                hide();
+                if (modalProps.isEdit) {
+                    update(data);
+                }
+                else {
+                    add(data);
+                }
+            } })));
+}, {
+    breakCol: true,
+    breakTitle: true,
+    render: (value, data, field) => {
+        let list = [];
+        try {
+            list = JSON.parse(value);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return react_1.default.createElement(index_1.STable
+        // className="c-table json-array-table"
+        // size="small"
+        , { 
+            // className="c-table json-array-table"
+            // size="small"
+            locale: { emptyText: react_1.default.createElement(index_1.Empty, { description: "\u6682\u65E0\u6570\u636E" }) }, list: list, columns: field.config.columns.map(item => (Object.assign(Object.assign({}, item), { render: (txt) => renderColumn(txt, item) }))), pagination: false });
+    }
+});

package/components/_setup/UForm/UFormSelect.js

@@ -82,6 +82,25 @@ const Const_1 = require("../Const");
             onChange(isCheck ? field.options[CHECKED].value : field.options[UNCHECKED].value);
         } }));
 });
+// 用法与 switch 相同
+(0, _register_1.registerFormField)('switch-checkbox', (props) => {
+    const { field, disabled, value, onChange, options } = props;
+    if (options.length <= 1) {
+        console.warn('Type Switch Must have 2 Options');
+        return utils_1.Const.NONE;
+    }
+    let CHECKED = utils_1.GLOBAL.CONFIG.FORM.SWITCH_DEFAULT_CHECKED;
+    if (lodash_1.default.has(field.config, 'reverse') && field.config.reverse)
+        CHECKED = 1 - CHECKED;
+    let UNCHECKED = 1 - CHECKED;
+    const isCheck = value == field.options[CHECKED].value;
+    return react_1.default.createElement(antd_1.Checkbox, Object.assign({}, field.config, { disabled: disabled, checked: isCheck, onChange: evt => {
+            utils_1.PageUtil.stopEvent(evt.nativeEvent);
+            const checked = evt.target.checked;
+            onChange(checked ? field.options[CHECKED].value : field.options[UNCHECKED].value);
+        } }),
+        react_1.default.createElement("span", { style: { userSelect: 'none' } }, isCheck ? field.options[CHECKED].label : field.options[UNCHECKED].label));
+});
 // 单选
 (0, _register_1.registerFormField)('radio', (props) => {
     const { field, disabled, value, onChange, options } = props;

package/components/_setup/index.d.ts

@@ -16,6 +16,7 @@ import './UForm/UFormRole';
 import './UForm/UFormOrg';
 import './UForm/UFormSearch';
 import './UForm/UFormJSON';
+import './UForm/UFormJSONTable';
 import './UForm/UFormCrontab';
 import './UForm/UFormAdvanceInput';
 import './UForm/UFormAdvanceSelect';

package/components/_setup/index.js

@@ -20,6 +20,7 @@ require("./UForm/UFormRole"); // 高阶类型：角色
 require("./UForm/UFormOrg"); // 高阶类型：机构
 require("./UForm/UFormSearch"); // 高阶类型：自动填充/自动搜索（API接口获取数据）
 require("./UForm/UFormJSON"); // 高阶类型：JSON Array, JSON Object
+require("./UForm/UFormJSONTable"); // 高阶类型：JSON Array 升级版本
 require("./UForm/UFormCrontab"); // 高阶类型：Crontab
 require("./UForm/UFormAdvanceInput"); // 高阶类型：高级输入
 require("./UForm/UFormAdvanceSelect"); // 高阶类型：高级选择

package/hooks/_list.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_STATE = void 0;
+const Global_1 = require("../utils/Global");
 exports.DEFAULT_STATE = {
     rowKey: 'id',
     list: [],
     isQuerying: false,
     pageNo: 1,
-    pageSize: 15,
+    pageSize: Global_1.CONFIG.PAGINATION.SIZE_DEFAULT,
     total: 0,
     totalAcc: 0,
     param: {},

package/hooks/useArray.d.ts

@@ -1,5 +1,5 @@
 import type { StaticListState, ListInit } from './_list';
-type ArrayOption = ListInit & {
+export type UseArrayOption = ListInit & {
     /**
      * 页面大小，默认为 VLIST 大小
      * 默认为 0 ：为0时，不分页，非0时分页
@@ -17,5 +17,4 @@ type ArrayOption = ListInit & {
  * 静态数组 Table，支持 CRUD（不调接口）
  * 同样适用于 VTable 等组件
 */
-export declare const useArray: (options: ArrayOption) => StaticListState;
-export {};
+export declare const useArray: (options: UseArrayOption) => StaticListState;

package/hooks/useArray.js

@@ -46,21 +46,43 @@ const getList = (result) => {
  * 同样适用于 VTable 等组件
 */
 const useArray = (options) => {
-    const AllRef = (0, react_1.useRef)(null);
-    const BASE = Object.assign(Object.assign({}, _list_1.DEFAULT_STATE), { pageSize: 0 });
+    const [ALL, setList] = (0, react_1.useState)(options.list || []);
+    const BASE = Object.assign(Object.assign({}, _list_1.DEFAULT_STATE), { pageSize: 0, list: [] });
     if (options.rowKey)
         BASE.rowKey = options.rowKey;
-    let lastQueryRef = (0, react_1.useRef)(options.param || {});
-    let pageToRef = (0, react_1.useRef)(null);
-    let orderByRef = (0, react_1.useRef)(null);
     if (options.pageSize && options.pageSize > 0)
         BASE.pageSize = options.pageSize;
+    let lastQueryRef = (0, react_1.useRef)(options.param || {});
+    let pageToRef = (0, react_1.useRef)({ pageNo: 1, pageSize: BASE.pageSize > 0 ? BASE.pageSize : 99999 });
+    let orderByRef = (0, react_1.useRef)(null);
     const [state, setState] = (0, useSetState_1.useSetState)(BASE);
+    (0, useEffectFunction_1.useEffectFunction)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (ALL.length > 0 || options.api == null)
+            return;
+        setState({ isQuerying: true });
+        const param = options.param || {};
+        let response;
+        if (options.param) {
+            response = utils_1.Ajax.POST(options.api, options.param);
+        }
+        else {
+            response = utils_1.Ajax.GET(options.api);
+            ;
+        }
+        const resp = yield response;
+        const list = getList(resp);
+        setList(list);
+        setState({ isQuerying: false, param });
+    }));
+    (0, react_1.useLayoutEffect)(() => {
+        setState({ total: ALL.length, totalAcc: ALL.length });
+        queryRef();
+    }, [ALL]);
     const queryRef = () => {
         const param = lastQueryRef.current;
         const pageTo = pageToRef.current;
         const orderBy = orderByRef.current;
-        let list = AllRef.current.slice(0);
+        let list = ALL.slice(0);
         lodash_1.default.keys(param).map(field => {
             if (lodash_1.default.endsWith('_'))
                 return;
@@ -76,28 +98,13 @@ const useArray = (options) => {
             list = lodash_1.default.orderBy(list, orderBy.order, orderBy.by);
         }
         if (pageTo == null) {
-            setState({ isQuerying: false, list, total: list.length, totalAcc: list.length, param, pageNo: 1, });
+            setState({ isQuerying: false, list, param, pageNo: 1, total: list.length, totalAcc: list.length });
             return;
         }
         let start = pageTo.pageSize * (pageTo.pageNo - 1);
         let count = pageTo.pageSize;
-        setState({ isQuerying: false, list: list.slice(start, count), total: list.length, totalAcc: list.length, param, pageNo: 1, });
+        setState({ isQuerying: false, list: list.slice(start, start + count), param, pageNo: pageTo.pageNo, pageSize: pageTo.pageSize, total: list.length, totalAcc: list.length });
     };
-    const queryApi = () => __awaiter(void 0, void 0, void 0, function* () {
-        const param = lastQueryRef.current;
-        setState({ isQuerying: true });
-        const resp = yield utils_1.Ajax.POST(options.api, param);
-        const list = getList(resp);
-        AllRef.current = list;
-        const pageTo = pageToRef.current;
-        if (pageTo == null) {
-            setState({ isQuerying: false, list, total: list.length, totalAcc: list.length, param, pageNo: 1, });
-            return;
-        }
-        let start = pageTo.pageSize * (pageTo.pageNo - 1);
-        let count = pageTo.pageSize;
-        setState({ isQuerying: false, list: list.slice(start, count), total: list.length, totalAcc: list.length, param, pageNo: 1, });
-    });
     const query = (param, clean) => {
         if (clean) {
             lastQueryRef.current = param || {};
@@ -113,42 +120,20 @@ const useArray = (options) => {
         }
         if (options.pageSize && options.pageSize > 0) {
             pageToRef.current = { pageNo: 1, pageSize: options.pageSize };
+            setState({ pageNo: 1, pageSize: options.pageSize });
         }
         else {
             pageToRef.current = null;
         }
-        if (options.api) {
-            queryApi();
-        }
-        else if (AllRef.current != null && lodash_1.default.isArray(AllRef.current)) {
-            queryRef();
-        }
-        else {
-            console.error('list 与　api 到少需要指定一项');
-        }
+        queryRef();
     };
-    (0, useEffectFunction_1.useEffectFunction)(() => {
-        if (lodash_1.default.isArray(options.list))
-            AllRef.current = options.list;
-        if (options.autoLoad !== false)
-            query(options.param || {}, true);
-    });
     const pageTo = (pageNo, pageSize) => {
-        if (options.pageSize && options.pageSize > 0) {
-            // pageToRef.current = { pageNo: 1, pageSize: options.pageSize }
+        if (options.pageSize == null || options.pageSize == 0) {
             console.error('静态Array默认不翻页，如果需要翻页，需要指定pageSize');
             return;
         }
         pageToRef.current = { pageNo, pageSize };
-        if (AllRef.current != null && lodash_1.default.isArray(AllRef.current)) {
-            queryRef();
-        }
-        else if (options.api) {
-            queryApi();
-        }
-        else {
-            console.error('list 与　api 到少需要指定一项');
-        }
+        queryRef();
     };
     const orderBy = (order, by) => {
         if (order == null || by == null) {
@@ -157,24 +142,6 @@ const useArray = (options) => {
         else {
             orderByRef.current = { order, by };
         }
-        if (AllRef.current != null && lodash_1.default.isArray(AllRef.current)) {
-            queryRef();
-        }
-        else if (options.api) {
-            queryApi();
-        }
-        else {
-            console.error('list 与　api 到少需要指定一项');
-        }
-    };
-    const setList = (list) => {
-        AllRef.current = list.slice();
-        if (options.pageSize && options.pageSize > 0) {
-            pageToRef.current = { pageNo: 1, pageSize: options.pageSize };
-        }
-        else {
-            pageToRef.current = null;
-        }
         queryRef();
     };
     return Object.assign(Object.assign({}, state), { mode: 'static', query, pageTo, orderBy, setList });

package/package.json

@@ -1 +1 @@
-{"name":"vap1","version":"0.1.5","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
+{"name":"vap1","version":"0.1.6","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}

package/utils/ArrayUtil.js

@@ -43,7 +43,14 @@ exports.add = add;
 */
 const del = (list, ids, rowKey = 'id') => {
     if (lodash_1.default.isArray(ids)) {
-        let toDelete = new Set(ids.map(i => i + ''));
+        let toDelete = new Set(ids.map(id => {
+            if (lodash_1.default.isPlainObject(id)) {
+                return id[rowKey] + '';
+            }
+            else {
+                return id + '';
+            }
+        }));
         return lodash_1.default.filter(list, item => !toDelete.has(item[rowKey] + ''));
     }
     return lodash_1.default.filter(list, item => ids != item[rowKey]);

package/utils/Global.d.ts

@@ -157,7 +157,6 @@ export type GlobalSetting = {
     FORM: {
         /**
          * 表单大小 ，说明： 1.5 版本无效
-         * @deprecated
         */
         SIZE: any;
         /**

package/utils/index.d.ts

@@ -11,9 +11,40 @@ export * as GLOBAL from './Global';
 export * as Renders from './Renders';
 export * as Const from './Const';
 export { default as VAP } from './VAP';
+/**
+ * 路由信息
+*/
 export type Route = {
+    /**
+     * 路径hash ，即url /xxx/#/yyy 井号后面的部分 /yyy
+    */
     path: string;
-    like?: boolean;
+    /**
+     * 是否模糊匹配，相当于 LeftLike,  默认为 false
+     * 若定为ture, 那 /yyy 可以匹配到以 /yyy 开头的路由
+     * 如 /yyy/1 /yyy/a/b/c
+     * 建议与 useEffect([props.patterns]) 配合使用
+    */
+    like?: true;
+    /**
+     * 是否缓存页面，可将页面设置为缓存
+     * 离开页面时，不会触发 unMount，
+     * 第二次进入时，不会触发各种 effect, state 等状态会保留。
+     * 说明，
+     * 1. 不支持 like 为 true 的页面缓存
+     * 2. 缓存页面暂不支持错误判定，请自行写好代码，避免白屏
+     * 3. 仅支持2.0版本，1.5版本无法支持。
+    */
+    /**
+     * 页面组件
+     * 1. 可以为一个 ReactNode, 如 <div></div>
+     * 2. 可以为 {default: ReactComponent} , 如 require('./page/xxx');
+     * 3. 可以为 ()=>Promise<{default: ReactComponent}> , 如 ()=>import('./page/xxx');
+     *
+     * 使用 require/import 写法时，必须导出为 default 如  export default ()=><div></div>
+     * 使用 import 写法时，将会异步加载，必须写成方法形式 如 ()=>　import('./page/xxx'); 不能写成 import('./page/xx');
+     *
+    */
     component: any;
 };
 export declare const registerRoute: (...routes: Route[]) => void;

package/widget/index.d.ts

@@ -16,10 +16,6 @@ export type WidgetProps = {
  * 注册组件选项
  * */
 export type WidgetOptions = {
-    /**
-     * 依赖 JavaScript
-    */
-    requiredJs?: string[];
     /**
      * 依赖 Css
     */