Merge pull request #15 from PlayEdu/dev

Dev

.gitignore

@@ -32,4 +32,6 @@ deploy-test.sh
 deploy-prod.sh
 deploy-demo.sh
 
-dist/
+dist/
+
+pnpm-lock.yaml

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.2.3",
     "@reduxjs/toolkit": "^1.9.3",
     "ahooks": "^3.7.6",
     "antd": "^5.3.2",

src/compenents/create-rs-category/index.tsx

@@ -40,23 +40,25 @@ export const CreateResourceCategory = (props: PropInterface) => {
         shape="circle"
         icon={<PlusOutlined />}
       />
-      <Modal
-        onCancel={() => {
-          setShowModal(false);
-        }}
-        onOk={confirm}
-        open={showModal}
-        title="创建分类"
-      >
-        <Input
-          placeholder="请输入分类名"
-          value={name}
-          onChange={(e) => {
-            setName(e.target.value);
+      {showModal ? (
+        <Modal
+          onCancel={() => {
+            setShowModal(false);
           }}
-          allowClear
-        />
-      </Modal>
+          onOk={confirm}
+          open={true}
+          title="创建分类"
+        >
+          <Input
+            placeholder="请输入分类名"
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+            }}
+            allowClear
+          />
+        </Modal>
+      ) : null}
     </>
   );
 };

src/compenents/select-attachment/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Modal, Tabs } from "antd";
+import { Row, Modal, Tabs, Spin } from "antd";
 import styles from "./index.module.less";
 import { UploadCoursewareSub } from "../../compenents";
 import type { TabsProps } from "antd";
