src/common/components/formFields/MyUploadImages.scss

@@ -6,7 +6,10 @@
     gap: 8px !important;
     align-items: flex-start !important;
   }
-
+  .ant-upload-list-item-name {
+    width: 300px;
+    overflow: hidden;
+  }
   .ant-upload-list-item {
     margin: 0 !important;
     margin-bottom: 0 !important;

src/pages/moments/list/components/infoPreview.tsx

@@ -0,0 +1,70 @@
+import { MyBetaModalFormProps } from '@/common';
+import { PlayCircleFilled } from '@ant-design/icons';
+import { ProCard } from '@ant-design/pro-components';
+import './style.scss';
+export default function infoPreview(props: MyBetaModalFormProps) {
+  return (
+    <>
+      {props?.item?.type === 'Image' ? (
+        <div className="card_info_preview">
+          <div className="title">内容预览：朋友圈/图片消息</div>
+          <ProCard>
+            <div className="preview_header">
+              <div className="avatar">员工头像</div>
+              <div className="info">
+                <div className="name">员工的名字</div>
+                <div className="desc">此处显示“发送文案”输入的文案</div>
+              </div>
+            </div>
+            <div className="preview_content">
+              <div className="item"></div>
+              <div className="item"></div>
+              <div className="item"></div>
+              <div className="item"></div>
+            </div>
+          </ProCard>
+        </div>
+      ) : props?.item?.type === 'Video' ? (
+        <div className="card_info_preview">
+          <div className="title">内容预览：朋友圈/视频消息</div>
+          <ProCard>
+            <div className="preview_header">
+              <div className="avatar">员工头像</div>
+              <div className="info">
+                <div className="name">员工的名字</div>
+                <div className="desc">此处显示“发送文案”输入的文案</div>
+              </div>
+            </div>
+            <div className="preview_content">
+              <div className="video_preview">
+                <PlayCircleFilled style={{ fontSize: 40 }} />
+              </div>
+            </div>
+          </ProCard>
+        </div>
+      ) : props?.item?.type === 'Link' ||
+        props?.item?.type === 'MiniProgram' ? (
+        <div className="card_info_preview">
+          <div className="title">内容预览：朋友圈/转载链接消息</div>
+          <ProCard>
+            <div className="preview_header">
+              <div className="avatar">员工头像</div>
+              <div className="info">
+                <div className="name">员工的名字</div>
+                <div className="desc">此处显示“发送文案”输入的文案</div>
+              </div>
+            </div>
+            <div className="preview_content cover_image_preview">
+              <div className="cover_image">封面图</div>
+              <div className="cover_info">
+                此处显示“链接标题”输入的文案，文案字数多时可以换行显示
+              </div>
+            </div>
+          </ProCard>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}

src/pages/moments/list/components/style.scss

@@ -0,0 +1,76 @@
+.card_info_preview {
+  background-color: #f8f8f8;
+  width: 400px;
+  padding: 15px;
+  margin-left: 10px;
+  border-radius: 10px;
+  .title {
+    border-left: 3px solid #1890ff;
+    padding-left: 15px;
+    margin-bottom: 12px;
+  }
+  .preview_header {
+    display: flex;
+    align-items: center;
+    padding-bottom: 15px;
+    .avatar {
+      width: 60px;
+      height: 60px;
+      background-color: #f8f8f8;
+      font-size: 17px;
+      font-weight: 500;
+      padding: 8px;
+      text-align: center;
+      line-height: 20px;
+    }
+    .info {
+      padding-left: 15px;
+      .name {
+        font-size: 16px;
+        font-weight: 500;
+      }
+      .desc {
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+  .preview_content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .item {
+      width: 70px;
+      height: 70px;
+      background-color: #f8f8f8;
+    }
+    .video_preview {
+      width: 150px;
+      height: 150px;
+      background-color: #f8f8f8;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .cover_image_preview {
+    background-color: #f8f8f8;
+    padding: 10px;
+    border-radius: 10px;
+    .cover_image {
+      width: 70px;
+      height: 70px;
+      background-color: #eee;
+      text-align: center;
+      line-height: 70px;
+      font-size: 17px;
+      font-weight: 500;
+    }
+    .cover_info {
+      flex: 1;
+      padding-left: 10px;
+      font-size: 12px;
+      height: 70px;
+    }
+  }
+}

src/pages/moments/list/index.tsx

@@ -6,10 +6,15 @@ import {
   usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
+import {
+  CustomerMomentsChannelEnum,
+  CustomerMomentsContentTypeEnum,
+  CustomerMomentsPushTypeEnum,
+  CustomerMomentsTaskEndTypeEnum,
+} from '@/gen/Enums';
 import { ProTable } from '@ant-design/pro-components';
-import { Space } from 'antd';
+import { Card, Space } from 'antd';
 import Create from './modals/Create';
-import Update from './modals/Update';
 
 export default function Index({ title = '推送任务' }) {
   // 注册当前页面为标签页
@@ -44,21 +49,83 @@ export default function Index({ title = '推送任务' }) {
           MyColumns.ID(),
           {
             title: '名称',
-            dataIndex: 'name',
+            dataIndex: 'title',
+            render: (_, i: any) => {
+              return (
+                <Card size="small">
+                  <Space align="start">
+                    <img src={i?.cover_image[0]?.url} width={45} height={45} />
+                    <div>{i?.title}</div>
+                  </Space>
+                </Card>
+              );
+            },
+          },
+          MyColumns.EnumTag({
+            title: '发送渠道',
+            dataIndex: 'channel',
+            valueEnum: CustomerMomentsChannelEnum,
+          }),
+          MyColumns.EnumTag({
+            title: '内容类型',
+            dataIndex: 'content_type',
+            valueEnum: CustomerMomentsContentTypeEnum,
+          }),
+          MyColumns.EnumTag({
+            title: '推送类型',
+            dataIndex: 'push_type',
+            valueEnum: CustomerMomentsPushTypeEnum,
+          }),
+          {
+            title: '定时发送时间',
+            dataIndex: 'scheduled_time',
+            search: false,
+          },
+
+          MyColumns.EnumTag({
+            title: '任务结束类型',
+            dataIndex: 'task_end_type',
+            valueEnum: CustomerMomentsTaskEndTypeEnum,
+            search: false,
+          }),
+          {
+            title: '任务结束天数',
+            dataIndex: 'task_days',
+            search: false,
+          },
+          {
+            title: '定时结束',
+            dataIndex: 'task_end_time',
+            search: false,
           },
           MyColumns.UpdatedAt(),
           MyColumns.CreatedAt(),
           MyColumns.Option({
             render: (_, item: any, index, action) => (
               <Space key={index}>
-                <Update item={item} reload={action?.reload} title={title} />
+                {/* <Update item={item} reload={action?.reload} title={title} /> */}
-                <MyButtons.Delete
+                <MyButtons.Default
+                  isConfirm
+                  title="发送"
+                  type="primary"
+                  disabled={
+                    item?.push_type === 'ScheduledPush' ||
+                    item?.push_status === 'Pushed'
+                  }
+                  description="确定发送？"
+                  onConfirm={() => {
+                    Apis.Customer.CustomerMoments.Send({
+                      id: item.id,
+                    }).then(() => action?.reload());
+                  }}
+                />
+                {/* <MyButtons.Delete
                   onConfirm={() =>
-                    Apis.Customer.CustomerMomentCategories.Delete({
+                    Apis.Customer.CustomerMoments.Delete({
                       id: item.id,
                     }).then(() => action?.reload())
                   }
-                />
+                /> */}
               </Space>
             ),
           }),

src/pages/moments/list/modals/Create.tsx

@@ -18,11 +18,16 @@ import {
   CustomerMomentsTaskEndTypeEnum,
 } from '@/gen/Enums';
 import { BetaSchemaForm } from '@ant-design/pro-components';
-import { Button, message, Space, Steps } from 'antd';
+import { Button, Form, message, Space, Steps } from 'antd';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import MyinfoPreview from '../components/infoPreview';
+
 export default function Create(props: MyBetaModalFormProps) {
   const [current, setCurrent] = useState(0);
+  const [getContentType, setContentType] = useState('');
   const [formData, setFormData] = useState<any>({});
+  const [form] = Form.useForm();
+  const modalRef: any = useRef(null);
   const steps = [
     {
       title: '创建任务',
@@ -52,7 +57,7 @@ export default function Create(props: MyBetaModalFormProps) {
               title: '推送类型',
               valueEnum: CustomerMomentsPushTypeEnum,
               required: true,
-              colProps: { span: 8 },
+              colProps: { span: 9 },
             }),
             {
               name: ['push_type'],
@@ -81,7 +86,7 @@ export default function Create(props: MyBetaModalFormProps) {
               title: '任务结束类型',
               valueEnum: CustomerMomentsTaskEndTypeEnum,
               required: true,
-              colProps: { span: 8 },
+              colProps: { span: 9 },
             }),
             {
               name: ['task_end_type'],
@@ -93,10 +98,11 @@ export default function Create(props: MyBetaModalFormProps) {
                         key: 'task_days',
                         title: '任务结束天数',
                         colProps: { span: 10 },
-                        valueType: 'number',
+                        valueType: 'digit',
                         formItemProps: { ...rulesHelper.number },
                         fieldProps: {
                           suffix: '天结束',
+                          style: { width: '200px' },
                         },
                       },
                     ]
@@ -168,6 +174,7 @@ export default function Create(props: MyBetaModalFormProps) {
           name: ['content_type'],
           valueType: 'dependency',
           columns: ({ content_type }: any) => {
+            setContentType(content_type);
             return content_type === 'MiniProgram'
               ? [
                   {
@@ -228,76 +235,84 @@ export default function Create(props: MyBetaModalFormProps) {
       title={`创建${props.title}`}
       type="primary"
       size={'middle'}
-      width="800px"
+      myRef={modalRef}
+      width="1200px"
       node={
         <Space direction="vertical">
-          <Steps current={current} items={steps} />
+          <div style={{ width: '1160px' }}>
-          <BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
+            <Steps
-            {...MyModalFormProps.props}
+              style={{ padding: '50px 150px 30px 150px' }}
-            title={`添加${props.title}`}
+              current={current}
-            wrapperCol={{ span: 24 }}
+              items={steps}
-            width="800px"
+            />
-            layoutType="Form"
+          </div>
-            trigger={<MyButtons.Create title={`添加${props.title}`} />}
+          <Space align="start">
-            onFinish={async (values) => {
+            <div style={{ width: '700px' }}>
-              setFormData(values);
+              <BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
-              console.log('提交的数据2:', values);
+                {...MyModalFormProps.props}
-              if (current < steps.length - 1) {
+                title={`添加${props.title}`}
-                handleNext();
+                wrapperCol={{ span: 24 }}
-              } else {
+                width="800px"
-                let data = { ...formData, ...values };
+                form={form}
-                Apis.Customer.CustomerMoments.Store({
+                layoutType="Form"
-                  ...data,
+                trigger={<MyButtons.Create title={`添加${props.title}`} />}
-                  one_moment_categories_id: formData?.moment_categories_ids[0],
+                onFinish={async (values) => {
-                  two_moment_categories_id: formData?.moment_categories_ids[1],
+                  setFormData(values);
-                })
+                  if (current < steps.length - 1) {
-                  .then(() => {
+                    handleNext();
-                    props.reload?.();
+                  } else {
-                    message.success(props.title + '成功');
+                    let data = { ...formData, ...values };
-                    return true;
+                    Apis.Customer.CustomerMoments.Store({
-                  })
+                      ...data,
-                  .catch(() => false);
+                      one_moment_categories_id:
-              }
+                        formData?.moment_categories_ids[0],
-            }}
+                      two_moment_categories_id:
-            // onFinish={async (values) =>
+                        formData?.moment_categories_ids[1],
-            //   Apis.Customer.CustomerMomentCategories.Store(values)
+                    })
-            //     .then(() => {
+                      .then(() => {
-            //       props.reload?.();
+                        props.reload?.();
-            //       message.success(props.title + '成功');
+                        message.success('提交成功！');
-            //       return true;
+                        form.setFieldsValue({});
-            //     })
+                        modalRef.current?.close();
-            //     .catch(() => false)
+                        setCurrent(0);
-            // }
+                        return true;
-            columns={steps[current].columns}
+                      })
-            submitter={{
+                      .catch(() => false);
-              render: (props, dom) => {
+                  }
-                return (
+                }}
-                  <Space
+                columns={steps[current].columns}
-                    style={{ display: 'flex', justifyContent: 'flex-end' }}
+                submitter={{
-                  >
+                  render: (props) => {
-                    {current > 0 && (
+                    return (
-                      <Button onClick={handlePrev}>上一步</Button>
+                      <Space
-                    )}
+                        style={{ display: 'flex', justifyContent: 'flex-end' }}
-                    {current < steps.length - 1 ? (
-                      <Button
-                        type="primary"
-                        onClick={() => props.form?.submit?.()}
                       >
-                        下一步
+                        {current > 0 && (
-                      </Button>
+                          <Button onClick={handlePrev}>上一步</Button>
-                    ) : (
+                        )}
-                      <Button
+                        {current < steps.length - 1 ? (
-                        type="primary"
+                          <Button
-                        onClick={() => props.form?.submit?.()}
+                            type="primary"
-                      >
+                            onClick={() => props.form?.submit?.()}
-                        提交
+                          >
-                      </Button>
+                            下一步
-                    )}
+                          </Button>
-                  </Space>
+                        ) : (
-                );
+                          <Button
-              },
+                            type="primary"
-            }}
+                            onClick={() => props.form?.submit?.()}
-          />
+                          >
+                            提交
+                          </Button>
+                        )}
+                      </Space>
+                    );
+                  },
+                }}
+              />
+            </div>
+            {current ? <MyinfoPreview item={{ type: getContentType }} /> : ''}
+          </Space>
         </Space>
       }
     />