更新

public/version.json

@@ -1 +1 @@
-{"version":1713952776726}
+{"version":1714100243587}

src/views/classList/modals/createClass.tsx

@@ -1,209 +1,218 @@
-import {
-  NButton,
-  NSpace,
-  useMessage,
-  NForm,
-  NFormItem,
-  NSelect
-} from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
-import styles from '../index.module.less';
-import CSelect from '/src/components/CSelect';
-import { addClass, getConfiguredSubjects } from '../api';
-import { api_getCurrentGradeYear } from '../../studentList/api';
-export default defineComponent({
-  props: {
-    activeRow: {
-      type: Object,
-      default: () => ({ id: '' })
-    },
-    gradeYearList: {
-      type: Array,
-      default: () => []
-    },
-    gradeNumList: {
-      type: Array,
-      default: () => []
-    },
-    classArray: {
-      type: Array,
-      default: () => []
-    }
-  },
-  name: 'resetStudent',
-  emits: ['close', 'getList'],
-  setup(props, { emit }) {
-    const data = reactive({
-      uploading: false
-    });
-    const message = useMessage();
-    const foemsRef = ref();
-    const createClassForm = reactive({
-      gradeYear: null,
-      currentGradeNum: null,
-      currentClass: null,
-      subjectId: null
-    });
-    const gradeYearList = ref([] as any);
-    const subjectList = ref([] as any);
-    const submitForms = () => {
-      foemsRef.value.validate(async (error: any) => {
-        if (error) {
-          return;
-        }
-        data.uploading = true;
-        try {
-          await addClass({ ...createClassForm });
-          message.success('新增成功');
-          emit('close');
-          emit('getList');
-          data.uploading = false;
-        } catch (e) {
-          console.log(e);
-        }
-        data.uploading = false;
-      });
-    };
-
-    const getYearList = async () => {
-      try {
-        const { data } = await api_getCurrentGradeYear({});
-        const temp = [
-          {
-            label: data + 1,
-            value: data + 1
-          },
-          {
-            label: data,
-            value: data
-          }
-        ];
-        gradeYearList.value = temp;
-      } catch {
-        //
-      }
-    };
-
-    const getConfigSubject = async () => {
-      try {
-        const { data } = await getConfiguredSubjects({
-          gradeYear: createClassForm.gradeYear,
-          currentGradeNum: createClassForm.currentGradeNum,
-          currentClass: createClassForm.currentClass
-        });
-        const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
-      } catch {
-        //
-      }
-    };
-
-    watch(
-      () => [
-        createClassForm.gradeYear,
-        createClassForm.currentGradeNum,
-        createClassForm.currentClass
-      ],
-      () => {
-        createClassForm.subjectId = null;
-        getConfigSubject();
-      }
-    );
-
-    onMounted(() => {
-      getYearList();
-    });
-
-    return () => (
-      <div class={[styles.addClass]}>
-        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
-          <NFormItem
-            path="gradeYear"
-            rule={[
-              {
-                required: true,
-                message: '请选择学年'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: gradeYearList.value,
-                placeholder: '选择学年',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.gradeYear}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="currentGradeNum"
-            rule={[
-              {
-                required: true,
-                message: '请选择年级'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: props.gradeNumList,
-                placeholder: '选择年级',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.currentGradeNum}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="currentClass"
-            rule={[
-              {
-                required: true,
-                message: '请选择班级'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: props.classArray,
-                placeholder: '选择班级',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.currentClass}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="subjectId"
-            rule={[
-              {
-                required: true,
-                message: '请选择声部'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
-          </NFormItem>
-        </NForm>
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton
-            round
-            loading={data.uploading}
-            onClick={() => submitForms()}
-            type="primary">
-            保存
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NCascader
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
+import styles from '../index.module.less';
+import CSelect from '/src/components/CSelect';
+import { addClass, getConfiguredSubjects } from '../api';
+import { api_getCurrentGradeYear } from '../../studentList/api';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    gradeYearList: {
+      type: Array,
+      default: () => []
+    },
+    gradeNumList: {
+      type: Array,
+      default: () => []
+    },
+    classArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  name: 'resetStudent',
+  emits: ['close', 'getList'],
+  setup(props, { emit }) {
+    const data = reactive({
+      uploading: false
+    });
+    const message = useMessage();
+    const foemsRef = ref();
+    const createClassForm = reactive({
+      gradeYear: null,
+      currentGradeNum: null,
+      currentClass: null,
+      instrumentId: null
+    });
+    const gradeYearList = ref([] as any);
+    const subjectList = ref([] as any);
+    const submitForms = () => {
+      foemsRef.value.validate(async (error: any) => {
+        if (error) {
+          return;
+        }
+        data.uploading = true;
+        try {
+          await addClass({ ...createClassForm });
+          message.success('新增成功');
+          emit('close');
+          emit('getList');
+          data.uploading = false;
+        } catch (e) {
+          console.log(e);
+        }
+        data.uploading = false;
+      });
+    };
+
+    const getYearList = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        const temp = [
+          {
+            label: data + 1,
+            value: data + 1
+          },
+          {
+            label: data,
+            value: data
+          }
+        ];
+        gradeYearList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    const getConfigSubject = async () => {
+      try {
+        const { data } = await getConfiguredSubjects({
+          gradeYear: createClassForm.gradeYear,
+          currentGradeNum: createClassForm.currentGradeNum,
+          currentClass: createClassForm.currentClass
+        });
+        const temp = data || [];
+        subjectList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    watch(
+      () => [
+        createClassForm.gradeYear,
+        createClassForm.currentGradeNum,
+        createClassForm.currentClass
+      ],
+      () => {
+        createClassForm.instrumentId = null;
+        getConfigSubject();
+      }
+    );
+
+    onMounted(() => {
+      getYearList();
+    });
+
+    return () => (
+      <div class={[styles.addClass]}>
+        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
+          <NFormItem
+            path="gradeYear"
+            rule={[
+              {
+                required: true,
+                message: '请选择学年'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: gradeYearList.value,
+                placeholder: '选择学年',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.gradeYear}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="currentGradeNum"
+            rule={[
+              {
+                required: true,
+                message: '请选择年级'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: props.gradeNumList,
+                placeholder: '选择年级',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.currentGradeNum}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="currentClass"
+            rule={[
+              {
+                required: true,
+                message: '请选择班级'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: props.classArray,
+                placeholder: '选择班级',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.currentClass}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="instrumentId"
+            rule={[
+              {
+                required: true,
+                message: '请选择乐器'
+              }
+            ]}>
+            {/* <CSelect
+              {...({
+                style: { width: '400px' },
+                options: subjectList.value,
+                placeholder: '选择乐器',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.instrumentId}></CSelect> */}
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
+          </NFormItem>
+        </NForm>
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            round
+            loading={data.uploading}
+            onClick={() => submitForms()}
+            type="primary">
+            保存
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/natural-resources/components/my-collect/index.tsx

@@ -1,171 +1,172 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '@/components/card-type';
-import Pagination from '@/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import { favorite, materialQueryPage, materialRemove } from '../../api';
-import { NSpin, useDialog, useMessage } from 'naive-ui';
-import TheEmpty from '@/components/TheEmpty';
-import CardPreview from '@/components/card-preview';
-import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const message = useMessage();
-    const dialog = useDialog();
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 4
-      },
-      tableList: [] as any,
-      show: false,
-      item: {} as any
-    });
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content,
-            subjectId: row.subjectIds,
-            enableFlag: row.enableFlag ? 1 : 0,
-            openFlag: row.openFlag
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-    const showGuide = ref(false);
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
-      getList();
-    };
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-
-        // onSearch(state.searchGroup);
-      } catch {
-        //
-      }
-    };
-
-    // 单个删除
-    const onRemove = async (item: any) => {
-      try {
-        dialog.warning({
-          title: '提示',
-          content: '该资源已下架，是否删除？',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: async () => {
-            await materialRemove({ id: item.id });
-            message.success('删除成功');
-            onSearch(state.searchGroup);
-          }
-        });
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
-
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list} id="myColloge-0">
-            {state.tableList.map((item: any) => (
-              <div class={styles.itemWrap}>
-                <div class={styles.itemWrapBox}>
-                  <CardType
-                    item={item}
-                    offShelf={item.enableFlag ? false : true}
-                    onOffShelf={() => onRemove(item)}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG' || !item.enableFlag) return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                </div>
-              </div>
-            ))}
-
-            {!state.loading && state.tableList.length <= 0 && (
-              <TheEmpty
-                style={{ minHeight: '50vh' }}
-                description="暂无收藏资源"
-              />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '@/components/card-type';
+import Pagination from '@/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { favorite, materialQueryPage, materialRemove } from '../../api';
+import { NSpin, useDialog, useMessage } from 'naive-ui';
+import TheEmpty from '@/components/TheEmpty';
+import CardPreview from '@/components/card-preview';
+import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const message = useMessage();
+    const dialog = useDialog();
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 4
+      },
+      tableList: [] as any,
+      show: false,
+      item: {} as any
+    });
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content,
+            subjectId: row.subjectIds,
+            enableFlag: row.enableFlag ? 1 : 0,
+            openFlag: row.openFlag
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+    const showGuide = ref(false);
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      if (item.type === 'MUSIC') {
+        const { subjectId, ...res } = item;
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...res,
+          musicalInstrumentId: subjectId,
+          subjectId: null
+        });
+      } else {
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...item,
+          musicalInstrumentId: null
+        });
+      }
+      getList();
+    };
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+
+        // onSearch(state.searchGroup);
+      } catch {
+        //
+      }
+    };
+
+    // 单个删除
+    const onRemove = async (item: any) => {
+      try {
+        dialog.warning({
+          title: '提示',
+          content: '该资源已下架，是否删除？',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: async () => {
+            await materialRemove({ id: item.id });
+            message.success('删除成功');
+            onSearch(state.searchGroup);
+          }
+        });
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
+
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list} id="myColloge-0">
+            {state.tableList.map((item: any) => (
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => onRemove(item)}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                </div>
+              </div>
+            ))}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty
+                style={{ minHeight: '50vh' }}
+                description="暂无收藏资源"
+              />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
+      </>
+    );
+  }
+});

src/views/natural-resources/components/my-resources/index.tsx

@@ -1,481 +1,482 @@
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '/src/components/card-type';
-import Pagination from '/src/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import {
-  favorite,
-  materialQueryPage,
-  materialRemove,
-  materialRemoveAll,
-  materialRemoveMusic,
-  materialUpdateAll
-} from '../../api';
-import {
-  NButton,
-  NModal,
-  NSpace,
-  NSpin,
-  useDialog,
-  useMessage
-} from 'naive-ui';
-import TheEmpty from '/src/components/TheEmpty';
-import UploadModal, { formatUrlType } from './upload-modal';
-import CardPreview from '@/components/card-preview';
-import resourceDefault from '../../images/resource-default.png';
-import resourceChecked from '../../images/resource-checked.png';
-import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide';
-import SaveModal from './save-modal';
-import deepClone from '/src/helpers/deep-clone';
-import UploadCover from './upload-cover';
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const message = useMessage();
-    const dialog = useDialog();
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 3
-      },
-      tableList: [] as any,
-      uploadStatus: false,
-      saveStatus: false,
-      show: false,
-      item: {} as any,
-      editStatus: false, // 是否编辑
-      isAdd: false,
-      editList: [] as any, // TOD
-      editIds: [] as any, // 编辑的
-      editOverIds: [] as any, // 确认修改的数据
-      removeVisiable: false,
-      removeContent: '是否删除该资源？',
-      type: 'remove',
-      removeItem: {} as any
-    });
-    const showGuide = ref(false);
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content,
-            // subjectId: row.subjectIds,
-            instrumentIds: row.instrumentIds,
-            sourceFrom: row.sourceFrom,
-            enableFlag: row.enableFlag ? 1 : 0,
-            openFlag: row.openFlag
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    const isEmpty = computed(() => {
-      const list = state.tableList || [];
-      let num = 0;
-      list.forEach((item: any) => {
-        if (!item.delFlag) {
-          num++;
-        }
-      });
-      return num > 0 ? false : true;
-    });
-
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-      } catch {
-        //
-      }
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
-
-      getList();
-    };
-
-    // 批量删除
-    const onDelete = async () => {
-      try {
-        if (state.searchGroup.type === 'MUSIC') {
-          await materialRemoveMusic(state.editIds);
-        } else {
-          await materialRemoveAll(state.editIds);
-        }
-        // message.success('删除成功');
-        // state.pagination.page = 1;
-        // getList();
-        // state.editIds = [];
-      } catch {
-        //
-      }
-    };
-
-    // 单个删除
-    const onRemove = async () => {
-      try {
-        // 如果是乐谱类型则使用其它删除接口
-        if (state.searchGroup.type === 'MUSIC') {
-          await materialRemoveMusic([state.removeItem.id]);
-        } else {
-          await materialRemove({ ids: state.removeItem.id });
-        }
-
-        message.success('删除成功');
-        onSearch(state.searchGroup);
-      } catch {
-        //
-      }
-    };
-    const searchGroupResourcesRef = ref();
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources
-          ref={searchGroupResourcesRef}
-          onSearch={(item: any) => onSearch(item)}
-          onUpload={() => {
-            state.editList = [];
-            // state.uploadStatus = true;
-            state.saveStatus = true;
-          }}
-          onUpdate={() => {
-            // 修改
-            const list: any[] = [];
-            state.tableList.forEach((item: any) => {
-              if (state.editIds.indexOf(item.id) > -1) {
-                list.push(item);
-              }
-            });
-            state.editList = list || [];
-            if (state.editList.length <= 0) {
-              message.error('至少选择一条资源进行编辑');
-              return;
-            }
-            state.uploadStatus = true;
-            state.isAdd = false;
-          }}
-          onEditOver={async (status: boolean) => {
-            state.editStatus = status;
-            try {
-              // 修改
-              if (state.editOverIds.length > 0) {
-                const body = [] as any;
-                state.tableList.forEach((item: any) => {
-                  if (state.editOverIds.includes(item.id)) {
-                    body.push({
-                      instrumentIds: item.instrumentIds,
-                      openFlag: item.openFlag,
-                      coverImg: item.coverImg,
-                      name: item.title,
-                      type: item.type,
-                      enableFlag: 1,
-                      content: item.content,
-                      id: item.id || null,
-                      delFlag: item.delFlag
-                    });
-                  }
-                });
-                //
-                if (body.length > 0) {
-                  if (state.searchGroup.type === 'MUSIC') {
-                    await materialRemoveMusic(state.editIds);
-                  } else {
-                    await materialUpdateAll(body);
-                  }
-                }
-              }
-              message.success('修改成功');
-              state.pagination.page = 1;
-              getList();
-              state.editIds = [];
-              state.editOverIds = [];
-            } catch {
-              //
-            }
-          }}
-          onCancel={status => {
-            state.editStatus = status;
-            state.pagination.page = 1;
-            state.editIds = [];
-            state.editOverIds = [];
-            getList();
-          }}
-          onEdit={async (status: boolean) => {
-            // 点击编辑
-            state.editStatus = status;
-
-            if (!state.editStatus) {
-              state.editIds = [];
-              state.editOverIds = [];
-            }
-          }}
-          onSelectAll={(status: boolean) => {
-            // 全选
-            if (status) {
-              const tempIds: any[] = [];
-              state.tableList.forEach((item: any) => {
-                tempIds.push(item.id);
-              });
-              state.editIds = tempIds;
-            } else {
-              state.editIds = [];
-            }
-          }}
-          onDelete={() => {
-            if (state.editIds.length <= 0) {
-              message.error('至少选择一条资源进行删除');
-              return;
-            }
-            state.type = 'delete';
-            state.removeContent = '是否删除该资源？';
-            state.removeVisiable = true;
-          }}
-        />
-
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list}>
-            {state.tableList.map(
-              (item: any) =>
-                item.delFlag !== 1 && (
-                  <div class={styles.itemWrap}>
-                    <div class={styles.itemWrapBox}>
-                      <CardType
-                        item={item}
-                        isDownload
-                        disabledMouseHover={false}
-                        offShelf={item.enableFlag ? false : true}
-                        onOffShelf={() => {
-                          state.type = 'remove';
-                          state.removeContent = '该资源已下架，是否删除？';
-                          state.removeVisiable = true;
-                          state.removeItem = item;
-                        }} // 下架
-                        onClick={(val: any) => {
-                          if (val.type === 'IMG' || !item.enableFlag) return;
-                          state.show = true;
-                          state.item = val;
-                        }}
-                        onCollect={(item: any) => onCollect(item)}
-                      />
-                      {/* 编辑模式 */}
-                      {state.editStatus && (
-                        <div
-                          class={[
-                            styles.itemBg,
-                            state.editIds.includes(item.id)
-                              ? styles.itemBgChecked
-                              : ''
-                          ]}
-                          onClick={() => {
-                            const index = state.editIds.indexOf(item.id);
-                            if (index > -1) {
-                              state.editIds.splice(index, 1);
-                            } else {
-                              state.editIds.push(item.id);
-                            }
-                          }}>
-                          <img
-                            src={
-                              state.editIds.includes(item.id)
-                                ? resourceChecked
-                                : resourceDefault
-                            }
-                            class={styles.resourceDefault}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-            )}
-
-            {!state.loading && isEmpty.value && (
-              <TheEmpty style={{ minHeight: '50vh' }} description="暂无资源" />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          disabled={state.editStatus}
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-
-        <NModal
-          v-model:show={state.uploadStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal]}
-          title={state.editStatus ? '修改资源' : '上传资源'}
-          blockScroll={false}>
-          <UploadModal
-            editStatus={state.editStatus}
-            onClose={() => {
-              state.uploadStatus = false;
-            }}
-            onConfirm={() => {
-              state.editIds = [];
-              state.editList = [];
-              state.editOverIds = [];
-              state.saveStatus = false;
-              searchGroupResourcesRef.value?.resetStatus();
-              onSearch(state.searchGroup);
-            }}
-            list={state.editList}
-            showDelete={state.isAdd}
-            onEditAll={(list: any) => {
-              try {
-                state.tableList.forEach((table: any) => {
-                  const item = list.find((item: any) => item.id === table.id);
-                  if (item) {
-                    table.openFlag = item.openFlag;
-                    table.title = item.name;
-                    table.instrumentIds = item.instrumentIds;
-                    table.content = item.content;
-                    table.coverImg = item.coverImg;
-
-                    if (!state.editOverIds.includes(table.id)) {
-                      state.editOverIds.push(table.id);
-                    }
-                  }
-                });
-                state.uploadStatus = false;
-              } catch (e: any) {
-                console.log(e);
-              }
-            }}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={state.saveStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassSaveModal]}
-          title={'上传资源'}
-          blockScroll={false}>
-          <SaveModal
-            onClose={() => (state.saveStatus = false)}
-            onConfrim={(val: any) => {
-              const list = val || [];
-              const temp: any = [];
-              list.forEach((item: any) => {
-                temp.push({
-                  instrumentIds: null,
-                  openFlag: false,
-                  coverImg: item.coverImg,
-                  title: item.name || '',
-                  type: formatUrlType(item.content),
-                  enableFlag: 1,
-                  content: item.content,
-                  id: null
-                });
-              });
-              state.editList = [...temp];
-              state.uploadStatus = true;
-              state.isAdd = true;
-              state.editStatus = false;
-            }}
-          />
-        </NModal>
-
-        {showGuide.value ? <MyResourcesGuide></MyResourcesGuide> : null}
-
-        <NModal
-          v-model:show={state.removeVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'提示'}>
-          <div class={styles.studentRemove}>
-            <p>{state.removeContent}</p>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                round
-                type="primary"
-                onClick={() => {
-                  if (state.type === 'remove') {
-                    onRemove();
-                  } else {
-                    state.tableList.forEach((item: any) => {
-                      if (state.editIds.includes(item.id)) {
-                        item.delFlag = 1;
-
-                        if (!state.editOverIds.includes(item.id)) {
-                          state.editOverIds.push(item.id);
-                        }
-                      }
-                    });
-                  }
-                  state.removeVisiable = false;
-                }}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (state.removeVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-      </>
-    );
-  }
-});
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import {
+  favorite,
+  materialQueryPage,
+  materialRemove,
+  materialRemoveAll,
+  materialRemoveMusic,
+  materialUpdateAll
+} from '../../api';
+import {
+  NButton,
+  NModal,
+  NSpace,
+  NSpin,
+  useDialog,
+  useMessage
+} from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+import UploadModal, { formatUrlType } from './upload-modal';
+import CardPreview from '@/components/card-preview';
+import resourceDefault from '../../images/resource-default.png';
+import resourceChecked from '../../images/resource-checked.png';
+import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide';
+import SaveModal from './save-modal';
+import deepClone from '/src/helpers/deep-clone';
+import UploadCover from './upload-cover';
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const message = useMessage();
+    const dialog = useDialog();
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 3
+      },
+      tableList: [] as any,
+      uploadStatus: false,
+      saveStatus: false,
+      show: false,
+      item: {} as any,
+      editStatus: false, // 是否编辑
+      isAdd: false,
+      editList: [] as any, // TOD
+      editIds: [] as any, // 编辑的
+      editOverIds: [] as any, // 确认修改的数据
+      removeVisiable: false,
+      removeContent: '是否删除该资源？',
+      type: 'remove',
+      removeItem: {} as any
+    });
+    const showGuide = ref(false);
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content,
+            // subjectId: row.subjectIds,
+            instrumentIds: row.instrumentIds,
+            sourceFrom: row.sourceFrom,
+            enableFlag: row.enableFlag ? 1 : 0,
+            openFlag: row.openFlag
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const isEmpty = computed(() => {
+      const list = state.tableList || [];
+      let num = 0;
+      list.forEach((item: any) => {
+        if (!item.delFlag) {
+          num++;
+        }
+      });
+      return num > 0 ? false : true;
+    });
+
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      if (item.type === 'MUSIC') {
+        const { subjectId, ...res } = item;
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...res,
+          musicalInstrumentId: subjectId,
+          subjectId: null
+        });
+      } else {
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...item,
+          musicalInstrumentId: null
+        });
+      }
+
+      getList();
+    };
+
+    // 批量删除
+    const onDelete = async () => {
+      try {
+        if (state.searchGroup.type === 'MUSIC') {
+          await materialRemoveMusic(state.editIds);
+        } else {
+          await materialRemoveAll(state.editIds);
+        }
+        // message.success('删除成功');
+        // state.pagination.page = 1;
+        // getList();
+        // state.editIds = [];
+      } catch {
+        //
+      }
+    };
+
+    // 单个删除
+    const onRemove = async () => {
+      try {
+        // 如果是乐谱类型则使用其它删除接口
+        if (state.searchGroup.type === 'MUSIC') {
+          await materialRemoveMusic([state.removeItem.id]);
+        } else {
+          await materialRemove({ ids: state.removeItem.id });
+        }
+
+        message.success('删除成功');
+        onSearch(state.searchGroup);
+      } catch {
+        //
+      }
+    };
+    const searchGroupResourcesRef = ref();
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources
+          ref={searchGroupResourcesRef}
+          onSearch={(item: any) => onSearch(item)}
+          onUpload={() => {
+            state.editList = [];
+            // state.uploadStatus = true;
+            state.saveStatus = true;
+          }}
+          onUpdate={() => {
+            // 修改
+            const list: any[] = [];
+            state.tableList.forEach((item: any) => {
+              if (state.editIds.indexOf(item.id) > -1) {
+                list.push(item);
+              }
+            });
+            state.editList = list || [];
+            if (state.editList.length <= 0) {
+              message.error('至少选择一条资源进行编辑');
+              return;
+            }
+            state.uploadStatus = true;
+            state.isAdd = false;
+          }}
+          onEditOver={async (status: boolean) => {
+            state.editStatus = status;
+            try {
+              // 修改
+              if (state.editOverIds.length > 0) {
+                const body = [] as any;
+                state.tableList.forEach((item: any) => {
+                  if (state.editOverIds.includes(item.id)) {
+                    body.push({
+                      instrumentIds: item.instrumentIds,
+                      openFlag: item.openFlag,
+                      coverImg: item.coverImg,
+                      name: item.title,
+                      type: item.type,
+                      enableFlag: 1,
+                      content: item.content,
+                      id: item.id || null,
+                      delFlag: item.delFlag
+                    });
+                  }
+                });
+                //
+                if (body.length > 0) {
+                  if (state.searchGroup.type === 'MUSIC') {
+                    await materialRemoveMusic(state.editIds);
+                  } else {
+                    await materialUpdateAll(body);
+                  }
+                }
+              }
+              message.success('修改成功');
+              state.pagination.page = 1;
+              getList();
+              state.editIds = [];
+              state.editOverIds = [];
+            } catch {
+              //
+            }
+          }}
+          onCancel={status => {
+            state.editStatus = status;
+            state.pagination.page = 1;
+            state.editIds = [];
+            state.editOverIds = [];
+            getList();
+          }}
+          onEdit={async (status: boolean) => {
+            // 点击编辑
+            state.editStatus = status;
+
+            if (!state.editStatus) {
+              state.editIds = [];
+              state.editOverIds = [];
+            }
+          }}
+          onSelectAll={(status: boolean) => {
+            // 全选
+            if (status) {
+              const tempIds: any[] = [];
+              state.tableList.forEach((item: any) => {
+                tempIds.push(item.id);
+              });
+              state.editIds = tempIds;
+            } else {
+              state.editIds = [];
+            }
+          }}
+          onDelete={() => {
+            if (state.editIds.length <= 0) {
+              message.error('至少选择一条资源进行删除');
+              return;
+            }
+            state.type = 'delete';
+            state.removeContent = '是否删除该资源？';
+            state.removeVisiable = true;
+          }}
+        />
+
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list}>
+            {state.tableList.map(
+              (item: any) =>
+                item.delFlag !== 1 && (
+                  <div class={styles.itemWrap}>
+                    <div class={styles.itemWrapBox}>
+                      <CardType
+                        item={item}
+                        isDownload
+                        disabledMouseHover={false}
+                        offShelf={item.enableFlag ? false : true}
+                        onOffShelf={() => {
+                          state.type = 'remove';
+                          state.removeContent = '该资源已下架，是否删除？';
+                          state.removeVisiable = true;
+                          state.removeItem = item;
+                        }} // 下架
+                        onClick={(val: any) => {
+                          if (val.type === 'IMG' || !item.enableFlag) return;
+                          state.show = true;
+                          state.item = val;
+                        }}
+                        onCollect={(item: any) => onCollect(item)}
+                      />
+                      {/* 编辑模式 */}
+                      {state.editStatus && (
+                        <div
+                          class={[
+                            styles.itemBg,
+                            state.editIds.includes(item.id)
+                              ? styles.itemBgChecked
+                              : ''
+                          ]}
+                          onClick={() => {
+                            const index = state.editIds.indexOf(item.id);
+                            if (index > -1) {
+                              state.editIds.splice(index, 1);
+                            } else {
+                              state.editIds.push(item.id);
+                            }
+                          }}>
+                          <img
+                            src={
+                              state.editIds.includes(item.id)
+                                ? resourceChecked
+                                : resourceDefault
+                            }
+                            class={styles.resourceDefault}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+            )}
+
+            {!state.loading && isEmpty.value && (
+              <TheEmpty style={{ minHeight: '50vh' }} description="暂无资源" />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          disabled={state.editStatus}
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+
+        <NModal
+          v-model:show={state.uploadStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal]}
+          title={state.editStatus ? '修改资源' : '上传资源'}
+          blockScroll={false}>
+          <UploadModal
+            editStatus={state.editStatus}
+            onClose={() => {
+              state.uploadStatus = false;
+            }}
+            onConfirm={() => {
+              state.editIds = [];
+              state.editList = [];
+              state.editOverIds = [];
+              state.saveStatus = false;
+              searchGroupResourcesRef.value?.resetStatus();
+              onSearch(state.searchGroup);
+            }}
+            list={state.editList}
+            showDelete={state.isAdd}
+            onEditAll={(list: any) => {
+              try {
+                state.tableList.forEach((table: any) => {
+                  const item = list.find((item: any) => item.id === table.id);
+                  if (item) {
+                    table.openFlag = item.openFlag;
+                    table.title = item.name;
+                    table.instrumentIds = item.instrumentIds;
+                    table.content = item.content;
+                    table.coverImg = item.coverImg;
+
+                    if (!state.editOverIds.includes(table.id)) {
+                      state.editOverIds.push(table.id);
+                    }
+                  }
+                });
+                state.uploadStatus = false;
+              } catch (e: any) {
+                console.log(e);
+              }
+            }}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={state.saveStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassSaveModal]}
+          title={'上传资源'}
+          blockScroll={false}>
+          <SaveModal
+            onClose={() => (state.saveStatus = false)}
+            onConfrim={(val: any) => {
+              const list = val || [];
+              const temp: any = [];
+              list.forEach((item: any) => {
+                temp.push({
+                  instrumentIds: null,
+                  openFlag: false,
+                  coverImg: item.coverImg,
+                  title: item.name || '',
+                  type: formatUrlType(item.content),
+                  enableFlag: 1,
+                  content: item.content,
+                  id: null
+                });
+              });
+              state.editList = [...temp];
+              state.uploadStatus = true;
+              state.isAdd = true;
+              state.editStatus = false;
+            }}
+          />
+        </NModal>
+
+        {showGuide.value ? <MyResourcesGuide></MyResourcesGuide> : null}
+
+        <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'提示'}>
+          <div class={styles.studentRemove}>
+            <p>{state.removeContent}</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  if (state.type === 'remove') {
+                    onRemove();
+                  } else {
+                    state.tableList.forEach((item: any) => {
+                      if (state.editIds.includes(item.id)) {
+                        item.delFlag = 1;
+
+                        if (!state.editOverIds.includes(item.id)) {
+                          state.editOverIds.push(item.id);
+                        }
+                      }
+                    });
+                  }
+                  state.removeVisiable = false;
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+      </>
+    );
+  }
+});

