qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/groupChat/create/components/groupUser/previewGroupUser.tsx

import { Tabs, Typography } from 'antd';
import React, { useState } from 'react';
import { ShowGroupUserTable } from './addGroupObject';
const { Text } = Typography;

interface PreviewGroupUserProps {
    strategyList: { [x: string]: any }[];
    bookPlatForm: TASK_CREATE.BookPlatFormProps[]
    bookList: TASK_CREATE.BookListProps[]
}

/**
 * 群配置预览
 * @param param0 
 * @returns 
 */
const PreviewGroupUser: React.FC<PreviewGroupUserProps> = ({ strategyList, bookList, bookPlatForm }) => {

    /****************************************/
    const [activeKey, setActiveKey] = useState<string>('1')
    /****************************************/

    return <Tabs
        activeKey={activeKey}
        tabPosition='left'
        style={{
            height: '100%',
            width: '100%'
        }}
        onChange={(key) => { setActiveKey(key) }}
        items={strategyList.map((item, index) => {
            return {
                label: <div style={{ maxWidth: 100 }}><Text>{item.strategyName}</Text></div>,
                key: `${index + 1}`,
                children: <div style={{ width: '100%', height: 282, overflow: 'hidden', overflowY: 'auto' }}>
                    <ShowGroupUserTable
                        value={item.groupObjectList}
                        bookList={bookList}
                        bookPlatForm={bookPlatForm}
                        isPreview={true}
                    />
                </div>
            }
        })}
    />;
};

export default PreviewGroupUser;