This commit is contained in:
GaoHao 2024-12-12 11:03:10 +08:00
commit 316fce4cfc
5 changed files with 1024 additions and 190 deletions

View File

@ -94,6 +94,8 @@ export default {
sources: [
{ label: "PC", value: "PC" },
{ label: "APP", value: "APP" },
{ label: "点餐宝", value: "点餐宝" },
{ label: "电话机", value: "电话机" },
],
title: "",
dialogVisible: false,
@ -153,20 +155,18 @@ export default {
const { version } = this.form;
let fileRes = "";
const file = this.$refs.uploadFile.getFileList();
console.log(file);
if (Object.prototype.toString.call(file)=== '[object File]') {
this.loadingText = "文件上传中,请耐心等待...";
this.loading = true;
// fileRes = await $uploadVersionFile(file, { name: version });
fileRes = await this.ossClient.partUpload(
`/version/${version}.exe`,
`/version/${version}${file.name.replace('.apk', '')}`,
file,
(p) => {
this.progress = Math.floor(p * 100);
// UI
}
);
console.log(fileRes);
if (!fileRes) {
this.loading = false;
this.progress = 0;

View File

@ -56,9 +56,11 @@ export default {
},
methods: {
beforeUpload(file) {
console.log(1)
const isExe = file.name.endsWith(".exe");
if (!isExe) {
this.$message.error("只允许上传.exe文件");
const isApk = file.name.endsWith(".apk");
if (!isExe&&!isApk) {
this.$message.error("只允许上传.exe或者.apk文件");
return false; //
}
return true; //
@ -99,10 +101,12 @@ export default {
this.dialogVisible = true;
},
onExceed(files ) {
console.log(2)
const file=files[0];
const isExe = file.name.endsWith(".exe");
if (!isExe) {
this.$message.error("只允许上传.exe文件!");
const isApk = file.name.endsWith(".apk");
if (!isExe&&!isApk) {
this.$message.error("只允许上传.exe或者.apk文件!");
return false; //
}
console.log(files);

View File

@ -0,0 +1,135 @@
<template>
<el-dialog
title="预约"
:visible.sync="dialogVisible"
width="400px"
@open="tbShopAreaGet"
@close="reset"
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="120px"
label-position="left"
>
<el-form-item label="就餐人数" prop="number">
<el-input-number v-model="form.number" :min="1" controls-position="right" />
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="联系人" prop="name">
<el-input v-model="form.name" placeholder="请输入联系人姓名" />
</el-form-item>
<el-form-item label="就餐时间" prop="time">
<el-time-picker v-model="form.time" value-format="HH:mm:ss" placeholder="选择时间" style="width: 100%;" />
</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 { $fastCreateTable } from '@/api/table'
export default {
data() {
return {
dialogVisible: false,
resetForm: '',
loading: false,
form: {
id: '',
number: 1,
name: '',
phone: '',
time: ''
},
rules: {
number: [
{
required: true,
message: '请选择就餐人数',
trigger: ['blur']
}
],
phone: [
{
required: true,
message: '请输入联系方式',
trigger: ['blur']
}
],
name: [
{
required: true,
message: '请输入联系人姓名',
trigger: ['blur']
}
],
time: [
{
required: true,
message: '请选择时间',
trigger: ['change']
}
]
}
}
},
mounted() {
this.resetForm = { ...this.form }
},
methods: {
onSubmitHandle() {
this.$refs.form.validate(async(valid) => {
if (valid) {
this.loading = true
try {
const res = await $fastCreateTable(
{
...this.form,
qrcode: this.form.tableId,
shopId: localStorage.getItem('shopId')
},
this.form.id ? 'put' : 'post'
)
this.$emit('success', res)
this.close()
this.$notify({
title: '成功',
message: `预约成功`,
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 }
}
}
}
</script>

View File

@ -0,0 +1,638 @@
<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"
@click="$refs.downloadTableCode.show()"
>
下载台桌码
</el-button>
<el-button
type="primary"
icon="el-icon-download"
@click="downloadShopCode"
>下载店铺码</el-button
>
</div>
</div>
<div class="u-flex u-p-b-15 u-font-14">
<div class="state u-m-r-24" v-for="(item, key) in status" :key="key">
<span
class="dot"
:style="{
backgroundColor: status[key] ? status[key].type : '',
}"
></span>
{{ item.label }}
</div>
</div>
<div class="head-container">
<div class="table_list" v-loading="loading">
<div
class="item"
v-for="item in tableList"
:key="item.id"
:style="{ 'background-color': status[item.status].type }"
>
<div class="new-top flex u-row-between">
<div class="u-flex u-flex-1 u-p-r-10">
<span class="name u-line-1" style="max-width: 50px">
{{ item.name }}</span
>
<span class="u-font-14 u-line-1"
>{{ areaMap[item.areaId] || "" }}</span
>
</div>
<el-dropdown trigger="click" @command="tableComman($event, item)">
<i class="el-icon-more cur-pointer color-fff"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit">
<i class="i el-icon-edit"></i>
<span>编辑</span>
</el-dropdown-item>
<el-dropdown-item command="del">
<i class="i el-icon-delete"></i>
<span>删除</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="box">
<div class="top">
<!-- <div class="row row1">
<span>{{ item.name }}</span>
<div class="state">
<span
class="dot"
:style="{
backgroundColor: status[item.status]
? status[item.status].type
: '',
}"
></span>
{{ status[item.status] ? 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 class="u-font-18 font-600 total-price">
<span
class="cur-pointer"
v-if="item.status == 'using'"
@click="diancanShow(item, 'isAddGoods')"
>
¥{{ item.totalAmount || 0 }}{{ item.productNum }}
</span>
<span class="color-fff" v-else>|</span>
</div>
<div class="row btn-group">
<template v-if="item.status == 'idle'">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item)"
>点餐</el-button
>
</template>
<template v-else>
<template v-if="item.status == 'using'">
<el-button
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')"
>加菜</el-button
>
<el-button
type="danger"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')"
>结账</el-button
>
</template>
<template v-else-if="item.status == 'closed'">
<el-button type="info" disabled>已关台</el-button>
</template>
<template v-else-if="item.status == 'cleaning'">
<el-button
type="info"
@click="cleanTableHandle(item)"
:style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}"
>清台</el-button
>
</template>
<template v-else>
<el-button type="info" disabled>点餐</el-button>
</template>
</template>
</div>
</div>
<div
class="u-flex u-col-bottom bottom u-row-between color-666"
:class="{ 'opacity-0': item.status == 'closed' }"
>
<div class="u-flex u-col-center">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
/>
<span class="u-m-t-4 u-font-12 u-m-l-2"
>{{ item.useNum || 0 }}/{{ item.maxCapacity }}</span
>
</div>
<div class="u-flex" v-if="item.status == 'using'">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/shalou.png"
alt=""
/>
<span class="u-m-t-4 u-font-12">{{
item.durationTime | formatTime
}}</span>
</div>
</div>
</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" />
<!-- 编辑台桌 -->
<table-edit ref="editTable" @success="tbShopTableGet"></table-edit>
<downloadTableCode :total="total" ref="downloadTableCode" />
<!-- 点餐 -->
<!-- <table-diancan ref="diancan" @close="onDiancanClose"></table-diancan> -->
<!-- 选择人数 -->
<choose-diners-number
ref="refChooseDinersNumber"
:max="selTable.maxCapacity"
@confirm="chooseDinersNumberConfirm"
></choose-diners-number>
</div>
</template>
<script>
import addEara from "./components/addEara";
import addTable from "./components/addTable";
import tableEdit from './components/table-edit';
import downloadTableCode from "./components/downloadTableCode";
import tableDiancan from "./components/table-diancan.vue";
import $status from "./status.js";
import chooseDinersNumber from "./components/table-diancan-components/choose-diners-number.vue";
import { tbShopInfo } from "@/api/user";
import { hasPermission } from "@/utils/limits.js";
import {
tbShopTableGet,
tbShopAreaGet,
tbShopAreaDelete,
tbShopTableDelete,
tbShopTable,
} from "@/api/table";
import dayjs from "dayjs";
import { downloadFile } from "@/utils/index";
export default {
components: {
addEara,
addTable,
downloadTableCode,
tableDiancan,
chooseDinersNumber,
tableEdit,
},
data() {
return {
tabVlaue: "",
tabs: [],
loading: false,
total: 0,
tableList: [],
status: $status,
selTable: "", //
areaMap: {},
shopInfo: {},
timer: null,
};
},
beforeDestroy() {
this.clearTimer();
console.log("beforeDestroy");
},
mounted() {
this.clearTimer();
this.setTimter(60);
this.tbShopAreaGet();
this.getShopInfo();
},
filters: {
formatTime(milliseconds) {
console.log(milliseconds);
if (!milliseconds) {
return "";
}
const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor(
(milliseconds % (1000 * 60 * 60)) / (1000 * 60)
);
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${
minutes + "分"
}`;
},
},
methods: {
async downloadShopCode() {
try {
const link = document.createElement("a");
link.href = this.shopInfo.smallQrcode;
const fileName = this.shopInfo.shopName +"店铺码"+ ".png";
console.log(fileName)
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
this.$message.success("下载成功");
} catch (error) {
console.log(error);
}
},
clearTimer() {
console.log("clearTimer");
clearInterval(this.timer);
this.timer = null;
},
setTimter(time = 60) {
this.timer = setInterval(() => {
const showloading = false;
this.tbShopTableGet(showloading);
}, time * 1000);
},
//
async getShopInfo() {
try {
const shopId = localStorage.getItem("shopId");
const res = await tbShopInfo(shopId);
this.shopInfo = res;
console.log(res);
} catch (error) {}
},
//
cleanTableHandle(item) {
this.$confirm("确定要清台:" + item.name, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
tbShopTable(
{
...item,
status: "idle",
qrcode: item.tableId,
shopId: localStorage.getItem("shopId"),
},
"put"
).then((res) => {
this.tbShopTableGet();
});
});
},
tableComman(command, item) {
if (command == "edit") {
return this.$refs.editTable.show(item);
}
if (command == "del") {
return this.delPop(item);
}
},
delPop(item) {
this.$confirm("是否删除" + item.name + "台桌", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.delTableHandle([item.id]);
})
.catch(() => {});
},
onDiancanClose() {
this.tbShopTableGet();
},
async diancanShow(item, key) {
if(key=='isPayOrder'){
const canShoukuan=await hasPermission('允许收款')
if(!canShoukuan){
return
}
}
const canXiadan=await hasPermission('允许下单')
if(!canXiadan){
return
}
//key isAddGoods
//key isPayOrder
this.selTable = item;
if (this.shopInfo.isTableFee) {
//
this.toInstead({ num: 0, key });
// this.$refs.diancan.open(item, key, '');
return;
}
const num = item.useNum || 0;
if (item.useNum <= 0) {
return this.$refs.refChooseDinersNumber.open();
}
this.toInstead({ num: num, key });
// this.$refs.diancan.open(item, key, num);
},
toInstead(query) {
this.$router.push({
path: "/tool/Instead/index",
query: {
table_name: this.selTable.name,
tableId: this.selTable.tableId,
useType: this.selTable.useType,
maxCapacity: this.selTable.maxCapacity,
masterId: this.selTable.masterId,
orderId: this.selTable.orderId,
...query,
},
});
},
chooseDinersNumberConfirm(num) {
this.toInstead({ num: num });
// this.$refs.diancan.open(this.selTable, undefined, num);
},
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(showloading = true) {
this.loading = showloading;
try {
const { content, total } = await tbShopTableGet({
shopId: localStorage.getItem("shopId"),
areaId: this.tabVlaue,
});
this.tableList = content;
// this.tableList = content.sort((a,b)=>{
// if(a.status=='idle'&&b.status!='idle'){
// return 1
// }else if(a.status!='idle'&&b.status=='idle'){
// return -1
// }
// });
this.total = total;
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.areaMap = content.reduce((prve, cur) => {
prve[cur.id] = cur.name;
return prve;
}, {});
this.tbShopTableGet();
} catch (error) {
console.log(error);
}
},
},
};
</script>
<style>
.el-tabs {
margin-bottom: 0;
}
</style>
<style scoped lang="scss">
.cur-pointer {
cursor: pointer;
}
.opacity-0 {
opacity: 0;
}
.icon {
margin-left: 10px;
}
::v-deep .btn-group .el-button {
width: 100%;
}
::v-deep .el-dropdown-menu__item {
line-height: 36px;
padding: 0 20px;
min-width: 60px;
text-align: center;
}
.state {
display: flex;
align-items: center;
.dot {
$size: 8px;
width: $size;
height: $size;
border-radius: 50%;
margin-right: $size;
}
}
.table_list {
display: flex;
flex-wrap: wrap;
gap: 20px;
min-height: 150px;
.empty_wrap {
flex: 1;
display: flex;
justify-content: center;
}
.btn-group {
display: flex;
gap: 10px;
}
.item {
padding: 1px;
overflow: hidden;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 6px;
background-color: #1890ff;
max-width: 172px;
min-width: 160px;
&.using {
background-color: rgb(250, 85, 85);
}
&.closed {
background-color: rgb(221, 221, 221);
filter: grayscale(1);
}
.total-price {
line-height: 35px;
height: 35px;
&:hover {
text-decoration: underline;
}
}
.new-top {
height: 30px;
color: #fff;
padding: 0 12px;
}
.name {
font-size: 16px;
line-height: 30px;
margin-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.box {
background-color: #fff;
border-radius: 3px 3px 6px 6px;
}
.bottom {
border-top: 1px solid #f7f7fa;
padding: 6px 15px;
}
.top {
padding: 10px;
background-color: #fff;
flex: 1;
border-radius: 3px 3px 0 0;
.row {
display: flex;
gap: 10px;
.tips {
font-size: 12px;
}
&.row1 {
justify-content: space-between;
font-size: 14px;
}
}
}
.btm {
border-top: 1px solid #ddd;
background-color: #efefef;
display: flex;
border-radius: 0 0 6px 6px;
.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>

View File

@ -1,7 +1,7 @@
<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 label="全部" name="" />
<el-tab-pane
v-for="item in tabs"
:key="item.id"
@ -13,24 +13,24 @@
<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>
<i slot="reference" class="icon el-icon-delete" @click.stop="" />
</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
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>
<el-button
type="primary"
icon="el-icon-download"
@ -42,47 +42,45 @@
type="primary"
icon="el-icon-download"
@click="downloadShopCode"
>下载店铺码</el-button
>
>下载店铺码</el-button>
</div>
</div>
<div class="u-flex u-p-b-15 u-font-14">
<div class="state u-m-r-24" v-for="(item, key) in status" :key="key">
<div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
<span
class="dot"
:style="{
backgroundColor: status[key] ? status[key].type : '',
}"
></span>
/>
{{ item.label }}
</div>
</div>
<div class="head-container">
<div class="table_list" v-loading="loading">
<div v-loading="loading" class="table_list">
<div
class="item"
v-for="item in tableList"
:key="item.id"
class="item"
:style="{ 'background-color': status[item.status].type }"
>
<div class="new-top flex u-row-between">
<div class="u-flex u-flex-1 u-p-r-10">
<span class="name u-line-1" style="max-width: 50px">
{{ item.name }}</span
>
<span class="u-font-14 u-line-1"
>{{ areaMap[item.areaId] || "" }}</span
>
{{ item.name }}</span>
<span
class="u-font-14 u-line-1"
>{{ areaMap[item.areaId] || "" }}</span>
</div>
<el-dropdown trigger="click" @command="tableComman($event, item)">
<i class="el-icon-more cur-pointer color-fff"></i>
<i class="el-icon-more cur-pointer color-fff" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit">
<i class="i el-icon-edit"></i>
<i class="i el-icon-edit" />
<span>编辑</span>
</el-dropdown-item>
<el-dropdown-item command="del">
<i class="i el-icon-delete"></i>
<i class="i el-icon-delete" />
<span>删除</span>
</el-dropdown-item>
</el-dropdown-menu>
@ -119,36 +117,46 @@
</div> -->
<div class="u-font-18 font-600 total-price">
<span
class="cur-pointer"
v-if="item.status == 'using'"
class="cur-pointer"
@click="diancanShow(item, 'isAddGoods')"
>
¥{{ item.totalAmount || 0 }}{{ item.productNum }}
</span>
<span class="color-fff" v-else>|</span>
<span v-else class="color-fff">|</span>
</div>
<div class="row btn-group">
<template v-if="item.status == 'idle'">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'subscribe')"
>预约</el-button>
</template>
<template v-if="item.status == 'subscribe'">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
>已预约</el-button>
</template>
<template v-if="item.status == 'idle' || item.status == 'subscribe'">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item)"
>点餐</el-button
>
>点餐</el-button>
</template>
<template v-else>
<template v-if="item.status == 'using'">
<el-button
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')"
>加菜</el-button
>
>加菜</el-button>
<el-button
type="danger"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')"
>结账</el-button
>
>结账</el-button>
</template>
<template v-else-if="item.status == 'closed'">
<el-button type="info" disabled>已关台</el-button>
@ -156,13 +164,12 @@
<template v-else-if="item.status == 'cleaning'">
<el-button
type="info"
@click="cleanTableHandle(item)"
:style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}"
>清台</el-button
>
@click="cleanTableHandle(item)"
>清台</el-button>
</template>
<template v-else>
<el-button type="info" disabled>点餐</el-button>
@ -179,17 +186,17 @@
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
/>
<span class="u-m-t-4 u-font-12 u-m-l-2"
>{{ item.useNum || 0 }}/{{ item.maxCapacity }}</span
>
<span
class="u-m-t-4 u-font-12 u-m-l-2"
>{{ item.useNum || 0 }}/{{ item.maxCapacity }}</span>
</div>
<div class="u-flex" v-if="item.status == 'using'">
<div v-if="item.status == 'using'" class="u-flex">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/shalou.png"
alt=""
/>
>
<span class="u-m-t-4 u-font-12">{{
item.durationTime | formatTime
}}</span>
@ -198,7 +205,7 @@
</div>
</div>
<div class="empty_wrap">
<el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
<el-empty v-if="!tableList.length" description="空空如也~" />
</div>
</div>
</div>
@ -206,9 +213,10 @@
<!-- 批量添加台桌 -->
<addTable ref="addTable" @success="tbShopTableGet" />
<!-- 编辑台桌 -->
<table-edit ref="editTable" @success="tbShopTableGet"></table-edit>
<downloadTableCode :total="total" ref="downloadTableCode" />
<table-edit ref="editTable" @success="tbShopTableGet" />
<downloadTableCode ref="downloadTableCode" :total="total" />
<!-- 预约 -->
<subscribe ref="subscribe" @success="tbShopSubscribe" />
<!-- 点餐 -->
<!-- <table-diancan ref="diancan" @close="onDiancanClose"></table-diancan> -->
<!-- 选择人数 -->
@ -216,191 +224,234 @@
ref="refChooseDinersNumber"
:max="selTable.maxCapacity"
@confirm="chooseDinersNumberConfirm"
></choose-diners-number>
/>
</div>
</template>
<script>
import addEara from "./components/addEara";
import addTable from "./components/addTable";
import tableEdit from "./components/table-edit";
import downloadTableCode from "./components/downloadTableCode";
import tableDiancan from "./components/table-diancan.vue";
import $status from "./status.js";
import chooseDinersNumber from "./components/table-diancan-components/choose-diners-number.vue";
import { tbShopInfo } from "@/api/user";
import { hasPermission } from "@/utils/limits.js";
import addEara from './components/addEara'
import addTable from './components/addTable'
import subscribe from './components/subscribe'
import tableEdit from './components/table-edit'
import downloadTableCode from './components/downloadTableCode'
// import tableDiancan from './components/table-diancan.vue'
import chooseDinersNumber from './components/table-diancan-components/choose-diners-number.vue'
import { tbShopInfo } from '@/api/user'
import { hasPermission } from '@/utils/limits.js'
import {
tbShopTableGet,
tbShopAreaGet,
tbShopAreaDelete,
tbShopTableDelete,
tbShopTable,
} from "@/api/table";
import dayjs from "dayjs";
import { downloadFile } from "@/utils/index";
tbShopTable
} from '@/api/table'
export default {
components: {
addEara,
addTable,
subscribe,
downloadTableCode,
tableDiancan,
// tableDiancan,
chooseDinersNumber,
tableEdit,
tableEdit
},
filters: {
formatTime(milliseconds) {
console.log(milliseconds)
if (!milliseconds) {
return ''
}
const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
const hours = Math.floor(
(milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
)
const minutes = Math.floor(
(milliseconds % (1000 * 60 * 60)) / (1000 * 60)
)
return `${days ? days + '天' : ''} ${hours ? hours + '时' : ''} ${
minutes + '分'
}`
}
},
data() {
return {
tabVlaue: "",
tabVlaue: '',
tabs: [],
loading: false,
total: 0,
tableList: [],
status: $status,
selTable: "", //
status: {
pending: { label: '挂单中', type: '#E6A23C' },
cleaning: { label: '待清台', type: '#FAAD14' },
using: { label: '开台中', type: '#FF4D4F' },
idle: { label: '空闲', type: '#3F9EFF' },
paying: { label: '结算中', type: '#E6A23C' },
closed: { label: '关台', type: '#DDDDDD' },
subscribe: { label: '预定', type: '#52C41A ' },
unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
},
selTable: '', //
areaMap: {},
shopInfo: {},
timer: null,
};
timer: null
}
},
beforeDestroy() {
this.clearTimer();
console.log("beforeDestroy");
this.clearTimer()
console.log('beforeDestroy')
},
mounted() {
this.clearTimer();
this.setTimter(60);
this.tbShopAreaGet();
this.getShopInfo();
},
filters: {
formatTime(milliseconds) {
console.log(milliseconds);
if (!milliseconds) {
return "";
}
const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor(
(milliseconds % (1000 * 60 * 60)) / (1000 * 60)
);
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${
minutes + "分"
}`;
},
this.clearTimer()
this.setTimter(60)
this.tbShopAreaGet()
this.getShopInfo()
},
methods: {
/**
* 下载店铺码
*/
async downloadShopCode() {
try {
const link = document.createElement("a");
link.href = this.shopInfo.smallQrcode;
const fileName = this.shopInfo.shopName +"店铺码"+ ".png";
const link = document.createElement('a')
link.href = this.shopInfo.smallQrcode
const fileName = this.shopInfo.shopName + '店铺码' + '.png'
console.log(fileName)
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
this.$message.success("下载成功");
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
this.$message.success('下载成功')
} catch (error) {
console.log(error);
console.log(error)
}
},
/**
* 清除定时器
*/
clearTimer() {
console.log("clearTimer");
clearInterval(this.timer);
this.timer = null;
console.log('clearTimer')
clearInterval(this.timer)
this.timer = null
},
/**
* 设置定时器
* @param time
*/
setTimter(time = 60) {
this.timer = setInterval(() => {
const showloading = false;
this.tbShopTableGet(showloading);
}, time * 1000);
const showloading = false
this.tbShopTableGet(showloading)
}, time * 1000)
},
//
/**
* 获取店铺信息
*/
async getShopInfo() {
try {
const shopId = localStorage.getItem("shopId");
const res = await tbShopInfo(shopId);
this.shopInfo = res;
console.log(res);
const shopId = localStorage.getItem('shopId')
const res = await tbShopInfo(shopId)
this.shopInfo = res
console.log(res)
// eslint-disable-next-line no-empty
} catch (error) {}
},
//
/**
* 清台
* @param item
*/
cleanTableHandle(item) {
this.$confirm("确定要清台:" + item.name, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
this.$confirm('确定要清台:' + item.name, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
tbShopTable(
{
...item,
status: "idle",
status: 'idle',
qrcode: item.tableId,
shopId: localStorage.getItem("shopId"),
shopId: localStorage.getItem('shopId')
},
"put"
'put'
).then((res) => {
this.tbShopTableGet();
});
});
this.tbShopTableGet()
})
})
},
/**
* 编辑/删除
* @param command
* @param item
*/
tableComman(command, item) {
if (command == "edit") {
return this.$refs.editTable.show(item);
if (command === 'edit') {
return this.$refs.editTable.show(item)
}
if (command == "del") {
return this.delPop(item);
if (command === 'del') {
return this.delPop(item)
}
},
/**
* 删除
* @param item
*/
delPop(item) {
this.$confirm("是否删除" + item.name + "台桌", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
this.$confirm('是否删除' + item.name + '台桌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.delTableHandle([item.id]);
this.delTableHandle([item.id])
})
.catch(() => {});
.catch(() => {})
},
onDiancanClose() {
this.tbShopTableGet();
this.tbShopTableGet()
},
async diancanShow(item, key) {
if(key=='isPayOrder'){
const canShoukuan=await hasPermission('允许收款')
if(!canShoukuan){
return
if (key === 'isPayOrder') {
const canShoukuan = await hasPermission('允许收款')
if (!canShoukuan) {
return
}
}
const canXiadan = await hasPermission('允许下单')
if (!canXiadan) {
return
}
const canXiadan=await hasPermission('允许下单')
if(!canXiadan){
return
if (key === 'subscribe') {
this.$refs.subscribe.show()
return
}
//key isAddGoods
//key isPayOrder
this.selTable = item;
// key isAddGoods
// key isPayOrder
this.selTable = item
if (this.shopInfo.isTableFee) {
//
this.toInstead({ num: 0, key });
//
this.toInstead({ num: 0, key })
// this.$refs.diancan.open(item, key, '');
return;
return
}
const num = item.useNum || 0;
const num = item.useNum || 0
if (item.useNum <= 0) {
return this.$refs.refChooseDinersNumber.open();
return this.$refs.refChooseDinersNumber.open()
}
this.toInstead({ num: num, key });
this.toInstead({ num: num, key })
// this.$refs.diancan.open(item, key, num);
},
toInstead(query) {
this.$router.push({
path: "/tool/Instead/index",
path: '/tool/Instead/index',
query: {
table_name: this.selTable.name,
tableId: this.selTable.tableId,
@ -408,45 +459,51 @@ export default {
maxCapacity: this.selTable.maxCapacity,
masterId: this.selTable.masterId,
orderId: this.selTable.orderId,
...query,
},
});
...query
}
})
},
chooseDinersNumberConfirm(num) {
this.toInstead({ num: num });
this.toInstead({ num: num })
// this.$refs.diancan.open(this.selTable, undefined, num);
},
tabClick() {
this.tbShopTableGet();
this.tbShopTableGet()
},
//
/**
* 删除桌台
* @param ids
*/
async delTableHandle(ids) {
try {
await tbShopTableDelete(ids);
this.tbShopTableGet();
await tbShopTableDelete(ids)
this.tbShopTableGet()
} catch (error) {
console.log(error);
console.log(error)
}
},
//
/**
* 删除区域
* @param ids
*/
async delHandle(ids) {
try {
await tbShopAreaDelete(ids);
this.tabVlaue = "";
this.tbShopAreaGet();
await tbShopAreaDelete(ids)
this.tabVlaue = ''
this.tbShopAreaGet()
} catch (error) {
console.log(error);
console.log(error)
}
},
//
async tbShopTableGet(showloading = true) {
this.loading = showloading;
this.loading = showloading
try {
const { content, total } = await tbShopTableGet({
shopId: localStorage.getItem("shopId"),
areaId: this.tabVlaue,
});
this.tableList = content;
shopId: localStorage.getItem('shopId'),
areaId: this.tabVlaue
})
this.tableList = content
// this.tableList = content.sort((a,b)=>{
// if(a.status=='idle'&&b.status!='idle'){
// return 1
@ -454,33 +511,33 @@ export default {
// return -1
// }
// });
this.total = total;
this.total = total
setTimeout(() => {
this.loading = false;
}, 300);
this.loading = false
}, 300)
} catch (error) {
this.loading = false;
console.log(error);
this.loading = false
console.log(error)
}
},
//
async tbShopAreaGet() {
try {
const { content } = await tbShopAreaGet({
shopId: localStorage.getItem("shopId"),
});
this.tabs = content;
shopId: localStorage.getItem('shopId')
})
this.tabs = content
this.areaMap = content.reduce((prve, cur) => {
prve[cur.id] = cur.name;
return prve;
}, {});
this.tbShopTableGet();
prve[cur.id] = cur.name
return prve
}, {})
this.tbShopTableGet()
} catch (error) {
console.log(error);
console.log(error)
}
},
},
};
}
}
}
</script>
<style>