import React, { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react'; import DragTable from '@/components/DragTable/DragTable'; import { Button, Space, Tooltip } from 'antd'; import { DeleteOutlined } from '@ant-design/icons'; import lodash from 'lodash'; import HomeConfigModal from './HomeConfigModal'; import styles from './HomePageConfigs.less'; const HomePageConfigs = (props, ref) => { const { productList, client, roleHomePages } = props; const [orderTable, setOrderTable] = useState([]); const [visible, setVisible] = useState(false); const [modalType, setModalType] = useState(); const [currentPageConfig, setCurrentPageConfig] = useState({}); const count = useRef(0); useImperativeHandle(ref, () => ({ getHomePageConfig: () => orderTable, })); useEffect(() => { console.log(roleHomePages, 'homePageConfig'); if (!roleHomePages) { return; } let list = roleHomePages.map(item => { let obj = { ...item, keyIndex: count.current }; count.current += 1; return obj; }); setOrderTable(list); }, [roleHomePages]); // 拖拽回调函数 const dragCallBack = data => { if (data) { console.log(data); setOrderTable(data); } }; const addHomePage = () => { let obj = { productType: productList[0].PackageName, homePage: '', roleld: [], roleName: [], keyIndex: count.current, }; setModalType('add'); setCurrentPageConfig(obj); setVisible(true); }; const delUser = (e, index) => { e.stopPropagation(); let list = lodash.cloneDeep(orderTable); list.splice(index, 1); setOrderTable(list); }; const onsubmit = val => { let list = lodash.cloneDeep(orderTable); console.log(list, currentPageConfig); if (modalType === 'add') { count.current += 1; list.push(val); } else { let index = list.findIndex(item => item.keyIndex === currentPageConfig.keyIndex); list[index] = val; } setOrderTable(list); }; const columns = [ // { // title: '序号', // dataIndex: 'index', // width: 50, // key: 'index', // }, { title: '产品类型', dataIndex: 'productType', width: 100, key: 'productType', }, { title: '主页Url', dataIndex: 'homePage', width: 150, key: 'homePage', ellipsis: { showTitle: false, }, render: (text, record, index) => ( <Tooltip placement="left" title={text}> {text} </Tooltip> ), }, { title: '角色', dataIndex: 'roleName', width: 150, key: 'roleName', ellipsis: { showTitle: false, }, render: (text, record, index) => <Tooltip title={text}>{text}</Tooltip>, }, { title: '操作', dataIndex: '', width: 80, align: 'center', key: '', render: (text, record, index) => ( <> <Space> {/* <Tooltip title="编辑默认承办人"> <EditTwoTone onClick={() => toEdit(record, index)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> */} <DeleteOutlined onClick={e => delUser(e, index)} style={{ fontSize: '16px', color: '#e86060' }} /> </Space> </> ), }, ]; return ( <> <div className={styles.btnBox}> <Button onClick={addHomePage}>新增角色主页配置</Button> </div> <DragTable bordered style={{ marginBottom: '10px' }} rowKey={record => record.keyIndex} columns={columns} dataSource={orderTable} pagination={false} size="small" dragCallBack={dragCallBack} onClick={record => { setCurrentPageConfig(record); setVisible(true); setModalType('edit'); console.log(record); }} ItemTypes="homePageOrder" scroll={{ y: 500, }} /> <HomeConfigModal visible={visible} modalType={modalType} productList={productList} client={client} currentPageConfig={currentPageConfig} onFinish={val => onsubmit(val)} handleCancel={() => setVisible(false)} /> </> ); }; export default forwardRef(HomePageConfigs);