fix:更新优化推送

2025-09-30 14:30:47 +08:00 · 2025-09-30 14:30:47 +08:00 · 4f9f5d3668
commit 4f9f5d3668
parent 1ee118ed66
5 changed files with 311 additions and 80 deletions
--- a/src/common/components/formFields/MyUploadImages.scss
+++ b/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;
--- a/src/pages/moments/list/components/infoPreview.tsx
+++ b/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>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}
--- a/src/pages/moments/list/components/style.scss
+++ b/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;
+    }
+  }
+}
--- a/src/pages/moments/list/index.tsx
+++ b/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} />
-                <MyButtons.Delete
+                {/* <Update item={item} reload={action?.reload} title={title} /> */}
+                <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>
            ),
          }),
--- a/src/pages/moments/list/modals/Create.tsx
+++ b/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 { useState } from 'react';
+import { Button, Form, message, Space, Steps } from 'antd';
+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,49 +235,54 @@ 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' }}>
+            <Steps
+              style={{ padding: '50px 150px 30px 150px' }}
+              current={current}
+              items={steps}
+            />
+          </div>
+          <Space align="start">
+            <div style={{ width: '700px' }}>
              <BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
                {...MyModalFormProps.props}
                title={`添加${props.title}`}
                wrapperCol={{ span: 24 }}
                width="800px"
+                form={form}
                layoutType="Form"
                trigger={<MyButtons.Create title={`添加${props.title}`} />}
                onFinish={async (values) => {
                  setFormData(values);
-              console.log('提交的数据2:', values);
                  if (current < steps.length - 1) {
                    handleNext();
                  } else {
                    let data = { ...formData, ...values };
                    Apis.Customer.CustomerMoments.Store({
                      ...data,
-                  one_moment_categories_id: formData?.moment_categories_ids[0],
-                  two_moment_categories_id: formData?.moment_categories_ids[1],
+                      one_moment_categories_id:
+                        formData?.moment_categories_ids[0],
+                      two_moment_categories_id:
+                        formData?.moment_categories_ids[1],
                    })
                      .then(() => {
                        props.reload?.();
-                    message.success(props.title + '成功');
+                        message.success('提交成功！');
+                        form.setFieldsValue({});
+                        modalRef.current?.close();
+                        setCurrent(0);
                        return true;
                      })
                      .catch(() => false);
                  }
                }}
-            // onFinish={async (values) =>
-            //   Apis.Customer.CustomerMomentCategories.Store(values)
-            //     .then(() => {
-            //       props.reload?.();
-            //       message.success(props.title + '成功');
-            //       return true;
-            //     })
-            //     .catch(() => false)
-            // }
                columns={steps[current].columns}
                submitter={{
-              render: (props, dom) => {
+                  render: (props) => {
                    return (
                      <Space
                        style={{ display: 'flex', justifyContent: 'flex-end' }}
@ -298,6 +310,9 @@ export default function Create(props: MyBetaModalFormProps) {
                  },
                }}
              />
+            </div>
+            {current ? <MyinfoPreview item={{ type: getContentType }} /> : ''}
+          </Space>
        </Space>
      }
    />