src/views/natural-resources/components/share-resources/index.tsx

@@ -1,177 +1,178 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '/src/components/card-type';
-import Pagination from '/src/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import { favorite, materialQueryPage } from '../../api';
-import { NModal, NSpin } from 'naive-ui';
-import TheEmpty from '/src/components/TheEmpty';
-import CardPreview from '/src/components/card-preview';
-import AddTeaching from '../../model/add-teaching';
-import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide';
-
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 2
-      },
-      tableList: [] as any,
-      teachingStatus: false,
-      show: false,
-      item: {} as any
-    });
-    const showGuide = ref(false);
-    const SearchGroupResourcesRef = ref();
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
-      getList();
-    };
-
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources
-          ref={SearchGroupResourcesRef}
-          onSearch={(item: any) => onSearch(item)}
-          onAdd={() => (state.teachingStatus = true)}
-        />
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list}>
-            {state.tableList.map((item: any, index: number) => (
-              <div class={styles.itemWrap}>
-                <div class={styles.itemWrapBox}>
-                  {index == 0 ? (
-                    <CardType
-                      {...{ id: 'shareResources-1' }}
-                      item={item}
-                      disabledMouseHover={false}
-                      onClick={(val: any) => {
-                        if (val.type === 'IMG') return;
-                        state.show = true;
-                        state.item = val;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                    />
-                  ) : (
-                    <CardType
-                      item={item}
-                      disabledMouseHover={false}
-                      onClick={(val: any) => {
-                        if (val.type === 'IMG') return;
-                        state.show = true;
-                        state.item = val;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                    />
-                  )}
-                </div>
-              </div>
-            ))}
-
-            {!state.loading && state.tableList.length <= 0 && (
-              <TheEmpty
-                style={{ minHeight: '50vh' }}
-                description="暂无共享资源"
-              />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-
-        {/* 添加自定义教材 */}
-        <NModal
-          v-model:show={state.teachingStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.teachingModal]}
-          title={'自定义教材'}
-          blockScroll={false}>
-          <AddTeaching onClose={() => (state.teachingStatus = false)} />
-        </NModal>
-        {showGuide.value ? <ShareResourcesGuide></ShareResourcesGuide> : null}
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { favorite, materialQueryPage } from '../../api';
+import { NModal, NSpin } from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+import CardPreview from '/src/components/card-preview';
+import AddTeaching from '../../model/add-teaching';
+import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide';
+
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 2
+      },
+      tableList: [] as any,
+      teachingStatus: false,
+      show: false,
+      item: {} as any
+    });
+    const showGuide = ref(false);
+    const SearchGroupResourcesRef = ref();
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      if (item.type === 'MUSIC') {
+        const { subjectId, ...res } = item;
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...res,
+          musicalInstrumentId: subjectId,
+          subjectId: null
+        });
+      } else {
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...item,
+          musicalInstrumentId: null
+        });
+      }
+      getList();
+    };
+
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources
+          ref={SearchGroupResourcesRef}
+          onSearch={(item: any) => onSearch(item)}
+          onAdd={() => (state.teachingStatus = true)}
+        />
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list}>
+            {state.tableList.map((item: any, index: number) => (
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  {index == 0 ? (
+                    <CardType
+                      {...{ id: 'shareResources-1' }}
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  ) : (
+                    <CardType
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty
+                style={{ minHeight: '50vh' }}
+                description="暂无共享资源"
+              />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+
+        {/* 添加自定义教材 */}
+        <NModal
+          v-model:show={state.teachingStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.teachingModal]}
+          title={'自定义教材'}
+          blockScroll={false}>
+          <AddTeaching onClose={() => (state.teachingStatus = false)} />
+        </NModal>
+        {showGuide.value ? <ShareResourcesGuide></ShareResourcesGuide> : null}
+      </>
+    );
+  }
+});

src/views/prepare-lessons/api.ts

