feat: 装修新增选择活动页drawer

src/pages/pageCustomized/Drawers/ActivityDrawer/index.tsx

+import React, { useState, useRef, useMemo } from 'react';
+import { history } from 'umi';
+import { Drawer, Button, Radio, message, Space, Typography } from 'antd';
+import { PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons';
+import { StandardTable } from 'god';
+
+import { PublicApi } from '@/services/api';
+import { formatTimeString } from '@/utils'
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import Search from '@/components/NiceForm/components/Search';
+import DateRangePickerUnix from '@/components/NiceForm/components/DateRangePickerUnix'
+import Submit from '@/components/NiceForm/components/Submit'
+import StatusTag from '@/components/StatusTag'
+
+import * as tableSchemas from './schema';
+
+const options = [
+  { label: '平台', value: 1 },
+  { label: '商家', value: 2 },
+];
+
+interface ActivityDrawerProps {
+  visible: boolean,
+  onClose: () => void,
+  onConfirm?: (record) => void
+}
+
+const ActivityDrawer: React.FC<ActivityDrawerProps> = (props: ActivityDrawerProps) => {
+  const { visible, onClose, onConfirm } = props;
+  const { query: { shopId, environment } }: any = history.location
+  const [type, setType] = useState(1);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
+  const [selectedRows, setSelectedRows] = useState<any>([]);
+  const ref = useRef<any>({});
+  const _schema = useMemo(() => {
+    return tableSchemas[`ActivitySchema${type}`]
+  }, [type])
+
+  const columns = [
+    {
+      title: '活动信息',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: any, record: any) => (
+        <Space direction='vertical' style={{ width: 300 }}>
+          {text}
+          <Typography.Text type='secondary'>ID:{record.id}</Typography.Text>
+        </Space>
+      )
+    },
+    {
+      title: '类型',
+      dataIndex: 'templateName',
+      key: 'templateName'
+    },
+    {
+      title: '有效期',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      render: (_: any, record: any) => <>
+          <div><PlayCircleOutlined />&nbsp;{formatTimeString(record.startTime)}</div>
+          <div><PoweroffOutlined />&nbsp;{formatTimeString(record.endTime)}</div>
+      </>,
+      width: 180
+    },
+    {
+      title: '所属',
+      dataIndex: 'shopName',
+      key: 'shopName',
+      render: (text: any, record: any) => (
+        <Space direction='vertical' style={{ width: 300 }}>
+          <StatusTag title={record.type === 1 ? '平台' : '商家'} type={record.type === 1 ? 'success' : 'primary'} />
+          {record.type === 2 && <Typography.Text type='secondary'>{text}</Typography.Text>}
+        </Space>
+      )
+    },
+  ]
+
+  const _onConfirm = () => {
+    if (selectedRows.length > 0) {
+      onConfirm?.(selectedRows[0]);
+    } else {
+      message.warning('请选择一条记录')
+    }
+  }
+
+  const _onRadioChange = (e: any) => {
+    setType(e.target.value);
+    ref?.current?.reload();
+  }
+
+  const fetchTableData = async (params: any) => {
+    const _params = { ...params, environment, type, shopId }
+    const { data } = await PublicApi.getTemplateWebActivityPageListAdorn(_params);
+    return data;
+  }
+  const rowSelection: any = {
+    selectedRowKeys,
+    onChange: (selectedRowKeys, selectedRows) => {
+      setSelectedRows(selectedRows);
+      setSelectedRowKeys(selectedRowKeys)
+    },
+    type: 'radio'
+  }
+
+  return (
+    <Drawer
+      width={1200}
+      title={'选择活动'}
+      visible={visible}
+      onClose={onClose}
+      footer={
+        <div style={{ textAlign: 'right', }}>
+          <Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
+          <Button onClick={_onConfirm} type="primary">确定</Button>
+        </div>
+      }
+    >
+      <StandardTable
+        keepAlive={false}
+        fetchTableData={params => fetchTableData(params)}
+        columns={columns}
+        currentRef={ref}
+        rowSelection={rowSelection}
+        rowKey={'id'}
+        formilyLayouts={{
+          justify: 'space-between'
+        }}
+        formilyProps={{
+          ctx: {
+            inline: false,
+            schema: _schema,
+            effects: ($, actions) => {
+              useStateFilterSearchLinkageEffect(
+                $,
+                actions,
+                'name',
+                FORM_FILTER_PATH,
+              );
+            },
+            components: { ModalSearch: Search, DateRangePickerUnix, Submit },
+          },
+          layouts: {
+            order: 1,
+            span: 16
+          }
+        }}
+        formilyChilds={{
+          children: (
+            <div style={{ textAlign: 'right' }}>
+              <Radio.Group
+                options={options}
+                onChange={_onRadioChange}
+                value={type}
+                optionType="button"
+              />
+            </div>
+          ),
+          layouts: {
+            order: 2,
+            span: 8
+          }
+        }}
+      />
+    </Drawer>
+  )
+}
+
+export default ActivityDrawer;

