|
|
@@ -1,7 +1,7 @@
|
|
|
import { Button, message, Tooltip } from 'antd'
|
|
|
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
|
|
|
import { arrayMoveImmutable } from 'array-move'
|
|
|
-import { useEffect, useState } from 'react'
|
|
|
+import { useEffect, useMemo, useState } from 'react'
|
|
|
import { useRequest } from '@umijs/max'
|
|
|
import { updateDataSourceItem } from '@/services/api/schema'
|
|
|
import { CopyOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons'
|
|
|
@@ -25,15 +25,11 @@ const SortableBody = SortableContainer((props: React.HTMLAttributes<HTMLTableSec
|
|
|
|
|
|
type iState = {
|
|
|
activeID: Nullable<string>
|
|
|
- menuDataItems?: API.DataSourceItem[]
|
|
|
}
|
|
|
const Option = () => {
|
|
|
const [modal, ModalDOM] = useModal()
|
|
|
const { query, refresh, menuData, addOrEdit } = useRowScript(modal)
|
|
|
- const [state, setState] = useState<iState>({
|
|
|
- activeID: null,
|
|
|
- menuDataItems: []
|
|
|
- })
|
|
|
+ const [state, setState] = useState<iState>({ activeID: null })
|
|
|
const { run: tryUpdateDataSourceItem } = useRequest(
|
|
|
(params: API.DataSourceItem) => updateDataSourceItem(params),
|
|
|
{
|
|
|
@@ -44,8 +40,8 @@ const Option = () => {
|
|
|
}
|
|
|
)
|
|
|
|
|
|
- const onSelect = (key: string, node) => {
|
|
|
- setState({ ...state, activeID: key, menuDataItems: node.node.items })
|
|
|
+ const handleOnSelect = (key: string) => {
|
|
|
+ setState({ ...state, activeID: key })
|
|
|
}
|
|
|
|
|
|
const columns: ColumnsType<API.DataSourceItem> = [
|
|
|
@@ -123,13 +119,7 @@ const Option = () => {
|
|
|
activeID: menuData[0].ID
|
|
|
})
|
|
|
}
|
|
|
- if (state.activeID) {
|
|
|
- setState({
|
|
|
- ...state,
|
|
|
- menuDataItems: menuData.find(item => item.ID === state.activeID)?.items
|
|
|
- })
|
|
|
- }
|
|
|
- }, [state.activeID, menuData])
|
|
|
+ }, [menuData])
|
|
|
|
|
|
const DraggableBodyRow = ({ ...restProps }) => {
|
|
|
if (state.menuDataItems?.length) {
|
|
|
@@ -141,16 +131,25 @@ const Option = () => {
|
|
|
|
|
|
const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
|
|
|
|
|
|
+ const currentMenuData = useMemo(() => {
|
|
|
+ if (!state?.activeID) return []
|
|
|
+
|
|
|
+ return menuData.find(item => item.ID === state.activeID)
|
|
|
+ }, [state.activeID])
|
|
|
+
|
|
|
return (
|
|
|
<PageContainer title={false}>
|
|
|
<div className="h-full w-full flex flex-row">
|
|
|
- <LeftMenu
|
|
|
- onSelect={onSelect}
|
|
|
- defaultActiveID={state.activeID}
|
|
|
- showDelIcon={!state.menuDataItems?.length}
|
|
|
- options={menuData}
|
|
|
- initFn={() => query()}
|
|
|
- />
|
|
|
+ {state?.activeID ? (
|
|
|
+ <LeftMenu
|
|
|
+ onSelect={handleOnSelect}
|
|
|
+ defaultActiveID={state?.activeID}
|
|
|
+ showDelIcon={!currentMenuData?.items?.length}
|
|
|
+ options={menuData}
|
|
|
+ initFn={() => query()}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+
|
|
|
<div className="w-6/7 ml-8 bg-white p-4 rounded-20px shadow-hex-3e2c5a relative">
|
|
|
{menuData.length ? (
|
|
|
<ProTable<API.DataSourceItem>
|
|
|
@@ -159,24 +158,20 @@ const Option = () => {
|
|
|
scroll={{
|
|
|
y: document.body.clientHeight - (287 + wrapHeight)
|
|
|
}}
|
|
|
- dataSource={state.menuDataItems || []}
|
|
|
+ dataSource={currentMenuData?.items || []}
|
|
|
rowKey="index"
|
|
|
toolbar={
|
|
|
state.activeID
|
|
|
? {
|
|
|
title: (
|
|
|
<div className="max-w-400px truncate">
|
|
|
- {menuData.find(i => i.ID === state.activeID)?.name +
|
|
|
- `:` +
|
|
|
- `/api/form/v1/ds/items?name=${menuData.find(i => i.ID === state.activeID)?.name}`}
|
|
|
+ {`${currentMenuData?.name}: /api/form/v1/ds/items?name=${currentMenuData?.name}`}
|
|
|
</div>
|
|
|
),
|
|
|
subTitle: (
|
|
|
<CopyToClipboard
|
|
|
onCopy={() => message.success('复制成功')}
|
|
|
- text={`/api/form/v1/ds/items?name=${
|
|
|
- menuData.find(i => i.ID === state.activeID)?.name
|
|
|
- }`}>
|
|
|
+ text={`/api/form/v1/ds/items?name=${encodeURIComponent(currentMenuData?.name)}`}>
|
|
|
<Tooltip placement="right" title="复制" className="ml-5px">
|
|
|
<CopyOutlined />
|
|
|
</Tooltip>
|