upp

src/components/NotFound/index.tsx

@@ -8,7 +8,7 @@ export default function NotFound() {
     timeRef.current = window.setTimeout(() => {
       const dom: HTMLDivElement = document.querySelector(".noFindPage")!;
       dom.style.opacity = "1";
-    }, 300);
+    }, 500);
     return () => {
       clearTimeout(timeRef.current);
     };

src/pages/C1orderset/C1edit/data.ts

@@ -0,0 +1,42 @@
+export type C1eTableDataKeyType =
+  | "monday"
+  | "tuesday"
+  | "wednesday"
+  | "thursday"
+  | "friday"
+  | "saturday"
+  | "sunday";
+
+export const C1eTableData: {
+  title: string;
+  key: C1eTableDataKeyType;
+}[] = [
+  {
+    title: "周一",
+    key: "monday",
+  },
+  {
+    title: "周二",
+    key: "tuesday",
+  },
+  {
+    title: "周三",
+    key: "wednesday",
+  },
+  {
+    title: "周四",
+    key: "thursday",
+  },
+  {
+    title: "周五",
+    key: "friday",
+  },
+  {
+    title: "周六",
+    key: "saturday",
+  },
+  {
+    title: "周日",
+    key: "sunday",
+  },
+];

src/pages/C1orderset/C1edit/index.module.scss

