Explorar el Código

修改跳题逻辑

shaogen1995 hace 1 año
padre
commit
ec5d1e82e8

+ 49 - 13
src/pages/A6_1ques/A6Qtopic/QTadd.tsx

@@ -163,7 +163,7 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
       else value = e;
 
       let num = index;
-      if (index === 0) num = 2;
+      if (index === 1) num = 2;
       else num = 1;
 
       // 第二级信息的改变
@@ -221,11 +221,15 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
   // 跳题的数组
   const numList = useMemo(() => {
     let arr: number[] = [];
-    for (let ii = 0; ii < list.length; ii++) {
+
+    let numRes = tableLen;
+    if (moInfo.id < 0) numRes += list.length;
+
+    for (let ii = 0; ii < numRes; ii++) {
       arr.push(ii + 1);
     }
     return arr;
-  }, [list.length]);
+  }, [list.length, moInfo.id, tableLen]);
 
   // 单个题目是否全部填写标准
   const oneFlag = useCallback((info: A6QListType) => {
@@ -306,6 +310,14 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
     }
   }, [closeFu, fatherId, list, moInfo.id, upTableFu]);
 
+  // 下拉框的筛选数字/题目序号
+  const selectNum = useCallback(
+    (i: number) => {
+      return moInfo.id > 0 ? moInfo.num : tableLen + i + 1;
+    },
+    [moInfo.id, moInfo.num, tableLen]
+  );
+
   return (
     <Modal
       wrapClassName={styles.QTadd}
@@ -362,14 +374,13 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                 {/* 题目 */}
                 <div className="A6Q2_1">
                   <div>
-                    <span>*</span> 题目{" "}
-                    {moInfo.id > 0 ? moInfo.num : tableLen + i + 1}
+                    <span>*</span> 题目 {selectNum(i)}
                   </div>
                   <div>
                     <TextArea
                       value={v.name}
                       onChange={(e) =>
-                        dataChangeFu(e.target.value, v.id, "name", i)
+                        dataChangeFu(e.target.value, v.id, "name", selectNum(i))
                       }
                       className="A6text"
                       placeholder="请输入内容"
@@ -386,7 +397,9 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                     <Select
                       disabled={v.skip === "选项跳题"}
                       value={v.type}
-                      onChange={(e) => dataChangeFu(e, v.id, "type", i)}
+                      onChange={(e) =>
+                        dataChangeFu(e, v.id, "type", selectNum(i))
+                      }
                       placeholder="请选择"
                       style={{ width: 100 }}
                       options={options1}
@@ -394,7 +407,9 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                     &emsp;&emsp;跳题&emsp;
                     <Select
                       value={v.skip}
-                      onChange={(e) => dataChangeFu(e, v.id, "skip", i)}
+                      onChange={(e) =>
+                        dataChangeFu(e, v.id, "skip", selectNum(i))
+                      }
                       placeholder="请选择"
                       style={{ width: 100 }}
                       options={
@@ -411,7 +426,7 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                         placeholder="请选择"
                         style={{ width: 100 }}
                         options={numList
-                          .filter((b) => b !== i + 1)
+                          .filter((b) => b !== selectNum(i))
                           .map((c) => ({
                             value: c,
                             label: c,
@@ -424,7 +439,12 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                       <Checkbox
                         checked={v.custom}
                         onChange={(e) =>
-                          dataChangeFu(e.target.checked, v.id, "custom", i)
+                          dataChangeFu(
+                            e.target.checked,
+                            v.id,
+                            "custom",
+                            selectNum(i)
+                          )
                         }
                       >
                         支持填写自定义回答
@@ -444,7 +464,12 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                           <Input
                             value={v2.txt}
                             onChange={(e) =>
-                              dataChangeFu(e.target.value, v2.id, "txt", i2)
+                              dataChangeFu(
+                                e.target.value,
+                                v2.id,
+                                "txt",
+                                selectNum(i)
+                              )
                             }
                             maxLength={50}
                             showCount
@@ -460,7 +485,12 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                           <Checkbox
                             checked={v2.skip2}
                             onChange={(e) =>
-                              dataChangeFu(e.target.checked, v2.id, "skip2", i)
+                              dataChangeFu(
+                                e.target.checked,
+                                v2.id,
+                                "skip2",
+                                selectNum(i)
+                              )
                             }
                           >
                             跳题
@@ -473,7 +503,13 @@ function QTadd({ moInfo, closeFu, tableLen, upTableFu, fatherId }: Props) {
                               placeholder="请选择"
                               style={{ width: 80 }}
                               options={numList
-                                .filter((b) => b !== i + 1)
+                                .filter(
+                                  (b) =>
+                                    b !==
+                                    (moInfo.id > 0
+                                      ? moInfo.num
+                                      : tableLen + i + 1)
+                                )
                                 .map((c) => ({
                                   value: c,
                                   label: c,

+ 91 - 92
src/pages/A6_1ques/A6Qtopic/index.tsx

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

+ 3 - 2
src/pages/A6_1ques/index.tsx

@@ -89,13 +89,14 @@ function A6_1ques() {
         title: "操作",
         render: (item: A6QtableType) => (
           <>
-            <Button
+          {/* 待完善 - 暂时隐藏 */}
+            {/* <Button
               size="small"
               type="text"
               onClick={() => setInfo({ id: item.id, txt: "查看" })}
             >
               查看
-            </Button>
+            </Button> */}
             <Button
               size="small"
               type="text"