ztxkui 4.2.18-76 → 4.2.18-77

package/dist/UI/Form/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Home(): JSX.Element;
+export default Home;

package/dist/UI/Form/index.js

@@ -0,0 +1,346 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+import React, { useState, useMemo, useEffect } from 'react';
+import ProForm, { useForm } from 'components/ProForm';
+import { Input, Button, Radio, EnhanceSelect, Select, Checkbox, TreeSelect, } from '../../index';
+import { stringify } from 'qs';
+import { token } from '../../constants';
+var initialValues = {
+    test1: 111,
+    test11: 222,
+    test22: 4444,
+    test5: '1',
+};
+var configInfo = {
+    test1: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+    test11: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+    test2: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+};
+function request(options) {
+    return fetch(options.url + "?" + stringify(options.params), {
+        headers: {
+            'Zmdms-Auth': "bearer " + token,
+        },
+        method: options.method,
+    }).then(function (response) { return response.json(); });
+}
+function Home() {
+    var _this = this;
+    var form = useForm()[0];
+    var _a = useState(1), state = _a[0], setState = _a[1];
+    var _b = useState({}), formData = _b[0], setFormData = _b[1];
+    var _c = useState('1'), status = _c[0], setStatus = _c[1];
+    var configInfoMemo = useMemo(function () {
+        return __assign(__assign({}, configInfo), { test1: __assign(__assign({}, configInfo.test1), { isChangeable: status === '1' ? true : false }), test2: __assign(__assign({}, configInfo.test2), { isChangeable: status === '1' ? true : false }) });
+    }, [status]);
+    useEffect(function () {
+        form.setFieldsValue(formData);
+    }, [form, formData]);
+    var items = __spreadArray([
+        {
+            name: 'test1',
+            label: '测试1',
+            isRequired: true,
+            render: function (itemProps) {
+                // console.log('测试1', state);
+                return (React.createElement(Input, __assign({}, itemProps, { allowClear: true })));
+            },
+        },
+        {
+            name: 'test11',
+            label: '测试11',
+            rules: [
+                {
+                    required: true,
+                    message: '测试11必填',
+                },
+            ],
+            render: function (itemProps) { return (React.createElement(Input, __assign({}, itemProps, { allowClear: true, onChange: function (e) {
+                    setFormData(function (preData) {
+                        return __assign(__assign({}, preData), { test11: e.target.value });
+                    });
+                }, isAsrInput: true }))); },
+        },
+        {
+            name: 'test2',
+            label: '测试2',
+            dependencies: ['test1'],
+            isRequired: true,
+            render: function (itemProps, formInstance) {
+                // console.log('测试2 渲染');
+                return React.createElement(Input.TextArea, __assign({}, itemProps, { isAsrInput: true }));
+            },
+        },
+        {
+            name: 'test22',
+            label: '测试22',
+            dependencies: ['test1'],
+            isChangeable: false,
+            render: function (itemProps, formInstance) {
+                // console.log(formInstance?.getFieldsValue());
+                return React.createElement(Input, __assign({}, itemProps, { allowClear: true }));
+            },
+        },
+        {
+            name: 'test23',
+            label: '测试23',
+            noLabel: true,
+            render: function (itemProps, formInstance) {
+                return (React.createElement(Radio.Group
+                // onChange={(e) => {
+                //   setStatus(e.target.value);
+                // }}
+                , null,
+                    React.createElement(Radio, { value: "1" }, "\u4F60\u597D"),
+                    React.createElement(Radio, { value: "2" }, "\u518D\u89C1")));
+            },
+        },
+        {
+            name: 'test3',
+            label: '测试3',
+            shouldUpdateNames: ['test23'],
+            isDisplay: function (form) {
+                console.log(form, form.getFieldValue('test23'));
+                return form.getFieldValue('test23') === '1';
+            },
+            render: function (itemProps, formInstance) {
+                return React.createElement(Input, __assign({}, itemProps));
+            },
+        },
+        {
+            name: 'test4',
+            label: '测试4',
+            isRequired: true,
+            render: function (itemProps, formInstance) {
+                return (React.createElement(EnhanceSelect, __assign({}, itemProps, { list: [
+                        { id: '1', name: '小明' },
+                        { id: '2', name: '小虎' },
+                        { id: '3', name: '小明' },
+                        { id: '4', name: '小虎' },
+                        { id: '5', name: '小明' },
+                        { id: '6', name: '小虎' },
+                        { id: '7', name: '小明' },
+                        { id: '8', name: '小虎' },
+                        { id: '9', name: '小明' },
+                        { id: '10', name: '小虎' },
+                        { id: '11', name: '小明' },
+                        { id: '21', name: '小虎' },
+                        { id: '31', name: '小明' },
+                        { id: '41', name: '小虎' },
+                        { id: '51', name: '小明' },
+                        { id: '61', name: '小虎' },
+                        { id: '71', name: '小明' },
+                        { id: '81', name: '小虎' },
+                        { id: '91', name: '小明' },
+                        { id: '101', name: '小虎' },
+                    ], mode: "multiple", allowClear: true })));
+            },
+        },
+        {
+            name: 'test444',
+            label: '测试444',
+            isRequired: true,
+            render: function (itemProps, formInstance) {
+                return (React.createElement(TreeSelect, __assign({}, itemProps, { treeData: [
+                        { key: '1', title: '小明' },
+                        { key: '2', title: '小虎' },
+                        { key: '3', title: '小明' },
+                        { key: '4', title: '小虎' },
+                        { key: '5', title: '小明' },
+                        { key: '6', title: '小虎' },
+                        { key: '7', title: '小明' },
+                        { key: '8', title: '小虎' },
+                        { key: '9', title: '小明' },
+                        { key: '10', title: '小虎' },
+                        { key: '11', title: '小明' },
+                        { key: '21', title: '小虎' },
+                        { key: '31', title: '小明' },
+                        { key: '41', title: '小虎' },
+                        { key: '51', title: '小明' },
+                        { key: '61', title: '小虎' },
+                        { key: '71', title: '小明' },
+                        { key: '81', title: '小虎' },
+                        { key: '91', title: '小明' },
+                        { key: '101', title: '小虎' },
+                    ], treeCheckable: true, allowClear: true })));
+            },
+        },
+        {
+            name: 'test5',
+            label: '测试5',
+            isRequired: true,
+            render: function (itemProps, formInstance) {
+                return (React.createElement(EnhanceSelect, { placeholder: "\u4E00\u6B21\u6027\u52A0\u8F7D\u6570\u636E", request: request, isCatch: true, dataKey: "id", titleKey: "name", url: "http://192.168.0.83:8000/api/zmdms-scm-accounting/advancepaymentoverdue/getOveStatusEnum", method: "GET" }));
+            },
+        },
+        {
+            name: 'test6',
+            label: '测试6',
+            isRequired: true,
+            render: function (itemProps, formInstance) {
+                // console.log('测试6', state);
+                return (React.createElement(Select, __assign({}, itemProps, { allowClear: true }),
+                    React.createElement(Select.Option, { value: "1" }, "\u4F60\u597D")));
+            },
+        },
+        {
+            name: 'test7',
+            label: '测试7',
+            isRequired: true,
+            noLabel: true,
+            render: function (itemProps, formInstance) {
+                return React.createElement(Input, __assign({}, itemProps));
+            },
+        },
+        {
+            name: 'test8',
+            label: '测试8',
+            isRequired: true,
+            noLabel: true,
+            render: function (itemProps, formInstance) {
+                return (React.createElement(Checkbox.Group, __assign({}, itemProps),
+                    React.createElement(Checkbox, { value: "1" }, "\u662F"),
+                    React.createElement(Checkbox, { value: "2" }, "\u5426")));
+            },
+        },
+        {
+            name: 'test9',
+            label: '测试9',
+            isRequired: true,
+            valuePropName: 'checked',
+            noLabel: true,
+            showBoxBorder: true,
+            render: function (itemProps, formInstance) {
+                return React.createElement(Checkbox, null, "\u662F");
+            },
+        },
+        {
+            name: 'test11',
+            label: '测试11',
+            render: function (itemProps, formInstance) {
+                return React.createElement(Input.TextArea, __assign({}, itemProps));
+            },
+        }
+    ], new Array(10).fill(1).map(function (item, index) {
+        return {
+            name: 'test6' + index,
+            label: '测试6' + index,
+            isRequired: true,
+            preText: React.createElement("span", null, "\u4F60\u597D\u00A0\u00A0\u00A0"),
+            render: function (itemProps, formInstance) {
+                // console.log('测试6' + index, state);
+                return (React.createElement(Select, __assign({}, itemProps, { allowClear: true }),
+                    React.createElement(Select.Option, { value: "1" }, "\u4F60\u597D")));
+            },
+        };
+    }));
+    // }, [state]);
+    // const outsideState = useMemo(() => {
+    //   return {
+    //     state,
+    //   };
+    // }, [state]);
+    var searchHandle = function () {
+        console.log('searchHandle', form.getFieldsValue());
+    };
+    var resetHandle = function () {
+        form.resetFields();
+    };
+    console.log('rerender');
+    return (React.createElement("div", null,
+        React.createElement(ProForm, { form: form, items: items, initialValues: initialValues, showDynamic: true, showDynamicKey: "my-coco", configInfo: configInfoMemo, 
+            // outsideState={outsideState}
+            rightWrapVisible: true, onSearchHandle: searchHandle, onResetHandle: resetHandle }),
+        React.createElement(Button, { onClick: function () {
+                setState(state + 1);
+                console.log(form.getFieldsValue());
+            } },
+            "\u83B7\u53D6",
+            state),
+        React.createElement(Button, { onClick: function () {
+                console.log(formData);
+                console.log(form.getFieldsValue());
+            } }, "\u83B7\u53D6\u8868\u5355\u6570\u636E"),
+        React.createElement(Button, { onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                var err_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, form.validateFields()];
+                        case 1:
+                            _a.sent();
+                            console.log(form.getFieldsValue());
+                            return [3 /*break*/, 3];
+                        case 2:
+                            err_1 = _a.sent();
+                            console.log(err_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); } }, "\u9A8C\u8BC1")));
+}
+export default Home;