@@ -13,11 +13,13 @@ interface PropsInterface {
 
 export const SelectAttachment = (props: PropsInterface) => {
   const [refresh, setRefresh] = useState(true);
+  const [init, setInit] = useState(true);
   const [tabKey, setTabKey] = useState(1);
   const [selectKeys, setSelectKeys] = useState<any>([]);
   const [selectVideos, setSelectVideos] = useState<any>([]);
 
   useEffect(() => {
+    setInit(true);
     setRefresh(!refresh);
   }, [props.open]);
 
@@ -26,7 +28,10 @@ export const SelectAttachment = (props: PropsInterface) => {
       key: "1",
       label: `课件`,
       children: (
-        <div className="float-left">
+        <div
+          className="float-left"
+          style={{ display: init ? "none" : "block" }}
+        >
           <UploadCoursewareSub
             label="课件"
             defaultCheckedList={props.defaultKeys}
@@ -35,6 +40,9 @@ export const SelectAttachment = (props: PropsInterface) => {
               setSelectKeys(arr);
               setSelectVideos(videos);
             }}
+            onSuccess={() => {
+              setInit(false);
+            }}
           />
         </div>
       ),
@@ -47,28 +55,35 @@ export const SelectAttachment = (props: PropsInterface) => {
 
   return (
     <>
-      <Modal
-        title="资源素材库"
-        centered
-        closable={false}
-        onCancel={() => {
-          setSelectKeys([]);
-          setSelectVideos([]);
-          props.onCancel();
-        }}
-        open={props.open}
-        width={800}
-        maskClosable={false}
-        onOk={() => {
-          props.onSelected(selectKeys, selectVideos);
-          setSelectKeys([]);
-          setSelectVideos([]);
-        }}
-      >
-        <Row>
-          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
-        </Row>
-      </Modal>
+      {props.open ? (
+        <Modal
+          title="资源素材库"
+          centered
+          closable={false}
+          onCancel={() => {
+            setSelectKeys([]);
+            setSelectVideos([]);
+            props.onCancel();
+          }}
+          open={true}
+          width={800}
+          maskClosable={false}
+          onOk={() => {
+            props.onSelected(selectKeys, selectVideos);
+            setSelectKeys([]);
+            setSelectVideos([]);
+          }}
+        >
+          <Row>
+            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+          </Row>
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+        </Modal>
+      ) : null}
     </>
   );
 };

src/compenents/select-resource/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Modal, Tabs } from "antd";
+import { Row, Modal, Tabs, Spin } from "antd";
 import styles from "./index.module.less";
 import { UploadVideoSub } from "../../compenents";
 import type { TabsProps } from "antd";
@@ -13,11 +13,13 @@ interface PropsInterface {
 
 export const SelectResource = (props: PropsInterface) => {
   const [refresh, setRefresh] = useState(true);
+  const [init, setInit] = useState(true);
   const [tabKey, setTabKey] = useState(1);
   const [selectKeys, setSelectKeys] = useState<any>([]);
   const [selectVideos, setSelectVideos] = useState<any>([]);
 
   useEffect(() => {
+    setInit(true);
     setRefresh(!refresh);
   }, [props.open]);
 
@@ -26,7 +28,10 @@ export const SelectResource = (props: PropsInterface) => {
       key: "1",
       label: `视频`,
       children: (
-        <div className="float-left">
+        <div
+          className="float-left"
+          style={{ display: init ? "none" : "block" }}
+        >
           <UploadVideoSub
             label="视频"
             defaultCheckedList={props.defaultKeys}
@@ -35,6 +40,9 @@ export const SelectResource = (props: PropsInterface) => {
               setSelectKeys(arr);
               setSelectVideos(videos);
             }}
+            onSuccess={() => {
+              setInit(false);
+            }}
           />
         </div>
       ),
@@ -47,28 +55,35 @@ export const SelectResource = (props: PropsInterface) => {
 
   return (
     <>
-      <Modal
-        title="资源素材库"
-        centered
-        closable={false}
-        onCancel={() => {
-          setSelectKeys([]);
-          setSelectVideos([]);
-          props.onCancel();
-        }}
-        open={props.open}
-        width={800}
-        maskClosable={false}
-        onOk={() => {
-          props.onSelected(selectKeys, selectVideos);
-          setSelectKeys([]);
-          setSelectVideos([]);
-        }}
-      >
-        <Row>
-          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
-        </Row>
-      </Modal>
+      {props.open ? (
+        <Modal
+          title="资源素材库"
+          centered
+          closable={false}
+          onCancel={() => {
+            setSelectKeys([]);
+            setSelectVideos([]);
+            props.onCancel();
+          }}
+          open={true}
+          width={800}
+          maskClosable={false}
+          onOk={() => {
+            props.onSelected(selectKeys, selectVideos);
+            setSelectKeys([]);
+            setSelectVideos([]);
+          }}
+        >
+          <Row>
+            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+          </Row>
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+        </Modal>
+      ) : null}
     </>
   );
 };

src/compenents/upload-courseware-button/index.tsx

@@ -12,7 +12,7 @@ import {
 } from "antd";
 import Dragger from "antd/es/upload/Dragger";
 import { useEffect, useRef, useState } from "react";
-import { generateUUID, parseVideo } from "../../utils";
+import { generateUUID } from "../../utils";
 import { minioMergeVideo, minioUploadId } from "../../api/upload";
 import { UploadChunk } from "../../js/minio-upload-chunk";
 
@@ -58,9 +58,14 @@ export const UploadCoursewareButton = (props: PropsInterface) => {
   const uploadProps = {
     multiple: true,
     beforeUpload: async (file: File) => {
+      if (file.size === 0) {
+        message.error(`文件 ${file.name} 为空文件`);
+        return Upload.LIST_IGNORE;
+      }
       let extension: any = file.name.split(".");
       extension = extension[extension.length - 1];
       if (
+        extension === "rar" ||
         file.type ===
           "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
         file.type === "application/msword" ||

src/compenents/upload-courseware-sub/index.tsx

@@ -34,6 +34,7 @@ interface PropsInterface {
   label: string;
   open: boolean;
   onSelected: (arr: any[], videos: []) => void;
+  onSuccess: () => void;
 }
 
 export const UploadCoursewareSub = (props: PropsInterface) => {
@@ -75,6 +76,7 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
         setTotal(res.data.result.total);
         setExistingTypes(res.data.existing_types);
         setVideoList(res.data.result.data);
+        props.onSuccess();
       })
       .catch((err) => {
         console.log("错误,", err);

src/compenents/upload-video-sub/index.module.less

@@ -1,8 +1 @@
-.video-list {
-  width: calc(100% - 100px);
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  margin-left: 10px;
-  min-height: 380px;
-}
+

src/compenents/upload-video-sub/index.tsx

@@ -35,6 +35,7 @@ interface PropsInterface {
   label: string;
   open: boolean;
   onSelected: (arr: any[], videos: []) => void;
+  onSuccess: () => void;
 }
 
 export const UploadVideoSub = (props: PropsInterface) => {
@@ -68,6 +69,7 @@ export const UploadVideoSub = (props: PropsInterface) => {
         setTotal(res.data.result.total);
         setVideoExtra(res.data.videos_extra);
         setVideoList(res.data.result.data);
+        props.onSuccess();
       })
       .catch((err) => {
         console.log("错误,", err);

src/index.less

@@ -189,6 +189,10 @@ code {
   flex: 1;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .c-admin {
   font-size: 14px;
   font-weight: 400;

src/pages/course/compenents/attachment-update.tsx

@@ -28,6 +28,9 @@ export const CourseAttachmentUpdate: React.FC<PropInterface> = ({
     if (id === 0) {
       return;
     }
+    setAttachmentVisible(false);
+    setAttachmentData([]);
+    setAttachments([]);
     getDetail();
   }, [id, open]);
 
@@ -81,16 +84,11 @@ export const CourseAttachmentUpdate: React.FC<PropInterface> = ({
       return;
     }
 
-    courseAttachment
-      .storeCourseAttachmentMulti(id, hours)
-      .then((res: any) => {
-        console.log("ok");
-        setAttachmentVisible(false);
-        getDetail();
-      })
-      .catch((err) => {
-        message.error(err.message);
-      });
+    courseAttachment.storeCourseAttachmentMulti(id, hours).then((res: any) => {
+      console.log("ok");
+      setAttachmentVisible(false);
+      getDetail();
+    });
   };
 
   const delAttachments = (hid: number) => {
@@ -149,70 +147,72 @@ export const CourseAttachmentUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Drawer
-        title="课件管理"
-        onClose={onCancel}
-        maskClosable={false}
-        open={open}
-        width={634}
-      >
-        <div className={styles["top-content"]}>
-          <p>1.线上课课件调整及时生效，操作不可逆，请谨慎操作。</p>
-        </div>
-        <div className="float-left mt-24">
-          <SelectAttachment
-            defaultKeys={attachments}
-            open={attachmentVisible}
-            onCancel={() => {
-              setAttachmentVisible(false);
-            }}
-            onSelected={(arr: any, videos: any) => {
-              selectAttachmentData(arr, videos);
-            }}
-          ></SelectAttachment>
-          <Form
-            form={form}
-            name="attachment-update-basic"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <div className="c-flex">
-              <Form.Item>
-                <div className="ml-42">
-                  <Button
-                    onClick={() => setAttachmentVisible(true)}
-                    type="primary"
-                  >
-                    添加课件
-                  </Button>
+      {open ? (
+        <Drawer
+          title="课件管理"
+          onClose={onCancel}
+          maskClosable={false}
+          open={true}
+          width={634}
+        >
+          <div className={styles["top-content"]}>
+            <p>1.线上课课件调整及时生效，操作不可逆，请谨慎操作。</p>
+          </div>
+          <div className="float-left mt-24">
+            <SelectAttachment
+              defaultKeys={attachments}
+              open={attachmentVisible}
+              onCancel={() => {
+                setAttachmentVisible(false);
+              }}
+              onSelected={(arr: any, videos: any) => {
+                selectAttachmentData(arr, videos);
+              }}
+            ></SelectAttachment>
+            <Form
+              form={form}
+              name="attachment-update-basic"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+            >
+              <div className="c-flex">
+                <Form.Item>
+                  <div className="ml-42">
+                    <Button
+                      onClick={() => setAttachmentVisible(true)}
+                      type="primary"
+                    >
+                      添加课件
+                    </Button>
+                  </div>
+                </Form.Item>
+                <div className={styles["hous-box"]}>
+                  {attachmentData.length === 0 && (
+                    <span className={styles["no-hours"]}>
+                      请点击上方按钮添加课件
+                    </span>
+                  )}
+                  {attachmentData.length > 0 && (
+                    <TreeAttachments
+                      data={attachmentData}
+                      onRemoveItem={(id: number) => {
+                        delAttachments(id);
+                      }}
+                      onUpdate={(arr: any[]) => {
+                        transAttachments(arr);
+                      }}
+                    />
+                  )}
                 </div>
-              </Form.Item>
-              <div className={styles["hous-box"]}>
-                {attachmentData.length === 0 && (
-                  <span className={styles["no-hours"]}>
-                    请点击上方按钮添加课件
-                  </span>
-                )}
-                {attachmentData.length > 0 && (
-                  <TreeAttachments
-                    data={attachmentData}
-                    onRemoveItem={(id: number) => {
-                      delAttachments(id);
-                    }}
-                    onUpdate={(arr: any[]) => {
-                      transAttachments(arr);
-                    }}
-                  />
-                )}
               </div>
-            </div>
-          </Form>
-        </div>
-      </Drawer>
+            </Form>
+          </div>
+        </Drawer>
+      ) : null}
     </>
   );
 };

src/pages/course/compenents/create.tsx

@@ -464,386 +464,388 @@ export const CourseCreate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Drawer
-        title="新建课程"
-        onClose={onCancel}
-        maskClosable={false}
-        open={open}
-        footer={
-          <Space className="j-r-flex">
-            <Button onClick={() => onCancel()}>取 消</Button>
-            <Button onClick={() => form.submit()} type="primary">
-              确 认
-            </Button>
-          </Space>
-        }
-        width={634}
-      >
-        <div className="float-left mt-24">
-          <SelectResource
-            defaultKeys={
-              chapterType == 0 ? hours : changeChapterHours(chapterHours)
-            }
-            open={videoVisible}
-            onCancel={() => {
-              setVideoVisible(false);
-            }}
-            onSelected={(arr: any, videos: any) => {
-              if (chapterType === 0) {
-                selectData(arr, videos);
-              } else {
-                selectChapterData(arr, videos);
+      {open ? (
+        <Drawer
+          title="新建课程"
+          onClose={onCancel}
+          maskClosable={false}
+          open={true}
+          footer={
+            <Space className="j-r-flex">
+              <Button onClick={() => onCancel()}>取 消</Button>
+              <Button onClick={() => form.submit()} type="primary">
+                确 认
+              </Button>
+            </Space>
+          }
+          width={634}
+        >
+          <div className="float-left mt-24">
+            <SelectResource
+              defaultKeys={
+                chapterType == 0 ? hours : changeChapterHours(chapterHours)
               }
-            }}
-          />
-          <SelectAttachment
-            defaultKeys={attachments}
-            open={attachmentVisible}
-            onCancel={() => {
-              setAttachmentVisible(false);
-            }}
-            onSelected={(arr: any, videos: any) => {
-              selectAttachmentData(arr, videos);
-            }}
-          ></SelectAttachment>
-          <Form
-            form={form}
-            name="create-basic"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="课程分类"
-              name="category_ids"
-              rules={[{ required: true, message: "请选择课程分类!" }]}
+              open={videoVisible}
+              onCancel={() => {
+                setVideoVisible(false);
+              }}
+              onSelected={(arr: any, videos: any) => {
+                if (chapterType === 0) {
+                  selectData(arr, videos);
+                } else {
+                  selectChapterData(arr, videos);
+                }
+              }}
+            />
+            <SelectAttachment
+              defaultKeys={attachments}
+              open={attachmentVisible}
+              onCancel={() => {
+                setAttachmentVisible(false);
+              }}
+              onSelected={(arr: any, videos: any) => {
+                selectAttachmentData(arr, videos);
+              }}
+            ></SelectAttachment>
+            <Form
+              form={form}
+              name="create-basic"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <TreeSelect
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                allowClear
-                multiple
-                style={{ width: 424 }}
-                treeData={categories}
-                placeholder="请选择课程分类"
-                treeDefaultExpandAll
-              />
-            </Form.Item>
-            <Form.Item
-              label="课程名称"
-              name="title"
-              rules={[{ required: true, message: "请在此处输入课程名称!" }]}
-            >
-              <Input
-                style={{ width: 424 }}
-                placeholder="请在此处输入课程名称"
-                allowClear
-              />
-            </Form.Item>
-            <Form.Item
-              label="课程属性"
-              name="isRequired"
-              rules={[{ required: true, message: "请选择课程属性!" }]}
-            >
-              <Radio.Group>
-                <Radio value={1}>必修课</Radio>
-                <Radio value={0} style={{ marginLeft: 22 }}>
-                  选修课
-                </Radio>
-              </Radio.Group>
-            </Form.Item>
-            <Form.Item
-              label="指派部门"
-              name="type"
-              rules={[{ required: true, message: "请选择指派部门!" }]}
-            >
-              <Radio.Group onChange={getType}>
-                <Radio value="open">全部部门</Radio>
-                <Radio value="elective">选择部门</Radio>
-              </Radio.Group>
-            </Form.Item>
-
-            {type === "elective" && (
               <Form.Item
-                label="选择部门"
-                name="dep_ids"
-                rules={[
-                  {
-                    required: true,
-                    message: "请选择部门!",
-                  },
-                ]}
+                label="课程分类"
+                name="category_ids"
+                rules={[{ required: true, message: "请选择课程分类!" }]}
               >
                 <TreeSelect
                   showCheckedStrategy={TreeSelect.SHOW_ALL}
-                  style={{ width: 424 }}
-                  treeData={departments}
-                  multiple
                   allowClear
+                  multiple
+                  style={{ width: 424 }}
+                  treeData={categories}
+                  placeholder="请选择课程分类"
                   treeDefaultExpandAll
-                  placeholder="请选择部门"
                 />
               </Form.Item>
-            )}
-
-            <Form.Item
-              label="课程封面"
-              name="thumb"
-              rules={[{ required: true, message: "请上传课程封面!" }]}
-            >
-              <div className="d-flex">
-                <Image
-                  src={thumb}
-                  width={160}
-                  height={120}
-                  style={{ borderRadius: 6 }}
-                  preview={false}
+              <Form.Item
+                label="课程名称"
+                name="title"
+                rules={[{ required: true, message: "请在此处输入课程名称!" }]}
+              >
+                <Input
+                  style={{ width: 424 }}
+                  placeholder="请在此处输入课程名称"
+                  allowClear
                 />
-                <div className="c-flex ml-8 flex-1">
-                  <div className="d-flex mb-28">
-                    <div
-                      className={
-                        thumb === defaultThumb1
-                          ? styles["thumb-item-avtive"]
-                          : styles["thumb-item"]
-                      }
-                      onClick={() => {
-                        setThumb(defaultThumb1);
-                        form.setFieldsValue({
-                          thumb: defaultThumb1,
-                        });
-                      }}
-                    >
-                      <Image
-                        src={defaultThumb1}
-                        width={80}
-                        height={60}
-                        style={{ borderRadius: 6 }}
-                        preview={false}
-                      />
+              </Form.Item>
+              <Form.Item
+                label="课程属性"
+                name="isRequired"
+                rules={[{ required: true, message: "请选择课程属性!" }]}
+              >
+                <Radio.Group>
+                  <Radio value={1}>必修课</Radio>
+                  <Radio value={0} style={{ marginLeft: 22 }}>
+                    选修课
+                  </Radio>
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item
+                label="指派部门"
+                name="type"
+                rules={[{ required: true, message: "请选择指派部门!" }]}
+              >
+                <Radio.Group onChange={getType}>
+                  <Radio value="open">全部部门</Radio>
+                  <Radio value="elective">选择部门</Radio>
+                </Radio.Group>
+              </Form.Item>
+
+              {type === "elective" && (
+                <Form.Item
+                  label="选择部门"
+                  name="dep_ids"
+                  rules={[
+                    {
+                      required: true,
+                      message: "请选择部门!",
+                    },
+                  ]}
+                >
+                  <TreeSelect
+                    showCheckedStrategy={TreeSelect.SHOW_ALL}
+                    style={{ width: 424 }}
+                    treeData={departments}
+                    multiple
+                    allowClear
+                    treeDefaultExpandAll
+                    placeholder="请选择部门"
+                  />
+                </Form.Item>
+              )}
+
+              <Form.Item
+                label="课程封面"
+                name="thumb"
+                rules={[{ required: true, message: "请上传课程封面!" }]}
+              >
+                <div className="d-flex">
+                  <Image
+                    src={thumb}
+                    width={160}
+                    height={120}
+                    style={{ borderRadius: 6 }}
+                    preview={false}
+                  />
+                  <div className="c-flex ml-8 flex-1">
+                    <div className="d-flex mb-28">
+                      <div
+                        className={
+                          thumb === defaultThumb1
+                            ? styles["thumb-item-avtive"]
+                            : styles["thumb-item"]
+                        }
+                        onClick={() => {
+                          setThumb(defaultThumb1);
+                          form.setFieldsValue({
+                            thumb: defaultThumb1,
+                          });
+                        }}
+                      >
+                        <Image
+                          src={defaultThumb1}
+                          width={80}
+                          height={60}
+                          style={{ borderRadius: 6 }}
+                          preview={false}
+                        />
+                      </div>
+                      <div
+                        className={
+                          thumb === defaultThumb2
+                            ? styles["thumb-item-avtive"]
+                            : styles["thumb-item"]
+                        }
+                        onClick={() => {
+                          setThumb(defaultThumb2);
+                          form.setFieldsValue({
+                            thumb: defaultThumb2,
+                          });
+                        }}
+                      >
+                        <Image
+                          src={defaultThumb2}
+                          width={80}
+                          height={60}
+                          style={{ borderRadius: 6 }}
+                          preview={false}
+                        />
+                      </div>
+                      <div
+                        className={
+                          thumb === defaultThumb3
+                            ? styles["thumb-item-avtive"]
+                            : styles["thumb-item"]
+                        }
+                        onClick={() => {
+                          setThumb(defaultThumb3);
+                          form.setFieldsValue({
+                            thumb: defaultThumb3,
+                          });
+                        }}
+                      >
+                        <Image
+                          src={defaultThumb3}
+                          width={80}
+                          height={60}
+                          style={{ borderRadius: 6 }}
+                          preview={false}
+                        />
+                      </div>
                     </div>
-                    <div
-                      className={
-                        thumb === defaultThumb2
-                          ? styles["thumb-item-avtive"]
-                          : styles["thumb-item"]
-                      }
-                      onClick={() => {
-                        setThumb(defaultThumb2);
-                        form.setFieldsValue({
-                          thumb: defaultThumb2,
-                        });
-                      }}
-                    >
-                      <Image
-                        src={defaultThumb2}
-                        width={80}
-                        height={60}
-                        style={{ borderRadius: 6 }}
-                        preview={false}
-                      />
+                    <div className="d-flex">
+                      <UploadImageButton
+                        text="更换封面"
+                        onSelected={(url) => {
+                          setThumb(url);
+                          form.setFieldsValue({ thumb: url });
+                        }}
+                      ></UploadImageButton>
+                      <span className="helper-text ml-16">
+                        （推荐尺寸:400x300px）
+                      </span>
                     </div>
-                    <div
-                      className={
-                        thumb === defaultThumb3
-                          ? styles["thumb-item-avtive"]
-                          : styles["thumb-item"]
-                      }
-                      onClick={() => {
-                        setThumb(defaultThumb3);
-                        form.setFieldsValue({
-                          thumb: defaultThumb3,
-                        });
-                      }}
-                    >
-                      <Image
-                        src={defaultThumb3}
-                        width={80}
-                        height={60}
-                        style={{ borderRadius: 6 }}
-                        preview={false}
-                      />
-                    </div>
-                  </div>
-                  <div className="d-flex">
-                    <UploadImageButton
-                      text="更换封面"
-                      onSelected={(url) => {
-                        setThumb(url);
-                        form.setFieldsValue({ thumb: url });
-                      }}
-                    ></UploadImageButton>
-                    <span className="helper-text ml-16">
-                      （推荐尺寸:400x300px）
-                    </span>
                   </div>
                 </div>
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="课时列表"
-              name="hasChapter"
-              rules={[{ required: true, message: "请选择课时列表!" }]}
-            >
-              <Radio.Group onChange={getChapterType}>
-                <Radio value={0}>无章节</Radio>
-                <Radio value={1} style={{ marginLeft: 22 }}>
-                  有章节
-                </Radio>
-              </Radio.Group>
-            </Form.Item>
-            {chapterType === 0 && (
-              <div className="c-flex mb-24">
-                <Form.Item>
-                  <div className="ml-120">
-                    <Button
-                      onClick={() => setVideoVisible(true)}
-                      type="primary"
-                    >
-                      添加课时
-                    </Button>
+              </Form.Item>
+              <Form.Item
+                label="课时列表"
+                name="hasChapter"
+                rules={[{ required: true, message: "请选择课时列表!" }]}
+              >
+                <Radio.Group onChange={getChapterType}>
+                  <Radio value={0}>无章节</Radio>
+                  <Radio value={1} style={{ marginLeft: 22 }}>
+                    有章节
+                  </Radio>
+                </Radio.Group>
+              </Form.Item>
+              {chapterType === 0 && (
+                <div className="c-flex mb-24">
+                  <Form.Item>
+                    <div className="ml-120">
+                      <Button
+                        onClick={() => setVideoVisible(true)}
+                        type="primary"
+                      >
+                        添加课时
+                      </Button>
+                    </div>
+                  </Form.Item>
+                  <div className={styles["hous-box"]}>
+                    {treeData.length === 0 && (
+                      <span className={styles["no-hours"]}>
+                        请点击上方按钮添加课时
+                      </span>
+                    )}
+                    {treeData.length > 0 && (
+                      <TreeHours
+                        data={treeData}
+                        onRemoveItem={(id: number) => {
+                          delHour(id);
+                        }}
+                        onUpdate={(arr: any[]) => {
+                          transHour(arr);
+                        }}
+                      />
+                    )}
                   </div>
+                </div>
+              )}
+              {chapterType === 1 && (
+                <div className="c-flex mb-24">
+                  {chapters.length > 0 &&
+                    chapters.map((item: any, index: number) => {
+                      return (
+                        <div
+                          key={item.hours.length + "章节" + index}
+                          className={styles["chapter-item"]}
+                        >
+                          <div className="d-flex">
+                            <div className={styles["label"]}>
+                              章节{index + 1}：
+                            </div>
+                            <Input
+                              value={item.name}
+                              className={styles["input"]}
+                              onChange={(e) => {
+                                setChapterName(index, e.target.value);
+                              }}
+                              allowClear
+                              placeholder="请在此处输入章节名称"
+                            />
+                            <Button
+                              className="mr-16"
+                              type="primary"
+                              onClick={() => {
+                                setVideoVisible(true);
+                                setAddvideoCurrent(index);
+                              }}
+                            >
+                              添加课时
+                            </Button>
+                            <Button onClick={() => delChapter(index)}>
+                              删除章节
+                            </Button>
+                          </div>
+                          <div className={styles["chapter-hous-box"]}>
+                            {item.hours.length === 0 && (
+                              <span className={styles["no-hours"]}>
+                                请点击上方按钮添加课时
+                              </span>
+                            )}
+                            {item.hours.length > 0 && (
+                              <TreeHours
+                                data={item.hours}
+                                onRemoveItem={(id: number) => {
+                                  delChapterHour(index, id);
+                                }}
+                                onUpdate={(arr: any[]) => {
+                                  transChapterHour(index, arr);
+                                }}
+                              />
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  <Form.Item>
+                    <div className="ml-120">
+                      <Button onClick={() => addNewChapter()}>添加章节</Button>
+                    </div>
+                  </Form.Item>
+                </div>
+              )}
+              <Form.Item label="更多选项">
+                <div
+                  className={showDrop ? "drop-item active" : "drop-item"}
+                  onClick={() => setShowDrop(!showDrop)}
+                >
+                  <i
+                    style={{ fontSize: 14 }}
+                    className="iconfont icon-icon-xiala c-red"
+                  />
+                  <span>(课程简介、课件)</span>
+                </div>
+              </Form.Item>
+              <div
+                className="c-flex"
+                style={{ display: showDrop ? "block" : "none" }}
+              >
+                <Form.Item label="课程简介" name="short_desc">
+                  <Input.TextArea
+                    style={{ width: 424, minHeight: 80 }}
+                    allowClear
+                    placeholder="请输入课程简介（最多200字）"
+                    maxLength={200}
+                  />
+                </Form.Item>
+                <Form.Item label="课程附件">
+                  <Button
+                    onClick={() => setAttachmentVisible(true)}
+                    type="primary"
+                  >
+                    添加课件
+                  </Button>
                 </Form.Item>
                 <div className={styles["hous-box"]}>
-                  {treeData.length === 0 && (
+                  {attachmentData.length === 0 && (
                     <span className={styles["no-hours"]}>
-                      请点击上方按钮添加课时
+                      请点击上方按钮添加课件
                     </span>
                   )}
-                  {treeData.length > 0 && (
-                    <TreeHours
-                      data={treeData}
+                  {attachmentData.length > 0 && (
+                    <TreeAttachments
+                      data={attachmentData}
                       onRemoveItem={(id: number) => {
-                        delHour(id);
+                        delAttachments(id);
                       }}
                       onUpdate={(arr: any[]) => {
-                        transHour(arr);
+                        transAttachments(arr);
                       }}
                     />
                   )}
                 </div>
               </div>
-            )}
-            {chapterType === 1 && (
-              <div className="c-flex mb-24">
-                {chapters.length > 0 &&
-                  chapters.map((item: any, index: number) => {
-                    return (
-                      <div
-                        key={item.hours.length + "章节" + index}
-                        className={styles["chapter-item"]}
-                      >
-                        <div className="d-flex">
-                          <div className={styles["label"]}>
-                            章节{index + 1}：
-                          </div>
-                          <Input
-                            value={item.name}
-                            className={styles["input"]}
-                            onChange={(e) => {
-                              setChapterName(index, e.target.value);
-                            }}
-                            allowClear
-                            placeholder="请在此处输入章节名称"
-                          />
-                          <Button
-                            className="mr-16"
-                            type="primary"
-                            onClick={() => {
-                              setVideoVisible(true);
-                              setAddvideoCurrent(index);
-                            }}
-                          >
-                            添加课时
-                          </Button>
-                          <Button onClick={() => delChapter(index)}>
-                            删除章节
-                          </Button>
-                        </div>
-                        <div className={styles["chapter-hous-box"]}>
-                          {item.hours.length === 0 && (
-                            <span className={styles["no-hours"]}>
-                              请点击上方按钮添加课时
-                            </span>
-                          )}
-                          {item.hours.length > 0 && (
-                            <TreeHours
-                              data={item.hours}
-                              onRemoveItem={(id: number) => {
-                                delChapterHour(index, id);
-                              }}
-                              onUpdate={(arr: any[]) => {
-                                transChapterHour(index, arr);
-                              }}
-                            />
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })}
-                <Form.Item>
-                  <div className="ml-120">
-                    <Button onClick={() => addNewChapter()}>添加章节</Button>
-                  </div>
-                </Form.Item>
-              </div>
-            )}
-            <Form.Item label="更多选项">
-              <div
-                className={showDrop ? "drop-item active" : "drop-item"}
-                onClick={() => setShowDrop(!showDrop)}
-              >
-                <i
-                  style={{ fontSize: 14 }}
-                  className="iconfont icon-icon-xiala c-red"
-                />
-                <span>(课程简介、课件)</span>
-              </div>
-            </Form.Item>
-            <div
-              className="c-flex"
-              style={{ display: showDrop ? "block" : "none" }}
-            >
-              <Form.Item label="课程简介" name="short_desc">
-                <Input.TextArea
-                  style={{ width: 424, minHeight: 80 }}
-                  allowClear
-                  placeholder="请输入课程简介（最多200字）"
-                  maxLength={200}
-                />
-              </Form.Item>
-              <Form.Item label="课程附件">
-                <Button
-                  onClick={() => setAttachmentVisible(true)}
-                  type="primary"
-                >
-                  添加课件
-                </Button>
-              </Form.Item>
-              <div className={styles["hous-box"]}>
-                {attachmentData.length === 0 && (
-                  <span className={styles["no-hours"]}>
-                    请点击上方按钮添加课件
-                  </span>
-                )}
-                {attachmentData.length > 0 && (
-                  <TreeAttachments
-                    data={attachmentData}
-                    onRemoveItem={(id: number) => {
-                      delAttachments(id);
-                    }}
-                    onUpdate={(arr: any[]) => {
-                      transAttachments(arr);
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-          </Form>
-        </div>
-      </Drawer>
+            </Form>
+          </div>
+        </Drawer>
+      ) : null}
     </>
   );
 };

src/pages/course/compenents/hour-update.tsx

@@ -32,6 +32,13 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
     if (id === 0) {
       return;
     }
+    setVideoVisible(false);
+    setChapters([]);
+    setHours([]);
+    setChapterHours([]);
+    setTreeData([]);
+    setAddvideoCurrent(0);
+    setChapterType(0);
     getDetail();
   }, [id, open]);
 
@@ -113,16 +120,11 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
       message.error("请选择视频");
       return;
     }
-    courseHour
-      .storeCourseHourMulti(id, hours)
-      .then((res: any) => {
-        console.log("ok");
-        setVideoVisible(false);
-        getDetail();
-      })
-      .catch((err) => {
-        message.error(err.message);
-      });
+    courseHour.storeCourseHourMulti(id, hours).then((res: any) => {
+      console.log("ok");
+      setVideoVisible(false);
+      getDetail();
+    });
   };
 
   const selectChapterData = (arr: any, videos: any) => {
@@ -146,16 +148,11 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
       message.error("请选择视频");
       return;
     }
-    courseHour
-      .storeCourseHourMulti(id, hours)
-      .then((res: any) => {
-        console.log("ok");
-        setVideoVisible(false);
-        getDetail();
-      })
-      .catch((err) => {
-        message.error(err.message);
-      });
+    courseHour.storeCourseHourMulti(id, hours).then((res: any) => {
+      console.log("ok");
+      setVideoVisible(false);
+      getDetail();
+    });
   };
 
   const delHour = (hid: number) => {
@@ -238,9 +235,6 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
         .then((res: any) => {
           console.log("ok");
           getDetail();
-        })
-        .catch((err) => {
-          message.error(err.message);
         });
     } else {
       courseChapter
@@ -248,9 +242,6 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
         .then((res: any) => {
           console.log("ok");
           getDetail();
-        })
-        .catch((err) => {
-          message.error(err.message);
         });
     }
   };
@@ -272,9 +263,6 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
             .then((res: any) => {
               console.log("ok");
               getDetail();
-            })
-            .catch((err) => {
-              message.error(err.message);
             });
         }
       },
@@ -356,146 +344,149 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Drawer
-        title="课时管理"
-        onClose={onCancel}
-        maskClosable={false}
-        open={open}
-        width={634}
-      >
-        <div className={styles["top-content"]}>
-          <p>1.线上课课时调整及时生效，操作不可逆，请谨慎操作。</p>
-          <p>2.课时调整后，已有学习进度会在学员学习时重新计算。</p>
-        </div>
-        <div className="float-left mt-24">
-          <SelectResource
-            defaultKeys={
-              chapterType === 0 ? hours : changeChapterHours(chapterHours)
-            }
-            open={videoVisible}
-            onCancel={() => {
-              setVideoVisible(false);
-            }}
-            onSelected={(arr: any, videos: any) => {
-              if (chapterType === 0) {
-                selectData(arr, videos);
-              } else {
-                selectChapterData(arr, videos);
+      {open ? (
+        <Drawer
+          title="课时管理"
+          onClose={onCancel}
+          maskClosable={false}
+          open={true}
+          width={634}
+        >
+          <div className={styles["top-content"]}>
+            <p>1.线上课课时调整及时生效，操作不可逆，请谨慎操作。</p>
+            <p>2.课时调整后，已有学习进度会在学员学习时重新计算。</p>
+          </div>
+          <div className="float-left mt-24">
+            <SelectResource
+              defaultKeys={
+                chapterType === 0 ? hours : changeChapterHours(chapterHours)
               }
-            }}
-          />
-          <Form
-            form={form}
-            name="hour-update-basic"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            {chapterType === 0 && (
-              <div className="c-flex">
-                <Form.Item>
-                  <div className="ml-42">
-                    <Button
-                      onClick={() => setVideoVisible(true)}
-                      type="primary"
-                    >
-                      添加课时
-                    </Button>
-                  </div>
-                </Form.Item>
-                <div className={styles["hous-box"]}>
-                  {treeData.length === 0 && (
-                    <span className={styles["no-hours"]}>
-                      请点击上方按钮添加课时
-                    </span>
-                  )}
-                  {treeData.length > 0 && (
-                    <TreeHours
-                      data={treeData}
-                      onRemoveItem={(id: number) => {
-                        delHour(id);
-                      }}
-                      onUpdate={(arr: any[]) => {
-                        transHour(arr);
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            )}
-            {chapterType === 1 && (
-              <div className="c-flex">
-                {chapters.length > 0 &&
-                  chapters.map((item: any, index: number) => {
-                    return (
-                      <div
-                        key={item.hours.length + "章节" + index}
-                        className={styles["chapter-item"]}
+              open={videoVisible}
+              onCancel={() => {
+                setVideoVisible(false);
+              }}
+              onSelected={(arr: any, videos: any) => {
+                if (chapterType === 0) {
+                  selectData(arr, videos);
+                } else {
+                  selectChapterData(arr, videos);
+                }
+              }}
+            />
+            <Form
+              form={form}
+              name="hour-update-basic"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+            >
+              {chapterType === 0 && (
+                <div className="c-flex">
+                  <Form.Item>
+                    <div className="ml-42">
+                      <Button
+                        onClick={() => setVideoVisible(true)}
+                        type="primary"
                       >
-                        <div className="d-flex">
-                          <div className={styles["label"]}>
-                            章节{index + 1}：
-                          </div>
-                          <Input
-                            value={item.name}
-                            className={styles["input"]}
-                            onChange={(e) => {
-                              setChapterName(index, e.target.value);
-                            }}
-                            onBlur={(e) => {
-                              saveChapterName(index, e.target.value);
-                            }}
-                            placeholder="请在此处输入章节名称"
-                            allowClear
-                          />
-                          <Button
-                            className="mr-16"
-                            type="primary"
-                            onClick={() => {
-                              setVideoVisible(true);
-                              setAddvideoCurrent(index);
-                            }}
-                          >
-                            添加课时
-                          </Button>
-                          <Button onClick={() => delChapter(index)}>
-                            删除章节
-                          </Button>
-                        </div>
-                        <div className={styles["chapter-hous-box"]}>
-                          {item.hours.length === 0 && (
-                            <span className={styles["no-hours"]}>
-                              请点击上方按钮添加课时
-                            </span>
-                          )}
-                          {item.hours.length > 0 && (
-                            <TreeHours
-                              data={item.hours}
-                              onRemoveItem={(id: number) => {
-                                delChapterHour(index, id);
-                              }}
-                              onUpdate={(arr: any[]) => {
-                                transChapterHour(index, arr);
-                              }}
-                            />
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })}
-                <Form.Item>
-                  <div className="ml-42">
-                    <Button onClick={() => addNewChapter()}>添加章节</Button>
+                        添加课时
+                      </Button>
+                    </div>
+                  </Form.Item>
+                  <div className={styles["hous-box"]}>
+                    {treeData.length === 0 && (
+                      <span className={styles["no-hours"]}>
+                        请点击上方按钮添加课时
+                      </span>
+                    )}
+                    {treeData.length > 0 && (
+                      <TreeHours
+                        data={treeData}
+                        onRemoveItem={(id: number) => {
+                          delHour(id);
+                        }}
+                        onUpdate={(arr: any[]) => {
+                          transHour(arr);
+                        }}
+                      />
+                    )}
                   </div>
-                </Form.Item>
-              </div>
-            )}
-          </Form>
-        </div>
-      </Drawer>
+                </div>
+              )}
+              {chapterType === 1 && (
+                <div className="c-flex">
+                  {chapters.length > 0 &&
+                    chapters.map((item: any, index: number) => {
+                      return (
+                        <div
+                          key={item.hours.length + "章节" + index}
+                          className={styles["chapter-item"]}
+                        >
+                          <div className="d-flex">
+                            <div className={styles["label"]}>
+                              章节{index + 1}：
+                            </div>
+                            <Input
+                              value={item.name}
+                              className={styles["input"]}
+                              onChange={(e) => {
+                                setChapterName(index, e.target.value);
+                              }}
+                              onBlur={(e) => {
+                                saveChapterName(index, e.target.value);
+                              }}
+                              placeholder="请在此处输入章节名称"
+                              allowClear
+                            />
+                            <Button
+                              disabled={!item.name}
+                              className="mr-16"
+                              type="primary"
+                              onClick={() => {
+                                setVideoVisible(true);
+                                setAddvideoCurrent(index);
+                              }}
+                            >
+                              添加课时
+                            </Button>
+                            <Button onClick={() => delChapter(index)}>
+                              删除章节
+                            </Button>
+                          </div>
+                          <div className={styles["chapter-hous-box"]}>
+                            {item.hours.length === 0 && (
+                              <span className={styles["no-hours"]}>
+                                请点击上方按钮添加课时
+                              </span>
+                            )}
+                            {item.hours.length > 0 && (
+                              <TreeHours
+                                data={item.hours}
+                                onRemoveItem={(id: number) => {
+                                  delChapterHour(index, id);
+                                }}
+                                onUpdate={(arr: any[]) => {
+                                  transChapterHour(index, arr);
+                                }}
+                              />
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  <Form.Item>
+                    <div className="ml-42">
+                      <Button onClick={() => addNewChapter()}>添加章节</Button>
+                    </div>
+                  </Form.Item>
+                </div>
+              )}
+            </Form>
+          </div>
+        </Drawer>
+      ) : null}
     </>
   );
 };

src/pages/course/compenents/update.tsx

@@ -7,9 +7,9 @@ import {
   Form,
   TreeSelect,
   Input,
-  Modal,
   message,
   Image,
+  Spin,
 } from "antd";
 import styles from "./update.module.less";
 import { useSelector } from "react-redux";
@@ -28,6 +28,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const courseDefaultThumbs = useSelector(
     (state: any) => state.systemConfig.value.courseDefaultThumbs
   );
@@ -41,18 +42,16 @@ export const CourseUpdate: React.FC<PropInterface> = ({
   const [type, setType] = useState<string>("open");
 
   useEffect(() => {
-    if (open) {
-      getParams();
-      getCategory();
-    }
-  }, [form, open]);
-
-  useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
-    getDetail();
-  }, [id, open]);
+    if (open) {
+      getParams();
+      getCategory();
+      getDetail();
+    }
+  }, [form, id, open]);
 
   const getCategory = () => {
     course.createCourse().then((res: any) => {
@@ -91,6 +90,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
       });
       setType(type);
       setThumb(res.data.course.thumb);
+      setInit(false);
     });
   };
 
@@ -169,209 +169,219 @@ export const CourseUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Drawer
-        title="编辑课程"
-        onClose={onCancel}
-        maskClosable={false}
-        open={open}
-        footer={
-          <Space className="j-r-flex">
-            <Button onClick={() => onCancel()}>取 消</Button>
-            <Button onClick={() => form.submit()} type="primary">
-              确 认
-            </Button>
-          </Space>
-        }
-        width={634}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="update-basic"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Drawer
+          title="编辑课程"
+          onClose={onCancel}
+          maskClosable={false}
+          open={true}
+          footer={
+            <Space className="j-r-flex">
+              <Button onClick={() => onCancel()}>取 消</Button>
+              <Button onClick={() => form.submit()} type="primary">
+                确 认
+              </Button>
+            </Space>
+          }
+          width={634}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="课程分类"
-              name="category_ids"
-              rules={[{ required: true, message: "请选择课程分类!" }]}
+            <Form
+              form={form}
+              name="update-basic"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <TreeSelect
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                allowClear
-                multiple
-                style={{ width: 424 }}
-                treeData={categories}
-                placeholder="请选择课程分类"
-                treeDefaultExpandAll
-              />
-            </Form.Item>
-            <Form.Item
-              label="课程名称"
-              name="title"
-              rules={[{ required: true, message: "请在此处输入课程名称!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 424 }}
-                placeholder="请在此处输入课程名称"
-              />
-            </Form.Item>
-            <Form.Item
-              label="课程属性"
-              name="isRequired"
-              rules={[{ required: true, message: "请选择课程属性!" }]}
-            >
-              <Radio.Group>
-                <Radio value={1}>必修课</Radio>
-                <Radio value={0} style={{ marginLeft: 22 }}>
-                  选修课
-                </Radio>
-              </Radio.Group>
-            </Form.Item>
-            <Form.Item
-              label="指派部门"
-              name="type"
-              rules={[{ required: true, message: "请选择指派部门!" }]}
-            >
-              <Radio.Group onChange={getType}>
-                <Radio value="open">全部部门</Radio>
-                <Radio value="elective">选择部门</Radio>
-              </Radio.Group>
-            </Form.Item>
-
-            {type === "elective" && (
               <Form.Item
-                label="选择部门"
-                name="dep_ids"
-                rules={[
-                  {
-                    required: true,
-                    message: "请选择部门!",
-                  },
-                ]}
+                label="课程分类"
+                name="category_ids"
+                rules={[{ required: true, message: "请选择课程分类!" }]}
               >
                 <TreeSelect
                   showCheckedStrategy={TreeSelect.SHOW_ALL}
-                  style={{ width: 424 }}
-                  treeData={departments}
-                  multiple
                   allowClear
+                  multiple
+                  style={{ width: 424 }}
+                  treeData={categories}
+                  placeholder="请选择课程分类"
                   treeDefaultExpandAll
-                  placeholder="请选择部门"
                 />
               </Form.Item>
-            )}
-
-            <Form.Item
-              label="课程封面"
-              name="thumb"
-              rules={[{ required: true, message: "请上传课程封面!" }]}
-            >
-              <div className="d-flex">
-                <Image
-                  src={thumb}
-                  width={160}
-                  height={120}
-                  style={{ borderRadius: 6 }}
-                  preview={false}
+              <Form.Item
+                label="课程名称"
+                name="title"
+                rules={[{ required: true, message: "请在此处输入课程名称!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 424 }}
+                  placeholder="请在此处输入课程名称"
                 />
-                <div className="c-flex ml-8 flex-1">
-                  <div className="d-flex mb-28">
-                    <div
-                      className={
-                        thumb === defaultThumb1
-                          ? styles["thumb-item-avtive"]
-                          : styles["thumb-item"]
-                      }
-                      onClick={() => {
-                        setThumb(defaultThumb1);
-                        form.setFieldsValue({
-                          thumb: defaultThumb1,
-                        });
-                      }}
-                    >
-                      <Image
-                        src={defaultThumb1}
-                        width={80}
-                        height={60}
-                        style={{ borderRadius: 6 }}
-                        preview={false}
-                      />
+              </Form.Item>
+              <Form.Item
+                label="课程属性"
+                name="isRequired"
+                rules={[{ required: true, message: "请选择课程属性!" }]}
+              >
+                <Radio.Group>
+                  <Radio value={1}>必修课</Radio>
+                  <Radio value={0} style={{ marginLeft: 22 }}>
+                    选修课
+                  </Radio>
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item
+                label="指派部门"
+                name="type"
+                rules={[{ required: true, message: "请选择指派部门!" }]}
+              >
+                <Radio.Group onChange={getType}>
+                  <Radio value="open">全部部门</Radio>
+                  <Radio value="elective">选择部门</Radio>
+                </Radio.Group>
+              </Form.Item>
+
+              {type === "elective" && (
+                <Form.Item
+                  label="选择部门"
+                  name="dep_ids"
+                  rules={[
+                    {
+                      required: true,
+                      message: "请选择部门!",
+                    },
+                  ]}
+                >
+                  <TreeSelect
+                    showCheckedStrategy={TreeSelect.SHOW_ALL}
+                    style={{ width: 424 }}
+                    treeData={departments}
+                    multiple
+                    allowClear
+                    treeDefaultExpandAll
+                    placeholder="请选择部门"
+                  />
+                </Form.Item>
+              )}
+
+              <Form.Item
+                label="课程封面"
+                name="thumb"
+                rules={[{ required: true, message: "请上传课程封面!" }]}
+              >
+                <div className="d-flex">
+                  <Image
+                    src={thumb}
+                    width={160}
+                    height={120}
+                    style={{ borderRadius: 6 }}
+                    preview={false}
+                  />
+                  <div className="c-flex ml-8 flex-1">
+                    <div className="d-flex mb-28">
+                      <div
+                        className={
+                          thumb === defaultThumb1
+                            ? styles["thumb-item-avtive"]
+                            : styles["thumb-item"]
+                        }
+                        onClick={() => {
+                          setThumb(defaultThumb1);
+                          form.setFieldsValue({
+                            thumb: defaultThumb1,
+                          });
+                        }}
+                      >
+                        <Image
+                          src={defaultThumb1}
+                          width={80}
+                          height={60}
+                          style={{ borderRadius: 6 }}
+                          preview={false}
+                        />
+                      </div>
+                      <div
+                        className={
+                          thumb === defaultThumb2
+                            ? styles["thumb-item-avtive"]
+                            : styles["thumb-item"]
+                        }
+                        onClick={() => {
+                          setThumb(defaultThumb2);
+                          form.setFieldsValue({
+                            thumb: defaultThumb2,
+                          });
+                        }}
+                      >
+                        <Image
+                          src={defaultThumb2}
+                          width={80}
+                          height={60}
+                          style={{ borderRadius: 6 }}
+                          preview={false}
+                        />
+                      </div>
+                      <div
+                        className={
+                          thumb === defaultThumb3
+                            ? styles["thumb-item-avtive"]
+                            : styles["thumb-item"]
+                        }
+                        onClick={() => {
+                          setThumb(defaultThumb3);
+                          form.setFieldsValue({
+                            thumb: defaultThumb3,
+                          });
+                        }}
+                      >
+                        <Image
+                          src={defaultThumb3}
+                          width={80}
+                          height={60}
+                          style={{ borderRadius: 6 }}
+                          preview={false}
+                        />
+                      </div>
                     </div>
-                    <div
-                      className={
-                        thumb === defaultThumb2
-                          ? styles["thumb-item-avtive"]
-                          : styles["thumb-item"]
-                      }
-                      onClick={() => {
-                        setThumb(defaultThumb2);
-                        form.setFieldsValue({
-                          thumb: defaultThumb2,
-                        });
-                      }}
-                    >
-                      <Image
-                        src={defaultThumb2}
-                        width={80}
-                        height={60}
-                        style={{ borderRadius: 6 }}
-                        preview={false}
-                      />
+                    <div className="d-flex">
+                      <UploadImageButton
+                        text="更换封面"
+                        onSelected={(url) => {
+                          setThumb(url);
+                          form.setFieldsValue({ thumb: url });
+                        }}
+                      ></UploadImageButton>
+                      <span className="helper-text ml-16">
+                        （推荐尺寸:400x300px）
+                      </span>
                     </div>
-                    <div
-                      className={
-                        thumb === defaultThumb3
-                          ? styles["thumb-item-avtive"]
-                          : styles["thumb-item"]
-                      }
-                      onClick={() => {
-                        setThumb(defaultThumb3);
-                        form.setFieldsValue({
-                          thumb: defaultThumb3,
-                        });
-                      }}
-                    >
-                      <Image
-                        src={defaultThumb3}
-                        width={80}
-                        height={60}
-                        style={{ borderRadius: 6 }}
-                        preview={false}
-                      />
-                    </div>
-                  </div>
-                  <div className="d-flex">
-                    <UploadImageButton
-                      text="更换封面"
-                      onSelected={(url) => {
-                        setThumb(url);
-                        form.setFieldsValue({ thumb: url });
-                      }}
-                    ></UploadImageButton>
-                    <span className="helper-text ml-16">
-                      （推荐尺寸:400x300px）
-                    </span>
                   </div>
                 </div>
-              </div>
-            </Form.Item>
-            <Form.Item label="课程简介" name="short_desc">
-              <Input.TextArea
-                style={{ width: 424, minHeight: 80 }}
-                allowClear
-                placeholder="请输入课程简介（最多200字）"
-                maxLength={200}
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Drawer>
+              </Form.Item>
+              <Form.Item label="课程简介" name="short_desc">
+                <Input.TextArea
+                  style={{ width: 424, minHeight: 80 }}
+                  allowClear
+                  placeholder="请输入课程简介（最多200字）"
+                  maxLength={200}
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Drawer>
+      ) : null}
     </>
   );
 };

src/pages/department/compenents/create.tsx

@@ -105,57 +105,59 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="新建部门"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="所属上级"
-              name="parent_id"
-              rules={[{ required: true, message: "请选择所属上级!" }]}
+      {open ? (
+        <Modal
+          title="新建部门"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          <div className="float-left mt-24">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Cascader
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请选择所属上级"
-                onChange={handleChange}
-                options={departments}
-                changeOnSelect
-                expand-trigger="hover"
-                displayRender={displayRender}
-              />
-            </Form.Item>
-            <Form.Item
-              label="部门名称"
-              name="name"
-              rules={[{ required: true, message: "请输入部门名称!" }]}
-            >
-              <Input
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请输入部门名称"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="所属上级"
+                name="parent_id"
+                rules={[{ required: true, message: "请选择所属上级!" }]}
+              >
+                <Cascader
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请选择所属上级"
+                  onChange={handleChange}
+                  options={departments}
+                  changeOnSelect
+                  expand-trigger="hover"
+                  displayRender={displayRender}
+                />
+              </Form.Item>
+              <Form.Item
+                label="部门名称"
+                name="name"
+                rules={[{ required: true, message: "请输入部门名称!" }]}
+              >
+                <Input
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请输入部门名称"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/department/compenents/update.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Modal, Form, Input, Cascader, message } from "antd";
+import React, { useState, useEffect } from "react";
+import { Modal, Form, Input, Cascader, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { department } from "../../../api/index";
 
@@ -21,12 +21,14 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
   const [parent_id, setParentId] = useState<number>(0);
   const [sort, setSort] = useState<number>(0);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -64,6 +66,7 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
       });
       setParentId(data.parent_id);
       setSort(data.sort);
+      setInit(false);
     });
   };
 
@@ -129,53 +132,63 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="编辑部门"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Modal
+          title="编辑部门"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="所属上级"
-              name="parent_id"
-              rules={[{ required: true, message: "请选择所属上级!" }]}
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Cascader
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请选择所属上级"
-                onChange={handleChange}
-                options={departments}
-                changeOnSelect
-                expand-trigger="hover"
-                displayRender={displayRender}
-              />
-            </Form.Item>
-            <Form.Item
-              label="部门名称"
-              name="name"
-              rules={[{ required: true, message: "请输入部门名称!" }]}
-            >
-              <Input style={{ width: 200 }} placeholder="请输入部门名称" />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="所属上级"
+                name="parent_id"
+                rules={[{ required: true, message: "请选择所属上级!" }]}
+              >
+                <Cascader
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请选择所属上级"
+                  onChange={handleChange}
+                  options={departments}
+                  changeOnSelect
+                  expand-trigger="hover"
+                  displayRender={displayRender}
+                />
+              </Form.Item>
+              <Form.Item
+                label="部门名称"
+                name="name"
+                rules={[{ required: true, message: "请输入部门名称!" }]}
+              >
+                <Input style={{ width: 200 }} placeholder="请输入部门名称" />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/member/compenents/create.tsx

@@ -105,102 +105,104 @@ export const MemberCreate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="添加学员"
-        centered
-        forceRender
-        open={open}
-        width={484}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="member-form float-left mt-24">
-          <Form
-            form={form}
-            name="create-basic"
-            labelCol={{ span: 7 }}
-            wrapperCol={{ span: 17 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="学员头像"
-              labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
-              name="avatar"
-              rules={[{ required: true, message: "请上传学员头像!" }]}
+      {open ? (
+        <Modal
+          title="添加学员"
+          centered
+          forceRender
+          open={true}
+          width={484}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          <div className="member-form float-left mt-24">
+            <Form
+              form={form}
+              name="create-basic"
+              labelCol={{ span: 7 }}
+              wrapperCol={{ span: 17 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <div className="d-flex">
-                {avatar && (
-                  <img className="form-avatar mr-16" src={avatar} alt="" />
-                )}
+              <Form.Item
+                label="学员头像"
+                labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
+                name="avatar"
+                rules={[{ required: true, message: "请上传学员头像!" }]}
+              >
                 <div className="d-flex">
-                  <UploadImageButton
-                    text="更换头像"
-                    onSelected={(url) => {
-                      setAvatar(url);
-                      form.setFieldsValue({ avatar: url });
-                    }}
-                  ></UploadImageButton>
+                  {avatar && (
+                    <img className="form-avatar mr-16" src={avatar} alt="" />
+                  )}
+                  <div className="d-flex">
+                    <UploadImageButton
+                      text="更换头像"
+                      onSelected={(url) => {
+                        setAvatar(url);
+                        form.setFieldsValue({ avatar: url });
+                      }}
+                    ></UploadImageButton>
+                  </div>
                 </div>
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="学员姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入学员姓名!" }]}
-            >
-              <Input style={{ width: 274 }} placeholder="请填写学员姓名" />
-            </Form.Item>
-            <Form.Item
-              label="登录邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入登录邮箱!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 274 }}
-                placeholder="请输入学员登录邮箱"
-              />
-            </Form.Item>
-            <Form.Item
-              label="登录密码"
-              name="password"
-              rules={[{ required: true, message: "请输入登录密码!" }]}
-            >
-              <Input.Password
-                allowClear
-                style={{ width: 274 }}
-                placeholder="请输入登录密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="所属部门"
-              name="dep_ids"
-              rules={[{ required: true, message: "请选择学员所属部门!" }]}
-            >
-              <TreeSelect
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                style={{ width: 274 }}
-                treeData={departments}
-                multiple
-                allowClear
-                treeDefaultExpandAll
-                placeholder="请选择学员所属部门"
-              />
-            </Form.Item>
-            <Form.Item label="身份证号" name="idCard">
-              <Input
-                style={{ width: 274 }}
-                allowClear
-                placeholder="请填写学员身份证号"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              </Form.Item>
+              <Form.Item
+                label="学员姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入学员姓名!" }]}
+              >
+                <Input style={{ width: 274 }} placeholder="请填写学员姓名" />
+              </Form.Item>
+              <Form.Item
+                label="登录邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入登录邮箱!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 274 }}
+                  placeholder="请输入学员登录邮箱"
+                />
+              </Form.Item>
+              <Form.Item
+                label="登录密码"
+                name="password"
+                rules={[{ required: true, message: "请输入登录密码!" }]}
+              >
+                <Input.Password
+                  allowClear
+                  style={{ width: 274 }}
+                  placeholder="请输入登录密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="所属部门"
+                name="dep_ids"
+                rules={[{ required: true, message: "请选择学员所属部门!" }]}
+              >
+                <TreeSelect
+                  showCheckedStrategy={TreeSelect.SHOW_ALL}
+                  style={{ width: 274 }}
+                  treeData={departments}
+                  multiple
+                  allowClear
+                  treeDefaultExpandAll
+                  placeholder="请选择学员所属部门"
+                />
+              </Form.Item>
+              <Form.Item label="身份证号" name="idCard">
+                <Input
+                  style={{ width: 274 }}
+                  allowClear
+                  placeholder="请填写学员身份证号"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/member/compenents/progress.tsx

@@ -210,43 +210,45 @@ export const MemberLearnProgressDialog: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="课时学习进度"
-        centered
-        forceRender
-        open={open}
-        width={1000}
-        onOk={() => onCancel()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-        footer={null}
-      >
-        <div className="d-flex mt-24">
-          <PerButton
-            type="primary"
-            text="重置学习记录"
-            class="c-white"
-            icon={null}
-            p="user-learn-destroy"
-            onClick={() => {
-              clearProgress();
-            }}
-            disabled={null}
-          />
-        </div>
-        <div
-          className="d-flex mt-24"
-          style={{ maxHeight: 800, overflowY: "auto" }}
+      {open ? (
+        <Modal
+          title="课时学习进度"
+          centered
+          forceRender
+          open={true}
+          width={1000}
+          onOk={() => onCancel()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+          footer={null}
         >
-          <Table
-            columns={column}
-            dataSource={list}
-            loading={loading}
-            rowKey={(record) => record.id}
-            pagination={false}
-          />
-        </div>
-      </Modal>
+          <div className="d-flex mt-24">
+            <PerButton
+              type="primary"
+              text="重置学习记录"
+              class="c-white"
+              icon={null}
+              p="user-learn-destroy"
+              onClick={() => {
+                clearProgress();
+              }}
+              disabled={null}
+            />
+          </div>
+          <div
+            className="d-flex mt-24"
+            style={{ maxHeight: 800, overflowY: "auto" }}
+          >
+            <Table
+              columns={column}
+              dataSource={list}
+              loading={loading}
+              rowKey={(record) => record.id}
+              pagination={false}
+            />
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/member/compenents/update.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, TreeSelect, Input, message } from "antd";
+import { Modal, Form, TreeSelect, Input, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { useSelector } from "react-redux";
 import { user, department } from "../../../api/index";
@@ -24,6 +24,7 @@ export const MemberUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
   const memberDefaultAvatar = useSelector(
@@ -32,20 +33,18 @@ export const MemberUpdate: React.FC<PropInterface> = ({
   const [avatar, setAvatar] = useState<string>(memberDefaultAvatar);
 
   useEffect(() => {
+    setInit(true);
     if (id == 0) {
       return;
     }
-    getDetail();
-  }, [id, open]);
-
-  useEffect(() => {
     if (open) {
       getParams();
       form.setFieldsValue({
         password: "",
       });
+      getDetail();
     }
-  }, [form, open]);
+  }, [form, id, open]);
 
   const getParams = () => {
     if (id === 0) {
@@ -71,6 +70,7 @@ export const MemberUpdate: React.FC<PropInterface> = ({
         idCard: user.id_card,
         dep_ids: res.data.dep_ids,
       });
+      setInit(false);
     });
   };
 
@@ -134,102 +134,112 @@ export const MemberUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="编辑学员"
-        centered
-        forceRender
-        open={open}
-        width={484}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="update-basic"
-            labelCol={{ span: 7 }}
-            wrapperCol={{ span: 17 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Modal
+          title="编辑学员"
+          centered
+          forceRender
+          open={true}
+          width={484}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="学员头像"
-              labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
-              name="avatar"
-              rules={[{ required: true, message: "请上传学员头像!" }]}
+            <Form
+              form={form}
+              name="update-basic"
+              labelCol={{ span: 7 }}
+              wrapperCol={{ span: 17 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <div className="d-flex">
-                {avatar && (
-                  <img className="form-avatar mr-16" src={avatar} alt="" />
-                )}
+              <Form.Item
+                label="学员头像"
+                labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
+                name="avatar"
+                rules={[{ required: true, message: "请上传学员头像!" }]}
+              >
                 <div className="d-flex">
-                  <UploadImageButton
-                    text="更换头像"
-                    onSelected={(url) => {
-                      setAvatar(url);
-                      form.setFieldsValue({ avatar: url });
-                    }}
-                  ></UploadImageButton>
+                  {avatar && (
+                    <img className="form-avatar mr-16" src={avatar} alt="" />
+                  )}
+                  <div className="d-flex">
+                    <UploadImageButton
+                      text="更换头像"
+                      onSelected={(url) => {
+                        setAvatar(url);
+                        form.setFieldsValue({ avatar: url });
+                      }}
+                    ></UploadImageButton>
+                  </div>
                 </div>
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="学员姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入学员姓名!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 274 }}
-                placeholder="请填写学员姓名"
-              />
-            </Form.Item>
-            <Form.Item
-              label="登录邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入登录邮箱!" }]}
-            >
-              <Input
-                style={{ width: 274 }}
-                allowClear
-                placeholder="请输入学员登录邮箱"
-              />
-            </Form.Item>
-            <Form.Item label="登录密码" name="password">
-              <Input.Password
-                style={{ width: 274 }}
-                allowClear
-                placeholder="请输入登录密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="所属部门"
-              name="dep_ids"
-              rules={[{ required: true, message: "请选择学员所属部门!" }]}
-            >
-              <TreeSelect
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                style={{ width: 274 }}
-                treeData={departments}
-                multiple
-                allowClear
-                treeDefaultExpandAll
-                placeholder="请选择学员所属部门"
-              />
-            </Form.Item>
-            <Form.Item label="身份证号" name="idCard">
-              <Input
-                allowClear
-                style={{ width: 274 }}
-                placeholder="请填写学员身份证号"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              </Form.Item>
+              <Form.Item
+                label="学员姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入学员姓名!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 274 }}
+                  placeholder="请填写学员姓名"
+                />
+              </Form.Item>
+              <Form.Item
+                label="登录邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入登录邮箱!" }]}
+              >
+                <Input
+                  style={{ width: 274 }}
+                  allowClear
+                  placeholder="请输入学员登录邮箱"
+                />
+              </Form.Item>
+              <Form.Item label="登录密码" name="password">
+                <Input.Password
+                  style={{ width: 274 }}
+                  allowClear
+                  placeholder="请输入登录密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="所属部门"
+                name="dep_ids"
+                rules={[{ required: true, message: "请选择学员所属部门!" }]}
+              >
+                <TreeSelect
+                  showCheckedStrategy={TreeSelect.SHOW_ALL}
+                  style={{ width: 274 }}
+                  treeData={departments}
+                  multiple
+                  allowClear
+                  treeDefaultExpandAll
+                  placeholder="请选择学员所属部门"
+                />
+              </Form.Item>
+              <Form.Item label="身份证号" name="idCard">
+                <Input
+                  allowClear
+                  style={{ width: 274 }}
+                  placeholder="请填写学员身份证号"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/member/index.tsx

@@ -71,6 +71,7 @@ const MemberPage = () => {
     {
       title: "学员",
       dataIndex: "name",
+      width: 300,
       render: (_, record: any) => (
         <>
           <Image
@@ -104,10 +105,13 @@ const MemberPage = () => {
     },
     {
       title: "登录邮箱",
+      width: 200,
       dataIndex: "email",
+      render: (email: string) => <span>{email}</span>,
     },
     {
       title: "加入时间",
+      width: 200,
       dataIndex: "created_at",
       render: (text: string) => <span>{dateFormat(text)}</span>,
     },

src/pages/resource/courseware/compenents/update-dialog/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, message, TreeSelect } from "antd";
+import { Modal, Form, Input, message, TreeSelect, Spin } from "antd";
 import { resource, resourceCategory } from "../../../../../api/index";
 
 interface PropInterface {
@@ -17,9 +17,11 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
+  const [init, setInit] = useState(true);
   const [categories, setCategories] = useState<any>([]);
 
   useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
@@ -27,7 +29,7 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
       getCategory();
       getDetail();
     }
-  }, [id, open]);
+  }, [form, id, open]);
 
   const getCategory = () => {
     resourceCategory.resourceCategoryList().then((res: any) => {
@@ -46,6 +48,7 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
         name: data.name,
         category_id: res.data.category_ids,
       });
+      setInit(false);
     });
   };
 
@@ -96,55 +99,65 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="编辑课件"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="videos-update"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Modal
+          title="编辑课件"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="课件分类"
-              name="category_id"
-              rules={[{ required: true, message: "请选择课件分类!" }]}
+            <Form
+              form={form}
+              name="videos-update"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <TreeSelect
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                allowClear
-                style={{ width: 200 }}
-                treeData={categories}
-                placeholder="课件分类"
-                treeDefaultExpandAll
-              />
-            </Form.Item>
-            <Form.Item
-              label="课件名称"
-              name="name"
-              rules={[{ required: true, message: "请输入课件名称!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入课件名称"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="课件分类"
+                name="category_id"
+                rules={[{ required: true, message: "请选择课件分类!" }]}
+              >
+                <TreeSelect
+                  showCheckedStrategy={TreeSelect.SHOW_ALL}
+                  allowClear
+                  style={{ width: 200 }}
+                  treeData={categories}
+                  placeholder="课件分类"
+                  treeDefaultExpandAll
+                />
+              </Form.Item>
+              <Form.Item
+                label="课件名称"
+                name="name"
+                rules={[{ required: true, message: "请输入课件名称!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入课件名称"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/resource/resource-category/compenents/create.tsx

@@ -105,57 +105,59 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="新建分类"
-        centered
-        forceRender
-        maskClosable={false}
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="所属上级"
-              name="parent_id"
-              rules={[{ required: true, message: "请选择所属上级!" }]}
+      {open ? (
+        <Modal
+          title="新建分类"
+          centered
+          forceRender
+          maskClosable={false}
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+        >
+          <div className="float-left mt-24">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Cascader
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请选择所属上级"
-                onChange={handleChange}
-                options={categories}
-                changeOnSelect
-                expand-trigger="hover"
-                displayRender={displayRender}
-              />
-            </Form.Item>
-            <Form.Item
-              label="分类名称"
-              name="name"
-              rules={[{ required: true, message: "请输入分类名称!" }]}
-            >
-              <Input
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请输入分类名称"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="所属上级"
+                name="parent_id"
+                rules={[{ required: true, message: "请选择所属上级!" }]}
+              >
+                <Cascader
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请选择所属上级"
+                  onChange={handleChange}
+                  options={categories}
+                  changeOnSelect
+                  expand-trigger="hover"
+                  displayRender={displayRender}
+                />
+              </Form.Item>
+              <Form.Item
+                label="分类名称"
+                name="name"
+                rules={[{ required: true, message: "请输入分类名称!" }]}
+              >
+                <Input
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请输入分类名称"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/resource/resource-category/compenents/update.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Modal, Form, Input, Cascader, message } from "antd";
+import React, { useState, useEffect } from "react";
+import { Modal, Form, Input, Cascader, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { resourceCategory } from "../../../../api/index";
 
@@ -21,12 +21,14 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [categories, setCategories] = useState<any>([]);
   const [parent_id, setParentId] = useState<number>(0);
   const [sort, setSort] = useState<number>(0);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -64,6 +66,7 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
       });
       setParentId(data.parent_id);
       setSort(data.sort);
+      setInit(false);
     });
   };
 
@@ -127,57 +130,67 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="编辑分类"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Modal
+          title="编辑分类"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="所属上级"
-              name="parent_id"
-              rules={[{ required: true, message: "请选择所属上级!" }]}
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Cascader
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请选择所属上级"
-                onChange={handleChange}
-                options={categories}
-                changeOnSelect
-                expand-trigger="hover"
-                displayRender={displayRender}
-              />
-            </Form.Item>
-            <Form.Item
-              label="分类名称"
-              name="name"
-              rules={[{ required: true, message: "请输入分类名称!" }]}
-            >
-              <Input
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请输入分类名称"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="所属上级"
+                name="parent_id"
+                rules={[{ required: true, message: "请选择所属上级!" }]}
+              >
+                <Cascader
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请选择所属上级"
+                  onChange={handleChange}
+                  options={categories}
+                  changeOnSelect
+                  expand-trigger="hover"
+                  displayRender={displayRender}
+                />
+              </Form.Item>
+              <Form.Item
+                label="分类名称"
+                name="name"
+                rules={[{ required: true, message: "请输入分类名称!" }]}
+              >
+                <Input
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请输入分类名称"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/resource/videos/compenents/update-dialog/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, message, TreeSelect } from "antd";
+import { Modal, Form, Input, message, TreeSelect, Spin } from "antd";
 import { resource, resourceCategory } from "../../../../../api/index";
 
 interface PropInterface {
@@ -17,9 +17,11 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
+  const [init, setInit] = useState(true);
   const [categories, setCategories] = useState<any>([]);
 
   useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
@@ -27,7 +29,7 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
       getCategory();
       getDetail();
     }
-  }, [id, open]);
+  }, [form, id, open]);
 
   const getCategory = () => {
     resourceCategory.resourceCategoryList().then((res: any) => {
@@ -46,6 +48,7 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
         name: data.name,
         category_id: res.data.category_ids,
       });
+      setInit(false);
     });
   };
 
@@ -89,55 +92,65 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="编辑视频"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="videos-update"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Modal
+          title="编辑视频"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="视频分类"
-              name="category_id"
-              rules={[{ required: true, message: "请选择视频分类!" }]}
+            <Form
+              form={form}
+              name="videos-update"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <TreeSelect
-                showCheckedStrategy={TreeSelect.SHOW_ALL}
-                allowClear
-                style={{ width: 200 }}
-                treeData={categories}
-                placeholder="视频分类"
-                treeDefaultExpandAll
-              />
-            </Form.Item>
-            <Form.Item
-              label="视频名称"
-              name="name"
-              rules={[{ required: true, message: "请输入视频名称!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入视频名称"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="视频分类"
+                name="category_id"
+                rules={[{ required: true, message: "请选择视频分类!" }]}
+              >
+                <TreeSelect
+                  showCheckedStrategy={TreeSelect.SHOW_ALL}
+                  allowClear
+                  style={{ width: 200 }}
+                  treeData={categories}
+                  placeholder="视频分类"
+                  treeDefaultExpandAll
+                />
+              </Form.Item>
+              <Form.Item
+                label="视频名称"
+                name="name"
+                rules={[{ required: true, message: "请输入视频名称!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入视频名称"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/system/administrator/compenents/create.tsx

@@ -85,86 +85,88 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="添加管理员"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="选择角色"
-              name="roleIds"
-              rules={[{ required: true, message: "请选择角色!" }]}
+      {open ? (
+        <Modal
+          title="添加管理员"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          <div className="float-left mt-24">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Select
-                style={{ width: 200 }}
-                mode="multiple"
-                allowClear
-                placeholder="请选择角色"
-                onChange={handleChange}
-                options={roles}
-              />
-            </Form.Item>
-            <Form.Item
-              label="管理员姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入管理员姓名!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入管理员姓名"
-              />
-            </Form.Item>
-            <Form.Item
-              label="邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入学员邮箱!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入学员邮箱"
-              />
-            </Form.Item>
-            <Form.Item
-              label="密码"
-              name="password"
-              rules={[{ required: true, message: "请输入登录密码!" }]}
-            >
-              <Input.Password
-                autoComplete="new-password"
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入登录密码"
-              />
-            </Form.Item>
+              <Form.Item
+                label="选择角色"
+                name="roleIds"
+                rules={[{ required: true, message: "请选择角色!" }]}
+              >
+                <Select
+                  style={{ width: 200 }}
+                  mode="multiple"
+                  allowClear
+                  placeholder="请选择角色"
+                  onChange={handleChange}
+                  options={roles}
+                />
+              </Form.Item>
+              <Form.Item
+                label="管理员姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入管理员姓名!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入管理员姓名"
+                />
+              </Form.Item>
+              <Form.Item
+                label="邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入学员邮箱!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入学员邮箱"
+                />
+              </Form.Item>
+              <Form.Item
+                label="密码"
+                name="password"
+                rules={[{ required: true, message: "请输入登录密码!" }]}
+              >
+                <Input.Password
+                  autoComplete="new-password"
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入登录密码"
+                />
+              </Form.Item>
 
-            <Form.Item
-              label="禁止登录"
-              name="is_ban_login"
-              valuePropName="checked"
-            >
-              <Switch onChange={onChange} />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="禁止登录"
+                name="is_ban_login"
+                valuePropName="checked"
+              >
+                <Switch onChange={onChange} />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/system/administrator/compenents/update.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, Select, Switch, message } from "antd";
+import { Modal, Form, Input, Select, Switch, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { adminUser } from "../../../../api/index";
 
@@ -17,6 +17,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [roles, setRoles] = useState<any>([]);
 
@@ -27,6 +28,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
   }, [refresh, open]);
 
   useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
@@ -58,6 +60,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
         is_ban_login: user.is_ban_login,
         roleIds: res.data.role_ids,
       });
+      setInit(false);
     });
   };
 
@@ -93,81 +96,91 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="编辑管理人员"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Modal
+          title="编辑管理人员"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="选择角色"
-              name="roleIds"
-              rules={[{ required: true, message: "请选择角色!" }]}
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Select
-                style={{ width: 200 }}
-                mode="multiple"
-                allowClear
-                placeholder="请选择角色"
-                onChange={handleChange}
-                options={roles}
-              />
-            </Form.Item>
-            <Form.Item
-              label="管理员姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入管理员姓名!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入管理员姓名"
-              />
-            </Form.Item>
-            <Form.Item
-              label="邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入学员邮箱!" }]}
-            >
-              <Input
-                allowClear
-                style={{ width: 200 }}
-                placeholder="请输入学员邮箱"
-              />
-            </Form.Item>
-            <Form.Item label="密码" name="password">
-              <Input.Password
-                autoComplete="new-password"
-                style={{ width: 200 }}
-                allowClear
-                placeholder="请输入登录密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="禁止登录"
-              name="is_ban_login"
-              valuePropName="checked"
-            >
-              <Switch onChange={onChange} />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="选择角色"
+                name="roleIds"
+                rules={[{ required: true, message: "请选择角色!" }]}
+              >
+                <Select
+                  style={{ width: 200 }}
+                  mode="multiple"
+                  allowClear
+                  placeholder="请选择角色"
+                  onChange={handleChange}
+                  options={roles}
+                />
+              </Form.Item>
+              <Form.Item
+                label="管理员姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入管理员姓名!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入管理员姓名"
+                />
+              </Form.Item>
+              <Form.Item
+                label="邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入学员邮箱!" }]}
+              >
+                <Input
+                  allowClear
+                  style={{ width: 200 }}
+                  placeholder="请输入学员邮箱"
+                />
+              </Form.Item>
+              <Form.Item label="密码" name="password">
+                <Input.Password
+                  autoComplete="new-password"
+                  style={{ width: 200 }}
+                  allowClear
+                  placeholder="请输入登录密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="禁止登录"
+                name="is_ban_login"
+                valuePropName="checked"
+              >
+                <Switch onChange={onChange} />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/system/adminlog/compenents/detail-dialog.tsx

@@ -25,33 +25,35 @@ export const AdminLogDetailDialog: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="日志详情"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => onCancel()}
-        onCancel={() => onCancel()}
-        footer={null}
-        maskClosable={false}
-      >
-        <div className="mt-24">
-          <Form
-            form={form}
-            name="adminlog-detail"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item label="Param">{param}</Form.Item>
-            <Form.Item label="Result">{result}</Form.Item>
-          </Form>
-        </div>
-      </Modal>
+      {open ? (
+        <Modal
+          title="日志详情"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => onCancel()}
+          onCancel={() => onCancel()}
+          footer={null}
+          maskClosable={false}
+        >
+          <div className="mt-24">
+            <Form
+              form={form}
+              name="adminlog-detail"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+            >
+              <Form.Item label="Param">{param}</Form.Item>
+              <Form.Item label="Result">{result}</Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/pages/system/adminroles/compenents/create.tsx

@@ -151,68 +151,70 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Drawer
-        title="新建角色"
-        onClose={onCancel}
-        maskClosable={false}
-        open={open}
-        footer={
-          <Space className="j-r-flex">
-            <Button onClick={() => onCancel()}>取 消</Button>
-            <Button onClick={() => form.submit()} type="primary">
-              确 认
-            </Button>
-          </Space>
-        }
-        width={634}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="adminroles-create"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="角色名称"
-              name="name"
-              rules={[{ required: true, message: "请输入角色名称!" }]}
+      {open ? (
+        <Drawer
+          title="新建角色"
+          onClose={onCancel}
+          maskClosable={false}
+          open={true}
+          footer={
+            <Space className="j-r-flex">
+              <Button onClick={() => onCancel()}>取 消</Button>
+              <Button onClick={() => form.submit()} type="primary">
+                确 认
+              </Button>
+            </Space>
+          }
+          width={634}
+        >
+          <div className="float-left mt-24">
+            <Form
+              form={form}
+              name="adminroles-create"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input
-                style={{ width: 424 }}
-                placeholder="请在此处输入角色名称"
-                allowClear
-              />
-            </Form.Item>
-            <Form.Item label="操作权限" name="action_ids">
-              <TreeSelect
-                listHeight={600}
-                style={{ width: 424 }}
-                treeCheckable={true}
-                placeholder="请选择权限"
-                multiple
-                allowClear
-                treeData={actions}
-              />
-            </Form.Item>
-            <Form.Item label="数据权限" name="permission_ids">
-              <TreeSelect
-                listHeight={600}
-                style={{ width: 424 }}
-                treeCheckable={true}
-                placeholder="请选择权限"
-                multiple
-                allowClear
-                treeData={permissions}
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Drawer>
+              <Form.Item
+                label="角色名称"
+                name="name"
+                rules={[{ required: true, message: "请输入角色名称!" }]}
+              >
+                <Input
+                  style={{ width: 424 }}
+                  placeholder="请在此处输入角色名称"
+                  allowClear
+                />
+              </Form.Item>
+              <Form.Item label="操作权限" name="action_ids">
+                <TreeSelect
+                  listHeight={600}
+                  style={{ width: 424 }}
+                  treeCheckable={true}
+                  placeholder="请选择权限"
+                  multiple
+                  allowClear
+                  treeData={actions}
+                />
+              </Form.Item>
+              <Form.Item label="数据权限" name="permission_ids">
+                <TreeSelect
+                  listHeight={600}
+                  style={{ width: 424 }}
+                  treeCheckable={true}
+                  placeholder="请选择权限"
+                  multiple
+                  allowClear
+                  treeData={permissions}
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Drawer>
+      ) : null}
     </>
   );
 };

src/pages/system/adminroles/compenents/update.tsx

@@ -1,5 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { Drawer, TreeSelect, Space, Button, Form, Input, message } from "antd";
+import {
+  Drawer,
+  TreeSelect,
+  Space,
+  Button,
+  Form,
+  Input,
+  message,
+  Spin,
+} from "antd";
 import styles from "./update.module.less";
 import { adminRole } from "../../../../api/index";
 
@@ -21,6 +30,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [permissions, setPermissions] = useState<any>([]);
   const [actions, setActions] = useState<any>([]);
@@ -32,6 +42,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
   }, [open]);
 
   useEffect(() => {
+    setInit(true);
     if (id === undefined) {
       return;
     }
@@ -136,6 +147,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
         permission_ids: res.data.perm_data,
         action_ids: res.data.perm_action,
       });
+      setInit(false);
     });
   };
 
@@ -165,68 +177,78 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Drawer
-        title="编辑角色权限"
-        onClose={onCancel}
-        maskClosable={false}
-        open={open}
-        footer={
-          <Space className="j-r-flex">
-            <Button onClick={() => onCancel()}>取 消</Button>
-            <Button onClick={() => form.submit()} type="primary">
-              确 认
-            </Button>
-          </Space>
-        }
-        width={634}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="adminroles-update"
-            labelCol={{ span: 5 }}
-            wrapperCol={{ span: 19 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      {open ? (
+        <Drawer
+          title="编辑角色权限"
+          onClose={onCancel}
+          maskClosable={false}
+          open={true}
+          footer={
+            <Space className="j-r-flex">
+              <Button onClick={() => onCancel()}>取 消</Button>
+              <Button onClick={() => form.submit()} type="primary">
+                确 认
+              </Button>
+            </Space>
+          }
+          width={634}
+        >
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
           >
-            <Form.Item
-              label="角色名"
-              name="name"
-              rules={[{ required: true, message: "请输入角色名!" }]}
+            <Form
+              form={form}
+              name="adminroles-update"
+              labelCol={{ span: 5 }}
+              wrapperCol={{ span: 19 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input
-                style={{ width: 424 }}
-                allowClear
-                placeholder="请输入角色名"
-              />
-            </Form.Item>
-            <Form.Item label="操作权限" name="action_ids">
-              <TreeSelect
-                style={{ width: 424 }}
-                listHeight={600}
-                treeCheckable={true}
-                placeholder="请选择权限"
-                multiple
-                allowClear
-                treeData={actions}
-              />
-            </Form.Item>
-            <Form.Item label="数据权限" name="permission_ids">
-              <TreeSelect
-                style={{ width: 424 }}
-                listHeight={600}
-                treeCheckable={true}
-                placeholder="请选择权限"
-                multiple
-                allowClear
-                treeData={permissions}
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Drawer>
+              <Form.Item
+                label="角色名"
+                name="name"
+                rules={[{ required: true, message: "请输入角色名!" }]}
+              >
+                <Input
+                  style={{ width: 424 }}
+                  allowClear
+                  placeholder="请输入角色名"
+                />
+              </Form.Item>
+              <Form.Item label="操作权限" name="action_ids">
+                <TreeSelect
+                  style={{ width: 424 }}
+                  listHeight={600}
+                  treeCheckable={true}
+                  placeholder="请选择权限"
+                  multiple
+                  allowClear
+                  treeData={actions}
+                />
+              </Form.Item>
+              <Form.Item label="数据权限" name="permission_ids">
+                <TreeSelect
+                  style={{ width: 424 }}
+                  listHeight={600}
+                  treeCheckable={true}
+                  placeholder="请选择权限"
+                  multiple
+                  allowClear
+                  treeData={permissions}
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Drawer>
+      ) : null}
     </>
   );
 };