|
@@ -1,6 +1,13 @@
|
|
import { defineComponent, onMounted, ref } from 'vue';
|
|
import { defineComponent, onMounted, ref } from 'vue';
|
|
import styles from './index.module.less';
|
|
import styles from './index.module.less';
|
|
-import { NButton, NScrollbar, NSpace, useMessage } from 'naive-ui';
|
|
|
|
|
|
+import {
|
|
|
|
+ NButton,
|
|
|
|
+ NScrollbar,
|
|
|
|
+ NSpace,
|
|
|
|
+ NTabPane,
|
|
|
|
+ NTabs,
|
|
|
|
+ useMessage
|
|
|
|
+} from 'naive-ui';
|
|
import { useCatchStore } from '/src/store/modules/catchData';
|
|
import { useCatchStore } from '/src/store/modules/catchData';
|
|
import iconSelect from '../../images/icon-select.png';
|
|
import iconSelect from '../../images/icon-select.png';
|
|
import { usePrepareStore } from '/src/store/modules/prepareLessons';
|
|
import { usePrepareStore } from '/src/store/modules/prepareLessons';
|
|
@@ -18,6 +25,7 @@ export default defineComponent({
|
|
setup(props, { emit }) {
|
|
setup(props, { emit }) {
|
|
const catchStore = useCatchStore();
|
|
const catchStore = useCatchStore();
|
|
const prepareStore = usePrepareStore();
|
|
const prepareStore = usePrepareStore();
|
|
|
|
+ const tabId = ref('' as any);
|
|
const message = useMessage();
|
|
const message = useMessage();
|
|
const selectSubjectIds = ref([] as any);
|
|
const selectSubjectIds = ref([] as any);
|
|
const subjectList = ref([] as any);
|
|
const subjectList = ref([] as any);
|
|
@@ -78,10 +86,36 @@ export default defineComponent({
|
|
});
|
|
});
|
|
emit('confirm', { subjectIds: selectSubjectIds.value, subjectCode });
|
|
emit('confirm', { subjectIds: selectSubjectIds.value, subjectCode });
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+ const formatSubjectList = () => {
|
|
|
|
+ const subjects = catchStore.getEnableSubjects;
|
|
|
|
+ const temp: any = [];
|
|
|
|
+ subjects.forEach((subject: any) => {
|
|
|
|
+ console.log(
|
|
|
|
+ subject.id,
|
|
|
|
+ subject.instruments,
|
|
|
|
+ tabId.value && subject.instruments && tabId.value === subject.id
|
|
|
|
+ );
|
|
|
|
+ if (tabId.value === '' && subject.instruments) {
|
|
|
|
+ temp.push(...subject.instruments);
|
|
|
|
+ } else if (
|
|
|
|
+ tabId.value &&
|
|
|
|
+ subject.instruments &&
|
|
|
|
+ Number(tabId.value) === subject.id
|
|
|
|
+ ) {
|
|
|
|
+ temp.push(...subject.instruments);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ subjectList.value = temp;
|
|
|
|
+ };
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
// 获取教材分类列表
|
|
// 获取教材分类列表
|
|
- await catchStore.getMusicInstrument();
|
|
|
|
- subjectList.value = catchStore.getMusicInstruments;
|
|
|
|
|
|
+ // await catchStore.getMusicInstrument();
|
|
|
|
+ // subjectList.value = catchStore.getMusicInstruments;
|
|
|
|
+ await catchStore.getSubjects();
|
|
|
|
+
|
|
|
|
+ formatSubjectList();
|
|
// const teachingSubjectList = prepareStore.getSubjectList; // 教材自带声部;
|
|
// const teachingSubjectList = prepareStore.getSubjectList; // 教材自带声部;
|
|
// const tempSubjectList: any = [];
|
|
// const tempSubjectList: any = [];
|
|
// baseAllSubjectList.forEach((subject: any) => {
|
|
// baseAllSubjectList.forEach((subject: any) => {
|
|
@@ -105,7 +139,26 @@ export default defineComponent({
|
|
<span>(勾选后则对应乐器下的课件内容将被当前课件内容全部替换)</span>
|
|
<span>(勾选后则对应乐器下的课件内容将被当前课件内容全部替换)</span>
|
|
</div> */}
|
|
</div> */}
|
|
|
|
|
|
- <NScrollbar style={{ maxHeight: '60vh' }}>
|
|
|
|
|
|
+ <NTabs
|
|
|
|
+ defaultValue=""
|
|
|
|
+ paneClass={styles.paneTitle}
|
|
|
|
+ justifyContent="start"
|
|
|
|
+ paneWrapperClass={styles.paneWrapperContainer}
|
|
|
|
+ value={tabId.value}
|
|
|
|
+ onUpdate:value={(val: any) => {
|
|
|
|
+ tabId.value = val;
|
|
|
|
+ formatSubjectList();
|
|
|
|
+ }}>
|
|
|
|
+ {[{ name: '全部声部', id: '' }, ...catchStore.getEnableSubjects].map(
|
|
|
|
+ (item: any) => (
|
|
|
|
+ <NTabPane
|
|
|
|
+ name={`${item.id}`}
|
|
|
|
+ tab={item.name}
|
|
|
|
+ displayDirective="if"></NTabPane>
|
|
|
|
+ )
|
|
|
|
+ )}
|
|
|
|
+ </NTabs>
|
|
|
|
+ <NScrollbar style={{ maxHeight: '50vh', minHeight: '50vh' }}>
|
|
<div class={styles.subjectList}>
|
|
<div class={styles.subjectList}>
|
|
{subjectList.value.map((subject: any) => (
|
|
{subjectList.value.map((subject: any) => (
|
|
<div
|
|
<div
|