feat: 数据源列表数据项相关

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

@@ -6,6 +6,7 @@ import {
 } from '@ant-design/icons'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
 import { useRequest } from 'umi'
+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'

src/pages/Schema/Option/index.tsx

@@ -6,13 +6,14 @@ import type { ColumnsType } from 'antd/lib/table'
 import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc'
 import { useRef, useState } from 'react'
 import { useRequest } from 'umi'
+import type { ProFormInstance } from '@ant-design/pro-form'
 import {
   addDataSource,
   addDataSourceItem,
   queryDataSource,
   updateDataSourceItem
 } from '@/services/api/schema'
-import { MenuOutlined } from '@ant-design/icons'
+import { MenuOutlined, PlusOutlined } from '@ant-design/icons'
 import classNames from 'classnames'
 import { ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-form'
 import ProTable from '@ant-design/pro-table'
@@ -31,28 +32,31 @@ type iState = {
   menuData: API.DataSourceMenuItem[]
   activeID: Nullable<string>
   modalType: ModalType
-  visible: boolean
   menuDataItems: API.DataSourceItem[]
 }
 const Option = () => {
-  const formRef = useRef<FormInstance>(null)
+  const formRef = useRef<ProFormInstance>(null)
   const [state, setState] = useState<iState>({
     menuData: [],
     activeID: null,
-    visible: false,
     modalType: ModalType.ADD,
     menuDataItems: []
   })
+
   const { run: tryFetchList } = useRequest(queryDataSource, {
     onSuccess: (result: API.DataSourceMenuItem) => {
       setState({ ...state, menuData: result })
     }
   })
-
-  const { run: tryAddItem } = useRequest(addDataSourceItem, {
-    manual: true,
-    onSuccess: () => tryFetchList()
-  })
+  const { run: tryAddDataSourceItem } = useRequest(
+    (params: API.LinkAccountParams) => addDataSourceItem(params),
+    {
+      manual: true,
+      onSuccess: async () => {
+        await tryFetchList()
+      }
+    }
+  )
   const { run: tryUpdateItem } = useRequest(updateDataSourceItem, {
     manual: true,
     onSuccess: () => tryFetchList()
@@ -156,13 +160,30 @@ const Option = () => {
           toolbar={{
             actions: [
               <ModalForm
+                labelCol={{ span: 6 }}
                 key="form"
-                visible={state.visible}
+                width="30%"
+                title="添加选项"
                 formRef={formRef}
-                onVisibleChange={visible => setState({ ...state, visible })}
-                onFinish={async values => {}}>
+                layout="horizontal"
+                onVisibleChange={visible => !visible && formRef.current?.resetFields()}
+                initialValues={{ enable: true }}
+                trigger={
+                  <Button size="small" type="primary" ghost>
+                    <PlusOutlined />
+                    添加选项
+                  </Button>
+                }
+                onFinish={async values => {
+                  await tryAddDataSourceItem({
+                    ...values,
+                    dataSourceID: state.activeID
+                  })
+                  message.success('添加成功')
+                  return true
+                }}>
                 <ProFormText
-                  name="label"
+                  name="name"
                   label="选项名称"
                   rules={[{ required: true, message: '请输入选项名称' }]}
                 />

src/services/api/schema.ts

@@ -27,13 +27,13 @@ export async function queryDataSource() {
 
 /**  新增数据源-选项 */
 export async function addDataSourceItem(params: { name: string; enable: boolean }) {
-  return request('', { method: 'POST', data: params })
+  return request('/form/v1/ds/item/create', { method: 'POST', data: params })
 }
 
 /** 编辑数据源-选项 */
 export async function updateDataSourceItem(params: API.DataSourceItem) {
   return request('/form/v1/ds/update', {
-    methods: 'POST',
+    method: 'POST',
     data: params
   })
 }