kts-component-invoice-operate 3.2.53 → 3.2.55

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,203 +1,203 @@
-
-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('mouseover', onMouseover) });
-        function onMouseover(e: MouseEvent) {
-            controller.run(async s => {
-                const container = s.goodsListState.drag.container = getRow(e.target)?.dataset?.rowKey;
-                if (!container) return;
-
-                // 不可以插入自己
-                if (container === s.goodsListState.drag.current) {
-                    s.goodsListState.drag.container = undefined;
-                    return;
-                }
-
-                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;
-
-                // 折扣行 不可以插入 自己的被折扣行
-                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;
-                    }
-                }
-
-                // 被折扣行 不可以插入 自己的折扣行
-                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;
-                    }
-                }
-
-                // 折扣行 拖动的 相当于 自己的 被折扣行
-                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;
-                }
-            });
-
-
-            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('mouseover', onMouseover) });
-            // window.document.body.removeChild(rowDiv);
-        }
-
-        // 开始插入
-        function insert() {
-            mounting(<></>);
-            controller.run(async s => {
-                const { container, current } = 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 = g.map(e => e.$index).indexOf(container);
-                        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('mouseover', onMouseover) });
+        function onMouseover(e: MouseEvent) {
+            controller.run(async s => {
+                const container = s.goodsListState.drag.container = getRow(e.target)?.dataset?.rowKey;
+                if (!container) return;
+
+                // 不可以插入自己
+                if (container === s.goodsListState.drag.current) {
+                    s.goodsListState.drag.container = undefined;
+                    return;
+                }
+
+                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;
+
+                // 折扣行 不可以插入 自己的被折扣行
+                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;
+                    }
+                }
+
+                // 被折扣行 不可以插入 自己的折扣行
+                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;
+                    }
+                }
+
+                // 折扣行 拖动的 相当于 自己的 被折扣行
+                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;
+                }
+            });
+
+
+            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('mouseover', onMouseover) });
+            // window.document.body.removeChild(rowDiv);
+        }
+
+        // 开始插入
+        function insert() {
+            mounting(<></>);
+            controller.run(async s => {
+                const { container, current } = 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 = g.map(e => e.$index).indexOf(container);
+                        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/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;
+}

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

@@ -1,48 +1,48 @@
-
-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 }) {
-
-    const controller = Invoice.useInvoiceController();
-
-    const autoComplete = controller.useMemo(s => s.autoComplete, [])
-
-    const editGood = controller.useMemo((e) => e.goodsListState.editGood, []);
-
-    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, editGood?.itemName))
-            }
-        } catch (error) {
-            setOptions([])
-            throw error;
-        }
-    }, [autoComplete.onItemCodeSearch, editGood])
-
-    const onChangeAutoComplete = React.useCallback(async itemName => {
-        const record = options.filter(e => e.itemCode === itemName)[0] as any;
-        if (!record) return;
-
-        controller.importGoodsDrawer(record);
-    }, [options, controller])
-
-    return (
-        <div className='kts-invoice-operate-goods-list-itemCode-input'>
-            <AutoComplete onSearch={onSearch} defaultValue={props.value} value={editGood?.itemCode} options={options.map(e => ({ value: e.itemCode }))} onChange={onChangeAutoComplete} >
-                <Input style={{ height: '100%', border: 'none' }} value={props.value} onChange={onChange} />
-            </AutoComplete>
-        </div>
-    )
-}
+
+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 }) {
+
+    const controller = Invoice.useInvoiceController();
+
+    const autoComplete = controller.useMemo(s => s.autoComplete, [])
+
+    const editGood = controller.useMemo((e) => e.goodsListState.editGood, []);
+
+    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, editGood?.itemName))
+            }
+        } catch (error) {
+            setOptions([])
+            throw error;
+        }
+    }, [autoComplete.onItemCodeSearch, editGood])
+
+    const onChangeAutoComplete = React.useCallback(async itemName => {
+        const record = options.filter(e => e.itemCode === itemName)[0] as any;
+        if (!record) return;
+
+        controller.importGoodsDrawer(record);
+    }, [options, controller])
+
+    return (
+        <div className='kts-invoice-operate-goods-list-itemCode-input'>
+            <AutoComplete onSearch={onSearch} defaultValue={props.value} value={editGood?.itemCode} options={options.map(e => ({ value: e.itemCode }))} onSelect={onChangeAutoComplete} >
+                <Input style={{ height: '100%', border: 'none' }} value={props.value} onChange={onChange} />
+            </AutoComplete>
+        </div>
+    )
+}

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

@@ -1,18 +1,18 @@
-.kts-invoice-operate-goods-list-itemName-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-itemName-input {
-  border: 1px solid #f5222d;
+.kts-invoice-operate-goods-list-itemName-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-itemName-input {
+  border: 1px solid #f5222d;
 }