ztxkui 2.3.4 → 2.3.5

package/README.md

@@ -1,4 +1,4 @@
-# 中拓中台项目 ERP
+# 前端ui库
 
 ## 关于 typescript 相关配置说明
 

package/dist/App.js

@@ -38,225 +38,9 @@ import TransList from './components/business/List';
 import GridList from 'components/business/GridList';
 import './styles/index.scss';
 var RangePicker = DatePicker.RangePicker;
-var Item = Form.Item;
 var FormItem = TransList.FormItem;
 var SearchItem = SearchContainer.SearchItem, SearchLeft = SearchContainer.SearchLeft, SearchRight = SearchContainer.SearchRight;
 var OperationMiddle = Container.OperationMiddle, OperationRight = Container.OperationRight;
-var columns1 = [
-    {
-        title: '序号',
-        width: 62,
-        fixed: 'left',
-        align: 'center',
-        render: function (text, record, index) { return "" + (index + 1); },
-    },
-    {
-        title: '采购订单子项号',
-        width: 160,
-        dataIndex: 'poSubNo',
-        key: 'poSubNo',
-    },
-    {
-        title: '品名',
-        width: 100,
-        dataIndex: 'brand',
-        key: 'brand',
-    },
-    {
-        title: '材质',
-        width: 100,
-        dataIndex: 'texture',
-        key: 'texture',
-    },
-    {
-        title: '规格',
-        width: 100,
-        dataIndex: 'specification',
-        key: 'specification',
-    },
-    {
-        title: '产地',
-        width: 100,
-        dataIndex: 'placesteel',
-        key: 'placesteel',
-    },
-    {
-        title: '质量等级',
-        width: 100,
-        dataIndex: 'qualityLevelName',
-        key: 'qualityLevelName',
-        align: 'center',
-    },
-    {
-        title: '实卷标记',
-        width: 100,
-        dataIndex: 'realSign',
-        key: 'realSign',
-        required: true,
-    },
-    {
-        title: '钢卷号',
-        width: 100,
-        dataIndex: 'steelNo',
-        key: 'steelNo',
-        editable: true,
-    },
-    {
-        title: '入库数量',
-        width: 100,
-        dataIndex: 'quantity',
-        key: 'quantity',
-        required: true,
-        editable: true,
-        editableConfig: {
-            type: 'inputNumber',
-            min: 0,
-            precision: 3,
-        },
-    },
-    {
-        title: '数量单位',
-        width: 100,
-        dataIndex: 'quantityUnit',
-        key: 'quantityUnit',
-    },
-    {
-        title: '入库件数',
-        width: 100,
-        dataIndex: 'number',
-        key: 'number',
-        required: true,
-        editable: true,
-        editableConfig: {
-            type: 'inputNumber',
-            min: 0,
-            precision: 0,
-        },
-    },
-    {
-        title: '订单数量',
-        width: 100,
-        render: function (text, record, index) { return 100; },
-    },
-    {
-        title: '订单件数',
-        width: 100,
-        render: function (text, record, index) { return 200; },
-    },
-    {
-        title: '均重/吨',
-        width: 100,
-        dataIndex: 'avgWeight',
-        key: 'avgWeight',
-        editable: true,
-        editableConfig: {
-            type: 'inputNumber',
-            min: 0,
-            precision: 3,
-        },
-    },
-    {
-        title: '理计重量/吨',
-        width: 100,
-        dataIndex: 'calculatedWeight',
-        key: 'calculatedWeight',
-        editable: true,
-        editableConfig: {
-            type: 'inputNumber',
-            min: 0,
-            precision: 3,
-        },
-    },
-    {
-        title: '计重方式',
-        width: 100,
-        dataIndex: 'calculateTypeName',
-        key: 'calculateTypeName',
-        align: 'center',
-    },
-    {
-        title: '订单含税单价',
-        width: 100,
-        dataIndex: 'unitPrice',
-        key: 'unitPrice',
-        render: function (text) { return 111; },
-    },
-    {
-        title: '车船号',
-        width: 100,
-        dataIndex: 'vvNo',
-        key: 'vvNo',
-        editable: true,
-    },
-    {
-        title: '库位',
-        width: 100,
-        dataIndex: 'location',
-        key: 'location',
-        editable: true,
-    },
-    {
-        title: '货损',
-        width: 100,
-        dataIndex: 'damage',
-        key: 'damage',
-        editable: true,
-    },
-    {
-        title: '包装方式',
-        width: 100,
-        dataIndex: 'packType',
-        key: 'packType',
-        editable: true,
-    },
-    {
-        title: '业务性质',
-        width: 100,
-        dataIndex: 'busiNature',
-        key: 'busiNature',
-    },
-    {
-        title: '批次类型',
-        width: 100,
-        dataIndex: 'packageType',
-        key: 'packageType',
-        required: true,
-    },
-    {
-        title: '供应商名称',
-        width: 220,
-        dataIndex: 'memberName',
-        key: 'memberName',
-    },
-    {
-        title: '采购合同号',
-        width: 160,
-        align: 'center',
-        dataIndex: 'pcNo',
-        key: 'pcNo',
-    },
-    {
-        title: '采购合同子项号',
-        width: 160,
-        align: 'center',
-        dataIndex: 'pcSubNo',
-        key: 'pcSubNo',
-    },
-    {
-        title: '采购订单号',
-        width: 160,
-        align: 'center',
-        dataIndex: 'poNo',
-        key: 'poNo',
-    },
-    {
-        title: '备注',
-        width: 220,
-        dataIndex: 'mark',
-        key: 'mark',
-        editable: true,
-    },
-];
 var data = [
     {
         id: '1376442369617358850',
@@ -956,7 +740,7 @@ var inspectionDetail = [
 function App() {
     var _a = useState(data), dataSource = _a[0], setDataSource = _a[1];
     var _b = useState([]), keys = _b[0], setKeys = _b[1];
-    var _c = useState([]), searchLayout = _c[0], setSearchLayout = _c[1];
+    var _c = useState([]), setSearchLayout = _c[1];
     var form = Form.useForm()[0];
     var _d = useState(originFileList), fileList = _d[0], setFileList = _d[1];
     var columns = useMemo(function () { return [
@@ -1330,13 +1114,13 @@ function App() {
             ]);
         }, 3000);
     }, []);
-    var onMoveRowHandle = useCallback(function (newDataSource) {
-        console.log(newDataSource);
-        setDataSource(newDataSource);
-    }, []);
-    var onAddAndDelHandle = useCallback(function (type, index) {
-        console.log(type, index);
-    }, []);
+    // const onMoveRowHandle = useCallback((newDataSource) => {
+    //   console.log(newDataSource);
+    //   setDataSource(newDataSource);
+    // }, []);
+    // const onAddAndDelHandle = useCallback((type, index) => {
+    //   console.log(type, index);
+    // }, []);
     var onEditableSaveHandle = useCallback(function (record, index, dataIndex) {
         console.log(record, dataIndex, index);
         if (typeof index === 'number') {
@@ -1357,7 +1141,7 @@ function App() {
         getCheckboxProps: function (record) {
             return {};
         },
-    }); }, []);
+    }); }, [keys]);
     var onSearchLayoutChange = useCallback(function (searchLayout) {
         setSearchLayout(searchLayout);
     }, []);

