kts-component-invoice-operate 3.2.29 → 3.2.31

package/package.json

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

package/src/Invoice/InvoiceController/InvoiceControllerState/AutoComplete/index.ts

@@ -13,5 +13,5 @@ export default class AutoComplete {
     onBuyerTaxIdSearch?: (searchText: string) => Promise<any[]>;
 
     /** 商品编码自动补全 */
-    onItemCodeSearch?: (searchText: string) => Promise<any[]>;
+    onItemCodeSearch?: (searchText: string, itemName: any) => Promise<any[]>;
 }

package/src/Invoice/_test/endowCode/index.tsx

@@ -53,7 +53,7 @@ export default () => {
       <Switch checkedChildren="预制" unCheckedChildren="默认" onChange={e => { e ? setController(controller2) : setController(controller1) }} ></Switch>
       <Button onClick={controller.pipeline(async s => { s.goodsListState.endowCode.getReadOnlyTaxRate = s.goodsListState.endowCode.readOnlyTaxRateMap.DRAFT })} >税率（草稿）</Button>
       <Button onClick={controller.pipeline(async s => { s.goodsListState.endowCode.getReadOnlyTaxRate = () => true })} >税率（预制）</Button>
-      <Invoice controller={controller} />
+      <Invoice invoiceType='digtal' controller={controller} />
     </div>
   );
 };

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

