import React, { useState, useEffect } from 'react'; import { Form, Modal, Space, Table, Button, Popconfirm, Spin, notification, Tooltip, } from 'antd'; import { EditOutlined, DeleteOutlined, SortDescendingOutlined, PlusSquareOutlined, RollbackOutlined, } from '@ant-design/icons'; import { reloadTableFields, removeFields, loadUnattachedTables, } from '@/services/platform/bs'; import FieldEditor from './fieldEditor'; import { useHistory } from 'react-router-dom'; import styles from './index.less'; import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd'; import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroupNew'; const AddModal = props => { const history = useHistory(); const [allData, setAllData] = useState([]); const [tableList, setTableList] = useState([]); const [tableData, setTableData] = useState([]); const [treeLoading, setTreeLoading] = useState(false); const [formObj, setFormObj] = useState(''); const [flag, setFlag] = useState(0); // 弹窗类型 const [isVisible, setIsVisible] = useState(false); // 弹窗 const [isType, setIsType] = useState(''); // 弹窗类型 const [itemData, setItemData] = useState({}); const [select, setSelect] = useState([]); const [selectTableName, setSelectTableName] = useState({}); const [pramFormObj, setPramFormObj] = useState({}); const [visible, setVisible] = useState(false); // 弹窗 const [type, setType] = useState(''); // 弹窗类型 const editor = record => { setIsType('edit'); setIsVisible(true); setItemData(record); }; const Submit = prop => { setIsVisible(false); setFlag(flag + 1); }; const getField = () => { loadUnattachedTables().then(res => { if (res.data.root && res.data.root.length) { setTableList(res.data.root); } }); }; // 处理表格特殊样式 const styleConfig = record => { if (record.Type === 1) { return 'red'; } if (record.Type === 2) { return 'grey'; } return '000000D9'; }; const expandedRowRender = item => { const columns = [ { title: '字段名', dataIndex: 'name', key: 'name', width: 190, align: 'left', render: (text, record) => ( <div style={{ paddingLeft: '2rem', color: styleConfig(record) }}> {text} </div> ), }, { title: '别名', dataIndex: 'alias', key: 'alias', align: 'center', width: 200, render: (text, record) => ( <span style={{ color: styleConfig(record) }}>{text} </span> ), }, { title: '字段类型', dataIndex: 'storeType', key: 'storeType', align: 'center', width: 200, render: (text, record) => ( <span style={{ color: styleConfig(record) }}>{text} </span> ), }, { title: '形态', dataIndex: 'shape', key: 'shape', align: 'center', width: 200, render: (text, record) => ( <span style={{ color: styleConfig(record) }}>{text} </span> ), }, { title: '配置', dataIndex: 'config', key: 'config', align: 'center', width: 200, render: (text, record) => ( <span style={{ color: styleConfig(record) }}>{text} </span> ), }, { title: '只读', dataIndex: 'readOnly', key: 'readOnly', align: 'center', width: 200, render: (text, record) => ( <span style={{ color: styleConfig(record) }}>{text} </span> ), }, { title: '同步', dataIndex: 'syncEvent', key: 'syncEvent', align: 'center', width: 200, render: (text, record) => ( <span style={{ color: styleConfig(record) }}>{text} </span> ), }, { title: '操作', width: 250, ellipsis: true, align: 'center', render: (text, record) => ( <Space> <Tooltip title="修改"> <EditOutlined style={{ fontSize: '16px', color: '#1890FF' }} onClick={() => { editor(record); }} > 编辑 </EditOutlined> </Tooltip> <div onClick={e => e.stopPropagation()}> <Popconfirm title="是否删除该字段?" okText="确认" cancelText="取消" onConfirm={() => { deleteChart(record); }} > <Tooltip title="删除"> <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} > 删除 </DeleteOutlined> </Tooltip> </Popconfirm> </div> </Space> ), }, ]; return ( <Table columns={columns} onRow={record => { return { onDoubleClick: event => { event.stopPropagation(); editor(record); }, onClick: event => { event.stopPropagation(); setSelectTableName(record); }, // 点击行 }; }} bordered rowClassName={setRowClassName} showHeader={false} dataSource={allData[item.type]} pagination={false} /> ); }; const setRowClassName = record => Object.entries(record).toString() === Object.entries(selectTableName).toString() ? styles.clickRowStyle : ''; const columns = [ { title: '字段名', dataIndex: 'type', key: 'type', align: 'left', width: 150, render: text => { return ( <a> {text}(共{allData[text] ? allData[text].length : ''}条) </a> ); }, }, { title: '别名', dataIndex: 'alias', key: 'alias', align: 'center', width: 200, }, { title: '字段类型', dataIndex: 'storeType', key: 'storeType', align: 'center', width: 200, }, { title: '形态', dataIndex: 'shape', key: 'shape', align: 'center', width: 200, }, { title: '配置', dataIndex: 'config', key: 'config', align: 'center', width: 200, }, { title: '只读', dataIndex: 'readOnly', key: 'readOnly', align: 'center', width: 200, }, { title: '同步', dataIndex: 'syncEvent', key: 'syncEvent', align: 'center', width: 200, }, { title: '操作', width: 250, ellipsis: true, key: 'title', align: 'center', }, ]; useEffect(() => { console.log(props) if (props.match.params.id) { setFormObj(props.match.params.id); setTreeLoading(true); reloadTableFields({ tableName: props.match.params.id, }).then(res => { setTreeLoading(false); if (res.msg === 'Ok') { let arr = formateArrDataA(res.data.root, 'group'); let newArr = []; Object.keys(arr).map((item, index) => { newArr.push({ type: item, key: index, id: index }); }); setAllData(arr); setTableData(newArr); setSelect(newArr); } }); getField(); } }, [flag]); const formateArrDataA = (initialArr, name) => { // 判定传参是否符合规则 if (!(initialArr instanceof Array)) { return '请传入正确格式的数组'; } if (!name) { return '请传入对象属性'; } //先获取一下这个数组中有多少个"name" let nameArr = []; for (let i in initialArr) { if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) { nameArr.push(initialArr[i][`${name}`]); } } //新建一个包含多个list的结果对象 let tempObj = {}; // 根据不同的"name"生成多个数组 for (let k in nameArr) { for (let j in initialArr) { if (initialArr[j][`${name}`] == nameArr[k]) { // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变 tempObj[nameArr[k]] = tempObj[nameArr[k]] || []; tempObj[nameArr[k]].push(initialArr[j]); } } } for (let keys in tempObj) { let arr = []; tempObj[keys].map((item, index) => { tempObj[keys] = arr; item.key = index; arr.push(item); }); } return tempObj; }; // 删除表字段 const deleteChart = record => { removeFields({ fieldIDs: record.ID }).then(res => { if (res.msg === 'Ok' || res.msg === '') { notification.success({ message: '提示', duration: 3, description: '删除成功', }); setFlag(flag + 1); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; // 返回上一级 const back = () => { let { template, tableScroll } = props.location.state; history.push({ pathname: '/platformCenter/bsmanger/tablemanger', query: { template, tableScroll, }, }); }; const onUnfold = (expanded, record) => { const data = [...select]; let index = data.indexOf(record); if (expanded) { data.push(record); } else { data.splice(index, 1); } setSelect(data); }; //附加 const add = record => { setPramFormObj(props.location.state.template); setType('affiliateAdd'); setVisible(true); }; //分组与排序 const sort = record => { setPramFormObj(props.location.state.template); setType('sort'); setVisible(true); }; const onSubmit = prop => { setVisible(false); setFlag(flag + 1); }; return ( <> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.containerBox}> <div className={styles.config}> <div className={styles.title}>{formObj}(字段配置)</div> <div className={styles.btn}> <Button type="primary" icon={<PlusSquareOutlined />} onClick={add} > 附加 </Button> <Button type="primary" icon={<SortDescendingOutlined />} onClick={sort} > 分组排序 </Button> <Button type="primary" icon={<RollbackOutlined />} onClick={back}> 返回 </Button> </div> </div> <Table columns={columns} dataSource={tableData} expandable={{ expandedRowRender }} size="small" rowKey="id" expandedRowKeys={select.map(item => item.key)} //展开的行 expandRowByClick={true} defaultExpandAllRows={true} pagination={false} scroll={{ y: 'calc(100vh - 186px)' }} size="small" onExpand={onUnfold} /> </div> </Spin> <FieldEditor isVisible={isVisible} isType={isType} itemData={itemData} formObj1={formObj} onCancel={() => setIsVisible(false)} callBackSubmit={Submit} /> {visible && type === 'affiliateAdd' && ( <AffiliateAdd visible={visible} tableList={tableList} type={type} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} formObj={pramFormObj} /> )} {visible && type === 'sort' && ( <LoadGroup visible={visible} type={type} formObj={pramFormObj} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} /> )} </> ); }; export default AddModal;