ztxkui 2.4.2 → 2.4.5

package/dist/DemoCom/TableDemo.js

@@ -17,6 +17,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import Table from 'components/Table';
 import EnhanceSelect from 'components/EnhanceSelect';
+import TestCom from './TestCom';
 import { DatePicker } from 'index';
 import dayjs from 'dayjs';
 import update from 'immutability-helper';
@@ -108,6 +109,173 @@ export var getTableLayoutFullData = function (columns, tableLayout) {
     }
     return columns;
 };
+var list1 = [
+    {
+        id: '010101',
+        name: '重轨',
+        aboutField: {
+            // 品名
+            brand: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: ' ', // 连接符
+            },
+            // 材质
+            texture: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: ' ', // 连接符
+            },
+            // 规格,一个产品层次可能对应多个规格
+            specifications: [
+                {
+                    title: '单位重量',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: 'kg/m',
+                    connector: '*', // 连接符
+                },
+                {
+                    title: '长度',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: 'm',
+                    connector: null, // 连接符
+                },
+            ],
+            // 产地
+            placesteel: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: null, // 连接符
+            },
+            // 型号
+            model: null,
+        },
+    },
+    {
+        id: '010102',
+        name: '轻轨',
+        aboutField: {
+            // 品名
+            brand: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: ' ', // 连接符
+            },
+            // 材质
+            texture: null,
+            // 规格,一个产品层次可能对应多个规格
+            specifications: [
+                {
+                    title: '单位重量',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: 'kg/m',
+                    connector: '*', // 连接符
+                },
+                {
+                    title: '长度',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: 'm',
+                    connector: null, // 连接符
+                },
+            ],
+            // 产地
+            placesteel: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: null, // 连接符
+            },
+            // 型号
+            model: null,
+        },
+    },
+    {
+        id: '010203',
+        name: '角钢',
+        aboutField: {
+            // 品名
+            brand: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: ' ', // 连接符
+            },
+            // 材质
+            texture: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: null, // 连接符
+            },
+            // 规格,一个产品层次可能对应多个规格
+            specifications: [
+                {
+                    title: '边宽度1',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: null,
+                    connector: '*',
+                    valueType: 'select',
+                    source: '/api/test/111',
+                },
+                {
+                    title: '边宽度2',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: null,
+                    connector: '*', // 连接符
+                },
+                {
+                    title: '边厚度',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: 'mm',
+                    connector: ' ', // 连接符
+                },
+                {
+                    title: '长度',
+                    isRequired: 1,
+                    addonBefore: null,
+                    addonAfter: null,
+                    unit: 'm',
+                    connector: '', // 连接符
+                },
+            ],
+            // 产地
+            placesteel: {
+                isRequired: 1,
+                addonBefore: null,
+                addonAfter: null,
+                unit: null,
+                connector: ' ', // 连接符
+            },
+            // 型号
+            model: null,
+        },
+    },
+];
 var TableDemo = function () {
     var _a = useGetTableRecords(), records = _a.records, setRecords = _a.setRecords;
     var _b = useGetSelectList(), list = _b.list, loading = _b.loading, setLoading = _b.setLoading;
@@ -136,6 +304,61 @@ var TableDemo = function () {
             key: 'index',
             render: function (_text, _record, index) { return "" + (index + 1); },
         },
+        {
+            title: '产品层次',
+            width: 100,
+            dataIndex: 'key2',
+            key: 'key2',
+            shouldCellUpdate: function (record, preRecord) {
+                console.log('key2render');
+                if (lengthChange) {
+                    setLengthChange(false);
+                    return true;
+                }
+                if (moveChange) {
+                    setMoveChange(false);
+                    return true;
+                }
+                return record.key2 !== preRecord.key2;
+            },
+            render: function (text, record, index) {
+                return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", onChange: function (value, option, fullData) {
+                        var newRecord = {
+                            key2: value,
+                            key2Name: fullData === null || fullData === void 0 ? void 0 : fullData.name,
+                            aboutField: fullData === null || fullData === void 0 ? void 0 : fullData.aboutField,
+                        };
+                        onEditableSaveHandle(newRecord, index);
+                    } }));
+            },
+        },
+        {
+            title: '物料选择相关',
+            width: 700,
+            dataIndex: 'key1',
+            key: 'key1',
+            shouldCellUpdate: function (record, preRecord) {
+                if (lengthChange) {
+                    setLengthChange(false);
+                    return true;
+                }
+                if (moveChange) {
+                    setMoveChange(false);
+                    return true;
+                }
+                return record.key1 !== preRecord.key1 || record.key2 !== preRecord.key2;
+            },
+            render: function (text, record, index) {
+                var aboutField;
+                try {
+                    aboutField = JSON.stringify(record === null || record === void 0 ? void 0 : record.aboutField);
+                }
+                catch (err) {
+                    console.log(err);
+                }
+                return React.createElement(TestCom, { aboutField: aboutField, controleType: "hide" });
+            },
+        },
         {
             title: '测试字段1',
             width: 120,
@@ -381,7 +604,7 @@ var TableDemo = function () {
             // 新增删除行
             onAddAndDelHandle: onAddAndDelHandle, 
             // 表格行拖拽
-            onMoveRow: onMoveRowHandle, rowClassName: function () { return Table.DiffClassName; } }),
+            onMoveRow: onMoveRowHandle }),
         React.createElement("div", null,
             React.createElement("button", { onClick: function () { return console.log(records); } }, "\u83B7\u53D6\u6570\u636E"))));
 };

