[pit avoidance means "difficult"] to realize editable drag and drop sorting of protable

DragSortTable Sort by react-sortable-hoc, Need to provide rowKey To determine the unique value of the data , Otherwise it won't work properly . Temporary does not support request Sort the requested data , Can be request The requested data is saved through dataSource Pass in .

️： If the list is not reordered after dragging , The big reason is that there is no transmission dataSource As a result of . So in request The data requested in the needs to be stored dataSource Talent .

ProTable To configure

<ProTable
      rowKey="index"
      columns={
    columns}
      actionRef={
    actionRef}
      form={
    form}
      pagination={
    {
    
        pageSize: 10,
      }}
      dataSource={
    dataSource}
      search={
    true}
      request={
    async (params) => {
    
        const res = await getRuleList(p, {
    
          ...params,
          orderByPriority: true,
          current: 1,
          pageSize: 10,
          status: 3,
        });
        const list = res.data.list.map((item: any, index: number) => ({
     ...item, index }));
        setDataSource(list);
        setDisableBtn(list[0].inPriorityAudit);
        return {
    
          data: list,
          success: res?.success,
          total: res?.data?.total,
        };
      }}
      components={
    {
     
        body: {
    
          wrapper: DraggableContainer,
          row: DraggableBodyRow,
        },
      }}
      toolBarRender={
    () => [
        <Button
          onClick={
    () => setIsEdit(true)}
          type="primary"
          disabled={
    disableBtn}
          style={
    {
     display: isEdit ? 'none' : 'block' }}
        >
           Ed   Compilation 
        </Button>,

        <Button
          onClick={
    () => setIsEdit(false)}
          type="primary"
          style={
    {
     display: isEdit ? 'block' : 'none' }}
        >
           Cancel editing 
        </Button>,
        <Popconfirm
          title=" Are you sure to submit for review ？"
          onConfirm={
    confirmSubmit}
          okText=" confirm "
          cancelText=" Cancel "
        >
          <Button type="primary" disabled={
    !isEdit}>
             Submit audit 
          </Button>
        </Popconfirm>,

        <Popconfirm
          title=" Whether it is approved or not "
          onConfirm={
    async () => {
    
            await client<any>(` The audit passes the interface `, {
    
              method: 'put',
              params: {
    },
            }).then((res) => {
    
              if (res?.success)
                notification.success({
    
                  message: ' Audit completed ',
                });
            });
            actionRef?.current?.reload();
          }}
          onCancel={
    async () => {
    
            await client<any>(` Audit failed interface `, {
    
              method: 'put',
              params: {
    },
            }).then((res) => {
    
              if (res?.success)
                notification.success({
    
                  message: ' Audit completed ',
                });
            });
            actionRef?.current?.reload();
          }}
          okText=" adopt "
          cancelText=" Refuse "
        >
          <Button type="primary" disabled={
    !disableBtn}>
             To examine   nucleus 
          </Button>
        </Popconfirm>,
      ]}
    />

Drag and drop functionality

components={
    {
     
        body: {
    
          wrapper: DraggableContainer,
          row: DraggableBodyRow,
        },
}}

 const onSortEnd = ({
     oldIndex, newIndex }: {
     oldIndex: number; newIndex: number }) => {
    
    if (oldIndex !== newIndex) {
    
      setIsDrag(true);
      const newData = arrayMoveImmutable([...dataSource], oldIndex, newIndex).filter((el) => !!el);
      const list = [...newData].map((item: any, index: number) => ({
     ...item, index })) as any;
      list.map((item: any) => {
    
        obj = {
    
          ...obj,
          ruleId: item.id,
          newPriority: item.index + 1,
        };
        itemList.push(obj);
        setDragList(itemList);
      });
      setDataSource(list);
    }
  };
 const DraggableContainer = (props: any) => (
    <SortContainer
      useDragHandle
      disableAutoscroll
      helperClass="row-dragging"
      onSortEnd={
    onSortEnd}
      {
    ...props}
    />
  );

  const DraggableBodyRow = (props: any) => {
    
    const {
     className, style, ...restProps } = props;
    const index = dataSource.findIndex((x) => x.index === restProps['data-row-key']);
    return <SortableItem index={
    index} {
    ...restProps} />;
  }

thus , Drag and drop sorting can be realized .

Drag and drop sorting through editing

1）InputNumber Listen for changes in the input box

const columns = [
    {
    
      title: ' Rule priority ',
      dataIndex: 'businessPriority',
      hideInSearch: true,
      align: 'center',
      render: (text: any, record: any) => {
    
        if (isEdit) {
    
          return (
            <div>
              <InputNumber
                defaultValue={
    isDrag ? record.index + 1 : record.businessPriority}
                onChange={
    (value: any) => inputChange(value, record)}
              />
            </div>
          );
        } else {
    
          return record.businessPriority;
        }
      },
    },
    {
    
      title: 'index',
      dataIndex: 'index',
      hideInSearch: true,
      hideInTable: true,
    },
  ] as any;

2） Set two status values , It is judged to be in editing status or Drag state

 const [isEdit, setIsEdit] = useState(false);
 const [isDrag, setIsDrag] = useState(false);

3） Get the whole Table Edited data , There is itemList In the array

  let itemList = [] as any;
  let obj = {
    } as any;
  const inputChange = (value: any, record: any) => {
    
    let ruleId;
    let newPriority;
    if (value) {
    
      obj = {
    
        ...obj,
        ruleId: record.id,
        newPriority: value,
      };
      for (let i = 0; i < itemList.length; i++) {
    
        if (itemList[i].ruleId === obj.ruleId) {
    
          itemList[i].newPriority = obj.newPriority;
          return;
        }
      }
      itemList.push(obj);
    }
  };

Drag and drop sorting combined with editing function , How to filter duplicate data

There is no problem using the above steps alone , But if we After dragging -> Then edit the input box perhaps Edit the input box -> Then drag and drop to adjust the sorting , When the value is finally transferred , There will be duplicate values in the array , Similar to the following structure ：

[
	{
    id: 1, newIndex: 2},
	{
    id: 2, newIndex: 5},
	{
    id: 1, newIndex: 3}	// Once again, it has been revised id by 1 Sort value of 
]

In this way, the back end cannot know id：1 What is the sorting value of the data of , So we need to do it for the last time , Replace the old sort value .

1） Record the array after dragging 、 The array after editing

Drag array

const [dragList, setDragList] = useState([]);

Edit array

let itemList = [] as any;

2） Re assign values before submitting data

  const confirmSubmit = async () => {
    
    console.log(' The submitted dragList', dragList);
    console.log(' The submitted itemList', itemList);
    const result = handleListrepeat(dragList, itemList);
  }
  const handleListrepeat = (listdrag: any, listItem: any) => {
    
    if (listdrag.length === 0) {
    
      return listItem;
    } else if (listItem.length === 0) {
    
      return listdrag;
    } else {
    
      for (let i = 0; i < listdrag.length; i++) {
    
        for (let k = 0; k < listItem.length; k++) {
    
          if (listdrag[i].ruleId === listItem[k].ruleId) {
    
            listdrag[i].newPriority = listItem[k].newPriority;
            return listdrag;
          }
        }
      }
    }
  };

Finally, you can correctly pass the newly sorted array to the back end ！