feat: 开票内容的排序

src/pages/Business/Invoice/index.tsx

@@ -11,7 +11,8 @@ import {
   fetchInvoiceList,
   addInvoiceItem,
   updateInvoiceItem,
-  deleteInvoiceItem
+  deleteInvoiceItem,
+  sortInvoiceItem
 } from '@/services/user/system'
 import { useRequest } from 'umi'
 import classNames from 'classnames'
@@ -43,13 +44,11 @@ const Invoice: React.FC = () => {
     enable: 'open',
     type: modalType.CREATE
   })
-  console.log(state.activeKey)
-
   const { TabPane } = Tabs
   const onSelect = (menuId: string) => {
     setState({ ...state, menuId })
   }
-  const { run: tryGetInvoiceList } = useRequest(fetchInvoiceList, {
+  const { run: tryGetInvoiceList } = useRequest(() => fetchInvoiceList({ rate: state.activeKey }), {
     onSuccess: (result: API.InvoiceList[]) => {
       setState({ ...state, dataSource: result.map((item, index) => ({ ...item, index })) })
     }
@@ -85,14 +84,19 @@ const Invoice: React.FC = () => {
       message.error(e.message)
     }
   })
-  useEffect(() => {
-    // if (state.activeKey === '6') {
-    //   tryGetInvoiceList({ rate: state.activeKey })
-    // }
-    // if (state.activeKey === '13') {
-    //   tryGetInvoiceList({ rate: state.activeKey })
-    // }
+  const { run: trySortInvoiceItem } = useRequest(sortInvoiceItem, {
+    manual: true,
+    onSuccess: async () => {
+      await tryGetInvoiceList()
+      message.success('更新成功')
+    },
+    onError: e => {
+      message.error(e.message)
+    }
   })
+  useEffect(() => {
+    tryGetInvoiceList(state.activeKey)
+  }, [state.activeKey])
   const mainColumns: ColumnsType<API.InvoiceList> = [
     {
       dataIndex: 'sort',
@@ -139,9 +143,10 @@ const Invoice: React.FC = () => {
               <div className="px-2 text-red-500 cursor-pointer hover:text-red-600">停用</div>
             </Popconfirm>
           ) : null}
-          {record.enable === 'close' && (
+          {record.enable === 'close' || record.enable === '' ? (
             <Popconfirm
               className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
+              title="是否启用此开票内容"
               onConfirm={() =>
                 tryUpdateInvoiceItem({
                   id: record.id,
@@ -152,7 +157,22 @@ const Invoice: React.FC = () => {
               }>
               启用
             </Popconfirm>
-          )}
+          ) : null}
+          {/* {record.enable === 'close' && (
+            <Popconfirm
+              className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
+              title="是否启用此开票内容"
+              onConfirm={() =>
+                tryUpdateInvoiceItem({
+                  id: record.id,
+                  name: record.name,
+                  sort: record.sort,
+                  enable: 'open'
+                })
+              }>
+              启用
+            </Popconfirm>
+          )} */}
           <Popconfirm title="确认删除？" onConfirm={() => tryDeleteInvoiceItem(record.id)}>
             <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
               <Delete />
@@ -164,8 +184,6 @@ 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 +191,11 @@ const Invoice: React.FC = () => {
       )
       // console.log('Sorted items: ', newData)
       setState({ ...state, dataSource: newData })
+      const oldIndexItem = dataSource?.find(item => item.index === oldIndex)
+      const newIndexItem = dataSource?.find(item => item.index === newIndex)
+      if (oldIndexItem && newIndexItem) {
+        trySortInvoiceItem({ id: oldIndexItem.id, sortId: newIndexItem.id })
+      }
     }
   }
 
@@ -188,7 +211,6 @@ const Invoice: React.FC = () => {
 
   const DraggableBodyRow = ({ ...restProps }) => {
     const { dataSource } = state
-    // console.log(restProps)
     const index = dataSource?.findIndex(x => x.index === restProps['data-row-key'])
     return <SortableItem index={index} {...restProps} />
   }
@@ -202,6 +224,13 @@ const Invoice: React.FC = () => {
       />
       <div className="w-max-3/4">
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+          <div className="absolute right-4 top-4 z-100">
+            <Button
+              type="primary"
+              onClick={() => setState({ ...state, visible: true, type: modalType.CREATE })}>
+              添加新内容
+            </Button>
+          </div>
           {state.menuId === 1 ? (
             <Tabs
               defaultActiveKey="6"

src/services/user/system.ts

@@ -58,8 +58,10 @@ export async function updateParameters(params: API.UpdateParameters) {
 }
 
 /** 获取发票内容列表 */
-export async function fetchInvoiceList() {
-  return request<API.InvoiceList[]>('/invoice/item/list')
+export async function fetchInvoiceList(params: { rate: string }) {
+  return request<API.InvoiceList[]>('/invoice/item/list', {
+    params
+  })
 }
 
 /** 新增发票内容 */