|
@@ -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 />
|