add batch update songs

src/components/DynamicForm.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { FormRules, NForm } from 'naive-ui';
+
+defineProps<{
+ rules: FormRules
+}>()
+
+function getItems() {
+  
+}
+</script>
+
+<template>
+  <NForm>
+
+  </NForm>
+</template>

src/components/SongList.vue

@@ -7,6 +7,7 @@ import { List } from 'linqts'
 import {
   DataTableBaseColumn,
   DataTableColumns,
+  DataTableRowKey,
   FormInst,
   FormRules,
   NAvatar,
@@ -30,6 +31,8 @@ import {
   NPopconfirm,
   NSelect,
   NSpace,
+  NTabPane,
+  NTabs,
   NTag,
   NText,
   NTooltip,
@@ -55,7 +58,7 @@ watch(
     setTimeout(() => {
       columns.value = createColumns()
     }, 1)
-  }
+  },
 )
 const volume = useLocalStorage('Settings.AplayerVolume', 0.8)
 const songsInternal = ref(props.songs)
@@ -69,10 +72,16 @@ const songsComputed = computed(() => {
 const message = useMessage()
 
 const showModal = ref(false)
+const showBatchModal = ref(false)
 const updateSongModel = ref<SongsInfo>({} as SongsInfo)
 const searchMusicKeyword = ref()
 const debouncedInput = refDebounced(searchMusicKeyword, 500)
 
+const batchUpdate_Author = ref<string[]>([])
+const batchUpdate_Tag = ref<string[]>([])
+const batchUpdate_Language = ref<SongLanguage[]>([])
+const batchUpdate_Option = ref<SongRequestOption>()
+
 const playingSong = ref<SongsInfo>()
 const isLrcLoading = ref<string>()
 
@@ -139,6 +148,7 @@ const authorsOptions = computed(() => {
 })
 
 const columns = ref<DataTableColumns<SongsInfo>>()
+const selectedColumn = ref<DataTableRowKey[]>([])
 const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
   title: '作者',
   key: 'artist',
@@ -163,6 +173,10 @@ const onAuthorClick = (author: string) => {
 function createColumns(): DataTableColumns<SongsInfo> {
   authorColumn.value.filterOptions = authorsOptions.value
   return [
+    {
+      type: 'selection',
+      disabled: () => !props.isSelf,
+    },
     {
       key: 'name',
       resizable: true,
@@ -258,7 +272,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
                       },
                       {
                         icon: () => h(NIcon, { component: Play24Filled }),
-                      }
+                      },
                     ),
                   default: () => '试听',
                 })
@@ -280,7 +294,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
                         },
                         {
                           icon: () => h(NIcon, { component: NotepadEdit20Filled }),
-                        }
+                        },
                       ),
                     default: () => '修改',
                   }),
@@ -302,17 +316,17 @@ function createColumns(): DataTableColumns<SongsInfo> {
                               },
                               {
                                 icon: () => h(NIcon, { component: Delete24Filled }),
-                              }
+                              },
                             ),
                           default: () => '确认删除该歌曲？',
-                        }
+                        },
                       ),
                     default: () => '删除',
                   }),
                 ]
               : null,
             props.extraButtom?.(data),
-          ]
+          ],
         )
       },
     },
@@ -337,8 +351,8 @@ function GetPlayButton(song: SongsInfo) {
               },
               {
                 icon: () => h(FiveSingIcon, { class: 'svg-icon fivesing' }),
-              }
-            )
+              },
+            ),
           ),
         default: () => '在5sing打开',
       })
@@ -358,7 +372,7 @@ function GetPlayButton(song: SongsInfo) {
             },
             {
               icon: () => h(NeteaseIcon, { class: 'svg-icon netease' }),
-            }
+            },
           ),
         default: () => '在网易云打开',
       })
@@ -378,7 +392,7 @@ function GetPlayButton(song: SongsInfo) {
                 },
                 {
                   icon: () => h(NIcon, { component: SquareArrowForward24Filled }),
-                }
+                },
               ),
             default: () => '打开链接',
           })
@@ -445,6 +459,110 @@ function GetGuardColor(level: number | null | undefined): string {
   }
   return ''
 }
