feat: 1

package.json

@@ -48,69 +48,70 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "@ant-design/icons": "^4.5.0",
-    "@ant-design/pro-descriptions": "^1.6.8",
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-descriptions": "^1.10.60",
     "@ant-design/pro-form": "1.43.2",
-    "@ant-design/pro-layout": "^6.15.3",
-    "@ant-design/pro-table": "^2.30.8",
-    "@icon-park/react": "^1.3.3",
-    "@umijs/plugin-openapi": "^1.2.0",
-    "@umijs/route-utils": "^1.0.36",
+    "@ant-design/pro-layout": "^6.34.8",
+    "@ant-design/pro-table": "^2.70.0",
+    "@icon-park/react": "^1.3.5",
+    "@umijs/plugin-openapi": "^1.3.2",
+    "@umijs/route-utils": "^1.0.37",
     "ahooks": "2.10.9",
-    "antd": "^4.14.0",
+    "antd": "^4.19.5",
     "array-move": "^4.0.0",
-    "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
-    "markdown-it": "^12.2.0",
-    "moment": "^2.25.3",
+    "classnames": "^2.3.1",
+    "lodash": "^4.17.21",
+    "markdown-it": "^12.3.2",
+    "moment": "^2.29.2",
     "omit.js": "^2.0.2",
     "rc-queue-anim": "^1.8.5",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-helmet-async": "^1.0.4",
-    "react-markdown-editor-lite": "^1.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet-async": "^1.2.3",
+    "react-markdown-editor-lite": "^1.3.2",
+    "react-sortable-hoc": "^2.0.0",
     "umi": "3.5.3"
   },
   "devDependencies": {
-    "@ant-design/pro-cli": "^2.0.2",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
-    "@types/classnames": "^2.2.7",
-    "@types/express": "^4.17.0",
-    "@types/history": "^4.7.2",
-    "@types/jest": "^26.0.0",
-    "@types/lodash": "^4.14.144",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-helmet": "^6.1.0",
-    "@umijs/fabric": "2.5.13",
-    "@umijs/plugin-blocks": "^2.0.5",
-    "@umijs/plugin-esbuild": "^1.0.1",
-    "@umijs/preset-ant-design-pro": "^1.2.0",
-    "@umijs/preset-dumi": "^1.1.7",
+    "@ant-design/pro-cli": "^2.1.5",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@types/classnames": "^2.3.1",
+    "@types/express": "^4.17.13",
+    "@types/history": "^4.7.11",
+    "@types/jest": "^26.0.24",
+    "@types/lodash": "^4.14.181",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-helmet": "^6.1.5",
+    "@umijs/fabric": "2.10.2",
+    "@umijs/plugin-blocks": "^2.2.2",
+    "@umijs/plugin-esbuild": "^1.4.1",
+    "@umijs/preset-ant-design-pro": "^1.3.3",
+    "@umijs/preset-dumi": "^1.1.40",
     "@umijs/preset-react": "1.8.22",
-    "@umijs/yorkie": "^2.0.3",
+    "@umijs/yorkie": "^2.0.5",
     "babel-plugin-import": "^1.13.3",
     "carlo": "^0.9.46",
-    "cross-env": "^7.0.0",
-    "cross-port-killer": "^1.1.1",
-    "detect-installer": "^1.0.1",
+    "cross-env": "^7.0.3",
+    "cross-port-killer": "^1.4.0",
+    "detect-installer": "^1.0.2",
     "enzyme": "^3.11.0",
-    "eslint": "^7.1.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-javascript": "^1.3.4",
     "eslint-plugin-jsx": "^0.1.0",
     "eslint-plugin-typescript": "^0.14.0",
-    "express": "^4.17.1",
-    "gh-pages": "^3.0.0",
+    "express": "^4.17.3",
+    "gh-pages": "^3.2.3",
     "jsdom-global": "^3.0.2",
-    "lint-staged": "^10.0.0",
-    "mockjs": "^1.0.1-beta3",
-    "prettier": "^2.0.1",
+    "lint-staged": "^10.5.4",
+    "mockjs": "^1.1.0",
+    "prettier": "^2.6.2",
     "puppeteer-core": "^8.0.0",
-    "react-dev-inspector": "^1.1.1",
-    "stylelint": "^13.0.0",
-    "typescript": "^4.2.2",
+    "react-dev-inspector": "^1.7.1",
+    "stylelint": "^13.13.1",
+    "typescript": "^4.6.3",
     "windicss": "3.1.7",
     "windicss-webpack-plugin": "1.4.6"
   },

src/pages/Business/Invoice/index.less

@@ -0,0 +1,12 @@
+.row-dragging {
+  background: #fafafa;
+  border: 1px solid #ccc;
+}
+
+.row-dragging td {
+  padding: 16px;
+}
+
+.row-dragging .drag-visible {
+  visibility: visible;
+}

src/pages/Business/Invoice/index.tsx

@@ -46,7 +46,7 @@ const Invoice: React.FC = () => {
   }
   const { run: tryGetInvoiceList } = useRequest(fetchInvoiceList, {
     onSuccess: (result: API.InvoicegroupItem[]) => {
-      setState({ ...state, dataSource: result })
+      setState({ ...state, dataSource: result.map((item, index) => ({ ...item, index })) })
     }
   })
   const { run: tryAddInvoiceItem } = useRequest(addInvoiceItem, {
@@ -151,6 +151,8 @@ const Invoice: React.FC = () => {
   ]
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
+    console.log(oldIndex, newIndex)
+
     const { dataSource } = state
     if (oldIndex !== newIndex) {
       const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
@@ -173,6 +175,8 @@ const Invoice: React.FC = () => {
 
   const DraggableBodyRow = ({ ...restProps }) => {
     const { dataSource } = state
+    console.log(restProps)
+
     // function findIndex base on Table rowKey props and should always be a right array index
     const index = dataSource?.findIndex(x => x.index === restProps['data-row-key'])
     return <SortableItem index={index} {...restProps} />
@@ -200,7 +204,7 @@ const Invoice: React.FC = () => {
               <Table
                 pagination={false}
                 columns={mainColumns}
-                dataSource={state.dataSource.map((item, index) => index)}
+                dataSource={state.dataSource}
                 components={{
                   body: {
                     wrapper: DraggableContainer,
@@ -208,7 +212,7 @@ const Invoice: React.FC = () => {
                   }
                 }}
                 bordered
-                rowKey={row => row.id}
+                rowKey="index"
               />
             </>
           ) : null}