upp

src/components/Z2upVideos/index.tsx

@@ -183,7 +183,7 @@ function Z2upVideos(
         <div className="fileTit" hidden={isLook}>
           {fileList.length && fileList.length >= 2 ? (
             <>
-              按住鼠标可拖动图片调整顺序。
+              按住鼠标可拖动视频调整顺序。
               <br />
             </>
           ) : null}

src/components/Z3upFiles/index.module.scss

@@ -0,0 +1,61 @@
+.Z3upFiles {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global {
+
+    .Z3files {
+      width: 500px;
+
+      .Z3filesRow {
+        display: flex;
+        margin-top: 10px;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+
+        .Z3files1 {
+          width: calc(100% - 130px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .Z3files2 {
+          display: flex;
+          width: 120px;
+
+          &>span {
+            cursor: pointer;
+          }
+          a{
+            color: black;
+          }
+        }
+      }
+    }
+
+    .fileTit {
+      margin-top: 14px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+
+      .noUpThumb {
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transition: top .2s;
+        color: #ff4d4f;
+        top: -10px;
+      }
+
+
+
+      .noUpThumbAc {
+        top: 0;
+        opacity: 1;
+      }
+    }
+  }
+}

src/components/Z3upFiles/index.tsx

@@ -0,0 +1,167 @@
+import React, { useCallback, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import { FileImgListType } from "@/types";
+import { API_upFile } from "@/store/action/layout";
+import { MessageFu } from "@/utils/message";
+import { fileDomInitialFu } from "@/utils/domShow";
+import { forwardRef, useImperativeHandle } from "react";
+import { Button, Popconfirm } from "antd";
+import {
+  EyeOutlined,
+  UploadOutlined,
+  CloseOutlined,
+  DownloadOutlined,
+} from "@ant-design/icons";
+import classNames from "classnames";
+import { baseURL } from "@/utils/http";
+import filesLookFu from "@/utils/filesLook";
+
+type Props = {
+  max: number; //最多传多少个文件
+  isLook: boolean; //是否是查看
+  ref: any; //当前自己的ref，给父组件调用
+  fileCheck: boolean;
+  dirCode: string; //文件的code码
+  myUrl: string;
+  fromData?: any;
+};
+
+function Z3upFiles(
+  { max, isLook, fileCheck, dirCode, myUrl, fromData }: Props,
+  ref: any
+) {
+  const [fileList, setFileList] = useState<FileImgListType[]>([]);
+
+  const myInput = useRef<HTMLInputElement>(null);
+
+  // 上传文件
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0];
+        // 创建FormData对象
+        const fd = new FormData();
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append("type", "img");
+        fd.append("dirCode", dirCode);
+        fd.append("typePath", "1");
+        fd.append("file", filesInfo);
+
+        if (fromData) {
+          for (const k in fromData) {
+            if (fromData[k]) fd.append(k, fromData[k]);
+          }
+        }
+
+        e.target.value = "";
+
+        try {
+          const res = await API_upFile(fd, myUrl);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            setFileList([...fileList, res.data]);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
+        }
+      }
+    },
+    [dirCode, fileList, fromData, myUrl]
+  );
+
+  // 列表删除某一个文件
+  const delImgListFu = useCallback(
+    (id: number) => {
+      const newItems = fileList.filter((v) => v.id !== id);
+      setFileList(newItems);
+    },
+    [fileList, setFileList]
+  );
+
+  // 让父组件调用，拿到 附件信息
+  const filesIdRes = useCallback(() => {
+    return fileList;
+  }, [fileList]);
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    filesIdRes,
+  }));
+
+  return (
+    <div className={styles.Z3upFiles}>
+      <input
+        id="upInput"
+        type="file"
+        ref={myInput}
+        onChange={(e) => handeUpPhoto(e)}
+      />
+      <div className="Z3Btn">
+        {fileList.length < max ? (
+          <Button
+            onClick={() => myInput.current?.click()}
+            icon={<UploadOutlined />}
+          >
+            上传
+          </Button>
+        ) : null}
+
+        <div className="Z3files">
+          {fileList.map((v) => (
+            <div className="Z3filesRow" key={v.id}>
+              <div className="Z3files1" title={v.fileName}>
+                {v.fileName}
+              </div>
+              <div className="Z3files2">
+                {filesLookFu(v.fileName) ? (
+                  <>
+                    <EyeOutlined
+                      title="查看"
+                      onClick={() => filesLookFu(v.fileName, v.filePath)}
+                    />
+                    &emsp;
+                  </>
+                ) : null}
+                <a
+                  title="下载"
+                  href={baseURL + v.filePath}
+                  download
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <DownloadOutlined />
+                </a>
+                &emsp;
+                <Popconfirm
+                  title="删除后无法恢复，是否删除?"
+                  okText="删除"
+                  cancelText="取消"
+                  onConfirm={() => delImgListFu(v.id)}
+                >
+                  <CloseOutlined title="删除" hidden={isLook} />
+                </Popconfirm>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="fileTit" hidden={isLook}>
+          此处的附件为对外的项目成果文件，如程序安装包等，最多支持10个
+          <br />
+          <div
+            className={classNames(
+              "noUpThumb",
+              fileList.length <= 0 && fileCheck ? "noUpThumbAc" : ""
+            )}
+          >
+            请上传视频!
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default forwardRef(Z3upFiles);

src/pages/A1Project/A1Add/index.module.scss

@@ -14,8 +14,12 @@
       width: 100%;
       height: calc(100% - 60px);
       overflow-y: auto;
-      padding: 20px 140px 20px 0px;
-    
+      padding: 20px 20px 20px 0px;
+
+      .ant-form-item-label{
+        width: 120px !important;
+      }
+
       .A1AddBtn {
         margin-top: 30px;
         width: 740px;
@@ -33,7 +37,7 @@
         margin-bottom: 10px;
 
         .e_rowL {
-          width: 128px;
+          width: 120px;
           text-align: right;
 
           &>span {
@@ -42,13 +46,33 @@
             top: 3px;
           }
         }
-        .e_rowL2{
+
+        .e_rowL2 {
           position: relative;
           top: 4px;
+
+
         }
 
         .e_rowR {
           width: calc(100% - 130px);
+
+          .erLinkTop {
+            .ant-btn{
+              width: 82px;
+            }
+            .e_rowRtit {
+              font-size: 14px;
+              color: rgb(126, 124, 124);
+            }
+          }
+          .erLinkMain{
+            .erLinkRow{
+              margin-top: 15px;
+            }
+          }
+
+
         }
 
       }

src/pages/A1Project/A1Add/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import {
   Button,
@@ -16,6 +16,8 @@ import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import Z1upImgs from "@/components/Z1upImgs";
 import Z2upVideos from "@/components/Z2upVideos";
+import { MessageFu } from "@/utils/message";
+import Z3upFiles from "@/components/Z3upFiles";
 
 const { RangePicker } = DatePicker;
 
@@ -30,6 +32,12 @@ const eeeeArr = [
   },
 ];
 
+type LinkType = {
+  id: number;
+  name: string;
+  link: string;
+};
+
 type Props = {
   pageType: { txt: string; id: number };
   closeFu: () => void;
@@ -39,36 +47,80 @@ function A1Add({ pageType, closeFu }: Props) {
   // 表单的ref
   const FormBoxRef = useRef<FormInstance>(null);
 
+  // 图片数组的ref
+  const imgsRef = useRef<any>(null);
+
+  // 视频数组的ref
+  const videosRef = useRef<any>(null);
+
+  // 有关 项目链接
+  const [linkArr, setLinkArr] = useState<LinkType[]>([]);
+
+  const addLinkFu = useCallback(() => {
+    if (linkArr.length >= 10) return;
+    setLinkArr([...linkArr, { id: Date.now(), name: "", link: "" }]);
+  }, [linkArr]);
+
+  const delLinkFu = useCallback(
+    (id: number) => {
+      setLinkArr(linkArr.filter((v) => v.id !== id));
+    },
+    [linkArr]
+  );
+
+  const linkChangeFu = useCallback(
+    (id: number, val: string, type: "name" | "link") => {
+      setLinkArr(
+        linkArr.map((v) => ({
+          ...v,
+          [type]: v.id === id ? val.replace(/\s+/g, "") : v[type],
+        }))
+      );
+    },
+    [linkArr]
+  );
+
   // 没有通过校验
   const onFinishFailed = useCallback(() => {}, []);
 
   // 通过校验点击确定
-  const onFinish = useCallback(async (value: any) => {
-    console.log("通过校验", value);
-
-    if (value.ffff) {
-      console.log(
-        "修改日期格式",
-        dayjs(value.ffff[0]).format("YYYY-MM-DD"),
-        dayjs(value.ffff[1]).format("YYYY-MM-DD")
-      );
-    }
+  const onFinish = useCallback(
+    async (value: any) => {
+      console.log("通过校验", value);
 
-    // 获取图片地址
-    const imgsRes = imgsRef.current.imgIdsRes();
+      if (value.ffff) {
+        console.log(
+          "修改日期格式",
+          dayjs(value.ffff[0]).format("YYYY-MM-DD"),
+          dayjs(value.ffff[1]).format("YYYY-MM-DD")
+        );
+      }
 
-    console.log("获取图片地址", imgsRes);
+      // 获取图片地址
+      const imgsRes = imgsRef.current.imgIdsRes();
 
-    // 获取视频地址
-    const videosRes = videosRef.current.videoIdsRes();
-    console.log("获取视频地址", videosRes);
-  }, []);
+      console.log("获取图片地址", imgsRes);
 
-  // 图片数组的ref
-  const imgsRef = useRef<any>(null);
+      // 获取视频地址
+      const videosRes = videosRef.current.videoIdsRes();
+      console.log("获取视频地址", videosRes);
 
-  // 视频数组的ref
-  const videosRef = useRef<any>(null);
+      // 检查链接填写完整情况
+      const linkArrFlag = linkArr.some((v) => !v.name || !v.link);
+
+      if (linkArrFlag) return MessageFu.warning("请完整填写 项目链接 !");
+
+      console.log("项目链接", linkArr);
+
+      // 项目成功
+      const filesRes = filesRef.current.filesIdRes();
+      console.log("获取项目成果文件", filesRes);
+    },
+    [linkArr]
+  );
+
+  // 项目成功的 ref
+  const filesRef = useRef<any>(null);
 
   return (
     <div className={styles.A1Add}>
@@ -77,7 +129,6 @@ function A1Add({ pageType, closeFu }: Props) {
           scrollToFirstError={true}
           ref={FormBoxRef}
           name="basic"
-          labelCol={{ span: 2 }}
           onFinish={onFinish}
           onFinishFailed={onFinishFailed}
           autoComplete="off"
@@ -93,7 +144,7 @@ function A1Add({ pageType, closeFu }: Props) {
               disabled={pageType.txt === "edit"}
               maxLength={30}
               showCount
-              placeholder="请输入内容，最多30字；不能重复"
+              placeholder="请输入内容，不能重复"
             />
           </Form.Item>
 
@@ -107,7 +158,7 @@ function A1Add({ pageType, closeFu }: Props) {
               style={{ width: 600 }}
               maxLength={30}
               showCount
-              placeholder="请输入内容，最多30字"
+              placeholder="请输入内容"
             />
           </Form.Item>
 
@@ -116,7 +167,7 @@ function A1Add({ pageType, closeFu }: Props) {
               style={{ width: 600 }}
               maxLength={30}
               showCount
-              placeholder="请输入内容，最多30字"
+              placeholder="请输入内容"
             />
           </Form.Item>
 
@@ -148,7 +199,7 @@ function A1Add({ pageType, closeFu }: Props) {
             <TextArea
               style={{ width: 600 }}
               autoSize
-              placeholder="请输入内容，最多500字"
+              placeholder="请输入内容"
               showCount
               maxLength={500}
             />
@@ -169,7 +220,7 @@ function A1Add({ pageType, closeFu }: Props) {
             <div className="e_rowR">
               <Z1upImgs
                 max={50}
-                isLook={false}
+                isLook={pageType.txt === "look"}
                 ref={imgsRef}
                 fileCheck={false}
                 size={10}
@@ -187,7 +238,7 @@ function A1Add({ pageType, closeFu }: Props) {
             <div className="e_rowR">
               <Z2upVideos
                 max={10}
-                isLook={false}
+                isLook={pageType.txt === "look"}
                 ref={videosRef}
                 fileCheck={false}
                 size={500}
@@ -197,6 +248,75 @@ function A1Add({ pageType, closeFu }: Props) {
             </div>
           </div>
 
+          <div className="e_row">
+            <div className="e_rowL e_rowL2">
+              <span> </span>项目链接：
+            </div>
+            <div className="e_rowR">
+              <div className="erLinkTop">
+                <Button onClick={addLinkFu} disabled={linkArr.length >= 10}>
+                  新&emsp;增
+                </Button>
+                <span className="e_rowRtit">&emsp;最多支持10条链接</span>
+              </div>
+              <div className="erLinkMain">
+                {linkArr.map((v) => (
+                  <div className="erLinkRow" key={v.id}>
+                    <Input
+                      value={v.name}
+                      onChange={(e) =>
+                        linkChangeFu(v.id, e.target.value, "name")
+                      }
+                      style={{ width: 240 }}
+                      maxLength={10}
+                      showCount
+                      placeholder="请输入链接标题"
+                    />
+                    &emsp;
+                    <Input
+                      value={v.link}
+                      onChange={(e) =>
+                        linkChangeFu(v.id, e.target.value, "link")
+                      }
+                      style={{ width: 800 }}
+                      maxLength={100}
+                      showCount
+                      placeholder="请输入链接"
+                    />
+                    &emsp;
+                    <Popconfirm
+                      title="删除后无法恢复，是否删除?"
+                      okText="删除"
+                      cancelText="取消"
+                      onConfirm={() => delLinkFu(v.id)}
+                      okButtonProps={{ loading: false }}
+                    >
+                      <Button>删除</Button>
+                    </Popconfirm>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <br />
+
+          <div className="e_row">
+            <div className="e_rowL e_rowL2">
+              <span> </span>项目成果：
+            </div>
+            <div className="e_rowR">
+              <Z3upFiles
+                max={10}
+                isLook={pageType.txt === "look"}
+                ref={filesRef}
+                fileCheck={false}
+                dirCode="aaaaaaaaa"
+                myUrl="cms/goods/upload"
+              />
+            </div>
+          </div>
+
           {/* 确定和取消按钮 */}
           <div className="A1AddBtn">
             {pageType.txt === "look" ? (

src/utils/filesLook.ts

@@ -0,0 +1,58 @@
+import store from "@/store";
+import { baseURL } from "./http";
+
+const filesLookFu = (name: string, url?: string) => {
+  let flag = false;
+
+  if (name.toLowerCase().endsWith(".pdf")) {
+    if (url) window.open(baseURL + url);
+    flag = true;
+  }
+
+  const arr1 = [".png", ".jpg", ".jpeg", ".gif"];
+  arr1.forEach((v) => {
+    if (name.toLowerCase().endsWith(v)) {
+      if (url) {
+        store.dispatch({
+          type: "layout/lookBigImg",
+          payload: {
+            url: baseURL + url,
+            show: true,
+          },
+        });
+      }
+
+      flag = true;
+    }
+  });
+
+  let type: "" | "video" | "audio" = "";
+
+  const arr2 = [".mp3", ".wav"];
+
+  arr2.forEach((v) => {
+    if (name.toLowerCase().endsWith(v)) {
+      type = "audio";
+      flag = true;
+    }
+  });
+
+  if (name.toLowerCase().endsWith(".mp4")) {
+    type = "video";
+    flag = true;
+  }
+
+  if (type && url) {
+    store.dispatch({
+      type: "layout/lookDom",
+      payload: {
+        src: url,
+        type,
+      },
+    });
+  }
+
+  return flag;
+};
+
+export default filesLookFu;