src/pages/pageCustomized/Drawers/ActivityDrawer/schema.ts

+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+
+export const ActivitySchema1: ISchema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      'x-component': 'ModalSearch',
+      'x-component-props': {
+        placeholder: '搜索',
+        allowClear: true,
+        align: 'flex-start',
+      },
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        rowStyle: {
+          flexWrap: 'nowrap',
+          justifyContent: 'flex-start',
+        },
+        colStyle: {
+          marginRight: 20,
+        },
+      },
+      properties: {
+        '[startTime,endTime]': {
+          type: 'array',
+          'x-component': 'DateRangePickerUnix',
+          'x-component-props': {
+            placeholder: ['开始时间','结束时间'],
+            allowClear: true,
+          },
+        },
+        sumbit: {
+          'x-component': 'Submit',
+          'x-mega-props': {
+            span: 1,
+          },
+          'x-component-props': {
+            children: '查询',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const ActivitySchema2: ISchema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      'x-component': 'ModalSearch',
+      'x-component-props': {
+        placeholder: '搜索',
+        allowClear: true,
+        align: 'flex-start',
+      },
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        rowStyle: {
+          flexWrap: 'nowrap',
+          justifyContent: 'flex-start',
+        },
+        colStyle: {
+          marginRight: 20,
+        },
+      },
+      properties: {
+        memberName: {
+          type: 'string',
+          'x-component-props': {
+            placeholder: '商家名称',
+            allowClear: true,
+          },
+        },
+        '[startTime,endTime]': {
+          type: 'array',
+          'x-component': 'DateRangePickerUnix',
+          'x-component-props': {
+            placeholder: ['开始时间','结束时间'],
+            allowClear: true,
+          },
+        },
+        sumbit: {
+          'x-component': 'Submit',
+          'x-mega-props': {
+            span: 1,
+          },
+          'x-component-props': {
+            children: '查询',
+          },
+        },
+      },
+    },
+  },
+};

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bannerClient/index.tsx

@@ -7,6 +7,7 @@ import UploadImage from '@/components/UploadImage';
 import { priceFormat } from '@/utils/numberFomat';
 
 import MixDrawer from '../../../../Drawers/MixDrawer';
+import ActivityDrawer from '../../../../Drawers/ActivityDrawer';
 
 import styles from './index.less';
 
@@ -79,6 +80,7 @@ const RedirectTypeList_B = [
 const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) => {
   const { name, img, id, type, property = 2, selectedKey } = props;
   const [mixVisible, setMixVisible] = useState<boolean>(false);
+  const [actVisible, setActVisible] = useState<boolean>(false);
   const [record, setRecord] = useState<any>();
 
   const _isNull = (list) => {
@@ -166,8 +168,15 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
     setMixVisible(false);
   }
 
+  const _onActClose = () => {
+    setActVisible(false);
+  }
+
   const _onChoose = () => {
     switch (type) {
+      case 2:
+        setActVisible(true);
+        break;
       case 3:
       case 4:
         setMixVisible(true);
@@ -178,6 +187,10 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
   const _onChooseConfirm = (record) => {
     setRecord(record);
     switch (type) {
+      case 2:
+        console.log(record);
+        _onActClose();
+        break;
       case 3:
       case 4:
         changeProps({
@@ -250,6 +263,11 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
         onConfirm={_onChooseConfirm}
         visible={mixVisible}
       />
+      <ActivityDrawer
+        visible={actVisible}
+        onClose={_onActClose}
+        onConfirm={_onChooseConfirm}
+      />
     </div>
   )
 }