修改声部

src/pc/api.ts

@@ -29,8 +29,8 @@ export const api_musicSheetCreationUpdate = (data: any) => {
   return request.post(`/musicSheetCreation/update`, { data, requestType: "json" });
 };
 /** 声部 */
-export const api_subjectList = () => {
-  return request.post(`/subject/list`);
+export const api_subjectList = (data: any) => {
+  return request.post(`/subject/list`, { data, requestType: "json" });
 };
 export const api_musicalInstrumentList = (data: any) => {
   return request.post(`/musicalInstrument/list`, { data, requestType: "json" });

src/pc/component/upload-to-resources/index.module.less

@@ -32,23 +32,28 @@
 
 .form {
     padding: 26px;
+
     :global {
-        .n-form-item .n-form-item-feedback-wrapper{
+        .n-form-item .n-form-item-feedback-wrapper {
             --n-feedback-height: 26px;
         }
+
         .n-form-item.n-form-item--left-labelled:last-child {
             .n-form-item-feedback-wrapper {
                 display: none;
             }
         }
-        .n-form-item .n-form-item-label{
+
+        .n-form-item .n-form-item-label {
             color: #666;
         }
-        .n-form-item-label.n-form-item-label--right-mark{
+
+        .n-form-item-label.n-form-item-label--right-mark {
             min-height: 46px;
         }
-        .n-base-selection{
-            --n-height: 46px;
+
+        .n-base-selection {
+            --n-height: 46px !important;
         }
     }
 
@@ -86,12 +91,14 @@
             border-color: #AAAAAA;
             margin: 0 8px;
         }
-        .n-button--loading{
+
+        .n-button--loading {
             opacity: .6;
         }
     }
 }
-.productIframe{
+
+.productIframe {
     position: fixed;
     width: 1000px;
     height: 80vh;

src/pc/component/upload-to-resources/index.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import ABCJS, { AbcElem, AbcVisualParams, ClickListenerAnalysis, ClickListenerDrag, NoteTimingEvent, SynthObjectController } from "abcjs";
-import { api_musicSheetCreationWav2mp3, api_musicSheetCreationSaveMusic, api_musicalInstrumentList, api_musicSheetCreationUpdate } from "../../api";
-import { NButton, NForm, NFormItem, NIcon, NModal, NProgress, NSelect, NSpace, useMessage } from "naive-ui";
+import { api_musicSheetCreationWav2mp3, api_musicSheetCreationSaveMusic, api_musicalInstrumentList, api_musicSheetCreationUpdate, api_subjectList } from "../../api";
+import { NButton, NCascader, NForm, NFormItem, NIcon, NModal, NProgress, NSelect, NSpace, useMessage } from "naive-ui";
 import styles from "./index.module.less";
 import { Close } from "@vicons/ionicons5";
 import { SelectMixedOption } from "naive-ui/es/select/src/interface";
@@ -28,7 +28,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const message = useMessage();
     const model = reactive({
-      subjects: [] as SelectMixedOption[],
+      subjects: [] as any[],
       saveLoading: false,
       saveProgress: 0,
       productOpen: false,
@@ -44,13 +44,13 @@ export default defineComponent({
       musicJianSvg: "",
     });
     const getSubjects = async () => {
-      const { data } = await api_musicalInstrumentList({ page: 1 });
-      model.subjects = data.map((item: any) => {
-        return {
-          label: item.name,
-          value: item.id,
-        };
+      const { data } = await api_subjectList({
+        enableFlag: true,
+        delFlag: 0,
+        page: 1,
+        rows: 999,
       });
+      model.subjects = data;
     };
 
     const handleProductResult = (res: MessageEvent) => {
@@ -108,13 +108,23 @@ export default defineComponent({
       () => props.item,
       () => {
         // console.log(props.item, model.subjects);
-        const subjectId = model.subjects.length > 0 ? model.subjects[0].value : null;
+        const subjectId = model.subjects.length > 0 ? model.subjects[0].instruments[0]?.id : null;
         froms.subjectId = props.item.subjectId ?? subjectId;
-        const cbsMusicalInstrumentIds = model.subjects.length > 0 ? model.subjects[0] : null;
+        const cbsMusicalInstrumentIds = model.subjects.length > 0 ? model.subjects[0].instruments[0]?.id : null;
         const cbsM = props.item.cbsMusicalInstrumentIds ?? cbsMusicalInstrumentIds;
-        froms.cbsMusicalInstrumentIds = cbsM ? Number(cbsM) : null;
-
-        console.log(froms.cbsMusicalInstrumentIds, "froms.cbsMusicalInstrumentIds");
+        let status = false;
+        if (model.subjects.length > 0) {
+          model.subjects.forEach((item: any) => {
+            if (Array.isArray(item.instruments)) {
+              item.instruments.forEach((child: any) => {
+                if (cbsM === child.id) {
+                  status = true;
+                }
+              });
+            }
+          });
+        }
+        froms.cbsMusicalInstrumentIds = status ? (cbsM ? cbsM : null) : null;
       }
     );
 
@@ -293,12 +303,27 @@ export default defineComponent({
                 path="cbsMusicalInstrumentIds"
                 rule={{
                   required: true,
-                  type: "number",
+                  // type: "number",
                   message: "请选择素材可用乐器",
                   trigger: "change",
                 }}
               >
-                <NSelect to="body" disabled={model.saveLoading} placeholder="请选择素材可用乐器" options={model.subjects} v-model:value={froms.cbsMusicalInstrumentIds}></NSelect>
+                {/* <NSelect to="body" disabled={model.saveLoading} placeholder="请选择素材可用乐器" options={model.subjects} v-model:value={froms.cbsMusicalInstrumentIds}></NSelect> */}
+                <NCascader
+                  to="body"
+                  disabled={model.saveLoading}
+                  placeholder="请选择素材可用乐器"
+                  options={model.subjects}
+                  v-model:value={froms.cbsMusicalInstrumentIds}
+                  checkStrategy="child"
+                  showPath={false}
+                  childrenField="instruments"
+                  expandTrigger="hover"
+                  labelField="name"
+                  valueField="id"
+                  clearable
+                  filterable
+                />
               </NFormItem>
               {/* <NFormItem label="是否公开">
 								<NSpace class={styles.checkbox} wrapItem={false}>