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

import { defineComponent, onMounted, reactive, watch } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NModal,
  NScrollbar,
  NSelect,
  NSpace,
  NSpin,
  useMessage,
  useDialog
} 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 {
  queryCourseware,
  saveCourseware,
  teacherKnowledgeMaterialDelete
} from '../../../api';
import Draggable from 'vuedraggable';
import iconDelete from '../../../images/icon-delete.png';
import { 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';

export default defineComponent({
  name: 'courseware-modal',
  setup() {
    const catchStore = useCatchStore();
    const prepareStore = usePrepareStore();
    const route = useRoute();
    const router = useRouter();
    const dialog = useDialog();
    const message = useMessage();
    const forms = reactive({
      subjectId: route.query.subjectId ? Number(route.query.subjectId) : null,
      coursewareList: [] as any,
      loadingStatus: false,
      showAttendClass: false,
      removeIds: [] as any, // 临时删除的编号
      drag: false,
      removeVisiable: false,
      removeVisiable1: false,
      show: false,
      item: {} as any,
      previewModal: false,
      previewParams: {
        type: '',
        subjectId: '',
        detailId: ''
      } as any
    });

    // 获取列表
    const getList = async () => {
      forms.loadingStatus = true;
      try {
        // 判断是否有选择对应的课件 或声部
        if (!prepareStore.getSelectKey || !prepareStore.getSubjectId)
          return (forms.loadingStatus = false);
        const { data } = await queryCourseware({
          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
          subjectId: prepareStore.getSubjectId,
          page: 1,
          rows: 99
        });
        const tempRows = data.rows || [];
        const temp: any = [];
        tempRows.forEach((row: any) => {
          temp.push({
            id: row.id,
            materialId: row.materialId,
            coverImg: row.coverImg,
            type: row.materialType,
            title: row.materialName,
            isCollect: !!row.favoriteFlag,
            isSelected: row.source === 'PLATFORM' ? true : false,
            content: row.content,
            removeFlag: row.removeFlag
          });
        });

        prepareStore.setCoursewareList(temp || []);

        const tempCourse: any = [];
        temp.forEach((item: any) => {
          if (!forms.removeIds.includes(item.id)) {
            tempCourse.push(item);
          }
        });
        forms.coursewareList = tempCourse;
      } catch {
        //
      }
      forms.loadingStatus = false;
    };

    // 监听选择的key 左侧选择了其它的课
    watch(
      () => prepareStore.getSelectKey,
      () => {
        forms.drag = false;
        getList();
      }
    );
    // 声部变化时
    watch(
      () => prepareStore.getSubjectId,
      () => {
        getList();
      }
    );
    watch(
      () => prepareStore.getIsAddResource,
      (val: boolean) => {
        if (val) {
          getList();
          prepareStore.setIsAddResource(false);
        }
      }
    );

    // 删除
    const onDelete = (item: any) => {
      //
      forms.removeIds.push(item.id);
      const index = forms.coursewareList.findIndex(
        (c: any) => c.id === item.id
      );
      forms.coursewareList.splice(index, 1);
      // prepareStore.setCoursewareList(forms.coursewareList);
      // console.log(prepareStore.getCoursewareList, 'getCourseware');
    };

    // 完成编辑
    const onOverEdit = async () => {
      // dialog.warning({
      //   title: '提示',
      //   content: `是否完成编辑？`,
      //   positiveText: '确定',
      //   negativeText: '取消',
      //   onPositiveClick: async () => {
      try {
        const temp: any = [];
        forms.coursewareList.forEach((item: any) => {
          temp.push({
            materialName: item.title,
            materialType: item.type,
            materialId: item.materialId,
            id: item.id
          });
        });
        // 保存课件
        await saveCourseware({
          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
          lessonCoursewareId: prepareStore.getLessonCoursewareId,
          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
          subjectId: prepareStore.getSubjectId,
          materialList: [...temp]
        });

        forms.drag = false;
        message.success('编辑成功');
        forms.removeVisiable = false;
        prepareStore.setCoursewareList(deepClone(forms.coursewareList));
        prepareStore.setIsEditResource(false);
        // 重置临时删除编号
        forms.removeIds = [];
      } catch {
        //
      }
      //   }
      // });
    };

    // 预览上课
    const onPreviewAttend = () => {
      // 获取上架的数据
      let count = 0;
      forms.coursewareList.forEach((item: any) => {
        if (!item.removeFlag) {
          count++;
        }
      });
      if (count <= 0) {
        message.error('课件不能为空');
        return;
      }
      // 判断是否在应用里面
      console.log(state.application, 'state.application');
      if (state.application) {
        forms.previewModal = true;
        forms.previewParams = {
          type: 'preview',
          subjectId: prepareStore.getSubjectId,
          detailId: prepareStore.getSelectKey
        };
      } else {
        const { href } = router.resolve({
          path: '/attend-class',
          query: {
            type: 'preview',
            subjectId: prepareStore.getSubjectId,
            detailId: prepareStore.getSelectKey
          }
        });
        window.open(href, +new Date() + '');
      }
    };

    // 单个删除
    const onRemove = async (item: any) => {
      try {
        dialog.warning({
          title: '提示',
          content: '该资源已下架，是否删除？',
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: async () => {
            forms.removeIds.push(item.id);
            await teacherKnowledgeMaterialDelete({ ids: item.id });
            message.success('删除成功');
            getList();
          }
        });
      } catch {
        //
      }
    };

    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getSubjects();

      const subjectList = catchStore.getSubjectList;
      // 并且没有声部时才会更新
      console.log(forms.subjectId, 'forms.subjectId');
      if (subjectList.length > 0) {
        // 判断浏览器上面是否有
        if (forms.subjectId) {
          prepareStore.setSubjectId(forms.subjectId);
        } else if (!prepareStore.getSubjectId) {
          // 判断是否有缓存
          prepareStore.setSubjectId(subjectList[0].id);
        }
      }

      await getList();
    });

    return () => (
      <div class={styles.coursewareModal}>
        <div class={styles.btnGroup}>
          {forms.drag ? (
            <NSpace>
              <NButton
                type="default"
                onClick={() => {
                  forms.removeVisiable = true;
                }}>
                完成编辑
              </NButton>
              <NButton
                type="error"
                onClick={() => {
                  forms.drag = false;
                  prepareStore.setIsEditResource(false);
                  forms.removeIds = [];
                  getList();
                }}>
                取消编辑
              </NButton>
              <NButton
                type="error"
                onClick={() => {
                  forms.removeVisiable1 = true;
                }}>
                清空资源
              </NButton>
              <span class={styles.tips}>拖动可将资源进行排序</span>
            </NSpace>
          ) : (
            <NSpace>
              <NSelect
                placeholder="选择声部"
                options={catchStore.getSubjectList}
                labelField="name"
                valueField="id"
                value={prepareStore.getSubjectId}
                onUpdate:value={(val: any) => {
                  prepareStore.setSubjectId(val);
                  getList();
                }}
              />
              <NButton
                type="default"
                onClick={() => {
                  forms.drag = true;
                  prepareStore.setIsEditResource(true);
                }}>
                编辑
              </NButton>
            </NSpace>
          )}

          <NSpace>
            <NButton type="default" onClick={onPreviewAttend}>
              预览
            </NButton>
            <NButton
              {...{ id: 'lessons-3' }}
              type="primary"
              onClick={() => {
                let count = 0;
                forms.coursewareList.forEach((item: any) => {
                  if (!item.removeFlag) {
                    count++;
                  }
                });
                if (count <= 0) {
                  message.error('课件不能为空');
                  return;
                }
                forms.showAttendClass = true;
              }}>
              开始上课
            </NButton>
          </NSpace>
        </div>

        <NScrollbar class={styles.listContainer} {...{ id: 'lessons-2' }}>
          <NSpin show={forms.loadingStatus}>
            <div
              class={[
                styles.listSection,
                !forms.loadingStatus && forms.coursewareList.length <= 0
                  ? styles.emptySection
                  : ''
              ]}>
              {forms.coursewareList.length > 0 && (
                <>
                  {forms.drag ? (
                    <Draggable
                      v-model:modelValue={forms.coursewareList}
                      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.itemBlock, 'row-nav']}>
                              <CardType
                                class={[styles.itemContent]}
                                isShowCollect={false}
                                offShelf={item.removeFlag ? true : false}
                                onOffShelf={() => onRemove(item)}
                                item={item}
                              />
                              <div class={styles.itemOperation}>
                                <img
                                  src={iconDelete}
                                  class={styles.iconDelete}
                                  onClick={(e: MouseEvent) => {
                                    e.stopPropagation();
                                    onDelete(item);
                                  }}
                                />
                              </div>
                            </div>
                          );
                        }
                      }}
                    </Draggable>
                  ) : (
                    <div class={styles.list}>
                      {forms.coursewareList.map((item: any, index: number) => (
                        <CardType
                          class={[styles.itemContent, 'handle']}
                          isShowCollect={false}
                          item={item}
                          offShelf={item.removeFlag ? true : false}
                          onOffShelf={() => onRemove(item)}
                          disabledMouseHover={false}
                          onClick={() => {
                            if (item.type === 'IMG') return;
                            forms.show = true;
                            forms.item = item;
                          }}
                        />
                      ))}
                    </div>
                  )}
                </>
              )}

              {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
                <TheEmpty description="暂无课件" />
              )}
            </div>
          </NSpin>
        </NScrollbar>

        <NModal
          v-model:show={forms.showAttendClass}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal]}
          title={'选择班级'}
          blockScroll={false}>
          <AttendClass
            onClose={() => (forms.showAttendClass = false)}
            onPreview={(item: any) => {
              if (state.application) {
                forms.previewModal = true;
                forms.previewParams = {
                  ...item
                };
              } else {
                const { href } = router.resolve({
                  path: '/attend-class',
                  query: {
                    ...item
                  }
                });
                window.open(href, +new Date() + '');
              }
            }}
          />
        </NModal>

        {/* 弹窗查看 */}
        <CardPreview v-model:show={forms.show} item={forms.item} />

        <NModal
          v-model:show={forms.removeVisiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable]}
          title={'提示'}>
          <div class={styles.studentRemove}>
            <p>是否完成编辑？</p>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton round type="primary" onClick={onOverEdit}>
                确定
              </NButton>
              <NButton round onClick={() => (forms.removeVisiable = false)}>
                取消
              </NButton>
            </NSpace>
          </div>
        </NModal>

        <NModal
          v-model:show={forms.removeVisiable1}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'清空资源'}>
          <div class={styles.studentRemove}>
            <p>
              请确认是否要清空资源？
              <span>点击确认后所有的素材内容 将被清空掉。</span>
            </p>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton
                round
                type="primary"
                onClick={() => {
                  forms.coursewareList.forEach((item: any) => {
                    forms.removeIds.push(item.id);
                  });
                  forms.coursewareList = [];
                  forms.removeVisiable1 = false;
                  // prepareStore.setCoursewareList([]);

                  console.log(prepareStore.getCoursewareList, 'getCourseware1');
                }}>
                确定
              </NButton>
              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
                取消
              </NButton>
            </NSpace>
          </div>
        </NModal>

        <PreviewWindow
          v-model:show={forms.previewModal}
          type="attend"
          params={forms.previewParams}
        />
      </div>
    );
  }
});