add（桌台统计，点歌）
This commit is contained in:
139
src/views/application/choose_song.vue
Normal file
139
src/views/application/choose_song.vue
Normal file
@@ -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>
|
||||
161
src/views/application/componentsCompoents/add-song.vue
Normal file
161
src/views/application/componentsCompoents/add-song.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<el-dialog :title="title" width="500px" :visible.sync="dialogVisible">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="商品图片">
|
||||
<uploadImg ref="uploadImg" :limit="1" @success="uploadSuccess" @remove="uploadRemove" />
|
||||
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="歌曲名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="原唱歌手">
|
||||
<el-input v-model="form.originSinger"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="演出歌手名称" prop="singer">
|
||||
<el-input v-model="form.singer"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input type="number" v-model="form.price"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input type="number" v-model="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImg from '@/components/uploadImg'
|
||||
import {
|
||||
tbShopSongAdd,tbShopSongEdit
|
||||
} from '@/api/application-song'
|
||||
export default {
|
||||
components: {
|
||||
uploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '新增歌曲',
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '歌曲名称必填',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
singer: [{
|
||||
required: true,
|
||||
message: '演出歌手名称必填',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
price: [{
|
||||
required: true,
|
||||
message: '单价必填',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
sort: [{
|
||||
required: true,
|
||||
message: '排序必填',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
},
|
||||
form: {
|
||||
img: '',
|
||||
name: '',
|
||||
singer: '',
|
||||
originSinger: '',
|
||||
price: 0,
|
||||
sort: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.form);
|
||||
},
|
||||
methods: {
|
||||
uploadSuccess(res) {
|
||||
this.form.img = res[0]
|
||||
console.log(this.form.img);
|
||||
},
|
||||
uploadRemove() {
|
||||
this.form.img = ''
|
||||
},
|
||||
// 提交
|
||||
onSubmitHandle() {
|
||||
console.log(this.form)
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
let res = ''
|
||||
if (this.form.id) { //编辑
|
||||
res = await tbShopSongEdit(this.form)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `修改成功`,
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
//添加
|
||||
res = await tbShopSongAdd(this.form)
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `添加成功`,
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
this.$emit('success', res)
|
||||
this.close()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async show(obj = {}, wine = false) {
|
||||
console.log(obj);
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
this.form = {
|
||||
...obj
|
||||
}
|
||||
}
|
||||
if (obj && obj.img) {
|
||||
this.form.img = obj.img
|
||||
requestAnimationFrame(()=>{
|
||||
this.$refs.uploadImg.fileList = [{
|
||||
url: obj.img
|
||||
}]
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
...this.resetForm
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods_info {
|
||||
background-color: #f9f9f9;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user