123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484 |
- import { defineComponent, onMounted, reactive } from 'vue';
- import styles from './index.module.less';
- import {
- NButton,
- NCascader,
- NForm,
- NFormItem,
- NImage,
- NInput,
- NModal,
- NPopselect,
- NScrollbar,
- NSelect,
- NSpace,
- NSpin,
- useDialog,
- useMessage
- } from 'naive-ui';
- import AddTeaching, {
- BOOK_DATA
- } from '/src/views/natural-resources/model/add-teaching';
- import {
- lessonCoursewarePage,
- lessonCoursewareRemove,
- api_lessonCoursewareTeacherCategory
- } from '../../../api';
- import iconUploadBg from '../images/icon-upload-bg.png';
- import { useCatchStore } from '/src/store/modules/catchData';
- import { useThrottleFn } from '@vueuse/core';
- import iconEdit from '../images/icon-edit.png';
- import iconDelete from '../images/icon-delete.png';
- import { modalClickMask } from '/src/state';
- export default defineComponent({
- name: 'select-lessonware',
- emits: ['close', 'confirm'],
- setup(props, { emit }) {
- const catchStore = useCatchStore();
- const dialog = useDialog();
- const message = useMessage();
- const forms = reactive({
- loading: false,
- list: [] as any[],
- teachingStatus: false,
- musicTagList: [] as any[],
- selectItem: {} as any,
- bookVersionId: null,
- keyword: null,
- currentGradeNum: '' as any,
- instrumentId: '' as any,
- removeVisiable: false,
- removeRow: {} as any,
- bookType: '' as any
- });
- const treeList = reactive({
- tempSubjectId: null,
- versionList: [] as any, // 教材
- gradeList: [] as any, // 年级
- bookTypeList: [] as any // 册别
- });
- const getLessonCourseware = async () => {
- forms.loading = true;
- try {
- console.log(forms.bookVersionId, 'bookVersionId')
- const { data } = await lessonCoursewarePage({
- page: 1,
- rows: 99,
- type: 'COURSEWARE',
- enableFlag: 1,
- bookVersionId: forms.bookVersionId === '0' ? null : forms.bookVersionId,
- customFlag: forms.bookVersionId === '0' ? true : null,
- keyword: forms.keyword,
- currentGradeNum: forms.currentGradeNum,
- instrumentId: forms.instrumentId,
- bookType: forms.bookType
- });
- forms.list = data.rows;
- } catch {
- //
- }
- forms.loading = false;
- };
- // 删除教材
- const onDelete = async (item: any) => {
- try {
- await lessonCoursewareRemove({ id: forms.removeRow.id });
- message.success('删除成功');
- getLessonCourseware();
- forms.removeVisiable = false;
- } catch (e) {
- console.log(e);
- }
- };
- const throttledFn = useThrottleFn(() => getLessonCourseware(), 500);
- const onDetail = (item: any) => {
- emit('confirm', item);
- emit('close');
- };
- const getSearchDetail = async () => {
- try {
- const { data } = await api_lessonCoursewareTeacherCategory();
- const result = data || []
- treeList.versionList = [{
- name: '全部',
- id: ''
- }, ...result]
- } catch {
- //
- }
- };
- const selectChildObj = (item: any) => {
- const obj: any = {};
- item?.forEach((child: any) => {
- if (child.id === forms.instrumentId) {
- obj.selected = true;
- obj.name = child.name;
- }
- });
- return obj;
- };
- onMounted(async () => {
- // 获取教材分类列表
- try {
- await catchStore.getSubjects();
- // const { data } = await bookVersionPage({
- // page: 1,
- // rows: 99,
- // type: 'COURSEWARE'
- // });
- // const temp = data.rows || [];
- // temp.forEach((item: any) => {
- // forms.musicTagList.push({
- // id: item.id,
- // name: item.name
- // });
- // });
- await getSearchDetail();
- } catch {
- //
- }
- getLessonCourseware();
- });
- return () => (
- <div class={styles.selectLessonware}>
- <NScrollbar class={styles.classList}>
- <div class={styles.attendClassSearch}>
- <NForm labelAlign="left" labelPlacement="left">
- {treeList.versionList.length > 0 && <NFormItem label="教程:">
- <NSpace class={styles.spaceSection}>
- {treeList.versionList?.map((subject: any) => (
- <span
- class={[
- styles.textBtn,
- (forms.bookVersionId || '') ==
- subject.id && styles.textBtnActive
- ]}
- onClick={() => {
- treeList.bookTypeList = []
- forms.currentGradeNum = ''
- forms.bookType = ''
- if(subject.children && subject.children.length > 0) {
- const result = subject.children || []
- treeList.gradeList = [{
- name: '全部',
- id: ''
- }, ...result]
- } else {
- treeList.gradeList = []
- }
- forms.bookVersionId = subject.id
- throttledFn()
- }}>
- {subject.name}
- </span>
- ))}
- </NSpace>
- </NFormItem>}
- {treeList.gradeList.length > 0 && <NFormItem label="年级:">
- <NSpace class={styles.spaceSection}>
- {treeList.gradeList?.map((subject: any) => (
- <span
- class={[
- styles.textBtn,
- (forms.currentGradeNum || '') == subject.id &&
- styles.textBtnActive
- ]}
- onClick={() => {
- forms.bookType = ''
- if(subject.children && subject.children.length > 0) {
- treeList.bookTypeList = subject.children || []
- const result = subject.children || []
- treeList.bookTypeList = [{
- name: '全部',
- id: ''
- }, ...result]
- } else {
- treeList.bookTypeList = []
- }
- forms.currentGradeNum = subject.id
- throttledFn()
- }}>
- {subject.name}
- </span>
- ))}
- </NSpace>
- </NFormItem>}
- {treeList.bookTypeList.length > 0 && <NFormItem label="册别:">
- <NSpace class={styles.spaceSection}>
- {treeList.bookTypeList?.map((subject: any) => (
- <span
- class={[
- styles.textBtn,
- (forms.bookType || '') ==
- subject.id && styles.textBtnActive
- ]}
- onClick={() => {
- forms.bookType = subject.id
- throttledFn()
- }}>
- {subject.name}
- </span>
- ))}
- </NSpace>
- </NFormItem>}
- <NFormItem label="乐器:">
- <NSpace class={styles.spaceSection}>
- {[
- { name: '全部乐器', value: '' },
- ...catchStore.getSubjectInstrumentOnly
- ].map((subject: any) =>
- subject.instruments && subject.instruments.length > 1 ? (
- <NPopselect
- options={subject.instruments}
- trigger="hover"
- scrollable
- v-model:value={treeList.tempSubjectId}
- onUpdate:value={() => {
- forms.instrumentId = treeList.tempSubjectId;
- throttledFn()
- }}
- key={subject.value}
- class={[styles.popSelect]}>
- <span
- class={[
- styles.textBtn,
- selectChildObj(subject.instruments).selected &&
- styles.textBtnActive
- ]}>
- {selectChildObj(subject.instruments).name ||
- subject.name}
- <i class={styles.iconArrow}></i>
- </span>
- </NPopselect>
- ) : (
- <span
- class={[
- styles.textBtn,
- forms.instrumentId === subject.value &&
- styles.textBtnActive
- ]}
- onClick={() => {
- forms.instrumentId = subject.value;
- treeList.tempSubjectId = null;
- throttledFn()
- }}>
- {subject.name}
- </span>
- )
- )}
- </NSpace>
- </NFormItem>
- </NForm>
- {/* <NInput
- placeholder="请输入教材名称"
- clearable
- v-model:value={forms.keyword}
- onKeyup={(e: KeyboardEvent) => {
- if (e.code === 'Enter') {
- throttledFn();
- }
- }}
- onClear={() => {
- forms.keyword = null;
- throttledFn();
- }}>
- {{
- prefix: () => (
- <span
- class="icon-search-input"
- onClick={() => throttledFn()}></span>
- )
- }}
- </NInput>
- <NCascader
- placeholder="请选择乐器"
- v-model:value={forms.instrumentId}
- onUpdate:value={() => throttledFn()}
- options={
- [
- { name: '全部乐器', id: null },
- ...catchStore.getSubjectList
- ] as any
- }
- checkStrategy="child"
- showPath={false}
- childrenField="instruments"
- expandTrigger="hover"
- labelField="name"
- valueField="id"
- clearable
- filterable
- style={{ width: '400px' }}
- />
- <NSelect
- placeholder="全部版本"
- clearable
- options={[{ id: null, name: '全部版本' }, ...forms.musicTagList]}
- labelField="name"
- valueField="id"
- v-model:value={forms.bookVersionId}
- onUpdate:value={() => throttledFn()}
- />
- <NSelect
- placeholder="全部年级"
- options={
- [{ label: '全部年级', value: null }, ...BOOK_DATA.grades] as any
- }
- v-model:value={forms.currentGradeNum}
- clearable
- filterable
- onUpdate:value={() => throttledFn()}
- /> */}
- {/* <NSelect
- placeholder="全部册别"
- options={
- [
- { label: '全部册别', value: null },
- ...BOOK_DATA.bookTypes
- ] as any
- }
- v-model:value={forms.bookType}
- clearable
- onUpdate:value={() => throttledFn()}
- /> */}
- </div>
- <NSpin show={forms.loading} class={styles.content}>
- <NSpace class={styles.teachingSpace}>
- <div
- class={styles.item}
- key={`item--1`}
- onClick={() => {
- forms.selectItem = {};
- forms.teachingStatus = true;
- }}>
- <div class={styles.cover}>
- <div class={styles.itemImg}>
- <div class={styles.itemBg}></div>
- <NImage
- objectFit="cover"
- src={iconUploadBg}
- lazy
- previewDisabled={true}
- onLoad={(e: any) => {
- (e.target as any).dataset.loaded = 'true';
- }}
- />
- </div>
- </div>
- </div>
- {forms.list.map((item: any, index: number) => {
- return (
- <div
- class={styles.item}
- key={`item-${index}`}
- onClick={() => onDetail(item)}>
- <div class={styles.cover}>
- <div class={styles.itemImg}>
- <div class={styles.itemBg}></div>
- <NImage
- objectFit="cover"
- src={item.coverImg}
- lazy
- previewDisabled={true}
- onLoad={(e: any) => {
- (e.target as any).dataset.loaded = 'true';
- }}
- />
- {item.customFlag && (
- <>
- <div class={styles.iconCustom}></div>
- <div class={styles.editContainer}>
- <div class={styles.editBtnGroup}>
- <img
- src={iconEdit}
- class={styles.imgBtn}
- onClick={(e: MouseEvent) => {
- e.stopPropagation();
- forms.selectItem = item;
- forms.teachingStatus = true;
- }}
- />
- <img
- src={iconDelete}
- class={styles.imgBtn}
- onClick={(e: MouseEvent) => {
- e.stopPropagation();
- forms.removeVisiable = true;
- forms.removeRow = item;
- }}
- />
- </div>
- </div>
- </>
- )}
- </div>
- </div>
- <div class={styles.itemName}>{item.name}</div>
- </div>
- );
- })}
- </NSpace>
- </NSpin>
- </NScrollbar>
- {/* 添加自定义教材 */}
- <NModal
- maskClosable={modalClickMask}
- v-model:show={forms.teachingStatus}
- preset="card"
- showIcon={false}
- class={['modalTitle background', styles.teachingModal]}
- title={'自定义教材'}
- blockScroll={false}>
- <AddTeaching
- item={forms.selectItem}
- onClose={() => (forms.teachingStatus = false)}
- onConfirm={() => {
- getLessonCourseware();
- forms.selectItem = {};
- }}
- />
- </NModal>
- <NModal
- maskClosable={modalClickMask}
- v-model:show={forms.removeVisiable}
- preset="card"
- class={['modalTitle', styles.removeVisiable]}
- title={'删除教材'}>
- <div class={styles.studentRemove}>
- <p>是否删除该教材</p>
- <NSpace class={styles.btnGroup} justify="center">
- <NButton round type="primary" onClick={onDelete}>
- 确定
- </NButton>
- <NButton round onClick={() => (forms.removeVisiable = false)}>
- 取消
- </NButton>
- </NSpace>
- </div>
- </NModal>
- </div>
- );
- }
- });
|