kts-component-invoice-operate 3.2.27 → 3.2.28

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

@@ -7,6 +7,7 @@ import Invoice from '../../../../..';
 import RowMenu from './ui/RowMenu';
 import TitleText from './ui/TitleText';
 import ItemNameInput from './ui/ItemNameInput';
+import ItemCodeInput from './ui/ItemCodeInput';
 import {
   onChangeQuantity,
   onChangePriceIncludeTax,
@@ -15,8 +16,10 @@ import {
   onChangeLineAmountExcludeTax,
   onChangeTaxRate,
   onChangeItemName,
+  onChangeItemCode,
 } from './autoFillFn';
 import { getItemNameWithShorthand } from '../../../../../tools/itemName';
+import Drag from './ui/Drag';
 
 export default (form: WrappedFormUtils) => {
   const { getFieldDecorator, getFieldValue } = form;
@@ -77,6 +80,13 @@ export default (form: WrappedFormUtils) => {
   /** 表头 */
   const columns = React.useMemo(() => {
     return [
+      // {
+      //   title: ' ',
+      //   key: 'drag',
+      //   width: 40,
+      //   align: 'center',
+      //   render: (_: any, record: IGood) => <Drag record={record} />
+      // },
       {
         title: '序号',
         key: 'serialNo',
@@ -84,6 +94,31 @@ export default (form: WrappedFormUtils) => {
         width: 50,
         render: (e: number) => <span style={{ padding: '0 10px' }}>{e}</span>,
       },
+      {
+        title: '商品编码',
+        key: 'itemCode',
+        width: 119,
+        render: (_: string, record: IGood) => {
+          if (editGood?.$index === record.$index) {
+            return (
+              <Form.Item>
+                {getFieldDecorator('itemCode', {
+                  initialValue: editGood.itemCode,
+                })(
+                  <ItemCodeInput
+                    shorthand={editGood.shorthand}
+                    onChange={() => {
+                      onChangeItemCode(controller, form, record);
+                    }}
+                  />
+                )}
+              </Form.Item>
+            )
+          } else {
+            return record.itemCode
+          }
+        }
+      },
       {
         title: <TitleText required >项目名称</TitleText>,
         key: 'itemName',
@@ -141,26 +176,6 @@ export default (form: WrappedFormUtils) => {
           }
         },
       },
-      {
-        title: '商品编码',
-        key: 'itemCode',
-        width: 119,
-        render: (_: string, record: IGood) => {
-          if (editGood?.$index === record.$index) {
-            return (
-              <Form.Item>
-                {getFieldDecorator('itemCode', {
-                  initialValue: editGood.itemCode,
-                })(
-                  <MyInput />,
-                )}
-              </Form.Item>
-            )
-          } else {
-            return record.itemCode
-          }
-        }
-      },
       {
         title: <TitleText rules={columnsReplenish['itemModelName']?.rules} >规格型号</TitleText>,
         key: 'itemModelName',
@@ -521,7 +536,7 @@ export default (form: WrappedFormUtils) => {
       },
     ]
       // 筛选隐藏
-      .filter(e => {  
+      .filter(e => {
         return e.key ? columnshide.indexOf(e.key) < 0 : false;
       })
       // 含税不含税
@@ -547,13 +562,6 @@ export default (form: WrappedFormUtils) => {
         };
       }) as any[];
   }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow, searchValue, model, columnsReplenish, columnshide]);
-
-  // React.useEffect(() => {
-  //   clearTimeout(t)
-  //   const t = setTimeout(() => { setChangeField('') }, 1000);
-  //   return () => { clearTimeout(t) }
-  // }, [changeField]);
-
   return columns;
 };
 
@@ -578,7 +586,6 @@ class MyInput extends React.Component<InputProps & { loading?: boolean }> {
 }
 
 class MyDiv extends React.Component<{ value?: any, loading?: boolean }> {
-
   render() {
     if (this.props.loading) {
       return (
@@ -645,4 +652,4 @@ function ucoding(v: string): string {
 /** 解码 */
 function dcoding(v: string): string {
   return v.split('U').map(e => e ? String.fromCharCode(parseInt(e.replace('E', ''))) : '').join('');
-}
+}

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

@@ -0,0 +1,3 @@
+.kts-invoice-operate-goods-list-itemName-drag {
+  cursor: all-scroll;
+}

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

@@ -0,0 +1,49 @@
+
+import React from "react";
+import Icon from '@ant-design/icons';
+import { ReactComponent as I001Svg } from './svg/I001.svg';
+import { Button } from "kts-components-antd-x3";
+import { IGood, Invoice } from '../../../../../../../..';
+import './index.less';
+
+
+export interface IDragProps {
+    record: IGood
+}
+
+export default function Drag(props: IDragProps) {
+
+    const { record } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const editGood = controller.useMemo(s => s.goodsListState.editGood, []);
+
+    const current = controller.useMemo(s => s.goodsListState.drag.current, []);
+
+    const disabled = React.useMemo(() => !!editGood, [editGood]);
+
+    const onMouseDown = React.useCallback(() => {
+        if (!controller || !record) return;
+        controller.run(async s => s.goodsListState.drag.current = record.$index);
+        window.addEventListener('mouseup', onMouseup);
+
+        function onMouseup() {
+            controller.run(async s => s.goodsListState.drag.current = undefined);
+            window.removeEventListener('mouseup', onMouseup);
+        }
+    }, [controller, record])
+
+    return (
+        <Button
+            type='link'
+            style={{ padding: 0 }}
+            disabled={disabled}
+            onMouseDown={onMouseDown}
+            onClick={e => { e.stopPropagation() }}
+            className={"kts-invoice-operate-goods-list-itemName-drag"}
+        >
+            <Icon component={I001Svg} />
+        </Button>
+    )
+}

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/Drag/svg/I001.svg

@@ -0,0 +1 @@
+<svg t="1694426134787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4024" width="200" height="200"><path d="M304.87387614-5.81530905h123.75785957v123.75785958H304.87387614V-5.81530905z m281.27727647 0h123.75785836v123.75785958h-123.75785836V-5.81530905zM304.87387614 286.75034075h123.75785957v123.75785835H304.87387614V286.75034075z m281.27727647 0h123.75785836v123.75785835h-123.75785836V286.75034075zM304.87387614 579.21242666h123.75785957v123.75785957H304.87387614v-123.75785957z m281.27727647 0h123.75785836v123.75785957h-123.75785836v-123.75785957zM304.87387614 871.82985838h123.75785957v123.75785837H304.87387614v-123.75785837z m281.27727647 0h123.75785836v123.75785837h-123.75785836v-123.75785837z" p-id="4025"></path></svg>

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

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

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

@@ -0,0 +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 ItemCodeInput(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.onItemCodeSearch) {
+                setOptions(await autoComplete.onItemCodeSearch(searchText))
+            }
+        } catch (error) {
+            setOptions([])
+            throw error;
+        }
+    }, [autoComplete.onItemCodeSearch])
+
+    const onChangeAutoComplete = React.useCallback(itemName => {
+        const record = options.filter(e => e.itemCode === itemName)[0] as any;
+        if (!record) return;
+    }, [options, controller])
+
+    return (
+        <div className='kts-invoice-operate-goods-list-itemCode-input'>
+            {props.shorthand && <span style={{ alignSelf: 'center', fontSize: 12 }} >*{props.shorthand}*</span>}
+            <AutoComplete onSearch={onSearch} options={options.map(e => ({ value: e.itemCode }))} onChange={onChangeAutoComplete} >
+                <Input style={{ height: '100%', border: 'none' }} value={props.value} onChange={onChange} />
+            </AutoComplete>
+        </div>
+    )
+}

package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/hooks/useMergeDetails/index.tsx

@@ -8,7 +8,7 @@ export default function useMergeDetails() {
 
     const controller = Invoice.useInvoiceController();
 
-    const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
+    const selectedGoodIndex = controller.useMemo(s => s.goodsListState.selectedGoodIndex, []);
 
     const isMergeDetails = controller.useMemo(s => s.goodsListState.isMergeDetails, []);
 
@@ -23,15 +23,15 @@ export default function useMergeDetails() {
         return (
             <Button
                 onClick={onClick}
-                disabled={goodsList.length <= 1}
+                disabled={selectedGoodIndex.length <= 1}
             >
                 合并明细
             </Button>
         )
-    }, [goodsList.length])
+    }, [selectedGoodIndex.length])
 
     return {
         /** 按钮 */
         button,
     }
-}
+}