Files
TakeoutSaaS.TenantUI/apps/web-antd/src/views/member/message-reach/components/MessageTemplateToolbar.vue

55 lines
1.5 KiB
Vue

<script setup lang="ts">
import type { MemberMessageTemplateCategory } from '#/api/member/message-reach';
import type { MessageTemplateFilterForm } from '#/views/member/message-reach/types';
import { Button, Input, Select } from 'ant-design-vue';
import { MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS } from '../composables/message-reach-page/constants';
defineProps<{
canManage: boolean;
filters: MessageTemplateFilterForm;
}>();
const emit = defineEmits<{
(event: 'create'): void;
(event: 'search'): void;
(event: 'update:category', value: '' | MemberMessageTemplateCategory): void;
(event: 'update:keyword', value: string): void;
}>();
function handleCategoryChange(value: unknown) {
emit(
'update:category',
String(value || '') as '' | MemberMessageTemplateCategory,
);
emit('search');
}
</script>
<template>
<div class="mmr-toolbar">
<Select
class="mmr-select"
:value="filters.category || ''"
:options="MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS"
@update:value="(value) => handleCategoryChange(value)"
/>
<Input
class="mmr-keyword-input"
:value="filters.keyword"
placeholder="搜索模板名称"
allow-clear
@update:value="(value) => emit('update:keyword', String(value ?? ''))"
@press-enter="emit('search')"
/>
<span class="mmr-spacer"></span>
<Button type="primary" :disabled="!canManage" @click="emit('create')">
新建模板
</Button>
</div>
</template>