ls-pro-common 1.0.4 → 1.0.8

package/es/components/DtlLayout.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ProFormInstance } from 'ls-pro-form';
+import './common.less';
+export declare type DtlLyaoutProps = Record<string, any> & {
+    onExit: (visible?: boolean) => void;
+    onSave?: () => void;
+    renderButton?: (defaultBtn: JSX.Element[]) => JSX.Element[];
+    btnSaveText?: string;
+    btnExitText?: string;
+    title?: string;
+    masterObject?: any;
+    keyField?: string;
+    bodyClass?: string;
+    headerClass?: string;
+    bodyStyle?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    formRef?: React.MutableRefObject<ProFormInstance | undefined>;
+};
+declare function DtlLayout(props: DtlLyaoutProps): JSX.Element;
+export default DtlLayout;

package/es/components/DtlLayout.js

@@ -0,0 +1,64 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
+import './common.less';
+
+function DtlLayout(props) {
+  var renderButton = props.renderButton,
+      title = props.title,
+      _props$keyField = props.keyField,
+      keyField = _props$keyField === void 0 ? 'id' : _props$keyField,
+      masterObject = props.masterObject,
+      children = props.children,
+      headerClass = props.headerClass,
+      headerStyle = props.headerStyle,
+      bodyClass = props.bodyClass,
+      bodyStyle = props.bodyStyle,
+      formRef = props.formRef,
+      _props$btnSaveText = props.btnSaveText,
+      btnSaveText = _props$btnSaveText === void 0 ? '保存' : _props$btnSaveText,
+      _props$btnExitText = props.btnExitText,
+      btnExitText = _props$btnExitText === void 0 ? '返回' : _props$btnExitText;
+  var dtlTitle = useMemo(function () {
+    if (title) return title;
+    if (!masterObject) return '';
+    return masterObject[keyField] ? '编辑' : '新增';
+  }, [title, masterObject, keyField]);
+  var btns = [/*#__PURE__*/React.createElement(_Button, {
+    key: "btnSave",
+    onClick: function onClick() {
+      var _formRef$current;
+
+      if (props.onSave) {
+        return props.onSave();
+      }
+
+      formRef === null || formRef === void 0 ? void 0 : (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.submit();
+    },
+    icon: /*#__PURE__*/React.createElement(SaveOutlined, null)
+  }, " ", btnSaveText, " "), /*#__PURE__*/React.createElement(_Button, {
+    key: "btnBack",
+    onClick: function onClick() {
+      return props.onExit(false);
+    },
+    icon: /*#__PURE__*/React.createElement(ArrowLeftOutlined, null)
+  }, "  ", btnExitText, " ")];
+  var buttons = renderButton ? renderButton(btns) : btns;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dtl-layout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('dtl-header', headerClass),
+    style: headerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dtl-title"
+  }, dtlTitle), /*#__PURE__*/React.createElement("div", {
+    className: "dtl-btns"
+  }, buttons)), /*#__PURE__*/React.createElement("div", {
+    className: classNames('dtl-body', bodyClass),
+    style: bodyStyle
+  }, children));
+}
+
+export default DtlLayout;

package/es/components/InputTable.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { InputProps } from 'antd';
+import type { ProFormItemProps } from 'ls-pro-form';
+export declare type InputTableProps = ProFormItemProps<InputProps> & {
+    columns: any[];
+    url: string;
+    tableHeight?: number;
+    tableWidth?: number;
+    multiple?: boolean;
+    name: string;
+    valueField: string;
+    textField?: string;
+    textName?: string;
+    tableConfig?: any;
+    onSelectChange?: (item: any) => void;
+};
+declare function InputTable(prop: InputTableProps): JSX.Element;
+export default InputTable;

package/es/components/InputTable.js

