kts-component-invoice-operate 3.2.60 → 3.2.61

package/src/Invoice/ui/default/GoodsList/ui/TableRow/index.less

@@ -1,4 +1,4 @@
-.kts-invoice-operate-goods-list-itemName-drag-container {
+.kts-invoice-operate-goods-list-itemName-drag-container-u {
   position: relative;
 
   &::after {
@@ -11,4 +11,19 @@
     top       : 0;
     z-index   : 9999;
   }
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-container-d {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    bottom    : 0;
+    z-index   : 9999;
+  }
 }

package/src/Invoice/ui/default/GoodsList/ui/TableRow/index.tsx

@@ -12,8 +12,13 @@ export default function TableRow(props: any) {
 
     const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
 
+    /** 当前拖动中的货品索引 */
     const current = controller.useMemo(s => s.goodsListState.drag.current, [])
 
+    /** 当前拖动中的货品索引 */
+    const site = controller.useMemo(s => s.goodsListState.drag.site, [])
+
+    /** 准备插入的货物索引 */
     const container = controller.useMemo(s => s.goodsListState.drag.container, [])
 
     const good = React.useMemo(() => goodsMap?.get(rowKey), [rowKey, goodsMap])
@@ -40,7 +45,13 @@ export default function TableRow(props: any) {
             ) : (
                 <tr
                     {...props}
-                    className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : undefined)}
+                    className={classnames(
+                        props.className,
+                        discount,
+                        (rowKey === container && current)
+                            ? 'kts-invoice-operate-goods-list-itemName-drag-container-' + site
+                            : undefined
+                    )}
                 />
             )
     )

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

@@ -7,6 +7,7 @@ import { IGood, Invoice } from '../../../../../../../..';
 import mounting from "../../../../../../../tools/mounting";
 import { LineAttributeType } from "../../../../../../../InvoiceController";
 import './index.less';
