|
@@ -1,23 +1,14 @@
|
|
|
-import React, {
|
|
|
- useCallback,
|
|
|
- useEffect,
|
|
|
- useMemo,
|
|
|
- useRef,
|
|
|
- useState,
|
|
|
-} from "react";
|
|
|
+import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
import styles from "./index.module.scss";
|
|
|
-import { Button, Table, Tooltip } from "antd";
|
|
|
+import { Button, Table } from "antd";
|
|
|
import QTadd from "./QTadd";
|
|
|
-import {
|
|
|
- A6Q_API_Tdel,
|
|
|
- A6Q_API_TgetList,
|
|
|
- A6Q_API_Tsort,
|
|
|
-} from "@/store/action/A6_1ques";
|
|
|
+import { A6Q_API_Tdel, A6Q_API_TgetList } from "@/store/action/A6_1ques";
|
|
|
|
|
|
// 表格拖动排序-----------------
|
|
|
-import { ExclamationCircleFilled } from "@ant-design/icons";
|
|
|
-import { DndProvider, useDrag, useDrop } from "react-dnd";
|
|
|
-import { HTML5Backend } from "react-dnd-html5-backend";
|
|
|
+// import { ExclamationCircleFilled } from "@ant-design/icons";
|
|
|
+// import { DndProvider, useDrag, useDrop } from "react-dnd";
|
|
|
+// import { HTML5Backend } from "react-dnd-html5-backend";
|
|
|
+
|
|
|
import MyPopconfirm from "@/components/MyPopconfirm";
|
|
|
import { MessageFu } from "@/utils/message";
|
|
|
|
|
@@ -56,84 +47,84 @@ function A6Qtopic({ fTitle, sId, closeFu }: Props) {
|
|
|
}, [getInfoFu]);
|
|
|
|
|
|
// 表格拖动排序
|
|
|
- interface DraggableBodyRowProps
|
|
|
- extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
|
- index: number;
|
|
|
- moveRow: (dragIndex: number, hoverIndex: number) => void;
|
|
|
- }
|
|
|
+ // interface DraggableBodyRowProps
|
|
|
+ // extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
|
+ // index: number;
|
|
|
+ // moveRow: (dragIndex: number, hoverIndex: number) => void;
|
|
|
+ // }
|
|
|
|
|
|
- const type = "DraggableBodyRow";
|
|
|
+ // const type = "DraggableBodyRow";
|
|
|
|
|
|
- const DraggableBodyRow = useCallback(
|
|
|
- ({
|
|
|
- index,
|
|
|
- moveRow,
|
|
|
- className,
|
|
|
- style,
|
|
|
- ...restProps
|
|
|
- }: DraggableBodyRowProps) => {
|
|
|
- // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
- const ref = useRef<HTMLTableRowElement>(null);
|
|
|
- // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
- const [{ isOver, dropClassName }, drop] = useDrop({
|
|
|
- accept: type,
|
|
|
- collect: (monitor) => {
|
|
|
- const { index: dragIndex } = monitor.getItem() || {};
|
|
|
- if (dragIndex === index) {
|
|
|
- return {};
|
|
|
- }
|
|
|
- return {
|
|
|
- isOver: monitor.isOver(),
|
|
|
- dropClassName:
|
|
|
- dragIndex < index ? " drop-over-downward" : " drop-over-upward",
|
|
|
- };
|
|
|
- },
|
|
|
- drop: (item: { index: number }) => {
|
|
|
- if (moveRow) moveRow(item.index, index);
|
|
|
- },
|
|
|
- });
|
|
|
- // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
- const [, drag] = useDrag({
|
|
|
- type,
|
|
|
- item: { index },
|
|
|
- collect: (monitor) => ({
|
|
|
- isDragging: monitor.isDragging(),
|
|
|
- }),
|
|
|
- });
|
|
|
- drop(drag(ref));
|
|
|
+ // const DraggableBodyRow = useCallback(
|
|
|
+ // ({
|
|
|
+ // index,
|
|
|
+ // moveRow,
|
|
|
+ // className,
|
|
|
+ // style,
|
|
|
+ // ...restProps
|
|
|
+ // }: DraggableBodyRowProps) => {
|
|
|
+ // // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
+ // const ref = useRef<HTMLTableRowElement>(null);
|
|
|
+ // // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
+ // const [{ isOver, dropClassName }, drop] = useDrop({
|
|
|
+ // accept: type,
|
|
|
+ // collect: (monitor) => {
|
|
|
+ // const { index: dragIndex } = monitor.getItem() || {};
|
|
|
+ // if (dragIndex === index) {
|
|
|
+ // return {};
|
|
|
+ // }
|
|
|
+ // return {
|
|
|
+ // isOver: monitor.isOver(),
|
|
|
+ // dropClassName:
|
|
|
+ // dragIndex < index ? " drop-over-downward" : " drop-over-upward",
|
|
|
+ // };
|
|
|
+ // },
|
|
|
+ // drop: (item: { index: number }) => {
|
|
|
+ // if (moveRow) moveRow(item.index, index);
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
+ // const [, drag] = useDrag({
|
|
|
+ // type,
|
|
|
+ // item: { index },
|
|
|
+ // collect: (monitor) => ({
|
|
|
+ // isDragging: monitor.isDragging(),
|
|
|
+ // }),
|
|
|
+ // });
|
|
|
+ // drop(drag(ref));
|
|
|
|
|
|
- return (
|
|
|
- <tr
|
|
|
- ref={ref}
|
|
|
- className={`${className}${isOver ? dropClassName : ""}`}
|
|
|
- style={{ cursor: "move", ...style }}
|
|
|
- {...restProps}
|
|
|
- />
|
|
|
- );
|
|
|
- },
|
|
|
- []
|
|
|
- );
|
|
|
+ // return (
|
|
|
+ // <tr
|
|
|
+ // ref={ref}
|
|
|
+ // className={`${className}${isOver ? dropClassName : ""}`}
|
|
|
+ // style={{ cursor: "move", ...style }}
|
|
|
+ // {...restProps}
|
|
|
+ // />
|
|
|
+ // );
|
|
|
+ // },
|
|
|
+ // []
|
|
|
+ // );
|
|
|
|
|
|
- const components = {
|
|
|
- body: {
|
|
|
- row: DraggableBodyRow,
|
|
|
- },
|
|
|
- };
|
|
|
+ // const components = {
|
|
|
+ // body: {
|
|
|
+ // row: DraggableBodyRow,
|
|
|
+ // },
|
|
|
+ // };
|
|
|
|
|
|
- const moveRow = useCallback(
|
|
|
- async (dragIndex: number, hoverIndex: number) => {
|
|
|
- if (dragIndex === hoverIndex) return;
|
|
|
- // 交互位置-之前的id
|
|
|
- const beforeId = list[dragIndex].id;
|
|
|
- const afterId = list[hoverIndex].id;
|
|
|
- // console.log("交换位置", beforeId, afterId);
|
|
|
+ // const moveRow = useCallback(
|
|
|
+ // async (dragIndex: number, hoverIndex: number) => {
|
|
|
+ // if (dragIndex === hoverIndex) return;
|
|
|
+ // // 交互位置-之前的id
|
|
|
+ // const beforeId = list[dragIndex].id;
|
|
|
+ // const afterId = list[hoverIndex].id;
|
|
|
+ // // console.log("交换位置", beforeId, afterId);
|
|
|
|
|
|
- const res = await A6Q_API_Tsort(beforeId, afterId);
|
|
|
+ // const res = await A6Q_API_Tsort(beforeId, afterId);
|
|
|
|
|
|
- if (res.code === 0) getInfoFu();
|
|
|
- },
|
|
|
- [getInfoFu, list]
|
|
|
- );
|
|
|
+ // if (res.code === 0) getInfoFu();
|
|
|
+ // },
|
|
|
+ // [getInfoFu, list]
|
|
|
+ // );
|
|
|
|
|
|
// 点击删除
|
|
|
const delTableFu = useCallback(
|
|
@@ -154,11 +145,11 @@ function A6Qtopic({ fTitle, sId, closeFu }: Props) {
|
|
|
title: (
|
|
|
<div className="moveTit">
|
|
|
序号
|
|
|
- <Tooltip title="按住鼠标可拖动表格调整顺序">
|
|
|
+ {/* <Tooltip title="按住鼠标可拖动表格调整顺序">
|
|
|
<div className="inco" hidden={list.length < 2}>
|
|
|
<ExclamationCircleFilled />
|
|
|
</div>
|
|
|
- </Tooltip>
|
|
|
+ </Tooltip> */}
|
|
|
</div>
|
|
|
),
|
|
|
render: (_1: any, _2: any, index: number) => index + 1,
|
|
@@ -202,7 +193,7 @@ function A6Qtopic({ fTitle, sId, closeFu }: Props) {
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
- }, [delTableFu, list.length]);
|
|
|
+ }, [delTableFu]);
|
|
|
|
|
|
// 弹窗的显示和隐藏
|
|
|
const [moInfo, setMoInfo] = useState({ id: 0, num: 0 });
|
|
@@ -226,7 +217,15 @@ function A6Qtopic({ fTitle, sId, closeFu }: Props) {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="QTtable">
|
|
|
- <DndProvider backend={HTML5Backend}>
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 688 }}
|
|
|
+ columns={columns}
|
|
|
+ dataSource={list}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={false}
|
|
|
+ />
|
|
|
+
|
|
|
+ {/* <DndProvider backend={HTML5Backend}>
|
|
|
<Table
|
|
|
scroll={{ y: 688 }}
|
|
|
columns={columns}
|
|
@@ -242,7 +241,7 @@ function A6Qtopic({ fTitle, sId, closeFu }: Props) {
|
|
|
return attr as React.HTMLAttributes<any>;
|
|
|
}}
|
|
|
/>
|
|
|
- </DndProvider>
|
|
|
+ </DndProvider> */}
|
|
|
</div>
|
|
|
{moInfo.id ? (
|
|
|
<QTadd
|