77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
import type { MessageTemplateEditorForm } from '../types';
|
||
|
||
import { Form, Input, Modal, Select } from 'ant-design-vue';
|
||
|
||
import { MESSAGE_TEMPLATE_CATEGORY_OPTIONS } from '../composables/message-reach-page/constants';
|
||
|
||
defineProps<{
|
||
canManage: boolean;
|
||
form: MessageTemplateEditorForm;
|
||
loading: boolean;
|
||
open: boolean;
|
||
submitText: string;
|
||
submitting: boolean;
|
||
title: string;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(event: 'close'): void;
|
||
(event: 'setCategory', value: 'marketing' | 'notice' | 'recall'): void;
|
||
(event: 'setContent', value: string): void;
|
||
(event: 'setName', value: string): void;
|
||
(event: 'submit'): void;
|
||
}>();
|
||
</script>
|
||
|
||
<template>
|
||
<Modal
|
||
:open="open"
|
||
:title="title"
|
||
:confirm-loading="submitting"
|
||
:ok-text="submitText"
|
||
cancel-text="取消"
|
||
:ok-button-props="{ disabled: !canManage || loading }"
|
||
width="560"
|
||
@ok="emit('submit')"
|
||
@cancel="emit('close')"
|
||
>
|
||
<Form layout="vertical" class="mmr-template-modal-form">
|
||
<Form.Item label="模板名称" required>
|
||
<Input
|
||
:value="form.name"
|
||
:disabled="loading"
|
||
placeholder="如：新品上线通知"
|
||
@update:value="(value) => emit('setName', String(value ?? ''))"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="模板分类" required>
|
||
<Select
|
||
:value="form.category"
|
||
:disabled="loading"
|
||
:options="MESSAGE_TEMPLATE_CATEGORY_OPTIONS"
|
||
@update:value="
|
||
(value) =>
|
||
emit(
|
||
'setCategory',
|
||
String(value || 'notice') as 'marketing' | 'notice' | 'recall',
|
||
)
|
||
"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="模板内容" required>
|
||
<Input.TextArea
|
||
:value="form.content"
|
||
:disabled="loading"
|
||
:rows="5"
|
||
placeholder="支持变量：{name}姓名 {level}等级"
|
||
@update:value="(value) => emit('setContent', String(value ?? ''))"
|
||
/>
|
||
<div class="mmr-form-hint">支持模板变量，用于个性化内容替换</div>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</template>
|