后台-课堂预约设置

后台管理/src/components/ZRichText/index.module.scss

@@ -1,82 +0,0 @@
-.ZRichText {
-  width: 1000px;
-  height: 100%;
-
-  :global {
-    .txtBox {
-      width: 100%;
-      height: 100%;
-      border: 1px solid #ccc;
-
-      a{
-        color: #fff !important;
-      }
-
-      // 隐藏媒体功能
-      .control-item.media {
-        display: none;
-      }
-
-      .bf-container {
-        height:100%;
-      }
-
-      .bf-content {
-        height: calc(100% - 92px);
-        padding-bottom: 0px;
-      }
-
-
-
-      .bf-controlbar {
-        position: relative;
-
-        .upImgBox {
-          position: absolute;
-          bottom: 13px;
-          right: 15px;
-          cursor: pointer;
-          color: var(--themeColor);
-          // display: none;
-        }
-
-        .upImgBoxNo {
-          display: none;
-        }
-
-      }
-    }
-
-    .noUpThumb {
-      position: relative;
-      overflow: hidden;
-      opacity: 0;
-      transition: top .2s;
-      color: #ff4d4f;
-      top: -10px;
-    }
-
-    .noUpThumbAc {
-      top: 0;
-      opacity: 1;
-    }
-
-    .bf-media .bf-image {
-      float: initial !important;
-      display: block;
-      margin: 10px auto;
-      text-align: center;
-
-      // 不让拖动放大缩小图片（会报错）
-      .bf-csize-icon {
-        display: none !important;
-      }
-
-      img {
-        max-width: 500px;
-        max-height: 300px;
-      }
-    }
-
-  }
-}

后台管理/src/components/ZRichText/index.tsx

@@ -1,216 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import styles from "./index.module.scss";
-
-// 引入编辑器组件
-
-// 安装---npm install braft-editor --save --force
-// npm install braft-utils --save --force
-import { ContentUtils } from "braft-utils";
-import BraftEditor from "braft-editor";
-// 引入编辑器样式
-import "braft-editor/dist/index.css";
-
-import classNames from "classnames";
-import { MessageFu } from "@/utils/message";
-import { fileDomInitialFu } from "@/utils/domShow";
-import { baseURL } from "@/utils/http";
-
-import { forwardRef, useImperativeHandle } from "react";
-import { API_upFile } from "@/store/action/layout";
-
-type Props = {
-  check: boolean; //表单校验，为fasle表示不校验
-  dirCode: string; //文件的code码
-  isLook: boolean; //是否是查看进来
-  ref: any; //当前自己的ref，给父组件调用
-  myUrl: string; //上传的api地址
-  full?: boolean;
-};
-
-function ZRichText({ check, dirCode, isLook, myUrl, full }: Props, ref: any) {
-  // 添加 上传 图片的dom
-  useEffect(() => {
-    setTimeout(() => {
-      const dom = document.querySelector(".bf-controlbar")!;
-      const div = document.createElement("div");
-      div.className = "upImgBox";
-      // div.title = "上传图片";
-      div.innerHTML = "上传图片/视频";
-      div.onclick = async () => {
-        myInput.current?.click();
-      };
-      dom.appendChild(div);
-    }, 20);
-
-    // 监听 富文本 的 class 变化，在全屏的时候会 富文本会添加上 fullscreen 的类
-    // 修复顶部样式冲突问题
-
-    const editorDom = document.querySelector(".bf-container") as HTMLDivElement;
-
-    const observer = new MutationObserver(() => {
-      // console.log("change");
-      const dom = document.querySelector(".layoutRightTop") as HTMLDivElement;
-
-      if (editorDom.className.includes("fullscreen")) dom.style.zIndex = "-1";
-      else dom.style.zIndex = "100";
-    });
-
-    observer.observe(editorDom, {
-      attributes: true,
-    });
-
-    // 销毁监听
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  useEffect(() => {
-    const controlbarDom = document.querySelectorAll(".txtBox .bf-controlbar ");
-    const contentDom = document.querySelectorAll(".txtBox .bf-content ");
-    if (controlbarDom) {
-      controlbarDom.forEach((v: any) => {
-        v.style.display = isLook ? "none" : "block";
-      });
-      contentDom.forEach((v: any) => {
-        v.style.height = isLook ? "100%" : "";
-      });
-    }
-  }, [isLook]);
-
-  // 编辑器文本
-  const [editorValue, setEditorValue] = useState(
-    // 初始内容
-    BraftEditor.createEditorState("")
-  );
-
-  // 判断 富文本是否为空
-  const isTxtFlag = useMemo(() => {
-    const txt: string = editorValue.toHTML();
-    if (
-      txt.replaceAll("<p>", "").replaceAll("</p>", "").replaceAll(" ", "") ===
-      ""
-    ) {
-      return true;
-    } else return false;
-  }, [editorValue]);
-
-  const myInput = useRef<HTMLInputElement>(null);
-
-  // 上传图片
-  const handeUpPhoto = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files) {
-        // 拿到files信息
-        const filesInfo = e.target.files[0];
-
-        let type = ["image/jpeg", "image/png", "video/mp4"];
-        let size = 5;
-        let txt = "图片只支持png、jpg和jpeg格式!";
-        let txt2 = "图片最大支持5M!";
-
-        const isVideoFlag = filesInfo.name.endsWith(".mp4");
-
-        // 校验格式
-        if (!type.includes(filesInfo.type)) {
-          e.target.value = "";
-          if (isVideoFlag) {
-            // 上传视频
-            size = 500;
-            txt = "视频只支持mp4格式!";
-            txt2 = "视频最大支持500M!";
-          }
-
-          return MessageFu.warning(txt);
-        }
-        // 校验大小
-        if (filesInfo.size > size * 1024 * 1024) {
-          e.target.value = "";
-          return MessageFu.warning(txt2);
-        }
-        // 创建FormData对象
-        const fd = new FormData();
-        // 把files添加进FormData对象（‘photo’为后端需要的字段）
-        fd.append("type", isVideoFlag ? "video" : "img");
-        fd.append("dirCode", dirCode);
-        fd.append("file", filesInfo);
-
-        e.target.value = "";
-
-        try {
-          const res = await API_upFile(fd, myUrl);
-          if (res.code === 0) {
-            MessageFu.success("上传成功!");
-            // 在光标位置插入图片
-            const newTxt = ContentUtils.insertMedias(editorValue, [
-              {
-                type: "IMAGE",
-                url: baseURL + res.data.filePath,
-              },
-            ]);
-
-            setEditorValue(newTxt);
-          }
-          fileDomInitialFu();
-        } catch (error) {
-          fileDomInitialFu();
-        }
-      }
-    },
-    [dirCode, editorValue, myUrl]
-  );
-
-  // 让父组件调用的 回显 富文本
-  const ritxtShowFu = useCallback((val: string) => {
-    setEditorValue(BraftEditor.createEditorState(val));
-  }, []);
-
-  // 让父组件调用的返回 富文本信息 和 表单校验 isTxtFlag为ture表示未通过校验
-  const fatherBtnOkFu = useCallback(() => {
-    return { val: editorValue.toHTML(), flag: isTxtFlag };
-  }, [editorValue, isTxtFlag]);
-
-  // 可以让父组件调用子组件的方法
-  useImperativeHandle(ref, () => ({
-    ritxtShowFu,
-    fatherBtnOkFu,
-  }));
-
-  return (
-    <div className={styles.ZRichText} style={{ width: full ? "100%" : "" }}>
-      <input
-        id="upInput"
-        type="file"
-        accept=".png,.jpg,.jpeg,.mp4"
-        ref={myInput}
-        onChange={(e) => handeUpPhoto(e)}
-      />
-
-      <div className="txtBox">
-        <BraftEditor
-          readOnly={isLook}
-          placeholder="请输入内容"
-          value={editorValue}
-          onChange={(e) => setEditorValue(e)}
-          imageControls={["remove"]}
-        />
-      </div>
-      <div
-        className={classNames(
-          "noUpThumb",
-          check && isTxtFlag ? "noUpThumbAc" : ""
-        )}
-      >
-        请输入正文!
-      </div>
-    </div>
-  );
-}
-
-export default forwardRef(ZRichText);

