添加适用应用对接

src/utils/constant.ts

@@ -257,5 +257,5 @@ export const appKey = {
   GYM: '管乐迷',
   GYT: '管乐团',
   KLX: '酷乐秀',
-  KT: '音乐数字乐堂'
+  KT: '课堂乐器'
 } as any

src/views/music-library/api.ts

@@ -220,3 +220,39 @@ export const musicSheetApplicationOwnerList = (params?: any) => {
     data: params
   } as any)
 }
+
+
+/**
+ *  @description: 适用项目保存
+ * @param params
+ */
+export const musicSheetApplicationExtendSave = (params?: any) => {
+  return request({
+    url: '/cbs-app/musicSheetApplicationExtend/save',
+    method: 'post',
+    data: params
+  } as any)
+}
+
+/**
+ *  @description: 适用项目分类列表
+ * @param params
+ */
+export const musicSheetApplicationExtendCategoryList = (params?: any) => {
+  return request({
+    url: '/cbs-app/musicSheetApplicationExtend/categoryList',
+    method: 'post',
+    data: params
+  } as any)
+}
+/**
+ *  @description: 查询曲目适用项目的扩展信息
+ * @param params
+ */
+export const musicSheetApplicationExtendCategoryApplicationExtendInfo = (params?: any) => {
+  return request({
+    url: '/cbs-app/musicSheetApplicationExtend/applicationExtendInfo',
+    method: 'post',
+    data: params
+  } as any)
+}

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

@@ -2,7 +2,7 @@ import SaveForm from '@/components/save-form'
 import Pagination from '@/components/pagination'
 import {DataTableRowKey, NButton, NDataTable, NFormItem, NIcon, NImage, NInput, NModal, NSelect, NSpace, NTag, useDialog, useMessage} from 'naive-ui'
 import {defineComponent, onMounted, reactive, ref, watch} from 'vue'
-import {musicSheetCategoriesQueryTree, musicSheetPage, musicSheetRemove, musicSheetStatusList, musicTagPage} from '../../api'
+import {musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetPage, musicSheetRemove, musicSheetStatusList, musicTagPage} from '../../api'
 import MusicOperation from '../modal/music-operation'
 import {subjectPage} from '@/views/system-manage/api'
 import MusicPreView from '../modal/musicPreView'
@@ -48,7 +48,8 @@ export default defineComponent({
       musicPreview: false,
       musicScore: null as any,
       showUseProject: false, // 适用项目
-      showUseProjectData: undefined, // 适用项目行数据
+      useProjectData: [], // 适用项目行数据
+      showUseProjectId: null as any, // 适用项目行数据
       detailReadonly: false // 新增、修改、详情是否可编辑
     })
 
@@ -123,10 +124,11 @@ export default defineComponent({
                            text
                            onClick={() => {
                              state.showUseProject = true
-                             state.showUseProjectData = row
+                             state.showUseProjectId = row.id
                            }}
                   >
-                    管乐迷
+                    {row.musicSheetExtend && row.musicSheetExtend.useApplicationNames ? row.musicSheetExtend.useApplicationNames : ""}
+
                     <NIcon size={15} style="padding-left: 9px">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                         <path d="M2 26h28v2H2z" fill="currentColor"></path>
@@ -361,7 +363,7 @@ export default defineComponent({
           item.label = item.appName
           item.value = item.id
         })
-        state.showUseProjectData = tempList
+        state.useProjectData = tempList
       } catch {
       }
     }
