MSuMshk
23e696719b
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 56s
76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<!-- 文件职责：订单大厅工具栏（门店选择 + 渠道筛选 + 声音开关 + 连接状态）。 -->
|
||
<script setup lang="ts">
|
||
import type { BoardChannelFilter } from '../types';
|
||
|
||
import { CHANNEL_OPTIONS } from '../composables/order-board-page/constants';
|
||
|
||
const {
|
||
channel = 'all',
|
||
isConnected = false,
|
||
isSoundEnabled = true,
|
||
storeId = '',
|
||
} = defineProps<{
|
||
channel: BoardChannelFilter;
|
||
isConnected: boolean;
|
||
isSoundEnabled: boolean;
|
||
storeId: string;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
'update:channel': [value: BoardChannelFilter];
|
||
'update:isSoundEnabled': [value: boolean];
|
||
'update:storeId': [value: string];
|
||
}>();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="ob-toolbar">
|
||
<!-- 1. 门店 ID 输入 -->
|
||
<div class="ob-toolbar__store">
|
||
<span class="ob-toolbar__label">门店ID:</span>
|
||
<a-input
|
||
:value="storeId"
|
||
placeholder="输入门店 ID"
|
||
style="width: 200px"
|
||
@change="(e: any) => emit('update:storeId', e.target.value)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 2. 渠道筛选 -->
|
||
<div class="ob-toolbar__channel">
|
||
<a-radio-group
|
||
:value="channel"
|
||
button-style="solid"
|
||
size="small"
|
||
@change="(e: any) => emit('update:channel', e.target.value)"
|
||
>
|
||
<a-radio-button
|
||
v-for="opt in CHANNEL_OPTIONS"
|
||
:key="opt.value"
|
||
:value="opt.value"
|
||
>
|
||
{{ opt.label }}
|
||
</a-radio-button>
|
||
</a-radio-group>
|
||
</div>
|
||
|
||
<!-- 3. 声音开关 + 连接状态 -->
|
||
<div class="ob-toolbar__right">
|
||
<a-switch
|
||
:checked="isSoundEnabled"
|
||
checked-children="声音开"
|
||
un-checked-children="声音关"
|
||
@change="(val: boolean) => emit('update:isSoundEnabled', val)"
|
||
/>
|
||
<span
|
||
class="ob-toolbar__status"
|
||
:class="[
|
||
isConnected ? 'ob-toolbar__status--on' : 'ob-toolbar__status--off',
|
||
]"
|
||
>
|
||
{{ isConnected ? '已连接' : '未连接' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|