Update index.tsx

src/views/prepare-lessons/model/subject-sync/index.tsx

@@ -1,202 +1,182 @@
-import { defineComponent, onMounted, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NScrollbar,
-  NSpace,
-  NTabPane,
-  NTabs,
-  useMessage
-} from 'naive-ui';
-import { useCatchStore } from '/src/store/modules/catchData';
-import iconSelect from '../../images/icon-select.png';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { PageEnum } from '/src/enums/pageEnum';
-
-export default defineComponent({
-  name: 'subject-sync',
-  props: {
-    subjectId: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  emits: ['close', 'confirm'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const prepareStore = usePrepareStore();
-    const tabId = ref('' as any);
-    const message = useMessage();
-    const selectSubjectIds = ref([] as any);
-    const subjectList = ref([] as any);
-
-    const subjectImgs = {
-      Panpipes: 'https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png',
-      // Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
-      Ocarina: 'https://oss.dayaedu.com/ktqy/17143623857205dba41a5.png',
-      Whistling: 'https://oss.dayaedu.com/ktqy/1714362351692fcf8c0b8.png',
-      Woodwind: 'https://oss.dayaedu.com/ktqy/17103860536966826c50d.png',
-      'Tenor Recorder':
-        'https://oss.dayaedu.com/ktqy/17103860536950592e357.png',
-      Nai: 'https://oss.dayaedu.com/ktqy/1710386053697af4aa985.png',
-      'Baroque Recorder':
-        'https://oss.dayaedu.com/ktqy/1710386053698031e847a.png'
-    } as any;
-    /*
-      https://oss.dayaedu.com/ktqy/17103860536950592e357.png
-      https://oss.dayaedu.com/ktqy/17103860536966826c50d.png
-      https://oss.dayaedu.com/ktqy/1710386053697af4aa985.png
-      https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png
-      https://oss.dayaedu.com/ktqy/171038605369851874b22.png
-      https://oss.dayaedu.com/ktqy/1710386053698031e847a.png
-    */
-    const onSubmit = () => {
-      if (selectSubjectIds.value.length <= 0) {
-        message.error('至少选择一个声部进行同步');
-        return;
-      }
-
-      const subjectCode: any[] = [];
-      // subjectList.value.forEach((subject: any) => {
-      //   if (selectSubjectIds.value.includes(subject.id)) {
-      //     subjectCode.push({
-      //       materialId: subject.id,
-      //       coverImg: subjectImgs[subject.code] || subjectImgs.Panpipes,
-      //       dataJson: null,
-      //       title: subject.name,
-      //       isCollect: false,
-      //       isSelected: false,
-      //       content: subject.code
-      //     });
-      //   }
-      // });
-      selectSubjectIds.value.forEach((id: any) => {
-        const item = subjectList.value.find(
-          (subject: any) => subject.id === id
-        );
-        console.log(item, 'item');
-        if (item) {
-          subjectCode.push({
-            materialId: item.id,
-            coverImg: subjectImgs[item.code] || subjectImgs.Panpipes,
-            dataJson: null,
-            title: item.name,
-            isCollect: false,
-            isSelected: false,
-            content: item.code
-          });
-        }
-      });
-      emit('confirm', { subjectIds: selectSubjectIds.value, subjectCode });
-    };
-
-    const formatSubjectList = () => {
-      const subjects = catchStore.getEnableSubjects;
-      const temp: any = [];
-      subjects.forEach((subject: any) => {
-        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 () => {
-      // 获取教材分类列表
-      // await catchStore.getMusicInstrument();
-      // subjectList.value = catchStore.getMusicInstruments;
-      await catchStore.getSubjects();
-
-      formatSubjectList();
-      // const teachingSubjectList = prepareStore.getSubjectList; // 教材自带声部；
-      // const tempSubjectList: any = [];
-      // baseAllSubjectList.forEach((subject: any) => {
-      //   const index = teachingSubjectList.findIndex(
-      //     (t: any) => t.id == subject.id
-      //   );
-      //   if (index != -1) {
-      //     tempSubjectList.push(subject);
-      //   }
-      // });
-
-      // subjectList.value = tempSubjectList;
-      if (props.subjectId) {
-        selectSubjectIds.value = [Number(props.subjectId)];
-      }
-    });
-    return () => (
-      <div class={styles.subjectSync}>
-        {/* <div class={styles.tips}>
-          请选择当前课件可使用的乐器
-          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
-        </div> */}
-
-        <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}>
-            {subjectList.value.map((subject: any) => (
-              <div
-                class={[
-                  styles.subjectItem,
-                  selectSubjectIds.value.includes(subject.id)
-                    ? styles.subjectSelect
-                    : ''
-                ]}
-                onClick={() => {
-                  if (selectSubjectIds.value.includes(subject.id)) {
-                    const index = selectSubjectIds.value.indexOf(subject.id);
-                    selectSubjectIds.value.splice(index, 1);
-                  } else {
-                    selectSubjectIds.value.push(subject.id);
-                  }
-                }}>
-                <div class={styles.imgSection}>
-                  <img src={subject.img} />
-
-                  {selectSubjectIds.value.includes(subject.id) && (
-                    <img src={iconSelect} class={styles.iconSelect} />
-                  )}
-                </div>
-
-                <p class={styles.subjectName}>{subject.name}</p>
-              </div>
-            ))}
-          </div>
-        </NScrollbar>
-
-        <NSpace class={styles.btnGroupModal} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton round type="primary" onClick={onSubmit}>
-            确定
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NScrollbar,
+  NSpace,
+  NTabPane,
+  NTabs,
+  useMessage
+} from 'naive-ui';
+import { useCatchStore } from '/src/store/modules/catchData';
+import iconSelect from '../../images/icon-select.png';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { PageEnum } from '/src/enums/pageEnum';
+
+export default defineComponent({
+  name: 'subject-sync',
+  props: {
+    subjectId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const prepareStore = usePrepareStore();
+    const tabId = ref('' as any);
+    const message = useMessage();
+    const selectSubjectIds = ref([] as any);
+    const subjectList = ref([] as any);
+
+    const subjectImgs = {
+      Panpipes: 'https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png',
+      // Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
+
+      Ocarina: 'https://oss.dayaedu.com/ktqy/17143623857205dba41a5.png',
+      'Alto Ocarina': 'https://oss.dayaedu.com/ktqy/17143623857205dba41a5.png',
+
+      Whistling: 'https://oss.dayaedu.com/ktqy/1714362351692fcf8c0b8.png',
+      'Soprano Ocarina':
+        'https://oss.dayaedu.com/ktqy/1714362351692fcf8c0b8.png',
+
+      Woodwind: 'https://oss.dayaedu.com/ktqy/17103860536966826c50d.png',
+      Hulusi: 'https://oss.dayaedu.com/ktqy/17103860536966826c50d.png',
+
+      'Tenor Recorder':
+        'https://oss.dayaedu.com/ktqy/17103860536950592e357.png',
+      'German Recorder':
+        'https://oss.dayaedu.com/ktqy/17103860536950592e357.png',
+
+      Nai: 'https://oss.dayaedu.com/ktqy/1710386053697af4aa985.png',
+      Melodica: 'https://oss.dayaedu.com/ktqy/1710386053697af4aa985.png',
+
+      'Baroque Recorder':
+        'https://oss.dayaedu.com/ktqy/1710386053698031e847a.png'
+    } as any;
+    const onSubmit = () => {
+      if (selectSubjectIds.value.length <= 0) {
+        message.error('至少选择一个声部进行同步');
+        return;
+      }
+
+      const subjectCode: any[] = [];
+      selectSubjectIds.value.forEach((id: any) => {
+        const item = subjectList.value.find(
+          (subject: any) => subject.id === id
+        );
+        console.log(item, 'item', item.code);
+
+        if (item) {
+          const tempCode = item.code ? item.code.split(',')[0] : '';
+          subjectCode.push({
+            materialId: item.id,
+            coverImg: subjectImgs[tempCode] || subjectImgs.Panpipes,
+            dataJson: null,
+            title: item.name,
+            isCollect: false,
+            isSelected: false,
+            content: item.code
+          });
+        }
+      });
+      emit('confirm', { subjectIds: selectSubjectIds.value, subjectCode });
+    };
+
+    const formatSubjectList = () => {
+      const subjects = catchStore.getEnableSubjects;
+      const temp: any = [];
+      subjects.forEach((subject: any) => {
+        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 () => {
+      // 获取教材分类列表
+      await catchStore.getSubjects();
+
+      formatSubjectList();
+      if (props.subjectId) {
+        selectSubjectIds.value = [Number(props.subjectId)];
+      }
+    });
+    return () => (
+      <div class={styles.subjectSync}>
+        {/* <div class={styles.tips}>
+          请选择当前课件可使用的乐器
+          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
+        </div> */}
+
+        <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}>
+            {subjectList.value.map((subject: any) => (
+              <div
+                class={[
+                  styles.subjectItem,
+                  selectSubjectIds.value.includes(subject.id)
+                    ? styles.subjectSelect
+                    : ''
+                ]}
+                onClick={() => {
+                  if (selectSubjectIds.value.includes(subject.id)) {
+                    const index = selectSubjectIds.value.indexOf(subject.id);
+                    selectSubjectIds.value.splice(index, 1);
+                  } else {
+                    selectSubjectIds.value.push(subject.id);
+                  }
+                }}>
+                <div class={styles.imgSection}>
+                  <img src={subject.img} />
+
+                  {selectSubjectIds.value.includes(subject.id) && (
+                    <img src={iconSelect} class={styles.iconSelect} />
+                  )}
+                </div>
+
+                <p class={styles.subjectName}>{subject.name}</p>
+              </div>
+            ))}
+          </div>
+        </NScrollbar>
+
+        <NSpace class={styles.btnGroupModal} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit}>
+            确定
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});