VUE+SPRINGBOOT+语音技术实现智能语音歌曲管理系统

语音控制歌曲的播放、暂停、增删改查

<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>