package/dist/Demo.js

@@ -14,12 +14,12 @@ function request(options) {
 function Demo() {
     console.log('rerender');
     var _a = useState([]), list = _a[0], setList = _a[1];
-    var _b = useState([]), defaultList = _b[0], setDefaultList = _b[1];
+    var _b = useState([]), setDefaultList = _b[1];
     var _c = useState(''), value = _c[0], setValue = _c[1];
-    var _d = useState({
+    var params = useState({
         tenantId: '000000',
         isCreateUser: 0,
-    }), params = _d[0], setParams = _d[1];
+    })[0];
     // 模拟接口请求
     useEffect(function () {
         var timeoutId = setTimeout(function () {

package/dist/DemoCom/FormDemo.d.ts

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

package/dist/DemoCom/FormDemo.js

@@ -0,0 +1,173 @@
+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 };
+    }
+};
+import React, { useState, useMemo } from 'react';
+import SearchContainer from '../components/business/SearchContainer';
+import Form from '../components/Form';
+import Input from '../components/Input';
+import Select from '../components/Select';
+import DatePicker from '../components/DatePicker';
+import Checkbox from '../components/Checkbox';
+import Radio from '../components/Radio';
+import InputNumber from '../components/InputNumber';
+var SearchItem = SearchContainer.SearchItem, SearchLeft = SearchContainer.SearchLeft;
+var RangePicker = DatePicker.RangePicker;
+var configInfo = {
+    pwNoCopy: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+    pwNo1: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+    status: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+    startTime: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+    depId: {
+        isRequired: 1,
+        isChangeable: 1,
+        isDisplay: 1,
+    },
+};
+var FormDemo = function () {
+    var form = Form.useForm()[0];
+    var _a = useState('1'), status = _a[0], setStatus = _a[1];
+    var configInfoMemo = useMemo(function () {
+        return __assign(__assign({}, configInfo), { startTime: __assign(__assign({}, configInfo === null || configInfo === void 0 ? void 0 : configInfo.startTime), { isDisplay: status === '1' ? true : false }) });
+    }, [status]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Form, { name: "test-list", form: form },
+            React.createElement(SearchContainer, { dark: true },
+                React.createElement(SearchLeft, { configInfo: configInfoMemo },
+                    React.createElement(SearchItem, { width: "half", name: "pwNo", configname: "pwNoCopy", label: "\u5165\u5E93\u5355\u53F7", rules: [
+                            {
+                                required: true,
+                                message: '采购基本数据-请选择入库单号',
+                            },
+                        ] },
+                        React.createElement(Input.TextArea, { autoSize: true, allowClear: true, disabled: true, onChange: function (e) {
+                                console.log(e.target.value);
+                            } })),
+                    React.createElement(SearchItem, { width: "half", name: "pwNo1", label: "\u5165\u5E93\u5355\u53F71", rules: [
+                            {
+                                required: false,
+                                message: '采购基本数据-请选择入库单号1',
+                            },
+                        ] },
+                        React.createElement(Input, null)),
+                    React.createElement(SearchItem, { width: "half", name: "status", label: "\u5355\u636E\u72B6\u6001" },
+                        React.createElement(Select, { onChange: function (value) {
+                                setStatus(value);
+                            } },
+                            React.createElement(Select.Option, { value: "1" }, "\u662F"),
+                            React.createElement(Select.Option, { value: "0" }, "\u5426"))),
+                    React.createElement(SearchItem, { name: "intime", configname: "startTime", label: "\u5165\u5E93\u65E5\u671F" },
+                        React.createElement(RangePicker, null)),
+                    React.createElement(SearchItem, { name: "warehouseId", label: "\u4ED3\u5E93\u540D\u79F0" },
+                        React.createElement(Select, null)),
+                    React.createElement(SearchItem, { name: "companyId", label: "\u516C\u53F8\u540D\u79F0" },
+                        React.createElement(Select, null)),
+                    React.createElement(SearchItem, { name: "companyId1", label: "\u516C\u53F8\u540D\u79F01" },
+                        React.createElement(Input.TextArea, { autoSize: true })),
+                    React.createElement(SearchItem, { name: "depId", label: "\u90E8\u95E8\u540D\u79F0", rules: [{ required: true, message: '请选择部门名称' }] },
+                        React.createElement(Select, { allowClear: true },
+                            React.createElement(Select.Option, { value: "1" }, "\u662F"),
+                            React.createElement(Select.Option, { value: "0" }, "\u5426"))),
+                    React.createElement(SearchItem, { name: "test1", label: "\u90E8\u95E8\u540D\u79F0" },
+                        React.createElement(Checkbox.Group, null,
+                            React.createElement(Checkbox, { value: "1" }, "\u662F"),
+                            React.createElement(Checkbox, { value: "2" }, "\u5426"))),
+                    React.createElement(SearchItem, { name: "test2", label: "\u90E8\u95E8\u540D\u79F0", rules: [{ required: true, message: '请选择仓库名称' }] },
+                        React.createElement(Radio.Group, null,
+                            React.createElement(Radio, { value: "1" }, "\u662F"),
+                            React.createElement(Radio, { value: "2" }, "\u5426"))),
+                    React.createElement(SearchItem, { name: "test3", label: "\u90E8\u95E8\u540D\u79F0" },
+                        React.createElement(InputNumber, null)),
+                    React.createElement(SearchItem, { name: "test4", label: "\u90E8\u95E8\u540D\u79F0" },
+                        React.createElement(Input.TextArea, { autoSize: true })),
+                    React.createElement(SearchItem, { name: "type1", width: "half", noLabel: true },
+                        React.createElement(Select, null)),
+                    React.createElement(SearchItem, { name: "type2", width: "half", noLabel: true },
+                        React.createElement(Input, null)),
+                    React.createElement(SearchItem, { name: "type3", width: "half", noLabel: true },
+                        React.createElement(Select, null)),
+                    React.createElement(SearchItem, { name: "type4", width: "half", noLabel: true },
+                        React.createElement(Select, null))))),
+        React.createElement("button", { onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                var err_1, errorFields;
+                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();
+                            errorFields = err_1.errorFields;
+                            if (errorFields) {
+                                console.log(errorFields[0].errors + '');
+                            }
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); } }, "\u9A8C\u8BC1")));
+};
+export default FormDemo;

