import React, { useState } from 'react'; import { observer, connect, useField, RecursionField, ISchema, Schema, useFieldSchema, useForm, FormConsumer, } from '@formily/react'; import { ArrayCollapse, FormLayout } from '@formily/antd'; import { uid } from '@formily/shared'; import '@formily/antd/lib/form-tab/style'; import { Collapse, Button, Dropdown, Menu, Tag, Select, Divider, Input, Badge, message, Spin, } from 'antd'; import { options, interfaces, getDefaultFields } from './interfaces'; import { DeleteOutlined, DatabaseOutlined, PlusOutlined, CloseOutlined, } from '@ant-design/icons'; import cls from 'classnames'; import './style.less'; import Modal from 'antd/lib/modal/Modal'; import { clone, cloneDeep, get } from 'lodash'; import { useEffect } from 'react'; import { useRequest } from 'ahooks'; import { createOrUpdateCollection, deleteCollection } from '..'; import { useCollectionsContext } from '../../constate/Collections'; export const DatabaseCollection = observer((props) => { const field = useField(); const [visible, setVisible] = useState(false); const [open, setOpen] = useState(false); const schema = useFieldSchema(); const [activeIndex, setActiveIndex] = useState(0); const form = useForm(); const [newValue, setNewValue] = useState(''); const { loading, refresh, collections = [] } = useCollectionsContext(); useEffect(() => { field.setValue(collections); console.log('onSuccess', collections); }, [collections]); return (
} visible={visible} onCancel={() => { setVisible(false); }} okText={'保存'} cancelText={'关闭'} onOk={async () => { try { form.clearErrors(); await form.validate(`${field.address.entire}.${activeIndex}.*`); delete field.value[activeIndex]['unsaved']; await createOrUpdateCollection(field.value[activeIndex]); await refresh(); message.success('保存成功'); } catch (error) {} }} > {/* {(form) =>
{JSON.stringify(form.values, null, 2)}
}
*/}
); }); export const DatabaseField: any = observer((props) => { const field = useField(); useEffect(() => { if (!field.value) { field.setValue([]); } }, []); const [activeKey, setActiveKey] = useState(null); return (
{ setActiveKey(key); }} className={cls({ empty: !field.value?.length })} accordion > {field.value?.map((item, index) => { if (!item.interface) { return; } const schema = cloneDeep(interfaces.get(item.interface)); if (!schema) { console.error('schema invalid'); return; } const path = field.address.concat(index); const errors = field.form.queryFeedbacks({ type: 'error', address: `*(${path},${path}.*)`, }); return ( {(item.uiSchema && item.uiSchema.title) || ( 未命名 )}{' '} {schema.title} {item.name} } extra={ item.privilege === 'undelete' ? [] : [ , { e.stopPropagation(); field.remove(index); }} />, ] } key={item.key} > ); })} { const schema = interfaces.get(info.key); if (!schema) { return; } const data = { ...cloneDeep(schema.default), key: uid(), name: `f_${uid()}`, interface: info.key, }; if (schema.initialize) { schema.initialize(data); } field.push(data); setActiveKey(data.key); console.log('info.key', field.value); }} > {options.map( (option, groupIndex) => option.children.length > 0 && ( {option.children.map((item) => ( {item.title} ))} ), )} } >
); });