up

src/components/MyTable/index.tsx

@@ -18,6 +18,8 @@ type Props = {
   merge?: { type: string; num: number; loc: "rowSpan" | "colSpan" };
   // 定制化表头
   myTitle?: { name: string; Com: React.ReactNode };
+  // 为空的定制字段
+  isNull?: string;
 };
 
 // 表格内容定制化
@@ -49,6 +51,7 @@ function MyTable({
   classKey = "",
   merge,
   myTitle,
+  isNull = "（空）",
 }: Props) {
   useEffect(() => {
     const dom = document.querySelector(
@@ -70,8 +73,6 @@ function MyTable({
 
   const dataChangeFu = useCallback(
     (v: any) => {
-      const nullTxt = "（空）";
-
       /**
        * index:序号
        * txt:正常数据
@@ -83,16 +84,16 @@ function MyTable({
       const obj = {
         index: (_: any, __: any, index: number) =>
           index + 1 + (pageNum - 1) * pageSize,
-        txt: (item: any) => item[v[2]] || nullTxt,
+        txt: (item: any) => item[v[2]] || isNull,
         img: (item: any) => (
           <div className="tableImgAuto">
             <ImageLazy width={60} height={60} src={item.thumb} />
           </div>
         ),
         txtChange: (item: any) =>
-          Reflect.get(v[3], item[v[2]]) || v[4] || nullTxt,
+          Reflect.get(v[3], item[v[2]]) || v[4] || isNull,
         text: (item: any) => {
-          let tempCom: any = item[v[2]] || nullTxt;
+          let tempCom: any = item[v[2]] || isNull;
 
           if (tempCom.length >= v[3]) {
             tempCom = tempCom.substring(0, v[3]) + "...";
@@ -114,7 +115,7 @@ function MyTable({
 
       return Reflect.get(obj, v[0]);
     },
-    [pageNum, pageSize]
+    [isNull, pageNum, pageSize]
   );
 
   const columns = useMemo(() => {

src/pages/C1orderset/C1setTime.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, DatePicker, Modal } from "antd";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import { C1_APIgetConfig, C1_APIsetConfig } from "@/store/action/C1orderset";
+import classNames from "classnames";
+import dayjs from "dayjs";
+import { MessageFu } from "@/utils/message";
+import { DeleteOutlined } from "@ant-design/icons";
+
+type Props = {
+  closeFu: () => void;
+};
+
+function C1setTime({ closeFu }: Props) {
+  const [list, setList] = useState<{ id: string; time: string | null }[]>([]);
+
+  // 点击提交
+  const btnOkFu = useCallback(async () => {
+    const arr = list.map((v) => v.time);
+    const res = await C1_APIsetConfig({ id: 10, rtf: JSON.stringify(arr) });
+    if (res.code === 0) {
+      closeFu();
+      MessageFu.success("设置成功!");
+    }
+  }, [closeFu, list]);
+
+  const getInfoFu = useCallback(async () => {
+    const res = await C1_APIgetConfig(10);
+    if (res.code === 0) {
+      const resArr: string[] = JSON.parse(res.data.rtf || "[]");
+      setList(
+        resArr.map((v, i) => ({
+          id: i + "",
+          time: v,
+        }))
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  const onChange = useCallback(
+    (id: string, time: any) => {
+      const timeRes = time || null;
+
+      // 不让选择相同日期
+      if (timeRes) {
+        if (list.some((v) => v.time === timeRes))
+          return MessageFu.warning(`${timeRes}日期重复!`);
+      }
+
+      setList(
+        list.map((v) => ({
+          id: v.id,
+          time: v.id === id ? timeRes : v.time,
+        }))
+      );
+    },
+    [list]
+  );
+
+  return (
+    <Modal
+      wrapClassName={styles.C1setTime}
+      open={true}
+      title="不可预约日期"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="C1tAdd">
+        <Button
+          type="primary"
+          disabled={list.length >= 20 || list.some((v) => !v.time)}
+          onClick={() =>
+            setList([...list, { id: Date.now() + "", time: null }])
+          }
+        >
+          新增
+        </Button>
+        <span
+          className={classNames(
+            "C1tAddTit",
+            list.length >= 20 ? "C1tAddTitShow" : ""
+          )}
+        >
+          &emsp;最多20个日期
+        </span>
+        <span
+          className={classNames(
+            "C1tAddTit",
+            list.some((v) => !v.time) ? "C1tAddTitShow" : ""
+          )}
+        >
+          &emsp;请完整选择日期
+        </span>
+      </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>
+        ))}
+      </div>
+
+      <div className="C1tBtn">
+        <Button
+          type="primary"
+          onClick={btnOkFu}
+          disabled={list.some((v) => !v.time) || list.length <= 0}
+        >
+          提交
+        </Button>
+        &emsp;
+        <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+      </div>
+    </Modal>
+  );
+}
+
+const MemoC1setTime = React.memo(C1setTime);
+
+export default MemoC1setTime;

src/pages/C1orderset/index.module.scss

@@ -1,5 +1,75 @@
-.C1orderset{
-  :global{
-    
+.C1orderset {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px 24px 0;
+
+  :global {
+    .C1top {
+      text-align: right;
+      margin-bottom: 15px;
+    }
+  }
+}
+
+// 不可预约日期
+.C1setTime {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+      padding-top: 15px !important;
+    }
+
+    .C1tAdd {
+      .C1tAddTit {
+        transition: all .2s;
+        position: relative;
+        top: -10px;
+        color: #ff4d4f;
+        opacity: 0;
+      }
+
+      .C1tAddTitShow {
+        opacity: 1;
+        top: 0;
+      }
+    }
+
+    .C1tMain {
+      margin-top: 24px;
+      display: flex;
+      flex-wrap: wrap;
+
+      &>div {
+        margin-right: 20px;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        .anticon-delete{
+          margin-left: 3px;
+          font-size: 18px;
+          cursor: pointer;
+        }
+        .nullIcon{
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+
+    }
+
+    .C1tBtn {
+      margin-top: 24px;
+      text-align: center;
+    }
   }
 }

src/pages/C1orderset/index.tsx

@@ -1,9 +1,48 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
+import { Button } from "antd";
+import MyTable from "@/components/MyTable";
+import { useDispatch, useSelector } from "react-redux";
+import { C1_APIgetList } from "@/store/action/C1orderset";
+import { RootState } from "@/store";
+import { C1tableC } from "@/utils/tableData";
+import C1setTime from "./C1setTime";
 function C1orderset() {
+  const dispatch = useDispatch();
+
+  const getListFu = useCallback(() => {
+    dispatch(C1_APIgetList());
+  }, [dispatch]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  const { list } = useSelector((state: RootState) => state.C1orderset);
+
+  // 设置 不可预约时间
+  const [noTime, setNoTime] = useState(false);
+
   return (
     <div className={styles.C1orderset}>
       <div className="pageTitle">展馆预约设置</div>
+      <div className="C1top">
+        <Button type="primary" onClick={() => setNoTime(true)}>
+          设置不可预约日期
+        </Button>
+        &emsp;
+        <Button type="primary">设置预约需知</Button>&emsp;
+        <Button type="primary">编辑</Button>
+      </div>
+      <MyTable
+        list={list}
+        columnsTemp={C1tableC}
+        pagingInfo={false}
+        isNull="闭馆"
+      />
+
+      {/* 不可预约日期 */}
+      {noTime ? <C1setTime closeFu={() => setNoTime(false)} /> : null}
     </div>
   );
 }

src/store/action/C1orderset.ts

@@ -0,0 +1,43 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ *展馆预约设置-列表
+ */
+
+export const C1_APIgetList = (): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("cms/book/getList");
+    if (res.code === 0) {
+      dispatch({ type: "C1/getList", payload: res.data || [] });
+    }
+  };
+};
+
+/**
+ * 展馆预约设置-详情
+ */
+export const C1_APIgetInfo = (id: number) => {
+  return http.get(`cms/book/detail/${id}`);
+};
+
+/**
+ * 展馆预约设置-删除
+ */
+export const C1_APIdel = (id: number) => {
+  return http.get(`cms/book/removes/${id}`);
+};
+
+/**
+ * 展馆预约设置-配置详情
+ */
+export const C1_APIgetConfig = (id: number) => {
+  return http.get(`cms/book/getConfig/${id}`);
+};
+
+/**
+ * 展馆预约设置-配置编辑
+ */
+export const C1_APIsetConfig = (data: { id: number; rtf: string }) => {
+  return http.post("cms/book/setConfig", data);
+};

src/store/reducer/C1orderset.ts

@@ -0,0 +1,25 @@
+import { C1tableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  list: [] as C1tableType[],
+};
+
+// 定义 action 类型
+type Props = {
+  type: "C1/getList";
+  payload: C1tableType[];
+};
+
+// reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "C1/getList":
+      return { ...state, list: action.payload };
+
+    default:
+      return state;
+  }
+}

src/store/reducer/index.ts

@@ -11,6 +11,7 @@ import A6activity from "./A6activity";
 import A7volunteer from "./A7volunteer";
 import B1orderz from "./B1orderz";
 import B2orderh from "./B2orderh";
+import C1orderset from "./C1orderset";
 import Z0column from "./Z0column";
 import Z1user from "./Z1user";
 import Z2log from "./Z2log";
@@ -26,6 +27,7 @@ const rootReducer = combineReducers({
   A7volunteer,
   B1orderz,
   B2orderh,
+  C1orderset,
   Z0column,
   Z1user,
   Z2log,

src/types/api/B2orderh.ts

@@ -1,14 +1,13 @@
 export type B2tableType ={
-	bookDate: string;
-	bookId: string;
 	createTime: string;
 	creatorName: string;
+	description: string;
 	id: number;
+	identity: string;
 	name: string;
-	pcs: number;
 	phone: string;
-	rtf: string;
 	status: number;
-	time: string;
+	title: string;
+	type: string;
 	updateTime: string;
 }

src/types/api/C1orderset.d.ts

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

src/types/index.d.ts

@@ -8,5 +8,6 @@ export * from './api/A6activity'
 export * from './api/A7volunteer'
 export * from './api/B1orderz'
 export * from './api/B2orderh'
+export * from './api/C1orderset'
 export * from './api/Z1user'
 export * from './api/Z2log'

src/utils/tableData.ts

@@ -89,6 +89,17 @@ export const B3tableC = [
   ["text", "预约说明", "description", 50],
 ];
 
+export const C1tableC = [
+  ["txt", "时段", "time"],
+  ["txt", "周一", "monday"],
+  ["txt", "周二", "tuesday"],
+  ["txt", "周三", "wednesday"],
+  ["txt", "周四", "thursday"],
+  ["txt", "周五", "friday"],
+  ["txt", "周六", "saturday"],
+  ["txt", "周日", "sunday"],
+];
+
 export const Z0tableC = [
   ["txt", "栏目名称", "name"],
   ["text", "说明", "rtf", 50],