kts-component-invoice-operate 3.2.60 → 3.2.61

package/dist/index.js

@@ -1003,6 +1003,7 @@ var Drag = /*#__PURE__*/_createClass(function Drag() {
   this.isStart = false;
   this.current = void 0;
   this.container = void 0;
+  this.site = void 0;
 });
 
 var GoodsListState = /*#__PURE__*/_createClass(function GoodsListState() {
@@ -10173,7 +10174,7 @@ function Search() {
   });
 }
 
-var css_248z$5 = ".kts-invoice-operate-goods-list-itemName-drag-container {\n  position: relative;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container::after {\n  content: \" \";\n  width: 100%;\n  height: 2px;\n  background: #0074ff;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 9999;\n}\n";
+var css_248z$5 = ".kts-invoice-operate-goods-list-itemName-drag-container-u {\n  position: relative;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container-u::after {\n  content: \" \";\n  width: 100%;\n  height: 2px;\n  background: #0074ff;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 9999;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container-d {\n  position: relative;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container-d::after {\n  content: \" \";\n  width: 100%;\n  height: 2px;\n  background: #0074ff;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  z-index: 9999;\n}\n";
 styleInject(css_248z$5);
 
 function TableRow(props) {
@@ -10182,9 +10183,18 @@ function TableRow(props) {
   var goodsMap = controller.useMemo(function (s) {
     return s.goodsListState.goodsMap;
   }, []);
+  /** 当前拖动中的货品索引 */
+
   var current = controller.useMemo(function (s) {
     return s.goodsListState.drag.current;
   }, []);
+  /** 当前拖动中的货品索引 */
+
+  var site = controller.useMemo(function (s) {
+    return s.goodsListState.drag.site;
+  }, []);
+  /** 准备插入的货物索引 */
+
   var container = controller.useMemo(function (s) {
     return s.goodsListState.drag.container;
   }, []);
@@ -10218,7 +10228,7 @@ function TableRow(props) {
       bottom: 0
     }
   })) : React__default['default'].createElement("tr", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classNames__default['default'](props.className, discount, rowKey === container && current ? 'kts-invoice-operate-goods-list-itemName-drag-container' : undefined)
+    className: classNames__default['default'](props.className, discount, rowKey === container && current ? 'kts-invoice-operate-goods-list-itemName-drag-container-' + site : undefined)
   }));
 }
 
