fix: 开票内容

src/components/RightContent/AvatarDropdown.tsx

@@ -101,7 +101,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
         <Avatar
           size="small"
           className={styles.avatar}
-          src={`http://cld.smartcost.com.cn${currentUser.avatar}_2.jpg`}
+          // src={`http://cld.smartcost.com.cn${currentUser.avatar}_2.jpg`}
           alt="avatar"
         />
         <span className={`${styles.name} anticon`}>{currentUser.username}</span>

src/pages/Business/Invoice/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef } from 'react'
-import { Button, Popconfirm, Table, message } from 'antd'
+import React, { useState, useRef, useEffect } from 'react'
+import { Button, Popconfirm, Table, message, Tabs } from 'antd'
 import { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form'
 import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
 import type { ColumnsType } from 'antd/lib/table'
@@ -15,6 +15,7 @@ import {
 } from '@/services/user/system'
 import { useRequest } from 'umi'
 import classNames from 'classnames'
+import './index.less'
 
 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)
 const SortableItem = SortableElement(props => <tr {...props} />)
@@ -35,17 +36,21 @@ const Invoice: React.FC = () => {
   const formRef = useRef<FormInstance>(null)
   const [state, setState] = useState({
     id: '',
+    activeKey: '6',
     menuId: 1,
     dataSource: [],
     visible: false,
     enable: 'open',
     type: modalType.CREATE
   })
+  console.log(state.activeKey)
+
+  const { TabPane } = Tabs
   const onSelect = (menuId: string) => {
     setState({ ...state, menuId })
   }
   const { run: tryGetInvoiceList } = useRequest(fetchInvoiceList, {
-    onSuccess: (result: API.InvoicegroupItem[]) => {
+    onSuccess: (result: API.InvoiceList[]) => {
       setState({ ...state, dataSource: result.map((item, index) => ({ ...item, index })) })
     }
   })
@@ -80,7 +85,15 @@ const Invoice: React.FC = () => {
       message.error(e.message)
     }
   })
-  const mainColumns: ColumnsType<API.InvoicegroupItem> = [
+  useEffect(() => {
+    // if (state.activeKey === '6') {
+    //   tryGetInvoiceList({ rate: state.activeKey })
+    // }
+    // if (state.activeKey === '13') {
+    //   tryGetInvoiceList({ rate: state.activeKey })
+    // }
+  })
+  const mainColumns: ColumnsType<API.InvoiceList> = [
     {
       dataIndex: 'sort',
       title: '排序',
@@ -151,14 +164,14 @@ const Invoice: React.FC = () => {
   ]
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
-    console.log(oldIndex, newIndex)
+    // console.log(oldIndex, newIndex)
 
     const { dataSource } = state
     if (oldIndex !== newIndex) {
       const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
         el => !!el
       )
-      console.log('Sorted items: ', newData)
+      // console.log('Sorted items: ', newData)
       setState({ ...state, dataSource: newData })
     }
   }
@@ -167,7 +180,7 @@ const Invoice: React.FC = () => {
     <SortableBody
       useDragHandle
       disableAutoscroll
-      // helperClass="row-dragging"
+      helperClass="row-dragging"
       onSortEnd={onSortEnd}
       {...props}
     />
@@ -175,9 +188,7 @@ 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
+    // console.log(restProps)
     const index = dataSource?.findIndex(x => x.index === restProps['data-row-key'])
     return <SortableItem index={index} {...restProps} />
   }
@@ -192,30 +203,65 @@ const Invoice: React.FC = () => {
       <div className="w-max-3/4">
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
           {state.menuId === 1 ? (
-            <>
-              <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
-                <div>开票内容</div>
-                <Button
-                  type="primary"
-                  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="index"
-              />
-            </>
-          ) : null}
+            <Tabs
+              defaultActiveKey="6"
+              type="card"
+              onChange={key => setState({ ...state, activeKey: key })}>
+              <TabPane tab="开票内容 1" key="6">
+                <Table<API.InvoiceList>
+                  pagination={false}
+                  columns={mainColumns}
+                  dataSource={state.dataSource}
+                  components={{
+                    body: {
+                      wrapper: DraggableContainer,
+                      row: DraggableBodyRow
+                    }
+                  }}
+                  bordered
+                  rowKey="index"
+                />
+              </TabPane>
+              <TabPane tab="开票内容 2" key="13">
+                <Table<API.InvoiceList>
+                  pagination={false}
+                  columns={mainColumns}
+                  dataSource={state.dataSource}
+                  components={{
+                    body: {
+                      wrapper: DraggableContainer,
+                      row: DraggableBodyRow
+                    }
+                  }}
+                  bordered
+                  rowKey="index"
+                />
+              </TabPane>
+            </Tabs>
+          ) : // <>
+          //   <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
+          //     <div>开票内容</div>
+          //     <Button
+          //       type="primary"
+          //       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="index"
+          //   />
+          // </>
+          null}
         </div>
       </div>
       <ModalForm

src/services/user/system.ts

@@ -71,7 +71,7 @@ export async function addInvoiceItem(params: API.AddInvoiceItem) {
 }
 
 /** 编辑发票内容 */
-export async function updateInvoiceItem(params: API.UpdateInvoiceItem) {
+export async function updateInvoiceItem(params: API.UpdateInvoicegroupItem) {
   return request('/invoice/item/update', {
     method: 'POST',
     data: params
@@ -85,3 +85,11 @@ export async function deleteInvoiceItem(id: string) {
     data: { id }
   })
 }
+
+/** 发票内容排序 */
+export async function sortInvoiceItem(params: API.UpdateInvoicegroupItem) {
+  return request('/invoice/item/sort', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/user/typings.d.ts

@@ -294,6 +294,9 @@ declare namespace API {
   type InvoiceList = {
     id: string
     name: string
+    rate: Number
+    sort: Number
+    enable: string
   }
 
   type AddInvoiceItem = {
@@ -301,17 +304,20 @@ declare namespace API {
     name: string
   }
 
-  type InvoicegroupItem = {
+  type UpdateInvoicegroupItem = {
     id: string
     name: string
     sort: string
     enable: string
   }
 
-  type UpdateInvoicegroupItem = InvoicegroupItem & { id: string }
-
   type DeleteInvoiceItem = {
     id: string
     name: string
   }
+
+  type SortInvoiceItem = {
+    id: string
+    sortId: string
+  }
 }