package/dist/DemoCom/TestCom.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './style.scss';
+export interface IAboutField {
+    isRequired: any;
+    addonBefore: any;
+    addonAfter: any;
+    unit: any;
+    connector: any;
+    title?: string;
+}
+interface IProps {
+    value?: any;
+    onChange?: any;
+    aboutField?: any;
+    controleType?: 'disabled' | 'hide';
+}
+declare const MaterialComp: React.FC<IProps>;
+export default MaterialComp;

package/dist/DemoCom/TestCom.js

@@ -0,0 +1,178 @@
+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 React, { useMemo, useEffect, useState } from 'react';
+import Form from '../components/Form';
+import SearchContainer from '../components/business/SearchContainer';
+import Input from '../components/Input';
+import Modal from '../components/Modal';
+import EnhanceSelect from 'components/EnhanceSelect';
+import './style.scss';
+import Button from 'components/Button';
+var SearchItem = SearchContainer.SearchItem, SearchLeft = SearchContainer.SearchLeft;
+/**
+ * 品名：brand
+ * 材质：texture
+ * 规格：specifications
+ * 产地：placesteel
+ * 型号：model
+ */
+var width = '120px';
+var initConfigInfo = {
+    brand: {
+        isChangeable: 0,
+        isDisplay: 1,
+    },
+    texture: {
+        isChangeable: 0,
+        isDisplay: 1,
+    },
+    specifications: {
+        isChangeable: 0,
+        isDisplay: 1,
+    },
+    placesteel: {
+        isChangeable: 0,
+        isDisplay: 1,
+    },
+    model: {
+        isChangeable: 0,
+        isDisplay: 1,
+    },
+};
+var list = [
+    {
+        id: '1',
+        name: '&11kg*8',
+    },
+    {
+        id: '2',
+        name: '33m*44mm',
+    },
+    {
+        id: '3',
+        name: '@17$22*22 22&',
+    },
+];
+var MaterialComp = function (_a) {
+    var value = _a.value, onChange = _a.onChange, aboutField = _a.aboutField, controleType = _a.controleType;
+    var form = Form.useForm()[0];
+    var _b = useState(initConfigInfo), configInfo = _b[0], setConfigInfo = _b[1];
+    console.log('test render');
+    var controlConfigInfo = useMemo(function () {
+        return controleType === 'hide'
+            ? {
+                isDisplay: 0,
+                isChangeable: 1,
+            }
+            : {
+                isDisplay: 1,
+                isChangeable: 0,
+            };
+    }, [controleType]);
+    var aboutFieldObj = useMemo(function () {
+        if (!aboutField) {
+            return {};
+        }
+        var _aboutFieldObj;
+        try {
+            _aboutFieldObj = JSON.parse(aboutField);
+            return _aboutFieldObj;
+        }
+        catch (err) {
+            console.log(err);
+            return {};
+        }
+    }, [aboutField]);
+    /**
+     * 根据外部参数变更内部内容
+     */
+    useEffect(function () {
+        var _configInfo = {};
+        Object.keys(aboutFieldObj).forEach(function (key) {
+            var _a;
+            if (key === 'specifications') {
+                // 规格需要做不同的处理
+                if (!aboutFieldObj[key]) {
+                    _configInfo[key] = __assign({}, controlConfigInfo);
+                }
+                else {
+                    var isRequired = (_a = aboutFieldObj[key]) === null || _a === void 0 ? void 0 : _a.some(function (item) {
+                        return item.isRequired ? true : false;
+                    });
+                    _configInfo[key] = {
+                        isDisplay: 1,
+                        isChangeable: 1,
+                        isRequired: isRequired ? 1 : 0,
+                    };
+                }
+            }
+            else {
+                var isRequired = (aboutFieldObj[key] || {}).isRequired;
+                if (!aboutFieldObj[key]) {
+                    _configInfo[key] = __assign({}, controlConfigInfo);
+                }
+                else {
+                    _configInfo[key] = {
+                        isDisplay: 1,
+                        isChangeable: 1,
+                        isRequired: isRequired ? 1 : 0,
+                    };
+                }
+            }
+        });
+        if (Object.keys(_configInfo).length !== 0) {
+            setConfigInfo(_configInfo);
+        }
+        else {
+            setConfigInfo(initConfigInfo);
+        }
+    }, [controlConfigInfo, aboutFieldObj]);
+    return (React.createElement(Form, { name: "test-list", form: form, className: "table-form" },
+        React.createElement(SearchContainer, null,
+            React.createElement(SearchLeft, { configInfo: configInfo },
+                React.createElement(SearchItem, { style: { width: width }, label: "\u54C1\u540D", name: "brand" },
+                    React.createElement(Input, null)),
+                React.createElement(SearchItem, { style: { width: width }, label: "\u6750\u8D28", name: "texture" },
+                    React.createElement(Input, null)),
+                React.createElement(SearchItem, { style: { width: '162px' }, label: "\u89C4\u683C", name: "specifications" },
+                    React.createElement(SpecificationsComp, { config: aboutFieldObj === null || aboutFieldObj === void 0 ? void 0 : aboutFieldObj.specifications })),
+                React.createElement(SearchItem, { style: { width: width }, label: "\u4EA7\u5730", name: "placesteel" },
+                    React.createElement(Input, null)),
+                React.createElement(SearchItem, { style: { width: width }, label: "\u578B\u53F7", name: "model" },
+                    React.createElement(Input, null))))));
+};
+var SpecificationsComp = function (_a) {
+    var value = _a.value, onChange = _a.onChange, config = _a.config, disabled = _a.disabled;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    /**
+     * @description 模态框设置
+     */
+    var dataConfig = function () {
+        console.log(config);
+    };
+    /**
+     * @description 模态框关闭隐藏
+     */
+    var openModal = function () {
+        dataConfig();
+        setVisible(true);
+    };
+    var closeModal = function () {
+        setVisible(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EnhanceSelect, { defaultList: list, disabled: disabled, value: value, onChange: onChange, dropdownMatchSelectWidth: 130 }),
+        React.createElement(Button, { type: "primary", size: "small", disabled: disabled, onClick: openModal }, "\u65B0\u5EFA"),
+        React.createElement(Modal, { visible: visible, loading: false, onCancel: closeModal, maskClosable: false, title: "\u9009\u62E9\u89C4\u683C", width: "60%" },
+            React.createElement("div", null, "\u9009\u62E9\u89C4\u683C"))));
+};
+export default MaterialComp;

