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

优化更新

Browse Source
This commit is contained in:
gyq
2025-11-11 11:04:26 +08:00
parent 2432c53a73
commit 636fa4e033
32 changed files with 2280 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/tool/table/components/addTable.vue
View File

@@ -1,35 +1,14 @@
<template>
<el-dialog
:title="form.id ? '编辑台桌' : '添加台桌'"
v-model="dialogVisible"
@open="tbShopAreaGet"
@close="reset"
>
<el-form
ref="refForm"
:model="form"
:rules="rules"
label-width="120px"
label-position="left"
>
<el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" v-model="dialogVisible" @open="tbShopAreaGet" @close="reset">
<el-form ref="refForm" :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-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="台桌状态" prop="status" v-if="form.id">
<el-select v-model="form.status" placeholder="请选择台桌状态">
<el-option
:label="item.label"
:value="item.value"
v-for="item in statusList"
:key="item.value"
></el-option>
<el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="台桌标识" prop="sign" v-if="!form.id">
@@ -41,29 +20,18 @@
<div class="u-flex u-m-l-30">
<div class="u-flex">
<div class="u-m-r-4">起始</div>
<el-input
v-model="form.start"
style="width: 57px"
placeholder="请输入起始值"
></el-input>
<el-input v-model="form.start" style="width: 57px" placeholder="请输入起始值"></el-input>
</div>
<div
style="
<div style="
background-color: #d9d9d9;
height: 1px;
width: 32px;
border-radius: 1px;
"
class="u-m-l-16 u-m-r-16"
></div>
" class="u-m-l-16 u-m-r-16"></div>
<div class="u-flex">
<span class="u-m-r-4">结束</span>
<el-input
v-model="form.end"
style="width: 57px"
placeholder="请输入结束值"
></el-input>
<el-input v-model="form.end" style="width: 57px" placeholder="请输入结束值"></el-input>
</div>
</div>
</div>
@@ -72,31 +40,19 @@
<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-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="清台管理">
<!-- <el-form-item label="清台管理">
<el-radio-group v-model="form.autoClear">
<el-radio-button :value="0">手动清台</el-radio-button>
<el-radio-button :value="1">自动清台</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<el-form-item v-if="form.id" label="网络预定开关">
<el-switch
v-model="form.isPredate"
:active-value="1"
:inactive-value="2"
></el-switch>
<el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
</el-form-item>
<el-form-item v-if="form.id" label="网络预定台桌支付金额">
<el-input-number
v-model="form.predateAmount"
:min="0"
controls-position="right"
></el-input-number>
<el-input-number v-model="form.predateAmount" :min="0" controls-position="right"></el-input-number>
</el-form-item>
</el-form>
<template #footer>

113
src/views/tool/table/components/clearTabDialog.vue Normal file
View File

@@ -0,0 +1,113 @@
<!-- 统一清台设置 -->
<template>
<el-dialog title="清台设置" width="600px" v-model="visible">
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="120">
<el-form-item label="清台方式">
<el-radio-group v-model="form.autoClear">
<el-radio label="手动清台" :value="0"></el-radio>
<el-radio label="自动清台" :value="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="自动清台时间" prop="autoClearTime" v-if="form.autoClear === 1">
<div class="column">
<div>
<el-input v-model="form.autoClearTime" style="width: 220px;" placeholder="请输入"
@input="e => form.autoClearTime = filterNumberInput(e, 0)">
<template #append>分钟后自动清台</template>
</el-input>
</div>
<div class="tips">输入0时，默认支付后既自动清台</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="submitHandle" :loading="confirmLoading">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import tableApi from "@/api/account/table";
import { filterNumberInput } from '@/utils'
const visible = ref(false)
const formRef = ref(null)
const form = ref({
autoClear: 1, // 自动清台 0手动 1自动
autoClearTime: 0, // 自动清台时间 单位分钟 默认10
})
const rules = ref({
autoClearTime: [
{
validator: (rule, value, callback) => {
if (form.value.autoClearTime === '') {
callback(new Error('请输入自动清台时间'))
} else {
callback()
}
},
trigger: 'blur'
}
]
})
// 提交配置
const confirmLoading = ref(false)
function submitHandle() {
formRef.value.validate(async vaild => {
try {
if (vaild) {
confirmLoading.value = true
await tableApi.shopTabBatch(form.value)
visible.value = false
ElNotification({
title: '注意',
message: '设置成功',
type: 'success'
})
}
} catch (error) {
console.log(error);
}
setTimeout(() => {
confirmLoading.value = false
}, 500);
})
}
// 获取清台配置信息
async function tableCurrentStateAjax() {
try {
const res = await tableApi.tableCurrentState()
form.value.autoClear = res.autoClear
form.value.autoClearTime = res.autoClearTime || 0
} catch (error) {
console.log(error);
}
}
function show() {
visible.value = true
tableCurrentStateAjax()
}
defineExpose({
show
})
</script>
<style scoped lang="scss">
.column {
display: flex;
flex-direction: column;
.tips {
color: #999;
}
}
</style>

158
src/views/tool/table/index.vue
View File