package/dist/UI/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function UIComponent(): JSX.Element;

package/dist/UI/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link, Switch, Route } from 'react-router-dom';
+import Form from './Form';
+export default function UIComponent() {
+    return (React.createElement("div", { style: { padding: '10px' } },
+        React.createElement(Link, { to: "/ui/form", style: { marginRight: '10px' } }, "\u8868\u5355"),
+        React.createElement(Switch, null,
+            React.createElement(Route, { path: "/ui/form" },
+                React.createElement(Form, null)))));
+}

package/dist/components/ProForm/hooks.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { ISearchLayout, IFormItem } from './interface';
+export declare function getCurrentDynamicItems(showDynamic?: boolean, showDynamicKey?: string, items?: IFormItem[]): ISearchLayout[];
+/**
+ * @description 将动态配置存在本地存储中
+ * @param dynamicStorageKey 保留的key值
+ * @param value 值
+ */
+export declare function setDynamicKey(dynamicStorageKey: string, value: any): void;
+export declare function useDynamic(showDynamic?: boolean, showDynamicKey?: string, items?: IFormItem[]): {
+    initDynamicList: ISearchLayout[];
+    currentDynamicList: ISearchLayout[];
+    setCurrentDynamicList: import("react").Dispatch<import("react").SetStateAction<ISearchLayout[]>>;
+    currentItems: IFormItem[];
+};
+export declare function getItems(currentDynamicList: ISearchLayout[], items: IFormItem[]): IFormItem[];
+export declare function useDrawer(initList: any, setCurrentDynamicList: any, showDynamicKey: any): {
+    visible: boolean;
+    setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onClose: () => void;
+    onReset: () => void;
+    onSure: (newList: ISearchLayout[]) => void;
+};

