@lxzy/code-snippet 0.0.5 → 0.0.8

package/src/pages/activityCenter/activitySystemManagement/add.tsx

@@ -0,0 +1,209 @@
+import React, { useRef } from 'react';
+import { message, Row, Col } from 'antd';
+import {
+  DrawerForm,
+  ProFormText,
+  ProFormCheckbox,
+  ProFormSelect,
+  ProFormRadio,
+  ProFormDependency,
+  ProFormDateTimeRangePicker,
+} from '@ant-design/pro-form';
+import moment from 'moment';
+import axios from 'axios';
+
+const sectionOptions = ['新机', '二手', '工业品', '融资'];
+const shopTypeOptions = ['总部', '经销商', '进口', '国产'];
+const categoryTagOptions = [
+  '机械加工',
+  '金属成型',
+  '塑料机械',
+  '印刷包装',
+  '纺织机械',
+  '食品加工',
+  '木材加工',
+  '电子制造',
+  '生产配套',
+];
+const strategyTagOptions = ['常态化', '拉新', '促活', '促销', '品牌联合推广'];
+const ipTagOptions = ['品牌A', '品牌B', '品牌C', '品牌D'];
+const industryTagOptions = ['制造业', '轻工业', '重工业', '服务业', '农业'];
+
+interface AddDrawerProps {
+  visible: boolean;
+  editingItem: any;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const AddDrawer: React.FC<AddDrawerProps> = ({
+  visible,
+  editingItem,
+  onClose,
+  onSuccess,
+}) => {
+  const formRef = useRef<any>();
+
+  const handleSubmit = async (values) => {
+    const { timeRange, ...rest } = values;
+    const payload = {
+      ...rest,
+      startTime: timeRange?.[0]?.format('YYYY-MM-DD HH:mm:ss') || '',
+      endTime: timeRange?.[1]?.format('YYYY-MM-DD HH:mm:ss') || '',
+    };
+    if (editingItem) {
+      await axios.post('/api/activity/update', {
+        ...payload,
+        id: editingItem.id,
+      });
+      message.success('编辑成功');
+    } else {
+      await axios.post('/api/activity/add', payload);
+      message.success('新增成功');
+    }
+    onSuccess();
+    return true;
+  };
+
+  return (
+    <DrawerForm
+      title={editingItem ? '编辑活动' : '新建活动'}
+      visible={visible}
+      onVisibleChange={(v) => {
+        if (!v) {
+          onClose();
+        }
+      }}
+      formRef={formRef}
+      width="80%"
+      drawerProps={{ destroyOnClose: true }}
+      key={editingItem?.id || 'add'}
+      initialValues={
+        editingItem
+          ? {
+              ...editingItem,
+              timeRange:
+                editingItem.startTime && editingItem.endTime
+                  ? [moment(editingItem.startTime), moment(editingItem.endTime)]
+                  : undefined,
+            }
+          : { targetGroup: 'all', supportFactoryRegister: 'no' }
+      }
+      onFinish={handleSubmit}
+    >
+      <ProFormText
+        name="name"
+        label="活动名称"
+        rules={[{ required: true, message: '请输入活动名称' }]}
+        placeholder="请输入"
+      />
+      <ProFormDateTimeRangePicker
+        name="timeRange"
+        label="活动时间范围"
+        rules={[{ required: true, message: '请选择活动时间范围' }]}
+        fieldProps={{ style: { width: '100%' } }}
+      />
+      <ProFormCheckbox.Group
+        name="section"
+        label="所属板块"
+        options={sectionOptions}
+        rules={[{ required: true, message: '请选择所属板块' }]}
+      />
+      <ProFormCheckbox.Group
+        name="shopTypes"
+        label="参与店铺类型"
+        options={shopTypeOptions}
+        rules={[{ required: true, message: '请选择参与店铺类型' }]}
+      />
+      <div
+        style={{
+          background: '#f5f5f5',
+          padding: 16,
+          borderRadius: 4,
+          marginBottom: 24,
+        }}
+      >
+        <div style={{ fontWeight: 500, marginBottom: 12 }}>活动标签</div>
+        <ProFormCheckbox.Group
+          name="categoryTags"
+          label="品类标签"
+          options={categoryTagOptions}
+        />
+        <Row gutter={16} align="middle" style={{ marginBottom: 24 }}>
+          <Col>
+            <ProFormCheckbox.Group
+              name="strategyTags"
+              label="策略标签"
+              options={strategyTagOptions}
+            />
+          </Col>
+          <Col>
+            <ProFormText
+              name="strategyCustomInput"
+              noStyle
+              placeholder="如有多个，请用/分割"
+              fieldProps={{ style: { width: 200 } }}
+            />
+          </Col>
+        </Row>
+        <ProFormSelect
+          name="ipTags"
+          label="IP标签"
+          mode="multiple"
+          placeholder="请选择，多选"
+          fieldProps={{ style: { width: 260 } }}
+          options={ipTagOptions.map((t) => ({ label: t, value: t }))}
+        />
+        <ProFormSelect
+          name="industryTags"
+          label="行业标签"
+          placeholder="请选择"
+          fieldProps={{ style: { width: 200 } }}
+          options={industryTagOptions.map((t) => ({ label: t, value: t }))}
+        />
+        <ProFormText
+          name="customTags"
+          label="自定义标签"
+          placeholder="如有多个，请用/分割"
+          fieldProps={{ style: { width: 300 } }}
+        />
+      </div>
+      <ProFormRadio.Group
+        name="targetGroup"
+        label="活动人群"
+        options={[
+          { label: '全用户', value: 'all' },
+          { label: '选择客群', value: 'select' },
+        ]}
+        rules={[{ required: true, message: '请选择活动人群' }]}
+      />
+      <ProFormDependency name={['targetGroup']}>
+        {({ targetGroup }) =>
+          targetGroup === 'select' ? (
+            <ProFormSelect
+              name="selectedGroup"
+              label=" "
+              placeholder="请选择选定人群"
+              fieldProps={{ style: { width: 300 } }}
+              options={[
+                { label: 'VIP客户', value: 'VIP客户' },
+                { label: '新用户', value: '新用户' },
+                { label: '活跃用户', value: '活跃用户' },
+              ]}
+            />
+          ) : null
+        }
+      </ProFormDependency>
+      <ProFormRadio.Group
+        name="supportFactoryRegister"
+        label="支持厂商报名"
+        options={[
+          { label: '否', value: 'no' },
+          { label: '是', value: 'yes' },
+        ]}
+      />
+    </DrawerForm>
+  );
+};
+
+export default AddDrawer;

package/src/pages/activityCenter/activitySystemManagement/addPages/components/ChannelLinkModal.tsx

@@ -0,0 +1,167 @@
+import React, { useRef, useState } from 'react';
+import { Modal, Button, Input, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import ProTable from '@ant-design/pro-table';
+import { ModalForm, ProFormText } from '@ant-design/pro-form';
+import axios from 'axios';
+
+interface ChannelLinkModalProps {
+  visible: boolean;
+  pageName: string;
+  pageId: number;
+  onClose: () => void;
+}
+
+const ChannelLinkModal: React.FC<ChannelLinkModalProps> = ({
+  visible,
+  pageName,
+  pageId,
+  onClose,
+}) => {
+  const actionRef = useRef<any>();
+  const [addVisible, setAddVisible] = useState(false);
+  const [editVisible, setEditVisible] = useState(false);
+  const [editingItem, setEditingItem] = useState<any>(null);
+
+  const handleAdd = async (values) => {
+    await axios.post('/api/activity/channelLink/add', {
+      ...values,
+      pageId,
+    });
+    message.success('新增成功');
+    setAddVisible(false);
+    actionRef.current?.reload();
+    return true;
+  };
+
+  const handleEdit = async (values) => {
+    await axios.post('/api/activity/channelLink/update', {
+      ...values,
+      id: editingItem.id,
+    });
+    message.success('编辑成功');
+    setEditVisible(false);
+    setEditingItem(null);
+    actionRef.current?.reload();
+    return true;
+  };
+
+  const handleDelete = async (record) => {
+    await axios.post('/api/activity/channelLink/delete', { id: record.id });
+    message.success('删除成功');
+    actionRef.current?.reload();
+  };
+
+  return (
+    <>
+      <Modal
+        title={pageName}
+        visible={visible}
+        onCancel={onClose}
+        footer={null}
+        width={900}
+      >
+        <ProTable
+          headerTitle={false}
+          toolBarRender={() => [
+            <Button
+              key="add"
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => setAddVisible(true)}
+            >
+              新建渠道链接
+            </Button>,
+          ]}
+          actionRef={actionRef}
+          rowKey="id"
+          request={async (params) => {
+            const { data: result } = await axios.get('/api/activity/channelLinkList', {
+              params: { ...params, pageId },
+            });
+            return {
+              data: result.data.list,
+              total: result.data.total,
+              success: result.success,
+            };
+          }}
+          columns={[
+            { title: '渠道中文', dataIndex: 'nameCn' },
+            { title: '渠道英文', dataIndex: 'nameEn' },
+            { title: '链接参数', dataIndex: 'link' },
+            { title: '创建时间', dataIndex: 'createTime' },
+            {
+              title: '操作',
+              valueType: 'option',
+              render: (_, record) => (
+                <>
+                  <Button type="link" size="small">查看二维码</Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    onClick={() => {
+                      setEditingItem(record);
+                      setEditVisible(true);
+                    }}
+                  >
+                    编辑
+                  </Button>
+                  <Button type="link" danger size="small" onClick={() => handleDelete(record)}>
+                    删除
+                  </Button>
+                </>
+              ),
+            },
+          ]}
+          pagination={false}
+          options={false}
+          search={false}
+        />
+      </Modal>
+
+      <ModalForm
+        title="新建渠道链接"
+        visible={addVisible}
+        onVisibleChange={setAddVisible}
+        onFinish={handleAdd}
+      >
+        <ProFormText
+          name="nameCn"
+          label="渠道中文"
+          rules={[{ required: true, message: '请输入渠道中文' }]}
+          placeholder="请输入"
+        />
+        <ProFormText
+          name="nameEn"
+          label="渠道英文"
+          rules={[{ required: true, message: '请输入渠道英文' }]}
+          placeholder="请输入"
+        />
+      </ModalForm>
+
+      <ModalForm
+        title="编辑渠道链接"
+        visible={editVisible}
+        onVisibleChange={setEditVisible}
+        onFinish={handleEdit}
+        initialValues={editingItem || {}}
+        key={editingItem?.id}
+      >
+        <ProFormText
+          name="nameCn"
+          label="渠道中文"
+          rules={[{ required: true, message: '请输入渠道中文' }]}
+          placeholder="请输入"
+        />
+        <ProFormText
+          name="nameEn"
+          label="渠道英文"
+          rules={[{ required: true, message: '请输入渠道英文' }]}
+          placeholder="请输入"
+        />
+      </ModalForm>
+    </>
+  );
+};
+
+export default ChannelLinkModal;

package/src/pages/activityCenter/activitySystemManagement/addPages/components/CustomLink.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import axios from 'axios';
+
+const CustomLink: React.FC = () => {
+  return (
+    <div>
+      <ProTable
+        headerTitle={false}
+        toolBarRender={() => [
+          <Button key="add" type="primary">新建自定义链接</Button>,
+        ]}
+        rowKey="id"
+        request={async (params) => {
+          const { data: result } = await axios.get('/api/activity/customLinkList', { params });
+          return { data: result.data.list, total: result.data.total, success: result.success };
+        }}
+        columns={[
+          { title: '跳转类型', dataIndex: 'type' },
+          { title: '页面路径', dataIndex: 'path' },
+          { title: '最近更新时间', dataIndex: 'updateTime' },
+          {
+            title: '操作',
+            valueType: 'option',
+            render: () => (
+              <>
+                <Button type="link" size="small">编辑</Button>
+                <Button type="link" danger size="small">删除</Button>
+              </>
+            ),
+          },
+        ]}
+        pagination={false}
+        options={false}
+      />
+    </div>
+  );
+};
+
+export default CustomLink;

package/src/pages/activityCenter/activitySystemManagement/addPages/components/CustomPage.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import axios from 'axios';
+import ChannelLinkModal from './ChannelLinkModal';
+
+const CustomPage: React.FC = () => {
+  const [channelLinkVisible, setChannelLinkVisible] = useState(false);
+  const [currentPage, setCurrentPage] = useState<any>(null);
+
+  return (
+    <div>
+      <ProTable
+        headerTitle={false}
+        search={{ labelWidth: 'auto' }}
+        toolBarRender={() => [
+          <Button key="relate" type="primary">关联自定义页面</Button>,
+          <Button key="add" type="primary">新建页面</Button>,
+        ]}
+        rowKey="id"
+        request={async (params) => {
+          const { data: result } = await axios.get('/api/activity/customPageList', { params });
+          return { data: result.data.list, total: result.data.total, success: result.success };
+        }}
+        columns={[
+          { title: '页面名称', dataIndex: 'name' },
+          { title: '页面路径', dataIndex: 'path' },
+          { title: '状态', dataIndex: 'status' },
+          { title: '关联活动', dataIndex: 'activity' },
+          { title: '是否可分享', dataIndex: 'canShare', render: (_, record) => (record.canShare ? '是' : '否') },
+          { title: '最近更新时间', dataIndex: 'updateTime' },
+          {
+            title: '操作',
+            valueType: 'option',
+            width: 300,
+            render: (_, record) => (
+              <>
+                <Button type="link" size="small">详情</Button>
+                <Button type="link" size="small">编辑</Button>
+                {record.status === '已通过' && <Button type="link" size="small">复制</Button>}
+                <Button type="link" danger size="small">删除</Button>
+                {record.status === '已通过' ? (
+                  <Button
+                    type="link"
+                    size="small"
+                    onClick={() => {
+                      setCurrentPage(record);
+                      setChannelLinkVisible(true);
+                    }}
+                  >
+                    设置渠道链接
+                  </Button>
+                ) : (
+                  <Button type="link" size="small">提审</Button>
+                )}
+              </>
+            ),
+          },
+        ]}
+        pagination={false}
+        options={false}
+      />
+
+      {channelLinkVisible && (
+        <ChannelLinkModal
+          visible={channelLinkVisible}
+          pageName={currentPage?.name || ''}
+          pageId={currentPage?.id}
+          onClose={() => {
+            setChannelLinkVisible(false);
+            setCurrentPage(null);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CustomPage;

package/src/pages/activityCenter/activitySystemManagement/addPages/components/SystemPage.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import axios from 'axios';
+
+const SystemPage: React.FC = () => {
+  return (
+    <div>
+      <ProTable
+        headerTitle={false}
+        search={{ labelWidth: 'auto' }}
+        toolBarRender={() => [
+          <Button key="add" type="primary">
+            关联系统页面
+          </Button>,
+        ]}
+        rowKey="id"
+        request={async (params) => {
+          const { data: result } = await axios.get('/api/activity/systemPageList', { params });
+          return { data: result.data.list, total: result.data.total, success: result.success };
+        }}
+        columns={[
+          { title: '页面名称', dataIndex: 'name' },
+          { title: '页面路径', dataIndex: 'path' },
+          { title: '状态', dataIndex: 'status' },
+          { title: '最近更新时间', dataIndex: 'updateTime' },
+          {
+            title: '操作',
+            valueType: 'option',
+            render: () => <Button type="primary" danger size="small">删除</Button>,
+          },
+        ]}
+        pagination={false}
+        options={false}
+      />
+    </div>
+  );
+};
+
+export default SystemPage;

package/src/pages/activityCenter/activitySystemManagement/addPages/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import SystemPage from './components/SystemPage';
+import CustomPage from './components/CustomPage';
+import CustomLink from './components/CustomLink';
+
+const AddPages: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('system');
+
+  const tabContent = {
+    system: <SystemPage />,
+    custom: <CustomPage />,
+    link: <CustomLink />,
+  };
+
+  return (
+    <PageContainer
+      title="春季内购会"
+      tabList={[
+        { tab: '系统页面', key: 'system' },
+        { tab: '自定义页面', key: 'custom' },
+        { tab: '自定义链接', key: 'link' },
+      ]}
+      tabActiveKey={activeTab}
+      onTabChange={(key) => setActiveTab(key)}
+    >
+      {tabContent[activeTab]}
+    </PageContainer>
+  );
+};
+
+export default AddPages;