kts-component-invoice-operate 3.2.215 → 3.2.217-chinaship

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

@@ -1,21 +1,21 @@
-.kts-invoice-operate-goods-list-itemName-drag {
-  cursor: all-scroll;
-
-
-}
-
-.kts-invoice-operate-goods-list-itemName-drag-div {
-  z-index       : 999;
-  border        : 1px solid #E6E6E6;
-  width         : 400px;
-  height        : 32px;
-  display       : flex;
-  gap           : 10px;
-  align-items   : center;
-  position      : fixed;
-  padding       : 0 20px;
-  top           : 100px;
-  background    : #fff;
-  pointer-events: none;
-  opacity       : 0.4;
+.kts-invoice-operate-goods-list-itemName-drag {
+  cursor: all-scroll;
+
+
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-div {
+  z-index       : 999;
+  border        : 1px solid #E6E6E6;
+  width         : 400px;
+  height        : 32px;
+  display       : flex;
+  gap           : 10px;
+  align-items   : center;
+  position      : fixed;
+  padding       : 0 20px;
+  top           : 100px;
+  background    : #fff;
+  pointer-events: none;
+  opacity       : 0.4;
 }

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

@@ -1,206 +1,206 @@
-
-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 mounting from "../../../../../../../tools/mounting";
-import { LineAttributeType } from "../../../../../../../InvoiceController";
-import './index.less';
-import { Popover } from "kts-xui";
-
-export interface IDragProps {
-    record: IGood
-}
-
-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, []);
-
-    const disabled = React.useMemo(() => !!editGood, [editGood]);
-
-    const onMouseDown = React.useCallback(() => {
-        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');
-
-        const currentGood = controller.state.goodsListState.goodsList.filter(e => e.$index === record.$index)[0];
-        mounting(<DragDiv {...currentGood} />)
-
-        rowList.forEach(e => { e.addEventListener('mousemove', onMousemove) });
-        function onMousemove(e: MouseEvent) {
-            controller.run(async s => {
-                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) {
-                    return s.goodsListState.drag.container = undefined;
-                }
-
-                /** 当前拖动中的货品 */
-                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) {
-                        return s.goodsListState.drag.container = undefined;
-
-                    }
-                }
-
-                // 被折扣行 不可以插入 自己的折扣行
-                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) {
-                        return s.goodsListState.drag.container = undefined;
-                    }
-                }
-
-                // 折扣行 拖动的 相当于 自己的 被折扣行
-                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 = 'd'
-                } else if (row.lineAttribute === LineAttributeType.被折扣行) {
-                    s.goodsListState.drag.site = 'u'
-                } else {
-                    const rect = rowDom.getBoundingClientRect();
-                    const mouseY = e.clientY - rect.top;
-                    s.goodsListState.drag.site = mouseY > 15 ? 'd' : 'u';
-                }
-            })
-
-            const getRow = (t: any): any => {
-                try {
-                    if (t.localName === 'tr') {
-                        return t;
-                    } else {
-                        return getRow(t.parentNode);
-                    }
-                } catch (error) {
-                    return undefined;
-                }
-            }
-        }
-
-        // 放开鼠标
-        window.addEventListener('mouseup', onMouseup);
-        function onMouseup() {
-            insert();
-            controller.run(async s => s.goodsListState.drag.current = undefined);
-            window.removeEventListener('mouseup', onMouseup);
-            rowList.forEach(e => { e.removeEventListener('mousemove', onMousemove) });
-            // window.document.body.removeChild(rowDiv);
-        }
-
-        // 开始插入
-        function insert() {
-            mounting(<></>);
-            controller.run(async s => {
-                const { container, current, site } = s.goodsListState.drag;
-                if (!container || !current) return;
-                if (container !== current) {
-                    const goodsList = s.goodsListState.goodsList;
-                    const goodsMap = s.goodsListState.goodsMap;
-                    const currentGood = goodsList.filter(e => e.$index === current)[0];
-                    const currentIndex = goodsList.map(e => e.$index).indexOf(current);
-
-                    /** 需要移动的货品列表 */
-                    let moveGoods: string[] = [current];
-                    if (currentGood.lineAttribute === LineAttributeType.被折扣行) {
-                        moveGoods = [current, goodsList[currentIndex + 1].$index];
-                    } else if (currentGood.lineAttribute === LineAttributeType.折扣行) {
-                        moveGoods = [goodsList[currentIndex - 1].$index, current];
-                    }
-
-                    (() => {
-                        const g = s.goodsListState.goodsList.filter(e => moveGoods.indexOf(e.$index) < 0);
-                        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);
-                    })()
-
-                    s.goodsListState.goodsMap = new Map();
-                    s.goodsListState.goodsList.forEach(e => { s.goodsListState.goodsMap.set(e.$index, e) });
-                }
-
-                s.goodsListState.drag.container = undefined;
-                s.goodsListState.drag.current = undefined;
-            })
-        }
-    }, [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) {
-
-    const [x, setX] = React.useState(0);
-    const [y, setY] = React.useState(-110);
-
-    const div = React.useMemo(() => window.document.querySelector(`[data-row-key="${props.$index}"]`), [props.$index])
-
-    // 初始化位置
-    React.useEffect(() => {
-        if (!div) return;
-        const rect = div.getBoundingClientRect();
-        setX(rect.left + 135);
-        setY(rect.top);
-    }, [div])
-
-    // 移动事件
-    React.useEffect(() => {
-
-        function onMousemove(e: MouseEvent) { setY(e.clientY - 15) };
-
-        window.addEventListener('mousemove', onMousemove);
-        return () => {
-            window.removeEventListener('mousemove', onMousemove);
-        }
-    })
-
-    return (
-        <div className="kts-invoice-operate-goods-list-itemName-drag-div" style={{ top: y, left: x }} >
-            <span>{props.itemName}</span>
-            <span>{props.itemModelName}</span>
-            <span>{props.unit}</span>
-        </div>
-    )
+
+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 mounting from "../../../../../../../tools/mounting";
+import { LineAttributeType } from "../../../../../../../InvoiceController";
+import './index.less';
+import { Popover } from "kts-xui";
+
+export interface IDragProps {
+    record: IGood
+}
+
+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, []);
+
+    const disabled = React.useMemo(() => !!editGood, [editGood]);
+
+    const onMouseDown = React.useCallback(() => {
+        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');
+
+        const currentGood = controller.state.goodsListState.goodsList.filter(e => e.$index === record.$index)[0];
+        mounting(<DragDiv {...currentGood} />)
+
+        rowList.forEach(e => { e.addEventListener('mousemove', onMousemove) });
+        function onMousemove(e: MouseEvent) {
+            controller.run(async s => {
+                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) {
+                    return s.goodsListState.drag.container = undefined;
+                }
+
+                /** 当前拖动中的货品 */
+                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) {
+                        return s.goodsListState.drag.container = undefined;
+
+                    }
+                }
+
+                // 被折扣行 不可以插入 自己的折扣行
+                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) {
+                        return s.goodsListState.drag.container = undefined;
+                    }
+                }
+
+                // 折扣行 拖动的 相当于 自己的 被折扣行
+                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 = 'd'
+                } else if (row.lineAttribute === LineAttributeType.被折扣行) {
+                    s.goodsListState.drag.site = 'u'
+                } else {
+                    const rect = rowDom.getBoundingClientRect();
+                    const mouseY = e.clientY - rect.top;
+                    s.goodsListState.drag.site = mouseY > 15 ? 'd' : 'u';
+                }
+            })
+
+            const getRow = (t: any): any => {
+                try {
+                    if (t.localName === 'tr') {
+                        return t;
+                    } else {
+                        return getRow(t.parentNode);
+                    }
+                } catch (error) {
+                    return undefined;
+                }
+            }
+        }
+
+        // 放开鼠标
+        window.addEventListener('mouseup', onMouseup);
+        function onMouseup() {
+            insert();
+            controller.run(async s => s.goodsListState.drag.current = undefined);
+            window.removeEventListener('mouseup', onMouseup);
+            rowList.forEach(e => { e.removeEventListener('mousemove', onMousemove) });
+            // window.document.body.removeChild(rowDiv);
+        }
+
+        // 开始插入
+        function insert() {
+            mounting(<></>);
+            controller.run(async s => {
+                const { container, current, site } = s.goodsListState.drag;
+                if (!container || !current) return;
+                if (container !== current) {
+                    const goodsList = s.goodsListState.goodsList;
+                    const goodsMap = s.goodsListState.goodsMap;
+                    const currentGood = goodsList.filter(e => e.$index === current)[0];
+                    const currentIndex = goodsList.map(e => e.$index).indexOf(current);
+
+                    /** 需要移动的货品列表 */
+                    let moveGoods: string[] = [current];
+                    if (currentGood.lineAttribute === LineAttributeType.被折扣行) {
+                        moveGoods = [current, goodsList[currentIndex + 1].$index];
+                    } else if (currentGood.lineAttribute === LineAttributeType.折扣行) {
+                        moveGoods = [goodsList[currentIndex - 1].$index, current];
+                    }
+
+                    (() => {
+                        const g = s.goodsListState.goodsList.filter(e => moveGoods.indexOf(e.$index) < 0);
+                        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);
+                    })()
+
+                    s.goodsListState.goodsMap = new Map();
+                    s.goodsListState.goodsList.forEach(e => { s.goodsListState.goodsMap.set(e.$index, e) });
+                }
+
+                s.goodsListState.drag.container = undefined;
+                s.goodsListState.drag.current = undefined;
+            })
+        }
+    }, [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) {
+
+    const [x, setX] = React.useState(0);
+    const [y, setY] = React.useState(-110);
+
+    const div = React.useMemo(() => window.document.querySelector(`[data-row-key="${props.$index}"]`), [props.$index])
+
+    // 初始化位置
+    React.useEffect(() => {
+        if (!div) return;
+        const rect = div.getBoundingClientRect();
+        setX(rect.left + 135);
+        setY(rect.top);
+    }, [div])
+
+    // 移动事件
+    React.useEffect(() => {
+
+        function onMousemove(e: MouseEvent) { setY(e.clientY - 15) };
+
+        window.addEventListener('mousemove', onMousemove);
+        return () => {
+            window.removeEventListener('mousemove', onMousemove);
+        }
+    })
+
+    return (
+        <div className="kts-invoice-operate-goods-list-itemName-drag-div" style={{ top: y, left: x }} >
+            <span>{props.itemName}</span>
+            <span>{props.itemModelName}</span>
+            <span>{props.unit}</span>
+        </div>
+    )
 }

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