@@ -80,13 +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: 'drag',
+        width: 40,
+        align: 'center',
+        render: (_: any, record: IGood) => <Drag record={record} />
+      },
       {
         title: '序号',
         key: 'serialNo',
@@ -106,9 +106,10 @@ export default (form: WrappedFormUtils) => {
                   initialValue: editGood.itemCode,
                 })(
                   <ItemCodeInput
-                    shorthand={editGood.shorthand}
-                    onChange={() => {
-                      onChangeItemCode(controller, form, record);
+                    record={record}
+                    onChange={async () => {
+                      await onChangeItemCode(controller, form, record);
+                      await onChangeLineAmountIncludeTax(controller, form, record);
                     }}
                   />
                 )}
@@ -128,7 +129,7 @@ export default (form: WrappedFormUtils) => {
               <Form.Item>
                 <div style={{ display: 'flex' }} >
                   {getFieldDecorator('itemName', {
-                    initialValue: isMyShow ? record.itemNameSelf : record.itemName,
+                    initialValue: record.itemName,
                     rules: [
                       ...getReplenishRules('itemName'),
                       {

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

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

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

@@ -4,9 +4,10 @@ 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';
 
-
 export interface IDragProps {
     record: IGood
 }
@@ -19,18 +20,121 @@ export default function Drag(props: IDragProps) {
 
     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);
 
+        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])
 
@@ -46,4 +150,39 @@ export default function Drag(props: IDragProps) {
             <Icon component={I001Svg} />
         </Button>
     )
+}
+
+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.tsx

@@ -5,7 +5,7 @@ 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 }) {
+export default function ItemCodeInput(props: { onChange?: (e: ChangeEvent<HTMLInputElement>) => void, value?: string, record: any }) {
 
     const controller = Invoice.useInvoiceController();
 
@@ -21,7 +21,7 @@ export default function ItemCodeInput(props: { onChange?: (e: ChangeEvent<HTMLIn
     const onSearch = React.useCallback(async (searchText: string) => {
         try {
             if (autoComplete.onItemCodeSearch) {
-                setOptions(await autoComplete.onItemCodeSearch(searchText))
+                setOptions(await autoComplete.onItemCodeSearch(searchText, props.record?.itemName))
             }
         } catch (error) {
             setOptions([])
@@ -32,13 +32,23 @@ export default function ItemCodeInput(props: { onChange?: (e: ChangeEvent<HTMLIn
     const onChangeAutoComplete = React.useCallback(async itemName => {
         const record = options.filter(e => e.itemCode === itemName)[0] as any;
         if (!record) return;
-        await controller.setEditGood({ itemCode: record.itemCode });
+
+        const option = {
+          itemCode: record.itemCode,
+          itemName: record.itemName,
+          taxCategoryCode: record.taxCategoryCode,
+          shorthand: record.shorthand,
+          specification: record.specification,
+          unit: record.unit,
+          lineAmountIncludeTax: record.lineAmountIncludeTax,
+          taxRate: record.taxRate,
+        }
+        await controller.setEditGood(option);
     }, [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} >
+            <AutoComplete onSearch={onSearch} defaultValue={props.value} 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/hook/useColumns/ui/ItemNameInput/index.tsx

@@ -99,7 +99,7 @@ export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLIn
     return (
         <div className='kts-invoice-operate-goods-list-itemName-input'>
             {props.shorthand && <span style={{ alignSelf: 'center', fontSize: 12 }} >*{props.shorthand}*</span>}
-            <AutoComplete onSearch={onSearch} options={options.map(e => ({ value: e.itemName }))} onChange={onChangeAutoComplete} >
+            <AutoComplete onSearch={onSearch} defaultValue={props.value} options={options.map(e => ({ value: e.itemName }))} onChange={onChangeAutoComplete} >
                 <Input style={{ height: '100%', border: 'none' }} value={props.value} onChange={onChange} />
             </AutoComplete>
         </div>

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

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

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

@@ -2,15 +2,24 @@ import React from "react";
 import Invoice from '../../../../..';
 import { LineAttributeType } from '../../../../../InvoiceController'
 import classnames from 'classnames'
+import './index.less';
 
 export default function TableRow(props: any) {
 
+    const rowKey = props['data-row-key']
+
     const controller = Invoice.useInvoiceController();
 
     const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
 
+    const current = controller.useMemo(s => s.goodsListState.drag.current, [])
+
+    const container = controller.useMemo(s => s.goodsListState.drag.container, [])
+
+    const good = React.useMemo(() => goodsMap?.get(rowKey), [rowKey, goodsMap])
+
     const discount = React.useMemo(() => {
-        const i = goodsMap.get(props['data-row-key']);
+        const i = good;
         if (!i) return undefined;
 
         if (i.lineAttribute === LineAttributeType.折扣行) {
@@ -20,9 +29,19 @@ export default function TableRow(props: any) {
         } else {
             return undefined;
         }
-    }, [props['data-row-key'], goodsMap])
+    }, [good, goodsMap])
 
     return (
-        <tr {...props} className={classnames(props.className, discount)} />
+        rowKey === current && current
+            ? (
+                <tr style={{ height: 32.67, borderBottom: '1px solid #E6E6E6', position: 'relative' }} >
+                    <div style={{ height: 1, 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' : undefined)}
+                />
+            )
     )
 }

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

@@ -19,6 +19,7 @@ import {
   onChangeTaxRate,
   onChangeItemName,
 } from './autoFillFn';
+import Drag from './ui/Drag';
 
 export default (form: WrappedFormUtils) => {
   const { getFieldDecorator, getFieldValue } = form;
@@ -76,6 +77,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',

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

@@ -0,0 +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        : 50px;
+  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/digtal/GoodsList/hook/useColumns/ui/Drag/index.tsx

@@ -0,0 +1,187 @@
+
+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';
+
+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 disabled = React.useMemo(() => !!editGood, [editGood]);
+
+    const onMouseDown = React.useCallback(() => {
+        if (!controller || !record) return;
+        controller.run(async s => s.goodsListState.drag.current = record.$index);
+
+        const rowList = window.document.querySelectorAll<HTMLDivElement>('.kts-invoice-operate-goods-list-digtal');
+
+        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])
+
+    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>
+    )
+}
+
+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 - 25) };
+
+        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/digtal/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/digtal/GoodsList/ui/TableRow/index.less

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