@@ -2,12 +2,7 @@
<div class="app-container">
<el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick">
<el-tab-pane label="全部" name="" />
<el-tab-pane
v-for="item in tableArea.tabs"
:key="item.id"
:label="item.name"
:name="`${item.id}`"
>
<el-tab-pane v-for="item in tableArea.tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
<template #label>
<div class="">
<span>
@@ -31,6 +26,7 @@
<div class="">
<el-button icon="plus" @click="addEaraShow()">添加区域</el-button>
<el-button type="primary" icon="plus" @click="addTableShow()">添加台桌</el-button>
<el-button type="danger" icon="Setting" @click="clearTabDialogRef.show()">清台设置</el-button>
<el-button type="primary" icon="download" @click="showDownloadTableCode">
下载桌台码
</el-button>
@@ -41,12 +37,9 @@
<div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
<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 class="dot" :style="{
backgroundColor: status[key] ? status[key].type : '',
}" />
{{ item.label }}
</div>
</div>
@@ -54,14 +47,9 @@
<!-- 列表 -->
<div class="head-container">
<div v-loading="loading" class="table_list">
<div
v-for="item in tableList"
:key="item.id"
class="item"
:style="{
'background-color': status[item.status] ? status[item.status].type : '',
}"
>
<div v-for="item in tableList" :key="item.id" class="item" :style="{
'background-color': status[item.status] ? 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">
@@ -80,10 +68,7 @@
<el-dropdown-item command="edit">
<span>编辑</span>
</el-dropdown-item>
<el-dropdown-item
command="bindTableCode"
v-if="envName !== 'production'"
>
<el-dropdown-item command="bindTableCode" v-if="envName !== 'production'">
<span>绑定桌码</span>
</el-dropdown-item>
<el-dropdown-item command="del">
@@ -102,20 +87,14 @@
item.bookingInfo.bookingPerson
}}「{{ item.bookingInfo.gender == 1 ? "先生" : "女士" }}」
</span>
<div
class="state"
style="
<div class="state" style="
font-size: 12px;
color: #666;
display: flex;
align-items: center;
"
>
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
/>
">
<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png"
alt="" />
{{ item.bookingInfo.bookingTime.substring(11, 19) }}
</div>
@@ -128,71 +107,47 @@
</div>
<div v-else class="u-font-18 font-600 total-price">
<span
v-if="item.status == 'using'"
class="cur-pointer"
@click="diancanShow(item, 'isAddGoods')"
>
<span v-if="item.status == 'using'" class="cur-pointer" @click="diancanShow(item, 'isAddGoods')">
¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
</span>
<!-- <span v-else class="color-fff">|</span> -->
</div>
<div class="row btn-group" style="margin-top: 10px">
<template v-if="item.status == 'subscribe'">
<el-button
type="success"
:disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, -1)"
>
<el-button type="success" :disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, -1)">
取消预约
</el-button>
</template>
<template
v-if="
item.status == 'subscribe' &&
item.bookingInfo &&
item.bookingInfo.status == 20
"
>
<el-button
type="success"
:disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, 10)"
>
<template v-if="
item.status == 'subscribe' &&
item.bookingInfo &&
item.bookingInfo.status == 20
">
<el-button type="success" :disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, 10)">
到店
</el-button>
</template>
<template
v-if="
item.status == 'idle' ||
(item.status == 'subscribe' &&
item.bookingInfo &&
item.bookingInfo.status == 10)
"
>
<el-button
type="primary"
:disabled="!item.tableCode || item.status === 'closed'"
@click="diancanShow(item)"
>
<template v-if="
item.status == 'idle' ||
(item.status == 'subscribe' &&
item.bookingInfo &&
item.bookingInfo.status == 10)
">
<el-button type="primary" :disabled="!item.tableCode || item.status === 'closed'"
@click="diancanShow(item)">
点餐
</el-button>
</template>
<template
v-else-if="item.status != 'idle' && item.status != 'subscribe'"
>
<template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
<template v-if="item.status == 'using'">
<el-button
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')"
>
<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 type="danger" :disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')">
结账
</el-button>
</template>
@@ -200,13 +155,10 @@
<el-button type="info" disabled>已关台</el-button>
</template>
<template v-else-if="item.status == 'cleaning'">
<el-button
type="info"
:style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}"
>
<el-button type="info" :style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}">
清理中
</el-button>
</template>
@@ -216,26 +168,17 @@
</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-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=""
/>
<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 v-if="item.status == 'using'" class="u-flex">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/shalou.png"
alt=""
/>
<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">
{{ formatTime(item.durationTime) }}
</span>
@@ -256,6 +199,8 @@
<downloadTableCode ref="refDownloadTableCode" />
<!-- 绑定桌码 -->
<bindCode ref="refBindCode" @refresh="tableInit" />
<!-- 清台设置 -->
<clearTabDialog ref="clearTabDialogRef" />
</div>
</template>
@@ -270,6 +215,9 @@ import addEara from "./components/addEara.vue";
import addTable from "./components/addTable.vue";
import bindCode from "./components/bind-table-code.vue";
import downloadTableCode from "./components/downloadTableCode.vue";
import clearTabDialog from "./components/clearTabDialog.vue";
const clearTabDialogRef = ref(null)
const envName = import.meta.env.VITE_APP_NAME;
@@ -298,7 +246,7 @@ function formatTime(milliseconds) {
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
}
function downloadTableCpde() {}
function downloadTableCpde() { }
function downloadShopCpde() {
try {
const link = document.createElement("a");
@@ -341,7 +289,7 @@ function tableComman(command, item) {
ElMessage.success("删除成功");
tableInit();
})
.catch(() => {});
.catch(() => { });
return;
}
}
@@ -417,7 +365,7 @@ function init() {
areainit();
tableInit();
}
onMounted(() => {});
onMounted(() => { });
</script>
<style lang="scss" scoped>