@@ -1,289 +1,297 @@
-import request from '@/utils/request';
-
-/**
- * 备课 - 教学课件
- */
-export const lessonCoursewarePage = (params: any) => {
-  return request.post('/edu-app/lessonCourseware/page', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 教学课件详情
- */
-export const lessonCoursewareDetail = (params: any) => {
-  return request.get('/edu-app/lessonCourseware/detail/' + params.id, {
-    params: params
-  });
-};
-
-/**
- * 备课 - 教学课件删除
- */
-export const lessonCoursewareRemove = (params: any) => {
-  return request.post('/edu-app/lessonCourseware/remove', {
-    requestType: 'form',
-    data: params
-  });
-};
-
-/**
- * 备课 - 课件列表
- */
-export const queryCourseware = (params: any) => {
-  return request.post('/edu-app/teacherKnowledgeMaterial/queryCourseware', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 保存课件
- */
-export const saveCourseware = (params: any) => {
-  return request.post('/edu-app/teacherKnowledgeMaterial/saveCourseware', {
-    data: params
-  });
-};
-/**
- * 备课 - 删除课件
- */
-export const teacherKnowledgeMaterialDelete = (params: any) => {
-  return request.post('/edu-app/teacherKnowledgeMaterial/delete', {
-    requestType: 'form',
-    data: params
-  });
-};
-
-/**
- * 备课 - 训练列表
- */
-export const lessonPreTrainingPage = (params: any) => {
-  return request.post('/edu-app/lessonPreTraining/page', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 新增训练
- */
-export const lessonPreTrainingAdd = (params: any) => {
-  return request.post('/edu-app/lessonPreTraining/add', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 修改训练
- */
-export const lessonPreTrainingUpdate = (params: any) => {
-  return request.post('/edu-app/lessonPreTraining/update', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 删除训练
- */
-export const lessonPreTrainingDelete = (params: any) => {
-  return request.post('/edu-app/lessonPreTraining/delete?ids=' + params.ids, {
-    data: params
-  });
-};
-
-/**
- * 备课 - 保存预训练曲目
- */
-export const lessonPreTrainingBatchSave = (params: any) => {
-  return request.post('/edu-app/lessonPreTraining/batchSave', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 乐谱列表
- */
-export const musicSheetPage = (params: any) => {
-  return request.post('/edu-app/musicSheet/page', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 班级列表
- */
-export const classGroupPage = (params: any) => {
-  return request.post('/edu-app/classGroup/page', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 布置作业
- */
-export const lessonTrainingAdd = (params: any) => {
-  return request.post('/edu-app/lessonTraining/add', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 开始上课
- */
-export const courseScheduleStart = (params: any) => {
-  return request.post('/edu-app/courseSchedule/start', {
-    data: params
-  });
-};
-
-/**
- * 备课 - 音乐教材版本
- */
-export const bookVersionPage = (params?: any) => {
-  return request.post('/edu-app/bookVersion/page', {
-    data: params
-  });
-};
-/**
- * 备课 - 使用课件打标记
- */
-export const tagUseCourseware = (params?: any) => {
-  return request.post('/edu-app/teacherKnowledgeMaterial/tagUseCourseware', {
-    requestType: 'form',
-    data: params
-  });
-};
-/**
- * 备课 - 更新上课记录
- */
-export const courseScheduleUpdate = (params?: any) => {
-  return request.post('/edu-app/courseSchedule/update', {
-    data: params
-  });
-};
-
-/**
- * 评测详情
- */
-export const musicPracticeRecordDetail = (params: any) => {
-  return request.get('/edu-app/musicPracticeRecord/detail/' + params.id, {
-    params: params
-  });
-};
-
-/**
- * 预设作业列表
- */
-export const lessonPreTrainingV2Page = (params: any) => {
-  return request.post('/edu-app/lessonPreTrainingV2/page', {
-    data: params
-  });
-};
-
-/**
- * 预设作业 添加/修改
- */
-export const lessonPreTrainingV2Save = (params: any) => {
-  return request.post('/edu-app/lessonPreTrainingV2/save', {
-    data: params
-  });
-};
-
-/**
- * 预设作业 删除
- */
-export const lessonPreTrainingV2Remove = (params: any) => {
-  return request.post('/edu-app/lessonPreTrainingV2/remove', {
-    data: params,
-    requestType: 'form'
-  });
-};
-
-/**
- * 预设作业 详情
- */
-export const lessonPreTrainingV2Detail = (params: any) => {
-  return request.get('/edu-app/lessonPreTrainingV2/detail/' + params.id);
-};
-
-/**
- * 课件列表
- */
-export const teacherChapterLessonCoursewareList = (params: any) => {
-  return request.post('/edu-app/teacherChapterLessonCourseware/list', {
-    data: params
-  });
-};
-
-/**
- * 课件 修改信息
- */
-export const api_updateCoursewareInfo = (params: any) => {
-  return request.post(
-    '/edu-app/teacherChapterLessonCourseware/updateCoursewareInfo',
-    {
-      data: params
-    }
-  );
-};
-
-/**
- * 课件 查询公开课件列表
- */
-export const api_queryOpenCoursewareByPage = (params: any) => {
-  return request.post(
-    '/edu-app/teacherChapterLessonCourseware/queryOpenCoursewareByPage',
-    {
-      data: params
-    }
-  );
-};
-
-/**
- * 课件 新增公开课件到我的课件
- */
-export const api_addByOpenCourseware = (params: any) => {
-  return request.post(
-    '/edu-app/teacherChapterLessonCourseware/addByOpenCourseware',
-    {
-      data: params
-    }
-  );
-};
-
-/**
- * 课件 新增课件
- */
-export const api_teacherChapterLessonCoursewareAdd = (params: any) => {
-  return request.post('/edu-app/teacherChapterLessonCourseware/add', {
-    data: params
-  });
-};
-
-/**
- * 课件 删除我的课件
- */
-export const api_teacherChapterLessonCoursewareRemove = (params: any) => {
-  return request.post(
-    '/edu-app/teacherChapterLessonCourseware/remove?id=' + params.id,
-    {
-      requestType: 'form'
-    }
-  );
-};
-
-/**
- * 课件 修改我的课件
- */
-export const api_teacherChapterLessonCoursewareUpdate = (params: any) => {
-  return request.post('/edu-app/teacherChapterLessonCourseware/update', {
-    data: params
-  });
-};
-
-/**
- * 课件 课件详情
- */
-export const api_teacherChapterLessonCoursewareDetail = (id: string) => {
-  return request.get('/edu-app/teacherChapterLessonCourseware/detail/' + id);
-};
+import request from '@/utils/request';
+
+/**
+ * 备课 - 教学课件
+ */
+export const lessonCoursewarePage = (params: any) => {
+  return request.post('/edu-app/lessonCourseware/page', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 教学课件详情
+ */
+export const lessonCoursewareDetail = (params: any) => {
+  return request.get('/edu-app/lessonCourseware/detail/' + params.id, {
+    params: params
+  });
+};
+
+/**
+ * 备课 - 教学课件删除
+ */
+export const lessonCoursewareRemove = (params: any) => {
+  return request.post('/edu-app/lessonCourseware/remove', {
+    requestType: 'form',
+    data: params
+  });
+};
+
+/**
+ * 备课 - 课件列表
+ */
+export const queryCourseware = (params: any) => {
+  return request.post('/edu-app/teacherKnowledgeMaterial/queryCourseware', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 保存课件
+ */
+export const saveCourseware = (params: any) => {
+  return request.post('/edu-app/teacherKnowledgeMaterial/saveCourseware', {
+    data: params
+  });
+};
+/**
+ * 备课 - 删除课件
+ */
+export const teacherKnowledgeMaterialDelete = (params: any) => {
+  return request.post('/edu-app/teacherKnowledgeMaterial/delete', {
+    requestType: 'form',
+    data: params
+  });
+};
+
+/**
+ * 备课 - 训练列表
+ */
+export const lessonPreTrainingPage = (params: any) => {
+  return request.post('/edu-app/lessonPreTraining/page', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 新增训练
+ */
+export const lessonPreTrainingAdd = (params: any) => {
+  return request.post('/edu-app/lessonPreTraining/add', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 修改训练
+ */
+export const lessonPreTrainingUpdate = (params: any) => {
+  return request.post('/edu-app/lessonPreTraining/update', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 删除训练
+ */
+export const lessonPreTrainingDelete = (params: any) => {
+  return request.post('/edu-app/lessonPreTraining/delete?ids=' + params.ids, {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 保存预训练曲目
+ */
+export const lessonPreTrainingBatchSave = (params: any) => {
+  return request.post('/edu-app/lessonPreTraining/batchSave', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 乐谱列表
+ */
+export const musicSheetPage = (params: any) => {
+  return request.post('/edu-app/musicSheet/page', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 班级列表
+ */
+export const classGroupPage = (params: any) => {
+  return request.post('/edu-app/classGroup/page', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 布置作业
+ */
+export const lessonTrainingAdd = (params: any) => {
+  return request.post('/edu-app/lessonTraining/add', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 开始上课
+ */
+export const courseScheduleStart = (params: any) => {
+  return request.post('/edu-app/courseSchedule/start', {
+    data: params
+  });
+};
+
+/**
+ * 备课 - 音乐教材版本
+ */
+export const bookVersionPage = (params?: any) => {
+  return request.post('/edu-app/bookVersion/page', {
+    data: params
+  });
+};
+/**
+ * 备课 - 使用课件打标记
+ */
+export const tagUseCourseware = (params?: any) => {
+  return request.post('/edu-app/teacherKnowledgeMaterial/tagUseCourseware', {
+    requestType: 'form',
+    data: params
+  });
+};
+/**
+ * 备课 - 更新上课记录
+ */
+export const courseScheduleUpdate = (params?: any) => {
+  return request.post('/edu-app/courseSchedule/update', {
+    data: params
+  });
+};
+
+/**
+ * 评测详情
+ */
+export const musicPracticeRecordDetail = (params: any) => {
+  return request.get('/edu-app/musicPracticeRecord/detail/' + params.id, {
+    params: params
+  });
+};
+
+/**
+ * 预设作业列表
+ */
+export const lessonPreTrainingV2Page = (params: any) => {
+  return request.post('/edu-app/lessonPreTrainingV2/page', {
+    data: params
+  });
+};
+
+/**
+ * 预设作业 添加/修改
+ */
+export const lessonPreTrainingV2Save = (params: any) => {
+  return request.post('/edu-app/lessonPreTrainingV2/save', {
+    data: params
+  });
+};
+
+/**
+ * 预设作业 删除
+ */
+export const lessonPreTrainingV2Remove = (params: any) => {
+  return request.post('/edu-app/lessonPreTrainingV2/remove', {
+    data: params,
+    requestType: 'form'
+  });
+};
+
+/**
+ * 预设作业 详情
+ */
+export const lessonPreTrainingV2Detail = (params: any) => {
+  return request.get('/edu-app/lessonPreTrainingV2/detail/' + params.id);
+};
+
+/**
+ * 课件列表
+ */
+export const teacherChapterLessonCoursewareList = (params: any) => {
+  return request.post('/edu-app/teacherChapterLessonCourseware/list', {
+    data: params
+  });
+};
+
+/**
+ * 课件 修改信息
+ */
+export const api_updateCoursewareInfo = (params: any) => {
+  return request.post(
+    '/edu-app/teacherChapterLessonCourseware/updateCoursewareInfo',
+    {
+      data: params
+    }
+  );
+};
+
+/**
+ * 课件 查询公开课件列表
+ */
+export const api_queryOpenCoursewareByPage = (params: any) => {
+  return request.post(
+    '/edu-app/teacherChapterLessonCourseware/queryOpenCoursewareByPage',
+    {
+      data: params
+    }
+  );
+};
+
+/**
+ * 课件 新增公开课件到我的课件
+ */
+export const api_addByOpenCourseware = (params: any) => {
+  return request.post(
+    '/edu-app/teacherChapterLessonCourseware/addByOpenCourseware',
+    {
+      data: params
+    }
+  );
+};
+
+/**
+ * 课件 新增课件
+ */
+export const api_teacherChapterLessonCoursewareAdd = (params: any) => {
+  return request.post('/edu-app/teacherChapterLessonCourseware/add', {
+    data: params
+  });
+};
+
+/**
+ * 课件 删除我的课件
+ */
+export const api_teacherChapterLessonCoursewareRemove = (params: any) => {
+  return request.post(
+    '/edu-app/teacherChapterLessonCourseware/remove?id=' + params.id,
+    {
+      requestType: 'form'
+    }
+  );
+};
+
+/**
+ * 课件 修改我的课件
+ */
+export const api_teacherChapterLessonCoursewareUpdate = (params: any) => {
+  return request.post('/edu-app/teacherChapterLessonCourseware/update', {
+    data: params
+  });
+};
+
+/**
+ * 课件 课件详情
+ */
+export const api_teacherChapterLessonCoursewareDetail = (id: string) => {
+  return request.get('/edu-app/teacherChapterLessonCourseware/detail/' + id);
+};
+
+/**
+ *  @description: 后台 素材详情
+ * @param params
+ */
+export const api_materialDetail = (id: string) => {
+  return request.get('/edu-app/teacherChapterLessonCourseware/detail/' + id);
+};

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.tsx

@@ -1,791 +1,795 @@
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NTooltip,
-  NIcon,
-  NImage,
-  NModal,
-  NScrollbar,
-  NSpin,
-  NTabPane,
-  NTabs,
-  useMessage,
-  NPopselect
-} from 'naive-ui';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import add from '@/views/studentList/images/add.png';
-// import iconSlideRight from '../../../images/icon-slide-right.png';
-import CoursewareType from '../../../model/courseware-type';
-import TheEmpty from '/src/components/TheEmpty';
-import RelatedClass from '../../../model/related-class';
-import { state } from '/src/state';
-import { useResizeObserver } from '@vueuse/core';
-import AttendClass from '/src/views/prepare-lessons/model/attend-class';
-import {
-  api_addByOpenCourseware,
-  api_teacherChapterLessonCoursewareRemove,
-  teacherChapterLessonCoursewareList,
-  courseScheduleStart
-} from '../../../api';
-import { useRoute, useRouter } from 'vue-router';
-import TheMessageDialog from '/src/components/TheMessageDialog';
-import { eventGlobal, fscreen } from '/src/utils';
-import PreviewWindow from '/src/views/preview-window';
-import Related from './related';
-import Train from '../train';
-import ResourceMain from '../../resource-main';
-
-export default defineComponent({
-  name: 'courseware-presets',
-  props: {
-    addParam: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const prepareStore = usePrepareStore();
-    const message = useMessage();
-    const route = useRoute();
-    const router = useRouter();
-    const localStorageSubjectId = localStorage.getItem(
-      'prepareLessonSubjectId'
-    );
-
-    const forms = reactive({
-      // 选取参数带的，后取缓存
-      leftWidth: '100%',
-      rightWidth: '0',
-      messageLoading: false,
-      instrumentId: route.query.instrumentId
-        ? Number(route.query.instrumentId)
-        : localStorageSubjectId
-        ? Number(localStorageSubjectId)
-        : '',
-      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
-      classGroupId: route.query.classGroupId,
-      preStudentNum: route.query.preStudentNum,
-      bodyWidth: '100%',
-      loading: false,
-      openLoading: false,
-      showRelatedClass: false,
-      tableList: [] as any,
-      openTableShow: true, // 是否显示
-      openTableList: [] as any,
-      selectItem: {} as any,
-      editTitleVisiable: false,
-      editTitle: null,
-      editBtnLoading: false,
-      preRemoveVisiable: false,
-      addVisiable: false, // 是否有添加的课件
-      carouselIndex: 0,
-      showAttendClass: false,
-      attendClassType: 'change', //
-      attendClassItem: {} as any,
-      previewModal: false,
-      previewParams: {
-        type: '',
-        courseId: '',
-        instrumentId: '',
-        detailId: ''
-      } as any,
-      workVisiable: false,
-      wikiCategoryIdChild: null
-    });
-
-    const getCoursewareList = async () => {
-      forms.loading = true;
-      try {
-        // 判断是否有选择对应的课件 或声部
-        if (!prepareStore.getSelectKey) return (forms.loading = false);
-
-        const { data } = await teacherChapterLessonCoursewareList({
-          instrumentId: prepareStore.getInstrumentId,
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey
-        });
-        if (!Array.isArray(data)) {
-          return;
-        }
-        const tempList: any = [];
-        data.forEach((item: any) => {
-          const firstItem: any =
-            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
-          tempList.push({
-            id: item.id,
-            lessonPreTrainingId: item.lessonPreTrainingId,
-            openFlag: item.openFlag,
-            openFlagEnable: item.openFlagEnable,
-            subjectNames: item.subjectNames,
-            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
-            name: item.name,
-            coverImg: firstItem?.bizInfo.coverImg,
-            type: firstItem?.bizInfo.type,
-            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
-          });
-        });
-        forms.tableList = tempList;
-      } catch {
-        //
-      }
-      forms.loading = false;
-    };
-
-    // 监听选择的key 左侧选择了其它的课
-    watch(
-      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
-      async () => {
-        eventGlobal.emit('openCoursewareChanged');
-        await getCoursewareList();
-        // await getOpenCoursewareList();
-
-        subjectRef.value?.syncBarPosition();
-      }
-    );
-
-    watch(
-      () => prepareStore.getInstrumentList,
-      () => {
-        checkInstrumentIds();
-      }
-    );
-
-    const checkInstrumentIds = () => {
-      const instrumentsList = prepareStore.getSingleInstrumentList;
-
-      // 并且没有声部时才会更新
-      if (instrumentsList.length > 0) {
-        const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
-          'prepareLessonCourseWareSubjectIsNull'
-        );
-        if (prepareLessonCourseWareSubjectIsNull === 'true') {
-          prepareStore.setInstrumentId('');
-          return;
-        }
-
-        // 并且声部在列表中
-        const localStorageSubjectId = localStorage.getItem(
-          'prepareLessonSubjectId'
-        );
-        // // 先取 上次上课声部，在取班级声部 最后取缓存
-        let instrumentId = null;
-        let index = -1;
-        if (forms.courseScheduleSubjectId) {
-          // 判断浏览器上面是否有
-          index = instrumentsList.findIndex(
-            (subject: any) => subject.id == forms.courseScheduleSubjectId
-          );
-          if (index >= 0) {
-            instrumentId = Number(forms.courseScheduleSubjectId);
-          }
-        }
-        // 判断班级上面声部 & 还没有声部
-        if (forms.instrumentId && !instrumentId) {
-          // 判断浏览器上面是否有
-          index = instrumentsList.findIndex(
-            (subject: any) => subject.id == forms.instrumentId
-          );
-          if (index >= 0) {
-            instrumentId = Number(forms.instrumentId);
-          }
-        }
-        // 缓存声部 & 还没有声部
-        if (localStorageSubjectId && !instrumentId) {
-          // 判断浏览器上面是否有
-          index = instrumentsList.findIndex(
-            (subject: any) => subject.id == localStorageSubjectId
-          );
-          if (index >= 0) {
-            instrumentId = Number(localStorageSubjectId);
-          }
-        }
-        // 判断是否选择为空
-        if (instrumentId && index >= 0) {
-          prepareStore.setSubjectId(instrumentId);
-          // forms.instrumentId = instrumentId;
-        } else {
-          // 判断是否有缓存
-          // prepareStore.setSubjectId(instrumentsList[0].id);
-          // forms.instrumentId = instrumentsList[0].id;
-        }
-
-        // 保存
-        localStorage.setItem(
-          'prepareLessonSubjectId',
-          prepareStore.getInstrumentId as any
-        );
-
-        subjectRef.value?.syncBarPosition();
-      }
-    };
-
-    const getInitInstrumentId = () => {
-      let instrumentId: any = '';
-      prepareStore.getInstrumentList.forEach((item: any) => {
-        if (Array.isArray(item.instruments)) {
-          item.instruments.forEach((child: any) => {
-            if (child.id === prepareStore.getInstrumentId) {
-              instrumentId = child.id;
-            }
-          });
-        }
-      });
-      if (instrumentId) {
-        forms.wikiCategoryIdChild = instrumentId;
-      }
-    };
-    const subjectRef = ref();
-    onMounted(async () => {
-      useResizeObserver(
-        document.querySelector('#presetsLeftRef') as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { width } = entry.contentRect;
-          forms.leftWidth = width + 'px';
-        }
-      );
-      useResizeObserver(
-        document.querySelector('#presetsRightRef') as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { width } = entry.contentRect;
-          forms.rightWidth = width + 'px';
-        }
-      );
-
-      prepareStore.setClassGroupId(route.query.classGroupId as any);
-      if (!prepareStore.getInstrumentId) {
-        // 获取教材分类列表
-        checkInstrumentIds();
-      } else {
-        getInitInstrumentId();
-      }
-
-      await getCoursewareList();
-
-      if (props.addParam.isAdd) {
-        forms.addVisiable = true;
-      }
-    });
-
-    // 删除
-    const onRemove = async () => {
-      forms.messageLoading = true;
-      try {
-        await api_teacherChapterLessonCoursewareRemove({
-          id: forms.selectItem.id
-        });
-        message.success('删除成功');
-        getCoursewareList();
-        // getOpenCoursewareList();
-        eventGlobal.emit('openCoursewareChanged');
-        forms.preRemoveVisiable = false;
-      } catch {
-        //
-      }
-      setTimeout(() => {
-        forms.messageLoading = false;
-      }, 100);
-    };
-
-    // 添加课件
-    const onAddCourseware = async (item: any) => {
-      if (forms.messageLoading) return;
-      forms.messageLoading = true;
-      try {
-        await api_addByOpenCourseware({ id: item.id });
-        message.success('添加成功');
-        getCoursewareList();
-        // getOpenCoursewareList();
-        eventGlobal.emit('openCoursewareChanged');
-      } catch {
-        //
-      }
-      setTimeout(() => {
-        forms.messageLoading = false;
-      }, 100);
-    };
-
-    // 预览上课
-    const onPreviewAttend = (id: string) => {
-      // 判断是否在应用里面
-      if (window.matchMedia('(display-mode: standalone)').matches) {
-        state.application = window.matchMedia(
-          '(display-mode: standalone)'
-        ).matches;
-        forms.previewModal = true;
-        fscreen();
-        forms.previewParams = {
-          type: 'preview',
-          courseId: id,
-          instrumentId: prepareStore.getInstrumentId,
-          detailId: prepareStore.getSelectKey,
-          lessonCourseId: prepareStore.getBaseCourseware.id
-        };
-      } else {
-        const { href } = router.resolve({
-          path: '/attend-class',
-          query: {
-            type: 'preview',
-            courseId: id,
-            instrumentId: prepareStore.getInstrumentId,
-            detailId: prepareStore.getSelectKey,
-            lessonCourseId: prepareStore.getBaseCourseware.id
-          }
-        });
-        window.open(href, +new Date() + '');
-      }
-    };
-
-    const onStartClass = async (
-      item: any,
-      classGroupId: any,
-      instrumentId?: any
-    ) => {
-      if (classGroupId) {
-        // 开始上课
-        const res = await courseScheduleStart({
-          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
-          classGroupId: classGroupId,
-          useChapterLessonCoursewareId: item.id
-          // instrumentId: prepareStore.getInstrumentId
-        });
-        if (window.matchMedia('(display-mode: standalone)').matches) {
-          state.application = window.matchMedia(
-            '(display-mode: standalone)'
-          ).matches;
-          forms.previewModal = true;
-          fscreen();
-          forms.previewParams = {
-            type: 'class',
-            classGroupId: classGroupId,
-            courseId: item.id,
-            instrumentId: instrumentId || route.query.instrumentId,
-            detailId: prepareStore.getSelectKey,
-            classId: res.data,
-            lessonCourseId: prepareStore.getBaseCourseware.id,
-            preStudentNum: forms.preStudentNum
-          };
-        } else {
-          const { href } = router.resolve({
-            path: '/attend-class',
-            query: {
-              type: 'class',
-              classGroupId: classGroupId,
-              courseId: item.id,
-              instrumentId: prepareStore.getInstrumentId,
-              detailId: prepareStore.getSelectKey,
-              classId: res.data,
-              lessonCourseId: prepareStore.getBaseCourseware.id,
-              preStudentNum: forms.preStudentNum
-            }
-          });
-          window.open(href, +new Date() + '');
-        }
-      } else {
-        forms.showAttendClass = true;
-        forms.attendClassType = 'change';
-        forms.attendClassItem = item;
-      }
-    };
-
-    const selectChildObj = (item: any, index: number) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.wikiCategoryIdChild) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-
-    const tabInstrumentValue = computed(() => {
-      let instrumentId: any = prepareStore.getInstrumentId
-        ? prepareStore.getInstrumentId
-        : '';
-      prepareStore.getInstrumentList.forEach((item: any) => {
-        if (Array.isArray(item.instruments)) {
-          item.instruments.forEach((child: any) => {
-            if (child.id === prepareStore.getInstrumentId) {
-              instrumentId = item.id + '';
-            }
-          });
-        }
-      });
-      return instrumentId;
-    });
-    return () => (
-      <div
-        class={[
-          styles.coursewarePresetsContainer,
-          forms.openTableShow && styles.rightLineShow
-        ]}>
-        <div
-          class={styles.presetsLeft}
-          id="presetsLeftRef"
-          style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
-          <NTabs
-            ref={subjectRef}
-            defaultValue=""
-            paneClass={styles.paneTitle}
-            justifyContent="start"
-            paneWrapperClass={styles.paneWrapperContainer}
-            value={tabInstrumentValue.value}
-            onUpdate:value={(val: any) => {
-              prepareStore.getInstrumentList.forEach((item: any) => {
-                if (item.id.toString() === val.toString()) {
-                  prepareStore.setInstrumentId(val);
-                  // 保存
-                  forms.instrumentId = val;
-                  forms.wikiCategoryIdChild = null;
-                }
-              });
-
-              if (!val) {
-                sessionStorage.setItem(
-                  'prepareLessonCourseWareSubjectIsNull',
-                  val ? 'false' : 'true'
-                );
-              }
-            }}
-            v-slots={{
-              suffix: () => (
-                <NButton
-                  class={styles.addBtn}
-                  type="primary"
-                  bordered={false}
-                  onClick={() => {
-                    eventGlobal.emit('teacher-slideshow', true);
-                    emit('change', {
-                      status: true,
-                      type: 'create'
-                    });
-                  }}>
-                  <NImage
-                    class={styles.addBtnIcon}
-                    previewDisabled
-                    src={add}></NImage>
-                  创建课件
-                </NButton>
-              )
-            }}>
-            {[
-              { name: '全部乐器', id: '' },
-              ...prepareStore.getFormatInstrumentList
-            ].map((item: any, index: number) => (
-              <NTabPane
-                name={`${item.id}`}
-                tab={item.name}
-                disabled={item.instruments?.length > 0}
-                displayDirective="if">
-                {{
-                  tab: () =>
-                    item.instruments?.length > 0 ? (
-                      <NPopselect
-                        options={item.instruments}
-                        trigger="hover"
-                        v-model:value={forms.wikiCategoryIdChild}
-                        onUpdate:value={(val: any) => {
-                          // onSearch();
-                          prepareStore.setInstrumentId(val);
-                          // 保存
-                          forms.instrumentId = val;
-
-                          if (!val) {
-                            sessionStorage.setItem(
-                              'prepareLessonCourseWareSubjectIsNull',
-                              val ? 'false' : 'true'
-                            );
-                          }
-                        }}
-                        key={item.id}
-                        class={styles.popSelect}>
-                        <span
-                          class={[
-                            styles.textBtn,
-                            selectChildObj(item.instruments, index).selected &&
-                              styles.textBtnActive
-                          ]}>
-                          {selectChildObj(item.instruments, index).name ||
-                            item.name}
-                          <i class={styles.iconArrow}></i>
-                        </span>
-                      </NPopselect>
-                    ) : (
-                      item.name
-                    )
-                }}
-              </NTabPane>
-            ))}
-          </NTabs>
-          <NSpin show={forms.loading}>
-            <NScrollbar class={styles.coursewarePresets}>
-              <div style={{ overflow: 'hidden' }}>
-                <div
-                  class={[
-                    styles.list,
-                    !forms.loading &&
-                      forms.tableList.length <= 0 &&
-                      styles.listEmpty
-                  ]}>
-                  {forms.tableList.map((item: any) => (
-                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
-                      <div class={styles.itemWrapBox}>
-                        <CoursewareType
-                          operate
-                          isEditName
-                          item={item}
-                          onClick={() => onPreviewAttend(item.id)}
-                          // onEditName={() => {
-                          //   forms.selectItem = item;
-                          //   forms.editTitle = item.name;
-                          //   forms.editTitleVisiable = true;
-                          // }}
-                          onEdit={() => {
-                            //
-                            eventGlobal.emit('teacher-slideshow', true);
-                            emit('change', {
-                              status: true,
-                              type: 'update',
-                              groupItem: { id: item.id }
-                            });
-                          }}
-                          onStartClass={() =>
-                            onStartClass(item, forms.classGroupId)
-                          }
-                          onDelete={() => {
-                            forms.selectItem = item;
-                            forms.preRemoveVisiable = true;
-                          }}
-                          // 布置作业
-                          onWork={() => {
-                            forms.workVisiable = true;
-                            forms.selectItem = item;
-                          }}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                  {!forms.loading && forms.tableList.length <= 0 && (
-                    <TheEmpty
-                      class={styles.empty1}
-                      description="当前章节暂无课件，快点击右上角创建课件吧"
-                    />
-                  )}
-                </div>
-              </div>
-            </NScrollbar>
-          </NSpin>
-        </div>
-
-        <div class={styles.presetsRight} id="presetsRightRef">
-          <NTooltip showArrow={false} animated={false} duration={0} delay={0}>
-            {{
-              trigger: () => (
-                <div
-                  class={[
-                    styles.presetsArrar,
-                    !forms.openTableShow && styles.presetsArrarActive
-                  ]}
-                  onClick={() => (forms.openTableShow = !forms.openTableShow)}>
-                  <NIcon>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                      <path
-                        d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"
-                        fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </div>
-              ),
-              default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
-            }}
-          </NTooltip>
-
-          <Related
-            onMore={() => (forms.showRelatedClass = true)}
-            onAdd={(item: any) => {
-              onAddCourseware(item);
-            }}
-            onLook={(item: any) => {
-              onPreviewAttend(item.id);
-            }}
-          />
-        </div>
-        {/* )} */}
-
-        <NModal
-          v-model:show={forms.showRelatedClass}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal1]}
-          title={'相关课件'}
-          blockScroll={false}>
-          <RelatedClass
-            tableList={forms.tableList}
-            instrumentList={prepareStore.getInstrumentList}
-            instrumentId={prepareStore.getInstrumentId as any}
-            coursewareDetailKnowledgeId={prepareStore.getSelectKey}
-            onClose={() => (forms.showRelatedClass = false)}
-            onAdd={(item: any) => onAddCourseware(item)}
-            onClick={(item: any) => {
-              onPreviewAttend(item.id);
-              forms.showRelatedClass = false;
-            }}
-          />
-        </NModal>
-
-        {/* <NModal
-          v-model:show={forms.editTitleVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'课件重命名'}>
-          <div class={styles.studentRemove}>
-            <NInput
-              placeholder="请输入课件名称"
-              v-model:value={forms.editTitle}
-              maxlength={15}
-              onKeyup={(e: any) => {
-                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
-                  e.stopPropagation();
-                }
-              }}
-            />
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
-                取消
-              </NButton>
-              <NButton
-                round
-                type="primary"
-                onClick={onEditTitleSubmit}
-                loading={forms.editBtnLoading}>
-                确定
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal> */}
-
-        <NModal
-          v-model:show={forms.preRemoveVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'删除课件'}>
-          <TheMessageDialog
-            content={`<p style="text-align: left;">请确认是否删除【${forms.selectItem.name}】，删除后不可恢复</p>`}
-            cancelButtonText="取消"
-            confirmButtonText="确认"
-            loading={forms.messageLoading}
-            onClose={() => (forms.preRemoveVisiable = false)}
-            onConfirm={() => onRemove()}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={forms.addVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'保存成功'}>
-          <TheMessageDialog
-            content={`<p style="text-align: left;">【${props.addParam.name}】暂未设置课件作业，是否现在去设置课件作业</p>`}
-            cancelButtonText="稍后设置"
-            confirmButtonText="立即设置"
-            // loading={forms.messageLoading}
-            onClose={() => (forms.addVisiable = false)}
-            onConfirm={() => {
-              forms.addVisiable = false;
-              forms.workVisiable = true;
-              forms.selectItem = {
-                id: props.addParam.id,
-                name: props.addParam.name
-              };
-            }}
-          />
-        </NModal>
-
-        {/* 应用内预览或上课 */}
-        <PreviewWindow
-          v-model:show={forms.previewModal}
-          type="attend"
-          params={forms.previewParams}
-        />
-
-        <NModal
-          v-model:show={forms.showAttendClass}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal]}
-          title={'选择班级'}
-          blockScroll={false}>
-          <AttendClass
-            onClose={() => (forms.showAttendClass = false)}
-            type={forms.attendClassType}
-            onPreview={(item: any) => {
-              if (window.matchMedia('(display-mode: standalone)').matches) {
-                state.application = window.matchMedia(
-                  '(display-mode: standalone)'
-                ).matches;
-                forms.previewModal = true;
-                forms.previewParams = {
-                  ...item
-                };
-              } else {
-                const { href } = router.resolve({
-                  path: '/attend-class',
-                  query: {
-                    ...item
-                  }
-                });
-                window.open(href, +new Date() + '');
-              }
-            }}
-            onConfirm={async (item: any) => {
-              onStartClass(
-                forms.attendClassItem,
-                item.classGroupId,
-                item.instrumentId
-              );
-            }}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={forms.workVisiable}
-          preset="card"
-          class={['modalTitle background', styles.workVisiable]}
-          title={
-            forms.selectItem.lessonPreTrainingId ? '编辑作业' : '创建作业'
-          }>
-          <div id="model-homework-height" class={styles.workContainer}>
-            <div class={styles.workTrain}>
-              <Train
-                cardType="prepare"
-                lessonPreTraining={{
-                  title: forms.selectItem.name + '-课后作业',
-                  chapterId: forms.selectItem.id, // 课件编号
-                  id: forms.selectItem.lessonPreTrainingId // 作业编号
-                }}
-                onChange={(val: any) => {
-                  forms.workVisiable = val.status;
-                  getCoursewareList();
-                }}
-              />
-            </div>
-            <div class={styles.resourceMain}>
-              <ResourceMain cardType="prepare" />
-            </div>
-          </div>
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NTooltip,
+  NIcon,
+  NImage,
+  NModal,
+  NScrollbar,
+  NSpin,
+  NTabPane,
+  NTabs,
+  useMessage,
+  NPopselect
+} from 'naive-ui';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import add from '@/views/studentList/images/add.png';
+// import iconSlideRight from '../../../images/icon-slide-right.png';
+import CoursewareType from '../../../model/courseware-type';
+import TheEmpty from '/src/components/TheEmpty';
+import RelatedClass from '../../../model/related-class';
+import { state } from '/src/state';
+import { useResizeObserver } from '@vueuse/core';
+import AttendClass from '/src/views/prepare-lessons/model/attend-class';
+import {
+  api_addByOpenCourseware,
+  api_teacherChapterLessonCoursewareRemove,
+  teacherChapterLessonCoursewareList,
+  courseScheduleStart
+} from '../../../api';
+import { useRoute, useRouter } from 'vue-router';
+import TheMessageDialog from '/src/components/TheMessageDialog';
+import { eventGlobal, fscreen } from '/src/utils';
+import PreviewWindow from '/src/views/preview-window';
+import Related from './related';
+import Train from '../train';
+import ResourceMain from '../../resource-main';
+
+export default defineComponent({
+  name: 'courseware-presets',
+  props: {
+    addParam: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
+    const message = useMessage();
+    const route = useRoute();
+    const router = useRouter();
+    const localStorageSubjectId = localStorage.getItem(
+      'prepareLessonSubjectId'
+    );
+
+    const forms = reactive({
+      // 选取参数带的，后取缓存
+      leftWidth: '100%',
+      rightWidth: '0',
+      messageLoading: false,
+      instrumentId: route.query.instrumentId
+        ? Number(route.query.instrumentId)
+        : localStorageSubjectId
+        ? Number(localStorageSubjectId)
+        : '',
+      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
+      classGroupId: route.query.classGroupId,
+      preStudentNum: route.query.preStudentNum,
+      bodyWidth: '100%',
+      loading: false,
+      openLoading: false,
+      showRelatedClass: false,
+      tableList: [] as any,
+      openTableShow: true, // 是否显示
+      openTableList: [] as any,
+      selectItem: {} as any,
+      editTitleVisiable: false,
+      editTitle: null,
+      editBtnLoading: false,
+      preRemoveVisiable: false,
+      addVisiable: false, // 是否有添加的课件
+      carouselIndex: 0,
+      showAttendClass: false,
+      attendClassType: 'change', //
+      attendClassItem: {} as any,
+      previewModal: false,
+      previewParams: {
+        type: '',
+        courseId: '',
+        instrumentId: '',
+        detailId: ''
+      } as any,
+      workVisiable: false,
+      wikiCategoryIdChild: null
+    });
+
+    const getCoursewareList = async () => {
+      forms.loading = true;
+      try {
+        // 判断是否有选择对应的课件 或声部
+        if (!prepareStore.getSelectKey) return (forms.loading = false);
+
+        const { data } = await teacherChapterLessonCoursewareList({
+          instrumentId: prepareStore.getInstrumentId,
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey
+        });
+        if (!Array.isArray(data)) {
+          return;
+        }
+        const tempList: any = [];
+        data.forEach((item: any) => {
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            lessonPreTrainingId: item.lessonPreTrainingId,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            subjectNames: item.subjectNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type,
+            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
+          });
+        });
+        forms.tableList = tempList;
+      } catch {
+        //
+      }
+      forms.loading = false;
+    };
+
+    // 监听选择的key 左侧选择了其它的课
+    watch(
+      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
+      async () => {
+        eventGlobal.emit('openCoursewareChanged');
+        await getCoursewareList();
+        // await getOpenCoursewareList();
+
+        subjectRef.value?.syncBarPosition();
+      }
+    );
+
+    watch(
+      () => prepareStore.getInstrumentList,
+      () => {
+        checkInstrumentIds();
+      }
+    );
+
+    const checkInstrumentIds = () => {
+      const instrumentsList = prepareStore.getSingleInstrumentList;
+
+      // 并且没有声部时才会更新
+      if (instrumentsList.length > 0) {
+        const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
+          'prepareLessonCourseWareSubjectIsNull'
+        );
+        if (prepareLessonCourseWareSubjectIsNull === 'true') {
+          prepareStore.setInstrumentId('');
+          return;
+        }
+
+        // 并且声部在列表中
+        const localStorageSubjectId = localStorage.getItem(
+          'prepareLessonSubjectId'
+        );
+        // // 先取 上次上课声部，在取班级声部 最后取缓存
+        let instrumentId = null;
+        let index = -1;
+        if (forms.courseScheduleSubjectId) {
+          // 判断浏览器上面是否有
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == forms.courseScheduleSubjectId
+          );
+          if (index >= 0) {
+            instrumentId = Number(forms.courseScheduleSubjectId);
+          }
+        }
+        // 判断班级上面声部 & 还没有声部
+        if (forms.instrumentId && !instrumentId) {
+          // 判断浏览器上面是否有
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == forms.instrumentId
+          );
+          if (index >= 0) {
+            instrumentId = Number(forms.instrumentId);
+          }
+        }
+        // 缓存声部 & 还没有声部
+        if (localStorageSubjectId && !instrumentId) {
+          // 判断浏览器上面是否有
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == localStorageSubjectId
+          );
+          if (index >= 0) {
+            instrumentId = Number(localStorageSubjectId);
+          }
+        }
+        // 判断是否选择为空
+        if (instrumentId && index >= 0) {
+          prepareStore.setSubjectId(instrumentId);
+          // forms.instrumentId = instrumentId;
+        } else {
+          // 判断是否有缓存
+          // prepareStore.setSubjectId(instrumentsList[0].id);
+          // forms.instrumentId = instrumentsList[0].id;
+        }
+
+        // 保存
+        localStorage.setItem(
+          'prepareLessonSubjectId',
+          prepareStore.getInstrumentId as any
+        );
+
+        subjectRef.value?.syncBarPosition();
+      }
+    };
+
+    const getInitInstrumentId = () => {
+      let instrumentId: any = '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = child.id;
+            }
+          });
+        }
+      });
+      if (instrumentId) {
+        forms.wikiCategoryIdChild = instrumentId;
+      }
+    };
+    const subjectRef = ref();
+    onMounted(async () => {
+      useResizeObserver(
+        document.querySelector('#presetsLeftRef') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { width } = entry.contentRect;
+          forms.leftWidth = width + 'px';
+        }
+      );
+      useResizeObserver(
+        document.querySelector('#presetsRightRef') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { width } = entry.contentRect;
+          forms.rightWidth = width + 'px';
+        }
+      );
+
+      prepareStore.setClassGroupId(route.query.classGroupId as any);
+      if (!prepareStore.getInstrumentId) {
+        // 获取教材分类列表
+        checkInstrumentIds();
+      } else {
+        getInitInstrumentId();
+      }
+
+      await getCoursewareList();
+
+      if (props.addParam.isAdd) {
+        forms.addVisiable = true;
+      }
+    });
+
+    // 删除
+    const onRemove = async () => {
+      forms.messageLoading = true;
+      try {
+        await api_teacherChapterLessonCoursewareRemove({
+          id: forms.selectItem.id
+        });
+        message.success('删除成功');
+        getCoursewareList();
+        // getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
+        forms.preRemoveVisiable = false;
+      } catch {
+        //
+      }
+      setTimeout(() => {
+        forms.messageLoading = false;
+      }, 100);
+    };
+
+    // 添加课件
+    const onAddCourseware = async (item: any) => {
+      if (forms.messageLoading) return;
+      forms.messageLoading = true;
+      try {
+        await api_addByOpenCourseware({ id: item.id });
+        message.success('添加成功');
+        getCoursewareList();
+        // getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
+      } catch {
+        //
+      }
+      setTimeout(() => {
+        forms.messageLoading = false;
+      }, 100);
+    };
+
+    // 预览上课
+    const onPreviewAttend = (id: string) => {
+      // 判断是否在应用里面
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        state.application = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches;
+        forms.previewModal = true;
+        fscreen();
+        forms.previewParams = {
+          type: 'preview',
+          courseId: id,
+          instrumentId: prepareStore.getInstrumentId,
+          detailId: prepareStore.getSelectKey,
+          lessonCourseId: prepareStore.getBaseCourseware.id
+        };
+      } else {
+        const { href } = router.resolve({
+          path: '/attend-class',
+          query: {
+            type: 'preview',
+            courseId: id,
+            instrumentId: prepareStore.getInstrumentId,
+            detailId: prepareStore.getSelectKey,
+            lessonCourseId: prepareStore.getBaseCourseware.id
+          }
+        });
+        window.open(href, +new Date() + '');
+      }
+    };
+
+    const onStartClass = async (
+      item: any,
+      classGroupId: any,
+      instrumentId?: any
+    ) => {
+      if (classGroupId) {
+        // 开始上课
+        const res = await courseScheduleStart({
+          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
+          classGroupId: classGroupId,
+          useChapterLessonCoursewareId: item.id
+          // instrumentId: prepareStore.getInstrumentId
+        });
+        if (window.matchMedia('(display-mode: standalone)').matches) {
+          state.application = window.matchMedia(
+            '(display-mode: standalone)'
+          ).matches;
+          forms.previewModal = true;
+          fscreen();
+          forms.previewParams = {
+            type: 'class',
+            classGroupId: classGroupId,
+            courseId: item.id,
+            instrumentId: instrumentId || route.query.instrumentId,
+            detailId: prepareStore.getSelectKey,
+            classId: res.data,
+            lessonCourseId: prepareStore.getBaseCourseware.id,
+            preStudentNum: forms.preStudentNum
+          };
+        } else {
+          const { href } = router.resolve({
+            path: '/attend-class',
+            query: {
+              type: 'class',
+              classGroupId: classGroupId,
+              courseId: item.id,
+              instrumentId: prepareStore.getInstrumentId,
+              detailId: prepareStore.getSelectKey,
+              classId: res.data,
+              lessonCourseId: prepareStore.getBaseCourseware.id,
+              preStudentNum: forms.preStudentNum
+            }
+          });
+          window.open(href, +new Date() + '');
+        }
+      } else {
+        forms.showAttendClass = true;
+        forms.attendClassType = 'change';
+        forms.attendClassItem = item;
+      }
+    };
+
+    const selectChildObj = (item: any, index: number) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.wikiCategoryIdChild) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    const tabInstrumentValue = computed(() => {
+      let instrumentId: any = prepareStore.getInstrumentId
+        ? prepareStore.getInstrumentId
+        : '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = item.id + '';
+            }
+          });
+        }
+      });
+      return instrumentId;
+    });
+    return () => (
+      <div
+        class={[
+          styles.coursewarePresetsContainer,
+          forms.openTableShow && styles.rightLineShow
+        ]}>
+        <div
+          class={styles.presetsLeft}
+          id="presetsLeftRef"
+          style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
+          <NTabs
+            ref={subjectRef}
+            defaultValue=""
+            paneClass={styles.paneTitle}
+            justifyContent="start"
+            paneWrapperClass={styles.paneWrapperContainer}
+            value={tabInstrumentValue.value}
+            onUpdate:value={(val: any) => {
+              prepareStore.getInstrumentList.forEach((item: any) => {
+                if (item.id.toString() === val.toString()) {
+                  prepareStore.setInstrumentId(val);
+                  // 保存
+                  forms.instrumentId = val;
+                  forms.wikiCategoryIdChild = null;
+                }
+              });
+
+              if (!val) {
+                prepareStore.setInstrumentId(val);
+                // 保存
+                forms.instrumentId = val;
+                forms.wikiCategoryIdChild = null;
+                sessionStorage.setItem(
+                  'prepareLessonCourseWareSubjectIsNull',
+                  val ? 'false' : 'true'
+                );
+              }
+            }}
+            v-slots={{
+              suffix: () => (
+                <NButton
+                  class={styles.addBtn}
+                  type="primary"
+                  bordered={false}
+                  onClick={() => {
+                    eventGlobal.emit('teacher-slideshow', true);
+                    emit('change', {
+                      status: true,
+                      type: 'create'
+                    });
+                  }}>
+                  <NImage
+                    class={styles.addBtnIcon}
+                    previewDisabled
+                    src={add}></NImage>
+                  创建课件
+                </NButton>
+              )
+            }}>
+            {[
+              { name: '全部乐器', id: '' },
+              ...prepareStore.getFormatInstrumentList
+            ].map((item: any, index: number) => (
+              <NTabPane
+                name={`${item.id}`}
+                tab={item.name}
+                disabled={item.instruments?.length > 0}
+                displayDirective="if">
+                {{
+                  tab: () =>
+                    item.instruments?.length > 0 ? (
+                      <NPopselect
+                        options={item.instruments}
+                        trigger="hover"
+                        v-model:value={forms.wikiCategoryIdChild}
+                        onUpdate:value={(val: any) => {
+                          // onSearch();
+                          prepareStore.setInstrumentId(val);
+                          // 保存
+                          forms.instrumentId = val;
+
+                          if (!val) {
+                            sessionStorage.setItem(
+                              'prepareLessonCourseWareSubjectIsNull',
+                              val ? 'false' : 'true'
+                            );
+                          }
+                        }}
+                        key={item.id}
+                        class={styles.popSelect}>
+                        <span
+                          class={[
+                            styles.textBtn,
+                            selectChildObj(item.instruments, index).selected &&
+                              styles.textBtnActive
+                          ]}>
+                          {selectChildObj(item.instruments, index).name ||
+                            item.name}
+                          <i class={styles.iconArrow}></i>
+                        </span>
+                      </NPopselect>
+                    ) : (
+                      item.name
+                    )
+                }}
+              </NTabPane>
+            ))}
+          </NTabs>
+          <NSpin show={forms.loading}>
+            <NScrollbar class={styles.coursewarePresets}>
+              <div style={{ overflow: 'hidden' }}>
+                <div
+                  class={[
+                    styles.list,
+                    !forms.loading &&
+                      forms.tableList.length <= 0 &&
+                      styles.listEmpty
+                  ]}>
+                  {forms.tableList.map((item: any) => (
+                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
+                      <div class={styles.itemWrapBox}>
+                        <CoursewareType
+                          operate
+                          isEditName
+                          item={item}
+                          onClick={() => onPreviewAttend(item.id)}
+                          // onEditName={() => {
+                          //   forms.selectItem = item;
+                          //   forms.editTitle = item.name;
+                          //   forms.editTitleVisiable = true;
+                          // }}
+                          onEdit={() => {
+                            //
+                            eventGlobal.emit('teacher-slideshow', true);
+                            emit('change', {
+                              status: true,
+                              type: 'update',
+                              groupItem: { id: item.id }
+                            });
+                          }}
+                          onStartClass={() =>
+                            onStartClass(item, forms.classGroupId)
+                          }
+                          onDelete={() => {
+                            forms.selectItem = item;
+                            forms.preRemoveVisiable = true;
+                          }}
+                          // 布置作业
+                          onWork={() => {
+                            forms.workVisiable = true;
+                            forms.selectItem = item;
+                          }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                  {!forms.loading && forms.tableList.length <= 0 && (
+                    <TheEmpty
+                      class={styles.empty1}
+                      description="当前章节暂无课件，快点击右上角创建课件吧"
+                    />
+                  )}
+                </div>
+              </div>
+            </NScrollbar>
+          </NSpin>
+        </div>
+
+        <div class={styles.presetsRight} id="presetsRightRef">
+          <NTooltip showArrow={false} animated={false} duration={0} delay={0}>
+            {{
+              trigger: () => (
+                <div
+                  class={[
+                    styles.presetsArrar,
+                    !forms.openTableShow && styles.presetsArrarActive
+                  ]}
+                  onClick={() => (forms.openTableShow = !forms.openTableShow)}>
+                  <NIcon>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                      <path
+                        d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"
+                        fill="currentColor"></path>
+                    </svg>
+                  </NIcon>
+                </div>
+              ),
+              default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
+            }}
+          </NTooltip>
+
+          <Related
+            onMore={() => (forms.showRelatedClass = true)}
+            onAdd={(item: any) => {
+              onAddCourseware(item);
+            }}
+            onLook={(item: any) => {
+              onPreviewAttend(item.id);
+            }}
+          />
+        </div>
+        {/* )} */}
+
+        <NModal
+          v-model:show={forms.showRelatedClass}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal1]}
+          title={'相关课件'}
+          blockScroll={false}>
+          <RelatedClass
+            tableList={forms.tableList}
+            instrumentList={prepareStore.getInstrumentList}
+            instrumentId={prepareStore.getInstrumentId as any}
+            coursewareDetailKnowledgeId={prepareStore.getSelectKey}
+            onClose={() => (forms.showRelatedClass = false)}
+            onAdd={(item: any) => onAddCourseware(item)}
+            onClick={(item: any) => {
+              onPreviewAttend(item.id);
+              forms.showRelatedClass = false;
+            }}
+          />
+        </NModal>
+
+        {/* <NModal
+          v-model:show={forms.editTitleVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'课件重命名'}>
+          <div class={styles.studentRemove}>
+            <NInput
+              placeholder="请输入课件名称"
+              v-model:value={forms.editTitle}
+              maxlength={15}
+              onKeyup={(e: any) => {
+                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
+                  e.stopPropagation();
+                }
+              }}
+            />
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
+                取消
+              </NButton>
+              <NButton
+                round
+                type="primary"
+                onClick={onEditTitleSubmit}
+                loading={forms.editBtnLoading}>
+                确定
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal> */}
+
+        <NModal
+          v-model:show={forms.preRemoveVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'删除课件'}>
+          <TheMessageDialog
+            content={`<p style="text-align: left;">请确认是否删除【${forms.selectItem.name}】，删除后不可恢复</p>`}
+            cancelButtonText="取消"
+            confirmButtonText="确认"
+            loading={forms.messageLoading}
+            onClose={() => (forms.preRemoveVisiable = false)}
+            onConfirm={() => onRemove()}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={forms.addVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'保存成功'}>
+          <TheMessageDialog
+            content={`<p style="text-align: left;">【${props.addParam.name}】暂未设置课件作业，是否现在去设置课件作业</p>`}
+            cancelButtonText="稍后设置"
+            confirmButtonText="立即设置"
+            // loading={forms.messageLoading}
+            onClose={() => (forms.addVisiable = false)}
+            onConfirm={() => {
+              forms.addVisiable = false;
+              forms.workVisiable = true;
+              forms.selectItem = {
+                id: props.addParam.id,
+                name: props.addParam.name
+              };
+            }}
+          />
+        </NModal>
+
+        {/* 应用内预览或上课 */}
+        <PreviewWindow
+          v-model:show={forms.previewModal}
+          type="attend"
+          params={forms.previewParams}
+        />
+
+        <NModal
+          v-model:show={forms.showAttendClass}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal]}
+          title={'选择班级'}
+          blockScroll={false}>
+          <AttendClass
+            onClose={() => (forms.showAttendClass = false)}
+            type={forms.attendClassType}
+            onPreview={(item: any) => {
+              if (window.matchMedia('(display-mode: standalone)').matches) {
+                state.application = window.matchMedia(
+                  '(display-mode: standalone)'
+                ).matches;
+                forms.previewModal = true;
+                forms.previewParams = {
+                  ...item
+                };
+              } else {
+                const { href } = router.resolve({
+                  path: '/attend-class',
+                  query: {
+                    ...item
+                  }
+                });
+                window.open(href, +new Date() + '');
+              }
+            }}
+            onConfirm={async (item: any) => {
+              onStartClass(
+                forms.attendClassItem,
+                item.classGroupId,
+                item.instrumentId
+              );
+            }}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={forms.workVisiable}
+          preset="card"
+          class={['modalTitle background', styles.workVisiable]}
+          title={
+            forms.selectItem.lessonPreTrainingId ? '编辑作业' : '创建作业'
+          }>
+          <div id="model-homework-height" class={styles.workContainer}>
+            <div class={styles.workTrain}>
+              <Train
+                cardType="prepare"
+                lessonPreTraining={{
+                  title: forms.selectItem.name + '-课后作业',
+                  chapterId: forms.selectItem.id, // 课件编号
+                  id: forms.selectItem.lessonPreTrainingId // 作业编号
+                }}
+                onChange={(val: any) => {
+                  forms.workVisiable = val.status;
+                  getCoursewareList();
+                }}
+              />
+            </div>
+            <div class={styles.resourceMain}>
+              <ResourceMain cardType="prepare" />
+            </div>
+          </div>
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -1,986 +1,1013 @@
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './addCourseware.module.less';
-import {
-  NButton,
-  NModal,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  NSpin,
-  useMessage,
-  useDialog,
-  NSwitch,
-  NInput,
-  NTooltip,
-  NImage,
-  NIcon,
-  NForm,
-  NFormItem
-} from 'naive-ui';
-import CardType from '/src/components/card-type';
-// import AttendClass from '/src/views/prepare-lessons/model/attend-class';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-// import { useCatchStore } from '/src/store/modules/catchData';
-// import TheEmpty from '/src/components/TheEmpty';
-import {
-  api_teacherChapterLessonCoursewareAdd,
-  api_teacherChapterLessonCoursewareUpdate,
-  api_teacherChapterLessonCoursewareDetail
-  // courseScheduleStart,
-  // queryCourseware,
-  // saveCourseware
-} from '../../../api';
-import Draggable from 'vuedraggable';
-import iconDelete from '../../../images/icon-delete-default.png';
-import iconAddMusic from '../../../images/icon-add-music.png';
-// import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
-// import deepClone from '/src/helpers/deep-clone';
-import CardPreview from '/src/components/card-preview';
-import PreviewWindow from '/src/views/preview-window';
-// import { state } from '/src/state';
-// import SubjectSync from '../../../model/subject-sync';
-import { eventGlobal } from '/src/utils';
-// import iconTips from '../../../images/icon-tips.png';
-import TheMessageDialog from '/src/components/TheMessageDialog';
-import AddItemModel from '../../../model/add-item-model';
-import AddOtherSource from '../../../model/add-other-source';
-import deepClone from '/src/helpers/deep-clone';
-import AddCoursewareProtocol from '../../../model/add-courseware-protocol';
-import { useUserStore } from '/src/store/modules/users';
-export default defineComponent({
-  name: 'courseware-modal',
-  props: {
-    groupItem: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    // const catchStore = useCatchStore();
-    const userStore = useUserStore();
-
-    const prepareStore = usePrepareStore();
-    // const route = useRoute();
-    // const router = useRouter();
-    // const dialog = useDialog();
-    const message = useMessage();
-
-    const forms = reactive({
-      subjects: [] as any,
-      openFlagEnable: true, // 是否支持修改公开状态
-      autoPlay: true,
-      name: '',
-      openFlag: false,
-      createId: null,
-      baseCoursewareList: [
-        {
-          name: '',
-          id: null,
-          list: [] as any
-        }
-      ] as any, // 基础数据
-      baseInfo: {
-        subjects: [] as any,
-        autoPlay: true,
-        name: '',
-        openFlag: false
-      }, // 基础数据
-      coursewareList: [
-        {
-          name: '',
-          id: null,
-          list: [] as any
-        }
-      ] as any,
-      loadingStatus: false,
-      showAttendClass: false,
-      attendClassType: 'change', //
-      removeIds: [] as any, // 临时删除的编号
-      editSubjectIds: '', // 声部编号
-      addCoursewareVisiable: false,
-      addCoursewareItem: {} as any,
-      messageCallBack: null as any,
-      messageOperation: {
-        visiable: false,
-        loading: false, // 是否显示加载
-        type: 'delete' as 'delete' | 'addItem' | 'save' | 'pageLive',
-        contentDirection: 'center' as 'left' | 'center' | 'right',
-        title: '删除知识点',
-        content: '请确认是否删除该知识点，删除知识点后将同步删除知识点下的资源',
-        cancelButtonText: '取消',
-        confirmButtonText: '确认',
-        index: 0
-      },
-      show: false,
-      item: {} as any,
-      previewModal: false,
-      previewParams: {
-        type: '',
-        subjectId: '',
-        detailId: ''
-      } as any,
-      addOtherSource: false,
-      addOtherIndex: 0 // 添加其它的索引
-    });
-    const coursewareListRef = ref();
-    const showModalMask = ref(false);
-
-    // 获取列表
-    const getList = async () => {
-      forms.loadingStatus = true;
-      try {
-        if (!props.groupItem.id) return (forms.loadingStatus = false);
-
-        const { data } = await api_teacherChapterLessonCoursewareDetail(
-          props.groupItem.id
-        );
-        const tempRows = data.chapterKnowledgeList || [];
-        forms.name = data.name;
-        forms.subjects = data.subjectIds
-          ? data.subjectIds.split(',').map((s: any) => {
-              return Number(s);
-            })
-          : [];
-        forms.openFlag = data.openFlag;
-        forms.openFlagEnable = data.openFlagEnable;
-        forms.autoPlay = data.autoPlay;
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          const child: any = row.chapterKnowledgeMaterialList;
-          const childList: any[] = [];
-          if (Array.isArray(child) && child.length > 0) {
-            child.forEach((sub: any) => {
-              childList.push({
-                id: sub.id,
-                materialId: sub.bizId,
-                coverImg: sub.bizInfo.coverImg,
-                type: sub.type,
-                title: sub.bizInfo.name,
-                dataJson: sub.dataJson,
-                // isCollect: !!sub.favoriteFlag,
-                isSelected: sub.source === 'PLATFORM' ? true : false,
-                content: sub.bizInfo.content,
-                removeFlag: sub.removeFlag
-              });
-            });
-          }
-          temp.push({
-            name: row.name,
-            id: row.id,
-            list: [...childList]
-          });
-        });
-        forms.coursewareList = temp;
-        forms.baseCoursewareList = deepClone(temp);
-
-        forms.baseInfo = deepClone({
-          subjects: forms.subjects,
-          autoPlay: forms.autoPlay,
-          name: forms.name,
-          openFlag: forms.openFlag
-        });
-
-        /** 给头部组件分发消息 */
-        eventGlobal.emit('updateCoursewareHeadInfo', {
-          name: forms.name,
-          subjects: forms.subjects,
-          openFlag: forms.openFlag,
-          openFlagEnable: forms.openFlagEnable,
-          autoPlay: forms.autoPlay
-        });
-      } catch (e) {
-        //
-        console.log(e);
-      }
-      forms.loadingStatus = false;
-    };
-
-    // 删除
-    const onDelete = (j: number, index: number) => {
-      const coursewareItem = forms.coursewareList[index];
-      if (!coursewareItem) return;
-      coursewareItem.list.splice(j, 1);
-    };
-
-    const isPointInsideElement = (element: any, x: number, y: number) => {
-      const rect = element.getBoundingClientRect();
-      return (
-        x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
-      );
-    };
-    const isPointOnLeft = (element: any, x: number) => {
-      const rect = element.getBoundingClientRect();
-      const elementCenterX = rect.left + rect.width / 2;
-      return x < elementCenterX;
-    };
-
-    // 操作
-    const onChangePoint = (type: string, index: number, item?: any) => {
-      if (type === 'up') {
-        // 向上移动
-        if (index === 0) return;
-        const temp = forms.coursewareList[index - 1];
-        forms.coursewareList[index - 1] = forms.coursewareList[index];
-        forms.coursewareList[index] = temp;
-      } else if (type === 'down') {
-        // 向下移动
-        if (index >= forms.coursewareList.length - 1) return;
-        const temp = forms.coursewareList[index + 1];
-        forms.coursewareList[index + 1] = forms.coursewareList[index];
-        forms.coursewareList[index] = temp;
-      } else if (type === 'remove') {
-        forms.messageOperation = {
-          visiable: true,
-          type: 'delete',
-          contentDirection: 'left',
-          title: '删除知识点',
-          loading: false,
-          content: `请确认是否删除${
-            item.name ? '【' + item.name + '】' : '该知识点'
-          }，删除知识点后将同步删除知识点下的资源`,
-          cancelButtonText: '取消',
-          confirmButtonText: '确认',
-          index
-        };
-      }
-    };
-
-    //
-    const onMessageConfirm = async () => {
-      const type = forms.messageOperation.type;
-      if (type === 'delete') {
-        forms.coursewareList.splice(forms.messageOperation.index, 1);
-      } else if (type === 'addItem') {
-        forms.coursewareList.push({ name: '', list: [] });
-        addCoursewareItem(forms.addCoursewareItem);
-      } else if (type === 'save' || type === 'pageLive') {
-        if (forms.messageOperation.loading) return;
-        if (!forms.name) {
-          message.error('请输入课件标题');
-          forms.messageOperation.visiable = false;
-          return;
-        }
-        if (forms.subjects.length <= 0) {
-          message.error('请选择声部');
-          forms.messageOperation.visiable = false;
-          return;
-        }
-
-        if (forms.coursewareList.length <= 0) {
-          message.error('未配置知识点');
-          forms.messageOperation.visiable = false;
-          return;
-        }
-
-        let isNotAdd = false;
-        for (const item of forms.coursewareList) {
-          if (!item.name) {
-            message.error('请输入知识点名称');
-            forms.messageOperation.visiable = false;
-            return;
-          }
-          if (Array.isArray(item.list) && item.list.length <= 0) {
-            isNotAdd = true;
-          }
-        }
-
-        if (isNotAdd) {
-          message.error('请至少添加一个资源');
-          forms.messageOperation.visiable = false;
-          return;
-        }
-
-        forms.messageOperation.loading = true;
-        const resultStatus = await onSaveCourseWare();
-        forms.messageOperation.loading = false;
-        if (resultStatus) {
-          if (
-            type === 'pageLive' &&
-            typeof forms.messageCallBack === 'function'
-          ) {
-            forms.messageCallBack();
-          }
-          emit('change', {
-            status: false,
-            addParam: {
-              isAdd: !props.groupItem.id ? true : false,
-              name: forms.name,
-              id: forms.createId
-            }
-          });
-          eventGlobal.emit('teacher-slideshow', false);
-        }
-      }
-      forms.messageOperation.visiable = false;
-    };
-
-    const addCoursewareItem = (item: any, point?: any) => {
-      nextTick(() => {
-        if (point) {
-          const rowGroupDom = document.querySelectorAll('.row-group');
-          const dom = rowGroupDom[item.index].querySelectorAll('.row-nav');
-          // const dom = document.querySelectorAll('.row-nav');
-          let isAdd = false;
-          dom.forEach((child: any, index: number) => {
-            // console.log(child);
-            const status = isPointInsideElement(child, point.x, point.y);
-            if (status) {
-              const array: any =
-                forms.coursewareList[item.index || 0].list || [];
-              const left = isPointOnLeft(child, point.x);
-              if (!left) {
-                array.splice(index + 1, 0, item);
-              } else {
-                array.splice(index, 0, item);
-              }
-              isAdd = true;
-              forms.coursewareList[item.index || 0].list = array;
-            }
-          });
-          if (!isAdd) {
-            forms.coursewareList[item.index || 0].list.push(item);
-          }
-        } else {
-          forms.coursewareList[item.index || 0].list.push(item);
-          message.success('添加成功');
-        }
-      });
-    };
-
-    // 提交
-    const onSubmit = async () => {
-      try {
-        coursewareListRef.value.validate();
-        eventGlobal.emit('checkCoursewareForm');
-        if (!forms.name) {
-          message.error('请输入课件标题');
-          return;
-        }
-        if (forms.subjects.length <= 0) {
-          message.error('请选择声部');
-          return;
-        }
-        if (forms.coursewareList.length <= 0) {
-          message.error('请至少添加一个知识点');
-          return;
-        }
-
-        let isNotAdd = false;
-        for (const item of forms.coursewareList) {
-          if (!item.name) {
-            message.error('请输入知识点名称');
-            return;
-          }
-          if (Array.isArray(item.list) && item.list.length <= 0) {
-            isNotAdd = true;
-          }
-        }
-
-        if (isNotAdd) {
-          message.error('请至少添加一个资源');
-          return;
-        }
-
-        if (forms.openFlag && !userStore.getReadCoursewareOpenAgreement) {
-          showModalMask.value = true;
-          return;
-        }
-        const resultStatus = await onSaveCourseWare();
-
-        if (resultStatus) {
-          emit('change', {
-            status: false,
-            addParam: {
-              isAdd: !props.groupItem.id ? true : false,
-              name: forms.name,
-              id: forms.createId
-            }
-          });
-          eventGlobal.emit('teacher-slideshow', false);
-        }
-      } catch {
-        //
-      }
-    };
-    const onSaveCourseWare = async () => {
-      try {
-        const params = {
-          name: forms.name,
-          instrumentIds: forms.subjects.join(','),
-          openFlag: forms.openFlag,
-          autoPlay: forms.autoPlay,
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          chapterKnowledgeList: [] as any
-        };
-
-        forms.coursewareList.forEach((item: any) => {
-          let tempItem: any = [];
-          if (Array.isArray(item.list) && item.list.length > 0) {
-            tempItem = item.list.map((child: any) => {
-              return {
-                bizId: child.materialId,
-                type: child.type,
-                dataJson: !['IMG', 'VIDEO', 'SONG', 'MUSIC', 'PPT'].includes(
-                  child.type
-                )
-                  ? JSON.stringify({
-                      setting: child.dataJson,
-                      coverImg: child.coverImg,
-                      bizId: child.bizId,
-                      content: child.content,
-                      name: child.title
-                    })
-                  : ''
-              };
-            });
-          }
-          params.chapterKnowledgeList.push({
-            name: item.name,
-            chapterKnowledgeMaterialList: tempItem
-          });
-        });
-        if (props.groupItem?.id) {
-          await api_teacherChapterLessonCoursewareUpdate({
-            id: props.groupItem.id,
-            ...params
-          });
-          message.success('保存成功');
-        } else {
-          const { data } = await api_teacherChapterLessonCoursewareAdd(params);
-          forms.createId = data.id;
-        }
-
-        return true;
-      } catch {
-        //
-        return false;
-      }
-    };
-
-    const addItem = (item: any, point?: any) => {
-      if (forms.coursewareList.length <= 0) {
-        // 添加到临时对象
-        forms.addCoursewareItem = item;
-        forms.messageOperation = {
-          visiable: true,
-          type: 'addItem',
-          contentDirection: 'center',
-          title: '添加到知识点',
-          loading: false,
-          content: '当前课件暂无知识点，请添加知识点后操作',
-          cancelButtonText: '取消',
-          confirmButtonText: '添加知识点',
-          index: 0
-        };
-      } else if (forms.coursewareList.length > 1 && item.addType !== 'drag') {
-        forms.addCoursewareVisiable = true;
-        forms.addCoursewareItem = item;
-      } else {
-        addCoursewareItem(item, point);
-      }
-    };
-
-    // 当页面离开时
-    const onPageBeforeLeave = (event: any) => {
-      const objA = JSON.stringify(forms.coursewareList);
-      const objB = JSON.stringify(forms.baseCoursewareList);
-      const baseA = JSON.stringify({
-        subjects: forms.subjects,
-        autoPlay: forms.autoPlay,
-        name: forms.name,
-        openFlag: forms.openFlag
-      });
-      const baseB = JSON.stringify(forms.baseInfo);
-      if (objA === objB && baseA === baseB) {
-        if (typeof event === 'function') {
-          event();
-
-          emit('change', {
-            status: false,
-            addParam: {
-              isAdd: false,
-              name: forms.name,
-              id: forms.createId
-            }
-          });
-          eventGlobal.emit('teacher-slideshow', false);
-        }
-      } else {
-        forms.messageCallBack = event;
-        forms.messageOperation = {
-          visiable: true,
-          type: 'pageLive',
-          loading: false,
-          contentDirection: 'center',
-          title: '保存课件',
-          content: '当前课件暂未保存，是否保存？',
-          cancelButtonText: '不保存',
-          confirmButtonText: '保存',
-          index: 0
-        };
-      }
-    };
-
-    const onCancelCourseware = (item: any) => {
-      forms.subjects = item.subjects;
-      forms.openFlagEnable = item.openFlagEnable;
-      forms.autoPlay = item.autoPlay;
-      forms.name = item.name;
-      forms.openFlag = item.openFlag;
-
-      const objA = JSON.stringify(forms.coursewareList);
-      const objB = JSON.stringify(forms.baseCoursewareList);
-      const baseA = JSON.stringify({
-        subjects: forms.subjects,
-        autoPlay: forms.autoPlay,
-        name: forms.name,
-        openFlag: forms.openFlag
-      });
-      const baseB = JSON.stringify(forms.baseInfo);
-
-      if (objA === objB && baseA === baseB) {
-        emit('change', {
-          status: false,
-          addParam: {
-            isAdd: false,
-            name: forms.name,
-            id: forms.createId
-          }
-        });
-
-        eventGlobal.emit('teacher-slideshow', false);
-      } else {
-        forms.messageOperation = {
-          visiable: true,
-          type: 'save',
-          loading: false,
-          contentDirection: 'center',
-          title: '保存课件',
-          content: '当前课件暂未保存，是否保存？',
-          cancelButtonText: '不保存',
-          confirmButtonText: '保存',
-          index: 0
-        };
-      }
-    };
-
-    const onSubmitCourseware = (item: any) => {
-      forms.subjects = item.subjects;
-      forms.openFlagEnable = item.openFlagEnable;
-      forms.autoPlay = item.autoPlay;
-      forms.name = item.name;
-      forms.openFlag = item.openFlag;
-
-      onSubmit();
-    };
-
-    onMounted(async () => {
-      // 修改时重置默认数据
-      if (props.groupItem?.id) {
-        forms.coursewareList = [];
-        forms.baseCoursewareList = [];
-      }
-
-      await getList();
-      // 动态添加数据
-      eventGlobal.on('onPrepareAddItem', addItem);
-      eventGlobal.on('pageBeforeLeave', onPageBeforeLeave);
-
-      // 取消
-      eventGlobal.on('coursewareClosed', onCancelCourseware);
-      // 保存
-      eventGlobal.on('coursewareSave', onSubmitCourseware);
-    });
-
-    onUnmounted(() => {
-      eventGlobal.off('onPrepareAddItem', addItem);
-      eventGlobal.off('pageBeforeLeave', onPageBeforeLeave);
-      eventGlobal.off('coursewareClosed', onCancelCourseware);
-      eventGlobal.off('coursewareSave', onSubmitCourseware);
-    });
-
-    // 当列表数据更新时同步缓存数据
-    watch(
-      () => forms.coursewareList,
-      () => {
-        prepareStore.setCoursewareList = forms.coursewareList;
-      },
-      {
-        deep: true
-      }
-    );
-
-    return () => (
-      <NForm
-        class={styles.coursewareModal}
-        model={forms}
-        ref={coursewareListRef}>
-        <NScrollbar
-          class={[styles.listContainer, 'listContainerWrap']}
-          {...{ id: 'lessons-2' }}>
-          <NSpin show={forms.loadingStatus}>
-            <div class={[styles.listSection, 'listSectionWrap']}>
-              {forms.coursewareList.map((item: any, index: number) => (
-                <div
-                  class={[styles.listItems, 'row-group']}
-                  onDragenter={(e: any) => {
-                    e.preventDefault();
-                  }}
-                  onDragover={(e: any) => {
-                    e.preventDefault();
-                  }}
-                  onDrop={(e: any) => {
-                    let dropItem = e.dataTransfer.getData('text');
-                    dropItem =
-                      dropItem && e.dataTransfer.effectAllowed === 'all'
-                        ? JSON.parse(dropItem)
-                        : {};
-                    // 判断是否有数据
-                    if (dropItem.id) {
-                      // 获取拖拽的目标元素
-                      eventGlobal.emit(
-                        'onPrepareAddItem',
-                        {
-                          materialId: dropItem.id,
-                          coverImg: dropItem.coverImg,
-                          type: dropItem.type,
-                          title: dropItem.title,
-                          isCollect: dropItem.isCollect,
-                          isSelected: dropItem.isSelected,
-                          content: dropItem.content,
-                          removeFlag: false,
-                          index,
-                          addType: 'drag'
-                        },
-                        {
-                          x: e.clientX,
-                          y: e.clientY
-                        }
-                      );
-                    }
-                  }}>
-                  <div class={styles.knowledgePoint}>
-                    {/* <div class={styles.btnItem}>
-                      <span class={styles.btnTitle}>
-                        <span>*</span>知识点名称：
-                      </span>
-
-                    </div> */}
-                    <NFormItem
-                      class={styles.btnItem}
-                      label="知识点名称"
-                      showFeedback={false}
-                      requireMarkPlacement="left"
-                      path={`coursewareList.${index}.name`}
-                      rule={[
-                        {
-                          required: true,
-                          trigger: ['input', 'blur']
-                        }
-                      ]}>
-                      <NInput
-                        placeholder="未命名知识点"
-                        v-model:value={item.name}
-                        maxlength={15}
-                        clearable
-                      />
-                    </NFormItem>
-                  </div>
-
-                  <NSpace class={styles.operationGroup}>
-                    {index > 0 && (
-                      <NTooltip showArrow={false}>
-                        {{
-                          trigger: () => (
-                            <i
-                              class={styles.iconCUp}
-                              onClick={() => onChangePoint('up', index)}></i>
-                          ),
-                          default: () => '上移知识点'
-                        }}
-                      </NTooltip>
-                    )}
-                    {index < forms.coursewareList.length - 1 && (
-                      <NTooltip showArrow={false}>
-                        {{
-                          trigger: () => (
-                            <i
-                              class={styles.iconCDown}
-                              onClick={() => onChangePoint('down', index)}></i>
-                          ),
-                          default: () => '下移知识点'
-                        }}
-                      </NTooltip>
-                    )}
-                    <NTooltip showArrow={false}>
-                      {{
-                        trigger: () => (
-                          <i
-                            class={styles.iconCRemove}
-                            onClick={() =>
-                              onChangePoint('remove', index, item)
-                            }></i>
-                        ),
-                        default: () => '删除知识点'
-                      }}
-                    </NTooltip>
-                  </NSpace>
-
-                  {item.list.length > 0 && (
-                    <Draggable
-                      v-model:modelValue={item.list}
-                      itemKey="id"
-                      componentData={{
-                        itemKey: 'id',
-                        tag: 'div',
-                        animation: 200,
-                        group: 'description',
-                        disabled: false
-                      }}
-                      class={styles.list}>
-                      {{
-                        item: (element: any) => {
-                          const item = element.element;
-                          return (
-                            <div
-                              data-id={item.id}
-                              class={[
-                                styles.itemWrap,
-                                styles.itemBlock,
-                                'row-nav'
-                              ]}>
-                              <div class={styles.itemWrapBox}>
-                                <CardType
-                                  class={[styles.itemContent]}
-                                  isShowCollect={false}
-                                  offShelf={item.removeFlag ? true : false}
-                                  // onOffShelf={() => onRemove(item)}
-                                  item={item}
-                                  disabledMouseHover={false}
-                                  onClick={() => {
-                                    if (item.type === 'IMG') return;
-                                    forms.show = true;
-                                    forms.item = item;
-                                  }}
-                                />
-                                <div class={styles.itemOperation}>
-                                  <img
-                                    src={iconDelete}
-                                    class={styles.iconDelete}
-                                    onClick={(e: MouseEvent) => {
-                                      e.stopPropagation();
-                                      onDelete(element.index, index);
-                                    }}
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          );
-                        },
-                        footer: () => (
-                          <div class={styles.itemWrap}>
-                            <div class={styles.itemWrapBox}>
-                              <div
-                                class={[
-                                  styles.itemContent,
-                                  styles.addMusicItem,
-                                  'handle'
-                                ]}
-                                onClick={() => {
-                                  forms.addOtherSource = true;
-                                  forms.addOtherIndex = index;
-                                }}>
-                                <img src={iconAddMusic} />
-
-                                <p class={styles.addMusicName}>添加资源</p>
-                              </div>
-                            </div>
-                          </div>
-                        )
-                      }}
-                    </Draggable>
-                  )}
-                  {item.list <= 0 && (
-                    <div class={styles.list}>
-                      <div class={styles.itemWrap}>
-                        <div class={styles.itemWrapBox}>
-                          <div
-                            class={[
-                              styles.itemContent,
-                              styles.addMusicItem,
-                              'handle'
-                            ]}
-                            onClick={() => {
-                              forms.addOtherSource = true;
-                              forms.addOtherIndex = index;
-                            }}>
-                            <img src={iconAddMusic} />
-
-                            <p class={styles.addMusicName}>添加资源</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-
-              {!forms.loadingStatus && (
-                <NButton
-                  block
-                  type="primary"
-                  secondary
-                  class={styles.addKnowledgePoint}
-                  onClick={() => {
-                    forms.coursewareList.push({
-                      name: '',
-                      list: []
-                    });
-                  }}>
-                  <i class={styles.iconCAdd}></i>
-                  添加知识点
-                </NButton>
-              )}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        {/* 弹窗查看 */}
-        <CardPreview
-          size={
-            ['INSTRUMENT', 'THEORY', 'MUSIC_WIKI', 'MUSICIAN'].includes(
-              forms.item.type
-            )
-              ? 'large'
-              : ''
-          }
-          v-model:show={forms.show}
-          item={forms.item}
-        />
-
-        <NModal
-          v-model:show={forms.addCoursewareVisiable}
-          preset="card"
-          class={['modalTitle', styles.addCourseware]}
-          title={'添加到知识点'}>
-          <AddItemModel
-            coursewareList={forms.coursewareList}
-            onClose={() => (forms.addCoursewareVisiable = false)}
-            onConfirm={(selects: number[]) => {
-              if (Array.isArray(selects) && selects.length > 0) {
-                selects.forEach(select => {
-                  addCoursewareItem({
-                    ...forms.addCoursewareItem,
-                    index: select
-                  });
-                });
-
-                forms.addCoursewareVisiable = false;
-              } else {
-                message.error('请选择需要添加的知识点');
-              }
-            }}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={forms.messageOperation.visiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={forms.messageOperation.title}>
-          <TheMessageDialog
-            content={forms.messageOperation.content}
-            contentDirection={forms.messageOperation.contentDirection}
-            cancelButtonText={forms.messageOperation.cancelButtonText}
-            confirmButtonText={forms.messageOperation.confirmButtonText}
-            loading={forms.messageOperation.loading}
-            onClose={() => {
-              forms.messageOperation.visiable = false;
-              if (
-                forms.messageOperation.type === 'save' ||
-                forms.messageOperation.type === 'pageLive'
-              ) {
-                emit('change', {
-                  status: false,
-                  addParam: {
-                    isAdd: false,
-                    name: forms.name,
-                    id: forms.createId
-                  }
-                });
-                eventGlobal.emit('teacher-slideshow', false);
-                if (
-                  forms.messageOperation.type === 'pageLive' &&
-                  typeof forms.messageCallBack === 'function'
-                ) {
-                  forms.messageCallBack();
-                }
-              }
-            }}
-            onConfirm={() => onMessageConfirm()}
-          />
-        </NModal>
-
-        <PreviewWindow
-          v-model:show={forms.previewModal}
-          type="attend"
-          params={forms.previewParams}
-        />
-
-        {/* 添加其它类型的资源 */}
-        <NModal
-          v-model:show={forms.addOtherSource}
-          preset="card"
-          class={['modalTitle background', styles.addOtherSource]}
-          title={'添加资源'}>
-          <AddOtherSource
-            onClose={() => (forms.addOtherSource = false)}
-            onComfirm={item => {
-              if (Array.isArray(item)) {
-                item.forEach((child: any) => {
-                  addCoursewareItem({ ...child, index: forms.addOtherIndex });
-                });
-              } else {
-                addCoursewareItem({ ...item, index: forms.addOtherIndex });
-              }
-            }}
-          />
-        </NModal>
-
-        <NModal v-model:show={showModalMask.value}>
-          <AddCoursewareProtocol
-            onClose={() => (showModalMask.value = false)}
-            onConfirm={async () => {
-              try {
-                const resultStatus = await onSaveCourseWare();
-                if (resultStatus) {
-                  userStore.setReadCoursewareOpenAgreement(true);
-                  emit('change', {
-                    status: false,
-                    addParam: {
-                      isAdd: !props.groupItem.id ? true : false,
-                      name: forms.name,
-                      id: forms.createId
-                    }
-                  });
-                  eventGlobal.emit('teacher-slideshow', false);
-                }
-              } catch {
-                //
-              }
-            }}
-          />
-        </NModal>
-      </NForm>
-    );
-  }
-});
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './addCourseware.module.less';
+import {
+  NButton,
+  NModal,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  NSpin,
+  useMessage,
+  useDialog,
+  NSwitch,
+  NInput,
+  NTooltip,
+  NImage,
+  NIcon,
+  NForm,
+  NFormItem
+} from 'naive-ui';
+import CardType from '/src/components/card-type';
+// import AttendClass from '/src/views/prepare-lessons/model/attend-class';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+// import { useCatchStore } from '/src/store/modules/catchData';
+// import TheEmpty from '/src/components/TheEmpty';
+import {
+  api_teacherChapterLessonCoursewareAdd,
+  api_teacherChapterLessonCoursewareUpdate,
+  api_teacherChapterLessonCoursewareDetail
+  // courseScheduleStart,
+  // queryCourseware,
+  // saveCourseware
+} from '../../../api';
+import Draggable from 'vuedraggable';
+import iconDelete from '../../../images/icon-delete-default.png';
+import iconAddMusic from '../../../images/icon-add-music.png';
+// import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+// import deepClone from '/src/helpers/deep-clone';
+import CardPreview from '/src/components/card-preview';
+import PreviewWindow from '/src/views/preview-window';
+// import { state } from '/src/state';
+// import SubjectSync from '../../../model/subject-sync';
+import { eventGlobal } from '/src/utils';
+// import iconTips from '../../../images/icon-tips.png';
+import TheMessageDialog from '/src/components/TheMessageDialog';
+import AddItemModel from '../../../model/add-item-model';
+import AddOtherSource from '../../../model/add-other-source';
+import deepClone from '/src/helpers/deep-clone';
+import AddCoursewareProtocol from '../../../model/add-courseware-protocol';
+import { useUserStore } from '/src/store/modules/users';
+export default defineComponent({
+  name: 'courseware-modal',
+  props: {
+    groupItem: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    // const catchStore = useCatchStore();
+    const userStore = useUserStore();
+
+    const prepareStore = usePrepareStore();
+    // const route = useRoute();
+    // const router = useRouter();
+    // const dialog = useDialog();
+    const message = useMessage();
+
+    const forms = reactive({
+      subjects: [] as any,
+      openFlagEnable: true, // 是否支持修改公开状态
+      autoPlay: true,
+      name: '',
+      openFlag: false,
+      createId: null,
+      baseCoursewareList: [
+        {
+          name: '',
+          id: null,
+          list: [] as any
+        }
+      ] as any, // 基础数据
+      baseInfo: {
+        subjects: [] as any,
+        autoPlay: true,
+        name: '',
+        openFlag: false
+      }, // 基础数据
+      coursewareList: [
+        {
+          name: '',
+          id: null,
+          list: [] as any
+        }
+      ] as any,
+      loadingStatus: false,
+      showAttendClass: false,
+      attendClassType: 'change', //
+      removeIds: [] as any, // 临时删除的编号
+      editSubjectIds: '', // 声部编号
+      addCoursewareVisiable: false,
+      addCoursewareItem: {} as any,
+      messageCallBack: null as any,
+      messageOperation: {
+        visiable: false,
+        loading: false, // 是否显示加载
+        type: 'delete' as 'delete' | 'addItem' | 'save' | 'pageLive',
+        contentDirection: 'center' as 'left' | 'center' | 'right',
+        title: '删除知识点',
+        content: '请确认是否删除该知识点，删除知识点后将同步删除知识点下的资源',
+        cancelButtonText: '取消',
+        confirmButtonText: '确认',
+        index: 0
+      },
+      show: false,
+      item: {} as any,
+      previewModal: false,
+      previewParams: {
+        type: '',
+        subjectId: '',
+        detailId: ''
+      } as any,
+      addOtherSource: false,
+      addOtherIndex: 0 // 添加其它的索引
+    });
+    const coursewareListRef = ref();
+    const showModalMask = ref(false);
+
+    // 获取列表
+    const getList = async () => {
+      forms.loadingStatus = true;
+      try {
+        if (!props.groupItem.id) return (forms.loadingStatus = false);
+
+        const { data } = await api_teacherChapterLessonCoursewareDetail(
+          props.groupItem.id
+        );
+        const tempRows = data.chapterKnowledgeList || [];
+        forms.name = data.name;
+        forms.subjects = data.subjectIds
+          ? data.subjectIds.split(',').map((s: any) => {
+              return Number(s);
+            })
+          : [];
+        forms.openFlag = data.openFlag;
+        forms.openFlagEnable = data.openFlagEnable;
+        forms.autoPlay = data.autoPlay;
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          const child: any = row.chapterKnowledgeMaterialList;
+          const childList: any[] = [];
+          if (Array.isArray(child) && child.length > 0) {
+            child.forEach((sub: any) => {
+              childList.push({
+                id: sub.id,
+                materialId: sub.bizId,
+                coverImg: sub.bizInfo.coverImg,
+                type: sub.type,
+                title: sub.bizInfo.name,
+                dataJson: sub.dataJson,
+                // isCollect: !!sub.favoriteFlag,
+                isSelected: sub.source === 'PLATFORM' ? true : false,
+                content: sub.bizInfo.content,
+                removeFlag: sub.removeFlag
+              });
+            });
+          }
+          temp.push({
+            name: row.name,
+            id: row.id,
+            list: [...childList]
+          });
+        });
+        forms.coursewareList = temp;
+        forms.baseCoursewareList = deepClone(temp);
+
+        forms.baseInfo = deepClone({
+          subjects: forms.subjects,
+          autoPlay: forms.autoPlay,
+          name: forms.name,
+          openFlag: forms.openFlag
+        });
+
+        /** 给头部组件分发消息 */
+        eventGlobal.emit('updateCoursewareHeadInfo', {
+          name: forms.name,
+          subjects: forms.subjects,
+          openFlag: forms.openFlag,
+          openFlagEnable: forms.openFlagEnable,
+          autoPlay: forms.autoPlay
+        });
+      } catch (e) {
+        //
+        console.log(e);
+      }
+      forms.loadingStatus = false;
+    };
+
+    // 删除
+    const onDelete = (j: number, index: number) => {
+      const coursewareItem = forms.coursewareList[index];
+      if (!coursewareItem) return;
+      coursewareItem.list.splice(j, 1);
+    };
+
+    const isPointInsideElement = (element: any, x: number, y: number) => {
+      const rect = element.getBoundingClientRect();
+      return (
+        x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+      );
+    };
+    const isPointOnLeft = (element: any, x: number) => {
+      const rect = element.getBoundingClientRect();
+      const elementCenterX = rect.left + rect.width / 2;
+      return x < elementCenterX;
+    };
+
+    // 操作
+    const onChangePoint = (type: string, index: number, item?: any) => {
+      if (type === 'up') {
+        // 向上移动
+        if (index === 0) return;
+        const temp = forms.coursewareList[index - 1];
+        forms.coursewareList[index - 1] = forms.coursewareList[index];
+        forms.coursewareList[index] = temp;
+      } else if (type === 'down') {
+        // 向下移动
+        if (index >= forms.coursewareList.length - 1) return;
+        const temp = forms.coursewareList[index + 1];
+        forms.coursewareList[index + 1] = forms.coursewareList[index];
+        forms.coursewareList[index] = temp;
+      } else if (type === 'remove') {
+        forms.messageOperation = {
+          visiable: true,
+          type: 'delete',
+          contentDirection: 'left',
+          title: '删除知识点',
+          loading: false,
+          content: `请确认是否删除${
+            item.name ? '【' + item.name + '】' : '该知识点'
+          }，删除知识点后将同步删除知识点下的资源`,
+          cancelButtonText: '取消',
+          confirmButtonText: '确认',
+          index
+        };
+      }
+    };
+
+    //
+    const onMessageConfirm = async () => {
+      const type = forms.messageOperation.type;
+      if (type === 'delete') {
+        forms.coursewareList.splice(forms.messageOperation.index, 1);
+      } else if (type === 'addItem') {
+        forms.coursewareList.push({ name: '', list: [] });
+        addCoursewareItem(forms.addCoursewareItem);
+      } else if (type === 'save' || type === 'pageLive') {
+        if (forms.messageOperation.loading) return;
+        if (!forms.name) {
+          message.error('请输入课件标题');
+          forms.messageOperation.visiable = false;
+          return;
+        }
+        if (forms.subjects.length <= 0) {
+          message.error('请选择声部');
+          forms.messageOperation.visiable = false;
+          return;
+        }
+
+        if (forms.coursewareList.length <= 0) {
+          message.error('未配置知识点');
+          forms.messageOperation.visiable = false;
+          return;
+        }
+
+        let isNotAdd = false;
+        for (const item of forms.coursewareList) {
+          if (!item.name) {
+            message.error('请输入知识点名称');
+            forms.messageOperation.visiable = false;
+            return;
+          }
+          if (Array.isArray(item.list) && item.list.length <= 0) {
+            isNotAdd = true;
+          }
+        }
+
+        if (isNotAdd) {
+          message.error('请至少添加一个资源');
+          forms.messageOperation.visiable = false;
+          return;
+        }
+
+        forms.messageOperation.loading = true;
+        const resultStatus = await onSaveCourseWare();
+        forms.messageOperation.loading = false;
+        if (resultStatus) {
+          if (
+            type === 'pageLive' &&
+            typeof forms.messageCallBack === 'function'
+          ) {
+            forms.messageCallBack();
+          }
+          emit('change', {
+            status: false,
+            addParam: {
+              isAdd: !props.groupItem.id ? true : false,
+              name: forms.name,
+              id: forms.createId
+            }
+          });
+          eventGlobal.emit('teacher-slideshow', false);
+        }
+      }
+      forms.messageOperation.visiable = false;
+    };
+
+    const addCoursewareItem = async (item: any, point?: any) => {
+      const materialList: any[] = [];
+      try {
+        const { data } = await api_materialDetail(item.id);
+        if (Array.isArray(data.materialRefs)) {
+          data.materialRefs.forEach((item: any) => {
+            if (item.refType === 'STRONG') {
+              // addCoursewareItem({ ...val, index: state.addOtherIndex });
+              materialList.push(item.relateMaterialInfo);
+            }
+          });
+        }
+      } catch {
+        //
+      }
+      nextTick(() => {
+        if (point) {
+          const rowGroupDom = document.querySelectorAll('.row-group');
+          const dom = rowGroupDom[item.index].querySelectorAll('.row-nav');
+          // const dom = document.querySelectorAll('.row-nav');
+          let isAdd = false;
+          dom.forEach((child: any, index: number) => {
+            // console.log(child);
+            const status = isPointInsideElement(child, point.x, point.y);
+            if (status) {
+              const array: any =
+                forms.coursewareList[item.index || 0].list || [];
+              const left = isPointOnLeft(child, point.x);
+              if (!left) {
+                array.splice(index + 1, 0, item);
+                materialList.forEach((m: any) => {
+                  array.splice(index + 1, 0, m);
+                });
+              } else {
+                array.splice(index, 0, item);
+                materialList.forEach((m: any) => {
+                  array.splice(index, 0, m);
+                });
+              }
+              isAdd = true;
+              forms.coursewareList[item.index || 0].list = array;
+            }
+          });
+          if (!isAdd) {
+            forms.coursewareList[item.index || 0].list.push(item);
+            materialList.forEach((m: any) => {
+              forms.coursewareList[item.index || 0].list.push(m);
+            });
+          }
+        } else {
+          forms.coursewareList[item.index || 0].list.push(item);
+          materialList.forEach((m: any) => {
+            forms.coursewareList[item.index || 0].list.push(m);
+          });
+          message.success('添加成功');
+        }
+      });
+    };
+
+    // 提交
+    const onSubmit = async () => {
+      try {
+        coursewareListRef.value.validate();
+        eventGlobal.emit('checkCoursewareForm');
+        if (!forms.name) {
+          message.error('请输入课件标题');
+          return;
+        }
+        if (forms.subjects.length <= 0) {
+          message.error('请选择声部');
+          return;
+        }
+        if (forms.coursewareList.length <= 0) {
+          message.error('请至少添加一个知识点');
+          return;
+        }
+
+        let isNotAdd = false;
+        for (const item of forms.coursewareList) {
+          if (!item.name) {
+            message.error('请输入知识点名称');
+            return;
+          }
+          if (Array.isArray(item.list) && item.list.length <= 0) {
+            isNotAdd = true;
+          }
+        }
+
+        if (isNotAdd) {
+          message.error('请至少添加一个资源');
+          return;
+        }
+
+        if (forms.openFlag && !userStore.getReadCoursewareOpenAgreement) {
+          showModalMask.value = true;
+          return;
+        }
+        const resultStatus = await onSaveCourseWare();
+
+        if (resultStatus) {
+          emit('change', {
+            status: false,
+            addParam: {
+              isAdd: !props.groupItem.id ? true : false,
+              name: forms.name,
+              id: forms.createId
+            }
+          });
+          eventGlobal.emit('teacher-slideshow', false);
+        }
+      } catch {
+        //
+      }
+    };
+    const onSaveCourseWare = async () => {
+      try {
+        const params = {
+          name: forms.name,
+          instrumentIds: forms.subjects.join(','),
+          openFlag: forms.openFlag,
+          autoPlay: forms.autoPlay,
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          chapterKnowledgeList: [] as any
+        };
+
+        forms.coursewareList.forEach((item: any) => {
+          let tempItem: any = [];
+          if (Array.isArray(item.list) && item.list.length > 0) {
+            tempItem = item.list.map((child: any) => {
+              return {
+                bizId: child.materialId,
+                type: child.type,
+                dataJson: !['IMG', 'VIDEO', 'SONG', 'MUSIC', 'PPT'].includes(
+                  child.type
+                )
+                  ? JSON.stringify({
+                      setting: child.dataJson,
+                      coverImg: child.coverImg,
+                      bizId: child.bizId,
+                      content: child.content,
+                      name: child.title
+                    })
+                  : ''
+              };
+            });
+          }
+          params.chapterKnowledgeList.push({
+            name: item.name,
+            chapterKnowledgeMaterialList: tempItem
+          });
+        });
+        if (props.groupItem?.id) {
+          await api_teacherChapterLessonCoursewareUpdate({
+            id: props.groupItem.id,
+            ...params
+          });
+          message.success('保存成功');
+        } else {
+          const { data } = await api_teacherChapterLessonCoursewareAdd(params);
+          forms.createId = data.id;
+        }
+
+        return true;
+      } catch {
+        //
+        return false;
+      }
+    };
+
+    const addItem = (item: any, point?: any) => {
+      if (forms.coursewareList.length <= 0) {
+        // 添加到临时对象
+        forms.addCoursewareItem = item;
+        forms.messageOperation = {
+          visiable: true,
+          type: 'addItem',
+          contentDirection: 'center',
+          title: '添加到知识点',
+          loading: false,
+          content: '当前课件暂无知识点，请添加知识点后操作',
+          cancelButtonText: '取消',
+          confirmButtonText: '添加知识点',
+          index: 0
+        };
+      } else if (forms.coursewareList.length > 1 && item.addType !== 'drag') {
+        forms.addCoursewareVisiable = true;
+        forms.addCoursewareItem = item;
+      } else {
+        addCoursewareItem(item, point);
+      }
+    };
+
+    // 当页面离开时
+    const onPageBeforeLeave = (event: any) => {
+      const objA = JSON.stringify(forms.coursewareList);
+      const objB = JSON.stringify(forms.baseCoursewareList);
+      const baseA = JSON.stringify({
+        subjects: forms.subjects,
+        autoPlay: forms.autoPlay,
+        name: forms.name,
+        openFlag: forms.openFlag
+      });
+      const baseB = JSON.stringify(forms.baseInfo);
+      if (objA === objB && baseA === baseB) {
+        if (typeof event === 'function') {
+          event();
+
+          emit('change', {
+            status: false,
+            addParam: {
+              isAdd: false,
+              name: forms.name,
+              id: forms.createId
+            }
+          });
+          eventGlobal.emit('teacher-slideshow', false);
+        }
+      } else {
+        forms.messageCallBack = event;
+        forms.messageOperation = {
+          visiable: true,
+          type: 'pageLive',
+          loading: false,
+          contentDirection: 'center',
+          title: '保存课件',
+          content: '当前课件暂未保存，是否保存？',
+          cancelButtonText: '不保存',
+          confirmButtonText: '保存',
+          index: 0
+        };
+      }
+    };
+
+    const onCancelCourseware = (item: any) => {
+      forms.subjects = item.subjects;
+      forms.openFlagEnable = item.openFlagEnable;
+      forms.autoPlay = item.autoPlay;
+      forms.name = item.name;
+      forms.openFlag = item.openFlag;
+
+      const objA = JSON.stringify(forms.coursewareList);
+      const objB = JSON.stringify(forms.baseCoursewareList);
+      const baseA = JSON.stringify({
+        subjects: forms.subjects,
+        autoPlay: forms.autoPlay,
+        name: forms.name,
+        openFlag: forms.openFlag
+      });
+      const baseB = JSON.stringify(forms.baseInfo);
+
+      if (objA === objB && baseA === baseB) {
+        emit('change', {
+          status: false,
+          addParam: {
+            isAdd: false,
+            name: forms.name,
+            id: forms.createId
+          }
+        });
+
+        eventGlobal.emit('teacher-slideshow', false);
+      } else {
+        forms.messageOperation = {
+          visiable: true,
+          type: 'save',
+          loading: false,
+          contentDirection: 'center',
+          title: '保存课件',
+          content: '当前课件暂未保存，是否保存？',
+          cancelButtonText: '不保存',
+          confirmButtonText: '保存',
+          index: 0
+        };
+      }
+    };
+
+    const onSubmitCourseware = (item: any) => {
+      forms.subjects = item.subjects;
+      forms.openFlagEnable = item.openFlagEnable;
+      forms.autoPlay = item.autoPlay;
+      forms.name = item.name;
+      forms.openFlag = item.openFlag;
+
+      onSubmit();
+    };
+
+    onMounted(async () => {
+      // 修改时重置默认数据
+      if (props.groupItem?.id) {
+        forms.coursewareList = [];
+        forms.baseCoursewareList = [];
+      }
+
+      await getList();
+      // 动态添加数据
+      eventGlobal.on('onPrepareAddItem', addItem);
+      eventGlobal.on('pageBeforeLeave', onPageBeforeLeave);
+
+      // 取消
+      eventGlobal.on('coursewareClosed', onCancelCourseware);
+      // 保存
+      eventGlobal.on('coursewareSave', onSubmitCourseware);
+    });
+
+    onUnmounted(() => {
+      eventGlobal.off('onPrepareAddItem', addItem);
+      eventGlobal.off('pageBeforeLeave', onPageBeforeLeave);
+      eventGlobal.off('coursewareClosed', onCancelCourseware);
+      eventGlobal.off('coursewareSave', onSubmitCourseware);
+    });
+
+    // 当列表数据更新时同步缓存数据
+    watch(
+      () => forms.coursewareList,
+      () => {
+        prepareStore.setCoursewareList = forms.coursewareList;
+      },
+      {
+        deep: true
+      }
+    );
+
+    return () => (
+      <NForm
+        class={styles.coursewareModal}
+        model={forms}
+        ref={coursewareListRef}>
+        <NScrollbar
+          class={[styles.listContainer, 'listContainerWrap']}
+          {...{ id: 'lessons-2' }}>
+          <NSpin show={forms.loadingStatus}>
+            <div class={[styles.listSection, 'listSectionWrap']}>
+              {forms.coursewareList.map((item: any, index: number) => (
+                <div
+                  class={[styles.listItems, 'row-group']}
+                  onDragenter={(e: any) => {
+                    e.preventDefault();
+                  }}
+                  onDragover={(e: any) => {
+                    e.preventDefault();
+                  }}
+                  onDrop={(e: any) => {
+                    let dropItem = e.dataTransfer.getData('text');
+                    dropItem =
+                      dropItem && e.dataTransfer.effectAllowed === 'all'
+                        ? JSON.parse(dropItem)
+                        : {};
+                    // 判断是否有数据
+                    if (dropItem.id) {
+                      // 获取拖拽的目标元素
+                      eventGlobal.emit(
+                        'onPrepareAddItem',
+                        {
+                          materialId: dropItem.id,
+                          coverImg: dropItem.coverImg,
+                          type: dropItem.type,
+                          title: dropItem.title,
+                          refFlag: dropItem.refFlag,
+                          isCollect: dropItem.isCollect,
+                          isSelected: dropItem.isSelected,
+                          content: dropItem.content,
+                          removeFlag: false,
+                          index,
+                          addType: 'drag'
+                        },
+                        {
+                          x: e.clientX,
+                          y: e.clientY
+                        }
+                      );
+                    }
+                  }}>
+                  <div class={styles.knowledgePoint}>
+                    {/* <div class={styles.btnItem}>
+                      <span class={styles.btnTitle}>
+                        <span>*</span>知识点名称：
+                      </span>
+
+                    </div> */}
+                    <NFormItem
+                      class={styles.btnItem}
+                      label="知识点名称"
+                      showFeedback={false}
+                      requireMarkPlacement="left"
+                      path={`coursewareList.${index}.name`}
+                      rule={[
+                        {
+                          required: true,
+                          trigger: ['input', 'blur']
+                        }
+                      ]}>
+                      <NInput
+                        placeholder="未命名知识点"
+                        v-model:value={item.name}
+                        maxlength={15}
+                        clearable
+                      />
+                    </NFormItem>
+                  </div>
+
+                  <NSpace class={styles.operationGroup}>
+                    {index > 0 && (
+                      <NTooltip showArrow={false}>
+                        {{
+                          trigger: () => (
+                            <i
+                              class={styles.iconCUp}
+                              onClick={() => onChangePoint('up', index)}></i>
+                          ),
+                          default: () => '上移知识点'
+                        }}
+                      </NTooltip>
+                    )}
+                    {index < forms.coursewareList.length - 1 && (
+                      <NTooltip showArrow={false}>
+                        {{
+                          trigger: () => (
+                            <i
+                              class={styles.iconCDown}
+                              onClick={() => onChangePoint('down', index)}></i>
+                          ),
+                          default: () => '下移知识点'
+                        }}
+                      </NTooltip>
+                    )}
+                    <NTooltip showArrow={false}>
+                      {{
+                        trigger: () => (
+                          <i
+                            class={styles.iconCRemove}
+                            onClick={() =>
+                              onChangePoint('remove', index, item)
+                            }></i>
+                        ),
+                        default: () => '删除知识点'
+                      }}
+                    </NTooltip>
+                  </NSpace>
+
+                  {item.list.length > 0 && (
+                    <Draggable
+                      v-model:modelValue={item.list}
+                      itemKey="id"
+                      componentData={{
+                        itemKey: 'id',
+                        tag: 'div',
+                        animation: 200,
+                        group: 'description',
+                        disabled: false
+                      }}
+                      class={styles.list}>
+                      {{
+                        item: (element: any) => {
+                          const item = element.element;
+                          return (
+                            <div
+                              data-id={item.id}
+                              class={[
+                                styles.itemWrap,
+                                styles.itemBlock,
+                                'row-nav'
+                              ]}>
+                              <div class={styles.itemWrapBox}>
+                                <CardType
+                                  class={[styles.itemContent]}
+                                  isShowCollect={false}
+                                  offShelf={item.removeFlag ? true : false}
+                                  // onOffShelf={() => onRemove(item)}
+                                  item={item}
+                                  disabledMouseHover={false}
+                                  onClick={() => {
+                                    if (item.type === 'IMG') return;
+                                    forms.show = true;
+                                    forms.item = item;
+                                  }}
+                                />
+                                <div class={styles.itemOperation}>
+                                  <img
+                                    src={iconDelete}
+                                    class={styles.iconDelete}
+                                    onClick={(e: MouseEvent) => {
+                                      e.stopPropagation();
+                                      onDelete(element.index, index);
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        },
+                        footer: () => (
+                          <div class={styles.itemWrap}>
+                            <div class={styles.itemWrapBox}>
+                              <div
+                                class={[
+                                  styles.itemContent,
+                                  styles.addMusicItem,
+                                  'handle'
+                                ]}
+                                onClick={() => {
+                                  forms.addOtherSource = true;
+                                  forms.addOtherIndex = index;
+                                }}>
+                                <img src={iconAddMusic} />
+
+                                <p class={styles.addMusicName}>添加资源</p>
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      }}
+                    </Draggable>
+                  )}
+                  {item.list <= 0 && (
+                    <div class={styles.list}>
+                      <div class={styles.itemWrap}>
+                        <div class={styles.itemWrapBox}>
+                          <div
+                            class={[
+                              styles.itemContent,
+                              styles.addMusicItem,
+                              'handle'
+                            ]}
+                            onClick={() => {
+                              forms.addOtherSource = true;
+                              forms.addOtherIndex = index;
+                            }}>
+                            <img src={iconAddMusic} />
+
+                            <p class={styles.addMusicName}>添加资源</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {!forms.loadingStatus && (
+                <NButton
+                  block
+                  type="primary"
+                  secondary
+                  class={styles.addKnowledgePoint}
+                  onClick={() => {
+                    forms.coursewareList.push({
+                      name: '',
+                      list: []
+                    });
+                  }}>
+                  <i class={styles.iconCAdd}></i>
+                  添加知识点
+                </NButton>
+              )}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {/* 弹窗查看 */}
+        <CardPreview
+          size={
+            ['INSTRUMENT', 'THEORY', 'MUSIC_WIKI', 'MUSICIAN'].includes(
+              forms.item.type
+            )
+              ? 'large'
+              : ''
+          }
+          v-model:show={forms.show}
+          item={forms.item}
+        />
+
+        <NModal
+          v-model:show={forms.addCoursewareVisiable}
+          preset="card"
+          class={['modalTitle', styles.addCourseware]}
+          title={'添加到知识点'}>
+          <AddItemModel
+            coursewareList={forms.coursewareList}
+            onClose={() => (forms.addCoursewareVisiable = false)}
+            onConfirm={(selects: number[]) => {
+              if (Array.isArray(selects) && selects.length > 0) {
+                selects.forEach(select => {
+                  addCoursewareItem({
+                    ...forms.addCoursewareItem,
+                    index: select
+                  });
+                });
+
+                forms.addCoursewareVisiable = false;
+              } else {
+                message.error('请选择需要添加的知识点');
+              }
+            }}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={forms.messageOperation.visiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={forms.messageOperation.title}>
+          <TheMessageDialog
+            content={forms.messageOperation.content}
+            contentDirection={forms.messageOperation.contentDirection}
+            cancelButtonText={forms.messageOperation.cancelButtonText}
+            confirmButtonText={forms.messageOperation.confirmButtonText}
+            loading={forms.messageOperation.loading}
+            onClose={() => {
+              forms.messageOperation.visiable = false;
+              if (
+                forms.messageOperation.type === 'save' ||
+                forms.messageOperation.type === 'pageLive'
+              ) {
+                emit('change', {
+                  status: false,
+                  addParam: {
+                    isAdd: false,
+                    name: forms.name,
+                    id: forms.createId
+                  }
+                });
+                eventGlobal.emit('teacher-slideshow', false);
+                if (
+                  forms.messageOperation.type === 'pageLive' &&
+                  typeof forms.messageCallBack === 'function'
+                ) {
+                  forms.messageCallBack();
+                }
+              }
+            }}
+            onConfirm={() => onMessageConfirm()}
+          />
+        </NModal>
+
+        <PreviewWindow
+          v-model:show={forms.previewModal}
+          type="attend"
+          params={forms.previewParams}
+        />
+
+        {/* 添加其它类型的资源 */}
+        <NModal
+          v-model:show={forms.addOtherSource}
+          preset="card"
+          class={['modalTitle background', styles.addOtherSource]}
+          title={'添加资源'}>
+          <AddOtherSource
+            onClose={() => (forms.addOtherSource = false)}
+            onComfirm={item => {
+              if (Array.isArray(item)) {
+                item.forEach((child: any) => {
+                  addCoursewareItem({ ...child, index: forms.addOtherIndex });
+                });
+              } else {
+                addCoursewareItem({ ...item, index: forms.addOtherIndex });
+              }
+            }}
+          />
+        </NModal>
+
+        <NModal v-model:show={showModalMask.value}>
+          <AddCoursewareProtocol
+            onClose={() => (showModalMask.value = false)}
+            onConfirm={async () => {
+              try {
+                const resultStatus = await onSaveCourseWare();
+                if (resultStatus) {
+                  userStore.setReadCoursewareOpenAgreement(true);
+                  emit('change', {
+                    status: false,
+                    addParam: {
+                      isAdd: !props.groupItem.id ? true : false,
+                      name: forms.name,
+                      id: forms.createId
+                    }
+                  });
+                  eventGlobal.emit('teacher-slideshow', false);
+                }
+              } catch {
+                //
+              }
+            }}
+          />
+        </NModal>
+      </NForm>
+    );
+  }
+});

src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -1,253 +1,256 @@
-import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
-import ResourceSearchGroup from './resource-search-group';
-import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
-import styles from './index.module.less';
-import CardType from '/src/components/card-type';
-import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
-import TheEmpty from '/src/components/TheEmpty';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { useDebounceFn, useThrottleFn, useThrottle } from '@vueuse/core';
-import { saveCourseware } from '/src/views/prepare-lessons/api';
-import CardPreview from '/src/components/card-preview';
-import { eventGlobal } from '/src/utils';
-
-const formatType = (type: string) => {
-  if (type === 'shareResources') {
-    return 2;
-  } else if (type === 'myResources') {
-    return 3;
-  } else if (type === 'myCollect') {
-    return 4;
-  } else if (type === 'relateResources') {
-    return 5;
-  }
-};
-export default defineComponent({
-  name: 'share-resources',
-  props: {
-    type: {
-      type: String as PropType<
-        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
-      >,
-      default: 'relateResources'
-    }
-  },
-  setup(props) {
-    const prepareStore = usePrepareStore();
-    const message = useMessage();
-    const dialog = useDialog();
-    const state = reactive({
-      loading: false,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        musicalInstrumentId: null,
-        subjectId: null,
-        sourceType: formatType(props.type),
-        enableFlag: true
-      },
-      tableList: [] as any,
-      show: false,
-      item: {} as any
-    });
-    const getList = async () => {
-      try {
-        // if (!prepareStore.getSubjectId) return;
-        if (state.pagination.page === 1) {
-          state.loading = true;
-        }
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination,
-          lessonCoursewareKnowledgeId:
-            props.type === 'relateResources' || props.type === 'shareResources'
-              ? prepareStore.getSelectKey
-              : null
-          // subjectId: prepareStore.getSubjectId
-        });
-        state.loading = false;
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          const index = prepareStore.getCoursewareList.findIndex(
-            (course: any) => course.materialId === row.id
-          );
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content
-            // exist: index !== -1 ? true : false // 是否存在
-          });
-        });
-        if (state.pagination.page === 1) {
-          state.tableList = temp;
-        } else {
-          state.tableList.push(...temp);
-        }
-
-        state.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      state.tableList = [];
-      state.searchGroup = Object.assign(state.searchGroup, item);
-      getList();
-    };
-
-    const throttledFnSearch = useDebounceFn(item => {
-      state.pagination.page = state.pagination.page + 1;
-      state.pagination.page = 1;
-      state.tableList = [];
-      state.searchGroup = Object.assign(state.searchGroup, item);
-      getList();
-    }, 500);
-
-    // 声部变化时
-    watch(
-      () => prepareStore.getSubjectId,
-      () => {
-        onSearch(state.searchGroup);
-      }
-    );
-    // watch(
-    //   () => prepareStore.coursewareList,
-    //   () => {
-    //     state.tableList.forEach((item: any) => {
-    //       const index = prepareStore.getCoursewareList.findIndex(
-    //         (course: any) => course.materialId === item.id
-    //       );
-    //       item.exist = index !== -1 ? true : false; // 是否存在
-    //     });
-    //   },
-    //   {
-    //     deep: true,
-    //     immediate: true
-    //   }
-    // );
-
-    const throttledFn = useThrottleFn(() => {
-      state.pagination.page = state.pagination.page + 1;
-      getList();
-    }, 500);
-
-    // 添加资源
-    const onAdd = async (item: any) => {
-      try {
-        eventGlobal.emit('onPrepareAddItem', {
-          materialId: item.id,
-          coverImg: item.coverImg,
-          type: item.type,
-          title: item.title,
-          isCollect: item.isCollect,
-          isSelected: item.isSelected,
-          content: item.content,
-          removeFlag: false
-        });
-      } catch {
-        //
-      }
-    };
-
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <div>
-        <ResourceSearchGroup
-          type={props.type}
-          onSearch={(item: any) => {
-            state.searchGroup = Object.assign(state.searchGroup, item);
-            throttledFnSearch(item);
-          }}
-        />
-        <NScrollbar
-          class={[
-            styles.listContainer,
-            'listContainerResource',
-            state.searchGroup.type !== 'MUSIC' ||
-            ['myResources', 'myCollect', 'relateResources'].includes(props.type)
-              ? [styles.listNoMusic, 'listNoMusicResource']
-              : ''
-          ]}
-          onScroll={(e: any) => {
-            const clientHeight = e.target?.clientHeight;
-            const scrollTop = e.target?.scrollTop;
-            const scrollHeight = e.target?.scrollHeight;
-            // 是否到底，是否加载完
-            if (
-              clientHeight + scrollTop + 20 >= scrollHeight &&
-              !state.finshed &&
-              !state.loading
-            ) {
-              throttledFn();
-            }
-          }}>
-          <NSpin show={state.loading} size={'small'}>
-            <div
-              class={[
-                styles.listSection,
-                'listSectionResource',
-                !state.loading && state.tableList.length <= 0
-                  ? [styles.emptySection, 'emptySectionResource']
-                  : ''
-              ]}>
-              {state.tableList.length > 0 && (
-                <div class={styles.list}>
-                  {state.tableList.map((item: any) => (
-                    <CardType
-                      isShowAdd
-                      item={item}
-                      isShowCollect={true}
-                      draggable
-                      disabledMouseHover={false}
-                      onClick={() => {
-                        if (item.type === 'IMG') return;
-                        state.show = true;
-                        state.item = item;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                      // isShowAddDisabled={!prepareStore.getIsEditResource}
-                      onAdd={(item: any) => onAdd(item)}
-                    />
-                  ))}
-                </div>
-              )}
-              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-      </div>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
+import ResourceSearchGroup from './resource-search-group';
+import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { useDebounceFn, useThrottleFn, useThrottle } from '@vueuse/core';
+import { saveCourseware } from '/src/views/prepare-lessons/api';
+import CardPreview from '/src/components/card-preview';
+import { eventGlobal } from '/src/utils';
+
+const formatType = (type: string) => {
+  if (type === 'shareResources') {
+    return 2;
+  } else if (type === 'myResources') {
+    return 3;
+  } else if (type === 'myCollect') {
+    return 4;
+  } else if (type === 'relateResources') {
+    return 5;
+  }
+};
+export default defineComponent({
+  name: 'share-resources',
+  props: {
+    type: {
+      type: String as PropType<
+        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
+      >,
+      default: 'relateResources'
+    }
+  },
+  setup(props) {
+    const prepareStore = usePrepareStore();
+    const message = useMessage();
+    const dialog = useDialog();
+    const state = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        musicalInstrumentId: null,
+        subjectId: null,
+        sourceType: formatType(props.type),
+        enableFlag: true
+      },
+      tableList: [] as any,
+      show: false,
+      item: {} as any
+    });
+    const getList = async () => {
+      try {
+        // if (!prepareStore.getSubjectId) return;
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination,
+          lessonCoursewareKnowledgeId:
+            props.type === 'relateResources' || props.type === 'shareResources'
+              ? prepareStore.getSelectKey
+              : null
+          // subjectId: prepareStore.getSubjectId
+        });
+        state.loading = false;
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          const index = prepareStore.getCoursewareList.findIndex(
+            (course: any) => course.materialId === row.id
+          );
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            refFlag: row.refFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            content: row.content
+            // exist: index !== -1 ? true : false // 是否存在
+          });
+        });
+        if (state.pagination.page === 1) {
+          state.tableList = temp;
+        } else {
+          state.tableList.push(...temp);
+        }
+
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    };
+
+    const throttledFnSearch = useDebounceFn(item => {
+      state.pagination.page = state.pagination.page + 1;
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    }, 500);
+
+    // 声部变化时
+    watch(
+      () => prepareStore.getSubjectId,
+      () => {
+        onSearch(state.searchGroup);
+      }
+    );
+    // watch(
+    //   () => prepareStore.coursewareList,
+    //   () => {
+    //     state.tableList.forEach((item: any) => {
+    //       const index = prepareStore.getCoursewareList.findIndex(
+    //         (course: any) => course.materialId === item.id
+    //       );
+    //       item.exist = index !== -1 ? true : false; // 是否存在
+    //     });
+    //   },
+    //   {
+    //     deep: true,
+    //     immediate: true
+    //   }
+    // );
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
+    // 添加资源
+    const onAdd = async (item: any) => {
+      try {
+        console.log(item, '11');
+        eventGlobal.emit('onPrepareAddItem', {
+          materialId: item.id,
+          coverImg: item.coverImg,
+          refFlag: item.refFlag,
+          type: item.type,
+          title: item.title,
+          isCollect: item.isCollect,
+          isSelected: item.isSelected,
+          content: item.content,
+          removeFlag: false
+        });
+      } catch {
+        //
+      }
+    };
+
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <div>
+        <ResourceSearchGroup
+          type={props.type}
+          onSearch={(item: any) => {
+            state.searchGroup = Object.assign(state.searchGroup, item);
+            throttledFnSearch(item);
+          }}
+        />
+        <NScrollbar
+          class={[
+            styles.listContainer,
+            'listContainerResource',
+            state.searchGroup.type !== 'MUSIC' ||
+            ['myResources', 'myCollect', 'relateResources'].includes(props.type)
+              ? [styles.listNoMusic, 'listNoMusicResource']
+              : ''
+          ]}
+          onScroll={(e: any) => {
+            const clientHeight = e.target?.clientHeight;
+            const scrollTop = e.target?.scrollTop;
+            const scrollHeight = e.target?.scrollHeight;
+            // 是否到底，是否加载完
+            if (
+              clientHeight + scrollTop + 20 >= scrollHeight &&
+              !state.finshed &&
+              !state.loading
+            ) {
+              throttledFn();
+            }
+          }}>
+          <NSpin show={state.loading} size={'small'}>
+            <div
+              class={[
+                styles.listSection,
+                'listSectionResource',
+                !state.loading && state.tableList.length <= 0
+                  ? [styles.emptySection, 'emptySectionResource']
+                  : ''
+              ]}>
+              {state.tableList.length > 0 && (
+                <div class={styles.list}>
+                  {state.tableList.map((item: any) => (
+                    <CardType
+                      isShowAdd
+                      item={item}
+                      isShowCollect={true}
+                      draggable
+                      disabledMouseHover={false}
+                      onClick={() => {
+                        if (item.type === 'IMG') return;
+                        state.show = true;
+                        state.item = item;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                      // isShowAddDisabled={!prepareStore.getIsEditResource}
+                      onAdd={(item: any) => onAdd(item)}
+                    />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/resource-main/components/select-music/index.tsx

@@ -1,4 +1,11 @@
-import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  reactive,
+  watch,
+  toRef
+} from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NModal, NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
@@ -13,6 +20,9 @@ import CardPreview from '/src/components/card-preview';
 import { evaluateDifficult } from '/src/utils/contants';
 import { eventGlobal } from '/src/utils';
 import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 
 const formatType = (type: string) => {
   if (type === 'sahreMusic') {
@@ -57,6 +67,11 @@ export default defineComponent({
     cardType: {
       type: String as PropType<'' | 'homerowk-record' | 'prepare'>,
       default: ''
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
     }
   },
   setup(props) {
@@ -119,6 +134,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.id,
             xmlFileUrl: row.xmlFileUrl
             // exist: index !== -1 ? true : false // 是否存在
@@ -218,6 +234,23 @@ export default defineComponent({
         onAdd(item);
       });
     });
+    // 弹窗拖动
+    // 作业设置
+    let workSetingBoxDragData: any;
+    let workSetingBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSetingBoxClass = 'workSetingBoxClass_drag';
+      workSetingBoxDragData = useDrag(
+        [
+          `${workSetingBoxClass}>.n-card-header`,
+          `${workSetingBoxClass} .bom_drag`
+        ],
+        workSetingBoxClass,
+        toRef(state, 'editStatus'),
+        users.info.id
+      );
+    }
     return () => (
       <div>
         <ResourceSearchGroup
@@ -277,11 +310,20 @@ export default defineComponent({
         </NScrollbar>
 
         {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
+        <CardPreview
+          from={props.from}
+          v-model:show={state.show}
+          item={state.item}
+        />
 
         <NModal
           v-model:show={state.editStatus}
-          class={['modalTitle background', styles.trainEditModal]}
+          style={workSetingBoxDragData.styleDrag.value}
+          class={[
+            'modalTitle background',
+            styles.trainEditModal,
+            workSetingBoxClass
+          ]}
           preset="card"
           title="作业设置">
           <TrainUpdate
@@ -307,6 +349,7 @@ export default defineComponent({
               eventGlobal.emit('onTrainAddItem', train);
             }}
           />
+          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
         </NModal>
       </div>
     );

src/views/prepare-lessons/model/select-music/select-item/index.tsx

@@ -26,6 +26,10 @@ export default defineComponent({
     type: {
       type: String,
       default: ''
+    },
+    from: {
+      type: String,
+      default: ''
     }
   },
   emits: ['add'],
@@ -85,6 +89,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.id,
             xmlFileUrl: row.xmlFileUrl,
             exist: index !== -1 ? true : false // 是否存在
@@ -218,7 +223,11 @@ export default defineComponent({
         </NScrollbar>
 
         {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
+        <CardPreview
+          from={props.from}
+          v-model:show={state.show}
+          item={state.item}
+        />
       </div>
     );
   }

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -92,6 +92,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.content
           });
         });
@@ -130,6 +131,7 @@ export default defineComponent({
           coverImg: item.coverImg,
           type: item.type,
           title: item.title,
+          refFlag: item.refFlag,
           isCollect: item.isCollect,
           isSelected: item.isSelected,
           content: item.content,
@@ -187,9 +189,9 @@ export default defineComponent({
           )}
         </div>
         <NScrollbar
-          class={styles.listContainer}
+          class={[styles.listContainer, 'list_container']}
           style={{
-            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
+            'max-height': `calc(var(--listContainerHeight) - var(--modal-lesson-tab-height) - ${state.searchHeight}) `
           }}
           onScroll={(e: any) => {
             const clientHeight = e.target?.clientHeight;
@@ -208,7 +210,7 @@ export default defineComponent({
           <NSpin show={state.loading} size={'small'}>
             <div
               style={{
-                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
+                'min-height': `calc(var(--listContainerHeight) - var(--modal-lesson-tab-height) - ${state.searchHeight})`
               }}
               class={[
                 styles.listSection,
@@ -219,7 +221,7 @@ export default defineComponent({
               {state.tableList.length > 0 && (
                 <div class={styles.list}>
                   {state.tableList.map((item: any) => (
-                    <div class={styles.itemWrap}>
+                    <div class={[styles.itemWrap, 'selresources_item_Wrap']}>
                       <div class={styles.itemWrapBox}>
                         <CardType
                           isShowAdd={props.from === 'class' ? false : true}
@@ -250,6 +252,7 @@ export default defineComponent({
         <CardPreview
           size={props.from === 'class' ? 'large' : 'default'}
           v-model:show={state.show}
+          from={props.from}
           item={state.item}
         />
       </div>