|
@@ -0,0 +1,51 @@
|
|
|
+import React from 'react'
|
|
|
+import type { DirectoryTreeProps } from 'antd/lib/tree'
|
|
|
+import { Tree } from 'antd'
|
|
|
+
|
|
|
+const { DirectoryTree } = Tree
|
|
|
+type LeftMenuProps = {
|
|
|
+ onSelect: (key: string) => void
|
|
|
+ options: API.DataSourceMenuItem[]
|
|
|
+ initFn: () => Promise<void>
|
|
|
+}
|
|
|
+
|
|
|
+const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
|
|
|
+ const handleOnSelect: DirectoryTreeProps['onSelect'] = keys => {
|
|
|
+ // console.log('Trigger Select', node)
|
|
|
+ onSelect?.(keys[0])
|
|
|
+ }
|
|
|
+ const renderTreeNode = tree => {
|
|
|
+ return tree.map((item: API.TemplateListItem & { title: string; key: string }) => {
|
|
|
+ const newItem = {
|
|
|
+ ...item,
|
|
|
+ title: (
|
|
|
+ <div className="department-node py-1">
|
|
|
+ <div className="title">{item.name}</div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return newItem
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="w-54 rounded-20px flex flex-col bg-white "
|
|
|
+ style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
|
|
|
+ <div className="p-4 border-b-1 rounded-tl-20px rounded-tr-20px border-solid border-black border-opacity-10 bg-hex-f7f9fa">
|
|
|
+ <div className="text-base">表单列表</div>
|
|
|
+ </div>
|
|
|
+ <div className="flex-1">
|
|
|
+ <DirectoryTree
|
|
|
+ treeData={renderTreeNode(
|
|
|
+ options.map(item => ({ title: item.name, key: item.action, ...item }))
|
|
|
+ )}
|
|
|
+ onSelect={handleOnSelect}
|
|
|
+ showIcon={false}
|
|
|
+ defaultExpandAll
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default LeftMenu
|