后台管理/src/components/ZRichTexts/index.tsx

@@ -37,10 +37,12 @@ type Props = {
   myUrl: string //上传的api地址
   isOne?: boolean //只显示单个富文本
   upAudioBtnNone?: boolean //是否能上传无障碍音频
+  // 其他后端需要的配置项
+  otherArr?: { key: string; value: string }[]
 }
 
 function ZRichTexts(
-  { check, dirCode, isLook, myUrl, isOne = false, upAudioBtnNone = false }: Props,
+  { check, dirCode, isLook, myUrl, isOne = false, upAudioBtnNone = false, otherArr }: Props,
   ref: any
 ) {
   const [sectionArr, setSectionArr] = useState<SectionArrType[]>([
@@ -115,6 +117,12 @@ function ZRichTexts(
         fd.append('dirCode', dirCode)
         fd.append('file', filesInfo)
 
+        if (otherArr) {
+          otherArr.forEach((v: any) => {
+            fd.append(v.key, v.value)
+          })
+        }
+
         e.target.value = ''
 
         try {
@@ -138,7 +146,7 @@ function ZRichTexts(
         }
       }
     },
-    [dirCode, myUrl, sectionArr]
+    [dirCode, myUrl, otherArr, sectionArr]
   )
 
   // 让父组件调用的 回显 富文本

后台管理/src/components/ZupOne/index.tsx

@@ -33,8 +33,9 @@ type Props = {
   upTxt: string
   myType: MyTypeType
   isLook?: boolean //是不是查看
-  fromData?: any
   ref: any //当前自己的ref，给父组件调用
+  // 其他后端需要的配置项
+  otherArr?: { key: string; value: string }[]
 }
 
 function ZupOne(
@@ -49,7 +50,7 @@ function ZupOne(
     upTxt,
     myType,
     isLook = false,
-    fromData
+    otherArr
   }: Props,
   ref: any
 ) {
@@ -103,10 +104,10 @@ function ZupOne(
         fd.append('dirCode', dirCode)
         fd.append('file', filesInfo)
 
-        if (fromData) {
-          for (const k in fromData) {
-            if (fromData[k]) fd.append(k, fromData[k])
-          }
+        if (otherArr) {
+          otherArr.forEach((v: any) => {
+            fd.append(v.key, v.value)
+          })
         }
 
         if (filesInfo.size > 1 * 1024 * 1024) {
@@ -128,7 +129,7 @@ function ZupOne(
         }
       }
     },
-    [dirCode, format, formatTxt, fromData, myType, myUrl, size]
+    [dirCode, format, formatTxt, myType, myUrl, otherArr, size]
   )
 
   // 让父组件调用的 回显 附件 地址

后台管理/src/pages/A1webuser/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 function A1webuser() {
   return (
     <div className={styles.A1webuser}>
-      <h1>A1webuser</h1>
+      <div className='pageTitle'>用户管理</div>
     </div>
   )
 }

后台管理/src/pages/A2orderSet/A2EMail.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Form, FormInstance, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import TextArea from 'antd/es/input/TextArea'
+import { A2_APIgetConfig, A2_APIsetConfig } from '@/store/action/A2orderSet'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  closeFu: () => void
+}
+
+function A2EMail({ closeFu }: Props) {
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 获取设置
+  const getEMfu = useCallback(async () => {
+    const res = await A2_APIgetConfig(12)
+    if (res.code === 0) {
+      FormBoxRef.current?.setFieldsValue({ rtf: res.data.rtf })
+    }
+  }, [])
+
+  useEffect(() => {
+    getEMfu()
+  }, [getEMfu])
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, [])
+
+  //  通过校验点击确定
+  const onFinish = useCallback(
+    async (values: { rtf: string }) => {
+      const res = await A2_APIsetConfig({ id: 12, rtf: values.rtf || '' })
+      if (res.code === 0) {
+        MessageFu.success('设置邮箱地址成功!')
+        closeFu()
+      }
+    },
+    [closeFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.A2EMail}
+      open={true}
+      title=''
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <Form
+        ref={FormBoxRef}
+        name='basic'
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete='off'
+        scrollToFirstError
+      >
+        <Form.Item
+          label='邮箱地址'
+          name='rtf'
+          rules={[
+            {
+              pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
+              message: '请输入正确格式的邮箱!'
+            }
+          ]}
+          getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+        >
+          <TextArea maxLength={50} showCount placeholder='请输入内容' />
+        </Form.Item>
+
+        {/* 确定和取消按钮 */}
+        <Form.Item className='A2Ebtn'>
+          <MyPopconfirm txtK='取消' onConfirm={closeFu} /> &emsp;
+          <Button type='primary' htmlType='submit'>
+            提交
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+const MemoA2EMail = React.memo(A2EMail)
+
+export default MemoA2EMail

后台管理/src/pages/A2orderSet/A2NoTime.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, DatePicker, DatePickerProps, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import dayjs, { Dayjs } from 'dayjs'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  closeFu: () => void
+  editFu: (val: string[] | null) => void
+  baseTime: string
+}
+
+function A2NoTime({ baseTime, closeFu, editFu }: Props) {
+  const [value, setValue] = useState<null | string[]>(null)
+
+  useEffect(() => {
+    if (baseTime && baseTime !== '空') {
+      let txt = baseTime.replaceAll('月', '-').replaceAll('日', '')
+      setValue(txt.split(','))
+    }
+  }, [baseTime])
+
+  const onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {
+    if (date && dateString.length) {
+      let arr = dateString as string[]
+      if (arr.length > 50) {
+        arr = arr.filter((c, i) => i < 50)
+        MessageFu.warning('最多50个日期，已过滤超出日期')
+      }
+      setValue(arr.map(v => v.replaceAll('月', '-').replaceAll('日', '')))
+    } else setValue(null)
+  }
+
+  const disabledDate = useCallback((time: any) => {
+    return dayjs().year() !== time.year()
+  }, [])
+
+  return (
+    <Modal
+      wrapClassName={styles.A2Notime}
+      open={true}
+      title='不可预约日期'
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='A2NoTit'>请选择日期，最多50个</div>
+      <DatePicker
+        multiple
+        onChange={onChange}
+        maxTagCount='responsive'
+        value={value ? value.map(v => dayjs(`${dayjs().year()}-${v}`)) : null}
+        size='large'
+        allowClear={false}
+        format='MM月DD日'
+        disabledDate={disabledDate}
+        needConfirm={true}
+      />
+
+      <div className='A2Nbtn'>
+        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+        &emsp;
+        <Button type='primary' onClick={() => editFu(value)}>
+          提交
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA2NoTime = React.memo(A2NoTime)
+
+export default MemoA2NoTime

后台管理/src/pages/A2orderSet/A2template.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Modal } from 'antd'
+import ZupOne from '@/components/ZupOne'
+import { A2_APIgetConfig, A2_APIsetConfig } from '@/store/action/A2orderSet'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  closeFu: () => void
+}
+
+function A2template({ closeFu }: Props) {
+  // pdf的ref
+  const ZupTxtRef = useRef<any>(null)
+
+  // 获取设置
+  const getEMfu = useCallback(async () => {
+    const res = await A2_APIgetConfig(13)
+    if (res.code === 0) {
+      // 设置附件
+      const info = JSON.parse(res.data.rtf || '{}')
+      ZupTxtRef.current?.setFileComFileFu({
+        fileName: info.fileName || '',
+        filePath: info.filePath || ''
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    getEMfu()
+  }, [getEMfu])
+
+  // 点击提交
+  const btnOk = useCallback(async () => {
+    let fileName = ''
+    let filePath = ''
+    // PDF附件
+    const ZupTxtRefObj = ZupTxtRef.current?.fileComFileResFu()
+    fileName = ZupTxtRefObj.fileName
+    filePath = ZupTxtRefObj.filePath
+
+    const res = await A2_APIsetConfig({ id: 13, rtf: JSON.stringify({ fileName, filePath }) })
+    if (res.code === 0) {
+      MessageFu.success('设置预约单模板成功!')
+      closeFu()
+    }
+  }, [closeFu])
+
+  return (
+    <Modal
+      wrapClassName={styles.A2template}
+      open={true}
+      title=''
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      {/* 附件 */}
+      <div className='formRow'>
+        <div className='formLeft'>预约单模板：</div>
+        <div className='formRight'>
+          <ZupOne
+            ref={ZupTxtRef}
+            isLook={false}
+            fileCheck={false}
+            size={50}
+            dirCode='A2templatePDF'
+            myUrl='cms/book/upload'
+            format={['application/pdf']}
+            formatTxt='pdf'
+            checkTxt='请上传pdf附件!'
+            upTxt='最多1个'
+            myType='pdf'
+            otherArr={[{ key: 'moduleName', value: 'config' }]}
+          />
+        </div>
+      </div>
+
+      <div className='A2Tbtn'>
+        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+        &emsp;
+        <Button type='primary' onClick={btnOk}>
+          提交
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA2template = React.memo(A2template)
+
+export default MemoA2template

后台管理/src/pages/A2orderSet/A2timeFlag.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react'
+import styles from './index.module.scss'
+import { Button, Modal } from 'antd'
+import { MessageFu } from '@/utils/message'
+
+export type A2TcanType = {
+  time: string
+  num: null | 0 | 1
+}
+
+type Props = {
+  info: A2TcanType
+  closeFu: (val: 0 | 1 | null) => void
+}
+
+const arr = [
+  {
+    name: '可预约',
+    num: 1
+  },
+  {
+    name: '不可预约',
+    num: 0
+  }
+]
+
+function A2timeFlag({ info, closeFu }: Props) {
+  const btnClick = useCallback(
+    (val: number) => {
+      if (val === info.num) return MessageFu.info(`当前已经是${info.num ? '' : '不'}可预约状态!`)
+      closeFu(val as 0)
+    },
+    [closeFu, info.num]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.A2timeFlag}
+      open={true}
+      title=''
+      onCancel={() => closeFu(null)}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      {info.num !== null ? (
+        <div className='A2Tmain'>
+          {info.time}：&emsp;
+          {arr.map(v => (
+            <Button
+              onClick={() => btnClick(v.num)}
+              key={v.name}
+              type={v.num === info.num ? 'primary' : 'default'}
+            >
+              {v.name}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </Modal>
+  )
+}
+
+const MemoA2timeFlag = React.memo(A2timeFlag)
+
+export default MemoA2timeFlag

后台管理/src/pages/A2orderSet/A2xuZhi.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import ZRichTexts from '@/components/ZRichTexts'
+import { A2_APIgetConfig, A2_APIsetConfig } from '@/store/action/A2orderSet'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  closeFu: () => void
+}
+
+function A2xuZhi({ closeFu }: Props) {
+  // 富文本的ref
+  const ZRichTextRef = useRef<any>(null)
+
+  // 获取设置
+  const getEMfu = useCallback(async () => {
+    const res = await A2_APIgetConfig(11)
+    if (res.code === 0) {
+      // 设置富文本
+      ZRichTextRef.current?.ritxtShowFu(JSON.parse(res.data.rtf || '{}'))
+    }
+  }, [])
+
+  useEffect(() => {
+    getEMfu()
+  }, [getEMfu])
+
+  // 点击提交
+  const btnOk = useCallback(async () => {
+    // 富文本校验不通过
+    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }
+
+    const res = await A2_APIsetConfig({ id: 11, rtf: rtf.val || '' })
+
+    if (res.code === 0) {
+      MessageFu.success('设置预约须知成功!')
+      closeFu()
+    }
+  }, [closeFu])
+
+  return (
+    <Modal
+      wrapClassName={styles.A2xuZhi}
+      open={true}
+      title='预约须知'
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='formRow'>
+        <ZRichTexts
+          check={false}
+          dirCode={'A2xuZhiText'}
+          isLook={false}
+          ref={ZRichTextRef}
+          myUrl='cms/book/upload'
+          isOne={true}
+          upAudioBtnNone={true}
+          otherArr={[{ key: 'moduleName', value: 'config' }]}
+        />
+      </div>
+
+      <div className='A2Xbtn'>
+        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+        &emsp;
+        <Button type='primary' onClick={btnOk}>
+          提交
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoA2xuZhi = React.memo(A2xuZhi)
+
+export default MemoA2xuZhi

后台管理/src/pages/A2orderSet/data.ts

@@ -0,0 +1,9 @@
+export const A2tyleDataRes = [
+  { name: '周一', key: 'monday' },
+  { name: '周二', key: 'tuesday' },
+  { name: '周三', key: 'wednesday' },
+  { name: '周四', key: 'thursday' },
+  { name: '周五', key: 'friday' },
+  { name: '周六', key: 'saturday' },
+  { name: '周日', key: 'sunday' }
+]

后台管理/src/pages/A2orderSet/index.module.scss

@@ -1,4 +1,153 @@
 .A2orderSet {
+  position: relative;
+  border-radius: 10px;
+  background-color: #fff;
   :global {
+    .A2top {
+      padding: 15px 24px;
+      text-align: end;
+    }
+    .A2main {
+      border-radius: 10px;
+      overflow: hidden;
+      height: calc(100% - 67px);
+      overflow-y: auto;
+
+      .A2tabCli {
+        color: var(--themeColor);
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+      .A2split {
+        height: 40px;
+      }
+    }
+  }
+}
+
+// 可预约-不可预约弹窗
+.A2timeFlag {
+  :global {
+    .A2Tmain {
+      margin-top: 15px;
+      .ant-btn {
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+// 不可预约日期设置-弹窗
+.A2Notime {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+    }
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+      padding-top: 15px !important;
+
+      .A2NoTit {
+        margin-bottom: 10px;
+      }
+
+      .ant-picker-selection-overflow {
+        max-height: 380px;
+        overflow-y: auto;
+      }
+
+      .ant-picker-selection-overflow-item {
+        margin: 5px 0;
+        position: relative !important;
+        height: 32px !important;
+        opacity: 1 !important;
+        pointer-events: auto !important;
+      }
+
+      .ant-picker-selection-overflow-item-rest {
+        display: none !important;
+      }
+    }
+    .A2Nbtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}
+
+// 邮箱设置
+.A2EMail {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-form {
+      padding-top: 30px;
+    }
+    .A2Ebtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}
+
+// 预约须知
+.A2xuZhi {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 1050px !important;
+    }
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+      padding-top: 15px !important;
+    }
+
+    .A2Xbtn {
+      text-align: center;
+      margin-top: 15px;
+      .ant-btn {
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+// 预约单模板设置
+.A2template {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .formRow {
+      display: flex;
+
+      .formLeft {
+        position: relative;
+        top: 3px;
+        width: 100px;
+        text-align: right;
+
+        & > span {
+          color: #ff4d4f;
+        }
+      }
+
+      .formRight {
+        width: calc(100% - 100px);
+      }
+    }
+
+    .A2Tbtn {
+      margin-top: 24px;
+      text-align: center;
+    }
   }
 }

后台管理/src/pages/A2orderSet/index.tsx

@@ -1,9 +1,198 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { Button, Table } from 'antd'
+import {
+  A2_APIedit,
+  A2_APIgeiList,
+  A2_APIgetConfig,
+  A2_APIsetConfig
+} from '@/store/action/A2orderSet'
+import { A2listType, A2NolistType } from './type'
+import { A2tyleDataRes } from './data'
+import A2timeFlag, { A2TcanType } from './A2timeFlag'
+import { MessageFu } from '@/utils/message'
+import A2NoTime from './A2NoTime'
+import A2EMail from './A2EMail'
+import A2xuZhi from './A2xuZhi'
+import A2template from './A2template'
+
 function A2orderSet() {
+  // 1111111-------------第一个表格相关--------开始
+  const [list, setList] = useState<A2listType[]>([])
+
+  const getList = useCallback(async () => {
+    const res = await A2_APIgeiList()
+    if (res.code === 0) setList(res.data)
+  }, [])
+
+  useEffect(() => {
+    getList()
+  }, [getList])
+
+  const columns = useMemo(() => {
+    let arr: any = [
+      {
+        title: '时段',
+        render: (item: A2listType) => (item.time === 'am' ? '上午' : '下午')
+      }
+    ]
+
+    A2tyleDataRes.forEach(v => {
+      arr.push({
+        title: v.name,
+        width: 200,
+        render: (item: A2listType) => (
+          <span
+            onClick={() => {
+              keTimeRef.current = { ...item, myKey: v.key }
+              setKeTime({
+                time: `${v.name} - ${item.time === 'am' ? '上午' : '下午'}`,
+                num: item[v.key as 'monday']
+              })
+            }}
+            className='A2tabCli'
+          >
+            {item[v.key as 'monday'] ? '可预约' : '不可预约'}
+          </span>
+        )
+      })
+    })
+    return arr
+  }, [])
+
+  const [keTime, setKeTime] = useState<A2TcanType>({
+    time: '',
+    num: null
+  })
+
+  const keTimeRef = useRef({} as A2listType)
+
+  // 可预约-不可预约设置
+  const changeTimeFlagFu = useCallback(
+    async (val: 0 | 1 | null) => {
+      if (val !== null) {
+        const res = await A2_APIedit({ ...keTimeRef.current, [keTimeRef.current.myKey]: val })
+
+        if (res.code === 0) {
+          MessageFu.success('修改成功!')
+          getList()
+        }
+      }
+      setKeTime({ time: '', num: null })
+    },
+    [getList]
+  )
+
+  // 11111111-1------------第一个表格相关----结束
+
+  // 222222222-------------第二个表格---------开始
+  const [noList, setNoList] = useState<A2NolistType[]>([])
+
+  const getNoListFu = useCallback(async () => {
+    const res = await A2_APIgetConfig(10)
+    if (res.code === 0) {
+      setNoList([{ id: '不可预约id', time: res.data.rtf }])
+    }
+  }, [])
+
+  useEffect(() => {
+    getNoListFu()
+  }, [getNoListFu])
+
+  const noColumns = useMemo(() => {
+    return [
+      {
+        title: '不可预约日期',
+        render: (item: A2NolistType) => item.time || ' - '
+      },
+      {
+        title: '操作',
+        width: 200,
+        render: (item: A2NolistType) => (
+          <span className='A2tabCli' onClick={() => setNoTxt(item.time || '空')}>
+            设置
+          </span>
+        )
+      }
+    ]
+  }, [])
+
+  const [noTxt, setNoTxt] = useState('')
+
+  // 点击提交或者取消
+  const A2NoBtn = useCallback(
+    async (val: string[] | null) => {
+      let str = ''
+
+      if (val) {
+        const arr = val.map(v => v.replaceAll('-', '月') + '日')
+        str = arr.join(',')
+      }
+
+      const res = await A2_APIsetConfig({ id: 10, rtf: str })
+      if (res.code === 0) {
+        MessageFu.success('设置不可预约日期成功!')
+        getNoListFu()
+        setNoTxt('')
+      }
+    },
+    [getNoListFu]
+  )
+
+  // 222222222-------------第二个表格---------结束
+
+  // 3333333333------------- 邮箱地址---------开始E-Mail
+  const [emShow, setEmShow] = useState(false)
+  // 3333333333------------- 邮箱地址---------结束E-Mail
+
+  // 444444444------------- 预约须知---------开始
+  const [xuZhi, setXuZhi] = useState(false)
+  // 444444444------------- 预约须知---------结束
+
+  // 555555555------------- 预约单模板设置---------开始
+  const [template, setTemplate] = useState(false)
+  // 555555555------------- 预约单模板设置---------结束
+
   return (
     <div className={styles.A2orderSet}>
-      <h1>A2orderSet</h1>
+      <div className='pageTitle'>课程预约设置</div>
+
+      <div className='A2top'>
+        <Button type='primary' onClick={() => setEmShow(true)}>
+          邮箱设置
+        </Button>
+        &emsp;
+        <Button type='primary' onClick={() => setXuZhi(true)}>
+          预约须知设置
+        </Button>
+        &emsp;
+        <Button type='primary' onClick={() => setTemplate(true)}>
+          预约单模板设置
+        </Button>
+      </div>
+
+      <div className='A2main'>
+        <Table dataSource={list} columns={columns} rowKey='id' pagination={false} />
+        <div className='A2split'></div>
+        <Table dataSource={noList} columns={noColumns} rowKey='id' pagination={false} />
+      </div>
+
+      {/* 可预约-不可预约设置 */}
+      {keTime.time ? <A2timeFlag info={keTime} closeFu={val => changeTimeFlagFu(val)} /> : null}
+
+      {/* 不可预约日期设置 */}
+      {noTxt ? (
+        <A2NoTime baseTime={noTxt} editFu={val => A2NoBtn(val)} closeFu={() => setNoTxt('')} />
+      ) : null}
+
+      {/* 邮箱设置 */}
+      {emShow ? <A2EMail closeFu={() => setEmShow(false)} /> : null}
+
+      {/*预约须知 */}
+      {xuZhi ? <A2xuZhi closeFu={() => setXuZhi(false)} /> : null}
+
+      {/*预约单模板设置 */}
+      {template ? <A2template closeFu={() => setTemplate(false)} /> : null}
     </div>
   )
 }

后台管理/src/pages/A2orderSet/type.d.ts

@@ -0,0 +1,20 @@
+export type A2listType = {
+  createTime: string
+  creatorId: number
+  creatorName: string
+  friday: number
+  id: number
+  monday: 0 | 1
+  saturday: number
+  sunday: number
+  thursday: number
+  time: string
+  tuesday: number
+  updateTime: string
+  wednesday: number
+  myKey: string
+}
+
+export type A2NolistType = { id: string; time: string }
+
+export type A2NolistIdType = 10 | 11 | 12 | 13

后台管理/src/pages/B2exhiLog/index.module.scss

@@ -0,0 +1,4 @@
+.B2exhiLog {
+  :global {
+  }
+}

后台管理/src/pages/B2exhiLog/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function B2exhiLog() {
+  return (
+    <div className={styles.B2exhiLog}>
+      <h1>B2exhiLog</h1>
+    </div>
+  )
+}
+
+const MemoB2exhiLog = React.memo(B2exhiLog)
+
+export default MemoB2exhiLog

后台管理/src/pages/Layout/data.ts

@@ -7,37 +7,37 @@ const tabLeftArr: RouterType = [
     name: '课程预约',
     son: [
       {
-        id: 200,
+        id: 101,
         name: '用户管理',
         path: '/',
         Com: React.lazy(() => import('../A1webuser'))
       },
       {
-        id: 300,
+        id: 102,
         name: '课程预约设置',
         path: '/orderSet',
         Com: React.lazy(() => import('../A2orderSet'))
       },
       {
-        id: 400,
+        id: 103,
         name: '课程设置',
         path: '/course',
         Com: React.lazy(() => import('../A3course'))
       },
       {
-        id: 500,
+        id: 104,
         name: '团队认证<span>(民生事务局)</span>',
         path: '/proveSuo',
         Com: React.lazy(() => import('../A4proveSuo'))
       },
       {
-        id: 600,
+        id: 105,
         name: '团队认证<span>(街坊会联合总会)</span>',
         path: '/proveHui',
         Com: React.lazy(() => import('../A5proveHui'))
       },
       {
-        id: 700,
+        id: 106,
         name: '课程预约记录',
         path: '/record',
         Com: React.lazy(() => import('../A6record'))
@@ -49,10 +49,16 @@ const tabLeftArr: RouterType = [
     name: '展览预约',
     son: [
       {
-        id: 800,
-        name: '待完善',
+        id: 201,
+        name: '展馆预约设置',
         path: '/exhibit',
         Com: React.lazy(() => import('../B1exhibit'))
+      },
+      {
+        id: 202,
+        name: '展馆预约记录',
+        path: '/exhiLog',
+        Com: React.lazy(() => import('../B2exhiLog'))
       }
     ]
   },

后台管理/src/pages/Layout/index.module.scss

@@ -31,7 +31,7 @@
           }
 
           .layoutLRowBoxRow {
-            opacity: 0.6;
+            opacity: 0.8;
             color: #fff;
             text-align: left;
             cursor: pointer;

后台管理/src/pages/Layout/index.tsx

@@ -40,13 +40,13 @@ function Layout() {
     const res = await Z1_APIgetAuthByUserId(userInfo.id)
     if (res.code === 0) {
       // 这里后台返回的一层的数据。懒得改逻辑，手动修改成2级的数据
-      res.data = [
-        {
-          id: Date.now(),
-          name: '',
-          children: res.data
-        }
-      ]
+      // res.data = [
+      //   {
+      //     id: Date.now(),
+      //     name: '',
+      //     children: res.data
+      //   }
+      // ]
 
       const isOkIdArr: number[] = [
         // 101, 102, 103, 104, 105, 106, 107, 108

后台管理/src/pages/Z1user/Z1auth.tsx

@@ -1,97 +1,97 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import styles from "./index.module.scss";
-import { Button, Checkbox, Modal } from "antd";
-import MyPopconfirm from "@/components/MyPopconfirm";
-import { Z1_APIgetAuthByUserId, Z1_APIsetAuth } from "@/store/action/Z1user";
-import classNmaes from "classnames";
-import { MessageFu } from "@/utils/message";
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Checkbox, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { Z1_APIgetAuthByUserId, Z1_APIsetAuth } from '@/store/action/Z1user'
+import classNmaes from 'classnames'
+import { MessageFu } from '@/utils/message'
 
 export type UserListType = {
-  id: number;
-  name: string;
+  id: number
+  name: string
   children: {
-    id: number;
-    name: string;
-    authority: boolean;
-  }[];
-};
+    id: number
+    name: string
+    authority: boolean
+  }[]
+}
 
 type Props = {
-  authInfo: { id: number; name: string };
-  closeFu: () => void;
-};
+  authInfo: { id: number; name: string }
+  closeFu: () => void
+}
 
 function Z1auth({ authInfo, closeFu }: Props) {
   const getAuthByUserIdFu = useCallback(async () => {
-    const res = await Z1_APIgetAuthByUserId(authInfo.id);
+    const res = await Z1_APIgetAuthByUserId(authInfo.id)
 
     if (res.code === 0) {
       // 这里后台返回的一层的数据。懒得改逻辑，手动修改成2级的数据
 
-      setList([
-        {
-          id: Date.now(),
-          name: "",
-          children: res.data,
-        },
-      ]);
+      // setList([
+      //   {
+      //     id: Date.now(),
+      //     name: "",
+      //     children: res.data,
+      //   },
+      // ]);
 
-      // setList(res.data)
+      setList(res.data)
     }
-  }, [authInfo.id]);
+  }, [authInfo.id])
 
   useEffect(() => {
-    getAuthByUserIdFu();
-  }, [getAuthByUserIdFu]);
+    getAuthByUserIdFu()
+  }, [getAuthByUserIdFu])
 
-  const [list, setList] = useState<UserListType[]>([]);
+  const [list, setList] = useState<UserListType[]>([])
 
   // 多选框变化
   const onChange = useCallback(
     (val: boolean, id1: number, id2: number) => {
       setList(
-        list.map((v) => ({
+        list.map(v => ({
           ...v,
           children:
             v.id === id1
-              ? v.children.map((c) => ({
+              ? v.children.map(c => ({
                   ...c,
-                  authority: c.id === id2 ? val : c.authority,
+                  authority: c.id === id2 ? val : c.authority
                 }))
-              : v.children,
+              : v.children
         }))
-      );
+      )
     },
     [list]
-  );
+  )
 
   // 二级选中的数组id集合
   const checkIds = useMemo(() => {
-    const arr: number[] = [];
-    list.forEach((v) => {
+    const arr: number[] = []
+    list.forEach(v => {
       if (v.children) {
-        v.children.forEach((c) => {
-          if (c.authority) arr.push(c.id);
-        });
+        v.children.forEach(c => {
+          if (c.authority) arr.push(c.id)
+        })
       }
-    });
-    return arr;
-  }, [list]);
+    })
+    return arr
+  }, [list])
 
   // 点击确定
   const btnOkFu = useCallback(async () => {
     const obj = {
       userId: authInfo.id,
-      resources: checkIds,
-    };
+      resources: checkIds
+    }
 
-    const res = await Z1_APIsetAuth(obj);
+    const res = await Z1_APIsetAuth(obj)
 
     if (res.code === 0) {
-      MessageFu.success("授权成功!");
-      closeFu();
+      MessageFu.success('授权成功!')
+      closeFu()
     }
-  }, [authInfo.id, checkIds, closeFu]);
+  }, [authInfo.id, checkIds, closeFu])
 
   return (
     <Modal
@@ -102,19 +102,19 @@ function Z1auth({ authInfo, closeFu }: Props) {
         [] // 设置footer为空，去掉 取消 确定默认按钮
       }
     >
-      <div className="Z1aEmain">
-        {list.map((v) => (
-          <div key={v.id} className="Z1aRow">
+      <div className='Z1aEmain'>
+        {list.map(v => (
+          <div key={v.id} className='Z1aRow'>
             {/* 隐藏一级数据 */}
-            {/* <div className="Z1aRow1">{v.name}</div> */}
-            <div className="Z1aRow2">
-              {v.children.map((c) => (
+            <div className='Z1aRow1'>{v.name}</div>
+            <div className='Z1aRow2'>
+              {v.children.map(c => (
                 <div key={c.id}>
                   <Checkbox
                     checked={c.authority}
-                    onChange={(e) => onChange(e.target.checked, v.id, c.id)}
+                    onChange={e => onChange(e.target.checked, v.id, c.id)}
                   >
-                    {c.name}
+                    <div dangerouslySetInnerHTML={{ __html: c.name }}></div>
                   </Checkbox>
                 </div>
               ))}
@@ -122,31 +122,22 @@ function Z1auth({ authInfo, closeFu }: Props) {
           </div>
         ))}
 
-        <div
-          className={classNmaes(
-            "Z1aErr",
-            checkIds.length <= 0 ? "Z1aErrAc" : ""
-          )}
-        >
+        <div className={classNmaes('Z1aErr', checkIds.length <= 0 ? 'Z1aErrAc' : '')}>
           至少选中一个
         </div>
 
-        <div className="Z1aEbtn">
-          <Button
-            type="primary"
-            onClick={btnOkFu}
-            disabled={checkIds.length <= 0}
-          >
+        <div className='Z1aEbtn'>
+          <Button type='primary' onClick={btnOkFu} disabled={checkIds.length <= 0}>
             提交
           </Button>
           &emsp;
-          <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
         </div>
       </div>
     </Modal>
-  );
+  )
 }
 
-const MemoZ1auth = React.memo(Z1auth);
+const MemoZ1auth = React.memo(Z1auth)
 
-export default MemoZ1auth;
+export default MemoZ1auth

后台管理/src/pages/Z1user/index.module.scss

@@ -41,14 +41,16 @@
         // display: flex;
 
         // 隐藏一级数据
-        // .Z1aRow1 {
-        //   width: 90px;
-        //   font-weight: 700;
-        // }
+        .Z1aRow1 {
+          width: 90px;
+          font-weight: 700;
+          font-size: 18px;
+          margin-bottom: 15px;
+        }
 
         .Z1aRow2 {
           width: calc(100% - 90px);
-          &>div{
+          & > div {
             margin-bottom: 15px;
           }
         }
@@ -60,7 +62,7 @@
         color: #ff4d4f;
         opacity: 0;
         pointer-events: none;
-        transition: all .3s;
+        transition: all 0.3s;
         position: relative;
         top: -10px;
       }
@@ -75,4 +77,4 @@
       }
     }
   }
-}
+}

后台管理/src/store/action/A2orderSet.ts

@@ -0,0 +1,30 @@
+import { A2NolistIdType } from '@/pages/A2orderSet/type'
+import http from '@/utils/http'
+
+/**
+ * 课程预约设置-获取时段列表
+ */
+export const A2_APIgeiList = () => {
+  return http.get('cms/book/getList')
+}
+
+/**
+ * 课程预约设置-修改时段
+ */
+export const A2_APIedit = (data: any) => {
+  return http.post('cms/book/save', data)
+}
+
+/**
+ * 课程预约设置-修改配置项 不可约日期：id=10 | 预约须知：id=11 | 邮箱:id=12 | 预约单模板:id=13, rtf:前端内容; 日期yyyy-MM-dd用逗号分隔
+ */
+export const A2_APIsetConfig = (data: { id: A2NolistIdType; rtf: string }) => {
+  return http.post('cms/book/config/edit', data)
+}
+
+/**
+ * 课程预约设置-获取配置 不可约日期：id=10 | 预约须知：id=11 | 邮箱:id=12 | 预约单模板:id=13
+ */
+export const A2_APIgetConfig = (id: A2NolistIdType) => {
+  return http.get(`cms/book/config/get/${id}`)
+}

后台管理/src/utils/http.ts

@@ -7,8 +7,8 @@ import { domShowFu } from './domShow'
 
 const envFlag = process.env.NODE_ENV === 'development'
 
-const baseUrlTemp = 'https://sit-liushaoqibwg.4dage.com' // 测试环境
-// const baseUrlTemp = 'http://192.168.20.61:8072' // 线下环境
+// const baseUrlTemp = 'https://sit-hqbooking.4dage.com' // 测试环境
+const baseUrlTemp = 'http://192.168.20.61:8091' // 线下环境
 
 const baseFlag = baseUrlTemp.includes('https://')