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 * @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: '时价商品', label: '时价商品',
intro: '按重量售卖', intro: '收银端可更改价格',
typeEnum: 'currentPrice' typeEnum: 'currentPrice'
} }
] ]

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

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

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

@ -98,14 +98,15 @@ export default {
this.form.sort = obj.sort this.form.sort = obj.sort
this.form.style = obj.style this.form.style = obj.style
this.form.pic = obj.pic this.form.pic = obj.pic
if (obj.pic) {
setTimeout(() => { setTimeout(() => {
this.$refs.uploadImg.fileList = [ this.$refs.uploadImg.fileList = [
{ {
url: obj.pic url: obj.pic
} }
] ]
}, 100) }, 100)
}
} }
}, },
close() { 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 } }"> <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
<el-button type="text" icon="el-icon-edit">编辑</el-button> <el-button type="text" icon="el-icon-edit">编辑</el-button>
</router-link> </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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -85,7 +88,7 @@
<script> <script>
import dayjs from 'dayjs' import dayjs from 'dayjs'
import settings from '@/settings' import settings from '@/settings'
import { tbProduct, tbShopCategoryGet } from '@/api/shop' import { tbProduct, tbShopCategoryGet, tbProductDelete } from '@/api/shop'
export default { export default {
data() { data() {
return { return {
@ -154,7 +157,16 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
} },
// 删除商品
async delTableHandle(ids) {
try {
await tbProductDelete(ids)
this.getTableData()
} catch (error) {
console.log(error)
}
},
} }
} }
</script> </script>

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

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