@@ -454,7 +456,7 @@ export default defineComponent({
               <NSelect
                   placeholder="请选择适用项目"
                   v-model:value={state.searchForm.applicationId}
-                  options={state.showUseProjectData}
+                  options={state.useProjectData}
                   clearable
               />
             </NFormItem>
@@ -603,9 +605,14 @@ export default defineComponent({
               preset="dialog"
               showIcon={false}
               title={'适用项目'}
-              style={{width: '500px', height: '650px'}}
+              style={{width: '500px'}}
           >
-            <UseProject item={state.musicScore} rowData={state.showUseProjectData}/>
+            <UseProject
+                id={state.showUseProjectId}
+                useProject={state.useProjectData}
+                onClose={() => (state.showUseProject = false)}
+                onGetList={getList}
+            />
           </NModal>
         </div>
     )

src/views/music-library/music-sheet/index.tsx

@@ -6,7 +6,7 @@ import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
 import MusicSheetCategoriesList from "@views/music-library/music-sheet/component/music-sheet-categories-list";
 
 export default defineComponent({
-  name: 'city-manage',
+  name: 'music-sheet',
   setup() {
     const state = reactive({
       tabName: 'MusicList' as 'MusicList' | 'TagList' | 'CategroryList',

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

@@ -1239,7 +1239,6 @@ export default defineComponent({
                   forms.musicSheetExtend = {
                     ...musicSheetOwnerData
                   }
-                  console.log(forms.musicSheetExtend)
                 }}
             />
           </NModal>

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

@@ -1,56 +1,164 @@
 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 {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 {NButton, NCascader, NCheckbox, NCheckboxGroup, NForm, NFormItem, NInput, NInputNumber, NSelect, NSpace, NTabPane, NTabs, useMessage} from "naive-ui";
 import {appKey} from "@/utils/constant";
+import {
+  musicSheetApplicationExtendCategoryApplicationExtendInfo,
+  musicSheetApplicationExtendCategoryList,
+  musicSheetApplicationExtendSave,
+  musicSheetDetail,
+} from "@views/music-library/api";
 
 export default defineComponent({
-  name: 'musicPreView',
+  name: 'use-project',
   props: {
-    item: {
-      type: Object,
-      default: () => {
-      }
+    useProject: {
+      type: Array,
+      required: true,
+      default: []
     },
-    rowData: {
-      type: Object,
-      default: () => {
-      }
+    id: {
+      type: String,
+      required: true,
+      default: null
     }
   },
+  emits: ['close', 'getList'],
   setup(props, {emit}) {
+    const forms = reactive({
+      musicSheetId: null,
+      useApplicationIds: [] as any,
+
+      useProjectParamConfig: {  //各个项目配置的参数
+        'KT': {
+          musicSheetCategoryId: null as any,
+          sortNo: null as any,
+        }
+
+      } as any,
+    })
     const state = reactive({
+      loading: false,
       tabName: null as any,
-      selectApp: [] as any, //选择的APP
-      showTabMec: true,
-      showTabJmedu: true,
+      selectAppKey: [] as any, //选择的APP
+      userProjectList: [] as any, // 适用项目列表
+      musicSheetCategoryOptions: {} as any,//项目曲目分类选择
 
 
     })
 
-    onMounted(() => {
-      // getTagList()
-      console.log(props.rowData)
-    })
+    const btnLoading = ref(false)
+    const message = useMessage()
 
-    const userStore = useUserStore()
-    const token = userStore.getToken
-    const forms = reactive({})
-    const formsRef = ref()
-    const route = useRoute()
-    const setTabs = (val: any) => {
-      setTabsCaches(val, 'tabName', route)
-    }
+    onMounted(async () => {
+      state.loading = true
 
-    function onSubmit() {
+      // 加载已经配置的APP
+      const {data} = await musicSheetDetail({id: props.id})
+      if (data && data.musicSheetExtend) {
+        forms.useApplicationIds = data.musicSheetExtend.useApplicationIds?.split(',') || []
+      }
 
-    }
+      // 加载所有的APP
+      const keys = Object.keys(appKey);
+      state.userProjectList = props.useProject.filter((next: any) => {
+        const indexOf = keys.indexOf(next.appKey);
+        return indexOf > -1;
+      })
+      state.userProjectList.forEach((next: any) => {
+        if (forms.useApplicationIds.includes(next.id)) {
+          state.selectAppKey.push(next.appKey)
+        }
+      })
+      if (state.selectAppKey.length > 0) {
+        state.tabName = state.selectAppKey[0]
+      }
+
+      // 加载不同项目的曲目分类列表
+      const useProject = props.useProject;
+      for (let i = 0; i < useProject.length; i++) {
+        const item = useProject[i] as any;
+        const res = await musicSheetApplicationExtendCategoryList({page: 1, rows: 9999, applicationId: item.id})
+        const categoryList = res.data || []
+        if (categoryList) {
+          categoryList.label = categoryList.name
+          categoryList.value = categoryList.id
+          if (item.appKey === 'KT') {
+            state.musicSheetCategoryOptions.KT = categoryList
+          } else if (item.appKey === 'GYT') {
+            state.musicSheetCategoryOptions.GYT = categoryList
+          } else if (item.appKey === 'MEC') {
+            state.musicSheetCategoryOptions.MEC = categoryList
+          } else if (item.appKey === 'KLX') {
+            state.musicSheetCategoryOptions.KLX = categoryList
+          }
+        }
+      }
+      for (let i = 0; i < state.selectAppKey.length; i++) {
+        const appKey = state.selectAppKey[i];
+        // 初始化数据
+        const res = await musicSheetApplicationExtendCategoryApplicationExtendInfo({musicSheetId: props.id, appKey: appKey}) as any
+        if (res && res.code === 200 && res.data?.length > 0) {
+          if (appKey === 'KT') {
+            forms.useProjectParamConfig.KT = res.data[0]
+          } else if (appKey === 'GYT') {
+            forms.useProjectParamConfig.GYT = res.data[0]
+          } else if (appKey === 'MEC') {
+            forms.useProjectParamConfig.MEC = res.data[0]
+          } else if (appKey === 'KLX') {
+            forms.useProjectParamConfig.KLX = res.data[0]
+          }
+        }
 
-    function changeSelectapp(apps: string) {
-      apps.split(',').forEach(app => {
+      }
 
+
+      state.loading = false
+    })
+
+
+    const formsRef = ref()
+
+    const onSubmit = async () => {
+      formsRef.value.validate(async (error: any) => {
+        console.log(error, 'error')
+        if (error) {
+          return
+        }
+        try {
+          const appKeyIdMap = new Map<string, string>;
+          props.useProject.forEach((project: any) => {
+            appKeyIdMap.set(project.appKey, project.id)
+          })
+          // 获取选择的应用项目
+          const applicationExtends = [] as any
+          state.selectAppKey.forEach((appKey: any) => {
+            Object.keys(forms.useProjectParamConfig).forEach(key => {
+              if (appKey === key) {
+                const value = forms.useProjectParamConfig[key];
+                applicationExtends.push({
+                  ...value,
+                  musicSheetId: props.id,
+                  applicationId: appKeyIdMap.get(key)
+                })
+              }
+            })
+          })
+
+          const params = {
+            'musicSheetId': props.id,
+            'useApplicationIds': forms.useApplicationIds.join(','),
+            'applicationExtends': applicationExtends
+          }
+          btnLoading.value = true
+          await musicSheetApplicationExtendSave(params)
+          message.success('修改成功')
+          emit('getList')
+          emit('close')
+        } catch (e) {
+          console.log(e)
+        }
+        btnLoading.value = false
       })
     }
 
@@ -65,8 +173,8 @@ export default defineComponent({
               label-width="85"
           >
             <NFormItem
-                label="适用应用:"
-                path="audioType"
+                label="适用应用"
+                path="useApplicationIds"
                 rule={[
                   {
                     required: true,
@@ -75,29 +183,36 @@ export default defineComponent({
                 ]}
             >
               <NCheckboxGroup
+                  v-model:value={forms.useApplicationIds}
                   onUpdateValue={(value) => {
-                    state.selectApp = value;
-                    if (!state.tabName) {
-                      // 没有值，将第一个作为选中对象
-                      state.tabName = value.toString()
-                    }
+                    state.selectAppKey = []
+                    state.userProjectList.filter((next: any) => {
+                      if (value.includes(next.id)) {
+                        state.selectAppKey.push(next.appKey)
+                      }
+                      if (!state.tabName) {
+                        state.tabName = next.appKey
+                      }
+                    })
                   }}
               >
-                <NCheckbox value="MEC">管乐迷</NCheckbox>
-                <NCheckbox value="JMEDU">管乐团</NCheckbox>
-                <NCheckbox value="COOLESHOW">酷乐秀</NCheckbox>
-                <NCheckbox value="COOLESHOW_EDU">音乐数字课堂</NCheckbox>
+                {state.userProjectList.map((item: any) => (
+                    <NCheckbox value={item.value}>{item.label}</NCheckbox>
+                ))
+                }
               </NCheckboxGroup>
             </NFormItem>
             <NTabs
                 type="line"
                 v-model:value={state.tabName}
-                onUpdate:value={(val: any) => setTabs(val)}
+                onUpdate:value={(val: any) => {
+                  state.tabName = val
+                }}
             >
-              {state.selectApp.includes(appKey.GYM) &&
+              {state.selectAppKey.includes('GYM') &&
                   <NTabPane
-                      tab="管乐迷"
-                      name={appKey.GYM}
+                      tab={appKey.GYM}
+                      name='GYM'
                   >
                       <NFormItem
                           label="曲目分类"
@@ -135,10 +250,10 @@ export default defineComponent({
                       </NFormItem>
                   </NTabPane>
               }
-              {state.selectApp.includes(appKey.GYT) &&
+              {state.selectAppKey.includes('GYT') &&
                   <NTabPane
-                      tab="管乐团"
-                      name={appKey.GYT}
+                      tab={appKey.GYT}
+                      name='GYT'
                   >
                       <NFormItem
                           label="分类"
@@ -155,10 +270,10 @@ export default defineComponent({
                       </NFormItem>
                   </NTabPane>
               }
-              {state.selectApp.includes(appKey.KLX) &&
+              {state.selectAppKey.includes('KLX') &&
                   <NTabPane
-                      tab="酷乐秀"
-                      name={appKey.KLX}
+                      tab={appKey.KLX}
+                      name='KLX'
                   >
                       <NFormItem
                           label="可用途径"
@@ -210,37 +325,50 @@ export default defineComponent({
                       </NFormItem>
                   </NTabPane>
               }
-              {state.selectApp.includes(appKey.KT) &&
+              {state.selectAppKey.includes('KT') &&
                   <NTabPane
-                      tab="音乐数字课堂"
-                      name={appKey.KT}
+                      tab={appKey.KT}
+                      name='KT'
                   >
                       <NFormItem
                           label="曲目分类"
-                          path="musicSheetType"
+                          path="useProjectParamConfig.KT.musicSheetCategoryId"
                       >
-                          <NSelect>
-                          </NSelect>
+                          <NCascader
+                              valueField="id"
+                              labelField="name"
+                              children-field="children"
+                              placeholder="请选择分类"
+                              v-model:value={forms.useProjectParamConfig.KT.musicSheetCategoryId}
+                              options={state.musicSheetCategoryOptions.KT}
+                              clearable
+                          />
                       </NFormItem>
                       <NFormItem
                           label="排序值"
-                          path="musicSheetType"
+                          path="useProjectParamConfig.KT.sortNo"
                       >
-                          <NInput></NInput>
+                          <NInputNumber
+                              v-model:value={forms.useProjectParamConfig.KT.sortNo}
+                              placeholder="请输入排序值"
+                              clearable
+                              min={0}
+                              style={{width: '100%'}}
+                          />
                       </NFormItem>
                   </NTabPane>
               }
             </NTabs>
           </NForm>
-          <NSpace justify="end">
+          <NSpace justify="end" style={'margin-top: 10px'}>
             <NButton type="default" onClick={() => emit('close')}>
               取消
             </NButton>
             <NButton
                 type="primary"
                 onClick={() => onSubmit()}
-                // loading={btnLoading.value}
-                // disabled={btnLoading.value}
+                loading={btnLoading.value}
+                disabled={btnLoading.value}
             >
               确认
             </NButton>