语音控制歌曲的播放、暂停、增删改查
<template>
<div class="Music-container">
<div style="margin: 10px 0">
<!--检索部分-->
<el-input style="width: 200px;" placeholder="请输入歌曲名称"
v-model="send.name"></el-input>
<el-input style="width: 200px;" placeholder="请输入歌曲拥有者"
v-model="send.user" class="ml-10"></el-input>
<el-input style="width: 200px;" placeholder="请输入歌曲分类"
v-model="send.category"
class="ml-10"></el-input>
<el-button class="ml-10" type="primary" @click="selectListPage">
搜索<i class="el-icon-search"></i>
</el-button>
<el-button type="warning" @click="reset">
重置<i class="el-icon-refresh"></i>
</el-button>
<!--检索部分结束-->
<!--新增与删除-->
<!-- <el-button type="primary" @click="insertWindow">新增<i class="el-icon-circle-plus-outline"></i>
</el-button>-->
<el-popconfirm
class="ml-10"
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确认要批量删除吗？"
@confirm="confirmRemoveIdList">
<el-button type="danger" slot="reference">批量删除<i
class="el-icon-remove-outline"></i>
</el-button>
</el-popconfirm>
<el-upload style="display: inline-block"
:action="'http://'+WHITE_IP+'/music/list_import'"
name="multipartFile"
:show-file-list="false"
accept="xlsx"
:on-success="onImportSuccess">
<!-- <el-button type="primary" class="ml-10">导入<i class="el-icon-upload2"></i></el-button>-->
</el-upload>
<!-- <el-button type="primary" class="ml-10" @click="list_export">导出<i class="el-icon-download"></i></el-button>-->
</div>
<!--表格部分-->
<el-table :data="list" boder stripe
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
border
width="220"
@selection-change="onSelectChange"
:header-cell-class-name="headerBg">
<el-table-column type="selection" width="60"></el-table-column><!--选择框-->
<el-table-column type="index" :index="hIndex" label="序号" width="80"/>
<el-table-column prop="name" label="歌曲名称">
</el-table-column>
<el-table-column prop="title" label="歌曲标题">
</el-table-column>
<el-table-column prop="url" label="歌曲地址">
</el-table-column>
<el-table-column prop="image" label="歌曲背景">
</el-table-column>
<el-table-column prop="user" label="所属用户">
</el-table-column>
<el-table-column prop="category" label="所属分类">
</el-table-column>
<!-- <el-table-column prop="mark" label="可以使用">
</el-table-column>-->
<el-table-column label="歌曲正常使用" width="160">
<template slot-scope="scope">
<el-switch v-model="scope.row.mark" active-color="#13ce66" inactive-color="#cccccc"
@change="changeEnable(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="300">
<template #default="scope">
<el-button type="success" @click="updateWindow(scope.row)">编辑<i
class="el-icon-edit"></i></el-button>
<el-popconfirm
class="ml-10"
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确认要删除吗？"
@confirm="confirmDelete(scope.row.id)">
<el-button type="danger" slot="reference">删除<i
class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页部分-->
<div class="pd-10">
<el-pagination
@size-change="onSizeChange"
@current-change="onCurrentChange"
:page-sizes="[10, 15, 20, 50]"
:current-page="send.currentPage"
:page-size="send.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="send.total">
</el-pagination>
</div>
<!--新增或修改弹窗-->
<el-dialog title="歌曲详情" :visible.sync="sendFormFlag" :close-on-click-modal="false">
<el-form label-width="120px" size="small">
<el-form-item label="歌曲名称">
<el-input v-model="sendForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="歌曲标题">
<el-input v-model="sendForm.title" autocomplete="off"></el-input>
</el-form-item>
<!--角色的选择-->
<el-form-item label="歌曲地址">
<el-input v-model="sendForm.url" autocomplete="off"></el-input>
</el-form-item>
<!---->
<el-form-item label="歌曲背景">
<el-input v-model="sendForm.image" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="所属用户">
<el-input v-model="sendForm.user" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="所属分类">
<el-input v-model="sendForm.category" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmInsertOrUpdate">确 定</el-button>
<el-button @click="sendFormFlag = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {WHITE_IP} from "../../public/config";
import router from "@/js_router/router";
export default {
name: "Music",
data() {
return {
WHITE_IP: WHITE_IP, // ip地址
list: [], // 该页面主列表
roleList: [], // 角色列表
headerBg: 'headerBg',
send: { // 发送数据
currentPage: 1,
pageSize: 10,
total: 0,
user: '',
category: ''
},
sendForm: {
removeIdList: []
}, // 新增发送数据
sendFormFlag: false, // 是否展示新增发送数据
}
},
//------------------------
created() {
// 请求分页数据
this.selectListPage()
},
methods: {
changeEnable(row) {
// @change自动改变了布尔值
// console.log(row.enable)
this.$http.post("music/music_enable", {id: row.id, mark: row.mark}).then(res => {
if (res.data.code === "200") {
if (row.mark) {
this.$message.success('歌曲正常使用')
} else {
this.$message.info('歌曲无法使用')
}
} else {
this.$message.error('操作失败，' + res.data.message)
}
})
},
hIndex(index) {
// 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）
return (this.send.currentPage - 1) * this.send.pageSize + index + 1
},
/*导入成功*/
onImportSuccess() {
this.$message.success("文件导入成功")
this.selectListPage()
},
/*导出*/
list_export() {
window.open(`http://${WHITE_IP}/music/list_export`)
},
/*重置函数*/
reset() {
this.send.name = ''
this.send.user = ''
this.send.category = ''
this.selectListPage()
},
/*当前页变化时*/
onCurrentChange(currentPage) {
this.send.currentPage = currentPage
this.selectListPage()
},
/*每页条数变化时*/
onSizeChange(pageSize) {
this.send.pageSize = pageSize
this.selectListPage()
},
/*分页查询*/
selectListPage() {
this.$http.post("/music/list_page", this.send).then(res => {
console.log(res)
if (res.data.code === "200") {
this.send.total = res.data.object.total
this.list = res.data.object.data
} else {
this.$message.error('查询失败，' + res.data.code)
router.push("/login")
}
})
},
/*复选框变化时*/
onSelectChange(val) {
this.sendForm.removeIdList = val
},
/*确认批量删除*/
confirmRemoveIdList() {
if (this.sendForm.removeIdList === undefined) {
return
}
this.sendForm.removeIdList = this.sendForm.removeIdList.map(v => v.id) // [{},{},{}] =>[1,2,3]
this.$http.post("music/list_delete", this.sendForm).then(res => {
if (res.data.code === "200") {
this.$message.success('批量删除成功')
} else {
this.$message.error('批量删除失败，' + res.data.message)
}
this.selectListPage()
})
this.selectListPage()
},
/*确认删除*/
confirmDelete(id) {
this.sendForm.id = id
this.$http.post("/music/delete_admin", this.sendForm).then(res => {
if (res.data.code === "200") {
this.$message.success('删除成功')
} else {
this.$message.error('删除失败，' + res.data.message)
}
this.selectListPage()
})
},
/*修改窗口*/
updateWindow(row) {
this.sendFormFlag = true
this.sendForm = JSON.parse(JSON.stringify(row))
},
/*确认新增或修改*/
confirmInsertOrUpdate() {
this.sendFormFlag = false
this.$http.post("/music/insertOrUpdate", this.sendForm).then(res => {
console.log(res.data)
if (res.data.code === "200") {
this.$message.success('保存成功')
} else {
this.$message.error('保存失败，' + res.data.message)
}
this.selectListPage()
})
},
/*新增窗口*/
insertWindow() {
this.sendFormFlag = true
this.sendForm = {} // 初始化新增空白表单
},
}
}
</script>
<style scoped>
</style>
![[ICLR 2025]Biologically Plausible Brain Graph Transformer](https://i-blog.csdnimg.cn/direct/0a5fd0c5509a47d1a980a2b2d0453c66.png)
![STM32单片机入门学习——第13节: [6-1] TIM定时中断](https://i-blog.csdnimg.cn/direct/f5783eecb6be4d7e8b448cd4312d3be7.png)
