sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

歌曲文件上传

Browse Source
This commit is contained in:
灌糖包子 2021-10-05 22:54:20 +08:00
parent 557f8874cb
commit 1f4e265c7f
12 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -3,7 +3,8 @@
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit --skipLibCheck && vite build",
"prebuild": "vue-tsc --noEmit --skipLibCheck",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {

1
src/model/api/music.ts
View File

@ -9,6 +9,7 @@ export interface MusicModel {
artist?: string // 艺术家
lib_id: string // 歌单ID
lyric_id: string // 歌词ID
isEditing?: boolean // 是否正在编辑当前行
}
export interface MusicLibModel {

2
src/views/Login.vue
View File

@ -44,7 +44,7 @@ export default class Login extends Vue {
*/
async login() {
(this.$refs.loginForm as VForm).validate(async (valid: boolean) => {
if(!valid) return
if (!valid) return
const data = await this.$http.post<UserInfo, any>('/api/common/login', this.userInfo)
if(data.token) {
this.$store.commit('login', data)

2
src/views/api/Hitokoto.vue
View File

@ -96,7 +96,7 @@ export default class Hitokoto extends BaseList<HitokotoPage> {
}
async save() {
((this.$refs.addForm as Vue).$refs.hitokotoForm as VForm).validate(async (valid: boolean) => {
if(!valid) return
if (!valid) return
this.modalLoading = true
const data = await this.$http.post<any, any>('/api/hitokoto/save', this.formData)
this.modalLoading = false

86
src/views/api/Music.vue
View File

@ -5,12 +5,12 @@
<el-input size="small" v-model="search.name" />
</el-form-item>
<el-form-item label="所属歌单">
<el-select size="small" v-model="search.lib_id" multiple :max-tag-count="3">
<el-select size="small" v-model="search.lib_id" multiple collapse-tags>
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
</el-form-item>
<el-form-item label="文件类型">
<el-select size="small" v-model="search.ext" multiple :max-tag-count="3">
<el-select size="small" v-model="search.ext" multiple >
<el-option v-for="ext in exts" :key="ext" :value="ext" :label="ext" />
</el-select>
</el-form-item>
@ -26,6 +26,7 @@
</el-form>
<div class="btn-container">
<el-button type="success" plain size="small" icon="el-icon-caret-right" @click="playMusic">播放</el-button>
<el-button type="primary" size="small" icon="el-icon-upload" @click="openUploadModal">上传音乐</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
@ -46,7 +47,23 @@
<el-table-column prop="artist" label="艺术家" />
<el-table-column prop="lib_id" label="所属歌单" >
<template #default="scope">
{{ findMusicLib(scope.row.lib_id) }}
<template v-if="scope.row.isEditing">
<el-select v-model="currentRow.lib_id" size="mini">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
<el-button type="text" @click="saveMusicLib(scope.row)">
<i class="el-icon-check"></i>
</el-button>
<el-button type="text" @click="scope.row.isEditing = false">
<i class="el-icon-close"></i>
</el-button>
</template>
<template v-else>
{{ findMusicLib(scope.row.lib_id) }}
<el-button type="text" @click="updateLib(scope.row)">
<i class="el-icon-edit-outline"></i>
</el-button>
</template>
</template>
</el-table-column>
<el-table-column prop="lyric_id" label="歌词" width="120" >
@ -56,7 +73,6 @@
</el-table-column>
<el-table-column label="操作" width="230" >
<template #default="scope">
<el-button size="mini" plain @click="update(scope.row)">修改</el-button>
<el-button size="mini" plain @click="updateLyric(scope.row)">歌词</el-button>
<el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
</template>
@ -91,14 +107,30 @@
</span>
</template>
</el-dialog>
<el-dialog v-model="modifyModal" title="修改所属歌单" :width="470" >
<el-radio-group v-if="currentRow" v-model="currentRow.lib_id">
<el-radio v-for="item in musicLibs" :key="item._id" :label="item._id" border>{{item.name}}</el-radio>
</el-radio-group>
<el-dialog v-model="uploadModal" title="上传音乐" :width="550" >
<el-form :label-width="80">
<el-form-item label="歌单">
<el-radio-group v-model="libIdSelected">
<el-radio v-for="item in musicLibs" :key="item._id" :label="item._id" border size="small">{{item.name}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item >
<el-upload
ref="musicUpload"
action="/dingtalk_push/uploadMusic"
name="file"
accept=".mp3,.flac"
:auto-upload="false"
multiple
:data="{libId: libIdSelected}">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="modifyModal = false">取消</el-button>
<el-button type="primary" @click="updateMusicLib" >确定</el-button>
<el-button @click="uploadModal = false">取消</el-button>
<el-button type="primary" @click="uploadMusic" >开始上传</el-button>
</span>
</template>
</el-dialog>
@ -115,7 +147,7 @@
import { Options } from 'vue-class-component'
import BaseList from '../../model/baselist'
import { Page } from '../../model/common.dto'
import { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer, ElMessage, ElMessageBox } from 'element-plus'
import { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer, ElUpload, ElMessage, ElMessageBox } from 'element-plus'
import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '../../model/api/music'
import prettyBytes from 'pretty-bytes'
import { VForm } from '../../types'
@ -123,15 +155,16 @@ import { VForm } from '../../types'
let selectedIds: string[] = []
@Options({
name: 'Music',
components: { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer }
components: { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer, ElUpload }
})
export default class Music extends BaseList<MusicPage> {
search = new MusicPage()
currentRow: MusicModel | null = null
libIdSelected: string | null = null
exts: string[] = []
musicLibs: MusicLibModel[] = []
musicData: MusicModel[] = []
modifyModal: boolean = false
uploadModal: boolean = false
modifyLyricModal: boolean = false
lyricRuleValidate = {
cloud_id: [
@ -154,7 +187,7 @@ export default class Music extends BaseList<MusicPage> {
this.musicLibs = data
this.loadData()
})
this.$http.get<never, any>('/api/music/listExts').then(({data}) => {
this.$http.get<never, any>('/api/music/listExts').then(data => {
this.exts = data
})
}
@ -195,9 +228,9 @@ export default class Music extends BaseList<MusicPage> {
ElMessage.error('获取播放列表失败')
}
}
update(row: MusicModel) {
this.currentRow = row
this.modifyModal = true
updateLib(row: MusicModel) {
this.currentRow = { ...row }
row.isEditing = true
}
remove(row: MusicModel) {
ElMessageBox.confirm(`是否确认删除 ${row.name} ？`, '确认删除', {type: 'warning'}).then(async () => {
@ -211,7 +244,7 @@ export default class Music extends BaseList<MusicPage> {
}).catch(() => {})
}
async updateLyric(row: MusicModel) {
this.currentRow = row
this.currentRow = { ...row }
this.modifyLyricModal = true
if (row.lyric_id) {
const data = (await this.$http.get<any, any>('/api/music/lyric/get', {params: {lyricId: row.lyric_id}}))
@ -223,7 +256,7 @@ export default class Music extends BaseList<MusicPage> {
}
async saveLyric() {
(this.$refs.lyricForm as VForm).validate(async (valid: boolean) => {
if(!valid) return
if (!valid) return
this.modalLoading = true
const data = await this.$http.post<MusicLyricModel, any>(`/api/music/lyric/save?musicId=${this.currentRow ? this.currentRow._id : ''}`, this.lyricFormData)
this.modalLoading = false
@ -234,11 +267,20 @@ export default class Music extends BaseList<MusicPage> {
this.lyricFormData = {}
})
}
async updateMusicLib() {
async saveMusicLib(row: MusicModel) {
if (!this.currentRow) return
const data = await this.$http.post<any, any>('/api/music/updateLib', {id: this.currentRow._id, libId: this.currentRow.lib_id})
const data = await this.$http.post<{id: string, libId: string}, any>('/api/music/updateLib', {id: this.currentRow._id, libId: this.currentRow.lib_id})
ElMessage.success(data.message)
this.modifyModal = false
row.lib_id = this.currentRow.lib_id
row.isEditing = false
}
openUploadModal() {
this.uploadModal = true
this.libIdSelected = null
}
async uploadMusic() {
// 执行上传
(this.$refs.musicUpload as typeof ElUpload).submit()
}
/**
* 创建媒体信息

3
src/views/api/PhotoWall.vue
View File

@ -34,7 +34,7 @@
action="/api/photowall/upload"
accept="image/jpeg,image/png"
name="image"
:headers="uploadHeaders"
:headers="{token: $store.state.loginInfo.token}"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
@ -90,7 +90,6 @@ let selectedData: string[] = []
components: { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElAlert, ElUpload }
})
export default class PhotoWall extends BaseList<PhotoWallPage> {
uploadHeaders = {token: localStorage.getItem('login_token')}
search = new PhotoWallPage()
allowUploadExt = ['jpg','jpeg','png']
photowallData = []

3
src/views/api/SourceImage.vue
View File

@ -9,7 +9,7 @@
action="/api/source-image/upload"
accept="image/jpeg,image/png,image/svg+xml,image/x-icon"
name="image"
:headers="uploadHeaders"
:headers="{token: $store.state.loginInfo.token}"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
@ -89,7 +89,6 @@ let selectedData: string[] = []
})
export default class SourceImage extends BaseList<Page> {
prettyBytes = prettyBytes
uploadHeaders = {token: localStorage.getItem('login_token')}
search = new Page()
allowUploadExt = ['jpg','jpeg','png','svg','ico']
sourceImageData: SourceImageModel[] = []

4
src/views/system/Article.vue
View File

@ -38,7 +38,7 @@
action="/api/system/deployBlog"
accept="application/zip"
name="blogZip"
:headers="uploadHeaders"
:headers="{token: $store.state.loginInfo.token}"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
@ -123,7 +123,6 @@ let selectedData: string[] = []
})
export default class Article extends BaseList<ArticlePage> {
search = new ArticlePage()
uploadHeaders = {token: localStorage.getItem('login_token')}
articleData: ArticleModel[] = []
tags: string[] = [] // 所有标签
categories: string[] = [] // 所有分类
@ -221,7 +220,6 @@ export default class Article extends BaseList<ArticlePage> {
return content.replace(/_&/g, ' ').replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
})
this.markdownPreview.title = node.name
console.log(this.markdownPreview)
}
created() {
this.loadData()

2
src/views/system/SystemConfig.vue
View File

@ -110,7 +110,7 @@ export default class SystemConfig extends Vue {
}
async save() {
((this.$refs.addForm as Vue).$refs.configForm as VForm).validate(async (valid: boolean) => {
if(!valid) return
if (!valid) return
this.modalLoading = true
const data = await this.$http.post<SystemConfigModel, any>('/api/system/config/save', this.formData)
this.modalLoading = false

2
src/views/system/SystemRole.vue
View File

@ -191,7 +191,7 @@ export default class SystemRole extends BaseList<SystemRolePage> {
}
async save() {
(this.$refs.roleForm as VForm).validate(async (valid: boolean) => {
if(!valid) return
if (!valid) return
this.modalLoading = true
const data = await this.$http.post<SystemRoleModel, any>('/api/system/role/save', this.formData)
this.modalLoading = false

2
src/views/system/SystemUser.vue
View File

@ -147,7 +147,7 @@ export default class SystemUser extends BaseList<SystemUserPage> {
}
async save() {
(this.$refs.userForm as VForm).validate(async (valid: boolean) => {
if(!valid) return
if (!valid) return
this.modalLoading = true
const data = await this.$http.post<SystemUserModel, any>('/api/system/user/save', this.formData)
this.modalLoading = false

2
src/views/tool/SqlReplace.vue
View File

@ -55,7 +55,7 @@ export default class SqlReplace extends Vue {
}
this.replaceResult = sql
Promise.resolve('已复制到剪贴板').then(message => {
(this.$refs.resultInput as HTMLInputElement).select()
(this.$refs.resultInput as typeof ElInput).select()
if (document.execCommand('copy')) {
ElMessage.success(message)
} else {