ztxkui 3.1.6 → 3.1.7

package/dist/TableDemo/BasicTable.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author 陈亚雄
+ * @description 基础表格，充当列表
+ */
+import React from 'react';
+declare const BasicTable: React.FC;
+export default BasicTable;

package/dist/TableDemo/BasicTable.js

@@ -0,0 +1,95 @@
+/**
+ * @author 陈亚雄
+ * @description 基础表格，充当列表
+ */
+import React from 'react';
+// redux
+// ztxkui公共组件
+import { Table } from '../index';
+// 路由配置
+// store
+// 自定义组件
+// 其他文件
+import { dataSource } from './data';
+var BasicTable = function () {
+    var columns = [
+        {
+            title: '序号',
+            width: 62,
+            fixed: 'left',
+            key: 'index',
+            render: function (_text, _record, index) { return "" + (index + 1); },
+        },
+        {
+            title: '测试1',
+            width: 100,
+            dataIndex: 'test1',
+            key: 'test1',
+        },
+        {
+            title: '测试2',
+            width: 100,
+            dataIndex: 'test2',
+            key: 'test2',
+        },
+        {
+            title: '测试3',
+            width: 100,
+            dataIndex: 'test3',
+            key: 'test3',
+        },
+        {
+            title: '测试4',
+            width: 100,
+            dataIndex: 'test4',
+            key: 'test4',
+        },
+        {
+            title: '测试5',
+            width: 100,
+            dataIndex: 'test5',
+            key: 'test5',
+        },
+        {
+            title: '测试6',
+            width: 100,
+            dataIndex: 'test6',
+            key: 'test6',
+        },
+        {
+            title: '测试7',
+            width: 100,
+            dataIndex: 'test7',
+            key: 'test7',
+        },
+        {
+            title: '测试8',
+            width: 100,
+            dataIndex: 'test8',
+            key: 'test8',
+        },
+        {
+            title: '测试9',
+            width: 100,
+            dataIndex: 'test9',
+            key: 'test9',
+        },
+        {
+            title: '测试10',
+            width: 100,
+            dataIndex: 'test10',
+            key: 'test10',
+        },
+    ];
+    return (React.createElement("div", null,
+        React.createElement("div", null,
+            "\u57FA\u7840\u5C55\u793A\u8868\u683C\uFF1B",
+            React.createElement("br", null),
+            React.createElement("b", null, "\u52A8\u6001\u5217\u914D\u7F6E\uFF1B"),
+            "\u5982\u679C\u9700\u8981\u7F13\u5B58\u4F4F\u52A8\u6001\u5217\u914D\u7F6E\uFF0C\u9700\u8981\u4F20\u5165showColumnDynamicKey\uFF1B \u8868\u683C\u5185\u90E8\u8FDB\u884C\u4E86\u4F18\u5316\uFF0C\u6570\u636E\u5C06\u5B58\u50A8\u5728\u672C\u5730\u7F13\u5B58\u4E2D\uFF0C\u53EF\u4EE5\u4E0D\u7528\u901A\u8FC7\u5916\u754C\u4F20\u5165\u914D\u7F6E",
+            React.createElement("br", null),
+            React.createElement("b", null, "\u5217\u4F38\u7F29\uFF1B"),
+            "isResizableColumn\u5C5E\u6027\u9ED8\u8BA4\u4E3Atrue\uFF0C\u5982\u679C\u4E0D\u9700\u8981\u5217\u4F38\u7F29\u53EF\u4EE5\u4F20\u5165false"),
+        React.createElement(Table, { dataSource: dataSource, columns: columns, rowKey: "id", showColumnDynamic: true, showColumnDynamicKey: "symbol-id-1" })));
+};
+export default BasicTable;

package/dist/TableDemo/EditableTable.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author 陈亚雄
+ * @description 可编辑表格
+ */
+import React from 'react';
+declare const EditableTable: React.FC;
+export default EditableTable;

package/dist/TableDemo/EditableTable.js

