/* eslint-disable operator-assignment */ /* eslint-disable no-else-return */ /* eslint-disable no-undef */ /* eslint-disable no-shadow */ import React, { useState, useEffect } from 'react'; import { Table, Tooltip, Spin, Modal, Form, Input, Space, Popconfirm, notification, message, Row, Col, Button, Upload, } from 'antd'; import { EditTwoTone, DeleteOutlined, PlusSquareFilled, MinusCircleOutlined, PlusOutlined, DownloadOutlined, UploadOutlined, SyncOutlined, } from '@ant-design/icons'; import { GetDataDictionaryList, EditDataDictionary, AddDataDictionary, DeleteDataDictionary, AddDataDictionaryList, SearchDataDictionaryList, DataDictionaryChangeOrder, } from '@/services/dataCenter/api'; import styles from './WebDic.less'; import { GetMetaData } from '@/services/gis/gis'; import DragTable from '@/components/DragTable/DragTable'; import ImportModal from './importModal'; const WebDic = () => { const [loading, setLoading] = useState(false); const [level, setLevel] = useState(0); // 设置级别,一级1,二级2,添加条目时使用 const [data, setData] = useState([]); // 一级条目数据 const [subData, setSubData] = useState([]); // 二级条目数据 const [searchData, setSearchData] = useState([]); // 搜索框表格数据 const [first, setFirst] = useState(true); // 是否第一次加载 const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级,修改/删除时设置 const [twoSelectColor, setTwoSelectColor] = useState({}); const [selectColor, setSelectColor] = useState({}); // 当前选中一级条目颜色,修改/删除时设置 const [selectID, setSelectID] = useState('-1'); // 当前选中一级条目的ID,添加二级条目时使用 const [addVisible, setAddVisible] = useState(false); // 添加二级条目 const [addVisible1, setAddVisible1] = useState(false); // 添加一级条目 const [addForm] = Form.useForm(); const [editVisible, setEditVisible] = useState(false); // 编辑二级条目 const [editVisible1, setEditVisible1] = useState(false); // 编辑一级条目 const [editForm] = Form.useForm(); const [searchWord, setSearchWord] = useState(''); // 关键字 const { Search } = Input; const [files, setFiles] = useState(''); const [flag, setFlag] = useState(0); const [flag1, setFlag1] = useState(0); // 搜索框数据是否刷新 const [isloading, setIsloading] = useState(false); const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式 const [InPutVisible, setInPutVisible] = useState(false); const [importVisible, setImportVisible] = useState(false); const [name, setName] = useState(''); const [keepName, setKeepName] = useState(''); const columns = [ { title: () => <span className={styles.font}>序号</span>, key: 'id ', dataIndex: 'id', render: (text, record, index) => ( <Space> <span>{index + 1}</span> </Space> ), width: 60, align: 'center', }, { title: () => <span className={styles.font}>名称</span>, dataIndex: 'nodeName', key: 'nodeName', onCell: () => ({ style: { maxWidth: 350, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'auto', }, }), // render: item => searchStyle(item), render: record => ( <Tooltip placement="topLeft" title={record}> {searchStyle(record)} </Tooltip> ), }, { title: () => <span className={styles.font}>操作</span>, key: 'action', width: 100, align: 'center', onCell: () => ({ style: { cursor: ' auto', }, }), render: record => ( <Space> <Tooltip title="编辑"> <EditTwoTone onClick={() => { setSelect(record); if (record.parentID === '-1') { setSelectColor(record.nodeID); } setEditVisible1(true); editForm.setFieldsValue({ nodeName: record.nodeName, nodeValue: record.nodeValue, }); }} style={{ fontSize: '16px' }} /> </Tooltip> <div onClick={e => e.stopPropagation()}> <Tooltip title="删除"> <Popconfirm title="是否确认删除该数据,删除一级目录数据会将其二级目录子数据一起删除?" okText="确认" cancelText="取消" onConfirm={submitDeleteOne} > <DeleteOutlined onClick={() => { setSelect(record); // if (record.parentID === '-1') { // setSelectColor(record); // } }} style={{ fontSize: '16px', margin: '0px 10px', color: '#e86060', }} /> </Popconfirm> </Tooltip> </div> </Space> ), }, ]; const columns1 = [ { title: () => <span className={styles.font}>序号</span>, dataIndex: 'ID', key: 'ID', width: 60, align: 'center', // className: 'column', render: (text, record, index) => ( <Space> <span>{index + 1}</span> </Space> ), }, { title: () => <span className={styles.font}>名称</span>, dataIndex: 'nodeName', key: 'nodeName', // className: 'column', onCell: () => ({ style: { maxWidth: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'auto', }, }), render: record => ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ), }, { title: () => <span className={styles.font}>值</span>, dataIndex: 'nodeValue', key: 'nodeValue', // width: 400, // className: 'column', onCell: () => ({ style: { maxWidth: 300, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'auto', }, }), render: record => { if (!record) { return '-'; } return ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ); }, }, { title: () => <span className={styles.font}>操作</span>, key: 'action', width: 100, // className: 'column', align: 'center', onCell: () => ({ style: { cursor: 'auto', }, }), render: record => ( <Space> <Tooltip title="编辑"> <EditTwoTone onClick={() => { setSelect(record); if (record.parentID === '-1') { setSelectColor(record.nodeID); } setEditVisible(true); editForm.setFieldsValue({ nodeName: record.nodeName, nodeValue: record.nodeValue, }); }} style={{ fontSize: '16px' }} /> </Tooltip> <div onClick={e => e.stopPropagation()}> <Tooltip title="删除"> <Popconfirm title="是否删除该数据?" okText="确认" cancelText="取消" onConfirm={submitDelete} > <DeleteOutlined onClick={() => { setSelect(record); if (record.parentID === '-1') { setSelectColor(record.nodeID); } }} style={{ fontSize: '16px', margin: '0px 10px', color: '#e86060', }} /> </Popconfirm> </Tooltip> </div> </Space> ), }, ]; // 模糊查询匹配的样式 const searchStyle = val => { let n; if (showSearchStyle) { n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`); } else { n = val; } return <div dangerouslySetInnerHTML={{ __html: n }} />; }; const setRowClassName = nodeID => { return nodeID == selectColor ? styles.clickRowStyle : ''; }; const setRowClassName1 = record => record.nodeID === twoSelectColor.nodeID ? styles.clickRowStyle : ''; // 获取搜索框的值 const handleSearch = e => { setSearchWord(e.target.value); }; useEffect(() => { getData(null); // 首次加载可以为空 }, [flag]); // const setOd = e => { // setOrderTable(e) // setFgg(fgg + 1) // } // const setOd1 = e => { // setOrderTable1(e) // setFgg(fgg + 1) // } // useEffect(() => { // setOrderTable(data); // setOrderTable1(subData); // }, [fgg]); // 根据orderTable值改变flowIDs useEffect(() => { let ids = ''; data.forEach((item, index) => { if (index === data.length - 1) { ids += `${item.nodeID}`; } else { ids += `${item.nodeID},`; } }); let bb = ids.split(','); setLoading(true); DataDictionaryChangeOrder(bb).then(res => { setLoading(false); }); }, [data]); useEffect(() => { let ids = ''; if (subData !== '') { subData.forEach((item, index) => { if (index === subData.length - 1) { ids += `${item.nodeID}`; } else { ids += `${item.nodeID},`; } }); } let bb = ids.split(','); setIsloading(true); DataDictionaryChangeOrder(bb).then(res => { setIsloading(false); }); }, [subData]); // useEffect(() => { // console.log(selectColor); // console.log(data); // console.log(data.find(i => i.nodeID == selectColor)); // }, [selectColor]); // 根据父节点nodeID(即parentID)获取子节点数据,一级条目parentID = -1 const getData = value => { isLoadingShow(value, true); GetDataDictionaryList({ nodeID: value }).then(resnew => { if (resnew.code === 0) { // if (resnew.data.length > 0) { let res = resnew.data; if (res.length > 0) { res.map(item => { item.key = item.nodeID; return item; }); } if (value === null || value === '-1') { console.log(123); setData(res); console.log(first); // 是否首次加载 if (first) { setSelect(res[0]); // 默认当前选中一级条目第一条 setSelectColor(res[0].nodeID); setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目 setFirst(false); console.log(res[0].nodeName); setName(res[0].nodeName); getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环,靠nodeID获取子节点二级条目 } else { console.log(selectColor); } } else if (value) { setSubData(res); // 设置二级条目,res为空[]时也要设置 // setOd1(res) } isLoadingShow(value, false); // } else { // console.log(3) // isLoadingShow(value, false) // } } else { isLoadingShow(value, false); notification.error({ message: '获取失败', description: resnew.msg, }); } }); }; // eslint-disable-next-line no-shadow const isLoadingShow = (value, data) => { if (!value || value === -1) { setLoading(data); } else { setIsloading(data); } }; // const onSearch = () => { // setSearchVisible(true) // setFlag1(1) // } // const onSearch = () => { // history.push({ // pathname: '/dataCenter/dictionary', // }); // }; // 搜索 const sumbitSearch = () => { console.log(121212); SearchDataDictionaryList({ key: searchWord }).then(res => { if (res.code === 0) { setSearchData(res.data); } // else { // notification.error({ // message: '提交失败', // description: res.message, // }) // } }); }; // const resetSearch = () => { // setFlag1(0); // setSearchVisible(false); // setSearchWord(''); // 搜索框置空 // setSearchData([]); // }; // 上传 // const submitInPut = () => { // ImportDataDictionary({ file: files }).then((res) => { // if (res.code === 0) { // notification.success({ // message: '执行成功', // }); // } else { // notification.error({ // message: '执行失败', // description: res.message, // }) // } // }) // } // 导出 // const submitOutPut = () => { // ExportDataDictionary().then((res) => { // notification.success({ // message: '执行成功', // }); // }) // } // const inPutOutPut = () => { // setInPutOutPutVisible(true); // } const setItem = value => { setLevel(value); if (value === 1) { setSearchWord(''); setAddVisible1(true); } if (value === 2) { if (name == '') { notification.warning({ description: '请先选择一级条目', }); } else { setAddVisible(true); } } addForm.resetFields(); }; // 添加二级条目 const submitAdd = value => { console.log(value); const nodeName1 = addForm.getFieldsValue(); const nodeName = addForm.getFieldsValue().nodeName1; const nodeValue = addForm.getFieldsValue().nodeValue1; let arr = []; console.log(nodeName1); let result = nodeName1.users; if (result) { // eslint-disable-next-line array-callback-return result.map((item, index) => { if (item) { arr.push({ nodeName: item.nodeName, nodeValue: item.nodeValue, parentID: Number(value), }); } }); } arr.unshift({ nodeName, nodeValue, parentID: Number(value) }); AddDataDictionaryList([...arr]).then(res => { if (res.code === 0) { setAddVisible(false); getData(value); notification.success({ message: '提交成功', }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }); }; // 添加一级条目 const submitAdd1 = value => { const nodeName = addForm.getFieldValue('nodeName'); AddDataDictionary({ nodeID: value, nodeName, nodeValue: '-', }).then(res => { console.log(res.msg); if (res.code === 0) { console.log(res.data); setSelectColor(res.data); setSelectID(res.data); setRowClassName(res.data); setAddVisible1(false); setSubData([]); getData(null); setFlag1(0); notification.success({ message: '提交成功', }); setName(nodeName); } else { notification.error({ message: '提交失败', description: res.msg, }); } }); }; // 修改 const submitEdit = () => { const nodeName = editForm.getFieldValue('nodeName'); const nodeValue = editForm.getFieldValue('nodeValue'); if (nodeName) { EditDataDictionary({ nodeID: select.nodeID, nodeName, nodeValue, }).then(res => { if (res.code === 0) { setEditVisible(false); getData(select.parentID === '-1' ? null : select.parentID); notification.success({ message: '提交成功', }); if (flag1 === 1) { // sumbitSearch(); getData(null); } } else { notification.error({ message: '提交失败', description: res.msg, }); } }); } else { notification.error({ message: '提交失败', description: '名称不能为空', }); } }; const submitEdit1 = () => { const nodeName = editForm.getFieldValue('nodeName'); if (nodeName) { EditDataDictionary({ nodeID: select.nodeID, nodeName, nodeValue: '-', }).then(res => { if (res.code === 0) { setName(nodeName); setEditVisible1(false); if (flag1 === 0) { getData(select.parentID === '-1' ? null : select.parentID); } else { submitSearchUser(); } notification.success({ message: '提交成功', }); // if (flag1 === 1) { // // sumbitSearch(); // getData(null); // } } else { notification.error({ message: '提交失败', description: res.msg, }); } }); } else { notification.error({ message: '提交失败', description: '名称不能为空', }); } }; // 删除 const submitDelete = () => { DeleteDataDictionary({ nodeID: select.nodeID, }) .then(res => { if (res.code === 0) { if (flag1 === 0) { getData(select.parentID === '-1' ? null : select.parentID); } else { submitSearchUser(); } if (select.parentID === '-1') { if (select.nodeID === selectID) { setSelectID(''); setSubData([]); } } notification.success({ message: '删除成功', }); } else { notification.error({ message: '删除失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }; // 删除 const submitDeleteOne = () => { DeleteDataDictionary({ nodeID: select.nodeID, }) .then(res => { if (res.code === 0) { if (select.nodeID == selectColor) { if (flag1 === 0) { // getData(null); GetDataDictionaryList({ nodeID: null }).then(resnew => { if (resnew.code === 0) { let res = resnew.data; setData(res); setSelect(res[0]); // 默认当前选中一级条目第一条 setSelectColor(res[0].nodeID); setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目 getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环,靠nodeID获取子节点二级条目 // setSubData(res); // 设置二级条目,res为空[]时也要设置 // isLoadingShow(value, false); setName(res[0].nodeName); console.log(res[0].nodeName); } else { isLoadingShow(value, false); notification.error({ message: '获取失败', description: resnew.msg, }); } }); } else { submitSearchUser(1); } } else { if (flag1 === 0) { getData(null); } else { submitSearchUser(); } } notification.success({ message: '删除成功', }); } else { notification.error({ message: '删除失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }; const pagenation = { showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, pageSizeOptions: [10, 20, 50, 100], defaultPageSize: '20', // showQuickJumper: true, showSizeChanger: true, }; const props = { name: 'file', action: `/PandaOMS/OMS/DataManger/ImportDataDictionary`, headers: { authorization: 'authorization-text', }, accept: 'application/vnd.ms-excel', beforeUpload: file => { setFiles(file.file); }, onChange(info) { let data; let mse; setFiles(info.file); if (info.file.status !== 'uploading') { // eslint-disable-next-line array-callback-return info.fileList.map(item => { data = item.response.code; mse = item.response.msg; }); if (data === 0) { notification.success({ message: '导入成功', }); setFirst(true); } else { notification.error({ message: '导入失败', description: mse, }); } } }, }; const input1 = () => { setFlag(flag + 1); setInPutVisible(false); }; const submitInput = () => { console.log(111); setImportVisible(true); // setInPutVisible(true); }; const submitSearchUser = aa => { setFlag1(1); console.log(searchWord); SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => { if (res.code === 0) { setShowSearchStyle(true); if (res.data.length === 0) { setData(res.data); setSubData([]); setName(''); } else { setData(res.data); // 搜索 if (aa == 1) { setSelect(res.data[0]); setName(res.data[0].nodeName); setSelectColor(res.data[0].nodeID); setSelectID(res.data[0].nodeID); getData(res.data[0].nodeID); } else { getData(selectColor); } } } else { notification.error({ message: '提交失败', description: res.msg, }); } }); }; const submitSearchUserAll = aa => { setFlag1(1); console.log(searchWord); SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => { if (res.code === 0) { setShowSearchStyle(true); if (res.data.length === 0) { setData(res.data); setSubData([]); setName(''); } else { setData(res.data); // 搜索 setName(res.data[0].nodeName); setSelect(res.data[0]); setSelectColor(res.data[0].nodeID); setSelectID(res.data[0].nodeID); getData(res.data[0].nodeID); } } else { notification.error({ message: '提交失败', description: res.msg, }); } }); }; const handleReset = () => { setFlag1(0); setSearchWord(''); setLoading(true); setIsloading(true); GetDataDictionaryList({ nodeID: null }).then(resnew => { if (resnew.code === 0) { setLoading(false); setIsloading(false); let res = resnew.data; if (res.length > 0) { res.map(item => { item.key = item.nodeID; return item; }); } setData(res); setSelect(res[0]); // 默认当前选中一级条目第一条 setSelectColor(res[0].nodeID); setName(res[0].nodeName); setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目 getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环,靠nodeID获取子节点二级条目 setShowSearchStyle(false); } setLoading(false); setIsloading(false); }); }; // 拖拽回调函数 const dragCallBack = value => { if (value) { setData(value); } }; const dragCallBack1 = e => { if (e) { setSubData(e); } }; const onImportSubmit = () => { setFirst(true); setImportVisible(false); setFlag(flag + 1); }; const title = ( <> <span>添加二级条目</span> <span style={{ color: 'rgb(24, 144, 255)' }}>({name})</span> </> ); return ( <div className={styles.WebDic}> <Spin spinning={loading} tip="loading..."> <div className={styles.item}> {/* <span> <SearchOutlined onClick={() => onSearch()} /><span style={{ verticalAlign: 'middle', marginLeft: '6px', marginRight: "40px", cursor: "pointer" }} onClick={() => onSearch()}>查找条目</span> </span> */} <span> <Search style={{ width: 260, marginRight: '20px', marginLeft: '10px' }} placeholder="搜索一级条目数据" onSearch={submitSearchUserAll} onChange={e => handleSearch(e)} enterButton value={searchWord} /> <Button style={{ marginRight: '40px' }} icon={<SyncOutlined />} onClick={handleReset}> 重置 </Button> </span> <span> <DownloadOutlined /> <span style={{ verticalAlign: 'middle', marginLeft: '6px', marginRight: '40px', cursor: 'pointer', }} > <a style={{ color: 'rgba(0, 0, 0, 0.85)' }} href="/PandaOMS/OMS/DataManger/ExportDataDictionary" > 导出数据 </a> </span> </span> <span> <UploadOutlined /> <span style={{ verticalAlign: 'middle', marginLeft: '6px', marginRight: '40px', cursor: 'pointer', }} > <span style={{ color: 'rgba(0, 0, 0, 0.85)' }} onClick={() => submitInput()}> 导入数据 </span> </span> </span> </div> <Row style={{ background: 'white' }}> <Col span={8} className={styles.left}> {/* 一级条目 表格 */} <DragTable size="small" ItemTypes="first" bordered rowKey={record => record.nodeID} columns={columns} dragCallBack={dragCallBack} className={styles.pab} dataSource={data} scroll={{ y: 'calc(100vh - 370px)' }} rowClassName={record => setRowClassName(record.nodeID)} onClick={record => { getData(record.nodeID); setSelect(record); setSelectColor(record.nodeID); setSelectID(record.nodeID); setName(record.nodeName); }} title={() => ( <div> <span>一级条目</span> <Tooltip title="添加一级条目配置"> <PlusSquareFilled onClick={() => setItem(1)} style={{ color: '#1890FF', fontSize: '25px', marginTop: '3px', float: 'right', }} /> </Tooltip> </div> )} pagination={false} /> </Col> <Col span={16}> {/* 二级条目 表格 */} <Spin spinning={isloading} tip="loading..."> <DragTable size="small" ItemTypes="second" bordered rowKey={record => record.nodeID} columns={columns1} dragCallBack={dragCallBack1} className={styles.tab} dataSource={subData} scroll={{ x: 'max-content', y: 'calc(100vh - 340px)' }} rowClassName={setRowClassName1} onClick={record => { setSelect(record); setTwoSelectColor(record); }} title={() => ( <div> <span>二级条目</span> <span style={{ color: 'rgb(24, 144, 255)' }}> <strong>({name})</strong> </span> <Tooltip title="添加二级条目配置"> <PlusSquareFilled onClick={() => setItem(2)} style={{ color: '#1890FF', fontSize: '25px', marginTop: '3px', float: 'right', }} /> </Tooltip> </div> )} pagination={false} /> </Spin> </Col> </Row> </Spin> {/* 添加一级 */} <Modal title="添加一级条目" visible={addVisible1} width="500px" onOk={() => { submitAdd1('-1'); }} onCancel={() => { setAddVisible1(false); }} okText="确认" cancelText="取消" > <Form autoComplete="off" form={addForm} labelCol={{ span: 3 }}> <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入名称" style={{ width: '95%' }} /> </Form.Item> </Form> </Modal> {/* 添加二级 */} <Modal title={title} visible={addVisible} width="500px" onOk={() => { submitAdd(selectID); }} onCancel={() => { setAddVisible(false); }} okText="确认" cancelText="取消" > <Form autoComplete="off" form={addForm} labelCol={{ span: 7 }}> <Row> <Col span={11}> <Form.Item name="nodeName1" label="名称" rules={[ { required: true, message: '不能为空' }, // { // validator: (rule, value) => { // const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName // const nodeValue = addForm.getFieldsValue().nodeValue1; // let aa = 0; // subData.map(i => { // if (i.nodeName == nodeName && i.nodeValue == nodeValue) { // aa = aa + 1; // } // }); // if (aa != 0) { // // eslint-disable-next-line prefer-promise-reject-errors // return Promise.reject('已存在相同名称与值的数据'); // } // return Promise.resolve(); // }, // }, // { // validator: (rule, value) => { // const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName // const nodeName1 = addForm.getFieldsValue(); // let result = nodeName1.users; // let arr = []; // if (result) { // // eslint-disable-next-line array-callback-return // result.map(item => { // if (item) { // let a = item.nodeName; // if (a !== '') { // arr.push(a); // } // } // }); // } // arr.unshift(nodeName); // if (new Set(arr).size !== arr.length) { // // eslint-disable-next-line prefer-promise-reject-errors // return Promise.reject('用户名重复'); // } // return Promise.resolve(); // }, // }, ]} > <Input placeholder="请输入名称" /> </Form.Item> </Col> <Col span={11}> <Form.Item name="nodeValue1" label="值" rules={[ { required: true, message: '不能为空' }, // { // validator: (rule, value) => { // const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName // const nodeValue = addForm.getFieldsValue().nodeValue1; // let aa = 0; // subData.map(i => { // if (i.nodeName == nodeName && i.nodeValue == nodeValue) { // aa = aa + 1; // } // }); // if (aa != 0) { // // eslint-disable-next-line prefer-promise-reject-errors // return Promise.reject('已存在相同名称与值的数据'); // } // return Promise.resolve(); // }, // }, ]} > <Input placeholder="请输入值" /> </Form.Item> </Col> </Row> <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey, ...restField }) => ( <Space key={key} style={{ display: 'flex', marginBottom: 8 }}> <Row> <Col span={11}> <Form.Item {...restField} name={[name, 'nodeName']} label="名称" fieldKey={[fieldKey, 'frist']} rules={[ { required: true, message: '不能为空' }, // { // validator: (rule, value, callback) => { // const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName // const nodeName1 = addForm.getFieldsValue(); // let result = nodeName1.users; // let arr = []; // // eslint-disable-next-line array-callback-return // result.map(item => { // if (item) { // let a = item.nodeName; // if (a !== '') { // arr.push(a); // } // } // }); // if (nodeName !== undefined) { // arr.unshift(nodeName); // } // if (new Set(arr).size !== arr.length) { // arr = [...new Set(arr)]; // callback('用户名重复'); // } // }, // }, // { // validator: (rule, value) => { // const nodeName1 = addForm.getFieldsValue().nodeName; // 第一项的nodeName // const nodeValue1 = addForm.getFieldsValue().nodeValue; // const nodeNameAll = addForm.getFieldsValue(); // console.log(nodeName1); // console.log(nodeValue1); // console.log(nodeNameAll); // let aa = 0; // subData.map(i => { // if (i.nodeName == nodeName1 && i.nodeValue == nodeValue1) { // aa = aa + 1; // } // }); // if (aa != 0) { // // eslint-disable-next-line prefer-promise-reject-errors // return Promise.reject('已存在相同名称与值的数据'); // } // return Promise.resolve(); // }, // }, ]} > <Input placeholder="请输入名称" /> </Form.Item> </Col> <Col span={11}> <Form.Item {...restField} name={[name, 'nodeValue']} label="值" fieldKey={[fieldKey, 'last']} rules={[ { required: true, message: '不能为空' }, // { // validator: (rule, value) => { // const nodeName1 = addForm.getFieldsValue().nodeName; // 第一项的nodeName // const nodeValue1 = addForm.getFieldsValue().nodeValue; // console.log(nodeName1); // console.log(nodeValue1); // let aa = 0; // subData.map(i => { // if (i.nodeName == nodeName1 && i.nodeValue == nodeValue1) { // aa = aa + 1; // } // }); // if (aa != 0) { // // eslint-disable-next-line prefer-promise-reject-errors // return Promise.reject('已存在相同名称与值的数据'); // } // return Promise.resolve(); // }, // }, ]} > <Input placeholder="请输入值" /> </Form.Item> </Col> <Col span={2}> <Tooltip title="移除条目项"> <MinusCircleOutlined onClick={() => remove(name)} style={{ marginLeft: '20px', fontSize: '20px' }} /> </Tooltip> </Col> </Row> </Space> ))} <Form.Item> <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />} style={{ width: '353px', marginLeft: '61px' }} > 新增条目项 </Button> </Form.Item> </> )} </Form.List> </Form> </Modal> {/* 修改一级条目 */} <Modal title="修改一级条目" visible={editVisible1} onOk={submitEdit1} onCancel={() => { setEditVisible1(false); }} okText="确认" cancelText="取消" > <Form form={editForm} labelCol={{ span: 3 }}> <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入名称" style={{ width: '90%' }} /> </Form.Item> </Form> </Modal> {/* 修改二级条目 */} <Modal title="修改二级条目" visible={editVisible} onOk={submitEdit} onCancel={() => { setEditVisible(false); }} okText="确认" cancelText="取消" > <Form form={editForm} labelCol={{ span: 3 }}> <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入名称" style={{ width: '90%' }} /> </Form.Item> <Form.Item name="nodeValue" label="值"> <Input placeholder="请输入值" style={{ width: '90%' }} /> </Form.Item> </Form> </Modal> {/* <Modal title="查找条目" visible={searchVisible} width="700px" onOk={resetSearch} onCancel={() => { setSearchVisible(false); setSearchWord(''); // 搜索框置空 setSearchData([]); }} okText="确认" cancelText="取消" > <Search style={{ width: 470, marginBottom: 25 }} placeholder="输入关键字" onSearch={sumbitSearch} onChange={e => handleSearch(e)} enterButton value={searchWord} /> <Table size="small" bordered key="" columns={columns2} dataSource={searchData} scroll={{ x: 'max-content', y: 'calc(100vh - 700px)' }} rowClassName={setRowClassName} onRow={record => ({ onClick: () => { setSelect(record); setSelectColor(record); setSelectID(record.nodeID); }, })} pagination={pagenation} /> </Modal> */} {/* <Modal title="导入数据" visible={InPutVisible} onOk={input1} onCancel={input1} okText="确认" cancelText="取消" > <Upload {...props}> <UploadOutlined /> <span style={{ verticalAlign: 'middle', marginLeft: '6px', marginRight: '40px', cursor: 'pointer', }} > <a style={{ color: 'rgb(24 144 255)' }}>请选择将要导入的数据文件(仅支持Excel文件)</a> </span> </Upload> </Modal> */} <ImportModal visible={importVisible} onCancel={() => setImportVisible(false)} callBackSubmit={onImportSubmit} /> </div> ); }; export default WebDic;