package/dist/components/ProForm/hooks.js

@@ -0,0 +1,209 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo, useState, useCallback, useEffect } from 'react';
+/**
+ * 获取动态列配置相关信息
+ */
+// 搜索表单存储位置信息key
+var LOCALSTORAGE_KEY = 'ztui_dynamic-form-key_key';
+// 搜索表单LRU排序规则key
+var LOCALSTORAGE_LRU_KEY = 'ztui_dynamic-form-key_lru_key';
+// 搜索表单存储表单最大长度
+var LOCALSTORAGE_LRU_MAX_SIZE = 500;
+export function getCurrentDynamicItems(showDynamic, showDynamicKey, items) {
+    if (showDynamic && showDynamicKey && Array.isArray(items)) {
+        // 从storage中取到历史数据
+        var dynamicList = [];
+        try {
+            var obj = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY) || '{}') || {};
+            dynamicList = obj[showDynamicKey];
+        }
+        catch (err) {
+            console.log(err);
+        }
+        var currentDynamicList_1 = Array.isArray(dynamicList) && dynamicList.length > 0 ? dynamicList : [];
+        // 如果缓存中没值的话，那么直接取当前配置相关字段
+        if (!dynamicList || dynamicList.length === 0) {
+            items.forEach(function (item) {
+                var name = item.name, label = item.label, disabled = item.disabled, dynamicDisabled = item.dynamicDisabled, hiddenLabel = item.hiddenLabel;
+                var result = {
+                    name: name,
+                    label: label,
+                    disabled: disabled,
+                    dynamicDisabled: dynamicDisabled,
+                    hiddenLabel: hiddenLabel,
+                    show: true,
+                };
+                currentDynamicList_1.push(__assign(__assign({}, result), { isFind: true }));
+            });
+        }
+        else {
+            items.forEach(function (item, index) {
+                var name = item.name, label = item.label, disabled = item.disabled, dynamicDisabled = item.dynamicDisabled, hiddenLabel = item.hiddenLabel;
+                var result = {
+                    name: name,
+                    label: label,
+                    disabled: disabled,
+                    dynamicDisabled: dynamicDisabled,
+                    hiddenLabel: hiddenLabel,
+                    show: true,
+                };
+                // 将最新的名字等同步
+                // 如果之前有数据，那么需要验证数据的准确性，比如修改了名字但是key没替换
+                var currentData = currentDynamicList_1.find(function (currentDynamic) { return currentDynamic.name === name; });
+                if (currentData) {
+                    currentData.label = label;
+                    currentData.disabled = disabled;
+                    currentData.dynamicDisabled = dynamicDisabled;
+                    currentData.hiddenLabel = hiddenLabel;
+                    currentData.isFind = true; // 代表当前这个字段被找到
+                }
+                else {
+                    // 没有从之前的字段中被找到的话，说明是业务新增的 需要添加上
+                    currentDynamicList_1.push(__assign(__assign({}, result), { isFind: true }));
+                }
+            });
+        }
+        return currentDynamicList_1
+            .filter(function (item) { return item.isFind; })
+            .map(function (item) {
+            var result = __assign({}, item);
+            Reflect.deleteProperty(result, 'isFind');
+            return result;
+        });
+    }
+    return [];
+}
+/**
+ * @description 将动态配置存在本地存储中
+ * @param dynamicStorageKey 保留的key值
+ * @param value 值
+ */
+export function setDynamicKey(dynamicStorageKey, value) {
+    var obj = {};
+    var lruKeys = [];
+    try {
+        obj = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY) || '{}') || {};
+        lruKeys =
+            JSON.parse(localStorage.getItem(LOCALSTORAGE_LRU_KEY) || '[]') || [];
+    }
+    catch (err) {
+        console.error(err);
+    }
+    // 需要初始化lru排序数据
+    if (lruKeys.length !== Object.keys(obj).length) {
+        lruKeys = Object.keys(obj);
+    }
+    // 设置值之前，先判断是否满足LRU条件,最后面的最新鲜
+    var currentKeyIndex = lruKeys.findIndex(function (lruKey) { return lruKey === dynamicStorageKey; });
+    // 如果新增key本身就在原keys里面，那删除原key，将原key添加最新鲜的位置
+    // 如果不在原keys里面，那么直接添加到最新鲜的位置
+    if (currentKeyIndex !== -1) {
+        lruKeys.splice(currentKeyIndex, 1);
+        lruKeys.push(dynamicStorageKey);
+    }
+    else {
+        lruKeys.push(dynamicStorageKey);
+    }
+    var length = lruKeys.length;
+    // 长度是否有问题
+    // 如果长度大于最大可存储长度，那么删除最老旧的元素
+    // 把对象里面存储的最老旧元素清除
+    if (length > LOCALSTORAGE_LRU_MAX_SIZE) {
+        var oldKey = lruKeys.shift();
+        try {
+            delete obj[oldKey];
+        }
+        catch (err) {
+            //
+        }
+    }
+    obj[dynamicStorageKey] = value;
+    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(obj));
+    localStorage.setItem(LOCALSTORAGE_LRU_KEY, JSON.stringify(lruKeys));
+}
+export function useDynamic(showDynamic, showDynamicKey, items) {
+    var initDynamicList = useMemo(function () {
+        if (Array.isArray(items)) {
+            return items.map(function (item) {
+                var name = item.name, label = item.label, disabled = item.disabled, dynamicDisabled = item.dynamicDisabled, hiddenLabel = item.hiddenLabel;
+                var result = {
+                    name: name,
+                    label: label,
+                    disabled: disabled,
+                    dynamicDisabled: dynamicDisabled,
+                    hiddenLabel: hiddenLabel,
+                    show: true,
+                };
+                return result;
+            });
+        }
+        return [];
+    }, [items]);
+    var currentDynamicListMemo = useMemo(function () {
+        return getCurrentDynamicItems(showDynamic, showDynamicKey, items);
+    }, [showDynamic, showDynamicKey, items]);
+    var _a = useState(currentDynamicListMemo), currentDynamicList = _a[0], setCurrentDynamicList = _a[1];
+    useEffect(function () {
+        if (currentDynamicListMemo) {
+            setCurrentDynamicList(currentDynamicListMemo);
+        }
+    }, [currentDynamicListMemo]);
+    var currentItems = useMemo(function () {
+        return getItems(currentDynamicList, items || []);
+    }, [currentDynamicList, items]);
+    return {
+        initDynamicList: initDynamicList,
+        currentDynamicList: currentDynamicList,
+        setCurrentDynamicList: setCurrentDynamicList,
+        currentItems: currentItems,
+    };
+}
+export function getItems(currentDynamicList, items) {
+    if (currentDynamicList.length > 0 && items) {
+        var resultItems_1 = [];
+        currentDynamicList.forEach(function (currentDynamicItem) {
+            var name = currentDynamicItem.name, show = currentDynamicItem.show;
+            var result = items.find(function (item) { return item.name === name; });
+            if (result && show) {
+                resultItems_1.push(result);
+            }
+        });
+        return resultItems_1;
+    }
+    return items;
+}
+export function useDrawer(initList, setCurrentDynamicList, showDynamicKey) {
+    var _a = useState(false), visible = _a[0], setVisible = _a[1];
+    var onClose = useCallback(function () {
+        setVisible(false);
+    }, []);
+    /**重置 */
+    var onReset = useCallback(function () {
+        setVisible(false);
+        setCurrentDynamicList(initList);
+        setDynamicKey(showDynamicKey, initList);
+    }, [initList, setCurrentDynamicList, showDynamicKey]);
+    /**确定修改 */
+    var onSure = useCallback(function (newList) {
+        setVisible(false);
+        setCurrentDynamicList(newList);
+        setDynamicKey(showDynamicKey, newList);
+    }, [setCurrentDynamicList, showDynamicKey]);
+    return {
+        visible: visible,
+        setVisible: setVisible,
+        onClose: onClose,
+        onReset: onReset,
+        onSure: onSure,
+    };
+}

package/dist/components/ProForm/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IProFormProps } from './interface';
+declare function ProForm(props: IProFormProps): JSX.Element;
+export declare const useForm: typeof import("antd/lib/form/Form").useForm;
+declare const _default: React.MemoExoticComponent<typeof ProForm>;
+export default _default;