@@ -0,0 +1,336 @@
+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 };
+    }
+};
+/**
+ * @author 陈亚雄
+ * @description 可编辑表格
+ */
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+// redux
+// ztxkui公共组件
+import { Table, EnhanceSelect, Button, message } from '../index';
+// 路由配置
+// store
+// 自定义组件
+// 其他文件
+import update from 'immutability-helper';
+import { dataSource, list1 } from './data';
+var EditableTable = function () {
+    var _a = useState(dataSource), records = _a[0], setRecords = _a[1];
+    var recordsRef = useRef([]);
+    // 初始化渲染，针对配置了editable、editableConfig的列配置
+    var _b = useState(false), firstRender = _b[0], setFirstRender = _b[1];
+    // 新增删除行改变
+    var _c = useState(false), lengthChange = _c[0], setLengthChange = _c[1];
+    // 表格行拖拽改变
+    var _d = useState(false), moveChange = _d[0], setMoveChange = _d[1];
+    // 表格
+    var tableHandleRef = useRef({});
+    // 表格配置
+    var _e = useState({
+        test1: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
+        test2: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
+    }), tableConfig = _e[0], setTableConfig = _e[1];
+    useEffect(function () {
+        setTimeout(function () {
+            setTableConfig({
+                test1: { isChangeable: 1, isDisplay: 1, isRequired: 0 },
+                test2: { isChangeable: 1, isDisplay: 1, isRequired: 0 },
+            });
+        }, 5000);
+    }, []);
+    var columns = [
+        {
+            title: '序号',
+            width: 62,
+            fixed: 'left',
+            key: 'index',
+            render: function (_text, _record, index) { return "" + (index + 1); },
+        },
+        {
+            title: '测试1',
+            width: 100,
+            dataIndex: 'test1',
+            key: 'test1',
+            editable: true,
+            validate: {},
+            shouldCellUpdate: function (record, preRecord) {
+                if (firstRender) {
+                    setFirstRender(false);
+                    return true;
+                }
+                if (lengthChange) {
+                    setLengthChange(false);
+                    return true;
+                }
+                if (moveChange) {
+                    setMoveChange(false);
+                    return true;
+                }
+                return record.test1 !== preRecord.test1;
+            },
+        },
+        {
+            title: '测试2',
+            width: 100,
+            dataIndex: 'test2',
+            key: 'test2',
+            editable: true,
+            editableConfig: {
+                type: 'inputNumber',
+            },
+            validate: {
+                validate: function (value, record, index, title) {
+                    if (value === 102) {
+                        return Promise.reject({
+                            errorFields: [
+                                {
+                                    errors: "\u91C7\u8D2D\u57FA\u672C\u6570\u636E-\u660E\u7EC6\u8868 \u7B2C" + index + "\u884C \u91C7\u8D2D\u4ED8\u6B3E\u6761\u4EF62 \u5FC5\u586B\uFF01",
+                                },
+                            ],
+                        });
+                    }
+                    return Promise.resolve();
+                },
+            },
+            shouldCellUpdate: function (record, preRecord) {
+                if (firstRender) {
+                    setFirstRender(false);
+                    return true;
+                }
+                if (lengthChange) {
+                    setLengthChange(false);
+                    return true;
+                }
+                if (moveChange) {
+                    setMoveChange(false);
+                    return true;
+                }
+                return record.test2 !== preRecord.test2;
+            },
+        },
+        {
+            title: '测试3',
+            width: 100,
+            dataIndex: 'test3',
+            key: 'test3',
+            shouldCellUpdate: function (record, preRecord) {
+                if (lengthChange) {
+                    setLengthChange(false);
+                    return true;
+                }
+                if (moveChange) {
+                    setMoveChange(false);
+                    return true;
+                }
+                return record.test3 !== preRecord.test3;
+            },
+            validate: {},
+            render: function (text, record, index) {
+                return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", dropdownMatchSelectWidth: 130, onChange: function (value, option, fullData) {
+                        tableHandleRef.current.clearErrorClass(index);
+                        var newRecord = {
+                            test3: value,
+                            test3Name: fullData === null || fullData === void 0 ? void 0 : fullData.name,
+                        };
+                        onEditableSaveHandle(newRecord, index);
+                    } }));
+            },
+        },
+        {
+            title: '测试4',
+            width: 100,
+            dataIndex: 'test4',
+            key: 'test4',
+        },
+        {
+            title: '测试5',
+            width: 100,
+            dataIndex: 'test5',
+            key: 'test5',
+        },
+        {
+            title: '测试6',
+            width: 100,
+            dataIndex: 'test6',
+            key: 'test6',
+        },
+        {
+            title: '测试7',
+            width: 100,
+            dataIndex: 'test7',
+            key: 'test7',
+        },
+        {
+            title: '测试8',
+            width: 100,
+            dataIndex: 'test8',
+            key: 'test8',
+        },
+        {
+            title: '测试9',
+            width: 100,
+            dataIndex: 'test9',
+            key: 'test9',
+        },
+        {
+            title: '测试10',
+            width: 100,
+            dataIndex: 'test10',
+            key: 'test10',
+        },
+    ];
+    // 初始化渲染，针对配置了editable、editableConfig的列配置
+    useEffect(function () {
+        setFirstRender(true);
+    }, []);
+    // 将表格最新数据赋值给ref引用
+    useEffect(function () {
+        recordsRef.current = records;
+    }, [records]);
+    // 表格数据改变相关
+    var onEditableSaveHandle = useCallback(function (record, index, _dataIndex) {
+        var _a;
+        if (_dataIndex === void 0) { _dataIndex = ''; }
+        if (typeof index === 'number') {
+            var newRecords = recordsRef.current.slice();
+            var item = newRecords[index];
+            newRecords.splice(index, 1, _dataIndex
+                ? __assign(__assign(__assign({}, record), item), (_a = {}, _a[_dataIndex] = record[_dataIndex], _a)) : __assign(__assign({}, item), record));
+            setRecords(newRecords);
+        }
+    }, [setRecords]);
+    // 新增删除行
+    var onAddAndDelHandle = useCallback(function (type, index) {
+        var newRecords = recordsRef.current.slice();
+        if (type === 'add') {
+            var newItem = __assign(__assign({}, newRecords[index]), { _isNewData: true, id: Date.now() + "-" + index });
+            newRecords.splice(index + 1, 0, newItem);
+            setRecords(newRecords);
+            setLengthChange(true);
+        }
+        else if (type === 'del') {
+            if (newRecords.length === 1) {
+                newRecords.splice(index, 1, {
+                    _isNewData: true,
+                    id: Date.now() + "-" + index,
+                });
+            }
+            else {
+                newRecords.splice(index, 1);
+            }
+            setRecords(newRecords);
+            setLengthChange(true);
+        }
+    }, [setRecords]);
+    // 表格拖拽排序功能函数
+    var onMoveRowHandle = useCallback(function (dragIndex, hoverIndex) {
+        var newRecords = recordsRef.current.slice();
+        var dragRow = newRecords[dragIndex];
+        var newDataSource = update(newRecords, {
+            $splice: [
+                [dragIndex, 1],
+                [hoverIndex, 0, dragRow],
+            ],
+        });
+        setRecords(newDataSource);
+        setMoveChange(true);
+    }, [setRecords]);
+    return (React.createElement("div", null,
+        React.createElement("div", null,
+            "\u53EF\u7F16\u8F91\u8868\u683C\uFF1B\u5982\u679C\u662F\u8F93\u5165\u6846\uFF0C\u53EF\u4F7F\u7528\u8868\u683C\u9ED8\u8BA4\u63D0\u4F9B\u7684\u7F16\u8F91\u6846\uFF1B \u914D\u7F6Eeditable\u4E3Atrue\u5373\u53EF\uFF0C\u8FD8\u53EF\u914D\u7F6EeditableConfig\u914D\u7F6E\u6267\u884C\u7C7B\u578B\u7B49\uFF1B\u5177\u4F53editableConfig\u53EF\u67E5\u770B\u8BE6\u7EC6\u7B7E\u540D",
+            React.createElement("br", null),
+            React.createElement("b", null, "\u5BF9\u4E8E\u914D\u7F6E\u4E86\u7F16\u8F91\u7684\u8868\u683C\uFF0C\u4E00\u5B9A\u8981\u4F7F\u7528SCU\u6765\u4F18\u5316\u8868\u683C\u6E32\u67D3\uFF0C\u6B64\u4E3E\u53EF\u4EE5\u4F18\u5316\u8868\u683C\u6E32\u67D3"),
+            React.createElement("br", null),
+            React.createElement("b", null, "\u5982\u679C\u914D\u7F6E\u4E86editable\uFF0C\u5E76\u4E14\u914D\u7F6E\u4E86SCU\u6765\u4F18\u5316\u6E32\u67D3\uFF0C\u90A3\u4E48\u521D\u59CB\u5316\u7684\u65F6\u5019\u9700\u8981\u7528\u4E00\u4E2A\u53D8\u91CF\u6807\u8BC6\u9996\u6B21\u9700\u8981\u6E32\u67D3"),
+            React.createElement("br", null),
+            React.createElement("b", null, "\u65B0\u589E\u5220\u9664\u884C\uFF0C\u8868\u683C\u62D6\u62FD\u6392\u5E8F\uFF1B"),
+            "\u5BF9\u4E8E\u914D\u7F6E\u4E86SCU\u7684\u5217\uFF0C\u9700\u8981\u5728\u65B0\u589E\u5220\u9664\u7684\u65F6\u5019\u91CD\u65B0\u6E32\u67D3\uFF0C\u901A\u8FC7\u8BBE\u7F6Estate\u6807\u8BC6",
+            React.createElement("br", null),
+            React.createElement("b", null, "\u8868\u683C\u81EA\u5B9A\u4E49\u9A8C\u8BC1\uFF0C\u4F20\u5165tableHandleRef\u4E00\u4E2ARef\u5BF9\u8C61\uFF0C\u53EF\u83B7\u53D6\u8868\u683C\u63D0\u4F9B\u76F8\u5173\u65B9\u6CD5"),
+            React.createElement("p", null, "1.\u7F16\u5199\u9A8C\u8BC1\u89C4\u5219\uFF0C\u5728\u5217\u91CC\u9762\u7F16\u5199\uFF0C\u901A\u8FC7\u4F20\u5165validate\u5C5E\u6027\u914D\u7F6E,\u5177\u4F53\u53EF\u67E5\u770B\u7B7E\u540D \u5982\u679C\u53EA\u662F\u7B80\u5355\u7684\u975E\u7A7A\u9A8C\u8BC1\uFF0C\u90A3\u4E48\u53EF\u4F20\u5165\u4E00\u4E2A\u7A7A\u5BF9\u8C61\u5373\u53EF \u5982\u679C\u662F\u590D\u6742\u9A8C\u8BC1\u53EF\u901A\u8FC7validate\u4F20\u5165\u66F4\u591A\u914D\u7F6E"),
+            React.createElement("p", null, "2.\u5982\u679C\u4F20\u5165\u4E86\u81EA\u5B9A\u4E49render\u51FD\u6570\uFF0C\u7EC4\u4EF6\u65E0\u6CD5\u638C\u63E1\u5728\u4F55\u65F6\u6E05\u7A7A\u9519\u8BEF\u4FE1\u606F\uFF0C\u6240\u4EE5\u9700\u8981\u8C03\u7528\u65B9\u4E3B\u52A8\u6E05\u7A7A\u9519\u8BEF\u4FE1\u606F")),
+        React.createElement(Button, { onClick: function () {
+                (function () {
+                    var _a;
+                    return __awaiter(this, void 0, void 0, function () {
+                        var err_1, errorFields;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    _b.trys.push([0, 2, , 3]);
+                                    return [4 /*yield*/, ((_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.validate())];
+                                case 1:
+                                    _b.sent();
+                                    return [3 /*break*/, 3];
+                                case 2:
+                                    err_1 = _b.sent();
+                                    console.log(err_1);
+                                    errorFields = err_1.errorFields;
+                                    if (errorFields) {
+                                        message.warning(errorFields[0].errors + '');
+                                    }
+                                    return [3 /*break*/, 3];
+                                case 3: return [2 /*return*/];
+                            }
+                        });
+                    });
+                })();
+            } }, "\u9A8C\u8BC1"),
+        React.createElement(Table, { dataSource: records, columns: columns, rowKey: "id", 
+            // 表格项可输入
+            onEditableSave: onEditableSaveHandle, 
+            // 新增删除行
+            onAddAndDelHandle: onAddAndDelHandle, 
+            // 表格行拖拽
+            onMoveRow: onMoveRowHandle, 
+            // tableValidate
+            tableHandleRef: tableHandleRef, tableName: "\u6211\u662F\u4E00\u4E2A\u8868\u683C", 
+            // 显隐配置
+            configInfo: tableConfig })));
+};
+export default EditableTable;

