kts-component-invoice-operate 3.0.7 → 3.0.9

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, AutoComplete, Select, Typography, Button, Input, Spin, Tooltip } from 'kts-components-antd-x3';
+import { Form, AutoComplete, Select, Button, Input, Spin, Tooltip } from 'kts-components-antd-x3';
 import { InputProps } from 'kts-components-antd-x3/lib/input';
 import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
 import { IGood } from '../../../../InvoiceController';
@@ -15,8 +15,7 @@ import {
   onChangeTaxRate,
   onChangeItemName,
 } from './autoFillFn';
-
-const { Text } = Typography;
+import ItemNameInput from './ui/ItemNameInput';
 
 export default (form: WrappedFormUtils) => {
   const { getFieldDecorator, getFieldValue } = form;
@@ -93,12 +92,17 @@ export default (form: WrappedFormUtils) => {
                       }
                     ]
                   })(
-                    <MyInput
-                      style={{ flex: 1 }}
+                    // <MyInput
+                    //   style={{ flex: 1 }}
+                    //   onChange={() => {
+                    //     onChangeItemName(controller, form, record);
+                    //   }}
+                    // />,
+                    <ItemNameInput
                       onChange={() => {
                         onChangeItemName(controller, form, record);
                       }}
-                    />,
+                    />
                   )}
                   <div className="kts-invoice-operate-goods-list-able-list-itemName-import">
                     {controller.getGoodsList && model !== 'readOnly' && (

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

@@ -0,0 +1,10 @@
+.kts-invoice-operate-goods-list-itemName-input {
+  display     : flex;
+  flex        : 1;
+  padding-left: 10px;
+  height      : 31px;
+}
+
+.has-error .kts-invoice-operate-goods-list-itemName-input{
+  border: 1px solid #f5222d;
+}

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

@@ -0,0 +1,34 @@
+
+import { Input } from 'kts-components-antd-x3';
+import React, { ChangeEvent } from 'react';
+import './index.less';
+
+export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLInputElement>) => void, value?: string }) {
+
+    const { shorthand, fullName } = getShorthand(props.value);
+
+    const onChange = React.useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        const event = { ...e };
+        event.target.value = shorthand ? `*${shorthand}*${e.target.value}` : e.target.value
+        props.onChange && props.onChange(event);
+    }, [])
+
+    return (
+        <div className='kts-invoice-operate-goods-list-itemName-input'>
+            {shorthand && <span style={{ alignSelf: 'center', fontSize: 12 }} >*{shorthand}*</span>}
+            <Input style={{ height: '100%', border: 'none' }} value={fullName} onChange={onChange} />
+        </div>
+    )
+}
+
+/** 提取简称 */
+const getShorthand = (value?: string) => {
+    if (!value) return {};
+    const arr = value.match(/\*[^*]+\*/);
+
+    const shorthand = arr ? arr[0].split('*')[1] : '';
+    const fullName = shorthand ? value.replace(`*${shorthand}*`, '') : value;
+
+    return { shorthand, fullName }
+};
+

package/src/Invoice/ui/GoodsList/hook/useOnRow/index.tsx

@@ -24,6 +24,7 @@ export default () => {
       if (editGood) {
         if (editGood.$index === record.$index) return;
         await controller.saveEditGood();
+        await controller.wait();
         await controller.pipeline(async s => { s.goodsListState.editGood || (await controller.setEditGood(record)) })();
       } else {
         await controller.setEditGood(record);