add（桌台统计，点歌）

2024-07-08 10:28:37 +08:00
parent addb27be82
commit c4059d109c
7 changed files with 754 additions and 2 deletions
--- a/src/views/application/choose_song.vue
+++ b/src/views/application/choose_song.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-button type="primary" icon="el-icon-plus" @click="$refs.addSong.show()">
+        添加歌曲
+      </el-button>
+    </div>
+    <div class="head-container" id="table_drag">
+      <el-table :data="tableData.list" v-loading="tableData.loading" row-key="id">
+        <el-table-column label="排序" sortable prop="sort"></el-table-column>
+        <el-table-column label="id"  prop="id"></el-table-column>
+        <el-table-column label="歌曲图片" prop="img">
+          <template v-slot="scope">
+            <el-image :src="scope.row.img"
+              style="width:40px;height: 40px;border-radius: 4px;background-color: #efefef;">
+              <div class="img_error" slot="error">
+                <i class="icon el-icon-document-delete"></i>
+              </div>
+            </el-image>
+          </template>
+
+        </el-table-column>
+        <el-table-column label="歌曲名称" prop="name"></el-table-column>
+        <el-table-column label="演出歌手" prop="singer"></el-table-column>
+        <el-table-column label="单价" prop="price"></el-table-column>
+        <el-table-column label="点唱次数" prop="salesNumber"></el-table-column>
+        <el-table-column label="歌曲状态" prop="status">
+          <template v-slot="scope">
+            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
+              @change="showChange($event, scope.row)"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="240">
+          <template v-slot="scope">
+            <!-- <el-button type="text" icon="el-icon-rank" v-if="isPcBowser">排序</el-button>
+            <el-button type="text" size="mini" round icon="el-icon-edit" @click="$refs.addSong.show(scope.row)"
+              style="margin-left: 20px !important;">编辑</el-button> -->
+              <el-button type="text" size="mini" round icon="el-icon-edit" @click="$refs.addSong.show(scope.row)">编辑</el-button>
+            <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
+              <el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
+                删除
+              </el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <addSong ref="addSong" @success="addSongSuccess"></addSong>
+    <el-pagination @size-change="paginationSizeChange" :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+      @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+  </div>
+</template>
+
+<script>
+  import Sortable from 'sortablejs'
+  import {
+    tbShopSonglist,tbShopSongDel,tbShopSongEdit
+  } from '@/api/application-song'
+  import addSong from './componentsCompoents/add-song.vue'
+  export default {
+    components: {
+      addSong
+    },
+    data() {
+      return {
+        tableData: {
+          page: 0,
+          size: 10,
+          total: 0,
+          loading: false,
+          list: []
+        }
+      }
+    },
+    mounted() {
+      this.getTableData()
+    },
+    methods: {
+      addSongSuccess() {
+        this.getTableData()
+      },
+      paginationSizeChange(e){
+        this.tableData.size = e
+        this.getTableData()
+      },
+      async showChange(e,row){
+        try {
+                this.tableData.loading = true
+                const data = { ...row }
+                data.status = e
+                await tbShopSongEdit(data, 'put')
+                this.getTableData()
+            } catch (error) {
+                console.log(error)
+                this.tableData.loading = false
+            }
+      },
+      // 重置查询
+      resetHandle() {
+        this.tableData.page = 0;
+        this.getTableData()
+      },
+      // 分页回调
+      paginationChange(e) {
+        this.tableData.page = e - 1
+        this.getTableData()
+      },
+      // 删除
+      async delHandle(ids) {
+        try {
+          await tbShopSongDel(ids)
+          this.$notify({
+            title: '成功',
+            message: `删除成功`,
+            type: 'success'
+          });
+          this.getTableData()
+        } catch (error) {
+          console.log(error)
+        }
+      },
+      // 获取音乐列表
+      async getTableData() {
+        try {
+          this.tableData.loading = true
+          const res = await tbShopSonglist({
+            page: this.tableData.page+1,
+            size: this.tableData.size,
+            sort: 'id',
+            shopId: localStorage.getItem('shopId')
+          })
+          this.tableData.loading = false
+          this.tableData.list = res.content
+          this.tableData.total = res.totalElements
+        } catch (error) {}
+      }
+    }
+  }
+</script>