@@ -12040,64 +12050,57 @@ function Drag$1(props) {
     var currentGood = controller.state.goodsListState.goodsList.filter(function (e) {
       return e.$index === record.$index;
     })[0];
-    mounting(React__default['default'].createElement(DragDiv, _objectSpread2({}, currentGood))); // 监听移动
-
+    mounting(React__default['default'].createElement(DragDiv, _objectSpread2({}, currentGood)));
     rowList.forEach(function (e) {
-      e.addEventListener('mouseover', onMouseover);
+      e.addEventListener('mousemove', onMousemove);
     });
 
-    function onMouseover(e) {
+    function onMousemove(e) {
       controller.run( /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(s) {
-          var _getRow, _getRow$dataset;
+          var _rowDom$dataset;
 
-          var container, currentGood, row, currentIndex, containerIndex, _currentIndex, _containerIndex, t;
+          var rowDom, container, row, currentGood, currentIndex, containerIndex, _currentIndex, _containerIndex, t, rect, mouseY;
 
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) {
               switch (_context2.prev = _context2.next) {
                 case 0:
-                  container = s.goodsListState.drag.container = (_getRow = getRow(e.target)) === null || _getRow === void 0 ? void 0 : (_getRow$dataset = _getRow.dataset) === null || _getRow$dataset === void 0 ? void 0 : _getRow$dataset.rowKey;
+                  rowDom = getRow(e.target);
+                  container = s.goodsListState.drag.container = rowDom === null || rowDom === void 0 ? void 0 : (_rowDom$dataset = rowDom.dataset) === null || _rowDom$dataset === void 0 ? void 0 : _rowDom$dataset.rowKey;
+                  /** 准备插入的货物 */
+
+                  row = s.goodsListState.goodsMap.get(container);
 
-                  if (container) {
-                    _context2.next = 3;
+                  if (row) {
+                    _context2.next = 5;
                     break;
                   }
 
                   return _context2.abrupt("return");
 
-                case 3:
+                case 5:
                   if (!(container === s.goodsListState.drag.current)) {
-                    _context2.next = 6;
+                    _context2.next = 7;
                     break;
                   }
 
-                  s.goodsListState.drag.container = undefined;
-                  return _context2.abrupt("return");
+                  return _context2.abrupt("return", s.goodsListState.drag.container = undefined);
 
-                case 6:
+                case 7:
+                  /** 当前拖动中的货品 */
                   currentGood = s.goodsListState.drag.current && s.goodsListState.goodsMap.get(s.goodsListState.drag.current);
 
                   if (currentGood) {
-                    _context2.next = 9;
+                    _context2.next = 10;
                     break;
                   }
 
                   return _context2.abrupt("return");
 
-                case 9:
-                  row = s.goodsListState.goodsMap.get(container);
-
-                  if (row) {
-                    _context2.next = 12;
-                    break;
-                  }
-
-                  return _context2.abrupt("return");
-
-                case 12:
+                case 10:
                   if (!(currentGood.lineAttribute === LineAttributeType$1.折扣行)) {
-                    _context2.next = 18;
+                    _context2.next = 15;
                     break;
                   }
 
@@ -12109,16 +12112,15 @@ function Drag$1(props) {
                   }).indexOf(row.$index);
 
                   if (!(currentIndex - 1 === containerIndex)) {
-                    _context2.next = 18;
+                    _context2.next = 15;
                     break;
                   }
 
-                  s.goodsListState.drag.container = undefined;
-                  return _context2.abrupt("return");
+                  return _context2.abrupt("return", s.goodsListState.drag.container = undefined);
 
-                case 18:
+                case 15:
                   if (!(currentGood.lineAttribute === LineAttributeType$1.被折扣行)) {
-                    _context2.next = 24;
+                    _context2.next = 20;
                     break;
                   }
 
@@ -12130,23 +12132,29 @@ function Drag$1(props) {
                   }).indexOf(row.$index);
 
                   if (!(_currentIndex + 1 === _containerIndex)) {
-                    _context2.next = 24;
+                    _context2.next = 20;
                     break;
                   }
 
-                  s.goodsListState.drag.container = undefined;
-                  return _context2.abrupt("return");
+                  return _context2.abrupt("return", s.goodsListState.drag.container = undefined);
 
-                case 24:
+                case 20:
                   // 折扣行 拖动的 相当于 自己的 被折扣行
                   if (row.lineAttribute === LineAttributeType$1.折扣行) {
                     t = s.goodsListState.goodsList.map(function (e) {
                       return e.$index;
                     }).indexOf(container) - 1;
                     s.goodsListState.drag.container = s.goodsListState.goodsList[t].$index;
+                    s.goodsListState.drag.site = 'u';
+                  } else if (row.lineAttribute === LineAttributeType$1.被折扣行) {
+                    s.goodsListState.drag.site = 'd';
+                  } else {
+                    rect = rowDom.getBoundingClientRect();
+                    mouseY = e.clientY - rect.top;
+                    s.goodsListState.drag.site = mouseY > 15 ? 'd' : 'u';
                   }
 
-                case 25:
+                case 21:
                 case "end":
                   return _context2.stop();
               }
@@ -12199,7 +12207,7 @@ function Drag$1(props) {
       }());
       window.removeEventListener('mouseup', onMouseup);
       rowList.forEach(function (e) {
-        e.removeEventListener('mouseover', onMouseover);
+        e.removeEventListener('mousemove', onMousemove);
       }); // window.document.body.removeChild(rowDiv);
     } // 开始插入
 
@@ -12208,13 +12216,13 @@ function Drag$1(props) {
       mounting(React__default['default'].createElement(React__default['default'].Fragment, null));
       controller.run( /*#__PURE__*/function () {
         var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(s) {
-          var _s$goodsListState$dra, container, current, goodsList, goodsMap, _currentGood, currentIndex, moveGoods;
+          var _s$goodsListState$dra, container, current, site, goodsList, goodsMap, _currentGood, currentIndex, moveGoods;
 
           return _regeneratorRuntime().wrap(function _callee4$(_context4) {
             while (1) {
               switch (_context4.prev = _context4.next) {
                 case 0:
-                  _s$goodsListState$dra = s.goodsListState.drag, container = _s$goodsListState$dra.container, current = _s$goodsListState$dra.current;
+                  _s$goodsListState$dra = s.goodsListState.drag, container = _s$goodsListState$dra.container, current = _s$goodsListState$dra.current, site = _s$goodsListState$dra.site;
 
                   if (!(!container || !current)) {
                     _context4.next = 3;
@@ -12247,9 +12255,11 @@ function Drag$1(props) {
                       var g = s.goodsListState.goodsList.filter(function (e) {
                         return moveGoods.indexOf(e.$index) < 0;
                       });
-                      var t = g.map(function (e) {
+                      var t = site === 'u' ? g.map(function (e) {
                         return e.$index;
-                      }).indexOf(container);
+                      }).indexOf(container) : g.map(function (e) {
+                        return e.$index;
+                      }).indexOf(container) + 1;
                       var m = moveGoods.map(function (e) {
                         return goodsMap.get(e);
                       }).filter(function (e) {
@@ -16759,7 +16769,7 @@ function Search$1() {
   });
 }
 
-var css_248z$l = ".kts-invoice-operate-goods-list-itemName-drag-container {\n  position: relative;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container::after {\n  content: \" \";\n  width: 100%;\n  height: 2px;\n  background: #0074ff;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 9999;\n}\n";
+var css_248z$l = ".kts-invoice-operate-goods-list-itemName-drag-container-u {\n  position: relative;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container-u::after {\n  content: \" \";\n  width: 100%;\n  height: 2px;\n  background: #0074ff;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 9999;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container-d {\n  position: relative;\n}\n.kts-invoice-operate-goods-list-itemName-drag-container-d::after {\n  content: \" \";\n  width: 100%;\n  height: 2px;\n  background: #0074ff;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  z-index: 9999;\n}\n";
 styleInject(css_248z$l);
 
 function TableRow$1(props) {
@@ -16768,6 +16778,11 @@ function TableRow$1(props) {
   var goodsMap = controller.useMemo(function (s) {
     return s.goodsListState.goodsMap;
   }, []);
+  /** 当前拖动中的货品索引 */
+
+  var site = controller.useMemo(function (s) {
+    return s.goodsListState.drag.site;
+  }, []);
   var current = controller.useMemo(function (s) {
     return s.goodsListState.drag.current;
   }, []);
@@ -16799,8 +16814,9 @@ function TableRow$1(props) {
       position: 'absolute',
       bottom: 0
     }
-  })) : React__default['default'].createElement("tr", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classNames__default['default'](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' : '')} />
+  React__default['default'].createElement("tr", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: classNames__default['default'](props.className, discount, rowKey === container && current ? 'kts-invoice-operate-goods-list-itemName-drag-container-' + site : undefined)
   }));
 }
 
@@ -17995,6 +18011,12 @@ styleInject(css_248z$n);
 
 function Drag$2(props) {
   var record = props.record;
+
+  var _React$useState = React__default['default'].useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
   var controller = Invoice.useInvoiceController();
   var editGood = controller.useMemo(function (s) {
     return s.goodsListState.editGood;
@@ -18003,7 +18025,7 @@ function Drag$2(props) {
     return !!editGood;
   }, [editGood]);
   var onMouseDown = React__default['default'].useCallback(function () {
-    if (!controller || !record) return;
+    if (!controller || !record || disabled) return;
     controller.run( /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(s) {
         return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -18028,64 +18050,57 @@ function Drag$2(props) {
     var currentGood = controller.state.goodsListState.goodsList.filter(function (e) {
       return e.$index === record.$index;
     })[0];
-    mounting(React__default['default'].createElement(DragDiv$1, _objectSpread2({}, currentGood))); // 监听移动
-
+    mounting(React__default['default'].createElement(DragDiv$1, _objectSpread2({}, currentGood)));
     rowList.forEach(function (e) {
-      e.addEventListener('mouseover', onMouseover);
+      e.addEventListener('mousemove', onMousemove);
     });
 
-    function onMouseover(e) {
+    function onMousemove(e) {
       controller.run( /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(s) {
-          var _getRow, _getRow$dataset;
+          var _rowDom$dataset;
 
-          var container, currentGood, row, currentIndex, containerIndex, _currentIndex, _containerIndex, t;
+          var rowDom, container, row, currentGood, currentIndex, containerIndex, _currentIndex, _containerIndex, t, rect, mouseY;
 
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) {
               switch (_context2.prev = _context2.next) {
                 case 0:
-                  container = s.goodsListState.drag.container = (_getRow = getRow(e.target)) === null || _getRow === void 0 ? void 0 : (_getRow$dataset = _getRow.dataset) === null || _getRow$dataset === void 0 ? void 0 : _getRow$dataset.rowKey;
+                  rowDom = getRow(e.target);
+                  container = s.goodsListState.drag.container = rowDom === null || rowDom === void 0 ? void 0 : (_rowDom$dataset = rowDom.dataset) === null || _rowDom$dataset === void 0 ? void 0 : _rowDom$dataset.rowKey;
+                  /** 准备插入的货物 */
 
-                  if (container) {
-                    _context2.next = 3;
+                  row = s.goodsListState.goodsMap.get(container);
+
+                  if (row) {
+                    _context2.next = 5;
                     break;
                   }
 
                   return _context2.abrupt("return");
 
-                case 3:
+                case 5:
                   if (!(container === s.goodsListState.drag.current)) {
-                    _context2.next = 6;
+                    _context2.next = 7;
                     break;
                   }
 
-                  s.goodsListState.drag.container = undefined;
-                  return _context2.abrupt("return");
+                  return _context2.abrupt("return", s.goodsListState.drag.container = undefined);
 
-                case 6:
+                case 7:
+                  /** 当前拖动中的货品 */
                   currentGood = s.goodsListState.drag.current && s.goodsListState.goodsMap.get(s.goodsListState.drag.current);
 
                   if (currentGood) {
-                    _context2.next = 9;
+                    _context2.next = 10;
                     break;
                   }
 
                   return _context2.abrupt("return");
 
-                case 9:
-                  row = s.goodsListState.goodsMap.get(container);
-
-                  if (row) {
-                    _context2.next = 12;
-                    break;
-                  }
-
-                  return _context2.abrupt("return");
-
-                case 12:
+                case 10:
                   if (!(currentGood.lineAttribute === LineAttributeType$1.折扣行)) {
-                    _context2.next = 18;
+                    _context2.next = 15;
                     break;
                   }
 
@@ -18097,16 +18112,15 @@ function Drag$2(props) {
                   }).indexOf(row.$index);
 
                   if (!(currentIndex - 1 === containerIndex)) {
-                    _context2.next = 18;
+                    _context2.next = 15;
                     break;
                   }
 
-                  s.goodsListState.drag.container = undefined;
-                  return _context2.abrupt("return");
+                  return _context2.abrupt("return", s.goodsListState.drag.container = undefined);
 
-                case 18:
+                case 15:
                   if (!(currentGood.lineAttribute === LineAttributeType$1.被折扣行)) {
-                    _context2.next = 24;
+                    _context2.next = 20;
                     break;
                   }
 
@@ -18118,23 +18132,29 @@ function Drag$2(props) {
                   }).indexOf(row.$index);
 
                   if (!(_currentIndex + 1 === _containerIndex)) {
-                    _context2.next = 24;
+                    _context2.next = 20;
                     break;
                   }
 
-                  s.goodsListState.drag.container = undefined;
-                  return _context2.abrupt("return");
+                  return _context2.abrupt("return", s.goodsListState.drag.container = undefined);
 
-                case 24:
+                case 20:
                   // 折扣行 拖动的 相当于 自己的 被折扣行
                   if (row.lineAttribute === LineAttributeType$1.折扣行) {
                     t = s.goodsListState.goodsList.map(function (e) {
                       return e.$index;
                     }).indexOf(container) - 1;
                     s.goodsListState.drag.container = s.goodsListState.goodsList[t].$index;
+                    s.goodsListState.drag.site = 'u';
+                  } else if (row.lineAttribute === LineAttributeType$1.被折扣行) {
+                    s.goodsListState.drag.site = 'd';
+                  } else {
+                    rect = rowDom.getBoundingClientRect();
+                    mouseY = e.clientY - rect.top;
+                    s.goodsListState.drag.site = mouseY > 25 ? 'd' : 'u';
                   }
 
-                case 25:
+                case 21:
                 case "end":
                   return _context2.stop();
               }
@@ -18187,7 +18207,7 @@ function Drag$2(props) {
       }());
       window.removeEventListener('mouseup', onMouseup);
       rowList.forEach(function (e) {
-        e.removeEventListener('mouseover', onMouseover);
+        e.removeEventListener('mousemove', onMousemove);
       }); // window.document.body.removeChild(rowDiv);
     } // 开始插入
 
@@ -18196,13 +18216,13 @@ function Drag$2(props) {
       mounting(React__default['default'].createElement(React__default['default'].Fragment, null));
       controller.run( /*#__PURE__*/function () {
         var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(s) {
-          var _s$goodsListState$dra, container, current, goodsList, goodsMap, _currentGood, currentIndex, moveGoods;
+          var _s$goodsListState$dra, container, current, site, goodsList, goodsMap, _currentGood, currentIndex, moveGoods;
 
           return _regeneratorRuntime().wrap(function _callee4$(_context4) {
             while (1) {
               switch (_context4.prev = _context4.next) {
                 case 0:
-                  _s$goodsListState$dra = s.goodsListState.drag, container = _s$goodsListState$dra.container, current = _s$goodsListState$dra.current;
+                  _s$goodsListState$dra = s.goodsListState.drag, container = _s$goodsListState$dra.container, current = _s$goodsListState$dra.current, site = _s$goodsListState$dra.site;
 
                   if (!(!container || !current)) {
                     _context4.next = 3;
@@ -18235,9 +18255,11 @@ function Drag$2(props) {
                       var g = s.goodsListState.goodsList.filter(function (e) {
                         return moveGoods.indexOf(e.$index) < 0;
                       });
-                      var t = g.map(function (e) {
+                      var t = site === 'u' ? g.map(function (e) {
+                        return e.$index;
+                      }).indexOf(container) : g.map(function (e) {
                         return e.$index;
-                      }).indexOf(container);
+                      }).indexOf(container) + 1;
                       var m = moveGoods.map(function (e) {
                         return goodsMap.get(e);
                       }).filter(function (e) {
@@ -18268,33 +18290,44 @@ function Drag$2(props) {
         };
       }());
     }
-  }, [controller, record]);
-  return React__default['default'].createElement(ktsComponentsAntdX3.Button, {
-    type: 'link',
-    style: {
-      padding: 0
-    },
-    disabled: disabled,
-    onMouseDown: onMouseDown,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-    },
-    className: "kts-invoice-operate-goods-list-itemName-drag"
-  }, React__default['default'].createElement(Icon, {
-    component: SvgI001$1
-  }));
+  }, [controller, record, disabled]);
+  var renderButton = React__default['default'].useMemo(function () {
+    return React__default['default'].createElement(ktsComponentsAntdX3.Button, {
+      type: 'link',
+      style: {
+        padding: 0
+      },
+      onMouseDown: onMouseDown,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      className: "kts-invoice-operate-goods-list-itemName-drag",
+      onMouseOver: controller.saveEditGood
+    }, React__default['default'].createElement(Icon, {
+      component: SvgI001$1
+    }));
+  }, [onMouseDown, controller]);
+
+  if (disabled) {
+    return React__default['default'].createElement(ktsXui.Popover, {
+      content: '您还有未编辑完成的商品',
+      trigger: 'focus'
+    }, renderButton);
+  } else {
+    return renderButton;
+  }
 }
 
 function DragDiv$1(props) {
-  var _React$useState = React__default['default'].useState(0),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      x = _React$useState2[0],
-      setX = _React$useState2[1];
-
-  var _React$useState3 = React__default['default'].useState(-110),
+  var _React$useState3 = React__default['default'].useState(0),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      y = _React$useState4[0],
-      setY = _React$useState4[1];
+      x = _React$useState4[0],
+      setX = _React$useState4[1];
+
+  var _React$useState5 = React__default['default'].useState(-110),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      y = _React$useState6[0],
+      setY = _React$useState6[1];
 
   var div = React__default['default'].useMemo(function () {
     return window.document.querySelector("[data-row-key=\"".concat(props.$index, "\"]"));
@@ -18309,7 +18342,7 @@ function DragDiv$1(props) {
 
   React__default['default'].useEffect(function () {
     function onMousemove(e) {
-      setY(e.clientY - 25);
+      setY(e.clientY - 15);
     }
     window.addEventListener('mousemove', onMousemove);
     return function () {

package/package.json

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

package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/Drag/index.ts

@@ -10,4 +10,7 @@ export default class Drag {
 
     /** 准备插入的货物索引 */
     container?: string;
+
+    /** 插入位置 */
+    site?: 'u' | 'd'
 }

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 controller={controller} invoiceType='digtal' />
     </div>
   );
 };

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

@@ -34,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;
+
                     }
                 }
 
@@ -68,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;
                     }
                 }
 
@@ -77,9 +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 > 15 ? 'd' : 'u';
                 }
-            });
-
+            })
 
             const getRow = (t: any): any => {
                 try {
@@ -100,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);
         }
 
@@ -108,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;
@@ -126,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);
                     })()