增加websocket连接，增加台桌列表页面，增加用户列表页面
This commit is contained in:
parent
e7a0d72d91
commit
de74cad167
|
|
@ -13,7 +13,7 @@ VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 正式
|
|||
# VITE_APP_API_URL=http://localhost:8989 # 本地
|
||||
|
||||
# WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
|
||||
VITE_APP_WS_ENDPOINT=
|
||||
VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
|
||||
|
||||
# 启用 Mock 服务
|
||||
VITE_MOCK_DEV_SERVER=false
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
订单，支付相关：<https://tapi.cashier.sxczgkj.cn/order/>
|
||||
商品，耗材相关：<https://tapi.cashier.sxczgkj.cn/product/>
|
||||
系统相关：<https://tapi.cashier.sxczgkj.cn/system/>
|
||||
购物车websocket
|
||||
<https://apifox.com/apidoc/shared-2c47d665-b476-409c-9cb5-0e68a69b0292>
|
||||
|
||||
## 项目特色
|
||||
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
"path-to-regexp": "^8.2.0",
|
||||
"pinia": "^2.3.1",
|
||||
"qs": "^6.14.0",
|
||||
"sockjs-client": "^1.6.1",
|
||||
"sortablejs": "^1.15.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
import request from "@/utils/request";
|
||||
import { Account_BaseUrl } from "@/api/config";
|
||||
const baseURL = Account_BaseUrl + "/admin/activate";
|
||||
const API = {
|
||||
|
||||
getList() {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
edit(data: editRequest) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
},
|
||||
add(data: addRequest) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
}
|
||||
export default API;
|
||||
|
||||
export interface addRequest {
|
||||
/**
|
||||
* 充值金额
|
||||
*/
|
||||
amount?: number;
|
||||
/**
|
||||
* 优惠卷id
|
||||
*/
|
||||
couponId?: number;
|
||||
/**
|
||||
* 赠送金额
|
||||
*/
|
||||
giftAmount?: number;
|
||||
/**
|
||||
* 赠送积分
|
||||
*/
|
||||
giftPoints?: number;
|
||||
/**
|
||||
* 是否赠送优惠卷 0否 1是
|
||||
*/
|
||||
isGiftCoupon?: number;
|
||||
/**
|
||||
* 优惠卷数量
|
||||
*/
|
||||
num?: number;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
export interface editRequest {
|
||||
/**
|
||||
* 充值金额
|
||||
*/
|
||||
amount: number;
|
||||
/**
|
||||
* 优惠卷id
|
||||
*/
|
||||
couponId?: number;
|
||||
/**
|
||||
* 赠送金额
|
||||
*/
|
||||
giftAmount?: number;
|
||||
/**
|
||||
* 赠送积分
|
||||
*/
|
||||
giftPoints?: number;
|
||||
id: number;
|
||||
/**
|
||||
* 是否赠送优惠卷 0否 1是
|
||||
*/
|
||||
isGiftCoupon?: number;
|
||||
/**
|
||||
* 优惠卷数量
|
||||
*/
|
||||
num?: number;
|
||||
shopId?: number;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import request from "@/utils/request";
|
||||
import { Account_BaseUrl } from "@/api/config";
|
||||
const baseURL = Account_BaseUrl + "/admin";
|
||||
const ShopStaffApi = {
|
||||
// 获取店铺权限列表
|
||||
getshopPermission() {
|
||||
return request<any>({
|
||||
url: `${baseURL}/shopPermission`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
// 获取员工对应的权限id
|
||||
getPermission(id: number | string) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/shopStaff/permission`,
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default ShopStaffApi;
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import request from "@/utils/request";
|
||||
import { Account_BaseUrl } from "@/api/config";
|
||||
const baseURL = Account_BaseUrl + "/admin/shopTable";
|
||||
const API = {
|
||||
// 批量生成桌码
|
||||
fasetAdd(num: number) {
|
||||
return request({
|
||||
url: `${baseURL}/code`,
|
||||
method: "post",
|
||||
data: { num },
|
||||
});
|
||||
},
|
||||
getList(data: getListRequest) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
params: data
|
||||
});
|
||||
},
|
||||
edit(data: editRequest) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
},
|
||||
add(data: addRequest) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
},
|
||||
delete(id: number | string) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "post",
|
||||
data: { id },
|
||||
});
|
||||
}
|
||||
}
|
||||
export default API;
|
||||
/**
|
||||
* ShopTableAddDTO
|
||||
*/
|
||||
export interface addRequest {
|
||||
/**
|
||||
* 区域id
|
||||
*/
|
||||
areaId?: number | null;
|
||||
/**
|
||||
* 是否自动清台
|
||||
*/
|
||||
autoClear?: number | null;
|
||||
/**
|
||||
* 客座数
|
||||
*/
|
||||
capacity: number | null;
|
||||
/**
|
||||
* 结束数字
|
||||
*/
|
||||
end: number | null;
|
||||
/**
|
||||
* 台桌前缀
|
||||
*/
|
||||
sign: null | string;
|
||||
/**
|
||||
* 起始数字
|
||||
*/
|
||||
start: number | null;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* ShopTableDTO
|
||||
*/
|
||||
export interface editRequest {
|
||||
/**
|
||||
* 区域Id
|
||||
*/
|
||||
areaId?: number | null;
|
||||
/**
|
||||
* 自动清台 0手动 1自动
|
||||
*/
|
||||
autoClear?: number | null;
|
||||
/**
|
||||
* 自增id
|
||||
*/
|
||||
id: number | null;
|
||||
/**
|
||||
* 是否接受网络预定
|
||||
*/
|
||||
isPredate?: number | null;
|
||||
/**
|
||||
* 客座数,允许的客座数量
|
||||
*/
|
||||
maxCapacity?: number | null;
|
||||
name?: null | string;
|
||||
/**
|
||||
* 网络预定台桌支付金额
|
||||
*/
|
||||
predateAmount?: number | null;
|
||||
/**
|
||||
* 二维码
|
||||
*/
|
||||
qrcode?: null | string;
|
||||
/**
|
||||
* 台桌排序
|
||||
*/
|
||||
sort?: number | null;
|
||||
/**
|
||||
* idle-空闲 using-使用中 subscribe预定，closed--关台， opening 开台中，cleaning 台桌清理中
|
||||
*/
|
||||
status?: null | string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
export interface getListRequest {
|
||||
/**
|
||||
* 区域id
|
||||
*/
|
||||
areaId?: number;
|
||||
/**
|
||||
* 桌码
|
||||
*/
|
||||
tableCode?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
|
@ -321,7 +321,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
},
|
||||
{
|
||||
path: "table",
|
||||
component: () => import("@/views/tool/table.vue"),
|
||||
component: () => import("@/views/tool/table/index.vue"),
|
||||
name: "table",
|
||||
meta: {
|
||||
title: "台桌管理",
|
||||
|
|
@ -473,7 +473,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
},
|
||||
{
|
||||
path: "active",
|
||||
component: () => import("@/views/user/active.vue"),
|
||||
component: () => import("@/views/user/active/index.vue"),
|
||||
name: "userActive",
|
||||
meta: {
|
||||
title: "活动管理",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import { Client } from "@stomp/stompjs";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
class WebSocketManager {
|
||||
private client: Client | null = null;
|
||||
private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
|
||||
private reconnectAttempts = 0;
|
||||
private maxReconnectAttempts = 3; // 自定义最大重试次数
|
||||
private reconnectDelay = 5000; // 重试延迟（单位：毫秒）
|
||||
|
||||
// 初始化 WebSocket 客户端
|
||||
setupWebSocket() {
|
||||
const endpoint = import.meta.env.VITE_APP_WS_ENDPOINT;
|
||||
|
||||
// 如果没有配置 WebSocket 端点或显式关闭，直接返回
|
||||
if (!endpoint) {
|
||||
console.log("WebSocket 已被禁用，如需打开请在配置文件中配置 VITE_APP_WS_ENDPOINT");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.client && this.client.connected) {
|
||||
console.log("客户端已存在并且连接正常");
|
||||
return this.client;
|
||||
}
|
||||
|
||||
this.client = new Client({
|
||||
brokerURL: endpoint,
|
||||
connectHeaders: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
heartbeatIncoming: 30000,
|
||||
heartbeatOutgoing: 30000,
|
||||
reconnectDelay: 0, // 设置为 0 禁用重连
|
||||
onConnect: () => {
|
||||
console.log(`连接到 WebSocket 服务器: ${endpoint}`);
|
||||
this.reconnectAttempts = 0; // 重置重连计数
|
||||
this.messageHandlers.forEach((handlers, topic) => {
|
||||
handlers.forEach((handler) => {
|
||||
this.subscribeToTopic(topic, handler);
|
||||
});
|
||||
});
|
||||
},
|
||||
onStompError: (frame) => {
|
||||
console.error(`连接错误: ${frame.headers["message"]}`);
|
||||
console.error(`错误详情: ${frame.body}`);
|
||||
},
|
||||
onDisconnect: () => {
|
||||
console.log(`WebSocket 连接已断开: ${endpoint}`);
|
||||
this.reconnectAttempts++;
|
||||
if (this.reconnectAttempts < this.maxReconnectAttempts) {
|
||||
console.log(`正在尝试重连... 尝试次数: ${this.reconnectAttempts}`);
|
||||
} else {
|
||||
console.log("重连次数已达上限，停止重连");
|
||||
this.client?.deactivate();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
this.client.activate();
|
||||
}
|
||||
|
||||
// 订阅主题
|
||||
public subscribeToTopic(topic: string, onMessage: (message: string) => void) {
|
||||
console.log(`正在订阅主题: ${topic}`);
|
||||
if (!this.client || !this.client.connected) {
|
||||
this.setupWebSocket();
|
||||
}
|
||||
|
||||
if (this.messageHandlers.has(topic)) {
|
||||
this.messageHandlers.get(topic)?.push(onMessage);
|
||||
} else {
|
||||
this.messageHandlers.set(topic, [onMessage]);
|
||||
}
|
||||
|
||||
if (this.client?.connected) {
|
||||
this.client.subscribe(topic, (message) => {
|
||||
const handlers = this.messageHandlers.get(topic);
|
||||
handlers?.forEach((handler) => handler(message.body));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 断开 WebSocket 连接
|
||||
public disconnect() {
|
||||
if (this.client) {
|
||||
console.log("断开 WebSocket 连接");
|
||||
this.client.deactivate();
|
||||
this.client = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new WebSocketManager();
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { Client } from "@stomp/stompjs";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
class WebSocketManager {
|
||||
private client: Client | null = null;
|
||||
private client: WebSocket | null = null;
|
||||
private connected: boolean = false;
|
||||
private onMessage: (message: any) => void = function () { };
|
||||
private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
|
||||
private type: string = 'manage';
|
||||
private reconnectAttempts = 0;
|
||||
private maxReconnectAttempts = 3; // 自定义最大重试次数
|
||||
private reconnectDelay = 5000; // 重试延迟（单位：毫秒）
|
||||
|
|
@ -18,73 +19,52 @@ class WebSocketManager {
|
|||
return;
|
||||
}
|
||||
|
||||
if (this.client && this.client.connected) {
|
||||
if (this.client && this.connected) {
|
||||
console.log("客户端已存在并且连接正常");
|
||||
return this.client;
|
||||
}
|
||||
|
||||
this.client = new Client({
|
||||
brokerURL: endpoint,
|
||||
connectHeaders: {
|
||||
Authorization: getToken(),
|
||||
},
|
||||
heartbeatIncoming: 30000,
|
||||
heartbeatOutgoing: 30000,
|
||||
reconnectDelay: 0, // 设置为 0 禁用重连
|
||||
onConnect: () => {
|
||||
console.log(`连接到 WebSocket 服务器: ${endpoint}`);
|
||||
this.reconnectAttempts = 0; // 重置重连计数
|
||||
this.messageHandlers.forEach((handlers, topic) => {
|
||||
handlers.forEach((handler) => {
|
||||
this.subscribeToTopic(topic, handler);
|
||||
});
|
||||
});
|
||||
},
|
||||
onStompError: (frame) => {
|
||||
console.error(`连接错误: ${frame.headers["message"]}`);
|
||||
console.error(`错误详情: ${frame.body}`);
|
||||
},
|
||||
onDisconnect: () => {
|
||||
console.log(`WebSocket 连接已断开: ${endpoint}`);
|
||||
this.reconnectAttempts++;
|
||||
if (this.reconnectAttempts < this.maxReconnectAttempts) {
|
||||
console.log(`正在尝试重连... 尝试次数: ${this.reconnectAttempts}`);
|
||||
} else {
|
||||
console.log("重连次数已达上限，停止重连");
|
||||
this.client?.deactivate();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
this.client.activate();
|
||||
this.client = new WebSocket(endpoint)
|
||||
this.client.onopen = () => {
|
||||
this.connected = true;
|
||||
console.log("WebSocket 连接已建立");
|
||||
this.sendMessage('test')
|
||||
};
|
||||
this.client.onclose = () => {
|
||||
this.connected = false;
|
||||
console.log("WebSocket 连接已断开");
|
||||
};
|
||||
this.client.onerror = (error) => {
|
||||
console.error("WebSocket 发生错误:", error);
|
||||
};
|
||||
this.client.onmessage = (event) => {
|
||||
const message = event.data;
|
||||
this.getMessage(message)
|
||||
};
|
||||
}
|
||||
private getMessage(message: any) {
|
||||
console.log("收到消息:", message);
|
||||
}
|
||||
|
||||
// 订阅主题
|
||||
public subscribeToTopic(topic: string, onMessage: (message: string) => void) {
|
||||
console.log(`正在订阅主题: ${topic}`);
|
||||
if (!this.client || !this.client.connected) {
|
||||
if (!this.client || !this.connected) {
|
||||
this.setupWebSocket();
|
||||
}
|
||||
|
||||
if (this.messageHandlers.has(topic)) {
|
||||
this.messageHandlers.get(topic)?.push(onMessage);
|
||||
} else {
|
||||
this.messageHandlers.set(topic, [onMessage]);
|
||||
}
|
||||
|
||||
if (this.client?.connected) {
|
||||
this.client.subscribe(topic, (message) => {
|
||||
const handlers = this.messageHandlers.get(topic);
|
||||
handlers?.forEach((handler) => handler(message.body));
|
||||
});
|
||||
if (this.connected) {
|
||||
this.onMessage = onMessage;
|
||||
}
|
||||
}
|
||||
public sendMessage(message: any) {
|
||||
if (this.client) {
|
||||
this.client.send(message);
|
||||
}
|
||||
}
|
||||
|
||||
// 断开 WebSocket 连接
|
||||
public disconnect() {
|
||||
if (this.client) {
|
||||
console.log("断开 WebSocket 连接");
|
||||
this.client.deactivate();
|
||||
this.client.close();
|
||||
this.client = null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<template>11</template>
|
||||
|
|
@ -43,9 +43,8 @@
|
|||
|
||||
<!-- 新增 -->
|
||||
<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
<template #permission="scope">
|
||||
<selectPermission></selectPermission>
|
||||
</template>
|
||||
</page-modal>
|
||||
|
||||
|
|
@ -55,9 +54,8 @@
|
|||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
<template #permission="scope">
|
||||
<selectPermission></selectPermission>
|
||||
</template>
|
||||
</page-modal>
|
||||
</div>
|
||||
|
|
@ -73,7 +71,9 @@ import searchConfig from "./config/search";
|
|||
import { returnOptionsLabel } from "./config/config";
|
||||
import RoleApi, { type SysRole } from "@/api/account/role";
|
||||
import ShopStaffApi from "@/api/account/shopStaff";
|
||||
|
||||
import permissionApi from "@/api/account/permission";
|
||||
import selectPermission from "./components/select-permission.vue";
|
||||
permissionApi.getshopPermission();
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">11</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
<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="请选择区域"
|
||||
@change="selectChange($event, 'form' , 'areaId')"
|
||||
>
|
||||
<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.name"
|
||||
:value="item.value"
|
||||
v-for="item in status"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="台桌标识" prop="sign">
|
||||
<div class="u-flex">
|
||||
<div class="u-flex" style="width: 57px;">
|
||||
<el-input
|
||||
v-model="form.sign"
|
||||
placeholder="A"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
background-color: #D9D9D9;
|
||||
height: 1px;
|
||||
width: 32px;
|
||||
border-radius: 1px;
|
||||
"
|
||||
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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="客座数">
|
||||
<el-input-number
|
||||
v-model="form.capacity"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="清台管理">
|
||||
<el-radio-group v-model="form.autoClear">
|
||||
<el-radio-button :label="0">手动清台</el-radio-button>
|
||||
<el-radio-button :label="1">自动清台</el-radio-button>
|
||||
</el-radio-group>
|
||||
</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 ,$fastCreateTable} from "@/api/table";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
resetForm: "",
|
||||
loading: false,
|
||||
status: [
|
||||
{ value: "pending", name: "挂单中" },
|
||||
{ value: "using", name: "开台中" },
|
||||
{ value: "paying", name: "结算中" },
|
||||
{ value: "idle", name: "空闲" },
|
||||
{ value: "subscribe", name: "预定" },
|
||||
{ value: "closed", name: "关台" },
|
||||
// {value:'opening',name:'开台中'},
|
||||
{ value: "cleaning", name: "台桌清理中" },
|
||||
],
|
||||
form: {
|
||||
id: "",
|
||||
areaId: "",
|
||||
sign:'',
|
||||
start:1,
|
||||
end:10,
|
||||
capacity: 0,
|
||||
isPredate: 1,
|
||||
type: 2,
|
||||
perhour: 0,
|
||||
amount: 0,
|
||||
autoClear: 1,
|
||||
},
|
||||
rules: {
|
||||
areaId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择区域",
|
||||
trigger: ["blur","change"],
|
||||
},
|
||||
],
|
||||
sign: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入台桌标识",
|
||||
trigger: ["blur","change"],
|
||||
},
|
||||
],
|
||||
},
|
||||
areaList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form };
|
||||
},
|
||||
methods: {
|
||||
//解决selectc值改变后未验证问题
|
||||
selectChange($event, ref, type) {
|
||||
this.$refs[ref][0].validateField(type)
|
||||
},
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
try {
|
||||
let 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: `${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>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<div class="select_desk">
|
||||
<el-dialog width="410px" title="就餐人数" :visible.sync="show">
|
||||
<div class="select_desk_dialog u-p-b-20">
|
||||
<key-board
|
||||
isCanEmpty
|
||||
v-model="number"
|
||||
@clear="clear"
|
||||
:max="max"
|
||||
:maxTips=" '最多'+max+'位'"
|
||||
>
|
||||
<div slot="clear">清空</div>
|
||||
<div slot="input" class="u-p-l-20 u-p-r-20 u-flex w-full">
|
||||
<el-input
|
||||
placeholder="请输入就餐人数"
|
||||
v-model="number"
|
||||
@input="inputNumber"
|
||||
@change="inputChange"
|
||||
type="number"
|
||||
>
|
||||
<template slot="append">位</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</key-board>
|
||||
<div class="confirm_btns">
|
||||
<el-button size="medium" @click="close">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="confirm"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import keyBoard from "../keyboard.vue";
|
||||
export default {
|
||||
components: { keyBoard },
|
||||
props:{
|
||||
max:{
|
||||
type:Number,
|
||||
default:99
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: "",
|
||||
show: false,
|
||||
hasOpen: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number(newval) {
|
||||
if (newval >this.max) {
|
||||
this.number = this.max;
|
||||
this.$message("最多只能选择"+this.max+"位就餐人数");
|
||||
}
|
||||
// 使用正则表达式匹配正整数
|
||||
const regex = /^[1-9]\d*$/;
|
||||
// 如果输入的值不是正整数，则将其设置为上一个有效值
|
||||
if (!regex.test(newval)) {
|
||||
this.number = newval.substring(0, newval.length - 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
inputNumber(e) {},
|
||||
inputChange(e) {},
|
||||
clear(e) {
|
||||
console.log(e);
|
||||
this.number = "";
|
||||
},
|
||||
confirm() {
|
||||
if (this.number >this.max) {
|
||||
return this.$message("最多只能选择"+this.max+"位就餐人数");
|
||||
}
|
||||
if (!this.number) {
|
||||
return this.$message("请选择就餐人数");
|
||||
}
|
||||
console.log(this.number)
|
||||
this.$emit("confirm", this.number);
|
||||
this.close();
|
||||
},
|
||||
open(number) {
|
||||
this.number = number || "";
|
||||
this.show = true;
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.number = "";
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-button {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .el-button--success {
|
||||
border-color: #22bf64;
|
||||
background-color: #22bf64;
|
||||
}
|
||||
.select_desk .btn {
|
||||
height: 34px;
|
||||
}
|
||||
.tags {
|
||||
font-size: 16px;
|
||||
&.using {
|
||||
color: rgb(234, 64, 37);
|
||||
}
|
||||
&.wait {
|
||||
color: rgb(252, 236, 79);
|
||||
}
|
||||
&.idle {
|
||||
color: rgb(137, 234, 71);
|
||||
}
|
||||
&.closed {
|
||||
color: rgb(221, 221, 221);
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
::v-deep .inputs .el-input__inner {
|
||||
border-color: transparent !important;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.select_desk .select_desk_dialog {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav {
|
||||
width: 286px;
|
||||
height: 38px;
|
||||
background: #dcf0e8;
|
||||
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .li,
|
||||
.select_desk .select_desk_dialog .nav {
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .li {
|
||||
width: 140px;
|
||||
height: 34px;
|
||||
color: #0fc161;
|
||||
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .lion {
|
||||
background: #0fc161;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .inputs {
|
||||
width: 370px;
|
||||
line-height: 54px;
|
||||
margin-top: 24px;
|
||||
height: 54px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .inputs .close {
|
||||
color: #aaa;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li {
|
||||
height: 60px;
|
||||
width: 33.333%;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
border-left: 1px solid #dcdfe6;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li:hover {
|
||||
background: #dcdfe6;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li .icon {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .confirm {
|
||||
height: 140px;
|
||||
background: #ff9f2e;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .confirm:hover {
|
||||
background: #f88502;
|
||||
}
|
||||
|
||||
.confirm_btns {
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.confirm_btns .el-button {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<el-dialog title="选择用户" width="850px" :visible.sync="show">
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :model="query" inline>
|
||||
<el-form-item label="">
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
placeholder="请输入昵称或手机号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否为会员">
|
||||
<el-select v-model="query.isVip" placeholder="是否是会员">
|
||||
<el-option value="" label="全部"></el-option>
|
||||
<el-option :value="1" label="是"></el-option>
|
||||
<el-option :value="0" label="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<div class="flex gap-20">
|
||||
<el-button type="primary" @click="getTableData" size="medium"
|
||||
>搜索</el-button
|
||||
>
|
||||
<!-- <el-button @click="resetHandle" size="medium">重置</el-button> -->
|
||||
<el-button @click="noChooseUser" size="medium"
|
||||
>不选择用户</el-button
|
||||
>
|
||||
<!-- <el-button @click="resetHandle" size="medium">新建用户</el-button> -->
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addActive.show()">
|
||||
添加活动
|
||||
</el-button>
|
||||
</div> -->
|
||||
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading" @cell-click="cellClick">
|
||||
<el-table-column label="ID" prop="id"></el-table-column>
|
||||
<el-table-column label="用户" prop="headImg" width="200px">
|
||||
<template v-slot="scope">
|
||||
<div class="user_info">
|
||||
<el-image
|
||||
:src="scope.row.headImg"
|
||||
style="width: 40px; height: 40px; flex-shrink: 0"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-user"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<span class="name">{{ scope.row.nickName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="手机号"
|
||||
prop="telephone"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column label="性别" prop="sex">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="priamry">{{ scope.row.sex || "未知" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="会员" prop="isVip">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="warning" v-if="scope.row.isVip"
|
||||
>会员等级{{ scope.row.isVip }}</el-tag
|
||||
>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="余额" prop="amount"></el-table-column>
|
||||
<el-table-column label="积分" prop="totalScore"></el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="90" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
|
||||
<!-- <el-button type="text" @click="charge(scope.row)">充值</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page + 1"
|
||||
:page-size="tableData.size"
|
||||
@size-change="sizeChange"
|
||||
@current-change="paginationChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
|
||||
import dayjs from "dayjs";
|
||||
let cacheData = {};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
query: {
|
||||
name: "",
|
||||
},
|
||||
shopInfo: {
|
||||
balanceTotal: 0,
|
||||
userTotal: 0,
|
||||
chageTotal: 0,
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
timeFilter(s) {
|
||||
return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
cellClick(user){
|
||||
console.log(user)
|
||||
this.$emit("chooseUser",user)
|
||||
this.close()
|
||||
},
|
||||
noChooseUser(){
|
||||
this.$emit("chooseUser",null)
|
||||
this.close()
|
||||
|
||||
},
|
||||
choose(user) {
|
||||
this.$emit("chooseUser",user)
|
||||
this.close()
|
||||
|
||||
},
|
||||
charge(user) {
|
||||
console.log(user);
|
||||
},
|
||||
close(){
|
||||
this.show = false;
|
||||
},
|
||||
open() {
|
||||
this.getTableData();
|
||||
this.show = true;
|
||||
},
|
||||
toPage(type) {
|
||||
const pages = {
|
||||
charge: "charge_list",
|
||||
cost: "cost_list",
|
||||
};
|
||||
this.$router.push({
|
||||
name: pages[type],
|
||||
});
|
||||
console.log(pages[type]);
|
||||
},
|
||||
// 获取商家用户概述信息
|
||||
async getShopInfo() {
|
||||
try {
|
||||
const res = await queryAllShopInfo(this.query);
|
||||
this.shopInfo = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
sizeChange() {
|
||||
this.tableData.page = 0;
|
||||
this.getTableData();
|
||||
},
|
||||
// 切换状态
|
||||
async statusChange(e, row) {
|
||||
try {
|
||||
this.tableData.loading = true;
|
||||
const data = { ...row };
|
||||
data.status = e;
|
||||
await modityActivate(data);
|
||||
this.getTableData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
this.tableData.loading = false;
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.name = "";
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
try {
|
||||
const res = await queryAllShopUser({
|
||||
...this.query,
|
||||
size: this.tableData.size,
|
||||
page: this.tableData.page + 1,
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.content;
|
||||
this.tableData.total = res.totalElements;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user_info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--small .el-input__inner{
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
::v-deep .image-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 14px;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
.t {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.n {
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gap-20{
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<el-dialog title="下载桌码" width="400px" :visible.sync="dialogVisible" @open="reset">
|
||||
<el-form ref="form" :model="form" label-position="left">
|
||||
<el-form-item label="下载数量">
|
||||
<el-input-number v-model="form.number" :min="1" :max="500"></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 { downloadFile } from "@/utils/index";
|
||||
import { downloadTableCode } from '@/api/table'
|
||||
export default {
|
||||
props: {
|
||||
total: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
form: {
|
||||
number: 1
|
||||
},
|
||||
resetForm: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
async onSubmitHandle() {
|
||||
try {
|
||||
this.loading = true
|
||||
const file = await downloadTableCode({
|
||||
count: this.form.number,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.loading = false
|
||||
this.dialogVisible = false
|
||||
this.$message.success('下载成功')
|
||||
downloadFile(file, "桌码", "zip");
|
||||
} 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>
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
<template>
|
||||
<div class="simple-Keyboard-number">
|
||||
<div class="carts">
|
||||
<div class="box_status">
|
||||
<slot name="input">
|
||||
<span> {{ number }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="number_list_box">
|
||||
<div class="yd-keyboard">
|
||||
<div class="mini-number-box1">
|
||||
<div class="mini-number">
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('1')">1</div>
|
||||
<div class="key" @click="keyboradAdd('2')">2</div>
|
||||
<div class="key" @click="keyboradAdd('3')">3</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('4')">4</div>
|
||||
<div class="key" @click="keyboradAdd('5')">5</div>
|
||||
<div class="key" @click="keyboradAdd('6')">6</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('7')">7</div>
|
||||
<div class="key" @click="keyboradAdd('8')">8</div>
|
||||
<div class="key" @click="keyboradAdd('9')">9</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="clearFunction">
|
||||
<slot name="clear"> </slot>
|
||||
</div>
|
||||
<div class="key" @click="keyboradAdd('0')">0</div>
|
||||
<div
|
||||
class="key"
|
||||
style="font-size: 31px"
|
||||
@click="keyboradReduce"
|
||||
>
|
||||
<svg
|
||||
t="1723453480343"
|
||||
class="icon"
|
||||
viewBox="0 0 1664 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1467"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
|
||||
fill="#333333"
|
||||
p-id="1468"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="showConfirm">
|
||||
<div class="submit" @click="keyboradConfirm">确认</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isCanEmpty: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxTips: {
|
||||
type: String,
|
||||
default: "输入值超范围",
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: Infinity,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newval) {
|
||||
this.number = newval;
|
||||
},
|
||||
number(newval) {
|
||||
this.$emit("input", newval);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clearFunction() {
|
||||
this.$emit("clear", this.number);
|
||||
},
|
||||
keyboradAdd(n) {
|
||||
if (Number(this.number) == 0) {
|
||||
return (this.number = n);
|
||||
}
|
||||
const newval = this.number + n;
|
||||
if (newval > this.max) {
|
||||
return this.$message( this.maxTips);
|
||||
}
|
||||
this.number = newval;
|
||||
},
|
||||
keyboradReduce() {
|
||||
if (this.number.length <= 1) {
|
||||
return (this.number = this.isCanEmpty ? "" : "0");
|
||||
}
|
||||
this.number = `${this.number}`.substring(0, this.number.length - 1);
|
||||
},
|
||||
keyboradConfirm() {
|
||||
this.$emit("confirm", this.number);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.number = `${this.value}`;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.yd-keyboard {
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number,
|
||||
.yd-keyboard {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number {
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number .key-line {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number .key {
|
||||
width: 122px;
|
||||
height: 60px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.mini-number-box1 .mini-number .key:hover {
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.mini-number-box1 .mini-number .key:not(:last-child) {
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number .key-line:not(:last-child) {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box2 {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-number-box2 .key {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mini-number-box2 .function-button {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-number-box2 .function-button .key {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.key-line {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.key,
|
||||
.key-line {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
|
||||
border-radius: 4px;
|
||||
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.simple-Keyboard-number,
|
||||
.simple-Keyboard-weight {
|
||||
min-width: 410px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.submit {
|
||||
width: 366px;
|
||||
height: 44px;
|
||||
background: #22bf64;
|
||||
border-radius: 2px;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-box {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.carts {
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carts .title,
|
||||
.carts {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carts .title {
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 20px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.carts .title .left {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.carts .title .right {
|
||||
font-size: 14.4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carts .box_status {
|
||||
margin-bottom: 20px;
|
||||
width: 370px;
|
||||
height: 58px;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carts .box_status span {
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<el-dialog width="330px" :title="title" :visible.sync="show">
|
||||
<div class="simple-Keyboard-number">
|
||||
<div class="carts">
|
||||
<div class="pad-14">
|
||||
<div class="box_status">
|
||||
<span class="sym">￥</span>
|
||||
<el-input v-model="number" type="text" @input="numberInput"></el-input>
|
||||
<!-- <span class="inputs" :contenteditable="true" @input="numberInput" type="text" >{{ number }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="number_list_box">
|
||||
<div class="yd-keyboard">
|
||||
<div class="mini-number-box1">
|
||||
<div class="mini-number">
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('1')">1</div>
|
||||
<div class="key" @click="keyboradAdd('2')">2</div>
|
||||
<div class="key" @click="keyboradAdd('3')">3</div>
|
||||
<div
|
||||
class="key"
|
||||
style="font-size: 31px"
|
||||
@click="keyboradReduce"
|
||||
>
|
||||
<svg
|
||||
t="1723453480343"
|
||||
class="icon"
|
||||
viewBox="0 0 1664 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1467"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
|
||||
fill="#333333"
|
||||
p-id="1468"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('4')">4</div>
|
||||
<div class="key" @click="keyboradAdd('5')">5</div>
|
||||
<div class="key" @click="keyboradAdd('6')">6</div>
|
||||
<div class="key" @click="keyboradAdd('clear')">清空</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('7')">7</div>
|
||||
<div class="key" @click="keyboradAdd('8')">8</div>
|
||||
<div class="key" @click="keyboradAdd('9')">9</div>
|
||||
<div class="key"></div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('.')">.</div>
|
||||
<div class="key" @click="keyboradAdd('0')">0</div>
|
||||
<div class="key" @click="keyboradAdd('00')">00</div>
|
||||
<div class="key"></div>
|
||||
</div>
|
||||
<div class="confirm key" @click="confirm">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="submit" @click="keyboradConfirm">确认</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "支付",
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: '0',
|
||||
show:false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number(newval) {
|
||||
this.$emit("input", newval);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
confirm(){
|
||||
|
||||
},
|
||||
open(){
|
||||
this.show=true
|
||||
},
|
||||
close(){
|
||||
this.show=false
|
||||
},
|
||||
numberInput(val){
|
||||
console.log(val)
|
||||
this.number=`${Number(val)}`
|
||||
},
|
||||
keyboradAdd(n) {
|
||||
if (n === "clear") {
|
||||
return (this.number = '0');
|
||||
}
|
||||
if(n==='.'){
|
||||
return this.number += this.number.includes('.')?'' : '.'
|
||||
}
|
||||
if (`${this.number}`.length<=1&&Number(this.number)===0) {
|
||||
return (this.number = n);
|
||||
}
|
||||
this.number += n;
|
||||
},
|
||||
keyboradReduce() {
|
||||
if (this.number.length <= 1) {
|
||||
return (this.number = this.isCanEmpty ? "" : "0");
|
||||
}
|
||||
this.number = this.number.substring(0, this.number.length - 1);
|
||||
},
|
||||
keyboradConfirm() {
|
||||
this.$emit("confirm", this.number);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.number = `${this.value}`;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pad-14 {
|
||||
padding: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-outer-spin-button{
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
::v-deep .el-input__inner {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.number_list_box,
|
||||
.yd-keyboard,
|
||||
.mini-number,
|
||||
.mini-number-box1,
|
||||
.key-line {
|
||||
width: 100%;
|
||||
}
|
||||
.yd-keyboard {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number,
|
||||
.yd-keyboard {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number {
|
||||
border-top: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box2 {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-number-box2 .function-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.key,
|
||||
.key-line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 25%;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.key:hover {
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.key:not(:last-child) {
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.key-line:not(:last-child) {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
.confirm {
|
||||
height: 142px;
|
||||
width: 25%;
|
||||
background: #22bf64;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
.confirm:hover {
|
||||
background: rgba(34, 191, 100, 0.8666666666666667);
|
||||
}
|
||||
.simple-Keyboard-number,
|
||||
.simple-Keyboard-weight {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.submit {
|
||||
width: 366px;
|
||||
height: 44px;
|
||||
background: #22bf64;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-box {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.carts {
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carts .title,
|
||||
.carts {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carts .title {
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 20px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.carts .title .left {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.carts .title .right {
|
||||
font-size: 14.4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box_status {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 14px;
|
||||
align-items: flex-end;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
.sym {
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
width: 30px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.inputs {
|
||||
font-size: 28px;
|
||||
color: #212121;
|
||||
outline: none;
|
||||
line-height: 37px;
|
||||
border: none;
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--small .el-input__inner{
|
||||
font-size: 28px;
|
||||
color: #212121;
|
||||
outline: none;
|
||||
line-height: 37px;
|
||||
border: none;
|
||||
max-width: 250px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.carts .box_status span {
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
export const orderBtns=[
|
||||
{
|
||||
text: "删除",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "规格",
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: "菜品打折",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "赠菜",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "赠菜",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "打包",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "等叫",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "整单等叫",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "单品备注",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "退菜",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "附加费",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "存单",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "取单",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "修改价格",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "撤单",
|
||||
disabled: false,
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="title">选择支付方式</div>
|
||||
<div class="btn_group">
|
||||
<div class="price_select">
|
||||
<div class="pay_btns">
|
||||
<el-button
|
||||
size="medium"
|
||||
@click="changeSel(item)"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:type="sel === item.payType ? 'primary' : ''"
|
||||
>
|
||||
{{ item.payName }}
|
||||
</el-button>
|
||||
<!-- <el-button size="medium"> 余额支付 </el-button>
|
||||
<el-button size="medium"> 现金支付 </el-button>
|
||||
<el-button size="medium"> 挂账 </el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { $getPayType } from "@/api/table";
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
sel: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
sel(newval) {
|
||||
console.log(newval);
|
||||
this.$emit("input", newval);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeSel(item) {
|
||||
this.sel = item.payType;
|
||||
this.$emit("itemClick", item);
|
||||
},
|
||||
async init() {
|
||||
const res = await $getPayType();
|
||||
this.list = res.filter(v=>v.isDisplay);
|
||||
console.log(res[0]);
|
||||
this.sel = this.sel ? this.sel : res[0].payType;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.pay_btns .el-button {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="预约"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
@close="reset"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
label-position="left"
|
||||
>
|
||||
|
||||
<el-form-item label="预约日期" prop="bookingDate">
|
||||
<!-- <el-date-picker
|
||||
v-model="form.bookingDate"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
:picker-options="pickerOptions"
|
||||
placeholder="选择预约日期"
|
||||
style="width: 200px;margin-right: 10px;"
|
||||
@change="getShopTableList"
|
||||
/> -->
|
||||
<el-radio-group
|
||||
v-model="form.bookingDate"
|
||||
class="date"
|
||||
@change="getShopTableList"
|
||||
>
|
||||
<el-radio-button
|
||||
v-for="(item) in dateList"
|
||||
:key="item.date"
|
||||
:label="item.date"
|
||||
>
|
||||
<div style="font-size: 12px;margin-bottom: 4px;">{{ item.label }} / {{ item.date.substring(8,10) }}</div>
|
||||
<div style="font-size: 12px;"> {{ item.day }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="预约类型" prop="bookingType">
|
||||
<el-radio-group v-model="form.bookingType" @change="getShopTableList">
|
||||
<el-radio-button label="lunch">午餐</el-radio-button>
|
||||
<el-radio-button label="dinner">晚餐</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="就餐时间" prop="bookingTime">
|
||||
<el-time-picker
|
||||
v-model="form.bookingTime"
|
||||
value-format="HH:mm:ss"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预约桌台" prop="shopTableId">
|
||||
<el-select v-model="form.shopTableId" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in shopTableList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用餐人数" prop="dinerNum">
|
||||
<el-input-number v-model="form.dinerNum" :min="1" controls-position="right" style="width: 100%;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="订餐人" prop="bookingPerson">
|
||||
<el-input v-model="form.bookingPerson" style="width: 200px;margin-right: 10px;" placeholder="请输入联系人姓名" />
|
||||
<el-radio-group v-model="form.gender">
|
||||
<el-radio-button label="1">先生</el-radio-button>
|
||||
<el-radio-button label="2">女士</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="phoneNumber">
|
||||
<el-input v-model="form.phoneNumber" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
|
||||
</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 { getShopTableList, makeShopTable } from '@/api/table'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
resetForm: '',
|
||||
loading: false,
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now() - 8.64e7 // 如果今天之前的日期都不可选，减去8.64e7是1天的毫秒数
|
||||
}
|
||||
},
|
||||
dateList: [
|
||||
{ label: '今', day: '', date: '' },
|
||||
{ label: '明', day: '', date: '' },
|
||||
{ label: '后', day: '', date: '' }
|
||||
],
|
||||
shopTableList: [],
|
||||
form: {
|
||||
bookingDate: '',
|
||||
bookingType: 'lunch',
|
||||
shopTableId: null,
|
||||
dinerNum: 1,
|
||||
bookingPerson: '',
|
||||
phoneNumber: '',
|
||||
gender: '1',
|
||||
bookingTime: '',
|
||||
diningType: '普通用餐',
|
||||
focus: '0',
|
||||
receiveMarketingSms: '0'
|
||||
|
||||
},
|
||||
rules: {
|
||||
shopTableId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择预约桌台',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
dinerNum: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择用餐人数',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
phoneNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入联系方式',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
bookingPerson: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入订餐人姓名',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
bookingTime: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择用餐时间',
|
||||
trigger: ['change']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
getWeekdays() {
|
||||
const today = new Date()
|
||||
const tomorrow = new Date(today)
|
||||
const dayAfterTomorrow = new Date(today)
|
||||
|
||||
// 设置时间为今天
|
||||
tomorrow.setDate(today.getDate() + 1)
|
||||
dayAfterTomorrow.setDate(today.getDate() + 2)
|
||||
|
||||
// 获取星期几的方法
|
||||
const getDayOfWeek = (date) => {
|
||||
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
return days[date.getDay()]
|
||||
}
|
||||
|
||||
// 获取今天、明天和后天的星期几
|
||||
const todayWeekday = getDayOfWeek(today)
|
||||
const tomorrowWeekday = getDayOfWeek(tomorrow)
|
||||
const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
|
||||
this.dateList[0].day = todayWeekday
|
||||
this.dateList[1].day = tomorrowWeekday
|
||||
this.dateList[2].day = dayAfterTomorrowWeekday
|
||||
this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
|
||||
this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
|
||||
this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
|
||||
|
||||
this.form.bookingDate = this.dateList[0].date
|
||||
},
|
||||
/**
|
||||
* 获取桌台数据
|
||||
*/
|
||||
async getShopTableList() {
|
||||
this.form.shopTableId = null
|
||||
const params = {
|
||||
bookingDate: this.form.bookingDate,
|
||||
bookingType: this.form.bookingType
|
||||
}
|
||||
const res = await getShopTableList(params)
|
||||
this.shopTableList = res
|
||||
console.log(res)
|
||||
},
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async(valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
try {
|
||||
const bookingTime = this.form.bookingDate + ' ' + this.form.bookingTime
|
||||
const params = {
|
||||
...this.form,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
}
|
||||
params.bookingTime = bookingTime
|
||||
const res = await makeShopTable(params)
|
||||
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))
|
||||
}
|
||||
this.getShopTableList()
|
||||
this.getWeekdays()
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form = { ...this.resetForm }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.date{
|
||||
::v-deep .el-form-item__content{
|
||||
// height: 36px;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
::v-deep .el-radio-button{
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-radio-button__inner{
|
||||
padding: 4px 20px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,141 @@
|
|||
<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="台桌状态" 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 status" :key="item.value"></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-radio-group v-model="form.autoClear">
|
||||
<el-radio-button :label="0">手动清台</el-radio-button>
|
||||
<el-radio-button :label="1">自动清台</el-radio-button>
|
||||
</el-radio-group>
|
||||
</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'
|
||||
import $status from "../status.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
resetForm: '',
|
||||
loading: false,
|
||||
status:[],
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
areaId: '',
|
||||
maxCapacity: 0,
|
||||
isPredate: 1,
|
||||
type: 2,
|
||||
perhour: 0,
|
||||
amount: 0,
|
||||
autoClear: 1,
|
||||
|
||||
},
|
||||
rules: {
|
||||
areaId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择区域',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
areaList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
this.status = Object.keys($status).map(key =>{
|
||||
return {...$status[key],value:key}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
try {
|
||||
let res = await tbShopTable({
|
||||
...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: `${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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
//判断商品是否可以下单
|
||||
export function isCanBuy(goods,isStock) {
|
||||
return goods.isGrounding && goods.isPauseSale == 0 && (isStock?goods.stockNumber > 0:true) ;
|
||||
}
|
||||
|
||||
// 一个数组是否包含另外一个数组全部元素
|
||||
export function arrayContainsAll(arr1, arr2) {
|
||||
for (let i = 0; i < arr2.length; i++) {
|
||||
if (!arr1.includes(arr2[i])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
//n项 n-1项组合，生成全部结果
|
||||
export function generateCombinations(arr, k) {
|
||||
let result = [];
|
||||
|
||||
function helper(index, current) {
|
||||
if (current.length === k) {
|
||||
result.push(current.slice()); // 使用slice()来避免直接修改原始数组
|
||||
} else {
|
||||
for (let i = index; i < arr.length; i++) {
|
||||
current.push(arr[i]); // 将当前元素添加到组合中
|
||||
helper(i + 1, current); // 递归调用，索引增加以避免重复选择相同的元素
|
||||
current.pop(); // 回溯，移除当前元素以便尝试其他组合
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
helper(0, []); // 从索引0开始，初始空数组作为起点
|
||||
return result;
|
||||
}
|
||||
|
||||
export function returnReverseVal(val, isReturnString = true) {
|
||||
const isBol = typeof val === "boolean";
|
||||
const isString = typeof val === "string";
|
||||
let reverseNewval = "";
|
||||
if (isBol) {
|
||||
reverseNewval = !val;
|
||||
}
|
||||
if (isString) {
|
||||
reverseNewval = val === "true" ? "false" : "true";
|
||||
}
|
||||
return reverseNewval;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export default {
|
||||
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)' }
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 列表 -->
|
||||
<!-- 搜索 -->
|
||||
<page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #options="scope">
|
||||
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #bol="scope">
|
||||
{{ scope.row[scope.prop] ? "是" : "否" }}
|
||||
</template>
|
||||
<template #gender="scope">
|
||||
<el-tag
|
||||
:type="
|
||||
scope.row[scope.prop] == null
|
||||
? 'info'
|
||||
: scope.row[scope.prop] == 1
|
||||
? 'success'
|
||||
: 'warning'
|
||||
"
|
||||
>
|
||||
{{ scope.row[scope.prop] === null ? "未知" : scope.row[scope.prop] == 1 ? "男" : "女" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #user="scope">
|
||||
<div class="flex align-center">
|
||||
<el-avatar :src="scope.row.headImg" />
|
||||
<el-tag>{{ scope.row.nickName }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #link="scope">
|
||||
<el-link>{{ scope.row[scope.prop] }}</el-link>
|
||||
</template>
|
||||
<template #mobile="scope">
|
||||
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop]"
|
||||
:text="scope.row[scope.prop]"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal
|
||||
ref="addModalRef"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
@formDataChange="formDataChange"
|
||||
></page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
@formDataChange="formDataChange"
|
||||
></page-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
const editMoneyModalRef = ref(null);
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
addModalRef,
|
||||
editModalRef,
|
||||
handleQueryClick,
|
||||
handleResetClick,
|
||||
// handleAddClick,
|
||||
// handleEditClick,
|
||||
handleSubmitClick,
|
||||
handleExportClick,
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
// 修改金额表单类型
|
||||
function formDataChange(type, val) {
|
||||
console.log(type, val);
|
||||
}
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
}
|
||||
// 获取优惠券
|
||||
async function getCouponList() {}
|
||||
// 编辑
|
||||
async function handleEditClick(row) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// 根据id获取数据进行填充
|
||||
// const data = await VersionApi.getFormData(row.id);
|
||||
editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
|
||||
}
|
||||
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name) {
|
||||
console.log(name);
|
||||
if (name === "custom1") {
|
||||
ElMessage.success("点击了自定义1按钮");
|
||||
}
|
||||
}
|
||||
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data) {
|
||||
const row = data.row;
|
||||
if (data.name == "more") {
|
||||
if (data.command === "change-money") {
|
||||
editMoneyModalRef.value.setModalVisible();
|
||||
editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 切换示例
|
||||
const isA = ref(true);
|
||||
</script>
|
||||
<style scoped>
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue