ModalForm组件:
const formRef = useRef<any>();
<ModalForm
key={51}
title='数据仓库'
formRef={formRef} // 用于获取表单数据
autoFocusFirstInput // 自动对话框打开后，首个表单项自动获得焦点
width="33%"
modalProps={{ // 扩展ant modal属性
destroyOnClose: true, // 关闭时销毁 Modal 里的子元素
onCancel: () => setVisible(false), // 取消按钮回调
open: visible, // 对话框是否可见
afterClose: async () => {
const res = await getTreeNodes();
if (res.status === 'success') {
if (JSON.stringify(res?.data) != '{}') { // 判断数据源是否为空对象
setVisible(false);
} else {
setVisible(true);
message.error('请先添加数据源');
}
}
},// 关闭后的回调
maskClosable: false, // 点击蒙层是否允许关闭
}}
onFinish={async (values) => {
const res = await getDataSource(dataSourceId);
if (res.code === 200) {
setVisible(false);
// 更新树
getTreeData();
message.success('切换成功');
}
}}
// 开启grid布局
layout="horizontal"
grid={true}
>
<ProFormGroup>
<ProFormSelect
key={52}
label="数据源类型"
name="originType"
placeholder="请选择"
rules={[{ required: true }]}
labelCol={{ span: 4 }}
options={dataType2}
initialValue={dataList?.dsType}
fieldProps={{
onChange: (value, option:any) => {
// 通过formRef.current?.setFieldsValue来清除某个表单项的值
formRef.current?.setFieldsValue({
origin: undefined,
});
setDatatype3([]);
GainDataSource(value);
},
}}
/>
</ProFormGroup>
<ProFormGroup>
<ProFormSelect
key={53}
label="数据源"
name="origin"
placeholder="请选择"
rules={[{ required: true }]}
labelCol={{ span: 4 }}
options={dataType3}
initialValue={dataList?.dsName}
fieldProps={{
onChange: (value, option:any) => {
setDataSourceId(value);
},
}}
/>
</ProFormGroup>
</ModalForm>通过 Input 组件实现: 可新增,编辑,删除的tag组件:
// 这里是封装的Tags.tsx组件
import {forwardRef, useImperativeHandle, useState} from 'react';
import {Button, Input, message} from "antd";
import { MinusCircleOutlined } from '@ant-design/icons';
import style from './index.less';
import {updateTableTag} from "@/pages/dataDev/metaMgr/service";
const Tags = forwardRef((props, ref) => {
const [tags, setTags] = useState<any>([]);
const [parentTags, setParentTags] = useState<any>();
const [tagName, setTagName] = useState<string>(''); // 输入框的值
const [show, setShow] = useState<boolean>(true);
const [show2, setShow2] = useState<boolean>(true);
const [show3, setShow3] = useState<boolean>(false);
const [show4, setShow4] = useState<boolean>(false);
useImperativeHandle(ref, () => ({
showModal: (record: any) => {
setParentTags(record);
if (record?.tags != null && record?.tags != '') {
setTags(record?.tags.split('|'));
} else {
setTags([]);
}
}
}));
/*请求方法*/
const Request = async (type:string,id:any,tags:any) => {
const res = await updateTableTag({id:id, tags:tags});
if (res.code == 200) {
if (type == 'add') {
message.success('保存成功');
} else {
message.success('删除成功');
}
props?.getList(); // 触发父组件的getList方法
} else {
if (type == 'add') {
message.error('保存失败');
} else {
message.error('删除失败');
}
}
}
/*新增*/
const addTag = () => {
setShow2(false);
setShow(false);
setShow4(true);
/*const newTags: any = {
id: new Date().getTime() + 1 + '',
name: tagName
};*/
const newTags: any = tagName;
setTags([...tags, newTags]);
setTagName('');
}
/*保存*/
const saveTag = async () => {
setShow(true);
setShow2(true);
setShow3(false);
setShow4(false);
const newTags = tags.filter((item:any) => item !== '');
setTags(newTags);
Request('add',parentTags?.id,newTags.join('|'));
}
/*删除*/
const deleteTag = (value:any) => {
const newTags = tags.filter((item:any) => item !== value);
setTags(newTags);
Request('delete',parentTags?.id,newTags.join('|'));
}
/*赋值*/
const changeTag = (e:any, value:any) => {
const newTags = tags.map((item:any) => {
if (item == value) {
item = e.target.value;
}
return item;
})
setTags(newTags);
}
/*取消*/
const onCancel = () => {
setShow(true);
setShow2(true);
setShow3(false);
setShow4(false);
const newTags = tags.filter((item:any) => item !== '');
setTags(newTags);
setTags(parentTags?.tags.split('|')); // 点击取消时, 将父组件的tags值还原
}
return (
<div key={1} style={{margin: '2% 0'}}>
<div key={2} className={style.box}>
<span key={3} className={style.tagText}>标签: </span>
<div key={4} className={style.tagBox}>
{
tags?.map((item:any,index:any) => {
return (
<div key={index} style={{position: 'relative', margin: '0 6px'}}>
<Input key={6} size="small" value={item} disabled={show} style={{width: '100px'}} onChange={(e) => changeTag(e,item) } />
{show2 == true ?
<MinusCircleOutlined key={7} className={style.mco} onClick={() => {deleteTag(item);}} />
: null
}
</div>
)
})
}
<Button key="add" size='small' type="ghost" disabled={show3} onClick={addTag}>+</Button>
<Button key="submit" size='small' type="dashed" disabled={show4} style={{margin: '0 8px'}} onClick={() => {setShow3(true);setShow(false);}}>编辑</Button>
<Button key="cancel" size='small' style={{marginRight: '8px'}} onClick={onCancel}>取消</Button>
<Button key="back" size='small' type="primary" onClick={saveTag}>保存</Button>
</div>
</div>
</div>
);
});
export default Tags;
核心代码:
// 因为react跟vue不一样,vue的数据可以双向绑定,但是react不可行,所以这里的input回显之后,再输入的话需要我们再处理一下
/*Input赋值*/
const changeTag = (e:any, value:any) => { // e.target.value是输入框的值
const newTags = tags.map((item:any) => { // item是数组中的每一项
if (item == value) { // 如果数组中的某一项等于输入框的值, 就将该项的值改为输入框的值
item = e.target.value; // 将输入框的值赋值给数组中的某一项
}
return item; // 返回数组中的每一项
})
setTags(newTags); // 将新的数组赋值给tags
}// 父组件中使用 Tags.tsx组件
import Tags from './Tags'; // 引入 Tags.tsx
const cRef = useRef<any>(null); // 用于获取子组件实例
/*子组件触发*/
const getTags = () => {
getTableInfo(tableId);
}
// 在需要的地方进行调用
setTimeout(() => { // 这里的定时器是为了解决调用Tags组件时,Tags组件还没有创建,而引发的问题
cRef.current?.showModal(res?.data); // 通过ref调用showModal方法,给标签组件传值
}, 50);
// getList是父组件传递给子组件的方法 getTags是子组件传递给父组件的方法
<Tags key={50} ref={cRef} getList={getTags} /> 
