kts-component-invoice-operate 3.2.18 → 3.2.20

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;
+    })[0];
+    good && ((_controller$state$goo = controller.state.goodsListState.form) === null || _controller$state$goo === void 0 ? void 0 : _controller$state$goo.setFieldsValue(removeNullUndefined(good)));
+  }, [options, controller]);
   return React.createElement("div", {
     className: 'kts-invoice-operate-goods-list-itemName-input'
   }, props.shorthand && React.createElement("span", {
@@ -10161,14 +10230,34 @@ 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
-  }));
+  })));
+}
+
+function removeNullUndefined(obj) {
+  var filteredObj = {};
+
+  for (var key in obj) {
+    if (obj[key] !== null && obj[key] !== undefined) {
+      filteredObj[key] = obj[key];
+    }
+  }
+
+  return filteredObj;
 }
 
 /** 拆分全称加简称 */
@@ -10475,7 +10564,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 +19527,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;
+    })[0];
+    good && ((_controller$state$goo = controller.state.goodsListState.form) === null || _controller$state$goo === void 0 ? void 0 : _controller$state$goo.setFieldsValue(removeNullUndefined(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,34 @@ 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
-  }));
+  })));
+}
+
+function removeNullUndefined(obj) {
+  var filteredObj = {};
+
+  for (var key in obj) {
+    if (obj[key] !== null && obj[key] !== undefined) {
+      filteredObj[key] = obj[key];
+    }
+  }
+
+  return filteredObj;
 }
 
 /** 拆分全称加简称 */
@@ -19448,7 +19537,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.20",
   "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,57 @@ export default () => {
  * 继承 InvoiceController 并重写需要重写的方法
  */
 class MyInvoiceController extends InvoiceController {
+
+  constructor() {
+    super();
+    this.state.autoComplete.onItemNameSearch = async text => {
+      return [
+        {
+          "itemName": "呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵",
+          "taxClassificationCode": "1010112070000000000",
+          "itemModelName": null,
+          "shorthand": "蔬菜",
+          "taxRate": undefined
+        },
+        {
+          "itemName": "稻谷",
+          "taxClassificationCode": "1010101040000000000",
+          "itemModelName": null,
+          "shorthand": "谷物",
+          "taxRate": 3
+        },
+        {
+          "itemName": "苹果",
+          "taxClassificationCode": "1090111090000000000",
+          "itemModelName": null,
+          "shorthand": "小型起重设备",
+          "taxRate": null
+        },
+        {
+          "itemName": "银丝",
+          "taxClassificationCode": "1080411120000000000",
+          "itemModelName": null,
+          "shorthand": "金属制品",
+          "taxRate": 3
+        },
+        {
+          "itemName": "布料",
+          "taxClassificationCode": "1100101011100000000",
+          "itemModelName": null,
+          "shorthand": "发电",
+          "taxRate": 2
+        },
+        {
+          "itemName": "苹果",
+          "taxClassificationCode": "1010115010100000000",
+          "itemModelName": null,
+          "shorthand": "水果",
+          "taxRate": 3
+        }
+      ] as any
+    }
+  }
+
   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,58 @@
 
 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)[0];
+        good && controller.state.goodsListState.form?.setFieldsValue(removeNullUndefined(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>
     )
 }
+
+
+function removeNullUndefined(obj: Record<string, any>): Record<string, any> {
+    const filteredObj: Record<string, any> = {};
+  
+    for (const key in obj) {
+      if (obj[key] !== null && obj[key] !== undefined) {
+        filteredObj[key] = obj[key];
+      }
+    }
+  
+    return filteredObj;
+  }

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]);