|
@@ -0,0 +1,156 @@
|
|
|
+import { DeleteOutlined, FormOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
|
|
|
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
|
|
|
+import { useRequest } from '@umijs/max'
|
|
|
+import type { ProFormInstance } from '@ant-design/pro-form'
|
|
|
+import { Button, Input, message, Popconfirm, Tree } from 'antd'
|
|
|
+import type { DirectoryTreeProps } from 'antd/lib/tree'
|
|
|
+import '@/pages/Permission/Role/components/RoleLeftMenu/index.less'
|
|
|
+import { addDataSource, delDataSourceID, updateDataSourceItem } from '@/services/api/schema'
|
|
|
+import { useRef, useState } from 'react'
|
|
|
+
|
|
|
+const { DirectoryTree } = Tree
|
|
|
+
|
|
|
+type LeftMenuProps = {
|
|
|
+ onSelect: (key: string) => void
|
|
|
+ options: API.DataSourceMenuItem[]
|
|
|
+ initFn: () => Promise<void>
|
|
|
+}
|
|
|
+
|
|
|
+const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options, showDelIcon, initFn }) => {
|
|
|
+ const [activeID, setActiveID] = useState<Nullable<string>>(null)
|
|
|
+ const formRef = useRef<ProFormInstance>(null)
|
|
|
+ const handleOnSelect: DirectoryTreeProps['onSelect'] = (keys, node) => {
|
|
|
+ // console.log('Trigger Select', node)
|
|
|
+ onSelect?.(keys[0], node)
|
|
|
+ }
|
|
|
+ const { run: tryUpdateDataSourceItem } = useRequest(
|
|
|
+ (params: Partial<API.UpdateRoleParams>) => updateDataSourceItem(params),
|
|
|
+ {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: () => {
|
|
|
+ message.success('修改成功')
|
|
|
+ initFn()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ const { run: tryAddDataSource } = useRequest((params: API.CreateRoleParams) => addDataSource(params), {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: () => {
|
|
|
+ initFn()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const { run: tryDelRole } = useRequest((ID: string) => delDataSourceID({ ID }), {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: () => {
|
|
|
+ message.success('删除成功')
|
|
|
+ initFn()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const handleOnFocus = async (
|
|
|
+ e: React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement>,
|
|
|
+ oldTitle: string,
|
|
|
+ ID: string
|
|
|
+ ) => {
|
|
|
+ const val = e.currentTarget.value || e.currentTarget.nodeValue
|
|
|
+ if (val !== oldTitle) {
|
|
|
+ await tryUpdateDataSourceItem({ ID, name: val })
|
|
|
+ }
|
|
|
+ setActiveID(null)
|
|
|
+ }
|
|
|
+
|
|
|
+ const renderTreeNode = tree => {
|
|
|
+ return tree.map((item: API.DataSourceMenuItem & { title: string; key: string }) => {
|
|
|
+ const newItem = {
|
|
|
+ ...item,
|
|
|
+ title: (
|
|
|
+ <div className="department-node py-1">
|
|
|
+ {item.ID === activeID ? (
|
|
|
+ <Input
|
|
|
+ autoFocus
|
|
|
+ defaultValue={item.name}
|
|
|
+ bordered={false}
|
|
|
+ size="small"
|
|
|
+ style={{ width: '70%', backgroundColor: 'white' }}
|
|
|
+ onBlur={e => handleOnFocus(e, item.name, item.ID)}
|
|
|
+ onPressEnter={e => handleOnFocus(e, item.name, item.ID)}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <div className="title">{item.name}</div>
|
|
|
+ )}
|
|
|
+ <div className="extra">
|
|
|
+ <FormOutlined className="pr-2" onClick={() => setActiveID(item.ID)} />
|
|
|
+ <Popconfirm
|
|
|
+ disabled={!showDelIcon}
|
|
|
+ title="确认删除吗?"
|
|
|
+ onText="确认"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => tryDelRole(item.ID)}
|
|
|
+ icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
|
|
|
+ <DeleteOutlined
|
|
|
+ onClick={() => {
|
|
|
+ !showDelIcon && message.warning('请先移除该栏目下所有配置')
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Popconfirm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (newItem.children?.length) {
|
|
|
+ newItem.children = renderTreeNode(newItem.items)
|
|
|
+ }
|
|
|
+ return newItem
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const virtualHeigh = document.getElementById('role-list')?.clientHeight
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="min-w-54 rounded-20px flex flex-col bg-white "
|
|
|
+ style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
|
|
|
+ <div className="menu-title flex items-center justify-around">
|
|
|
+ <div className="py-4 text-base text-opacity-85">数据源列表</div>
|
|
|
+ <ModalForm
|
|
|
+ layout="horizontal"
|
|
|
+ title="新增数据源"
|
|
|
+ width="30%"
|
|
|
+ formRef={formRef}
|
|
|
+ onVisibleChange={visible => !visible && formRef.current?.resetFields()}
|
|
|
+ isKeyPressSubmit
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ trigger={
|
|
|
+ <Button size="small" type="primary" ghost>
|
|
|
+ <PlusOutlined />
|
|
|
+ 添加
|
|
|
+ </Button>
|
|
|
+ }
|
|
|
+ onFinish={async values => {
|
|
|
+ await tryAddDataSource(values)
|
|
|
+ message.success('添加成功')
|
|
|
+ return true
|
|
|
+ }}>
|
|
|
+ <ProFormText
|
|
|
+ label="数据源名称"
|
|
|
+ name="name"
|
|
|
+ rules={[{ required: true, message: '请输入数据源名称' }]}
|
|
|
+ />
|
|
|
+ {/* <ProFormText label="URL" name="url" required disabled placeholder="自动生成" /> */}
|
|
|
+ </ModalForm>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="role-list"
|
|
|
+ className="p-4 bg-white rounded-b-20px"
|
|
|
+ style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
|
|
|
+ <DirectoryTree
|
|
|
+ treeData={renderTreeNode(options.map(item => ({ title: item.name, key: item.ID, ...item })))}
|
|
|
+ height={virtualHeigh - 32}
|
|
|
+ onSelect={handleOnSelect}
|
|
|
+ showIcon={false}
|
|
|
+ defaultExpandAll
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default LeftMenu
|