+function batchUpdateAuthor() {
+  if (selectedColumn.value.length == 0) {
+    message.error('请先选择歌曲')
+    return
+  }
+  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-author', {
+    ids: selectedColumn.value.map((s) => s.toString()),
+    data: batchUpdate_Author.value,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已更新歌曲')
+        for (const song of songsInternal.value) {
+          if (selectedColumn.value.includes(song.key)) {
+            const index = songsInternal.value.findIndex((s) => s.key == song.key)
+            songsInternal.value[index].author = batchUpdate_Author.value
+          }
+        }
+      } else {
+        message.error('未能更新歌曲: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('未能更新歌曲: ' + err)
+    })
+}
+function batchUpdateTag() {
+  if (selectedColumn.value.length == 0) {
+    message.error('请先选择歌曲')
+    return
+  }
+  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-tag', {
+    ids: selectedColumn.value.map((s) => s.toString()),
+    data: batchUpdate_Tag.value,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已更新歌曲')
+        for (const song of songsInternal.value) {
+          if (selectedColumn.value.includes(song.key)) {
+            const index = songsInternal.value.findIndex((s) => s.key == song.key)
+            songsInternal.value[index].tags = batchUpdate_Tag.value
+          }
+        }
+      } else {
+        message.error('未能更新歌曲: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('未能更新歌曲: ' + err)
+    })
+}
+function batchUpdateLanguage() {
+  if (selectedColumn.value.length == 0) {
+    message.error('请先选择歌曲')
+    return
+  }
+  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-language', {
+    ids: selectedColumn.value.map((s) => s.toString()),
+    data: batchUpdate_Language.value,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已更新歌曲')
+        for (const song of songsInternal.value) {
+          if (selectedColumn.value.includes(song.key)) {
+            const index = songsInternal.value.findIndex((s) => s.key == song.key)
+            songsInternal.value[index].language = batchUpdate_Language.value
+          }
+        }
+      } else {
+        message.error('未能更新歌曲: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('未能更新歌曲: ' + err)
+    })
+}
+function batchUpdateOption() {
+  if (selectedColumn.value.length == 0) {
+    message.error('请先选择歌曲')
+    return
+  }
+  QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-option', {
+    ids: selectedColumn.value.map((s) => s.toString()),
+    data: batchUpdate_Option.value ? batchUpdate_Option.value : null,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已更新歌曲')
+        for (const song of songsInternal.value) {
+          if (selectedColumn.value.includes(song.key)) {
+            const index = songsInternal.value.findIndex((s) => s.key == song.key)
+            songsInternal.value[index].options = batchUpdate_Option.value
+          }
+        }
+      } else {
+        message.error('未能更新歌曲: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('未能更新歌曲: ' + err)
+    })
+}
 
 onMounted(() => {
   songsInternal.value = props.songs
@@ -469,7 +587,10 @@ onMounted(() => {
       <NDivider style="margin: 15px 0 15px 0" />
     </div>
   </Transition>
+  <NButton :disabled="selectedColumn.length <= 1 && isSelf" type="info" @click="showBatchModal = true" size="small"> 批量编辑 </NButton>
+  <NDivider style="margin: 5px 0 5px 0" />
   <NDataTable
+    v-model:checked-row-keys="selectedColumn"
     size="small"
     :columns="columns"
     :data="songsComputed"
@@ -506,11 +627,17 @@ onMounted(() => {
         <NSpace vertical>
           <NCheckbox
             :checked="updateSongModel.options != undefined"
-            @update:checked="(checked: boolean) => {updateSongModel.options = checked ? {
-          needJianzhang: false,
-          needTidu: false,
-          needZongdu: false
-        } as SongRequestOption : undefined}"
+            @update:checked="
+              (checked: boolean) => {
+                updateSongModel.options = checked
+                  ? ({
+                      needJianzhang: false,
+                      needTidu: false,
+                      needZongdu: false,
+                    } as SongRequestOption)
+                  : undefined
+              }
+            "
           >
             是否启用
           </NCheckbox>
@@ -523,7 +650,11 @@ onMounted(() => {
             <NSpace align="center">
               <NCheckbox
                 :checked="updateSongModel.options.scMinPrice != undefined"
-                @update:checked="(checked: boolean) => {if(updateSongModel.options) updateSongModel.options.scMinPrice = checked ? 30 : undefined}"
+                @update:checked="
+                  (checked: boolean) => {
+                    if (updateSongModel.options) updateSongModel.options.scMinPrice = checked ? 30 : undefined
+                  }
+                "
               >
                 需要SC
               </NCheckbox>
@@ -535,7 +666,11 @@ onMounted(() => {
             <NSpace align="center">
               <NCheckbox
                 :checked="updateSongModel.options.fanMedalMinLevel != undefined"
-                @update:checked="(checked: boolean) => {if(updateSongModel.options) updateSongModel.options.fanMedalMinLevel = checked ? 5 : undefined}"
+                @update:checked="
+                  (checked: boolean) => {
+                    if (updateSongModel.options) updateSongModel.options.fanMedalMinLevel = checked ? 5 : undefined
+                  }
+                "
               >
                 需要粉丝牌
                 <NTooltip>
@@ -560,6 +695,92 @@ onMounted(() => {
     <NDivider style="margin: 10px" />
     <NButton @click="updateSong" type="success"> 更新 </NButton>
   </NModal>
+  <NModal v-model:show="showBatchModal" preset="card" :title="`批量编辑 | 已选择: ${selectedColumn.length}`" style="max-width: 600px">
+    <NTabs>
+      <NTabPane name="author" tab="作者">
+        <NSelect v-model:value="batchUpdate_Author" filterable multiple tag placeholder="输入后按回车新增" :options="authorsOptions" />
+        <NDivider />
+        <NButton @click="batchUpdateAuthor" type="success"> 更新 </NButton>
+      </NTabPane>
+      <NTabPane name="tag" tab="标签">
+        <NSelect v-model:value="batchUpdate_Tag" filterable multiple clearable tag placeholder="可选，按回车确认" :options="tagsSelectOption" />
+        <NDivider />
+        <NButton @click="batchUpdateTag" type="success"> 更新 </NButton>
+      </NTabPane>
+      <NTabPane name="language" tab="语言">
+        <NSelect v-model:value="batchUpdate_Language" multiple :options="songSelectOption" placeholder="选择" />
+        <NDivider />
+        <NButton @click="batchUpdateLanguage" type="success"> 更新 </NButton>
+      </NTabPane>
+      <NTabPane name="option" tab="点歌选项">
+        <NSpace vertical>
+          <NCheckbox
+            :checked="batchUpdate_Option != undefined"
+            @update:checked="
+              (checked: boolean) => {
+                batchUpdate_Option = checked
+                  ? ({
+                      needJianzhang: false,
+                      needTidu: false,
+                      needZongdu: false,
+                    } as SongRequestOption)
+                  : undefined
+              }
+            "
+          >
+            是否启用
+          </NCheckbox>
+          <template v-if="batchUpdate_Option != undefined">
+            <NSpace>
+              <NCheckbox v-model:checked="batchUpdate_Option.needJianzhang"> 需要舰长 </NCheckbox>
+              <NCheckbox v-model:checked="batchUpdate_Option.needTidu"> 需要提督 </NCheckbox>
+              <NCheckbox v-model:checked="batchUpdate_Option.needZongdu"> 需要总督 </NCheckbox>
+            </NSpace>
+            <NSpace align="center">
+              <NCheckbox
+                :checked="batchUpdate_Option.scMinPrice != undefined"
+                @update:checked="
+                  (checked: boolean) => {
+                    if (batchUpdate_Option) batchUpdate_Option.scMinPrice = checked ? 30 : undefined
+                  }
+                "
+              >
+                需要SC
+              </NCheckbox>
+              <NInputGroup v-if="batchUpdate_Option?.scMinPrice" style="width: 200px">
+                <NInputGroupLabel> SC最低价格 </NInputGroupLabel>
+                <NInputNumber v-model:value="batchUpdate_Option.scMinPrice" min="30" />
+              </NInputGroup>
+            </NSpace>
+            <NSpace align="center">
+              <NCheckbox
+                :checked="batchUpdate_Option.fanMedalMinLevel != undefined"
+                @update:checked="
+                  (checked: boolean) => {
+                    if (batchUpdate_Option) batchUpdate_Option.fanMedalMinLevel = checked ? 5 : undefined
+                  }
+                "
+              >
+                需要粉丝牌
+                <NTooltip>
+                  <template #trigger>
+                    <NIcon :component="Info24Filled" />
+                  </template>
+                  这个即使不开也会遵循全局点歌设置的粉丝牌等级
+                </NTooltip>
+              </NCheckbox>
+              <NInputGroup v-if="batchUpdate_Option?.fanMedalMinLevel" style="width: 200px">
+                <NInputGroupLabel> 最低等级 </NInputGroupLabel>
+                <NInputNumber v-model:value="batchUpdate_Option.fanMedalMinLevel" min="0" />
+              </NInputGroup>
+            </NSpace>
+          </template>
+        </NSpace>
+        <NDivider />
+        <NButton @click="batchUpdateOption" type="success"> 更新 </NButton>
+      </NTabPane>
+    </NTabs>
+  </NModal>
 </template>
 
 <style>