package/dist/components/Table/table.js

@@ -150,7 +150,7 @@ function Table(props) {
         // }
     }, [onMoveRow]);
     return (React.createElement("div", { style: { position: 'relative', overflow: 'hidden' } },
-        React.createElement(DndProvider, { backend: HTML5Backend },
+        React.createElement(DndProvider, { backend: HTML5Backend, context: window },
             React.createElement(AntTable, __assign({ className: classes, bordered: bordered, pagination: pagination, scroll: scroll ? scroll : _scroll, columns: newColumns, dataSource: dataSource, components: onMoveRow || onEditableSave ? components : undefined, onRow: onMoveRow
                     ? function (record, index) {
                         return ({

package/dist/components/business/Container/container.js

@@ -20,15 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Spin } from 'antd';
 import classNames from 'classnames';
-var Container = function (_a) {
+var Container = forwardRef(function (_a, ref) {
     var loading = _a.loading, children = _a.children, className = _a.className, restProps = __rest(_a, ["loading", "children", "className"]);
     var classes = classNames('zt-container', className);
-    return (React.createElement("div", __assign({ className: classes }, restProps),
+    return (React.createElement("div", __assign({ className: classes }, restProps, { ref: ref }),
         loading && (React.createElement("div", { className: "zt-container__loading" },
             React.createElement(Spin, { size: "large", spinning: loading }))),
         children));
-};
+});
 export default Container;

package/dist/components/business/SearchContainer/search-drawer.js

@@ -58,7 +58,7 @@ var SearchDrawer = function (_a) {
         React.createElement(Button, { type: "default", onClick: onReset }, "\u91CD\u7F6E"),
         React.createElement(Button, { type: "primary", onClick: onSureHandle }, "\u786E\u5B9A"))); };
     return (React.createElement(Drawer, { className: "search-drawer", title: "\u67E5\u8BE2\u6761\u4EF6\u5207\u6362", placement: "right", visible: visible, closable: false, maskClosable: false, footer: renderFooter() },
-        React.createElement(DndProvider, { backend: HTML5Backend },
+        React.createElement(DndProvider, { backend: HTML5Backend, context: window },
             React.createElement(Checkbox.Group, { value: checkedValues, onChange: onCheckboxChange }, dynamicList.map(function (item, index) { return (React.createElement(Sortable, { key: item.name, type: "search-drawer", index: index, onMoveItem: onMoveItem },
                 React.createElement(Checkbox, { value: item.name }, item.label || item.name))); })))));
 };

package/dist/components/business/SearchContainer/search-item.js

@@ -45,9 +45,7 @@ var SearchItem = function (_a) {
         'zt-search__left__item--noborder': noBorder,
         'zt-search__left__item--nolabel': noLabel,
     });
-    return (React.createElement("div", { className: classes, style: {
-            width: getWidthStr(width),
-        } },
+    return (React.createElement("div", { className: classes, style: __assign({ width: getWidthStr(width) }, style) },
         React.createElement(Item, __assign({}, restProps), children)));
 };
 export default SearchItem;

package/package.json

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