kts-component-invoice-operate 3.2.18 → 3.2.19

package/dist/Invoice/InvoiceController/InvoiceControllerState/AutoComplete/index.d.ts

@@ -0,0 +1,6 @@
+import IGood from "../GoodsListState/IGood";
+/** 自动补全 */
+export default class AutoComplete {
+    /** 商品名称自动补全 */
+    onItemNameSearch?: (searchText: string) => Promise<IGood[]>;
+}

package/dist/Invoice/InvoiceController/InvoiceControllerState/index.d.ts

@@ -2,6 +2,7 @@ import GoodsListState from './GoodsListState';
 import BuyerState from './BuyerState';
 import Stakeholder from './Stakeholder';
 import { IInvoiceTypeModalProps } from '../../../InvoiceTypeModal';
+import AutoComplete from './AutoComplete';
 export default class InvoiceControllerState {
     /**
      * 组件模式
@@ -41,4 +42,6 @@ export default class InvoiceControllerState {
     rootElement?: HTMLDivElement | null;
     /** 发票类型选择窗口 */
     typeModalProps?: IInvoiceTypeModalProps;
+    /** 自动补全 */
+    autoComplete: AutoComplete;
 }

package/dist/index.esm.js

@@ -2,9 +2,9 @@ import 'kts-components-antd-x3/dist/kts-components-antd-x3.css';
 import React, { createElement, createContext, useContext, useEffect, forwardRef, Children, isValidElement } from 'react';
 import GreyReactBox, { decorator } from 'grey-react-box';
 import { chain as chain$1, bignumber, create, all } from 'mathjs';
-import { message, Form, Input, Icon as Icon$1, Tag as Tag$1, Select, Button, Tooltip, Switch as Switch$1, Typography, Menu, Dropdown, AutoComplete, Spin, Checkbox, Drawer, Descriptions, Empty, Divider, Popover, Table as Table$1, Tree, Modal as Modal$1, Row as Row$1, Col as Col$1 } from 'kts-components-antd-x3';
+import { message, Form, Input, Icon as Icon$1, Tag as Tag$1, Select, Button, Tooltip, Switch as Switch$1, Typography, Menu, Dropdown, AutoComplete as AutoComplete$2, Spin, Checkbox, Drawer, Descriptions, Empty, Divider, Popover, Table as Table$1, Tree, Modal as Modal$1, Row as Row$1, Col as Col$1 } from 'kts-components-antd-x3';
 import { v4 } from 'uuid';
-import { message as message$1, TableManual, Switch, Row, Col, Button as Button$1, Tooltip as Tooltip$1, Input as Input$1, AutoComplete as AutoComplete$1, Select as Select$1, Spin as Spin$1, Menu as Menu$1, Form as Form$1, Drawer as Drawer$1, Space, Radio, InputNumber, Popconfirm, Modal } from 'kts-xui';
+import { message as message$1, TableManual, Switch, AutoComplete as AutoComplete$1, Row, Col, Button as Button$1, Tooltip as Tooltip$1, Input as Input$1, Select as Select$1, Spin as Spin$1, Menu as Menu$1, Form as Form$1, Drawer as Drawer$1, Space, Radio, InputNumber, Popconfirm, Modal } from 'kts-xui';
 import classnames from 'classnames';
 import { Table } from 'kts-components-antd-x4-v4';
 import { Input as Input$2, NumberPicker } from '@formily/antd-components';
@@ -1080,6 +1080,13 @@ var Stakeholder = /*#__PURE__*/_createClass(function Stakeholder() {
   this.rulesMap = void 0;
 });
 
