feat(notice): notice template parseParam

src/pages/notice/Template/Detail/index.tsx

@@ -24,12 +24,25 @@ import { useParams } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Col, message, Row } from 'antd';
 import { typeList } from '@/pages/notice';
-import { service, state } from '@/pages/notice/Template';
+import { configService, service, state } from '@/pages/notice/Template';
 import FBraftEditor from '@/components/FBraftEditor';
+import { useAsyncDataSource } from '@/utils/util';
 
 const Detail = observer(() => {
   const { id } = useParams<{ id: string }>();
 
+  const getConfig = () =>
+    configService
+      .queryNoPagingPost({
+        terms: [{ column: 'type$IN', value: id }],
+      })
+      .then((resp) => {
+        return resp.result?.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }));
+      });
+
   // 正则提取${}里面的值
   const pattern = /(?<=\$\{).*?(?=\})/g;
   const form = useMemo(
@@ -53,38 +66,48 @@ const Detail = observer(() => {
             const idList = value
               .match(pattern)
               ?.filter((i: string) => i)
-              .map((item: string) => ({ id: item }));
+              .map((item: string) => ({ id: item, type: 'string', format: '--' }));
             if (form1.modified) {
               form1.setValuesIn('variableDefinitions', idList);
             }
           });
-          onFieldValueChange('variableDefinitions.*.type', () => {
-            // const value = (field as Field).value;
-            // console.log(value, 'value');
-            // const format = field.query('.format').take() as DataField;
-            // console.log(field.query('.format'), field.query('.format').take(), 'values')
-            // switch (format.value) {
-            //   case 'date':
-            //     break;
-            //   case 'string':
-            //     format.setComponent(Input);
-            //     format.setDataSource([])
-            //     break;
-            //   case 'number':
-            //     format.setComponent(Input);
-            //     // format.setValue('%.xf');
-            //     break;
-            //   case 'file':
-            //     format.setComponent(Select);
-            //     format.setDataSource([
-            //       {label: '视频', value: 'video'},
-            //       {label: '图片', value: 'img'},
-            //       {label: '全部', value: 'any'},
-            //       {label: '', value: ''},
-            //     ])
-            //
-            //     break;
-            // }
+          onFieldValueChange('variableDefinitions.*.type', (field) => {
+            const value = (field as Field).value;
+            const format = field.query('.format').take();
+            switch (value) {
+              case 'date':
+                format.setComponent(Select);
+                format.setDataSource([
+                  { label: 'String类型的UTC时间戳 (毫秒)', value: 'string' },
+                  { label: 'yyyy-MM-dd', value: 'yyyy-MM-dd' },
+                  { label: 'yyyy-MM-dd HH:mm:ss', value: 'yyyy-MM-dd HH:mm:ss' },
+                  { label: 'yyyy-MM-dd HH:mm:ss EE', value: 'yyyy-MM-dd HH:mm:ss EE' },
+                  { label: 'yyyy-MM-dd HH:mm:ss zzz', value: 'yyyy-MM-dd HH:mm:ss zzz' },
+                ]);
+                format.setValue('string');
+                break;
+              case 'string':
+                format.setComponent(PreviewText.Input);
+                format.setValue('--');
+                break;
+              case 'number':
+                format.setComponent(Input);
+                format.setValue('%.xf');
+                break;
+              case 'file':
+                format.setComponent(Select);
+                format.setDataSource([
+                  { label: '视频', value: 'video' },
+                  { label: '图片', value: 'img' },
+                  { label: '全部', value: 'any' },
+                ]);
+                format.setValue('any');
+                break;
+              case 'other':
+                format.setComponent(PreviewText.Input);
+                format.setValue('--');
+                break;
+            }
           });
         },
       }),
@@ -197,11 +220,12 @@ const Detail = observer(() => {
         type: 'string',
         'x-decorator': 'FormItem',
         'x-component': 'Select',
-        enum: [
-          { label: '测试配置1', value: 'test1' },
-          { label: '测试配置2', value: 'test2' },
-          { label: '测试配置3', value: 'test3' },
-        ],
+        // enum: [
+        //   {label: '测试配置1', value: 'test1'},
+        //   {label: '测试配置2', value: 'test2'},
+        //   {label: '测试配置3', value: 'test3'},
+        // ],
+        'x-reactions': '{{useAsyncDataSource(getConfig)}}',
         'x-visible': id !== 'email',
       },
       template: {
@@ -587,6 +611,7 @@ const Detail = observer(() => {
                 name: {
                   type: 'string',
                   'x-decorator': 'FormItem',
+                  required: true,
                   'x-component': 'Input',
                 },
               },
@@ -600,11 +625,13 @@ const Detail = observer(() => {
                   type: 'string',
                   'x-decorator': 'FormItem',
                   'x-component': 'Select',
+                  required: true,
                   enum: [
+                    { label: '字符串', value: 'string' },
                     { label: '时间', value: 'date' },
                     { label: '数字', value: 'number' },
-                    { label: '字符串', value: 'string' },
                     { label: '文件', value: 'file' },
+                    { label: '其他', value: 'other' },
                   ],
                 },
               },
@@ -613,18 +640,12 @@ const Detail = observer(() => {
               type: 'void',
               'x-component': 'ArrayTable.Column',
               'x-component-props': { title: '格式', width: '150px' },
+              required: true,
               properties: {
                 format: {
                   type: 'string',
                   'x-decorator': 'FormItem',
-                  'x-component': 'Select',
-                  enum: [
-                    { label: 'String类型的UTC时间戳 (毫秒)', value: 'string' },
-                    { label: 'yyyy-MM-dd', value: 'yyyy-MM-dd' },
-                    { label: 'yyyy-MM-dd HH:mm:ss', value: 'yyyy-MM-dd HH:mm:ss' },
-                    { label: 'yyyy-MM-dd HH:mm:ss EE', value: 'yyyy-MM-dd HH:mm:ss EE' },
-                    { label: 'yyyy-MM-dd HH:mm:ss zzz', value: 'yyyy-MM-dd HH:mm:ss zzz' },
-                  ],
+                  'x-component': 'PreviewText.Input',
                 },
               },
             },
@@ -647,7 +668,7 @@ const Detail = observer(() => {
         <Row>
           <Col span={10}>
             <Form className={styles.form} form={form} layout={'vertical'}>
-              <SchemaField schema={schema} />
+              <SchemaField schema={schema} scope={{ getConfig, useAsyncDataSource }} />
               <FormButtonGroup.Sticky>
                 <FormButtonGroup.FormItem>
                   <Submit onSubmit={handleSave}>保存</Submit>