feat: 数据源列表相关

src/pages/Schema/Option/Components/LeftMenu.tsx

@@ -5,11 +5,12 @@ import {
   QuestionCircleOutlined
 } from '@ant-design/icons'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
-
-import { Button, Input, Popconfirm, Tree } from 'antd'
+import { useRequest } from 'umi'
+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 } from '@/services/api/schema'
+import { addDataSource, delDataSourceID, updateDataSourceItem } from '@/services/api/schema'
+import { useRef, useState } from 'react'
 
 const { DirectoryTree } = Tree
 
@@ -19,10 +20,50 @@ type LeftMenuProps = {
   initFn: () => Promise<void>
 }
 
-const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
-  const handleOnSelect: DirectoryTreeProps['onSelect'] = keys => {
-    console.log('Trigger Select', keys, info)
-    onSelect?.(keys[0])
+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', keys)
+    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 => {
@@ -77,6 +118,7 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
           layout="horizontal"
           title="新增数据源"
           width="30%"
+          onVisibleChange={visible => !visible && formRef.current?.resetFields()}
           isKeyPressSubmit
           labelCol={{ span: 5 }}
           trigger={
@@ -86,8 +128,9 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
             </Button>
           }
           onFinish={async values => {
-            const { code = -1 } = await addDataSource(values)
-            return code === consts.RET_CODE.SUCCESS
+            await tryAddDataSource(values)
+            message.success('添加成功')
+            return true
           }}>
           <ProFormText
             label="数据源名称"
@@ -103,6 +146,7 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
             options.map(item => ({ title: item.name, key: item.ID, ...item }))
           )}
           onSelect={handleOnSelect}
+          showIcon={false}
           defaultExpandAll
         />
       </div>

src/pages/Schema/Option/index.tsx

@@ -1,11 +1,10 @@
-import { Button, Table } from 'antd'
+import { Button } from 'antd'
 import LeftMenu from './Components/LeftMenu'
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
 import { arrayMoveImmutable } from 'array-move'
 import type { ColumnsType } from 'antd/lib/table'
 import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc'
-
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useRequest } from 'umi'
 import {
   addDataSource,
@@ -33,15 +32,17 @@ type iState = {
   activeID: Nullable<string>
   modalType: ModalType
   visible: boolean
+  menuDataItems: API.DataSourceItem[]
 }
 const Option = () => {
+  const formRef = useRef<FormInstance>(null)
   const [state, setState] = useState<iState>({
     menuData: [],
     activeID: null,
     visible: false,
-    modalType: ModalType.ADD
+    modalType: ModalType.ADD,
+    menuDataItems: []
   })
-
   const { run: tryFetchList } = useRequest(queryDataSource, {
     onSuccess: (result: API.DataSourceMenuItem) => {
       setState({ ...state, menuData: result })
@@ -65,6 +66,12 @@ const Option = () => {
       render: () => <DragHandle />
     },
     {
+      title: '序号',
+      dataIndex: 'num',
+      width: 50,
+      render: (num, record, index) => `${index + 1}`
+    },
+    {
       title: '选项名称',
       dataIndex: 'name'
     },
@@ -84,7 +91,12 @@ const Option = () => {
       title: '操作',
       dataIndex: 'opreate',
       render: (_, record) => (
-        <Button type="text" onClick={() => setState({ ...state, modalType: ModalType.UPDATE })}>
+        <Button
+          type="text"
+          onClick={() => {
+            formRef.current?.setFieldsValue({ ...record })
+            setState({ ...state, modalType: ModalType.UPDATE })
+          }}>
           编辑
         </Button>
       )
@@ -98,7 +110,7 @@ const Option = () => {
       )
       const newMenuData = menuData.map(item => {
         const newItem = { ...item }
-        if (item.ID === activeID) {
+        if (item.ID === state.activeID) {
           newItem.items = newData
           return newItem
         }
@@ -120,7 +132,7 @@ const Option = () => {
 
   const DraggableBodyRow = ({ className, style, ...restProps }) => {
     const index = state.menuData
-      .find(item => item.ID === activeID)
+      .find(item => item.ID === state.activeID)
       ?.items.findIndex(x => x.index === restProps['data-row-key'])
     return <SortableItem index={index} {...restProps} />
   }
@@ -128,7 +140,10 @@ const Option = () => {
   return (
     <div className="flex flex-nowrap h-full">
       <LeftMenu
-        onSelect={(key: string) => setState({ ...state, activeID: key })}
+        onSelect={(key: string, node) =>
+          setState({ ...state, activeID: key, menuDataItems: node.node.items })
+        }
+        showDelIcon={!state.menuDataItems.length}
         options={state.menuData}
         initFn={() => tryFetchList()}
       />
@@ -143,6 +158,7 @@ const Option = () => {
               <ModalForm
                 key="form"
                 visible={state.visible}
+                formRef={formRef}
                 onVisibleChange={visible => setState({ ...state, visible })}
                 onFinish={async values => {}}>
                 <ProFormText

src/services/api/schema.ts

@@ -32,5 +32,16 @@ export async function addDataSourceItem(params: { name: string; enable: boolean
 
 /** 编辑数据源-选项 */
 export async function updateDataSourceItem(params: API.DataSourceItem) {
-  return request('', { methods: 'POST', data: params })
+  return request('/form/v1/ds/update', {
+    methods: 'POST',
+    data: params
+  })
+}
+
+/** 删除数据源 */
+export async function delDataSourceID(params: API.DelRoleParams) {
+  return request('/form/v1/ds/delete', {
+    method: 'POST',
+    data: params
+  })
 }