+/** 自动补全 */
+var AutoComplete = /*#__PURE__*/_createClass(function AutoComplete() {
+  _classCallCheck(this, AutoComplete);
+
+  this.onItemNameSearch = void 0;
+});
+
 var InvoiceControllerState = /*#__PURE__*/_createClass(function InvoiceControllerState() {
   _classCallCheck(this, InvoiceControllerState);
 
@@ -1094,6 +1101,7 @@ var InvoiceControllerState = /*#__PURE__*/_createClass(function InvoiceControlle
   this.priceIntegerDigit = void 0;
   this.rootElement = null;
   this.typeModalProps = void 0;
+  this.autoComplete = new AutoComplete();
 });
 
 /**
@@ -10145,15 +10153,76 @@ var TitleText = (function (props) {
   }, "*") : React.createElement(React.Fragment, null), children);
 });
 
-var css_248z$6 = ".kts-invoice-operate-goods-list-itemName-input {\n  display: flex;\n  flex: 1;\n  padding-left: 10px;\n  height: 31px;\n}\n.has-error .kts-invoice-operate-goods-list-itemName-input {\n  border: 1px solid #f5222d;\n}\n";
+var css_248z$6 = ".kts-invoice-operate-goods-list-itemName-input {\n  display: flex;\n  flex: 1;\n  padding-left: 10px;\n  height: 31px;\n}\n.kts-invoice-operate-goods-list-itemName-input .ktsAntX-select {\n  width: 100%;\n}\n.kts-invoice-operate-goods-list-itemName-input .ktsAntX-select .ktsAntX-select-selector {\n  height: 100%;\n}\n.has-error .kts-invoice-operate-goods-list-itemName-input {\n  border: 1px solid #f5222d;\n}\n";
 styleInject(css_248z$6);
 
 function ItemNameInput(props) {
+  var controller = Invoice.useInvoiceController();
+  var autoComplete = controller.useMemo(function (s) {
+    return s.autoComplete;
+  }, []);
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      options = _React$useState2[0],
+      setOptions = _React$useState2[1];
+
   var onChange = React.useCallback(function (e) {
     var event = _objectSpread2({}, e);
 
     props.onChange && props.onChange(event);
   }, []);
+  var onSearch = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(searchText) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!autoComplete.onItemNameSearch) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.t0 = setOptions;
+              _context.next = 5;
+              return autoComplete.onItemNameSearch(searchText);
+
+            case 5:
+              _context.t1 = _context.sent;
+              (0, _context.t0)(_context.t1);
+
+            case 7:
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t2 = _context["catch"](0);
+              setOptions([]);
+              throw _context.t2;
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [autoComplete.onItemNameSearch]);
+  var onChangeAutoComplete = React.useCallback(function (itemName) {
+    var _controller$state$goo;
+
+    var good = options.filter(function (e) {
+      return e.itemName === itemName;
+    });
+    (_controller$state$goo = controller.state.goodsListState.form) === null || _controller$state$goo === void 0 ? void 0 : _controller$state$goo.setFieldsValue(good);
+  }, [options, controller]);
   return React.createElement("div", {
     className: 'kts-invoice-operate-goods-list-itemName-input'
   }, props.shorthand && React.createElement("span", {
@@ -10161,14 +10230,22 @@ function ItemNameInput(props) {
       alignSelf: 'center',
       fontSize: 12
     }
-  }, "*", props.shorthand, "*"), React.createElement(Input, {
+  }, "*", props.shorthand, "*"), React.createElement(AutoComplete$1, {
+    onSearch: onSearch,
+    options: options.map(function (e) {
+      return {
+        value: e.itemName
+      };
+    }),
+    onChange: onChangeAutoComplete
+  }, React.createElement(Input, {
     style: {
       height: '100%',
       border: 'none'
     },
     value: props.value,
     onChange: onChange
-  }));
+  })));
 }
 
 /** 拆分全称加简称 */
@@ -10475,7 +10552,7 @@ var useColumns = (function (form) {
           return React.createElement(Form.Item, null, getFieldDecorator('unit', {
             initialValue: editGood.unit,
             rules: getReplenishRules('unit')
-          })(React.createElement(AutoComplete, {
+          })(React.createElement(AutoComplete$2, {
             style: {
               width: '100%'
             },
@@ -19438,7 +19515,6 @@ var ImportGoodsDrawer = (function () {
     return s.goodsListState.importGoods.topExpand;
   }, []);
   var onClose = React.useCallback(function () {
-    console.log('===> 关闭抽屉');
     controller.pipeline( /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(s) {
         return _regeneratorRuntime().wrap(function _callee$(_context) {

package/dist/index.js

@@ -1090,6 +1090,13 @@ var Stakeholder = /*#__PURE__*/_createClass(function Stakeholder() {
   this.rulesMap = void 0;
 });
 
+/** 自动补全 */
+var AutoComplete = /*#__PURE__*/_createClass(function AutoComplete() {
+  _classCallCheck(this, AutoComplete);
+
+  this.onItemNameSearch = void 0;
+});
+
 var InvoiceControllerState = /*#__PURE__*/_createClass(function InvoiceControllerState() {
   _classCallCheck(this, InvoiceControllerState);
 
@@ -1104,6 +1111,7 @@ var InvoiceControllerState = /*#__PURE__*/_createClass(function InvoiceControlle
   this.priceIntegerDigit = void 0;
   this.rootElement = null;
   this.typeModalProps = void 0;
+  this.autoComplete = new AutoComplete();
 });
 
 /**
@@ -10155,15 +10163,76 @@ var TitleText = (function (props) {
   }, "*") : React__default['default'].createElement(React__default['default'].Fragment, null), children);
 });
 
-var css_248z$6 = ".kts-invoice-operate-goods-list-itemName-input {\n  display: flex;\n  flex: 1;\n  padding-left: 10px;\n  height: 31px;\n}\n.has-error .kts-invoice-operate-goods-list-itemName-input {\n  border: 1px solid #f5222d;\n}\n";
+var css_248z$6 = ".kts-invoice-operate-goods-list-itemName-input {\n  display: flex;\n  flex: 1;\n  padding-left: 10px;\n  height: 31px;\n}\n.kts-invoice-operate-goods-list-itemName-input .ktsAntX-select {\n  width: 100%;\n}\n.kts-invoice-operate-goods-list-itemName-input .ktsAntX-select .ktsAntX-select-selector {\n  height: 100%;\n}\n.has-error .kts-invoice-operate-goods-list-itemName-input {\n  border: 1px solid #f5222d;\n}\n";
 styleInject(css_248z$6);
 
 function ItemNameInput(props) {
+  var controller = Invoice.useInvoiceController();
+  var autoComplete = controller.useMemo(function (s) {
+    return s.autoComplete;
+  }, []);
+
+  var _React$useState = React__default['default'].useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      options = _React$useState2[0],
+      setOptions = _React$useState2[1];
+
   var onChange = React__default['default'].useCallback(function (e) {
     var event = _objectSpread2({}, e);
 
     props.onChange && props.onChange(event);
   }, []);
+  var onSearch = React__default['default'].useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(searchText) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!autoComplete.onItemNameSearch) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.t0 = setOptions;
+              _context.next = 5;
+              return autoComplete.onItemNameSearch(searchText);
+
+            case 5:
+              _context.t1 = _context.sent;
+              (0, _context.t0)(_context.t1);
+
+            case 7:
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t2 = _context["catch"](0);
+              setOptions([]);
+              throw _context.t2;
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [autoComplete.onItemNameSearch]);
+  var onChangeAutoComplete = React__default['default'].useCallback(function (itemName) {
+    var _controller$state$goo;
+
+    var good = options.filter(function (e) {
+      return e.itemName === itemName;
+    });
+    (_controller$state$goo = controller.state.goodsListState.form) === null || _controller$state$goo === void 0 ? void 0 : _controller$state$goo.setFieldsValue(good);
+  }, [options, controller]);
   return React__default['default'].createElement("div", {
     className: 'kts-invoice-operate-goods-list-itemName-input'
   }, props.shorthand && React__default['default'].createElement("span", {
@@ -10171,14 +10240,22 @@ function ItemNameInput(props) {
       alignSelf: 'center',
       fontSize: 12
     }
-  }, "*", props.shorthand, "*"), React__default['default'].createElement(ktsComponentsAntdX3.Input, {
+  }, "*", props.shorthand, "*"), React__default['default'].createElement(ktsXui.AutoComplete, {
+    onSearch: onSearch,
+    options: options.map(function (e) {
+      return {
+        value: e.itemName
+      };
+    }),
+    onChange: onChangeAutoComplete
+  }, React__default['default'].createElement(ktsComponentsAntdX3.Input, {
     style: {
       height: '100%',
       border: 'none'
     },
     value: props.value,
     onChange: onChange
-  }));
+  })));
 }
 
 /** 拆分全称加简称 */
@@ -19448,7 +19525,6 @@ var ImportGoodsDrawer = (function () {
     return s.goodsListState.importGoods.topExpand;
   }, []);
   var onClose = React__default['default'].useCallback(function () {
-    console.log('===> 关闭抽屉');
     controller.pipeline( /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(s) {
         return _regeneratorRuntime().wrap(function _callee$(_context) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "3.2.18",
+  "version": "3.2.19",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/Invoice/InvoiceController/InvoiceControllerState/AutoComplete/index.ts

@@ -0,0 +1,8 @@
+import IGood from "../GoodsListState/IGood";
+
+/** 自动补全 */
+export default class AutoComplete {
+
+    /** 商品名称自动补全 */
+    onItemNameSearch?: (searchText: string) => Promise<IGood[]>
+}

package/src/Invoice/InvoiceController/InvoiceControllerState/index.ts

@@ -2,6 +2,7 @@ import GoodsListState from './GoodsListState';
 import BuyerState from './BuyerState';
 import Stakeholder from './Stakeholder';
 import { IInvoiceTypeModalProps } from '../../../InvoiceTypeModal';
+import AutoComplete from './AutoComplete';
 
 export default class InvoiceControllerState {
 
@@ -53,4 +54,7 @@ export default class InvoiceControllerState {
 
   /** 发票类型选择窗口 */
   typeModalProps?: IInvoiceTypeModalProps;
+
+  /** 自动补全 */
+  autoComplete = new AutoComplete();
 }

package/src/Invoice/_test/setDataSource/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Invoice } from '../../../..';
+import Invoice from '../..';
 
 const InvoiceController = Invoice.InvoiceController;
 
@@ -16,6 +16,18 @@ export default () => {
  * 继承 InvoiceController 并重写需要重写的方法
  */
 class MyInvoiceController extends InvoiceController {
+
+  constructor() {
+    super();
+    this.state.autoComplete.onItemNameSearch = async text => {
+      const sum: { value: string }[] = []
+      for (let index = 0; index < 10; index++) {
+        sum.push({ value: `xxxx${index}` })
+      }
+      return sum;
+    }
+  }
+
   updateInvoiceNo = this.pipeline(async s => {
     return '--';
   })

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/ItemNameInput/index.less

@@ -3,8 +3,16 @@
   flex        : 1;
   padding-left: 10px;
   height      : 31px;
+
+  .ktsAntX-select {
+    width: 100%;
+
+    .ktsAntX-select-selector{
+      height: 100%;
+    }
+  }
 }
 
-.has-error .kts-invoice-operate-goods-list-itemName-input{
+.has-error .kts-invoice-operate-goods-list-itemName-input {
   border: 1px solid #f5222d;
 }

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/ItemNameInput/index.tsx

@@ -1,19 +1,45 @@
 
 import { Input } from 'kts-components-antd-x3';
 import React, { ChangeEvent } from 'react';
+import { AutoComplete } from 'kts-xui';
+import { IGood, Invoice } from '../../../../../../../..';
 import './index.less';
 
 export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLInputElement>) => void, value?: string, shorthand?: string }) {
 
+    const controller = Invoice.useInvoiceController();
+
+    const autoComplete = controller.useMemo(s => s.autoComplete, [])
+
+    const [options, setOptions] = React.useState<IGood[]>([])
+
     const onChange = React.useCallback((e: ChangeEvent<HTMLInputElement>) => {
         const event = { ...e };
         props.onChange && props.onChange(event);
     }, [])
 
+    const onSearch = React.useCallback(async (searchText: string) => {
+        try {
+            if (autoComplete.onItemNameSearch) {
+                setOptions(await autoComplete.onItemNameSearch(searchText))
+            }
+        } catch (error) {
+            setOptions([])
+            throw error;
+        }
+    }, [autoComplete.onItemNameSearch])
+
+    const onChangeAutoComplete = React.useCallback(itemName => {
+        const good = options.filter(e=>e.itemName === itemName);
+        controller.state.goodsListState.form?.setFieldsValue(good);
+    }, [options, controller])
+
     return (
         <div className='kts-invoice-operate-goods-list-itemName-input'>
             {props.shorthand && <span style={{ alignSelf: 'center', fontSize: 12 }} >*{props.shorthand}*</span>}
-            <Input style={{ height: '100%', border: 'none' }} value={props.value} onChange={onChange} />
+            <AutoComplete onSearch={onSearch} options={options.map(e => ({ value: e.itemName }))} onChange={onChangeAutoComplete} >
+                <Input style={{ height: '100%', border: 'none' }} value={props.value} onChange={onChange} />
+            </AutoComplete>
         </div>
     )
 }

package/src/Invoice/ui/default/ImportGoodsDrawer/index.tsx

@@ -14,7 +14,6 @@ export default () => {
   const topExpand = controller.useMemo(s => s.goodsListState.importGoods.topExpand, []);
 
   const onClose = React.useCallback(() => {
-    console.log('===> 关闭抽屉');
     controller.pipeline(async s => { s.goodsListState.importGoods.isVisibleDrawer = false })();
   }, [controller]);