+import { Popover } from "kts-xui";
 
 export interface IDragProps {
     record: IGood
@@ -16,6 +17,8 @@ export default function Drag(props: IDragProps) {
 
     const { record } = props;
 
+    const [open, setOpen] = React.useState(false)
+
     const controller = Invoice.useInvoiceController();
 
     const editGood = controller.useMemo(s => s.goodsListState.editGood, []);
@@ -23,7 +26,7 @@ export default function Drag(props: IDragProps) {
     const disabled = React.useMemo(() => !!editGood, [editGood]);
 
     const onMouseDown = React.useCallback(() => {
-        if (!controller || !record) return;
+        if (!controller || !record || disabled) return;
         controller.run(async s => s.goodsListState.drag.current = record.$index);
 
         const rowList = window.document.querySelectorAll<HTMLDivElement>('.kts-invoice-operate-goods-list-digtal');
@@ -31,32 +34,30 @@ export default function Drag(props: IDragProps) {
         const currentGood = controller.state.goodsListState.goodsList.filter(e => e.$index === record.$index)[0];
         mounting(<DragDiv {...currentGood} />)
 
-        // 监听移动
-        rowList.forEach(e => { e.addEventListener('mouseover', onMouseover) });
-        function onMouseover(e: MouseEvent) {
+        rowList.forEach(e => { e.addEventListener('mousemove', onMousemove) });
+        function onMousemove(e: MouseEvent) {
             controller.run(async s => {
-                const container = s.goodsListState.drag.container = getRow(e.target)?.dataset?.rowKey;
-                if (!container) return;
+                const rowDom = getRow(e.target);
+                const container = s.goodsListState.drag.container = rowDom?.dataset?.rowKey;
+
+                /** 准备插入的货物 */
+                const row = s.goodsListState.goodsMap.get(container); if (!row) return;
 
                 // 不可以插入自己
                 if (container === s.goodsListState.drag.current) {
-                    s.goodsListState.drag.container = undefined;
-                    return;
+                    return s.goodsListState.drag.container = undefined;
                 }
 
-                const currentGood = s.goodsListState.drag.current && s.goodsListState.goodsMap.get(s.goodsListState.drag.current);
-                if (!currentGood) return;
-
-                const row = s.goodsListState.goodsMap.get(container);
-                if (!row) return;
+                /** 当前拖动中的货品 */
+                const currentGood = s.goodsListState.drag.current && s.goodsListState.goodsMap.get(s.goodsListState.drag.current); if (!currentGood) return;
 
                 // 折扣行 不可以插入 自己的被折扣行
                 if (currentGood.lineAttribute === LineAttributeType.折扣行) {
                     const currentIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(currentGood.$index)
                     const containerIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(row.$index)
                     if (currentIndex - 1 === containerIndex) {
-                        s.goodsListState.drag.container = undefined;
-                        return;
+                        return s.goodsListState.drag.container = undefined;
+
                     }
                 }
 
@@ -65,8 +66,7 @@ export default function Drag(props: IDragProps) {
                     const currentIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(currentGood.$index)
                     const containerIndex = s.goodsListState.goodsList.map(e => e.$index).indexOf(row.$index)
                     if (currentIndex + 1 === containerIndex) {
-                        s.goodsListState.drag.container = undefined;
-                        return;
+                        return s.goodsListState.drag.container = undefined;
                     }
                 }
 
@@ -74,8 +74,15 @@ export default function Drag(props: IDragProps) {
                 if (row.lineAttribute === LineAttributeType.折扣行) {
                     const t = s.goodsListState.goodsList.map(e => e.$index).indexOf(container) - 1;
                     s.goodsListState.drag.container = s.goodsListState.goodsList[t].$index;
+                    s.goodsListState.drag.site = 'u'
+                } else if (row.lineAttribute === LineAttributeType.被折扣行) {
+                    s.goodsListState.drag.site = 'd'
+                } else {
+                    const rect = rowDom.getBoundingClientRect();
+                    const mouseY = e.clientY - rect.top;
+                    s.goodsListState.drag.site = mouseY > 25 ? 'd' : 'u';
                 }
-            });
+            })
 
             const getRow = (t: any): any => {
                 try {
@@ -85,7 +92,7 @@ export default function Drag(props: IDragProps) {
                         return getRow(t.parentNode);
                     }
                 } catch (error) {
-                    return undefined
+                    return undefined;
                 }
             }
         }
@@ -96,7 +103,7 @@ export default function Drag(props: IDragProps) {
             insert();
             controller.run(async s => s.goodsListState.drag.current = undefined);
             window.removeEventListener('mouseup', onMouseup);
-            rowList.forEach(e => { e.removeEventListener('mouseover', onMouseover) });
+            rowList.forEach(e => { e.removeEventListener('mousemove', onMousemove) });
             // window.document.body.removeChild(rowDiv);
         }
 
@@ -104,7 +111,7 @@ export default function Drag(props: IDragProps) {
         function insert() {
             mounting(<></>);
             controller.run(async s => {
-                const { container, current } = s.goodsListState.drag;
+                const { container, current, site } = s.goodsListState.drag;
                 if (!container || !current) return;
                 if (container !== current) {
                     const goodsList = s.goodsListState.goodsList;
@@ -122,7 +129,7 @@ export default function Drag(props: IDragProps) {
 
                     (() => {
                         const g = s.goodsListState.goodsList.filter(e => moveGoods.indexOf(e.$index) < 0);
-                        const t = g.map(e => e.$index).indexOf(container);
+                        const t = site === 'u' ? g.map(e => e.$index).indexOf(container) : g.map(e => e.$index).indexOf(container) + 1;
                         const m = moveGoods.map(e => goodsMap.get(e)).filter(e => !!e) as IGood[];
                         s.goodsListState.goodsList = (g.splice.apply(g, [t, 0, ...m]), g);
                     })()
@@ -135,20 +142,32 @@ export default function Drag(props: IDragProps) {
                 s.goodsListState.drag.current = undefined;
             })
         }
-    }, [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>
-    )
+    }, [controller, record, disabled])
+
+    const renderButton = React.useMemo(() => {
+        return (
+            <Button
+                type='link'
+                style={{ padding: 0 }}
+                onMouseDown={onMouseDown}
+                onClick={e => { e.stopPropagation() }}
+                className={"kts-invoice-operate-goods-list-itemName-drag"}
+                onMouseOver={controller.saveEditGood}
+            >
+                <Icon component={I001Svg} />
+            </Button>
+        )
+    }, [onMouseDown, controller])
+
+    if (disabled) {
+        return (
+            <Popover content={'您还有未编辑完成的商品'} trigger='focus' >
+                {renderButton}
+            </Popover>
+        )
+    } else {
+        return renderButton;
+    }
 }
 
 function DragDiv(props: IGood) {
@@ -169,7 +188,7 @@ function DragDiv(props: IGood) {
     // 移动事件
     React.useEffect(() => {
 
-        function onMousemove(e: MouseEvent) { setY(e.clientY - 25) };
+        function onMousemove(e: MouseEvent) { setY(e.clientY - 15) };
 
         window.addEventListener('mousemove', onMousemove);
         return () => {

package/src/Invoice/ui/digtal/GoodsList/ui/TableRow/index.less

@@ -1,4 +1,4 @@
-.kts-invoice-operate-goods-list-itemName-drag-container {
+.kts-invoice-operate-goods-list-itemName-drag-container-u {
   position: relative;
 
   &::after {
@@ -11,4 +11,19 @@
     top       : 0;
     z-index   : 9999;
   }
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-container-d {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    bottom    : 0;
+    z-index   : 9999;
+  }
 }

package/src/Invoice/ui/digtal/GoodsList/ui/TableRow/index.tsx

@@ -12,6 +12,9 @@ export default function TableRow(props: any) {
 
     const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
 
+    /** 当前拖动中的货品索引 */
+    const site = controller.useMemo(s => s.goodsListState.drag.site, [])
+
     const current = controller.useMemo(s => s.goodsListState.drag.current, [])
 
     const container = controller.useMemo(s => s.goodsListState.drag.container, [])
@@ -36,6 +39,16 @@ export default function TableRow(props: any) {
                 <div style={{ height: 0.5, width: '100%', background: '#E6E6E6', position: 'absolute', bottom: 0 }} />
             </tr>
         ) : (
-            <tr {...props} className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : '')} />
+            // <tr {...props} className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : '')} />
+            <tr
+                {...props}
+                className={classnames(
+                    props.className,
+                    discount,
+                    (rowKey === container && current)
+                        ? 'kts-invoice-operate-goods-list-itemName-drag-container-' + site
+                        : undefined
+                )}
+            />
         )
 }