@@ -1,57 +1,57 @@
-
-
-import React from 'react';
-import { Button } from 'kts-xui';
-import Icon from '@ant-design/icons';
-import { ReactComponent as I001Svg } from './svg/I001.svg';
-import { ReactComponent as I002Svg } from './svg/I002.svg';
-import { IGood, Invoice } from '../../../../../../../..';
-
-export interface IExpandProps {
-    record: IGood
-}
-
-export default function Expand(props: IExpandProps) {
-
-    const { record } = props;
-
-    const controller = Invoice.useInvoiceController();
-
-    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
-
-    const expandedRowKeys = controller.useMemo(s => s.goodsListState.expandedRowKeys, []);
-
-    if (goodsMap.get(record.$index)?.children) {
-        if (expandedRowKeys.includes(record.$index)) {
-            return (
-                <Button
-                    type='text'
-                    style={{ width: 'auto', color: "#0074ff", padding:0 }}
-                    // icon={<Icon component={I002Svg} />}
-                    onClick={controller.pipeline(async (s, e) => {
-                        e?.stopPropagation()
-                        s.goodsListState.expandedRowKeys = s.goodsListState.expandedRowKeys.filter(e => e !== record.$index)
-                    })}
-                >
-                    收起
-                </Button>
-            )
-        } else {
-            return (
-                <Button
-                    type='text'
-                    style={{ width: 'auto', color: "#0074ff", padding:0 }}
-                    // icon={<Icon component={I001Svg} />}
-                    onClick={controller.pipeline(async (s, e) => {
-                        e?.stopPropagation()
-                        s.goodsListState.expandedRowKeys = [...s.goodsListState.expandedRowKeys, record.$index]
-                    })}
-                >
-                    展开
-                </Button>
-            )
-        }
-    } else {
-        return <></>
-    }
-} 
+
+
+import React from 'react';
+import { Button } from 'kts-xui';
+import Icon from '@ant-design/icons';
+import { ReactComponent as I001Svg } from './svg/I001.svg';
+import { ReactComponent as I002Svg } from './svg/I002.svg';
+import { IGood, Invoice } from '../../../../../../../..';
+
+export interface IExpandProps {
+    record: IGood
+}
+
+export default function Expand(props: IExpandProps) {
+
+    const { record } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
+
+    const expandedRowKeys = controller.useMemo(s => s.goodsListState.expandedRowKeys, []);
+
+    if (goodsMap.get(record.$index)?.children) {
+        if (expandedRowKeys.includes(record.$index)) {
+            return (
+                <Button
+                    type='text'
+                    style={{ width: 'auto', color: "#0074ff", padding:0 }}
+                    // icon={<Icon component={I002Svg} />}
+                    onClick={controller.pipeline(async (s, e) => {
+                        e?.stopPropagation()
+                        s.goodsListState.expandedRowKeys = s.goodsListState.expandedRowKeys.filter(e => e !== record.$index)
+                    })}
+                >
+                    收起
+                </Button>
+            )
+        } else {
+            return (
+                <Button
+                    type='text'
+                    style={{ width: 'auto', color: "#0074ff", padding:0 }}
+                    // icon={<Icon component={I001Svg} />}
+                    onClick={controller.pipeline(async (s, e) => {
+                        e?.stopPropagation()
+                        s.goodsListState.expandedRowKeys = [...s.goodsListState.expandedRowKeys, record.$index]
+                    })}
+                >
+                    展开
+                </Button>
+            )
+        }
+    } else {
+        return <></>
+    }
+} 

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

@@ -1,18 +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;
-}
+.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;
+}