修改优化

src/components/layout/layoutTop.tsx

@@ -65,6 +65,7 @@ export default defineComponent({
 
     const oncheckEditStatus = (callBack: any) => {
       showHeadFlag.value = false;
+      userInfoStatus.value = false;
       if (prepareStore.getIsEditResource) {
         eventGlobal.emit('pageBeforeLeave', () => callBack());
       } else {

src/custom-plugins/guide-page/home-guide.tsx

@@ -1,377 +1,379 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
-export default defineComponent({
-  name: 'coai-guide',
-  emits: ['close'],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('home1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-400 / 2),
-            left: px2vw(-734 / 2),
-            width: px2vw(734),
-            height: px2vw(295)
-          },
-          btnsStyle: {
-            bottom: px2vw(240),
-            left: px2vw(-128)
-          },
-          boxStyle: {
-            border: 'none',
-            width: 0,
-            height: 0,
-            backgroundColor: 'transparent',
-            position: 'fixed',
-            top: `50%`,
-            left: '50%'
-            // visibility: 'hidden'
-          },
-          eleRectPadding: {
-            left: 0,
-            top: 0,
-            width: 0,
-            height: 0
-          }
-        },
-        {
-          ele: '',
-          img: getImage('home2.png'),
-          imgStyle: {
-            top: '100%',
-            left: px2vw(-290),
-            width: px2vw(401),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: '30px',
-            left: px2vw(-130)
-          },
-          boxStyle: {},
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('home6.png'),
-          imgStyle: {
-            top: '100%',
-            left: px2vw(-310),
-            width: px2vw(477),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: '30px',
-            left: px2vw(-150)
-          },
-          boxStyle: {},
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('home4.png'),
-          imgStyle: {
-            top: '100%',
-            left: px2vw(-310),
-            width: px2vw(477),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: '30px',
-            left: px2vw(-150)
-          },
-          boxStyle: {},
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('home3.png'),
-          handStyle: {
-            top: '-1.39rem',
-            left: '0.17rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            width: px2vw(454),
-            height: px2vw(227),
-            left: px2vw(-150)
-          },
-          btnsStyle: {
-            bottom: '30px',
-            left: px2vw(8)
-          },
-          boxStyle: {
-            borderRadius: '30px'
-          },
-          eleRectPadding: {
-            left: 7,
-            top: 9,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('home5.png'),
-          handStyle: {
-            top: '-1.39rem',
-            left: '0.17rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: px2vw(-194),
-            width: px2vw(621),
-            height: px2vw(223),
-            left: px2vw(-624)
-          },
-          btnsStyle: {
-            top: px2vw(-42),
-            left: px2vw(-460)
-          },
-          boxStyle: {},
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        }
-      ],
-      step: 0
-    });
-    const tipShow = ref(false);
-    // const res =  setGuidance({guideTag:'teacher-guideInfo',guideValue:'{}'})
-    const guideInfo = ref({} as any);
-    const getAllGuidance = async () => {
-      try {
-        const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
-        if (res.data) {
-          guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-        } else {
-          guideInfo.value = {};
-        }
-
-        if (guideInfo.value && guideInfo.value.homeGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(
-        data.step === data.steps.length - 1
-          ? 'moveNPopover'
-          : `home-${data.step}`
-      )!;
-      // console.log(`coai-${data.step}`, data.steps[data.step].eleRectPadding);
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-      } else {
-        handleNext();
-      }
-    };
-
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== 'Home') return;
-        if (!guideInfo.value) {
-          guideInfo.value = { homeGuide: false };
-        } else {
-          guideInfo.value.homeGuide = false;
-        }
-        try {
-          await setGuidance({
-            guideTag: 'teacher-guideInfo',
-            guideValue: JSON.stringify(guideInfo.value)
-          });
-        } catch (e) {
-          console.log(e);
-        }
-        data.step = 0;
-        getStepELe();
-        tipShow.value = true;
-      } catch {
-        //
-      }
-    };
-    onMounted(() => {
-      getStepELe();
-      window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= data.steps.length - 1) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { homeGuide: true };
-      } else {
-        guideInfo.value.homeGuide = true;
-      }
-      try {
-        const res = await setGuidance({
-          guideTag: 'teacher-guideInfo',
-          guideValue: JSON.stringify(guideInfo.value)
-        });
-      } catch (e) {
-        console.log(e);
-      }
-      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
-                id={`modeType-${data.step}`}>
-                {data.steps.map((item: any, index) => (
-                  <div
-                    onClick={(e: Event) => e.stopPropagation()}
-                    class={styles.item}
-                    style={
-                      item.type == 'bottom'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `-${item.imgStyle?.height}`
-                          }
-                        : {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${data.box?.height}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          {data.step !== 0
-                            ? `下一步 ${data.step}/${data.steps.length - 1}`
-                            : '开始体验'}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
+export default defineComponent({
+  name: 'coai-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('home1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-400 / 2),
+            left: px2vw(-734 / 2),
+            width: px2vw(734),
+            height: px2vw(295)
+          },
+          btnsStyle: {
+            bottom: px2vw(240),
+            left: px2vw(-128)
+          },
+          boxStyle: {
+            border: 'none',
+            width: 0,
+            height: 0,
+            backgroundColor: 'transparent',
+            position: 'fixed',
+            top: `50%`,
+            left: '50%'
+            // visibility: 'hidden'
+          },
+          eleRectPadding: {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home2.png'),
+          imgStyle: {
+            top: '100%',
+            left: px2vw(-290),
+            width: px2vw(401),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(-130)
+          },
+          boxStyle: {},
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home6.png'),
+          imgStyle: {
+            top: '100%',
+            left: px2vw(-310),
+            width: px2vw(477),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(-150)
+          },
+          boxStyle: {},
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home4.png'),
+          imgStyle: {
+            top: '100%',
+            left: px2vw(-310),
+            width: px2vw(477),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(-150)
+          },
+          boxStyle: {},
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home3.png'),
+          handStyle: {
+            top: '-1.39rem',
+            left: '0.17rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            width: px2vw(454),
+            height: px2vw(227),
+            left: px2vw(-150)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(8)
+          },
+          boxStyle: {
+            borderRadius: '30px'
+          },
+          eleRectPadding: {
+            left: 7,
+            top: 9,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home5.png'),
+          handStyle: {
+            top: '-1.39rem',
+            left: '0.17rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: px2vw(-194),
+            width: px2vw(621),
+            height: px2vw(223),
+            left: px2vw(-624)
+          },
+          btnsStyle: {
+            top: px2vw(-42),
+            left: px2vw(-460)
+          },
+          boxStyle: {},
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        }
+      ],
+      step: 0
+    });
+    const tipShow = ref(false);
+    // const res =  setGuidance({guideTag:'teacher-guideInfo',guideValue:'{}'})
+    const guideInfo = ref({} as any);
+    const getAllGuidance = async () => {
+      try {
+        const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
+        if (res.data) {
+          guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        } else {
+          guideInfo.value = {};
+        }
+
+        if (guideInfo.value && guideInfo.value.homeGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(
+        data.step === data.steps.length - 1
+          ? 'moveNPopover'
+          : `home-${data.step}`
+      )!;
+      // console.log(`coai-${data.step}`, data.steps[data.step].eleRectPadding);
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+
+        console.log(eleRect, height);
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+      } else {
+        handleNext();
+      }
+    };
+
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'Home') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { homeGuide: false };
+        } else {
+          guideInfo.value.homeGuide = false;
+        }
+        try {
+          await setGuidance({
+            guideTag: 'teacher-guideInfo',
+            guideValue: JSON.stringify(guideInfo.value)
+          });
+        } catch (e) {
+          console.log(e);
+        }
+        data.step = 0;
+        getStepELe();
+        tipShow.value = true;
+      } catch {
+        //
+      }
+    };
+    onMounted(() => {
+      getStepELe();
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= data.steps.length - 1) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { homeGuide: true };
+      } else {
+        guideInfo.value.homeGuide = true;
+      }
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
+                id={`modeType-${data.step}`}>
+                {data.steps.map((item: any, index) => (
+                  <div
+                    onClick={(e: Event) => e.stopPropagation()}
+                    class={styles.item}
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          {data.step !== 0
+                            ? `下一步 ${data.step}/${data.steps.length - 1}`
+                            : '开始体验'}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

src/views/natural-resources/model/add-teaching/index.module.less

@@ -1,155 +1,158 @@
-.container {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  :global {
-
-    .n-base-selection--error-status,
-    .n-input--error-status {
-      animation: errorRotate 0.3s ease 3;
-    }
-  }
-}
-
-.closeBtn {
-  position: absolute;
-  top: -15px;
-  right: -10px;
-
-  img {
-    width: 44px;
-    height: 44px;
-  }
-}
-
-.topForms {
-  padding: 40px 40px 0;
-  display: flex;
-  align-items: center;
-
-  :global {
-    .n-upload {
-      width: 210px !important;
-    }
-
-    .n-upload-trigger.n-upload-trigger--image-card {
-      width: 210px !important;
-      height: 297px !important;
-    }
-
-    .n-upload-file.n-upload-file--image-card-type {
-      width: 210px !important;
-      height: 297px !important;
-      border-radius: 12px;
-    }
-
-    .n-upload-dragger {
-      border-radius: 12px;
-      background: #F9FAFD;
-      border: 2px solid #DCE2F1;
-
-      &:hover {
-        border: 2px solid #198CFE;
-      }
-    }
-  }
-
-  .uploadContent {
-    .iconUpload {
-      width: 60px;
-      height: 60px;
-    }
-
-    p {
-      padding-top: 32px;
-      font-size: 18px;
-      color: #9EADD9;
-      line-height: 25px;
-    }
-  }
-
-  .topFormInput {
-    margin-left: 60px;
-  }
-}
-
-.menuTitle {
-  display: flex;
-  align-items: center;
-  padding: 20px 40px;
-  font-size: 18px;
-  font-weight: 600;
-  color: #131415;
-  // border-bottom: 1px solid #EDEEF3;
-
-  .iconMenu {
-    margin-right: 8px;
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.lessonItem {
-  border-radius: 20px;
-  background: #F7F9FF;
-  position: relative;
-  margin: 0 40px 24px;
-  padding: 24px 26px 0;
-  --n-border: 1px solid #289bff !important;
-
-  :global {
-    .n-input {
-      width: 320px;
-    }
-  }
-
-  .btnGroupAll {
-    gap: 8px 24px !important;
-  }
-
-  .btnImg {
-    width: 50px;
-    height: 50px;
-  }
-}
-
-.line {
-  background-color: #EDEEF3;
-  width: calc(100% - 80px);
-  margin: 0 auto;
-  height: 1px;
-}
-
-//
-.addUnitBtn {
-
-  height: 52px;
-  border-radius: 12px;
-  margin: 24px 40px 0;
-
-  width: calc(100% - 80px) !important;
-  background: #E8F4FF;
-
-  &:not(.n-button--disabled):hover,
-  &:not(.n-button--disabled):active,
-  &:not(.n-input--disabled).n-input--focus {
-    background: #E8F4FF;
-  }
-
-  img {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.btnGroup {
-  padding: 40px 0;
-
-  :global {
-    .n-button {
-      height: 47px;
-      min-width: 156px;
-    }
-  }
-}
+.container {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+
+    .n-base-selection--error-status,
+    .n-input--error-status {
+      animation: errorRotate 0.3s ease 3;
+    }
+  }
+}
+
+.closeBtn {
+  position: absolute;
+  top: -15px;
+  right: -10px;
+  background: transparent;
+  width: 44px;
+  height: 44px;
+
+  img {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+.topForms {
+  padding: 40px 40px 0;
+  display: flex;
+  align-items: center;
+
+  :global {
+    .n-upload {
+      width: 210px !important;
+    }
+
+    .n-upload-trigger.n-upload-trigger--image-card {
+      width: 210px !important;
+      height: 297px !important;
+    }
+
+    .n-upload-file.n-upload-file--image-card-type {
+      width: 210px !important;
+      height: 297px !important;
+      border-radius: 12px;
+    }
+
+    .n-upload-dragger {
+      border-radius: 12px;
+      background: #F9FAFD;
+      border: 2px solid #DCE2F1;
+
+      &:hover {
+        border: 2px solid #198CFE;
+      }
+    }
+  }
+
+  .uploadContent {
+    .iconUpload {
+      width: 60px;
+      height: 60px;
+    }
+
+    p {
+      padding-top: 32px;
+      font-size: 18px;
+      color: #9EADD9;
+      line-height: 25px;
+    }
+  }
+
+  .topFormInput {
+    margin-left: 60px;
+  }
+}
+
+.menuTitle {
+  display: flex;
+  align-items: center;
+  padding: 20px 40px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #131415;
+  // border-bottom: 1px solid #EDEEF3;
+
+  .iconMenu {
+    margin-right: 8px;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.lessonItem {
+  border-radius: 20px;
+  background: #F7F9FF;
+  position: relative;
+  margin: 0 40px 24px;
+  padding: 24px 26px 0;
+  --n-border: 1px solid #289bff !important;
+
+  :global {
+    .n-input {
+      width: 320px;
+    }
+  }
+
+  .btnGroupAll {
+    gap: 8px 24px !important;
+  }
+
+  .btnImg {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+.line {
+  background-color: #EDEEF3;
+  width: calc(100% - 80px);
+  margin: 0 auto;
+  height: 1px;
+}
+
+//
+.addUnitBtn {
+
+  height: 52px;
+  border-radius: 12px;
+  margin: 24px 40px 0;
+
+  width: calc(100% - 80px) !important;
+  background: #E8F4FF;
+
+  &:not(.n-button--disabled):hover,
+  &:not(.n-button--disabled):active,
+  &:not(.n-input--disabled).n-input--focus {
+    background: #E8F4FF;
+  }
+
+  img {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.btnGroup {
+  padding: 40px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}

src/views/natural-resources/model/add-teaching/index.tsx

@@ -1,467 +1,471 @@
-import {
-  NButton,
-  NCascader,
-  NForm,
-  NFormItem,
-  NInput,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  useMessage
-} from 'naive-ui';
-import {
-  TransitionGroup,
-  defineComponent,
-  onMounted,
-  reactive,
-  ref
-} from 'vue';
-import styles from './index.module.less';
-import UploadFile from '@/components/upload-file';
-import { nextTick } from 'vue';
-import { scrollToErrorForm } from '@/utils';
-import { api_lessonCoursewareSave } from '../../api';
-import iconUpload from '../../images/icon-upload.png';
-import iconUpload2 from '../../images/icon-upload2.png';
-import iconAdd from '../../images/icon-add.png';
-import iconMenu from '../../images/icon-menu.png';
-import btnAdd from '../../images/btn-add.png';
-import btnDelete from '../../images/btn-delete.png';
-import btnUp from '../../images/btn-up.png';
-import btnDown from '../../images/btn-down.png';
-import btnRemove from '../../images/btn-remove.png';
-import { lessonCoursewareDetail } from '/src/views/prepare-lessons/api';
-import { useCatchStore } from '/src/store/modules/catchData';
-export const BOOK_DATA = {
-  grades: [
-    { label: '一年级', value: 1 },
-    { label: '二年级', value: 2 },
-    { label: '三年级', value: 3 },
-    { label: '四年级', value: 4 },
-    { label: '五年级', value: 5 },
-    { label: '六年级', value: 6 },
-    { label: '七年级', value: 7 },
-    { label: '八年级', value: 8 },
-    { label: '九年级', value: 9 }
-  ],
-  bookTypes: [
-    { label: '上册', value: 'LAST' },
-    { label: '下册', value: 'NEXT' }
-  ]
-};
-
-/** 添加单元 */
-const createLesson = () => {
-  return {
-    key: 'item' + Date.now(),
-    name: '', // 单元名称
-    lessonTargetDesc: '', // 课时目标描述
-    knowledgeList: [
-      {
-        key: Date.now() + '' + 0,
-        name: '' // 章节名称
-      }
-    ] // 章节信息
-  };
-};
-const initState = () => ({
-  id: null, // 教材id
-  name: '',
-  currentGradeNum: null as any,
-  instrumentIds: null as any,
-  // bookType: null, // 上下册
-  coverImg: '', // 封面
-  instruemntIds: [] as any,
-  enableFlag: true, // 状态
-  type: 'COURSEWARE', // 教材类型：COURSEWARE,THEORY,可用值:COURSEWARE,THEORY
-  lessonList: [createLesson()] // 单元列表
-});
-
-export default defineComponent({
-  name: 'addNatural',
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['close', 'confirm'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const message = useMessage();
-    const data = reactive({
-      uploading: false,
-      subjectList: [] as any
-    });
-    const formRef = ref();
-    const form = reactive(initState());
-    const handleSave = () => {
-      formRef.value?.validate((err: any) => {
-        if (err) {
-          nextTick(scrollToErrorForm);
-          return;
-        }
-        handleSubmit();
-      });
-    };
-    const handleSubmit = async () => {
-      data.uploading = true;
-      try {
-        const { currentGradeNum, instrumentIds, ...more } = form;
-        await api_lessonCoursewareSave({
-          currentGradeNum: currentGradeNum.join(','),
-          instrumentIds: instrumentIds.join(','),
-          ...more
-        });
-        Object.assign(form, initState());
-        message.success(props.item.id ? '保存成功' : '添加成功');
-        emit('close', true);
-        emit('confirm');
-      } catch {
-        //
-      }
-      data.uploading = false;
-    };
-
-    onMounted(async () => {
-      await catchStore.getSubjects();
-      if (props.item.id) {
-        const { data } = await lessonCoursewareDetail({ id: props.item.id });
-        form.id = data.id;
-        form.name = data.name;
-        form.currentGradeNum = data.currentGradeNum
-          ? data.currentGradeNum.split(',').map((item: any) => Number(item))
-          : null;
-        form.instrumentIds = data.instrumentIds
-          ? data.instrumentIds.split(',').map((item: any) => item)
-          : null;
-        // form.bookType = data.bookType;
-        form.coverImg = data.coverImg;
-        form.lessonList = [];
-        const lessonList = data.lessonList || [];
-        const tempLesson: any[] = [];
-        lessonList.forEach((item: any) => {
-          const tmpItem: any = {
-            id: item.id,
-            key: 'item' + Date.now() + '-' + Math.random() * 100,
-            name: item.name,
-            lessonTargetDesc: item.lessonTargetDesc,
-            knowledgeList: [] as any
-          };
-
-          if (item.knowledgeList && item.knowledgeList.length) {
-            item.knowledgeList.forEach((knowledge: any) => {
-              tmpItem.knowledgeList.push({
-                id: knowledge.id,
-                key: Date.now() + '-' + Math.random() * 100,
-                name: knowledge.name
-              });
-            });
-          }
-          tempLesson.push(tmpItem);
-        });
-
-        form.lessonList = tempLesson;
-      }
-
-      data.subjectList = catchStore.getEnableSingleAllSubjects(
-        form.instrumentIds
-      );
-    });
-    return () => (
-      <div class={styles.container}>
-        <NScrollbar style={{ 'max-height': '65vh' }}>
-          <NForm
-            ref={formRef}
-            labelPlacement="left"
-            labelWidth={120}
-            model={form}>
-            <div class={styles.topForms}>
-              <NFormItem
-                path="coverImg"
-                rule={[
-                  {
-                    required: true,
-                    message: '请上传教材封面',
-                    trigger: ['change']
-                  }
-                ]}>
-                <UploadFile
-                  cropper
-                  // tips="建议尺寸：210*297, 文件大小: 5MB以内;"
-                  v-model:fileList={form.coverImg}
-                  showType="custom"
-                  size={2}
-                  accept=".jpg,jpeg,.png"
-                  options={{
-                    autoCropWidth: 210,
-                    autoCropHeight: 297,
-                    fixedBox: true
-                  }}>
-                  {{
-                    custom: () => (
-                      <div class={styles.uploadContent}>
-                        <img src={iconUpload2} class={styles.iconUpload} />
-                        <p>请上传教材封面</p>
-                      </div>
-                    )
-                  }}
-                </UploadFile>
-              </NFormItem>
-              <div class={styles.topFormInput}>
-                <NFormItem
-                  style={{ minWidth: '360px' }}
-                  path="name"
-                  rule={[
-                    {
-                      required: true,
-                      message: '请输入教材名称',
-                      trigger: ['blur', 'change']
-                    }
-                  ]}>
-                  <NInput
-                    placeholder="请输入教材名称"
-                    maxlength={25}
-                    v-model:value={form.name}
-                    clearable></NInput>
-                </NFormItem>
-                <NFormItem
-                  path="currentGradeNum"
-                  rule={{
-                    required: true,
-                    message: '请选择年级',
-                    trigger: 'change',
-                    type: 'array'
-                  }}>
-                  <NSelect
-                    style={{ minWidth: '360px' }}
-                    placeholder="请选择年级"
-                    options={BOOK_DATA.grades}
-                    v-model:value={form.currentGradeNum}
-                    clearable
-                    multiple
-                    filterable
-                    maxTagCount={3}
-                  />
-                </NFormItem>
-                <NFormItem
-                  path="instrumentIds"
-                  style={{ width: '360px' }}
-                  rule={{
-                    required: true,
-                    message: '请选择乐器',
-                    trigger: 'change',
-                    type: 'array'
-                  }}>
-                  <NCascader
-                    placeholder="请选择乐器"
-                    options={data.subjectList}
-                    v-model:value={form.instrumentIds}
-                    checkStrategy="child"
-                    showPath={false}
-                    childrenField="instruments"
-                    expandTrigger="hover"
-                    labelField="name"
-                    valueField="id"
-                    clearable
-                    filterable
-                    multiple
-                    maxTagCount="responsive"
-                    style={{ width: '400px' }}
-                  />
-                </NFormItem>
-                {/* <NFormItem
-                  path="bookType"
-                  style={{ width: '360px' }}
-                  rule={{
-                    required: true,
-                    message: '请选择册别',
-                    trigger: 'change'
-                  }}>
-                  <NSelect
-                    placeholder="请选择册别"
-                    options={BOOK_DATA.bookTypes}
-                    v-model:value={form.bookType}
-                    clearable
-                  />
-                </NFormItem> */}
-              </div>
-            </div>
-
-            <div class={styles.menuTitle}>
-              <img src={iconMenu} class={styles.iconMenu} />
-              目录
-            </div>
-            <TransitionGroup name="list" tag="div">
-              {form.lessonList.map((item, index) => {
-                return (
-                  <NSpace
-                    class={styles.lessonItem}
-                    wrap={false}
-                    wrapItem={false}
-                    align="start"
-                    key={item.key}>
-                    <NFormItem
-                      label="单元名称"
-                      labelPlacement="top"
-                      path={`lessonList[${index}].name`}
-                      rule={{
-                        required: true,
-                        message: '填写单元名称',
-                        trigger: ['blur', 'change']
-                      }}>
-                      <NInput
-                        placeholder="填写单元名称"
-                        maxlength={25}
-                        v-model:value={item.name}
-                        clearable></NInput>
-                    </NFormItem>
-                    <TransitionGroup name="list" tag="div">
-                      {item.knowledgeList.map((know, knowIndex) => {
-                        return (
-                          <NFormItem
-                            style={{
-                              '--n-label-height': knowIndex === 0 ? '26px' : '0'
-                            }}
-                            labelPlacement="top"
-                            label={knowIndex === 0 ? '章节名称' : ''}
-                            key={know.key}
-                            path={`lessonList[${index}].knowledgeList[${knowIndex}].name`}
-                            rule={{
-                              required: true,
-                              message: '填写章节名称',
-                              trigger: ['blur', 'change']
-                            }}>
-                            <NSpace
-                              wrap={false}
-                              align="center"
-                              class={styles.btnGroupAll}
-                              wrapItem={false}>
-                              <NInput
-                                maxlength={25}
-                                placeholder="填写章节名称"
-                                v-model:value={know.name}
-                                clearable></NInput>
-                              <NButton
-                                quaternary
-                                circle
-                                onClick={() => {
-                                  item.knowledgeList.splice(knowIndex + 1, 0, {
-                                    name: '',
-                                    key: Date.now() + '' + knowIndex
-                                  });
-                                }}>
-                                {{
-                                  icon: () => (
-                                    <img src={btnAdd} class={styles.btnImg} />
-                                  )
-                                }}
-                              </NButton>
-                              <NButton
-                                quaternary
-                                circle
-                                disabled={item.knowledgeList.length < 2}
-                                onClick={() => {
-                                  item.knowledgeList.splice(knowIndex, 1);
-                                }}>
-                                {{
-                                  icon: () => (
-                                    <img
-                                      src={btnDelete}
-                                      class={styles.btnImg}
-                                    />
-                                  )
-                                }}
-                              </NButton>
-                              <NButton
-                                quaternary
-                                circle
-                                disabled={knowIndex === 0}
-                                onClick={() => {
-                                  if (knowIndex === 0) return;
-                                  const tmp = item.knowledgeList[knowIndex - 1];
-                                  item.knowledgeList[knowIndex - 1] =
-                                    item.knowledgeList[knowIndex];
-                                  item.knowledgeList[knowIndex] = tmp;
-                                }}>
-                                {{
-                                  icon: () => (
-                                    <img src={btnUp} class={styles.btnImg} />
-                                  )
-                                }}
-                              </NButton>
-                              <NButton
-                                quaternary
-                                circle
-                                disabled={
-                                  knowIndex === item.knowledgeList.length - 1
-                                }
-                                onClick={() => {
-                                  if (
-                                    knowIndex ===
-                                    item.knowledgeList.length - 1
-                                  )
-                                    return;
-                                  const tmp = item.knowledgeList[knowIndex + 1];
-                                  item.knowledgeList[knowIndex + 1] =
-                                    item.knowledgeList[knowIndex];
-                                  item.knowledgeList[knowIndex] = tmp;
-                                }}>
-                                {{
-                                  icon: () => (
-                                    <img src={btnDown} class={styles.btnImg} />
-                                  )
-                                }}
-                              </NButton>
-                            </NSpace>
-                          </NFormItem>
-                        );
-                      })}
-                    </TransitionGroup>
-                    <NButton
-                      class={styles.closeBtn}
-                      secondary
-                      circle
-                      size="small"
-                      disabled={form.lessonList.length < 2}
-                      onClick={() => {
-                        form.lessonList.splice(index, 1);
-                      }}>
-                      <img src={btnRemove} />
-                    </NButton>
-                  </NSpace>
-                );
-              })}
-            </TransitionGroup>
-            <div class={styles.line}></div>
-            <NButton
-              block
-              class={styles.addUnitBtn}
-              ghost
-              color="#198CFE"
-              onClick={() => {
-                form.lessonList.push(createLesson());
-              }}>
-              {{
-                icon: () => <img src={iconAdd} />,
-                default: () => '新增单元'
-              }}
-            </NButton>
-          </NForm>
-        </NScrollbar>
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton
-            round
-            loading={data.uploading}
-            type="primary"
-            onClick={() => handleSave()}>
-            保存
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NCascader,
+  NForm,
+  NFormItem,
+  NInput,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import {
+  TransitionGroup,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref
+} from 'vue';
+import styles from './index.module.less';
+import UploadFile from '@/components/upload-file';
+import { nextTick } from 'vue';
+import { scrollToErrorForm } from '@/utils';
+import { api_lessonCoursewareSave } from '../../api';
+import iconUpload from '../../images/icon-upload.png';
+import iconUpload2 from '../../images/icon-upload2.png';
+import iconAdd from '../../images/icon-add.png';
+import iconMenu from '../../images/icon-menu.png';
+import btnAdd from '../../images/btn-add.png';
+import btnDelete from '../../images/btn-delete.png';
+import btnUp from '../../images/btn-up.png';
+import btnDown from '../../images/btn-down.png';
+import btnRemove from '../../images/btn-remove.png';
+import { lessonCoursewareDetail } from '/src/views/prepare-lessons/api';
+import { useCatchStore } from '/src/store/modules/catchData';
+export const BOOK_DATA = {
+  grades: [
+    { label: '一年级', value: 1 },
+    { label: '二年级', value: 2 },
+    { label: '三年级', value: 3 },
+    { label: '四年级', value: 4 },
+    { label: '五年级', value: 5 },
+    { label: '六年级', value: 6 },
+    { label: '七年级', value: 7 },
+    { label: '八年级', value: 8 },
+    { label: '九年级', value: 9 }
+  ],
+  bookTypes: [
+    { label: '上册', value: 'LAST' },
+    { label: '下册', value: 'NEXT' }
+  ]
+};
+
+/** 添加单元 */
+const createLesson = () => {
+  return {
+    key: 'item' + Date.now(),
+    name: '', // 单元名称
+    lessonTargetDesc: '', // 课时目标描述
+    knowledgeList: [
+      {
+        key: Date.now() + '' + 0,
+        name: '' // 章节名称
+      }
+    ] // 章节信息
+  };
+};
+const initState = () => ({
+  id: null, // 教材id
+  name: '',
+  currentGradeNum: null as any,
+  instrumentIds: null as any,
+  // bookType: null, // 上下册
+  coverImg: '', // 封面
+  instruemntIds: [] as any,
+  enableFlag: true, // 状态
+  type: 'COURSEWARE', // 教材类型：COURSEWARE,THEORY,可用值:COURSEWARE,THEORY
+  lessonList: [] as any // 单元列表
+});
+
+export default defineComponent({
+  name: 'addNatural',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const message = useMessage();
+    const data = reactive({
+      uploading: false,
+      subjectList: [] as any
+    });
+    const formRef = ref();
+    const form = reactive(initState());
+    const handleSave = () => {
+      formRef.value?.validate((err: any) => {
+        if (err) {
+          nextTick(scrollToErrorForm);
+          return;
+        }
+        handleSubmit();
+      });
+    };
+    const handleSubmit = async () => {
+      data.uploading = true;
+      try {
+        const { currentGradeNum, instrumentIds, ...more } = form;
+        await api_lessonCoursewareSave({
+          currentGradeNum: currentGradeNum.join(','),
+          instrumentIds: instrumentIds.join(','),
+          ...more
+        });
+        Object.assign(form, initState());
+        message.success(props.item.id ? '保存成功' : '添加成功');
+        emit('close', true);
+        emit('confirm');
+      } catch {
+        //
+      }
+      data.uploading = false;
+    };
+
+    onMounted(async () => {
+      if (!props.item.id) {
+        form.lessonList = [createLesson()];
+      }
+      await catchStore.getSubjects();
+      if (props.item.id) {
+        // form.lessonList = [];
+        const { data } = await lessonCoursewareDetail({ id: props.item.id });
+        form.id = data.id;
+        form.name = data.name;
+        form.currentGradeNum = data.currentGradeNum
+          ? data.currentGradeNum.split(',').map((item: any) => Number(item))
+          : null;
+        form.instrumentIds = data.instrumentIds
+          ? data.instrumentIds.split(',').map((item: any) => item)
+          : null;
+        // form.bookType = data.bookType;
+        form.coverImg = data.coverImg;
+        form.lessonList = [];
+        const lessonList = data.lessonList || [];
+        const tempLesson: any[] = [];
+        lessonList.forEach((item: any) => {
+          const tmpItem: any = {
+            id: item.id,
+            key: 'item' + Date.now() + '-' + Math.random() * 100,
+            name: item.name,
+            lessonTargetDesc: item.lessonTargetDesc,
+            knowledgeList: [] as any
+          };
+
+          if (item.knowledgeList && item.knowledgeList.length) {
+            item.knowledgeList.forEach((knowledge: any) => {
+              tmpItem.knowledgeList.push({
+                id: knowledge.id,
+                key: Date.now() + '-' + Math.random() * 100,
+                name: knowledge.name
+              });
+            });
+          }
+          tempLesson.push(tmpItem);
+        });
+
+        form.lessonList = tempLesson;
+      }
+
+      data.subjectList = catchStore.getEnableSingleAllSubjects(
+        form.instrumentIds
+      );
+    });
+    return () => (
+      <div class={styles.container}>
+        <NScrollbar style={{ 'max-height': '65vh' }}>
+          <NForm
+            ref={formRef}
+            labelPlacement="left"
+            labelWidth={120}
+            model={form}>
+            <div class={styles.topForms}>
+              <NFormItem
+                path="coverImg"
+                rule={[
+                  {
+                    required: true,
+                    message: '请上传教材封面',
+                    trigger: ['change']
+                  }
+                ]}>
+                <UploadFile
+                  cropper
+                  // tips="建议尺寸：210*297, 文件大小: 5MB以内;"
+                  v-model:fileList={form.coverImg}
+                  showType="custom"
+                  size={2}
+                  accept=".jpg,jpeg,.png"
+                  options={{
+                    autoCropWidth: 210,
+                    autoCropHeight: 297,
+                    fixedBox: true
+                  }}>
+                  {{
+                    custom: () => (
+                      <div class={styles.uploadContent}>
+                        <img src={iconUpload2} class={styles.iconUpload} />
+                        <p>请上传教材封面</p>
+                      </div>
+                    )
+                  }}
+                </UploadFile>
+              </NFormItem>
+              <div class={styles.topFormInput}>
+                <NFormItem
+                  style={{ minWidth: '360px' }}
+                  path="name"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请输入教材名称',
+                      trigger: ['blur', 'change']
+                    }
+                  ]}>
+                  <NInput
+                    placeholder="请输入教材名称"
+                    maxlength={25}
+                    v-model:value={form.name}
+                    clearable></NInput>
+                </NFormItem>
+                <NFormItem
+                  path="currentGradeNum"
+                  rule={{
+                    required: true,
+                    message: '请选择年级',
+                    trigger: 'change',
+                    type: 'array'
+                  }}>
+                  <NSelect
+                    style={{ minWidth: '360px' }}
+                    placeholder="请选择年级"
+                    options={BOOK_DATA.grades}
+                    v-model:value={form.currentGradeNum}
+                    clearable
+                    multiple
+                    filterable
+                    maxTagCount={3}
+                  />
+                </NFormItem>
+                <NFormItem
+                  path="instrumentIds"
+                  style={{ width: '360px' }}
+                  rule={{
+                    required: true,
+                    message: '请选择乐器',
+                    trigger: 'change',
+                    type: 'array'
+                  }}>
+                  <NCascader
+                    placeholder="请选择乐器"
+                    options={data.subjectList}
+                    v-model:value={form.instrumentIds}
+                    checkStrategy="child"
+                    showPath={false}
+                    childrenField="instruments"
+                    expandTrigger="hover"
+                    labelField="name"
+                    valueField="id"
+                    clearable
+                    filterable
+                    multiple
+                    maxTagCount="responsive"
+                    style={{ width: '400px' }}
+                  />
+                </NFormItem>
+                {/* <NFormItem
+                  path="bookType"
+                  style={{ width: '360px' }}
+                  rule={{
+                    required: true,
+                    message: '请选择册别',
+                    trigger: 'change'
+                  }}>
+                  <NSelect
+                    placeholder="请选择册别"
+                    options={BOOK_DATA.bookTypes}
+                    v-model:value={form.bookType}
+                    clearable
+                  />
+                </NFormItem> */}
+              </div>
+            </div>
+
+            <div class={styles.menuTitle}>
+              <img src={iconMenu} class={styles.iconMenu} />
+              目录
+            </div>
+            <TransitionGroup name="list" tag="div">
+              {form.lessonList.map((item, index) => {
+                return (
+                  <NSpace
+                    class={styles.lessonItem}
+                    wrap={false}
+                    wrapItem={false}
+                    align="start"
+                    key={item.key}>
+                    <NFormItem
+                      label="单元名称"
+                      labelPlacement="top"
+                      path={`lessonList[${index}].name`}
+                      rule={{
+                        required: true,
+                        message: '填写单元名称',
+                        trigger: ['blur', 'change']
+                      }}>
+                      <NInput
+                        placeholder="填写单元名称"
+                        maxlength={25}
+                        v-model:value={item.name}
+                        clearable></NInput>
+                    </NFormItem>
+                    <TransitionGroup name="list" tag="div">
+                      {item.knowledgeList.map((know, knowIndex) => {
+                        return (
+                          <NFormItem
+                            style={{
+                              '--n-label-height': knowIndex === 0 ? '26px' : '0'
+                            }}
+                            labelPlacement="top"
+                            label={knowIndex === 0 ? '章节名称' : ''}
+                            key={know.key}
+                            path={`lessonList[${index}].knowledgeList[${knowIndex}].name`}
+                            rule={{
+                              required: true,
+                              message: '填写章节名称',
+                              trigger: ['blur', 'change']
+                            }}>
+                            <NSpace
+                              wrap={false}
+                              align="center"
+                              class={styles.btnGroupAll}
+                              wrapItem={false}>
+                              <NInput
+                                maxlength={25}
+                                placeholder="填写章节名称"
+                                v-model:value={know.name}
+                                clearable></NInput>
+                              <NButton
+                                quaternary
+                                circle
+                                onClick={() => {
+                                  item.knowledgeList.splice(knowIndex + 1, 0, {
+                                    name: '',
+                                    key: Date.now() + '' + knowIndex
+                                  });
+                                }}>
+                                {{
+                                  icon: () => (
+                                    <img src={btnAdd} class={styles.btnImg} />
+                                  )
+                                }}
+                              </NButton>
+                              <NButton
+                                quaternary
+                                circle
+                                disabled={item.knowledgeList.length < 2}
+                                onClick={() => {
+                                  item.knowledgeList.splice(knowIndex, 1);
+                                }}>
+                                {{
+                                  icon: () => (
+                                    <img
+                                      src={btnDelete}
+                                      class={styles.btnImg}
+                                    />
+                                  )
+                                }}
+                              </NButton>
+                              <NButton
+                                quaternary
+                                circle
+                                disabled={knowIndex === 0}
+                                onClick={() => {
+                                  if (knowIndex === 0) return;
+                                  const tmp = item.knowledgeList[knowIndex - 1];
+                                  item.knowledgeList[knowIndex - 1] =
+                                    item.knowledgeList[knowIndex];
+                                  item.knowledgeList[knowIndex] = tmp;
+                                }}>
+                                {{
+                                  icon: () => (
+                                    <img src={btnUp} class={styles.btnImg} />
+                                  )
+                                }}
+                              </NButton>
+                              <NButton
+                                quaternary
+                                circle
+                                disabled={
+                                  knowIndex === item.knowledgeList.length - 1
+                                }
+                                onClick={() => {
+                                  if (
+                                    knowIndex ===
+                                    item.knowledgeList.length - 1
+                                  )
+                                    return;
+                                  const tmp = item.knowledgeList[knowIndex + 1];
+                                  item.knowledgeList[knowIndex + 1] =
+                                    item.knowledgeList[knowIndex];
+                                  item.knowledgeList[knowIndex] = tmp;
+                                }}>
+                                {{
+                                  icon: () => (
+                                    <img src={btnDown} class={styles.btnImg} />
+                                  )
+                                }}
+                              </NButton>
+                            </NSpace>
+                          </NFormItem>
+                        );
+                      })}
+                    </TransitionGroup>
+                    <NButton
+                      class={styles.closeBtn}
+                      secondary
+                      circle
+                      size="small"
+                      disabled={form.lessonList.length < 2}
+                      onClick={() => {
+                        form.lessonList.splice(index, 1);
+                      }}>
+                      <img src={btnRemove} />
+                    </NButton>
+                  </NSpace>
+                );
+              })}
+            </TransitionGroup>
+            <div class={styles.line}></div>
+            <NButton
+              block
+              class={styles.addUnitBtn}
+              ghost
+              color="#198CFE"
+              onClick={() => {
+                form.lessonList.push(createLesson());
+              }}>
+              {{
+                icon: () => <img src={iconAdd} />,
+                default: () => '新增单元'
+              }}
+            </NButton>
+          </NForm>
+        </NScrollbar>
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            round
+            loading={data.uploading}
+            type="primary"
+            onClick={() => handleSave()}>
+            保存
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/setting/components/schoolInfo/index.tsx

@@ -10,7 +10,6 @@ import {
   NInput,
   NModal,
   NSpace,
-  useDialog,
   useMessage
 } from 'naive-ui';
 import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
@@ -62,6 +61,7 @@ export default defineComponent({
       resetVisiable: false,
       resetLoading: false,
       resetMessage: '',
+      resetMessageType: 'reset',
       activeRow: {} as any,
 
       modal: false,
@@ -138,6 +138,7 @@ export default defineComponent({
                 onClick={() => {
                   data.resetMessage = `重置"${row.nickname}"的密码，是否继续？`;
                   data.resetVisiable = true;
+                  data.resetMessageType = 'reset';
                   data.activeRow = row;
                 }}>
                 重置密码
@@ -224,35 +225,50 @@ export default defineComponent({
       getList();
     });
 
-    const dialog = useDialog();
+    // const dialog = useDialog();
     const message = useMessage();
     const handleChange = (row: any) => {
       const statuStr = row.status === 'LOCKED' ? '解冻' : '冻结';
-      dialog.warning({
-        title: '温馨提示',
-        content: `是否${statuStr}"${row.nickname}"？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        maskClosable: false,
-        onPositiveClick: async () => {
-          await api_tenantInfoUpdateStatus({
-            ids: [row.id],
-            status: row.status === 'LOCKED' ? 'ACTIVATION' : 'LOCKED'
-          });
-          getList();
-          message.success(statuStr + '成功');
-        }
-      });
+      // dialog.warning({
+      //   title: '温馨提示',
+      //   content: `是否${statuStr}"${row.nickname}"？`,
+      //   positiveText: '确定',
+      //   negativeText: '取消',
+      //   maskClosable: false,
+      //   onPositiveClick: async () => {
+      //     await api_tenantInfoUpdateStatus({
+      //       ids: [row.id],
+      //       status: row.status === 'LOCKED' ? 'ACTIVATION' : 'LOCKED'
+      //     });
+      //     getList();
+      //     message.success(statuStr + '成功');
+      //   }
+      // });
+      data.resetMessageType = 'locked';
+      data.resetVisiable = true;
+      data.resetMessage = `是否${statuStr}"${row.nickname}"？`;
+      data.activeRow = row;
     };
     // 重置密码
     const onResetPassword = async () => {
       data.resetLoading = true;
       try {
-        await api_userResetPassword({
-          userId: data.activeRow.id,
-          clientType: 'TEACHER'
-        });
-        message.success('重置成功');
+        if (data.resetMessageType === 'locked') {
+          const statuStr = data.activeRow.status === 'LOCKED' ? '解冻' : '冻结';
+          await api_tenantInfoUpdateStatus({
+            ids: [data.activeRow.id],
+            status: data.activeRow.status === 'LOCKED' ? 'ACTIVATION' : 'LOCKED'
+          });
+          getList();
+          message.success(statuStr + '成功');
+        } else {
+          await api_userResetPassword({
+            userId: data.activeRow.id,
+            clientType: 'TEACHER'
+          });
+          message.success('重置成功');
+        }
+
         data.resetVisiable = false;
       } catch {
         //
@@ -472,7 +488,7 @@ export default defineComponent({
           v-model:show={data.resetVisiable}
           preset="card"
           class={['modalTitle', styles.removeVisiable1]}
-          title={'重置密码'}>
+          title={data.resetMessageType === 'reset' ? '重置密码' : '温馨提示'}>
           <TheMessageDialog
             content={data.resetMessage}
             cancelButtonText="取消"