我的消息

src/pages/message/my/index.tsx

@@ -1,5 +1,5 @@
 import {useTranslation} from '@/i18n.ts'
-import {Badge, Button, Divider, Form, Input, Space, Tooltip} from 'antd'
+import {Badge, Button, Divider, Form, Input, Select, Space, Tooltip} from 'antd'
 import {useAtom, useAtomValue} from 'jotai'
 import React, {useEffect, useMemo, useState} from 'react'
 import {BetaSchemaForm, ProColumns, ProFormColumnsType,} from '@ant-design/pro-components'
@@ -10,6 +10,7 @@ import {getValueCount, unSetColumnRules} from '@/utils'
 import {Table as ProTable} from '@/components/table'
 import {msgListAtom, msgSearchAtom, saveMsgAtom} from "@/store/message/my.ts";
 import {templateAllListAtom} from "@/store/message/template.ts";
+import {IMsgTemplate} from "@/types/message/template.ts";
 
 const i18nPrefix = 'msgMy.list'
 
@@ -26,8 +27,77 @@ const MdwMessage = () => {
 
   const [open, setOpen] = useState(false)
   const [openFilter, setFilterOpen] = useState(false)
+  const [currentTemplate, setCurrentTemplate] = useState<IMsgTemplate>()
   const [searchKey, setSearchKey] = useState(search?.title)
 
+  const [templateType, setTemplateType] = useState('')
+  const typeHandlerChange = (value: string) => {
+    if (value !== 'EMAIL') {
+      setTemplateTitle('')
+      form.setFieldsValue({'title': undefined})
+    }
+    setTemplateType(value)
+  }
+
+  const templateChange = (index: number) => {
+    if (templateList && index !== undefined) {
+      // key转换
+      const result = templateList[index].fields.split(',').map(item => {
+        return {
+          field_key: item,
+          field_value: ''
+        };
+      });
+      setCurrentTemplate(templateList[index])
+      form.setFieldsValue({...templateList[index], 'fieldList': result})
+      setTemplateType(templateList[index].type)
+      setTemplateTitle(templateList[index].title)
+      setTemplateContent(templateList[index].content)
+    } else {
+      form.resetFields()
+      setTemplateType('')
+      setCurrentTemplate(undefined)
+    }
+  }
+
+  const [templateTitle, setTemplateTitle] = useState('');
+  const [templateContent, setTemplateContent] = useState('');
+
+  useEffect(() => {
+    handleChange()
+  }, [templateTitle, templateContent]);
+
+  const handleContentChange = (e) => {
+    const value = e.target.value;
+    setTemplateContent(value)
+  };
+
+  const titheHandleContentChange = (e) => {
+    const value = e.target.value;
+    setTemplateTitle(value)
+  };
+
+  const handleChange = () => {
+    // 使用正则表达式匹配 ${var} 格式的变量
+    const regex = /\${\.([a-zA-Z0-9_]+)}/g;
+    const matches = [...(templateTitle + templateContent).matchAll(regex)];
+
+    // 提取变量名
+    const variables = Array.from(new Set(matches.map(match => match[1])));
+    const result = variables.map(item => {
+      return {
+        field_key: item,
+        field_value: ''
+      };
+    });
+    form.setFieldsValue({'fieldList': result})
+  };
+
+  const handleInputChange = (index, e) => {
+    form.getFieldValue("fieldList")[index].field_value = e.target.value
+  }
+
+
   const drawerColumns = useMemo(() => {
     return [
       {
@@ -38,7 +108,25 @@ const MdwMessage = () => {
         formItemProps: {hidden: true}
       },
       {
-        title: t(`${i18nPrefix}.columns.type`, '选择模板'),
+        title: t(`${i18nPrefix}.columns.template`, '选择模板'),
+        valueType: 'select',
+        fieldProps: {
+          allowClear: true,
+        },
+        renderFormItem: () => {
+          return <Select onChange={templateChange}>
+            {
+              templateList?.map((template, index) => (
+                      <Select.Option key={index} value={index}>
+                        {template.name}
+                      </Select.Option>
+              ))
+            }
+          </Select>
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.type`, '消息类型'),
         dataIndex: 'type',
         valueType: 'select',
         fieldProps: {
@@ -48,6 +136,7 @@ const MdwMessage = () => {
             {label: 'Telegram', value: 'TG'}
           ],
           allowClear: false,
+          onChange: typeHandlerChange
         },
         formItemProps: {
           rules: [
@@ -64,46 +153,60 @@ const MdwMessage = () => {
         fieldProps: {
           maxLength: 100,
           showCount: true,
+          onChange: titheHandleContentChange,
+        },
+        formItemProps: {
+          tooltip: '支持邮件类型',
+          hidden: templateType != 'EMAIL',
+          rules: [
+            {
+              required: templateType == 'EMAIL',
+              message: t('message.required', '模板内容必填')
+            }
+          ]
         },
       },
       {
-        title: t(`${i18nPrefix}.columns.content`, '模板内容'),
+        title: t(`${i18nPrefix}.columns.content`, '正文'),
         dataIndex: 'content',
         valueType: 'textarea',
         fieldProps: {
-          defaultValue: "你好，我叫${.name}",
           maxLength: 1000,
           showCount: true,
           rows: 15,
+          onChange: handleContentChange,
         },
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', '模板内容必填')
+              message: t('message.required', '内容必填')
             }
           ]
         }
       },
       {
-        title: t(`${i18nPrefix}.columns.field`, '识别到的变量'),
-        dataIndex: 'field',
-        renderFormItem: () => {
+        title: t(`${i18nPrefix}.columns.fieldList`, '填充变量'),
+        dataIndex: 'fieldList',
+        formItemProps: {
+          hidden: currentTemplate === undefined,
+        },
+        renderFormItem: (_, config) => {
           return (
                   <>
                     {
-                      templateList?.map((variable, index) => (
+                      config.value?.map((variable, index) => (
                               <div key={index} style={{marginBottom: 8}}>
                                 <Input
-                                        addonBefore={`${variable.name}:`}
-                                        defaultValue=""
-                                        placeholder={`请输入${variable}`}
+                                        addonBefore={variable.field_key}
+                                        onChange={(e) => handleInputChange(index, e)}
                                 />
                               </div>
-                      ))}
+                      ))
+                    }
                   </>
           );
-        }
+        },
       },
       {
         title: t(`${i18nPrefix}.columns.dest`, '收件人（多个收件人用英文逗号隔开，如果类型是TG，则填token）'),
@@ -112,12 +215,20 @@ const MdwMessage = () => {
         fieldProps: {
           maxLength: 1000,
           showCount: true,
-          rows: 15,
+          rows: 5,
           placeholder: '[email protected],[email protected]',
         },
+        formItemProps: {
+          rules: [
+            {
+              required: true,
+              message: t('message.required', '内容必填')
+            }
+          ]
+        }
       },
     ] as ProColumns[]
-  }, [search])
+  }, [search, templateType, templateList])
 
   const columns = useMemo(() => {
     return [
@@ -129,17 +240,37 @@ const MdwMessage = () => {
         formItemProps: {hidden: true}
       },
       {
-        title: t(`${i18nPrefix}.columns.name`, '模板名称'),
-        dataIndex: 'name',
+        title: t(`${i18nPrefix}.columns.type`, '类型'),
+        dataIndex: 'type',
+        render: (_, record) => {
+          return <div>{record.type}</div>
+        }
       },
       {
-        title: t(`${i18nPrefix}.columns.title`, '模板标题'),
+        title: t(`${i18nPrefix}.columns.title`, '标题'),
         dataIndex: 'title',
       },
       {
-        title: t(`${i18nPrefix}.columns.content`, '模板内容'),
+        title: t(`${i18nPrefix}.columns.content`, '正文'),
         dataIndex: 'content',
       },
+      {
+        title: t(`${i18nPrefix}.columns.dest`, '收件人'),
+        dataIndex: 'dest',
+      },
+      {
+        title: t(`${i18nPrefix}.columns.status`, '状态'),
+        dataIndex: 'status',
+        render: (_text, record) => {
+          return <Badge
+                  status={['default', 'processing', 'success', 'error'][record.status] as any}
+                  text={['未处理', '发送中', '发送成功', '发送失败'][record.status]}/>
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.send_at`, '发送时间'),
+        dataIndex: 'send_at',
+      },
       // {
       //   title: t(`${i18nPrefix}.columns.option`, '操作'),
       //   key: 'option',
@@ -160,7 +291,7 @@ const MdwMessage = () => {
       //   ]
       // }
     ] as ProColumns[]
-  }, [search])
+  }, [search, currentTemplate])
 
   useEffect(() => {
 
@@ -179,7 +310,7 @@ const MdwMessage = () => {
           <ListPageLayout className={styles.container}>
             <ProTable
                     rowKey="id"
-                    headerTitle={t(`${i18nPrefix}.title`, '消息模板管理')}
+                    headerTitle={t(`${i18nPrefix}.title`, '消息管理')}
                     toolbar={{
                       search: {
                         loading: isFetching && !!search?.title,
@@ -215,7 +346,7 @@ const MdwMessage = () => {
                                   })
                                   setOpen(true)
                                 }}
-                                type={'primary'}>{t(`${i18nPrefix}.add`, '添加模板')}</Button>
+                                type={'primary'}>{t(`${i18nPrefix}.add`, '发送消息')}</Button>
                       ]
                     }}
                     scroll={{
@@ -261,7 +392,7 @@ const MdwMessage = () => {
                     form={form}
                     layout={'vertical'}
                     scrollToFirstError={true}
-                    title={t(`${i18nPrefix}.title_${form.getFieldValue('id') !== 0 ? 'edit' : 'add'}`, form.getFieldValue('id') !== 0 ? '模板编辑' : '模板添加')}
+                    title={t(`${i18nPrefix}.title_add}`, '发送消息')}
                     layoutType={'DrawerForm'}
                     open={open}
                     drawerProps={{
@@ -275,7 +406,7 @@ const MdwMessage = () => {
 
                     }}
                     onFinish={async (values) => {
-                      saveOrUpdate(values)
+                      saveOrUpdate({...values, "template_id": currentTemplate?.id})
                     }}
                     columns={drawerColumns as ProFormColumnsType[]}/>
             <BetaSchemaForm

src/pages/message/template/index.tsx

@@ -51,26 +51,28 @@ const MdwMessage = () => {
     }
   }, [open]);
 
-  const handleChange = (title: string, content: string) => {
+  const handleChange = () => {
     // 使用正则表达式匹配 ${var} 格式的变量
     const regex = /\${\.([a-zA-Z0-9_]+)}/g;
-    const matches = [...(title + content).matchAll(regex)];
+    const matches = [...(templateTitle + templateContent).matchAll(regex)];
 
     // 提取变量名
     const variables = Array.from(new Set(matches.map(match => match[1])));
     setTemplateField(variables);
   };
 
+  useEffect(() => {
+    handleChange()
+  }, [templateTitle, templateContent]);
+
   const handleContentChange = (e) => {
     const value = e.target.value;
     setTemplateContent(value)
-    handleChange(templateTitle, value)
   };
 
   const titheHandleContentChange = (e) => {
     const value = e.target.value;
     setTemplateTitle(value)
-    handleChange(value, templateContent)
   };
 
   const typeHandlerChange = (value) => {

src/store/message/my.ts

@@ -1,10 +1,10 @@
 import { atom } from 'jotai/index'
 import { IApiResult, IPage } from '@/global'
 import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
-import messageTemplate from '@/service/message/template.ts'
 import { message } from 'antd'
 import { t } from 'i18next'
 import { IMsgMy } from '@/types/message/my.ts'
+import messageMy from '@/service/message/my.ts'
 
 type SearchParams = IPage & {
   key?: string
@@ -29,7 +29,7 @@ export const msgListAtom = atomWithQuery((get) => {
   return {
     queryKey: [ 'msgList', get(msgSearchAtom) ],
     queryFn: async ({ queryKey: [ , params ] }) => {
-      const list = await messageTemplate.list(params as SearchParams)
+      const list = await messageMy.list(params as SearchParams)
       return list.data
     }
   }
@@ -39,12 +39,12 @@ export const deleteMsgAtom = atomWithMutation((get) => {
   return {
     mutationKey: [ 'deleteMsg' ],
     mutationFn: async (ids: number) => {
-      return await messageTemplate.delete(ids ?? get(msgIdsAtom) as number)
+      return await messageMy.delete(ids ?? get(msgIdsAtom) as number)
     },
     onSuccess: (res) => {
       message.success('message.deleteSuccess')
       //更新列表
-      get(queryClientAtom).invalidateQueries({ queryKey: [ 'templateList', get(msgSearchAtom) ] })
+      get(queryClientAtom).invalidateQueries({ queryKey: [ 'msgList', get(msgSearchAtom) ] })
       return res
     }
   }
@@ -55,15 +55,12 @@ export const saveMsgAtom = atomWithMutation<IApiResult, IMsgMy>((get) => {
   return {
     mutationKey: [ 'saveMsg' ],
     mutationFn: async (data) => {
-      if (data.id === 0) {
-        return await messageTemplate.add(data)
-      }
-      return await messageTemplate.update(data)
+      return await messageMy.add(data)
     },
     onSuccess: (res) => {
       message.success(t('message.saveSuccess', '保存成功'))
 
-      get(queryClientAtom).invalidateQueries({ queryKey: [ 'templateList', get(msgSearchAtom) ] })
+      get(queryClientAtom).invalidateQueries({ queryKey: [ 'msgList', get(msgSearchAtom) ] })
 
       return res
     }