@@ -0,0 +1,225 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["columns", "url", "textName", "name", "tableConfig", "tableHeight", "tableWidth", "readonly", "multiple", "valueField", "textField", "onSelectChange"],
+    _excluded2 = ["current", "pageSize"];
+import React from "react";
+import { useRef, useState, useEffect, useContext } from 'react';
+import ProTable from 'ls-pro-table';
+import { ProFormText, ProFormContext } from 'ls-pro-form';
+import { MoreOutlined } from '@ant-design/icons';
+import { httpGet } from '../http';
+
+function InputTable(prop) {
+  //@ts-ignore
+  var _useContext = useContext(ProFormContext),
+      formRef = _useContext.formRef;
+
+  var tableRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedRows = _useState4[0],
+      setSelectedRows = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      text = _useState6[0],
+      setText = _useState6[1];
+
+  var columns = prop.columns,
+      url = prop.url,
+      textName = prop.textName,
+      name = prop.name,
+      tableConfig = prop.tableConfig,
+      _prop$tableHeight = prop.tableHeight,
+      tableHeight = _prop$tableHeight === void 0 ? 400 : _prop$tableHeight,
+      _prop$tableWidth = prop.tableWidth,
+      tableWidth = _prop$tableWidth === void 0 ? 650 : _prop$tableWidth,
+      _prop$readonly = prop.readonly,
+      readonly = _prop$readonly === void 0 ? true : _prop$readonly,
+      multiple = prop.multiple,
+      valueField = prop.valueField,
+      textField = prop.textField,
+      onSelectChange = prop.onSelectChange,
+      rest = _objectWithoutProperties(prop, _excluded);
+
+  var textNameProp = textName || name + '__text';
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(param) {
+      var current, pageSize, rest, data, result;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              current = param.current, pageSize = param.pageSize, rest = _objectWithoutProperties(param, _excluded2);
+              data = {
+                page: current,
+                pageSize: pageSize
+              };
+
+              if (Object.keys(rest).length) {
+                data.where = rest;
+              }
+
+              _context.next = 5;
+              return httpGet(url, data);
+
+            case 5:
+              result = _context.sent;
+              return _context.abrupt("return", {
+                data: result.rows || [],
+                total: result.total || 0,
+                success: true
+              });
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function loadData(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  useEffect(function () {
+    var _formRef$current;
+
+    var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldsValue();
+    var txt = formValue[textField || valueField];
+
+    if (txt) {
+      setText(txt);
+    }
+  }, []);
+  var tableDom = /*#__PURE__*/React.createElement(ProTable, _extends({
+    columns: columns,
+    request: loadData,
+    rowKey: valueField,
+    manualRequest: false,
+    actionRef: tableRef,
+    search: {
+      labelWidth: 70
+    },
+    options: {
+      density: false,
+      reload: false,
+      setting: false
+    },
+    form: {
+      submitter: {
+        resetButtonProps: false
+      }
+    },
+    height: 'full',
+    rowSelection: {
+      type: multiple ? 'checkbox' : 'radio',
+      onChange: function onChange(keys, rows) {
+        setSelectedRows(rows);
+      }
+    },
+    tableAlertRender: false,
+    onRow: function onRow(record) {
+      return {
+        onDoubleClick: function onDoubleClick() {
+          var _formRef$current2, _formRef$current3;
+
+          var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
+          formValue[name] = record[valueField];
+          setText(record[textField || valueField]); // 如果需要接收名称(指定了名称属性名)，则反回名称
+
+          if (textName) {
+            formValue[textNameProp] = record[textField || valueField];
+          }
+
+          (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.setFieldsValue(_objectSpread({}, formValue));
+          setVisible(false);
+          onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(record);
+        }
+      };
+    },
+    toolBarRender: function toolBarRender() {
+      return [/*#__PURE__*/React.createElement(_Button, {
+        onClick: function onClick() {
+          if (selectedRows.length) {
+            var _formRef$current4, _formRef$current5;
+
+            var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getFieldsValue();
+            formValue[name] = selectedRows.map(function (o) {
+              return o[valueField];
+            }).join(',');
+            var txt = selectedRows.map(function (o) {
+              return o[textField || valueField];
+            }).join(',');
+            setText(txt); // 如果需要接收名称，则反回名称
+
+            if (textName) {
+              formValue[textNameProp] = txt;
+            }
+
+            (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 ? void 0 : _formRef$current5.setFieldsValue(_objectSpread({}, formValue));
+          }
+
+          setVisible(false);
+        }
+      }, "\u786E\u8BA4")];
+    },
+    headerTitle: "\u53CC\u51FB\u8FD4\u56DE\u5F53\u524D\u884C\u6570\u636E"
+  }, tableConfig));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(ProFormText, {
+    name: name
+  })), /*#__PURE__*/React.createElement(ProFormText, _extends({
+    name: textNameProp
+  }, rest), /*#__PURE__*/React.createElement(_Input, {
+    suffix: /*#__PURE__*/React.createElement(_Popover, {
+      content: /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: tableWidth + 'px',
+          height: tableHeight + 'px',
+          maxHeight: '95vh',
+          overflow: 'auto'
+        }
+      }, tableDom),
+      trigger: "click",
+      visible: visible,
+      onVisibleChange: setVisible
+    }, /*#__PURE__*/React.createElement(MoreOutlined, null)),
+    onClick: function onClick() {
+      return setVisible(true);
+    },
+    onInput: function onInput(e) {
+      var _formRef$current6;
+
+      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 ? void 0 : _formRef$current6.getFieldsValue();
+      formValue[name] = e.target.value;
+      formRef.current.setFieldsValue(_objectSpread({}, formValue));
+    },
+    readOnly: readonly,
+    value: text
+  })));
+}
+
+export default InputTable;

