Browse Source

今天这个B班加到这里!!

shaogen1995 1 năm trước cách đây
mục cha
commit
79f37f03dd

+ 29 - 7
src/pages/A1event/A1add/index.module.scss

@@ -15,15 +15,37 @@
       height: 100%;
       overflow-y: auto;
 
-      .A1_1Frow {
+
+      .A1fromRow {
         position: relative;
-      }
+        width: 800px;
+        height: 56px;
+
+        // &>div {
+        //   width: 100%;
+        // }
+
+        .A1_1Frow {
+          position: absolute;
+          top: 0px;
+          left: 600px;
+          width: 200px;
+        }
+
+        .A1_4Frow {
+          position: absolute;
+          left: 400px;
+          top: 4px;
+        }
+
+        .A1_6Frow {
+          position: absolute;
+          left: 200px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
 
-      .A1_1_1Frow {
-        position: absolute;
-        top: 0px;
-        left: 500px;
-        width: 200px;
       }
 
       .ant-form {

+ 169 - 32
src/pages/A1event/A1add/index.tsx

@@ -1,14 +1,24 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { A1EditInfoType } from "../data";
-import { Button, Checkbox, DatePicker, Form, FormInstance, Input } from "antd";
+import {
+  Button,
+  Checkbox,
+  DatePicker,
+  Form,
+  FormInstance,
+  Input,
+  InputNumber,
+  Select,
+} from "antd";
 import { A1_APIgetInfo, A1_APIsave } from "@/store/action/A1event";
 import dayjs from "dayjs";
 import { MessageFu } from "@/utils/message";
 import MyPopconfirm from "@/components/MyPopconfirm";
 import ZupAudio, { ZupAudioType } from "@/components/ZupAudio";
 import ZupOne from "@/components/ZupOne";
-import ZRichTexts, { SectionArrType } from "@/components/ZRichTexts";
+import ZRichTexts from "@/components/ZRichTexts";
+const { RangePicker } = DatePicker;
 
 type Props = {
   editInfo: A1EditInfoType;
@@ -35,6 +45,10 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
     filePath: "",
   });
 
+  // 活动日期 是否长期有效
+  const [timeLong, setTimeLong] = useState(false);
+
+  // 编辑/查看 进入页面 获取信息
   const getInfoFu = useCallback(async (id: number) => {
     const res = await A1_APIgetInfo(id);
     if (res.code === 0) {
@@ -42,13 +56,33 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
 
       setDirCode(data.dirCode);
 
+      // 设置标题的 音频
+      if (data.fileName && data.filePath) {
+        setNameAudio({
+          fileName: data.fileName,
+          filePath: data.filePath,
+        });
+      }
+      // 待完善
+      const temp =
+        '{"isSection":true,"txtArr":[{"id":1719837651225,"name":"1213","txt":"<p>123213</p>","fileInfo":{"fileName":"","filePath":""}}]}';
       // 设置富文本
-      ZRichTextRef.current?.ritxtShowFu(data.rtf);
+      ZRichTextRef.current?.ritxtShowFu(JSON.parse(temp));
 
-      FormBoxRef.current?.setFieldsValue({
+      const obj = {
         ...data,
         myTime: dayjs(data.datePublish),
-      });
+        timeLong1: dayjs(data.dateStart),
+      };
+
+      if (data.dateEnd && data.dateStart) {
+        obj.timeLong2 = [dayjs(data.dateStart), dayjs(data.dateEnd)];
+      } else {
+        // 活动时间长期有效
+        setTimeLong(true);
+      }
+
+      FormBoxRef.current?.setFieldsValue(obj);
 
       // 设置封面图
       ZupThumbRef.current?.setFileComFileFu({
@@ -65,6 +99,8 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
       setDirCode(Date.now() + "");
       FormBoxRef.current?.setFieldsValue({
         myTime: dayjs(Date.now()),
+        sort: 999,
+        display: 1,
       });
     }
   }, [editInfo.id, getInfoFu]);
@@ -82,26 +118,56 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
     async (values: any) => {
       setFileCheck(true);
 
+      // 活动日期数据修改
+      let dateStart = "";
+      let dateEnd = "";
+      const timeLong1 = values.timeLong1;
+      const timeLong2 = values.timeLong2;
+
+      if (timeLong) {
+        // 长期 dateEnd为空
+        dateStart = dayjs(timeLong1).format("YYYY-MM-DD");
+        dateEnd = "";
+      } else {
+        // 有结束时间和开始时间
+        dateStart = dayjs(timeLong2[0]).format("YYYY-MM-DD");
+        dateEnd = dayjs(timeLong2[1]).format("YYYY-MM-DD");
+      }
+
       const coverUrl1 = ZupThumbRef.current?.fileComFileResFu();
       // 没有传 封面图
       if (!coverUrl1.filePath) return MessageFu.warning("请上传封面图!");
+
       // 发布日期
       const datePublish = dayjs(values.myTime).format("YYYY-MM-DD");
 
-      const rtf = ZRichTextRef.current?.fatherBtnOkFu();
+      // 富文本校验不通过
+      const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true };
+
+      if (rtf.flag) return MessageFu.warning("请输入完整正文!");
+
+      // if(rtf) {
+      //   console.log(123,rtf);
+      //   return
+
+      // }
 
       const obj = {
         ...values,
         id: editInfo.id > 0 ? editInfo.id : null,
         datePublish,
         thumb: coverUrl1.filePath,
-        rtf: rtf.val || "",
+        rtf: JSON.stringify(rtf.val || ""),
+        dateStart,
+        dateEnd,
+        fileName: nameAudio.fileName,
+        filePath: nameAudio.filePath,
       };
 
-      if (obj) {
-        console.log(123, obj);
-        return;
-      }
+      // if (obj) {
+      //   console.log(123, obj);
+      //   return;
+      // }
 
       const res = await A1_APIsave(obj);
 
@@ -111,7 +177,16 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
         closeFu();
       }
     },
-    [addTableFu, closeFu, editInfo.id, editInfo.txt, editTableFu]
+    [
+      addTableFu,
+      closeFu,
+      editInfo.id,
+      editInfo.txt,
+      editTableFu,
+      nameAudio.fileName,
+      nameAudio.filePath,
+      timeLong,
+    ]
   );
 
   return (
@@ -126,33 +201,32 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
           autoComplete="off"
           scrollToFirstError
         >
-          <Form.Item
-            className="A1_1Frow"
-            label="标题"
-            name="name"
-            rules={[{ required: true, message: "请输入标题!" }]}
-            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
-          >
-            <div>
+          <div className="A1fromRow">
+            <Form.Item
+              label="标题"
+              name="name"
+              rules={[{ required: true, message: "请输入标题!" }]}
+              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+            >
               <Input
                 style={{ width: "500px" }}
                 maxLength={50}
                 showCount
                 placeholder="请输入内容"
               />
-              {/* 标题的无障碍音频 */}
-              <div className="A1_1_1Frow">
-                <ZupAudio
-                  fileInfo={nameAudio}
-                  upDataFu={(info) => setNameAudio(info)}
-                  delFu={() => setNameAudio({} as ZupAudioType)}
-                  dirCode={dirCode}
-                  myUrl="cms/event/upload"
-                  isLook={editInfo.txt === "查看"}
-                />
-              </div>
+            </Form.Item>
+            {/* 标题的无障碍音频 */}
+            <div className="A1_1Frow">
+              <ZupAudio
+                fileInfo={nameAudio}
+                upDataFu={(info) => setNameAudio(info)}
+                delFu={() => setNameAudio({} as ZupAudioType)}
+                dirCode={dirCode}
+                myUrl="cms/event/upload"
+                isLook={editInfo.txt === "查看"}
+              />
             </div>
-          </Form.Item>
+          </div>
 
           {/* 封面 */}
           <div className="formRow">
@@ -195,6 +269,36 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
             </div>
           </div>
 
+          <div className="A1fromRow">
+            {timeLong ? (
+              // 只有开始日期
+              <Form.Item
+                label="活动日期"
+                name="timeLong1"
+                rules={[{ required: true, message: "请选择活动日期!" }]}
+              >
+                <DatePicker />
+              </Form.Item>
+            ) : (
+              // 开始和结束日期
+              <Form.Item
+                label="活动日期"
+                name="timeLong2"
+                rules={[{ required: true, message: "请选择活动日期!" }]}
+              >
+                <RangePicker />
+              </Form.Item>
+            )}
+            &emsp;
+            <Checkbox
+              className="A1_4Frow"
+              checked={timeLong}
+              onChange={(e) => setTimeLong(e.target.checked)}
+            >
+              长期有效
+            </Checkbox>
+          </div>
+
           <Form.Item
             label="发布日期"
             name="myTime"
@@ -203,6 +307,39 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
             <DatePicker />
           </Form.Item>
 
+          <div className="A1fromRow">
+            <Form.Item
+              label="排序值"
+              name="sort"
+              rules={[{ required: true, message: "请输入排序值!" }]}
+            >
+              <InputNumber
+                min={1}
+                max={999}
+                precision={0}
+                placeholder="请输入"
+              />
+            </Form.Item>
+            <div className="A1_6Frow">
+              请输入1~999的数字。数字越小,排序越靠前。数字相同时,更新发布的内容排在前面
+            </div>
+          </div>
+
+          <Form.Item
+            label="状态"
+            name="display"
+            rules={[{ required: true, message: "请选择状态!" }]}
+          >
+            <Select
+              placeholder="请选择状态"
+              style={{ width: 200 }}
+              options={[
+                { value: 1, label: "发布" },
+                { value: 0, label: "不发布" },
+              ]}
+            />
+          </Form.Item>
+
           {/* 确定和取消按钮 */}
           <Form.Item className="A1Ebtn">
             <Button type="primary" htmlType="submit">

+ 1 - 1
src/pages/Layout/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { CaretLeftOutlined, CaretRightOutlined } from "@ant-design/icons";
+import { CaretRightOutlined } from "@ant-design/icons";
 import styles from "./index.module.scss";
 import SpinLoding from "@/components/SpinLoding";
 import { Route, Switch, useLocation } from "react-router-dom";

+ 5 - 1
src/store/action/A1event.ts

@@ -10,7 +10,11 @@ export const A1_APIgetList = (data: any): any => {
     const res = await http.post("cms/event/pageList", data);
     if (res.code === 0) {
       const obj = {
-        list: res.data.records,
+        list: res.data.records.map((v: any) => ({
+          ...v,
+          activityTime:
+            v.dateStart + " 至 " + (v.dateEnd ? v.dateEnd : "长期有效"),
+        })),
         total: res.data.total,
       };
       dispatch({ type: "A1/getList", payload: obj });

+ 2 - 3
src/utils/tableData.ts

@@ -16,15 +16,14 @@
 // };
 export const A1tableC = [
   ["txt", "标题", "name"],
-  ["img", '封面', "thumb"],
-  ["txt", "活动日期", "realName"], //待完善
+  ["img", "封面", "thumb"],
+  ["txt", "活动日期", "activityTime"],
   ["txt", "最近编辑日期", "updateTime"],
   ["txt", "编辑人", "creatorName"],
   ["txt", "排序值", "sort"],
   ["txtChange", "状态", "display", { 0: "不发布", 1: "发布" }],
 ];
 
-
 export const Z1tableC = [
   ["txt", "用户名", "userName"],
   ["txtChange", "角色", "isAdmin", { 1: "管理员", 0: "普通成员" }],