upp

后台/src/components/Z_upFileMore/index.module.scss

@@ -23,20 +23,76 @@
       margin-bottom: 10px;
 
       &>div {
-        cursor: move;
         margin: 15px 20px 0px 0;
       }
     }
 
-    .fileImgListBoxNo {
-      &>div {
-        cursor: default;
-      }
-    }
-
     .fileBoxRow_r_img {
       position: relative;
 
+      .sortInpBox {
+        position: absolute;
+        bottom: 20px;
+        left: 0;
+        z-index: 99;
+        width: 100px;
+        height: 30px;
+        line-height: 20px;
+
+
+
+        .clickOk {
+          text-align: center;
+          opacity: .6;
+          cursor: pointer;
+          width: 18px;
+          height: 18px;
+          border-radius: 50%;
+          background-color: green;
+          color: #fff;
+          position: absolute;
+          z-index: 10;
+          right: 23px;
+          top: 2px;
+          font-size: 14px;
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+
+        .clickX {
+          text-align: center;
+          opacity: .6;
+          cursor: pointer;
+          width: 18px;
+          height: 18px;
+          border-radius: 50%;
+          background-color: #ff4d4d;
+          color: #fff;
+          position: absolute;
+          z-index: 10;
+          right: 3px;
+          top: 2px;
+          font-size: 14px;
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+
+        input {
+          padding-left: 3px;
+          width: 100%;
+          height: 20px;
+          line-height: 20px;
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+
       .fileImgListLDBox {
         height: 26px;
         background-color: rgba(0, 0, 0, .6);
@@ -48,8 +104,13 @@
         &>a {
           color: #fff;
         }
+
+        .sortBox {
+          cursor: pointer;
+        }
       }
 
+
       .clearCover {
         cursor: pointer;
         position: absolute;
@@ -66,6 +127,23 @@
         justify-content: center;
         align-items: center;
       }
+
+      .dangXBox {
+        cursor: pointer;
+        position: absolute;
+        z-index: 99;
+        left: 2px;
+        top: 2px;
+        background-color: rgba(0, 0, 0, .8);
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 16px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
 
     .fileTit {

后台/src/components/Z_upFileMore/index.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import {
   PlusOutlined,
   EyeOutlined,
   CloseOutlined,
   DownloadOutlined,
+  CheckOutlined,
 } from "@ant-design/icons";
-import { ReactSortable } from "react-sortablejs";
 import ImageLazy from "@/components/ImageLazy";
 
 import { FileImgListType } from "@/types";
@@ -106,6 +106,65 @@ function Z_upFileMore({
     [fileList, setFileList]
   );
 
+  const showInpRef = useRef<HTMLInputElement>(null);
+
+  // 点击 排序 编辑
+  const sortShowFu = useCallback(
+    (id: number, ind: number) => {
+      const newList = fileList.map((v) => {
+        return {
+          ...v,
+          show: id === v.id ? !v.show : false,
+        };
+      });
+      setFileList(newList);
+      setSortValue(ind + "");
+      setTimeout(() => {
+        if (showInpRef.current) showInpRef.current.focus();
+      }, 100);
+    },
+    [fileList, setFileList]
+  );
+
+  // 当前排序输入框的值
+  const [sortValue, setSortValue] = useState("");
+  const sortValueChange = useCallback(
+    (val: string) => {
+      if (Number(val) > fileList.length) val = fileList.length + "";
+      setSortValue(val.replace(/^(0+)|[^\d]+/g, ""));
+    },
+    [fileList.length]
+  );
+
+  // 点击序号的 √
+  const sortOkFu = useCallback(
+    (oldInd: number) => {
+      if (!sortValue) return MessageFu.warning("请输入序号值!");
+
+      const newInd = Number(sortValue) - 1;
+
+      if (oldInd === newInd) return MessageFu.warning("不能和之前的序号一样!");
+
+      const newArr = [...fileList];
+      newArr[oldInd] = fileList[newInd];
+      newArr[newInd] = fileList[oldInd];
+      setFileList(newArr.map((v) => ({ ...v, show: false })));
+
+      MessageFu.success("修改序号成功!");
+    },
+    [fileList, setFileList, sortValue]
+  );
+
+  const inputKeyFu = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, ind: number) => {
+      if (e.key === "Enter") {
+        sortOkFu(ind);
+        e.preventDefault();
+      }
+    },
+    [sortOkFu]
+  );
+
   return (
     <div className={styles.Z_upFileMore}>
       <input
@@ -124,15 +183,7 @@ function Z_upFileMore({
         <PlusOutlined />
       </div>
 
-      <ReactSortable
-        disabled={isLook}
-        className={classNames(
-          "fileImgListBox",
-          isLook ? "fileImgListBoxNo" : ""
-        )}
-        list={fileList}
-        setList={setFileList}
-      >
+      <div className="fileImgListBox">
         {fileList.map((v, i) => (
           <div className="fileBoxRow_r_img" key={v.id}>
             {v.filePath ? (
@@ -149,9 +200,43 @@ function Z_upFileMore({
                 <CloseOutlined />
               </div>
             </Popconfirm>
-            {/* 下面的预览和下载 */}
+
+            {/* 当前序号 */}
+            <div
+              className="dangXBox"
+              hidden={isLook || fileList.length <= 1}
+              onClick={() => sortShowFu(v.id, i + 1)}
+            >
+              {i + 1}
+            </div>
+
+            {/* 输入框 */}
+            <div className="sortInpBox" hidden={!v.show}>
+              <div className="clickOk" onClick={() => sortOkFu(i)}>
+                <CheckOutlined />
+              </div>
+              <div
+                className="clickX"
+                onClick={() =>
+                  setFileList(fileList.map((v) => ({ ...v, show: false })))
+                }
+              >
+                <CloseOutlined />
+              </div>
+              <input
+                onKeyDown={(e) => inputKeyFu(e, i)}
+                ref={v.show ? showInpRef : null}
+                maxLength={2}
+                type="text"
+                value={sortValue}
+                onChange={(e) => sortValueChange(e.target.value)}
+              />
+            </div>
+
+            {/* 下面的预览和下载 和 排序 */}
             <div className="fileImgListLDBox">
               <EyeOutlined
+                title="预览"
                 onClick={() =>
                   store.dispatch({
                     type: "layout/lookBigImg",
@@ -163,6 +248,7 @@ function Z_upFileMore({
                 }
               />
               <a
+                title="下载"
                 href={baseURL + v.filePath}
                 download
                 target="_blank"
@@ -173,11 +259,11 @@ function Z_upFileMore({
             </div>
           </div>
         ))}
-      </ReactSortable>
+      </div>
       <div className="fileTit" hidden={isLook}>
         {fileList.length && fileList.length >= 2 ? (
           <>
-            按住鼠标可拖动图片调整顺序。
+            点击左上角可设置图片序号（1-{fileList.length}），调整图片顺序。
             <br />
           </>
         ) : null}

后台/src/types/api/A1Plate.d.ts

@@ -14,4 +14,5 @@ export type FileImgListType = {
   id: number;
   fileName: string;
   filePath: string;
+  show:boolean
 };