package/es/components/common.less

@@ -0,0 +1,64 @@
+.dtl-layout {
+    position      : absolute;
+    top           : 0;
+    left          : 0;
+    right         : 0;
+    bottom        : 0;
+    background    : white;
+    display       : flex;
+    flex-direction: column;
+
+    .dtl-header {
+        display      : flex;
+        justify-items: center;
+        padding      : 5px 14px;
+        border-bottom: 1px solid #f0f0f0;
+
+        .dtl-title {
+            font-size: 14pt;
+        }
+
+        .dtl-btns {
+            flex      : 1;
+            text-align: right;
+
+            button+button {
+                margin-left: 8px;
+            }
+        }
+    }
+
+    .dtl-body {
+        height  : 0;
+        flex    : 1;
+        overflow: auto;
+        padding : 12px;
+    }
+
+    .dtl-flex {
+        display       : flex;
+        flex-direction: column;
+    }
+}
+
+.flex {
+    flex: 1;
+}
+
+.flex-column {
+    display       : flex;
+    flex-direction: column;
+
+    .flex {
+        height: 0;
+    }
+}
+
+.flex-row {
+    display       : flex;
+    flex-direction: row;
+
+    .flex {
+        width: 0;
+    }
+}

package/es/hooks/useDtl/index.d.ts

@@ -0,0 +1,29 @@
+import type { ActionType } from 'ls-pro-table';
+import type { ProFormInstance } from 'ls-pro-form';
+import type { SingleParamType } from '../useSingle';
+export declare type DtlParamType = SingleParamType & {
+    mstKeyField: string;
+    dtlService: any;
+    relationField: string;
+    dtlItem: any;
+};
+declare function useDtl(dtlParam: DtlParamType): {
+    formRef: import("react").MutableRefObject<ProFormInstance<any> | undefined>;
+    tableRef: import("react").MutableRefObject<ActionType | undefined>;
+    dtlFormRef: import("react").MutableRefObject<ProFormInstance<any> | undefined>;
+    selectedRows: any;
+    showEdit: boolean;
+    editItem: any;
+    tableTools: JSX.Element[];
+    setSelectedRows: import("react").Dispatch<any>;
+    setShowEdit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setEditItem: import("react").Dispatch<any>;
+    onRemoveDtl: () => void;
+    onSaveDtl: (formData: any) => Promise<boolean>;
+    onLoadDtl: (params: Record<string, any>, sort: Record<string, any>, filter: Record<string, any>) => Promise<any>;
+    onAddDtl: () => Promise<boolean>;
+    onEditDtl: () => Promise<boolean>;
+    onSaveMst: (values: any) => Promise<void>;
+    onRemoveMst: () => Promise<boolean | undefined>;
+};
+export default useDtl;