feat: 开票内容排序不完善版

package.json

@@ -58,6 +58,7 @@
     "@umijs/route-utils": "^1.0.36",
     "ahooks": "2.10.9",
     "antd": "^4.14.0",
+    "array-move": "^4.0.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "markdown-it": "^12.2.0",
@@ -71,7 +72,6 @@
     "umi": "3.5.3"
   },
   "devDependencies": {
-    "react-dev-inspector": "^1.1.1",
     "@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",
@@ -108,6 +108,7 @@
     "mockjs": "^1.0.1-beta3",
     "prettier": "^2.0.1",
     "puppeteer-core": "^8.0.0",
+    "react-dev-inspector": "^1.1.1",
     "stylelint": "^13.0.0",
     "typescript": "^4.2.2",
     "windicss": "3.1.7",

src/pages/Business/Invoice/index.tsx

@@ -5,7 +5,8 @@ import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
 import type { ColumnsType } from 'antd/lib/table'
 import { MenuOutlined } from '@ant-design/icons'
 import { Delete } from '@icon-park/react'
-import { SortableHandle } from 'react-sortable-hoc'
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
+import { arrayMoveImmutable } from 'array-move'
 import {
   fetchInvoiceList,
   addInvoiceItem,
@@ -13,10 +14,11 @@ import {
   deleteInvoiceItem
 } from '@/services/user/system'
 import { useRequest } from 'umi'
+import classNames from 'classnames'
 
 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)
-// const SortableItem = SortableElement(props => <tr {...props} />)
-// const SortableBody = SortableContainer(props => <tbody {...props} />)
+const SortableItem = SortableElement(props => <tr {...props} />)
+const SortableBody = SortableContainer(props => <tbody {...props} />)
 const isEnableEnum = {
   open: '启用',
   close: '停用'
@@ -82,30 +84,28 @@ const Invoice: React.FC = () => {
     {
       dataIndex: 'sort',
       title: '排序',
+      index: 0,
       render: () => <DragHandle />
     },
     {
       dataIndex: 'name',
-      title: '开票内容'
+      title: '开票内容',
+      index: 1
     },
     {
       dataIndex: 'enable',
       title: '状态',
+      index: 2,
       render: enable => (
-        <span>
-          {enable === 'close' ? (
-            <span className="text-red-500 cursor-pointer hover:text-red-600">
-              {isEnableEnum[enable]}
-            </span>
-          ) : (
-            <span>{isEnableEnum[enable]}</span>
-          )}
+        <span className={classNames({ 'text-red-500': enable === 'close' })}>
+          {isEnableEnum[enable]}
         </span>
       )
     },
     {
       dataIndex: 'opreate',
       title: '操作',
+      index: 3,
       render: (_, record) => (
         <div className="divide-x divide-bg-gray-400 flex flex-row">
           <div
@@ -113,29 +113,36 @@ const Invoice: React.FC = () => {
             onClick={() => {
               formRef.current?.setFieldsValue({ ...record })
               setState({ ...state, visible: true, type: modalType.UPDATE })
-            }}
-          >
+            }}>
             编辑
           </div>
           {record.enable === 'open' ? (
             <Popconfirm
               title="是否停用此开票内容"
               onConfirm={() =>
-                tryUpdateInvoiceItem({ id: record.id, name: record.name, enable: 'open' })
-              }
-            >
+                tryUpdateInvoiceItem({
+                  id: record.id,
+                  name: record.name,
+                  sort: record.sort,
+                  enable: 'close'
+                })
+              }>
               <div className="px-2 text-red-500 cursor-pointer hover:text-red-600">停用</div>
             </Popconfirm>
           ) : null}
           {record.enable === 'close' && (
-            <div
+            <Popconfirm
               className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
               onConfirm={() =>
-                tryUpdateInvoiceItem({ id: record.id, name: record.name, enable: 'close' })
-              }
-            >
+                tryUpdateInvoiceItem({
+                  id: record.id,
+                  name: record.name,
+                  sort: record.sort,
+                  enable: 'open'
+                })
+              }>
               启用
-            </div>
+            </Popconfirm>
           )}
           <Popconfirm title="确认删除？" onConfirm={() => tryDeleteInvoiceItem(record.id)}>
             <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
@@ -147,6 +154,35 @@ const Invoice: React.FC = () => {
     }
   ]
 
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    const { dataSource } = state.dataSource
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
+        el => !!el
+      )
+      console.log('Sorted items: ', newData)
+      setState({ dataSource: newData })
+    }
+  }
+
+  const DraggableContainer = props => (
+    <SortableBody
+      useDragHandle
+      disableAutoscroll
+      // helperClass="row-dragging"
+      onSortEnd={onSortEnd}
+      {...props}
+    />
+  )
+
+  const DraggableBodyRow = ({ ...restProps }) => {
+    const { dataSource } = state.dataSource
+    // 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'])
+    console.log({ ...restProps })
+    return <SortableItem index={index} {...restProps} />
+  }
+
   return (
     <div className="h-full w-full flex flex-row">
       <ShowTitleMenu
@@ -162,14 +198,20 @@ const Invoice: React.FC = () => {
                 <div>开票内容</div>
                 <Button
                   type="primary"
-                  onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}
-                >
+                  onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
                   添加新内容
                 </Button>
               </div>
               <Table
+                pagination={false}
                 columns={mainColumns}
                 dataSource={state.dataSource}
+                components={{
+                  body: {
+                    wrapper: DraggableContainer,
+                    row: DraggableBodyRow
+                  }
+                }}
                 bordered
                 rowKey={row => row.id}
               />
@@ -201,8 +243,7 @@ const Invoice: React.FC = () => {
             message.error(`${state.type === modalType.CREATE ? '创建' : '更新'}失败，请重试`)
             return false
           }
-        }}
-      >
+        }}>
         {state.menuId === 1 ? (
           <>
             <ProFormText name="id" hidden />