package/dist/components/business/DetailList/index.js

@@ -35,6 +35,7 @@ var DetailList = function (_a) {
                         return (React.createElement(Item, { label: item === null || item === void 0 ? void 0 : item.label, key: index }, item === null || item === void 0 ? void 0 : item.content));
                     }
                     // 其他数据返回空
+                    return null;
                 }))),
             React.createElement(Descriptions, { bordered: true, className: "detail_list", column: 1, labelStyle: {
                     height: '36px',
@@ -105,6 +106,7 @@ var DetailList = function (_a) {
                                         } }, "\u4E0B\u8F7D"))));
                             })));
                     }
+                    return null;
                 })))),
         hasSignArea && (React.createElement("div", { style: {
                 width: '100%',

package/dist/components/business/SearchContainer/search-item.d.ts

@@ -10,6 +10,10 @@ export interface ISearchItem extends FormItemProps {
     noBorder?: boolean;
     /**没有label */
     noLabel?: boolean;
+    /**配置必填、可修改、展示name */
+    configname?: string;
+    /**不需要自动配置 */
+    noauto?: string;
 }
 declare const SearchItem: React.FC<ISearchItem>;
 export default SearchItem;

package/dist/components/business/SearchContainer/search-left.d.ts

@@ -11,6 +11,7 @@ export interface ISearchLeft {
     onChange?: (searchLayout: ISearchLayout[]) => void;
     isFlex?: boolean;
     className?: string;
+    configInfo?: any;
 }
 declare const SearchLeft: React.FC<ISearchLeft>;
 export default SearchLeft;

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

@@ -3,10 +3,20 @@ import classNames from 'classnames';
 import SearchDrawer from './search-drawer';
 import { SettingOutlined } from '@ant-design/icons';
 import useDynamic from './hooks/useDynamic';
+function useConfigChildren(children) {
+    var _a = useState(null), configChildren = _a[0], setConfigChildren = _a[1];
+    useEffect(function () {
+        if (children) {
+            setConfigChildren(children);
+        }
+    }, [children]);
+    return { configChildren: configChildren };
+}
 var SearchLeft = function (_a) {
-    var children = _a.children, className = _a.className, isDynamic = _a.isDynamic, searchLayout = _a.searchLayout, onChange = _a.onChange, _b = _a.isFlex, isFlex = _b === void 0 ? true : _b;
+    var children = _a.children, className = _a.className, isDynamic = _a.isDynamic, searchLayout = _a.searchLayout, onChange = _a.onChange, _b = _a.isFlex, isFlex = _b === void 0 ? true : _b, configInfo = _a.configInfo;
     /**缓存初始化值 */
     var _c = useDynamic(children, isDynamic, searchLayout), dynamicArr = _c.dynamicArr, initDynamicArr = _c.initDynamicArr, newChildren = _c.newChildren;
+    var configChildren = useConfigChildren(children).configChildren;
     var classes = classNames('zt-search__left', className, {
         'zt-search__left--flex': isFlex,
         'zt-search__left--dynamic': isDynamic,
@@ -53,7 +63,48 @@ var SearchLeft = function (_a) {
                 }
                 return null;
             })
-            : children,
+            : configInfo
+                ? React.Children.map(configChildren, function (childItem) {
+                    var _a;
+                    if (childItem === null || childItem === void 0 ? void 0 : childItem.props) {
+                        var _b = childItem === null || childItem === void 0 ? void 0 : childItem.props, name_2 = _b.name, label = _b.label, configname = _b.configname, noauto = _b.noauto, formChildren = _b.children, rules = _b.rules;
+                        var config = configname
+                            ? configInfo[configname]
+                            : configInfo[name_2];
+                        if (config && !noauto) {
+                            // 如果配置里面设置了required配置，那么需要覆盖
+                            var newRules = Array.isArray(rules) ? rules.slice() : [];
+                            var requiredIndex = newRules.findIndex(function (rule) { return (rule === null || rule === void 0 ? void 0 : rule.required) === true || (rule === null || rule === void 0 ? void 0 : rule.required) === false; });
+                            if (requiredIndex !== -1) {
+                                var message = (_a = newRules[requiredIndex]) === null || _a === void 0 ? void 0 : _a.message;
+                                newRules.splice(requiredIndex, 1, {
+                                    required: !!(config === null || config === void 0 ? void 0 : config.isRequired),
+                                    message: message,
+                                });
+                            }
+                            else {
+                                newRules.unshift({
+                                    required: !!(config === null || config === void 0 ? void 0 : config.isRequired),
+                                    message: label + " \u672A\u586B!",
+                                });
+                            }
+                            // 覆盖 disabled rules里面的required属性
+                            return !!(config === null || config === void 0 ? void 0 : config.isDisplay)
+                                ? React.cloneElement(childItem, {
+                                    disabled: !!!(config === null || config === void 0 ? void 0 : config.isChangeable),
+                                    rules: newRules,
+                                }, React.cloneElement(formChildren, {
+                                    disabled: !!!(config === null || config === void 0 ? void 0 : config.isChangeable),
+                                }))
+                                : null;
+                        }
+                        else {
+                            return childItem;
+                        }
+                    }
+                    return childItem;
+                })
+                : children,
         Array.isArray(dynamicList) && dynamicList.length ? (React.createElement(SearchDrawer, { visible: visible, onClose: onClose, onSure: onSure, onReset: onReset, onInsideChange: onInsideChange, dynamicList: dynamicList })) : null,
         Array.isArray(dynamicList) && dynamicList.length ? (React.createElement("div", { className: "zt-search__left--setting", onClick: function () { return setVisible(true); } },
             React.createElement(SettingOutlined, { style: { fontSize: 18, color: '#768696' } }))) : null));

package/dist/index.js

@@ -15,6 +15,7 @@
 // import WeChatDemo from './DemoCom/WechatDemo';
 // import TableDemo from './DemoCom/TableDemo';
 // import BasicDemo from './DemoCom/BasicDemo';
+// import FormDemo from './DemoCom/FormDemo';
 // dayjs.locale(zhCn);
 // ReactDOM.render(
 //   // <React.StrictMode>
@@ -51,6 +52,9 @@
 //         <Route exact path="/basic">
 //           <BasicDemo />
 //         </Route>
+//         <Route exact path="/form">
+//           <FormDemo />
+//         </Route>
 //         <Route exact path="/test">
 //           <div>
 //             <h1>

package/package.json

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