czg_team
/
cashier-admin
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增桌台

This commit is contained in:
gyq 2024-02-06 15:23:47 +08:00
parent 259aec07cd
commit b31f6494b5
9 changed files with 195 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/shop.js
View File

@ -12,6 +12,18 @@ export function tbProduct(params) {
})
}
/**
* 删除商品
* @returns
*/
export function tbProductDelete(data) {
return request({
url: '/api/tbProduct',
method: 'delete',
data
})
}
/**
* 商品单位列表
* @returns

12
src/api/table.js
View File

@ -61,4 +61,16 @@ export function tbShopTable(data, method) {
})
}
/**
* 删除台桌
* @returns
*/
export function tbShopTableDelete(data) {
return request({
url: `/api/tbShopTable`,
method: 'DELETE',
data
})
}

2
src/settings.js
View File

@ -66,7 +66,7 @@ module.exports = {
},
{
label: '时价商品',
intro: '按重量售卖',
intro: '收银端可更改价格',
typeEnum: 'currentPrice'
}
]

12
src/views/product/category.vue
View File

@ -7,10 +7,15 @@
<div class="head-container">
<el-table :data="tableData.list" v-loading="tableData.loading" row-key="id"
:tree-props="{ children: 'childrenList' }">
<el-table-column label="排序" prop="sort" sortable></el-table-column>
<el-table-column label="排序" prop="sort" sortable width="100"></el-table-column>
<el-table-column label="分类名称" prop="name"></el-table-column>
<el-table-column label="分类图片">
<template v-slot="scope">
<el-image :src="scope.row.pic" style="width: 40px;height: 40px;border-radius: 4px;">
<el-image :src="scope.row.pic"
style="width: 50px;height: 50px;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>
@ -26,7 +31,6 @@
</div>
</template>
</el-table-column>
<el-table-column label="分类名称" prop="name"></el-table-column>
<el-table-column label="操作" width="300">
<template v-slot="scope">
<el-button type="text" size="mini" round icon="el-icon-plus"
@ -93,7 +97,7 @@ export default {
// 删除
async delHandle(ids) {
try {
const res = await tbShopCategoryDelete(ids)
await tbShopCategoryDelete(ids)
this.$notify({
title: '成功',
message: `删除成功`,

17
src/views/product/components/addClassify.vue
View File

@ -98,14 +98,15 @@ export default {
this.form.sort = obj.sort
this.form.style = obj.style
this.form.pic = obj.pic
setTimeout(() => {
this.$refs.uploadImg.fileList = [
{
url: obj.pic
}
]
}, 100)
if (obj.pic) {
setTimeout(() => {
this.$refs.uploadImg.fileList = [
{
url: obj.pic
}
]
}, 100)
}
}
},
close() {

18
src/views/product/index.vue
View File

@ -70,7 +70,10 @@
<router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
<el-button type="text" icon="el-icon-edit">编辑</el-button>
</router-link>
<el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;">删除</el-button>
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
<el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
slot="reference">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
@ -85,7 +88,7 @@
<script>
import dayjs from 'dayjs'
import settings from '@/settings'
import { tbProduct, tbShopCategoryGet } from '@/api/shop'
import { tbProduct, tbShopCategoryGet, tbProductDelete } from '@/api/shop'
export default {
data() {
return {
@ -154,7 +157,16 @@ export default {
} catch (error) {
console.log(error)
}
}
},
// 删除商品
async delTableHandle(ids) {
try {
await tbProductDelete(ids)
this.getTableData()
} catch (error) {
console.log(error)
}
},
}
}
</script>

14
src/views/table/components/addTable.vue
View File

@ -1,5 +1,5 @@
<template>
<el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" :visible.sync="dialogVisible" @close="reset">
<el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" :visible.sync="dialogVisible" @open="tbShopAreaGet" @close="reset">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="选择区域" prop="areaId">
<el-select v-model="form.areaId" placeholder="请选择区域">
@ -30,7 +30,7 @@
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
</span>
</el-dialog>
</template>
@ -41,6 +41,8 @@ export default {
data() {
return {
dialogVisible: false,
resetForm: '',
loading: false,
form: {
id: '',
name: '',
@ -64,12 +66,13 @@ export default {
}
},
mounted() {
this.tbShopAreaGet()
this.resetForm = { ...this.form }
},
methods: {
onSubmitHandle() {
this.$refs.form.validate(async valid => {
if (valid) {
this.loading = true
try {
let res = await tbShopTable({
...this.form,
@ -82,7 +85,9 @@ export default {
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
});
this.loading = false
} catch (error) {
this.loading = false
console.log(error)
}
}
@ -98,8 +103,7 @@ export default {
this.dialogVisible = false
},
reset() {
this.form.id = ''
this.form.name = ''
this.form = { ...this.resetForm }
},
// 获取区域
async tbShopAreaGet() {

61
src/views/table/table_config.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="app-container">
<el-form :model="form" label-width="120px">
<el-form-item label="网络预定开关">
<el-switch v-model="form.yd" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="预定时间" v-if="form.timeList.length">
<div class="time_row" v-for="(item, index) in form.timeList" :key="index">
<el-time-picker is-range v-model="item.time" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" placeholder="选择时间范围">
</el-time-picker>
<i class="icon el-icon-delete" @click="form.timeList.splice(index, 1)"></i>
</div>
</el-form-item>
<el-form-item>
<el-button plain icon="el-icon-plus" @click="form.timeList.push({ time: [] })">添加时间段</el-button>
<div class="tips">注：结束时间不能小于开始时间</div>
</el-form-item>
<el-form-item label="允许预约天数">
<el-input-number v-model="form.dayMax" controls-position="right" :min="0"></el-input-number>
<div class="tips">注：最多预约几天后的日期</div>
</el-form-item>
<el-form-item label="允许预约天数">
<el-input type="textarea" v-model="form.info" placeholder="充值说明" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
yd: 0,
timeList: [],
dayMax: 3,
info: ''
}
}
}
}
</script>
<style scoped lang="scss">
.time_row {
display: flex;
align-items: center;
&:not(:first-child) {
margin-top: 20px;
}
.icon {
margin-left: 20px;
}
}
</style>

89
src/views/table/table_list.vue
View File

@ -21,36 +21,41 @@
</div>
</div>
<div class="head-container">
<div class="table_list">
<div class="table_list" v-loading="loading">
<div class="item" v-for="item in tableList" :key="item.id">
<div class="top">
<div class="row row1">
<span>0001</span>
<span>{{ item.name }}</span>
<div class="state">
<span class="dot"></span>
开台中
<span class="dot" :style="{ backgroundColor: status[item.status].type }"></span>
{{ status[item.status].label }}
</div>
</div>
<div class="row">
<el-tag type="success" size="mini">低消</el-tag>
<el-tag size="mini">可预约</el-tag>
<el-tag type="warning" size="mini">{{ item.type == 0 ? '低消' : '计时' }}</el-tag>
<el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{ item.isPredate == 1 ? '可预约' : '不可预约' }}</el-tag>
</div>
<div class="row">
<span class="tips">客座次数：5人</span>
<span class="tips">客座次数：{{ item.maxCapacity }}人</span>
</div>
</div>
<div class="btm">
<div class="btm_item">
<!-- <div class="btm_item">
<i class="i el-icon-edit"></i>
</div> -->
<div class="btm_item" @click="$refs.addTable.show(item)">
<i class="i el-icon-edit"></i>
</div>
<div class="btm_item">
<i class="i el-icon-edit"></i>
</div>
<div class="btm_item">
<i class="i el-icon-delete"></i>
</div>
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([item.id])" style="flex: 1;">
<div class="btm_item" slot="reference">
<i class="i el-icon-delete"></i>
</div>
</el-popconfirm>
</div>
</div>
<div class="empty_wrap">
<el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
</div>
</div>
</div>
<addEara ref="addEara" @success="tbShopAreaGet" />
@ -61,7 +66,7 @@
<script>
import addEara from './components/addEara'
import addTable from './components/addTable'
import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete } from '@/api/table'
import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete, tbShopTableDelete } from '@/api/table'
export default {
components: {
addEara,
@ -71,7 +76,26 @@ export default {
return {
tabVlaue: '',
tabs: [],
tableList: []
loading: false,
tableList: [],
status: {
subscribe: {
label: '预定',
type: '#E6A23C'
},
closed: {
label: '关台',
type: '#F56C6C'
},
opening: {
label: '开台中',
type: '#67C23A'
},
cleaning: {
label: '台桌清理中',
type: '#909399'
}
}
}
},
mounted() {
@ -81,6 +105,15 @@ export default {
tabClick() {
this.tbShopTableGet()
},
// 删除桌台
async delTableHandle(ids) {
try {
await tbShopTableDelete(ids)
this.tbShopTableGet()
} catch (error) {
console.log(error)
}
},
// 删除区域
async delHandle(ids) {
try {
@ -93,13 +126,18 @@ export default {
},
// 台桌列表
async tbShopTableGet() {
this.loading = true
try {
const { content } = await tbShopTableGet({
shopId: localStorage.getItem('shopId'),
areaId: this.tabVlaue
})
this.tableList = content
setTimeout(() => {
this.loading = false
}, 300)
} catch (error) {
this.loading = false
console.log(error)
}
},
@ -133,6 +171,13 @@ export default {
display: flex;
flex-wrap: wrap;
gap: 20px;
min-height: 150px;
.empty_wrap {
flex: 1;
display: flex;
justify-content: center;
}
.item {
border: 1px solid #ddd;
@ -149,7 +194,7 @@ export default {
}
&:not(:first-child) {
margin-top: 14px;
margin-top: 20px;
}
&.row1 {
@ -159,11 +204,10 @@ export default {
.state {
display: flex;
align-items: center;
margin-left: 40px;
margin-left: 80px;
.dot {
$size: 6px;
background-color: #67C23A;
width: $size;
height: $size;
border-radius: 50%;
@ -187,8 +231,11 @@ export default {
justify-content: center;
position: relative;
&:nth-child(1),
&:nth-child(2) {
&:hover {
cursor: pointer;
}
&:nth-child(1) {
&::before {
content: '';
height: 50%;