| | |
| | | import Http from '@/utils/http'; |
| | | import Edit from './components/edit' |
| | | import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch' |
| | | import { buildTreeData } from '@/utils/tree-util' |
| | | |
| | | const handleSave = async (val) => { |
| | | const hide = message.loading('正在添加'); |
| | |
| | | const [currentRow, setCurrentRow] = useState(); |
| | | const [searchParam, setSearchParam] = useState({}); |
| | | |
| | | const [treeData, setTreeData] = useState([]); |
| | | |
| | | useEffect(() => { |
| | | |
| | | }, []); |
| | | |
| | | const columns = [ |
| | | { |
| | | title: 'No', |
| | | dataIndex: 'index', |
| | | valueType: 'indexBorder', |
| | | width: 48, |
| | | }, |
| | | { |
| | | title: '名称', |
| | | dataIndex: 'name', |
| | |
| | | }} |
| | | request={(params, sorter, filter) => |
| | | Http.doPostPromise('/api/menu/page', { ...params, ...searchParam }, (res) => { |
| | | const records = res.data.records; |
| | | console.log(records); |
| | | |
| | | const rootMenu = { id: 0, label: '主类目', children: [], value: 0 }; |
| | | const memuData = buildTreeData(records, 'menuId', 'menuName', '', '', ''); |
| | | rootMenu.children = memuData; |
| | | const treeData = []; |
| | | treeData.push(rootMenu); |
| | | setTreeData(treeData); |
| | | |
| | | return { |
| | | data: res.data.records, |
| | | data: treeData, |
| | | total: res.data.total, |
| | | success: true, |
| | | } |
New file |
| | |
| | | import { DataNode } from 'antd/es/tree'; |
| | | import { parse } from 'querystring'; |
| | | |
| | | /** |
| | | * 构造树型结构数据 |
| | | * @param {*} data 数据源 |
| | | * @param {*} id id字段 默认 'id' |
| | | * @param {*} parentId 父节点字段 默认 'parentId' |
| | | * @param {*} children 孩子节点字段 默认 'children' |
| | | */ |
| | | export function buildTreeData(data, id, name, parentId, parentName, children) { |
| | | const config = { |
| | | id: id || 'id', |
| | | name: name || 'name', |
| | | parentId: parentId || 'parentId', |
| | | parentName: parentName || 'parentName', |
| | | childrenList: children || 'children', |
| | | }; |
| | | |
| | | const childrenListMap = []; |
| | | const nodeIds = []; |
| | | const tree = []; |
| | | data.forEach((item) => { |
| | | const d = item; |
| | | const pId = d[config.parentId]; |
| | | if (!childrenListMap[pId]) { |
| | | childrenListMap[pId] = []; |
| | | } |
| | | d.key = d[config.id]; |
| | | d.title = d[config.name]; |
| | | d.value = d[config.id]; |
| | | d[config.childrenList] = null; |
| | | nodeIds[d[config.id]] = d; |
| | | childrenListMap[pId].push(d); |
| | | }); |
| | | |
| | | data.forEach((item) => { |
| | | const d = item; |
| | | const pId = d[config.parentId]; |
| | | if (!nodeIds[pId]) { |
| | | d[config.parentName] = ''; |
| | | tree.push(d); |
| | | } |
| | | }); |
| | | |
| | | function adaptToChildrenList(item) { |
| | | const o = item; |
| | | if (childrenListMap[o[config.id]]) { |
| | | if (!o[config.childrenList]) { |
| | | o[config.childrenList] = []; |
| | | } |
| | | o[config.childrenList] = childrenListMap[o[config.id]]; |
| | | } |
| | | if (o[config.childrenList]) { |
| | | o[config.childrenList].forEach((child) => { |
| | | const c = child; |
| | | c[config.parentName] = o[config.name]; |
| | | adaptToChildrenList(c); |
| | | }); |
| | | } |
| | | } |
| | | |
| | | tree.forEach((t) => { |
| | | adaptToChildrenList(t); |
| | | }); |
| | | |
| | | return tree; |
| | | } |
| | | |
| | | export const getPageQuery = () => parse(window.location.href.split('?')[1]); |
| | | |
| | | export function formatTreeData(arrayList) { |
| | | const treeSelectData = arrayList.map((item) => { |
| | | const node = { |
| | | id: item.id, |
| | | title: item.label, |
| | | key: `${item.id}`, |
| | | value: item.id, |
| | | }; |
| | | if (item.children) { |
| | | node.children = formatTreeData(item.children); |
| | | } |
| | | return node; |
| | | }); |
| | | return treeSelectData; |
| | | } |
| | |
| | | "@@test/*": ["./src/.umi-test/*"] |
| | | } |
| | | }, |
| | | "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx", "src/app.tsx", "src/utils/icon-util.js", "src/pages/User/Login/index1.jsx", "src/components/Footer/index.jsx", "src/components/HeaderDropdown/index.jsx", "src/pages/system/host/components/UpdateForm.jsx", "src/pages/system/host/index.jsx"] |
| | | "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx", "src/app.tsx", "src/utils/icon-util.js", "src/pages/User/Login/index1.jsx", "src/components/Footer/index.jsx", "src/components/HeaderDropdown/index.jsx", "src/pages/system/host/components/UpdateForm.jsx", "src/pages/system/host/index.jsx", "src/utils/tree-util.js"] |
| | | } |