云学校-刊物

src/components/ZupOne/index.tsx

@@ -18,7 +18,9 @@ import { API_upFile } from "@/store/action/layout";
 import { forwardRef, useImperativeHandle } from "react";
 import MyPopconfirm from "../MyPopconfirm";
 
-// 这个组件 只处理 上传 一张图片或者 视频 音频 模型 的情况
+type MyTypeType = "thumb" | "video" | "audio" | "model" | "pdf";
+
+// 这个组件 只处理 上传 一张图片或者 视频 音频 模型 pdf 的情况
 
 type Props = {
   fileCheck: boolean; //有没有点击过确定
@@ -29,7 +31,7 @@ type Props = {
   formatTxt: string; //上传图片提示
   checkTxt: string;
   upTxt: string;
-  myType: "thumb" | "video" | "audio" | "model";
+  myType: MyTypeType;
   isLook?: boolean; //是不是查看
   fromData?: any;
   ref: any; //当前自己的ref，给父组件调用
@@ -46,7 +48,7 @@ function ZupOne(
     checkTxt,
     upTxt,
     myType,
-    isLook=false,
+    isLook = false,
     fromData,
   }: Props,
   ref: any
@@ -64,14 +66,23 @@ function ZupOne(
       if (e.target.files) {
         // 拿到files信息
         const filesInfo = e.target.files[0];
-        // console.log('-----',filesInfo.type);
-        
+        // console.log("-----", filesInfo.type);
+
         // 校验格式
         const type = format;
-        if (!type.includes(filesInfo.type)) {
-          e.target.value = "";
-          return MessageFu.warning(`只支持${formatTxt}格式!`);
+
+        if (myType === "pdf") {
+          if (!filesInfo.type.includes("pdf")) {
+            e.target.value = "";
+            return MessageFu.warning(`只支持${formatTxt}格式!`);
+          }
+        } else {
+          if (!type.includes(filesInfo.type)) {
+            e.target.value = "";
+            return MessageFu.warning(`只支持${formatTxt}格式!`);
+          }
         }
+
         // 校验大小
         if (filesInfo.size > size * 1024 * 1024) {
           e.target.value = "";
@@ -80,7 +91,9 @@ function ZupOne(
         // 创建FormData对象
         const fd = new FormData();
         // 把files添加进FormData对象（‘photo’为后端需要的字段）
-        fd.append("type", myType);
+        let myTypeRes: string = myType;
+        if (["pdf"].includes(myTypeRes)) myTypeRes = "doc";
+        fd.append("type", myTypeRes);
         fd.append("dirCode", dirCode);
         fd.append("file", filesInfo);
 
@@ -131,9 +144,30 @@ function ZupOne(
     if (myType === "video") accept = ".mp4";
     else if (myType === "audio") accept = ".mp3";
     else if (myType === "model") accept = ".4dage";
+    else if (myType === "pdf") accept = ".pdf";
     return accept;
   }, [myType]);
 
+  // 点击 预览（除了图片）
+  const lookFileNoImgFu = useCallback(
+    (type: MyTypeType) => {
+      if (type === "pdf" || type === "thumb") {
+        // 新窗口打开
+        window.open(baseURL + fileUrl.filePath);
+      } else {
+        store.dispatch({
+          type: "layout/lookDom",
+          payload: { src: fileUrl.filePath, type },
+        });
+      }
+
+      if (type === "pdf") {
+      } else {
+      }
+    },
+    [fileUrl.filePath]
+  );
+
   return (
     <div className={styles.ZupOne}>
       <input
@@ -205,12 +239,7 @@ function ZupOne(
           <div
             className="clearCover"
             hidden={!fileUrl.filePath}
-            onClick={() =>
-              store.dispatch({
-                type: "layout/lookDom",
-                payload: { src: fileUrl.filePath, type: myType },
-              })
-            }
+            onClick={() => lookFileNoImgFu(myType)}
           >
             <EyeOutlined rev={undefined} />
           </div>

src/pages/A4store/A3Edit/index.tsx

@@ -155,7 +155,7 @@ function A3Edit({ editInfo, closeFu, upTableFu, addTableFu }: Props) {
           <Form.Item
             label="登记日期"
             name="myTime"
-            rules={[{ required: true, message: "请选择发布日期!" }]}
+            rules={[{ required: true, message: "请选择登记日期!" }]}
           >
             <DatePicker />
           </Form.Item>
@@ -190,7 +190,7 @@ function A3Edit({ editInfo, closeFu, upTableFu, addTableFu }: Props) {
                 myUrl="cms/prize/upload"
                 format={["image/jpeg", "image/png"]}
                 formatTxt="png、jpg和jpeg"
-                checkTxt="请上传封面图"
+                checkTxt="请上传封面图!"
                 upTxt="最多1张"
                 myType="thumb"
               />

src/pages/A7school/A7tab1M.tsx

@@ -183,7 +183,7 @@ function A7tab1M({ fId, closeFu, addTableFu, upTableFu }: Props) {
                 myUrl="cms/person/upload"
                 format={["image/jpeg", "image/png"]}
                 formatTxt="png、jpg和jpeg"
-                checkTxt="请上传人物肖像"
+                checkTxt="请上传人物肖像!"
                 upTxt="最多1张"
                 myType="thumb"
               />
@@ -206,7 +206,7 @@ function A7tab1M({ fId, closeFu, addTableFu, upTableFu }: Props) {
                 myUrl="cms/person/upload"
                 format={["video/mp4"]}
                 formatTxt="mp4"
-                checkTxt="请上传采访视频"
+                checkTxt="请上传采访视频!"
                 upTxt=""
                 myType="video"
               />

src/pages/A7school/A7tab2M.tsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, DatePicker, Form, FormInstance, Input, Modal } from "antd";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import ZupOne from "@/components/ZupOne";
+import { MessageFu } from "@/utils/message";
+import { A7_APIgetInfoBook, A7_APIsaveBook } from "@/store/action/A7school";
+import dayjs from "dayjs";
+
+type Props = {
+  fId: number;
+  closeFu: () => void;
+  addTableFu: () => void;
+  upTableFu: () => void;
+};
+
+function A7tab2M({ fId, closeFu, addTableFu, upTableFu }: Props) {
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A7_APIgetInfoBook(id);
+    if (res.code === 0) {
+      const data = res.data;
+
+      FormBoxRef.current?.setFieldsValue({
+        ...data,
+        myTime: dayjs(data.publishDate),
+      });
+
+      // 设置封面图
+      ZupOneRef1.current?.setFileComFileFu({
+        fileName: "",
+        filePath: data.thumb,
+      });
+      // 设置附件
+      ZupOneRef2.current?.setFileComFileFu({
+        fileName: data.fileName,
+        filePath: data.filePath,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (fId > 0) getInfoFu(fId);
+    else {
+      FormBoxRef.current?.setFieldsValue({
+        myTime: dayjs(Date.now()),
+      });
+    }
+  }, [fId, getInfoFu]);
+
+  // 附件的ref
+  const ZupOneRef1 = useRef<any>(null);
+  const ZupOneRef2 = useRef<any>(null);
+
+  // 附件 是否 已经点击过确定
+  const [fileCheck, setFileCheck] = useState(false);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true);
+  }, []);
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setFileCheck(true);
+      // 没有传 封面图 或者 附件
+      const coverUrl1 = ZupOneRef1.current?.fileComFileResFu();
+      const coverUrl2 = ZupOneRef2.current?.fileComFileResFu();
+
+      if (!coverUrl1.filePath || !coverUrl2.filePath) return;
+
+      // 发布日期
+      const publishDate = dayjs(values.myTime).format("YYYY-MM-DD");
+
+      const obj = {
+        ...values,
+        id: fId > 0 ? fId : null,
+        fileName: coverUrl2.fileName,
+        filePath: coverUrl2.filePath,
+        thumb: coverUrl1.filePath,
+        publishDate,
+      };
+
+      const res = await A7_APIsaveBook(obj);
+
+      if (res.code === 0) {
+        MessageFu.success(fId > 0 ? "编辑成功!" : "新增成功!");
+        fId > 0 ? addTableFu() : upTableFu();
+        closeFu();
+      }
+    },
+    [addTableFu, closeFu, fId, upTableFu]
+  );
+
+  return (
+    <Modal
+      // 和 A7tab1M 共用样式
+      wrapClassName={styles.A7tab1M}
+      open={true}
+      title={`${fId > 0 ? "编辑" : "新增"}刊物`}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="A7mMaiin">
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name="basic"
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="刊物标题"
+            name="name"
+            rules={[{ required: true, message: "请输入刊物标题!" }]}
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+          >
+            <Input maxLength={10} showCount placeholder="请输入内容" />
+          </Form.Item>
+
+          {/* 刊物封面 */}
+          <div className="formRow">
+            <div className="formLeft">
+              <span>* </span>
+              刊物封面：
+            </div>
+            <div className="formRight">
+              <ZupOne
+                ref={ZupOneRef1}
+                isLook={false}
+                fileCheck={fileCheck}
+                size={2}
+                dirCode="schoolThumb2"
+                myUrl="cms/periodical/upload"
+                format={["image/jpeg", "image/png"]}
+                formatTxt="png、jpg和jpeg"
+                checkTxt="请上传刊物封面!"
+                upTxt="最多1张"
+                myType="thumb"
+              />
+            </div>
+          </div>
+
+          {/* 刊物附件  */}
+          <div className="formRow">
+            <div className="formLeft">
+              <span>* </span>
+              刊物附件：
+            </div>
+            <div className="formRight">
+              <ZupOne
+                ref={ZupOneRef2}
+                isLook={false}
+                fileCheck={fileCheck}
+                size={5}
+                dirCode="schoolPdf"
+                myUrl="cms/periodical/upload"
+                format={["application/pdf"]}
+                formatTxt="pdf"
+                checkTxt="请上传刊物附件!"
+                upTxt="最多1个"
+                myType="pdf"
+              />
+            </div>
+          </div>
+
+          <Form.Item
+            label="发布日期"
+            name="myTime"
+            rules={[{ required: true, message: "请选择发布日期!" }]}
+          >
+            <DatePicker />
+          </Form.Item>
+
+          {/* 确定和取消按钮 */}
+          <Form.Item className="A7mbtn">
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+            <br />
+            <br />
+            <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoA7tab2M = React.memo(A7tab2M);
+
+export default MemoA7tab2M;

src/pages/A7school/A7table.tsx

@@ -85,6 +85,7 @@ function A7tab1({ type, editTableFu }: Props, ref: any) {
 
   return (
     <MyTable
+      classKey={type === "口述史" ? "port" : "book"}
       yHeight={640}
       list={tableInfo.list}
       columnsTemp={type === "口述史" ? A7tableC1 : A7tableC2}
@@ -99,7 +100,7 @@ function A7tab1({ type, editTableFu }: Props, ref: any) {
         name: "排序值",
         Com: (
           <div className="A7tableTit">
-            <span>排序值</span>&emsp;
+            <span>排序值</span>&nbsp;
             <Tooltip title="数字越小，排序越前">
               <div className="A7tableTitInco">
                 <QuestionCircleOutlined />

src/pages/A7school/index.module.scss

@@ -52,8 +52,8 @@
     .A7mMaiin {
       margin-top: 15px;
       width: 100%;
-      height: 570px;
-      overflow-y: auto;
+      // height: 570px;
+      // overflow-y: auto;
 
       .ant-form {
         width: 800px;

src/pages/A7school/index.tsx

@@ -7,6 +7,7 @@ import { RootState } from "@/store";
 import { MessageFu } from "@/utils/message";
 import A7theme from "./A7theme";
 import A7tab1M from "./A7tab1M";
+import A7tab2M from "./A7tab2M";
 
 const topArr: ("口述史" | "刊物")[] = ["口述史", "刊物"];
 
@@ -96,6 +97,16 @@ function A7school() {
           upTableFu={() => tableRef1.current.getListFu()}
         />
       ) : null}
+
+      {/* 刊物 新增 编辑 */}
+      {openSon && pageAc === "刊物" ? (
+        <A7tab2M
+          fId={openSon}
+          closeFu={() => setOpenSon(0)}
+          addTableFu={() => tableRef2.current.resetSelectFu()}
+          upTableFu={() => tableRef2.current.getListFu()}
+        />
+      ) : null}
     </div>
   );
 }

src/store/action/A7school.ts

@@ -74,3 +74,17 @@ export const A7_APIdel = (id: number, type: "口述史" | "刊物") => {
     `cms/${type === "口述史" ? "person" : "periodical"}/removes/${id}`
   );
 };
+
+/**
+ * 刊物 - 详情
+ */
+export const A7_APIgetInfoBook = (id: number) => {
+  return http.get(`cms/periodical/detail/${id}`);
+};
+
+/**
+ * 刊物 - 新增、编辑
+ */
+export const A7_APIsaveBook = (data: any) => {
+  return http.post("cms/periodical/save", data);
+};

src/utils/tableData.ts

@@ -84,10 +84,9 @@ export const A7tableC1 = [
   ["txt", "排序值", "sort"],
 ];
 export const A7tableC2 = [
-  ["txt", "时间2", "createTime"],
-  ["txt", "称呼", "name"],
-  ["txt", "联系方式", "phone"],
-  ["text", "反馈内容", "content", 50],
+  ["txt", "刊物标题", "name"],
+  ["img", "刊物封面", "thumb"],
+  ["txt", "发布日期", "publishDate"],
 ];
 export const A7tableCtheme = [["txt", "采访主题", "name"]];