package/dist/TableDemo/data.d.ts

@@ -0,0 +1,17 @@
+export declare const dataSource: {
+    id: string;
+    test1: string;
+    test2: number;
+    test3: string;
+    test4: string;
+    test5: string;
+    test6: string;
+    test7: string;
+    test8: string;
+    test9: string;
+    test10: string;
+}[];
+export declare const list1: {
+    name: string;
+    id: string;
+}[];

package/dist/TableDemo/data.js

@@ -0,0 +1,57 @@
+export var dataSource = new Array(10).fill(1).map(function (item, index) {
+    return {
+        id: "test-" + index,
+        test1: "test1-" + index,
+        test2: index + 100,
+        test3: "test3-" + index,
+        test4: "test4-" + index,
+        test5: "test5-" + index,
+        test6: "test6-" + index,
+        test7: "test7-" + index,
+        test8: "test8-" + index,
+        test9: "test9-" + index,
+        test10: "test10-" + index,
+    };
+});
+export var list1 = [
+    {
+        name: '张三',
+        id: 'test3-0',
+    },
+    {
+        name: '李四',
+        id: 'test3-1',
+    },
+    {
+        name: '王五',
+        id: 'test3-2',
+    },
+    {
+        name: '赵六',
+        id: 'test3-3',
+    },
+    {
+        name: '张飞',
+        id: 'test3-4',
+    },
+    {
+        name: '赵云',
+        id: 'test3-5',
+    },
+    {
+        name: '刘备',
+        id: 'test3-6',
+    },
+    {
+        name: '关羽',
+        id: 'test3-7',
+    },
+    {
+        name: '曹操',
+        id: 'test3-8',
+    },
+    {
+        name: '诸葛亮',
+        id: 'test3-9',
+    },
+];

