添加曲目接口对接

src/utils/constant.ts

@@ -253,9 +253,9 @@ export const defaultScore = {
 } as any
 
 // 曲目适用项目
-export const musicSheetUseApp = {
-  MEC: '管乐迷',
-  jMEDU: '管乐团',
-  COOLESHOW: '酷乐秀',
-  COOLESHOW_EDU: '音乐数字乐堂'
+export const appKey = {
+  GYM: '管乐迷',
+  GYT: '管乐团',
+  KLX: '酷乐秀',
+  KT: '音乐数字乐堂'
 } as any

src/utils/objectUtil.ts

@@ -10,7 +10,6 @@ export const getSelectDataFromObj = (obj: Object) => {
       result.push(oneSelect);
     }
   }
-  console.log(result)
   return result;
 }
 

src/views/music-library/music-sheet/component/music-list.tsx

@@ -514,6 +514,7 @@ export default defineComponent({
                 loading={state.loading}
                 columns={columns()}
                 data={state.dataList}
+                rowKey={(row: any) => row.id}
             ></NDataTable>
             <Pagination
                 v-model:page={state.pagination.page}
@@ -528,6 +529,7 @@ export default defineComponent({
               v-model:show={state.visiableMusic}
               preset="dialog"
               showIcon={false}
+              maskClosable={false}
               title={() => {
                 if (state.musicOperation === 'add') {
                   return '添加曲目';

src/views/music-library/music-sheet/modal/music-operation.tsx

@@ -1,16 +1,35 @@
 import type {SelectOption} from 'naive-ui'
-import {NAlert, NButton, NCascader, NCheckbox, NForm, NFormItemGi, NGi, NGrid, NInput, NInputNumber, NRadio, NRadioGroup, NSelect, NSpace, useDialog, useMessage} from 'naive-ui'
+import {
+  NAlert,
+  NButton,
+  NCascader,
+  NCheckbox,
+  NForm,
+  NFormItemGi,
+  NGi,
+  NGrid,
+  NInput,
+  NInputNumber,
+  NModal,
+  NRadio,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  useDialog,
+  useMessage,
+  NCheckboxGroup, NCol
+} from 'naive-ui'
 import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
 import {musicSheetDetail, musicSheetSave, musicSheetUpdate} from '../../api'
 import UploadFile from '@/components/upload-file'
 import styles from './index.module.less'
 import deepClone from '@/utils/deep.clone'
 import axios from 'axios'
-import {CheckboxGroup} from "vant";
 import {musicSheetSourceType, musicSheetType} from "@/utils/constant";
 import {getSelectDataFromObj} from "@/utils/objectUtil";
 import {musicalInstrumentPage} from "@views/system-manage/subject-manage/api";
 import {subjectPage} from "@views/system-manage/api";
+import MusicSheetOwnerDialog from "@views/music-library/music-sheet/modal/musicSheetOwnerDialog";
 
 /**
  * 获取指定元素下一个Note元素
@@ -249,6 +268,7 @@ export default defineComponent({
     }
   },
   emits: ['close', 'getList'],
+
   setup(props, {slots, attrs, emit}) {
     const forms = reactive({
       graduals: {} as any, // 渐变速度
@@ -256,9 +276,9 @@ export default defineComponent({
       xmlFileUrl: null, // XML
       midiUrl: null, // mid
       name: null, // 曲目名称
-      musicTag: [] as any, // 曲目标签
+      // musicTag: [] as any, // 曲目标签
       composer: null, // 音乐人
-      playSpeed: null, // 曲谱速度
+      playSpeed: null as any, // 曲谱速度
       // showFingering: null as any, // 是否显示指法
       // canEvaluate: null as any, // 是否评测
       // notation: null as any, // 能否转和简谱
@@ -267,24 +287,33 @@ export default defineComponent({
       musicCover: null, // 曲谱封面
       remark: null, // 曲谱描述
       musicSheetSoundList: [] as any, // 原音
-      musicSheetCategoriesId: null,
+      // musicSheetCategoriesId: null,
       status: false,
-      musicSheetType: null, // 曲目类型
+      musicSheetType: 'SINGLE', // 曲目类型
       sourceType: undefined, //来源类型/作者属性(PLATFORM: 平台; ORG: 机构; PERSON: 个人)
-      userId: null, // 所属人
-      appAuditFlag: false, // 是否审核版本
+      // userId: null, // 所属人
+      appAuditFlag: 0, // 是否审核版本
       midiFileUrl: null, // 伴奏文件 MIDI文件(保留字段)
       subjectIds: '', // 可用声部
       subjectIdList: [] as any, // 可用声部
       musicalInstrumentIds: '',  //可用乐器
       musicalInstrumentIdList: [] as any,  //可用乐器
       musicCategoryId: null,  //曲目分类
-      musicSheetAccompanimentList: [],  //曲目伴奏
+      musicSheetAccompanimentList: [] as any,  //曲目伴奏
       audioType: 'HOMEMODE', // 伴奏类型
-      isPlayBeat: 1, // 是否播放节拍器
-      isUseSystemBeat: '1', // 是否使用系统节拍器(0:否;1:是)
-      repeatedBeats: '0', // 是否重复节拍时长
+      isPlayBeat: true, // 是否播放节拍器
+      isUseSystemBeat: true, // 是否使用系统节拍器(0:否;1:是)
+      repeatedBeats: false, // 是否重复节拍时长
       evaluationStandard: 'AMPLITUDE', // 评分标准 节奏 AMPLITUDE 音准 FREQUENCY 分贝 DECIBELS
+      multiTracksSelection: [] as any, // 声轨
+      musicSheetExtend: { // 所属人信息
+        userId: 1,
+        userName: '小王',
+        musicSheetId: 1,
+        applicationId: 1,
+        organizationRoleId: 1,
+        useApplicationIds: 1,
+      },
     })
     const state = reactive({
       loading: false,
@@ -292,10 +321,14 @@ export default defineComponent({
       xmlFirstSpeed: null as any, // 第一个音轨速度
       partListNames: [] as any, // 所有音轨声部列表
       musicSheetCategories: [...props.musicSheetCategories] as any,
-      musicSheetAccompanimentNames: [] as any,
+      musicSheetAccompanimentUrls: '' as any,
+      musicSheetAccompanimentUrlList: [] as any,
       instrumentData: [],
       instrumentList: [],
       subjectList: [],
+      showMusicSheetOwnerDialog: false, //所属人弹框
+      musicSheetOwnerData: {}, //所属人信息
+      multiTracks: null,
     })
     const gradualData = reactive({
       list: [] as any[],
@@ -320,6 +353,10 @@ export default defineComponent({
           const obj = {
             ...forms,
             musicTag: '-1',
+            multiTracksSelection: forms.multiTracksSelection.join(','),
+            musicSheetSoundList: forms.musicSheetSoundList.filter((next: any) => {
+              next.audioFileUrl
+            }),
             extConfigJson: JSON.stringify({gradualTimes: forms.graduals})
           }
           if (forms.audioType == 'MIDI') {
@@ -327,7 +364,7 @@ export default defineComponent({
           }
           btnLoading.value = true
           if (props.type === 'add') {
-            await musicSheetSave({...obj})
+            await musicSheetSave(obj)
             message.success('添加成功')
           } else if (props.type === 'edit') {
             await musicSheetUpdate({...obj, id: props.data.id})
@@ -405,7 +442,7 @@ export default defineComponent({
 
       state.xmlFirstSpeed = xmlParse.getElementsByTagName('per-minute')?.[0]?.textContent || ''
       if (!forms.playSpeed) {
-        forms.playSpeed = state.xmlFirstSpeed
+        forms.playSpeed = Number.parseInt(state.xmlFirstSpeed)
       }
 
       // 乐器
@@ -428,6 +465,7 @@ export default defineComponent({
           forms.musicalInstrumentIdList.push(codeIdMap.get(code));
         }
       })
+      forms.musicalInstrumentIds = forms.musicalInstrumentIdList.join(",")
 
       // 声部
       if (forms.musicalInstrumentIdList.length > 0) {
@@ -503,6 +541,29 @@ export default defineComponent({
       })
     }
 
+    const checkMultiTracks = (value: string) => {
+      if (!value) {
+        return;
+      }
+      if (value === 'all') {
+        forms.multiTracksSelection = []
+        state.partListNames.forEach((next: any) => {
+          forms.multiTracksSelection.push(next.value)
+        })
+      } else if (value === 'invert') {
+        state.partListNames.forEach((next: any) => {
+          const indexOf = forms.multiTracksSelection.indexOf(next.value);
+          if (indexOf > -1) {
+            forms.multiTracksSelection.splice(indexOf, 1)
+          } else {
+            forms.multiTracksSelection.push(next.value)
+          }
+        })
+      } else if (value === 'allUncheck') {
+        forms.multiTracksSelection = []
+      }
+    }
+
     onMounted(async () => {
       initInstrumentList();
       if (props.type === 'edit' || props.type === 'preview') {
@@ -514,7 +575,7 @@ export default defineComponent({
           forms.xmlFileUrl = data.xmlFileUrl
           forms.midiUrl = data.midiUrl
           forms.name = data.name
-          forms.musicTag = data.musicTag?.split(',')
+          // forms.musicTag = data.musicTag?.split(',')
           forms.composer = data.composer
           forms.playSpeed = data.playSpeed
           // forms.showFingering = Number(data.showFingering)
@@ -525,12 +586,12 @@ export default defineComponent({
           forms.musicCover = data.musicCover
           forms.remark = data.remark
           forms.status = data.status
-          forms.musicSheetCategoriesId = data.musicSheetCategoriesId
+          forms.musicCategoryId = data.musicCategoryId
           forms.musicSheetSoundList = data.musicSheetSoundList || []
           forms.musicSheetType = data.musicSheetType || "SINGLE"
           forms.musicSheetAccompanimentList = data.musicSheetAccompanimentList
           data.musicSheetAccompanimentList?.forEach((next: any) => {
-            state.musicSheetAccompanimentNames.push(next.audioFileUrl);
+            state.musicSheetAccompanimentUrlList.push(next.audioFileUrl);
           })
           forms.evaluationStandard = data.evaluationStandard
           forms.musicalInstrumentIds = data.musicalInstrumentIds
@@ -680,7 +741,7 @@ export default defineComponent({
             <NGrid cols={2}>
               <NFormItemGi
                   label="所属人"
-                  path="userId"
+                  path="musicSheetExtend.userId"
                   rule={[
                     {
                       required: true,
@@ -688,20 +749,31 @@ export default defineComponent({
                     }
                   ]}
               >
-                <NSelect
-                    v-model:value={forms.userId}
-                    options={
-                      [
-                        {
-                          label: '小A',
-                          value: '1'
-                        }
-                      ] as any
-                    }
-                    filterable
-                    clearable
-                    placeholder="请选择曲目所属人"
-                />
+                {/*<NButton*/}
+                {/*    v-model:value={forms.musicSheetExtend.userId}*/}
+                {/*    options={*/}
+                {/*      [*/}
+                {/*        {*/}
+                {/*          label: '小A',*/}
+                {/*          value: '1'*/}
+                {/*        }*/}
+                {/*      ] as any*/}
+                {/*    }*/}
+                {/*    filterable*/}
+                {/*    clearable*/}
+                {/*    placeholder="请选择曲目所属人"*/}
+                {/*/>*/}
+                <NButton
+                    type="primary"
+                    size="small"
+                    text
+                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
+                    onClick={() => {
+                      state.showMusicSheetOwnerDialog = true
+                    }}
+                >
+                  {forms.musicSheetExtend?.userId ? forms.musicSheetExtend.userName + "(" + forms.musicSheetExtend.userId + ")" : '请选择所属人'}
+                </NButton>
               </NFormItemGi>
               <NFormItemGi label="速度" path="playSpeed">
                 <NInputNumber
@@ -712,30 +784,44 @@ export default defineComponent({
               </NFormItemGi>
             </NGrid>
             <NGrid cols={2}>
-              <NFormItemGi label="审核版本" path="speed">
+              <NFormItemGi label="审核版本" path="appAuditFlag"
+                           rule={[
+                             {
+                               required: true,
+                               message: '请选择曲目所属人'
+                             }
+                           ]}
+              >
                 <NSelect
                     options={
                       [
                         {
                           label: '是',
-                          value: true
+                          value: 1
                         },
                         {
                           label: '否',
-                          value: false
+                          value: 0
                         }
                       ] as any
                     }
                     v-model:value={forms.appAuditFlag}
                 />
               </NFormItemGi>
-              <NFormItemGi label="曲目分类" path="musicSheetCategories">
+              <NFormItemGi label="曲目分类" path="musicCategoryId"
+                           rule={[
+                             {
+                               required: true,
+                               message: '请选择曲目分类'
+                             }
+                           ]}
+              >
                 <NCascader
                     valueField="id"
                     labelField="name"
                     children-field="musicSheetCategoriesList"
                     placeholder="请选择分类"
-                    v-model:value={forms.musicSheetCategoriesId}
+                    v-model:value={forms.musicCategoryId}
                     options={state.musicSheetCategories}
                     clearable
                 />
@@ -760,8 +846,8 @@ export default defineComponent({
                     //   }
                     // }}
                 >
-                  <NRadio value="1">是</NRadio>
-                  <NRadio value="0">否</NRadio>
+                  <NRadio value={true}>是</NRadio>
+                  <NRadio value={false}>否</NRadio>
                 </NRadioGroup>
               </NFormItemGi>
               <NFormItemGi
@@ -829,7 +915,7 @@ export default defineComponent({
               {forms.playMode === 'MP3' && (
                   <NFormItemGi
                       label="上传伴奏"
-                      path="musicSheetAccompanimentNames"
+                      path="musicSheetAccompanimentList"
                       rule={[
                         {
                           required: true,
@@ -839,13 +925,28 @@ export default defineComponent({
                   >
                     <UploadFile
                         size={10}
-                        v-model:imageList={state.musicSheetAccompanimentNames}
+                        v-model:imageList={state.musicSheetAccompanimentUrlList}
                         tips="仅支持上传.mp3格式文件"
                         listType="image"
                         accept=".mp3"
                         bucketName="cloud-coach"
                         text="点击上传伴奏文件"
                         max={10}
+                        onUpdate:fileList={(val: string) => {
+                          state.musicSheetAccompanimentUrls = [state.musicSheetAccompanimentUrls, val].filter(Boolean).join(',')
+                          state.musicSheetAccompanimentUrlList = state.musicSheetAccompanimentUrls?.split(',').filter(Boolean)
+                          forms.musicSheetAccompanimentList = []
+                          for (let i = 0; i < state.musicSheetAccompanimentUrlList.length; i++) {
+                            forms.musicSheetAccompanimentList.push({
+                              audioFileUrl: state.musicSheetAccompanimentUrlList[i],
+                              sortNumber: i + 1
+                            })
+                          }
+                        }}
+                        onRemove={() => {
+                          state.musicSheetAccompanimentUrlList = []
+                          state.musicSheetAccompanimentUrls = ''
+                        }}
                         // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
                         multiple={true}
                     />
@@ -916,48 +1017,6 @@ export default defineComponent({
                     placeholder="请选择可用声部"
                 />
               </NFormItemGi>
-              {(forms.musicSheetType === 'SINGLE') && (
-                  <NFormItemGi
-                      label="页面渲染声轨"
-                      path="audioType"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择页面渲染声轨'
-                        }
-                      ]}
-                  >
-                    <CheckboxGroup>
-                      <NCheckbox value="长笛">长笛</NCheckbox>
-                      <NCheckbox value="竖笛">竖笛</NCheckbox>
-                      <NCheckbox value="葫芦丝">葫芦丝</NCheckbox>
-                      <NCheckbox value="萨克斯">萨克斯</NCheckbox>
-                    </CheckboxGroup>
-                  </NFormItemGi>
-              )}
-              {forms.musicSheetType === 'CONCERT' && (
-                  <NFormItemGi
-                      label="用户可切换声轨"
-                      path="audioType"
-                      rule={[
-                        {
-                          required: true,
-                          message: '请选择用户可切换声轨'
-                        }
-                      ]}
-                  >
-                    <CheckboxGroup>
-                      <NCheckbox value="长笛">长笛</NCheckbox>
-                      <NCheckbox value="竖笛">竖笛</NCheckbox>
-                      <NCheckbox value="葫芦丝">葫芦丝</NCheckbox>
-                      <NCheckbox value="萨克斯">萨克斯</NCheckbox>
-                    </CheckboxGroup>
-                  </NFormItemGi>
-              )}
-
-            </NGrid>
-
-            <NGrid cols={2}>
               <NFormItemGi label="可用乐器" path="musicalInstrumentIdList"
                            rule={[
                              {
@@ -975,6 +1034,65 @@ export default defineComponent({
                 />
               </NFormItemGi>
             </NGrid>
+
+            {(forms.musicSheetType) && (
+                <NGrid cols={1}>
+                  <NFormItemGi
+                      label={`${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`}
+                      path="multiTracksSelection"
+                      rule={[
+                        {
+                          required: true,
+                          message: `请选择${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`
+                        }
+                      ]}
+                  >
+                    <NGrid style="padding-top: 4px;">
+                      <NGi span={24}>
+                        <NRadioGroup
+                            v-model:value={state.multiTracks}
+                            onUpdateValue={(value) => {
+                              checkMultiTracks(value)
+                            }}
+                        >
+                          <NRadio value={'all'}>全选</NRadio>
+                          <NRadio value={'allUncheck'}>重置</NRadio>
+                          <NRadio value={'invert'}>反选</NRadio>
+                        </NRadioGroup>
+                      </NGi>
+                      <NGi span={24} style={"margin-top:5px"}><NFormItemGi
+                          label=''
+                          path="multiTracksSelection"
+                          rule={[
+                            {
+                              required: false,
+                            }
+                          ]}
+                      >
+                        <NCheckboxGroup
+                            v-model:value={forms.multiTracksSelection}
+                            onUpdateValue={(value) => {
+                              console.log(value)
+                            }}
+                        >
+                          <NGrid yGap={2} cols={4}
+                          >
+                            {state.partListNames.map((item: any, index: number) => (
+                                <NGi>
+                                  <NCheckbox value={item.value} label={item.label} onChange={() => {
+                                    console.log("forms.multiTracksSelection", forms.multiTracksSelection)
+                                    console.log("forms.musicSheetSoundList", forms.musicSheetSoundList)
+                                  }}/>
+                                </NGi>
+                            ))}
+                          </NGrid>
+                        </NCheckboxGroup>
+                      </NFormItemGi></NGi>
+                    </NGrid>
+                  </NFormItemGi>
+                </NGrid>
+            )
+            }
             <NGrid cols={2}>
               <NFormItemGi label="是否播放节拍器" path="isPlayBeat"
                            rule={[
@@ -987,8 +1105,8 @@ export default defineComponent({
                 <NRadioGroup
                     v-model:value={forms.isPlayBeat}
                 >
-                  <NRadio value={1}>是</NRadio>
-                  <NRadio value={0}>否</NRadio>
+                  <NRadio value={true}>是</NRadio>
+                  <NRadio value={false}>否</NRadio>
                 </NRadioGroup>
               </NFormItemGi>
               {forms.isPlayBeat && (
@@ -1003,70 +1121,74 @@ export default defineComponent({
                     <NRadioGroup
                         v-model:value={forms.isUseSystemBeat}
                     >
-                      <NRadio value="1">系统节拍器</NRadio>
-                      <NRadio value="0">MP3节拍器</NRadio>
+                      <NRadio value={true}>系统节拍器</NRadio>
+                      <NRadio value={false}>MP3节拍器</NRadio>
                     </NRadioGroup>
                   </NFormItemGi>
               )}
             </NGrid>
             {/* 只有播放类型为mp3时才会有原音 */}
-            {forms.playMode === 'MP3' && (
+            {forms.playMode === 'MP3' && forms.musicSheetSoundList.length > 0 && (
                 <>
                   {forms.musicSheetSoundList.map((item: any, index: number) => (
                       <>
-                        {item.track?.toLocaleUpperCase?.() != 'COMMON' && <NGrid class={styles.audioSection}>
-                            <NFormItemGi
-                                span={12}
-                                label="原音"
-                                path={`musicSheetSoundList[${index}].audioFileUrl`}
-                                rule={[
-                                  {
-                                    required: true,
-                                    message: `请上传${
-                                        item.track ? item.track + '的' : '第' + (index + 1) + '个'
-                                    }原音`
-                                  }
-                                ]}
+                        {item.track?.toLocaleUpperCase?.() != 'COMMON' &&
+                            <NGrid class={styles.audioSection}
+                                   v-show={forms.multiTracksSelection.indexOf(item.track) > -1}
                             >
-                                <UploadFile
-                                    size={10}
-                                    v-model:fileList={item.audioFileUrl}
-                                    tips="仅支持上传.mp3/.aac格式文件"
-                                    listType="image"
-                                    accept=".mp3,.aac"
-                                    bucketName="cloud-coach"
-                                />
-                            </NFormItemGi>
-                          {state.partListNames.length > 1 && (
-                              <NFormItemGi
-                                  span={12}
-                                  label="所属轨道"
-                                  path={`musicSheetSoundList[${index}].track`}
-                                  rule={[
-                                    {
-                                      required: true,
-                                      message: '请选择所属轨道'
-                                    }
-                                  ]}
-                              >
-                                <NSelect
-                                    placeholder="请选择所属轨道"
-                                    v-model:value={item.track}
-                                    options={initPartsListStatus(item.track)}
-                                />
-                              </NFormItemGi>
-                          )}
-                            <NGi class={styles.btnRemove}>
-                                <NButton
-                                    type="primary"
-                                    text
-                                    disabled={forms.musicSheetSoundList.length === 1}
-                                    onClick={() => removeSys(index)}
+                                <NFormItemGi
+                                    span={12}
+                                    label="原音"
+                                    path={`musicSheetSoundList[${index}].audioFileUrl`}
+                                    rule={[
+                                      {
+                                        // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
+                                        required: false,
+                                        message: `请上传${
+                                            item.track ? item.track + '的' : '第' + (index + 1) + '个'
+                                        }原音`
+                                      }
+                                    ]}
                                 >
-                                    删除
-                                </NButton>
-                            </NGi>
-                        </NGrid>}
+                                    <UploadFile
+                                        size={10}
+                                        v-model:fileList={item.audioFileUrl}
+                                        tips="仅支持上传.mp3/.aac格式文件"
+                                        listType="image"
+                                        accept=".mp3,.aac"
+                                        bucketName="cloud-coach"
+                                    />
+                                </NFormItemGi>
+                              {state.partListNames.length > 1 && (
+                                  <NFormItemGi
+                                      span={12}
+                                      label="所属轨道"
+                                      path={`musicSheetSoundList[${index}].track`}
+                                      rule={[
+                                        {
+                                          required: true,
+                                          message: '请选择所属轨道'
+                                        }
+                                      ]}
+                                  >
+                                    <NSelect
+                                        placeholder="请选择所属轨道"
+                                        v-model:value={item.track}
+                                        options={initPartsListStatus(item.track)}
+                                    />
+                                  </NFormItemGi>
+                              )}
+                              {/*<NGi class={styles.btnRemove}>*/}
+                              {/*    <NButton*/}
+                              {/*        type="primary"*/}
+                              {/*        text*/}
+                              {/*        disabled={forms.musicSheetSoundList.length === 1}*/}
+                              {/*        onClick={() => removeSys(index)}*/}
+                              {/*    >*/}
+                              {/*        删除*/}
+                              {/*    </NButton>*/}
+                              {/*</NGi>*/}
+                            </NGrid>}
                       </>
                   ))}
 
@@ -1102,6 +1224,22 @@ export default defineComponent({
                     </NButton>
                   </NSpace>
               )}
+
+          <NModal
+              v-model:show={state.showMusicSheetOwnerDialog}
+              preset="dialog"
+              showIcon={false}
+              maskClosable={false}
+              title="所属人"
+              style={{width: '800px'}}
+          >
+            <MusicSheetOwnerDialog onClose={() => {
+              state.showMusicSheetOwnerDialog = false
+            }} onChoseMusicSheetOwnerData={(musicSheetOwnerData) => {
+              state.musicSheetOwnerData = musicSheetOwnerData
+            }}
+            />
+          </NModal>
         </div>
     )
   }

src/views/music-library/music-sheet/modal/musicSheetOwnerDialog.tsx

@@ -0,0 +1,170 @@
+import {NButton, NDataTable, NFormItem, NInput, NSelect, NSpace, useDialog, useMessage} from 'naive-ui'
+import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
+import {musicSheetPage} from '../../api'
+import SaveForm from "@components/save-form";
+import Pagination from "@components/pagination";
+import {sysApplicationPage} from "@views/menu-manage/api";
+
+export default defineComponent({
+  name: 'music-operation',
+  props: {
+    data: {
+      type: Object as PropType<any>,
+      default: () => {
+      }
+    },
+
+  },
+  emits: ['close', 'getList', "choseMusicSheetOwnerData"],
+  setup(props, {slots, attrs, emit}) {
+    const forms = reactive({})
+    const state = reactive({
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 0
+      },
+      searchForm: {
+        applicationId: null,
+        userName: null,
+      },
+      dataList: [],
+      appData: [], // 适用项目行数据
+    })
+
+    const btnLoading = ref(false)
+    const formsRef = ref()
+    const message = useMessage()
+    const dialog = useDialog()
+    const saveForm = ref()
+
+    // app列表
+    const initUseAppList = async () => {
+      try {
+        const {data} = await sysApplicationPage({page: 1, rows: 999})
+        const tempList = data.rows || []
+        tempList.forEach((item: any) => {
+          item.label = item.appName
+          item.value = item.id
+        })
+        state.appData = tempList
+      } catch {
+      }
+    }
+
+    const onSubmit = () => {
+      state.pagination.page = 1
+      getList()
+    }
+    const onSearch = () => {
+      saveForm.value?.submit()
+    }
+    const onBtnReset = () => {
+      saveForm.value?.reset()
+    }
+    const getList = async () => {
+      try {
+        state.loading = true
+        const {data} = await musicSheetPage({...state.pagination, ...state.searchForm})
+        state.pagination.pageTotal = Number(data.total)
+        state.dataList = data.rows || []
+      } catch {
+      }
+      state.loading = false
+    }
+
+    onMounted(async () => {
+      getList()
+      initUseAppList()
+    })
+    const columns = (): any => {
+      return [
+        {
+          title: '人员名称',
+          key: 'userName'
+        },
+        {
+          title: '机构',
+          key: 'organizationRole'
+        },
+        {
+          title: '客户端',
+          key: 'clientType'
+        },
+        {
+          title: '操作',
+          key: 'operation',
+          fixed: 'right',
+          render(row: any) {
+            return (
+                <NSpace>
+                  <NButton
+                      type="primary"
+                      size="small"
+                      text
+                      onClick={() => {
+                        emit("choseMusicSheetOwnerData", row)
+                        emit('close')
+                      }}
+                  >
+                    选择
+                  </NButton>
+                </NSpace>
+            )
+          }
+        }
+      ]
+    }
+
+    return () => (
+        <div class="system-menu-container">
+          <SaveForm
+              ref={saveForm}
+              model={state.searchForm}
+              onSubmit={onSubmit}
+              saveKey="music-list"
+              onSetModel={(val: any) => (state.searchForm = val)}
+          >
+            <NFormItem label="应用" path="applicationId" size = "small">
+              <NSelect
+                  placeholder="请选择适用项目"
+                  v-model:value={state.searchForm.applicationId}
+                  options={state.appData}
+                  clearable
+              />
+            </NFormItem>
+            <NFormItem label="所属人" path="userName" size = "small">
+              <NInput
+                  placeholder="请选择所属人"
+                  v-model:value={state.searchForm.userName}
+                  clearable
+              />
+            </NFormItem>
+            <NFormItem size = "small">
+              <NSpace>
+                <NButton type="primary" onClick={onSearch}>
+                  搜索
+                </NButton>
+              </NSpace>
+            </NFormItem>
+          </SaveForm>
+          <div class={['section-container']}>
+            <NDataTable
+                loading={state.loading}
+                columns={columns()}
+                data={state.dataList}
+            ></NDataTable>
+            <Pagination
+                v-model:page={state.pagination.page}
+                v-model:pageSize={state.pagination.rows}
+                v-model:pageTotal={state.pagination.pageTotal}
+                onList={getList}
+                sync
+                saveKey="music-list"
+            ></Pagination>
+          </div>
+        </div>
+    )
+  }
+})

src/views/music-library/music-sheet/modal/use-project.tsx

@@ -1,10 +1,10 @@
-import {defineComponent, reactive, onMounted} from 'vue'
+import {defineComponent, onMounted, reactive, ref} from 'vue'
 import {useUserStore} from '@/store/modules/user'
 import styles from "@views/music-library/music-sheet/modal/index.module.less";
-import {ref} from 'vue';
-import {NButton, NCheckbox, NCheckboxGroup, NForm, NFormItem, NGrid, NInput, NInputNumber, NSelect, NSpace, NTab, NTabPane, NTabs} from "naive-ui";
+import {NButton, NCheckbox, NCheckboxGroup, NForm, NFormItem, NInput, NSelect, NSpace, NTabPane, NTabs} from "naive-ui";
 import {setTabsCaches} from "@/hooks/use-async";
 import {useRoute} from "vue-router";
+import {appKey} from "@/utils/constant";
 
 export default defineComponent({
   name: 'musicPreView',
@@ -94,10 +94,10 @@ export default defineComponent({
                 v-model:value={state.tabName}
                 onUpdate:value={(val: any) => setTabs(val)}
             >
-              {state.selectApp.includes('MEC') &&
+              {state.selectApp.includes(appKey.GYM) &&
                   <NTabPane
                       tab="管乐迷"
-                      name="MEC"
+                      name={appKey.GYM}
                   >
                       <NFormItem
                           label="曲目分类"
@@ -135,10 +135,10 @@ export default defineComponent({
                       </NFormItem>
                   </NTabPane>
               }
-              {state.selectApp.includes('JMEDU') &&
+              {state.selectApp.includes(appKey.GYT) &&
                   <NTabPane
                       tab="管乐团"
-                      name="JMEDU"
+                      name={appKey.GYT}
                   >
                       <NFormItem
                           label="分类"
@@ -155,10 +155,10 @@ export default defineComponent({
                       </NFormItem>
                   </NTabPane>
               }
-              {state.selectApp.includes('COOLESHOW') &&
+              {state.selectApp.includes(appKey.KLX) &&
                   <NTabPane
                       tab="酷乐秀"
-                      name="COOLESHOW"
+                      name={appKey.KLX}
                   >
                       <NFormItem
                           label="可用途径"
@@ -210,10 +210,10 @@ export default defineComponent({
                       </NFormItem>
                   </NTabPane>
               }
-              {state.selectApp.includes('COOLESHOW_EDU') &&
+              {state.selectApp.includes(appKey.KT) &&
                   <NTabPane
                       tab="音乐数字课堂"
-                      name="COOLESHOW_EDU"
+                      name={appKey.KT}
                   >
                       <NFormItem
                           label="曲目分类"