czg_team/management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2024-04-24 09:52:04 +08:00
commit 127202beac
386 changed files with 102573 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/table/components/addEara.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible.sync="dialogVisible" @close="reset">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="区域名称" prop="name">
<el-input v-model="form.name" placeholder="请输入区域名称"></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 { tbShopArea } from '@/api/table'
export default {
data() {
return {
dialogVisible: false,
form: {
id: '',
name: ''
},
rules: {
name: [
{
required: true,
message: '请输入区域名称',
trigger: 'blur'
}
]
}
}
},
methods: {
onSubmitHandle() {
this.$refs.form.validate(async valid => {
if (valid) {
try {
let res = await tbShopArea({
...this.form,
shopId: localStorage.getItem('shopId')
}, this.form.id ? 'put' : 'post')
this.$emit('success', res)
this.close()
this.$notify({
title: '成功',
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
});
} catch (error) {
console.log(error)
}
}
})
},
show(obj) {
this.dialogVisible = true
if (obj && obj.id) {
this.form = JSON.parse(JSON.stringify(obj))
}
},
close() {
this.dialogVisible = false
},
reset() {
this.form.id = ''
this.form.name = ''
}
}
}
</script>

121
src/views/table/components/addTable.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<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="请选择区域">
<el-option :label="item.name" :value="item.id" v-for="item in areaList" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="台桌名称">
<el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
</el-form-item>
<el-form-item label="客座数">
<el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="网络预定开关">
<el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
</el-form-item>
<el-form-item label="类型">
<el-radio-group v-model="form.type">
<el-radio-button :label="0">低消</el-radio-button>
<el-radio-button :label="2">计时</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="最低消费" v-if="form.type == 0">
<el-input-number v-model="form.amount" :min="0" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="每小时收费" v-if="form.type == 2">
<el-input-number v-model="form.perhour" :min="0" controls-position="right"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { tbShopTable, tbShopAreaGet } from '@/api/table'
export default {
data() {
return {
dialogVisible: false,
resetForm: '',
loading: false,
form: {
id: '',
name: '',
areaId: '',
maxCapacity: 0,
isPredate: 1,
type: 2,
perhour: 0,
amount: 0
},
rules: {
areaId: [
{
required: true,
message: '请选择区域',
trigger: 'blur'
}
]
},
areaList: []
}
},
mounted() {
this.resetForm = { ...this.form }
},
methods: {
onSubmitHandle() {
this.$refs.form.validate(async valid => {
if (valid) {
this.loading = true
try {
let res = await tbShopTable({
...this.form,
shopId: localStorage.getItem('shopId')
}, this.form.id ? 'put' : 'post')
this.$emit('success', res)
this.close()
this.$notify({
title: '成功',
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
});
this.loading = false
} catch (error) {
this.loading = false
console.log(error)
}
}
})
},
show(obj) {
this.dialogVisible = true
if (obj && obj.id) {
this.form = JSON.parse(JSON.stringify(obj))
}
},
close() {
this.dialogVisible = false
},
reset() {
this.form = { ...this.resetForm }
},
// 获取区域
async tbShopAreaGet() {
try {
const { content } = await tbShopAreaGet({
shopId: localStorage.getItem('shopId')
})
this.areaList = content
} catch (error) {
console.log(error);
}
}
}
}
</script>

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>

256
src/views/table/table_list.vue Normal file
View File

@@ -0,0 +1,256 @@
<template>
<div class="app-container">
<el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
<el-tab-pane label="全部" name=""></el-tab-pane>
<el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
<div slot="label">
{{ item.name }}
<i class="icon el-icon-edit" @click.stop="$refs.addEara.show(item)"></i>
<el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
<i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
</el-popconfirm>
</div>
</el-tab-pane>
</el-tabs>
<div class="head-container">
<div class="filter_wrap">
<el-button icon="el-icon-plus" @click="$refs.addEara.show()">添加区域</el-button>
<el-button type="primary" icon="el-icon-plus" @click="$refs.addTable.show()">添加台桌</el-button>
<el-button type="primary" icon="el-icon-download">下载台桌码</el-button>
<el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
</div>
</div>
<div class="head-container">
<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>{{ item.name }}</span>
<div class="state">
<span class="dot" :style="{ backgroundColor: status[item.status].type }"></span>
{{ status[item.status].label }}
</div>
</div>
<div class="row">
<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">客座次数：{{ item.maxCapacity }}人</span>
</div>
</div>
<div class="btm">
<!-- <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>
<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" />
<addTable ref="addTable" @success="tbShopTableGet" />
</div>
</template>
<script>
import addEara from './components/addEara'
import addTable from './components/addTable'
import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete, tbShopTableDelete } from '@/api/table'
export default {
components: {
addEara,
addTable
},
data() {
return {
tabVlaue: '',
tabs: [],
loading: false,
tableList: [],
status: {
subscribe: {
label: '预定',
type: '#E6A23C'
},
closed: {
label: '关台',
type: '#F56C6C'
},
opening: {
label: '开台中',
type: '#67C23A'
},
cleaning: {
label: '台桌清理中',
type: '#909399'
}
}
}
},
mounted() {
this.tbShopAreaGet()
},
methods: {
tabClick() {
this.tbShopTableGet()
},
// 删除桌台
async delTableHandle(ids) {
try {
await tbShopTableDelete(ids)
this.tbShopTableGet()
} catch (error) {
console.log(error)
}
},
// 删除区域
async delHandle(ids) {
try {
await tbShopAreaDelete(ids)
this.tabVlaue = ''
this.tbShopAreaGet()
} catch (error) {
console.log(error)
}
},
// 台桌列表
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)
}
},
// 获取区域
async tbShopAreaGet() {
try {
const { content } = await tbShopAreaGet({
shopId: localStorage.getItem('shopId')
})
this.tabs = content
this.tbShopTableGet()
} catch (error) {
console.log(error)
}
}
}
}
</script>
<style>
.el-tabs {
margin-bottom: 0;
}
</style>
<style scoped lang="scss">
.icon {
margin-left: 10px;
}
.table_list {
display: flex;
flex-wrap: wrap;
gap: 20px;
min-height: 150px;
.empty_wrap {
flex: 1;
display: flex;
justify-content: center;
}
.item {
border: 1px solid #ddd;
.top {
padding: 20px;
.row {
display: flex;
gap: 10px;
.tips {
font-size: 12px;
}
&:not(:first-child) {
margin-top: 20px;
}
&.row1 {
justify-content: space-between;
font-size: 14px;
.state {
display: flex;
align-items: center;
margin-left: 80px;
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
margin-right: $size;
}
}
}
}
}
.btm {
border-top: 1px solid #ddd;
background-color: #efefef;
display: flex;
.btm_item {
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
&:hover {
cursor: pointer;
}
&:nth-child(1) {
&::before {
content: '';
height: 50%;
border-right: 1px solid #ddd;
position: absolute;
top: 25%;
right: 0;
}
}
.i {
color: #666;
}
}
}
}
}
</style>