package/dist/TableDemo/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author 陈亚雄
+ * @description
+ */
+import React from 'react';
+declare const TableDemo: React.FC;
+export default TableDemo;

package/dist/TableDemo/index.js

@@ -0,0 +1,19 @@
+/**
+ * @author 陈亚雄
+ * @description
+ */
+import React from 'react';
+// redux
+// ztxkui公共组件
+// 路由配置
+// store
+// 自定义组件
+import BasicTable from './BasicTable';
+import EditableTable from './EditableTable';
+// 其他文件
+var TableDemo = function () {
+    return (React.createElement("div", null,
+        React.createElement(BasicTable, null),
+        React.createElement(EditableTable, null)));
+};
+export default TableDemo;

package/dist/components/Table/hooks/useColumns.js

@@ -82,6 +82,9 @@ function useColumns(props) {
                         ((_b = configInfo[dataIndex]) === null || _b === void 0 ? void 0 : _b.isRequired) === '1') {
                         _column.required = true;
                     }
+                    else {
+                        _column.validate = undefined;
+                    }
                     // 如果没有配置，或者配置isDisplay为存在
                     if (!configInfo[dataIndex] ||
                         ((_c = configInfo[dataIndex]) === null || _c === void 0 ? void 0 : _c.isDisplay) === 1 ||

package/dist/index.js

@@ -22,6 +22,7 @@
 // import PrintDemo from './DemoCom/PrintDemo';
 // import PrintContainerDemo from './DemoCom/PrintContainerDemo';
 // import SinaturesDemo from './DemoCom/SinaturesDemo';
+// import TableDemoAll from './TableDemo';
 // dayjs.locale(zhCn);
 // ReactDOM.render(
 //   // <React.StrictMode>
@@ -70,6 +71,9 @@
 //         <Route exact path="/print-container">
 //           <PrintContainerDemo />
 //         </Route>
+//         <Route exact path="/tableall">
+//           <TableDemoAll />
+//         </Route>
 //         <Route exact path="/table-analyse">
 //           <TableAnalyse />
 //         </Route>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",