@@ -0,0 +1,89 @@
+.C1edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 24px;
+  display: flex;
+
+  :global {
+    .C1ell {
+      width: 100px;
+      margin-right: 20px;
+    }
+
+    .C1err {
+      width: calc(100% - 260px);
+
+      .C1ett1 {
+        position: relative;
+
+        .anticon-delete {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: -90px;
+          cursor: pointer;
+          font-size: 18px;
+          &:hover{
+            color: var(--themeColor);
+          }
+        }
+      }
+
+      .C1ett{
+        display: inline-block;
+        width: 100%;
+        text-align: center;
+        cursor: pointer;
+        text-decoration: underline;
+        &:hover{
+          color: var(--themeColor);
+        }
+      }
+
+    }
+
+    .C1eBtn{
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 50px;
+    }
+
+  }
+}
+
+// 时段选择
+.C1eMBox {
+  :global {
+
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 500px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .C1eMmain {
+      padding-top: 15px;
+      text-align: center;
+      .C1eMmainTit{
+        margin-top: 10px;
+      }
+    }
+
+    .C1eMbtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}

src/pages/C1orderset/C1edit/index.tsx

@@ -0,0 +1,298 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import { C1tableType } from "@/types";
+import { Button, Input, Modal, Table, TimePicker } from "antd";
+import dayjs from "dayjs";
+import { DeleteOutlined } from "@ant-design/icons";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import { C1eTableData, C1eTableDataKeyType } from "./data";
+import { MessageFu } from "@/utils/message";
+import { C1_APIdel, C1_APIsave } from "@/store/action/C1orderset";
+
+type TimeType = {
+  id: string;
+  show: boolean;
+  value: string[] | null;
+  txt: "新增" | "编辑";
+};
+
+type NumType = {
+  id: string;
+  show: boolean;
+  value: number;
+  title: string;
+  key: C1eTableDataKeyType;
+};
+
+type Props = {
+  list: C1tableType[];
+  closeFu: () => void;
+  editTableFu: () => void;
+};
+
+function C1edit({ list, closeFu, editTableFu }: Props) {
+  // 表格数据
+  const [listRes, setListRes] = useState<C1tableType[]>([]);
+
+  useEffect(() => {
+    setListRes(
+      list.map((v) => ({
+        ...v,
+        id: v.id + "",
+      }))
+    );
+  }, [list]);
+
+  // 1---------时段
+  const [time, setTime] = useState({} as TimeType);
+
+  // 1---------时段点击确定
+  const timeBtnOk = useCallback(async () => {
+    if (time.txt === "新增") {
+      setListRes([
+        ...listRes,
+        {
+          id: time.id,
+          time: time.value!.join("-"),
+          monday: 100,
+          tuesday: 100,
+          wednesday: 100,
+          thursday: 100,
+          friday: 100,
+          saturday: 100,
+          sunday: 100,
+        },
+      ]);
+    } else {
+      setListRes(
+        listRes.map((v) => ({
+          ...v,
+          time: v.id === time.id ? time.value!.join("-") : v.time,
+        }))
+      );
+    }
+
+    MessageFu.success(time.txt + "时段成功!");
+
+    setTime({} as TimeType);
+  }, [listRes, time]);
+
+  // 1---------时间段改变
+  const timeChangeFu = useCallback(
+    (value: string[]) => {
+      const valueRes = value[0] && value[1] ? value : null;
+      setTime({ ...time, value: valueRes });
+    },
+    [time]
+  );
+
+  // 从后台拿的数据，id里面没有’新‘。删除的时候需要记录下来。最后点击提交的时候一起删除
+  const delIds = useRef<string[]>([]);
+
+  // 表格
+  const columns = useMemo(() => {
+    const arr: any = [
+      {
+        title: "时段",
+        render: (item: C1tableType) => (
+          <div className="C1ett1">
+            <MyPopconfirm
+              txtK="删除"
+              onConfirm={() => {
+                setListRes(listRes.filter((v) => v.id !== item.id));
+                if (!item.id.includes("新")) {
+                  delIds.current.push(item.id);
+                }
+              }}
+              Dom={<DeleteOutlined />}
+            />
+
+            <span
+              className="C1ett"
+              onClick={() =>
+                setTime({
+                  show: true,
+                  value: item.time.split("-"),
+                  txt: "编辑",
+                  id: item.id,
+                })
+              }
+            >
+              {item.time}
+            </span>
+          </div>
+        ),
+      },
+    ];
+
+    C1eTableData.forEach((v) => {
+      arr.push({
+        title: v.title,
+        render: (item: C1tableType) => (
+          <span
+            className="C1ett"
+            onClick={() =>
+              setNum({
+                id: item.id,
+                show: true,
+                value: Reflect.get(item, v.key),
+                title: `${item.time} / ${v.title}`,
+                key: v.key,
+              })
+            }
+          >
+            {Reflect.get(item, v.key)}
+          </span>
+        ),
+      });
+    });
+    return arr;
+  }, [listRes]);
+
+  // 2---------星期的数字
+  const [num, setNum] = useState({} as NumType);
+
+  const inputChange = useCallback(
+    (val: React.ChangeEvent<HTMLInputElement>) => {
+      let txt = val.target.value.replace(/^(0+)|[^\d]+/g, "");
+      let txtNum = Number(txt);
+      txtNum = txtNum > 9999 ? 9999 : txtNum;
+      setNum({ ...num, value: txtNum });
+    },
+    [num]
+  );
+
+  // 2---------提交
+  const numBtnOk = useCallback(() => {
+    setListRes(
+      listRes.map((v) => ({
+        ...v,
+        [num.key]:
+          v.id === num.id ? Number(num.value) : Reflect.get(v, num.key),
+      }))
+    );
+    MessageFu.success("编辑可预约人数成功!");
+    setNum({} as NumType);
+  }, [listRes, num]);
+
+  // 最后点击提交
+  const btnLastOk = useCallback(async () => {
+    if (delIds.current.length) C1_APIdel(delIds.current.join(","));
+
+    const arr = listRes.map((v) => ({
+      ...v,
+      id: v.id.includes("新") ? null : Number(v.id),
+    }));
+    const res = await C1_APIsave(arr);
+    if (res.code === 0) {
+      MessageFu.success("编辑成功!");
+      editTableFu();
+      closeFu();
+    }
+  }, [closeFu, editTableFu, listRes]);
+
+  return (
+    <div className={styles.C1edit}>
+      <div className="C1ell">
+        <Button
+          type="primary"
+          onClick={() => {
+            if (listRes.length >= 10) return MessageFu.warning("最多10个时段!");
+            setTime({
+              show: true,
+              value: null,
+              txt: "新增",
+              id: Date.now() + "新",
+            });
+          }}
+        >
+          新增时段
+        </Button>
+      </div>
+      <div className="C1err">
+        <Table
+          rowKey="id"
+          size="middle"
+          columns={columns}
+          dataSource={listRes}
+          pagination={false}
+        />
+      </div>
+
+      <div className="C1eBtn">
+        <Button type="primary" onClick={btnLastOk}>
+          提交
+        </Button>
+        <br />
+        <br />
+        <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+      </div>
+
+      {/* 时间选择 */}
+      <Modal
+        wrapClassName={styles.C1eMBox}
+        open={time.show}
+        title={`${time.txt}时段`}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <div className="C1eMmain">
+          <TimePicker.RangePicker
+            format="HH:mm"
+            value={
+              time.value
+                ? [dayjs(time.value[0], "HH:mm"), dayjs(time.value[1], "HH:mm")]
+                : null
+            }
+            onChange={(_, value) => timeChangeFu(value)}
+          />
+        </div>
+        <div className="C1eMbtn">
+          <Button onClick={() => setTime({} as TimeType)}>取消</Button>&emsp;
+          <Button type="primary" disabled={!time.value} onClick={timeBtnOk}>
+            提交
+          </Button>
+        </div>
+      </Modal>
+
+      {/* 星期的数字改变 */}
+      <Modal
+        wrapClassName={styles.C1eMBox}
+        open={num.show}
+        title={`${num.title} / 可预约人数`}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <div className="C1eMmain">
+          <Input
+            style={{ width: 208 }}
+            // placeholder="请输入0~9999整数"
+            value={num.value}
+            onChange={(e) => inputChange(e)}
+          />
+          <div className="C1eMmainTit">
+            &nbsp;&nbsp;为0时，则该时段不可预约（闭馆）
+          </div>
+        </div>
+        <div className="C1eMbtn">
+          <Button onClick={() => setNum({} as NumType)}>取消</Button>&emsp;
+          <Button type="primary" onClick={numBtnOk}>
+            提交
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+const MemoC1edit = React.memo(C1edit);
+
+export default MemoC1edit;

src/pages/C1orderset/C1setTime.tsx

@@ -100,25 +100,29 @@ function C1setTime({ closeFu }: Props) {
       </div>
 
       <div className="C1tMain">
-        {list.map((v, i) => (
-          <div key={v.id}>
-            <DatePicker
-              value={v.time ? dayjs(v.time) : null}
-              onChange={(_, time) => onChange(v.id, time)}
-            />
-            <DeleteOutlined
-              className={classNames(i === 0 ? "nullIcon" : "")}
-              onClick={() => setList(list.filter((c) => c.id !== v.id))}
-            />
-          </div>
-        ))}
+        {list.length ? (
+          list.map((v) => (
+            <div className="C1tMrow" key={v.id}>
+              <DatePicker
+                value={v.time ? dayjs(v.time) : null}
+                onChange={(_, time) => onChange(v.id, time)}
+              />
+              <DeleteOutlined
+                onClick={() => setList(list.filter((c) => c.id !== v.id))}
+              />
+            </div>
+          ))
+        ) : (
+          <div className="C1tMnull">暂无数据</div>
+        )}
+        {}
       </div>
 
       <div className="C1tBtn">
         <Button
           type="primary"
           onClick={btnOkFu}
-          disabled={list.some((v) => !v.time) || list.length <= 0}
+          disabled={list.some((v) => !v.time)}
         >
           提交
         </Button>

src/pages/C1orderset/C1setTxt.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Modal } from "antd";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import { C1_APIgetConfig, C1_APIsetConfig } from "@/store/action/C1orderset";
+import TextArea from "antd/es/input/TextArea";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  closeFu: () => void;
+};
+
+function C1setTxt({ closeFu }: Props) {
+  const [txt, setTxt] = useState("");
+
+  // 点击提交
+  const btnOkFu = useCallback(async () => {
+    const res = await C1_APIsetConfig({ id: 11, rtf: txt });
+    if(res.code===0){
+      closeFu()
+      MessageFu.success('设置成功!')
+    }
+  }, [closeFu, txt]);
+
+  const getInfoFu = useCallback(async () => {
+    const res = await C1_APIgetConfig(11);
+    if (res.code === 0) {
+      setTxt(res.data.rtf || "");
+    }
+  }, []);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  return (
+    <Modal
+      wrapClassName={styles.C1setTxt}
+      open={true}
+      title="预约需知"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="C1sMain">
+        <TextArea
+          maxLength={200}
+          showCount
+          placeholder="请输入内容"
+          value={txt}
+          onChange={(e) => setTxt(e.target.value)}
+        />
+      </div>
+      <div className="C1sBtn">
+        <Button type="primary" onClick={btnOkFu}>
+          提交
+        </Button>
+        &emsp;
+        <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+      </div>
+    </Modal>
+  );
+}
+
+const MemoC1setTxt = React.memo(C1setTxt);
+
+export default MemoC1setTxt;

src/pages/C1orderset/index.module.scss

@@ -4,6 +4,7 @@
   background-color: #fff;
   border-radius: 10px;
   padding: 15px 24px 0;
+  position: relative;
 
   :global {
     .C1top {
@@ -49,20 +50,26 @@
       display: flex;
       flex-wrap: wrap;
 
-      &>div {
+      .C1tMrow {
         margin-right: 20px;
         margin-bottom: 20px;
         display: flex;
         align-items: center;
-        .anticon-delete{
+
+        .anticon-delete {
           margin-left: 3px;
           font-size: 18px;
           cursor: pointer;
         }
-        .nullIcon{
-          opacity: 0;
-          pointer-events: none;
-        }
+
+      }
+
+      .C1tMnull {
+        width: 100%;
+        height: 100px;
+        line-height: 70px;
+        font-size: 20px;
+        text-align: center;
       }
 
     }
@@ -72,4 +79,30 @@
       text-align: center;
     }
   }
+}
+
+.C1setTxt {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+    .C1sMain{
+      padding-top: 20px;
+      textarea{
+        min-height: 300px !important;
+      }
+    }
+    .C1sBtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
 }

src/pages/C1orderset/index.tsx

@@ -7,6 +7,8 @@ import { C1_APIgetList } from "@/store/action/C1orderset";
 import { RootState } from "@/store";
 import { C1tableC } from "@/utils/tableData";
 import C1setTime from "./C1setTime";
+import C1setTxt from "./C1setTxt";
+import C1edit from "./C1edit";
 function C1orderset() {
   const dispatch = useDispatch();
 
@@ -23,16 +25,27 @@ function C1orderset() {
   // 设置 不可预约时间
   const [noTime, setNoTime] = useState(false);
 
+  // 设置 预约需知
+  const [txt, setTxt] = useState(false);
+
+  // 编辑
+  const [edit, setEdit] = useState(false);
+
   return (
     <div className={styles.C1orderset}>
-      <div className="pageTitle">展馆预约设置</div>
+      <div className="pageTitle">展馆预约设置{edit ? " - 编辑" : null}</div>
       <div className="C1top">
         <Button type="primary" onClick={() => setNoTime(true)}>
           设置不可预约日期
         </Button>
         &emsp;
-        <Button type="primary">设置预约需知</Button>&emsp;
-        <Button type="primary">编辑</Button>
+        <Button type="primary" onClick={() => setTxt(true)}>
+          设置预约需知
+        </Button>
+        &emsp;
+        <Button type="primary" onClick={() => setEdit(true)}>
+          编辑
+        </Button>
       </div>
       <MyTable
         list={list}
@@ -43,6 +56,18 @@ function C1orderset() {
 
       {/* 不可预约日期 */}
       {noTime ? <C1setTime closeFu={() => setNoTime(false)} /> : null}
+
+      {/* 预约需知 */}
+      {txt ? <C1setTxt closeFu={() => setTxt(false)} /> : null}
+
+      {/* 编辑 */}
+      {edit ? (
+        <C1edit
+          list={list}
+          closeFu={() => setEdit(false)}
+          editTableFu={getListFu}
+        />
+      ) : null}
     </div>
   );
 }

src/store/action/C1orderset.ts

@@ -24,8 +24,8 @@ export const C1_APIgetInfo = (id: number) => {
 /**
  * 展馆预约设置-删除
  */
-export const C1_APIdel = (id: number) => {
-  return http.get(`cms/book/removes/${id}`);
+export const C1_APIdel = (ids: string) => {
+  return http.get(`cms/book/removes/${ids}`);
 };
 
 /**
@@ -41,3 +41,10 @@ export const C1_APIgetConfig = (id: number) => {
 export const C1_APIsetConfig = (data: { id: number; rtf: string }) => {
   return http.post("cms/book/setConfig", data);
 };
+
+/**
+ * 展馆预约设置-新增、修改变革
+ */
+export const C1_APIsave = (data: any) => {
+  return http.post("cms/book/save", data);
+};

src/types/api/C1orderset.d.ts

@@ -1,15 +1,11 @@
 export type C1tableType ={
-	createTime: string;
-	creatorId: number;
-	creatorName: string;
-	friday: number;
-	id: number;
-	monday: number;
-	saturday: number;
-	sunday: number;
-	thursday: number;
+	id: string;
 	time: string;
+	monday: number;
 	tuesday: number;
-	updateTime: string;
 	wednesday: number;
+	thursday: number;
+	friday: number;
+	saturday: number;
+	sunday: number;
 }