生产管理系统前端 开发中心配置系统 所有页面
This commit is contained in:
@@ -0,0 +1,258 @@
|
||||
import { useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { Send, Clock, CalendarIcon } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
import { MessageTemplate } from '@/types/message';
|
||||
import { MessageSendFormData } from '../types';
|
||||
|
||||
interface SendMessageDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
templates: MessageTemplate[];
|
||||
formData: MessageSendFormData;
|
||||
onFormDataChange: (data: MessageSendFormData) => void;
|
||||
onSend: () => void;
|
||||
getTypeIcon: (type: string) => JSX.Element;
|
||||
getTypeLabel: (type: string) => string;
|
||||
}
|
||||
|
||||
export function SendMessageDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
templates,
|
||||
formData,
|
||||
onFormDataChange,
|
||||
onSend,
|
||||
getTypeIcon,
|
||||
getTypeLabel
|
||||
}: SendMessageDialogProps) {
|
||||
const replaceVariables = (content: string, variables: Record<string, string>): string => {
|
||||
let result = content;
|
||||
Object.entries(variables).forEach(([key, value]) => {
|
||||
result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), value || `{{${key}}}`);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
const handleTemplateChange = (templateId: string) => {
|
||||
const template = templates.find(t => t.id === templateId);
|
||||
if (template) {
|
||||
// 初始化变量
|
||||
const vars: Record<string, string> = {};
|
||||
template.variables.forEach(v => {
|
||||
vars[v] = '';
|
||||
});
|
||||
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
templateId,
|
||||
type: template.type,
|
||||
subject: template.subject || '',
|
||||
content: template.content,
|
||||
variables: vars,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const selectedTemplate = templates.find(t => t.id === formData.templateId);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Send className="w-5 h-5 text-green-600" />
|
||||
发送消息
|
||||
</div>
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
选择消息模版并发送消息
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
{/* 选择模版 */}
|
||||
<div>
|
||||
<Label>选择消息模版 *</Label>
|
||||
<Select value={formData.templateId} onValueChange={handleTemplateChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择消息模版" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{templates.filter(t => t.isActive).map(template => (
|
||||
<SelectItem key={template.id} value={template.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
{getTypeIcon(template.type)}
|
||||
<span>{template.name}</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{getTypeLabel(template.type)}
|
||||
</Badge>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 发送方式 */}
|
||||
<div>
|
||||
<Label>发送方式 *</Label>
|
||||
<Select
|
||||
value={formData.sendType}
|
||||
onValueChange={(value: 'immediate' | 'scheduled') => onFormDataChange({ ...formData, sendType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="immediate">
|
||||
<div className="flex items-center gap-2">
|
||||
<Send className="w-4 h-4" />
|
||||
实时发送
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="scheduled">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
定时发送
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 定时发送设置 */}
|
||||
{formData.sendType === 'scheduled' && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>发送日期 *</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
<CalendarIcon className="w-4 h-4 mr-2" />
|
||||
{formData.scheduledDate ? (
|
||||
format(formData.scheduledDate, 'yyyy年MM月dd日', { locale: zhCN })
|
||||
) : (
|
||||
'选择日期'
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={formData.scheduledDate}
|
||||
onSelect={(date) => onFormDataChange({ ...formData, scheduledDate: date })}
|
||||
locale={zhCN}
|
||||
disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div>
|
||||
<Label>发送时间 *</Label>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.scheduledTime}
|
||||
onChange={(e) => onFormDataChange({ ...formData, scheduledTime: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 接收人 */}
|
||||
<div>
|
||||
<Label>接收人 *</Label>
|
||||
<Textarea
|
||||
value={formData.recipients}
|
||||
onChange={(e) => onFormDataChange({ ...formData, recipients: e.target.value })}
|
||||
placeholder={
|
||||
formData.type === 'sms' ? '输入手机号，多个用逗号或换行分隔' :
|
||||
formData.type === 'email' ? '输入邮箱地址，多个用逗号或换行分隔' :
|
||||
formData.type === 'push' ? '输入设备ID或用户ID，多个用逗号或换行分隔' :
|
||||
'输入用户名，多个用逗号或换行分隔'
|
||||
}
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
支持多个接收人，使用逗号、分号或换行分隔
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 消息主题（邮件和推送） */}
|
||||
{(formData.type === 'email' || formData.type === 'push') && (
|
||||
<div>
|
||||
<Label>消息主题</Label>
|
||||
<Input
|
||||
value={formData.subject}
|
||||
onChange={(e) => onFormDataChange({ ...formData, subject: e.target.value })}
|
||||
placeholder="输入消息主题"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 变量填写 */}
|
||||
{selectedTemplate && selectedTemplate.variables.length > 0 && (
|
||||
<div>
|
||||
<Label>填写变量 *</Label>
|
||||
<Card className="p-4 bg-gray-50">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{selectedTemplate.variables.map(variable => (
|
||||
<div key={variable}>
|
||||
<Label htmlFor={`var-${variable}`} className="text-xs">
|
||||
{variable}
|
||||
</Label>
|
||||
<Input
|
||||
id={`var-${variable}`}
|
||||
value={formData.variables[variable] || ''}
|
||||
onChange={(e) => onFormDataChange({
|
||||
...formData,
|
||||
variables: {
|
||||
...formData.variables,
|
||||
[variable]: e.target.value,
|
||||
},
|
||||
})}
|
||||
placeholder={`输入 ${variable}`}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 消息内容预览 */}
|
||||
{formData.content && (
|
||||
<div>
|
||||
<Label>消息内容预览</Label>
|
||||
<Card className="p-4 bg-blue-50 border-blue-200">
|
||||
<pre className="text-sm whitespace-pre-wrap">
|
||||
{replaceVariables(formData.content, formData.variables)}
|
||||
</pre>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={onSend} className="bg-green-600 hover:bg-green-700">
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
{formData.sendType === 'immediate' ? '立即发送' : '创建定时任务'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user