feat: 数据源列表编辑

src/pages/Schema/Option/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd'
+import { Button, message } from 'antd'
 import LeftMenu from './Components/LeftMenu'
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
 import { arrayMoveImmutable } from 'array-move'
@@ -7,18 +7,18 @@ 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 { addDataSourceItem, queryDataSource, updateDataSourceItem } from '@/services/api/schema'
 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'
 import { ModalType } from '@/utils/enum'
 
+enum OptionModalType {
+  ADD,
+  UPDATE
+}
+
 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)
 
 const SortableItem = SortableElement((props: React.HTMLAttributes<HTMLTableRowElement>) => (
@@ -31,16 +31,25 @@ const SortableBody = SortableContainer((props: React.HTMLAttributes<HTMLTableSec
 type iState = {
   menuData: API.DataSourceMenuItem[]
   activeID: Nullable<string>
+  current: API.DataSourceItem[]
   modalType: ModalType
   menuDataItems: API.DataSourceItem[]
+  items: API.DataSourceItem[]
 }
 const Option = () => {
   const formRef = useRef<ProFormInstance>(null)
   const [state, setState] = useState<iState>({
     menuData: [],
     activeID: null,
-    modalType: ModalType.ADD,
-    menuDataItems: []
+    modalVisible: false,
+    modalType: OptionModalType.ADD,
+    menuDataItems: [],
+    items: [],
+    current: {
+      ID: null,
+      name: null,
+      enable: true
+    }
   })
 
   const { run: tryFetchList } = useRequest(queryDataSource, {
@@ -49,7 +58,16 @@ const Option = () => {
     }
   })
   const { run: tryAddDataSourceItem } = useRequest(
-    (params: API.LinkAccountParams) => addDataSourceItem(params),
+    (params: API.DataSourceItem) => addDataSourceItem(params),
+    {
+      manual: true,
+      onSuccess: async () => {
+        await tryFetchList()
+      }
+    }
+  )
+  const { run: tryUpdateDataSourceItem } = useRequest(
+    (params: API.DataSourceItem) => updateDataSourceItem(params),
     {
       manual: true,
       onSuccess: async () => {
@@ -57,10 +75,6 @@ const Option = () => {
       }
     }
   )
-  const { run: tryUpdateItem } = useRequest(updateDataSourceItem, {
-    manual: true,
-    onSuccess: () => tryFetchList()
-  })
 
   const columns: ColumnsType<API.DataSourceItem> = [
     {
@@ -83,9 +97,12 @@ const Option = () => {
       title: '状态',
       dataIndex: 'enable',
       render: text => (
-        <div>
+        <div className="flex items-center">
           <span
-            className={classNames('w-4 h-4 rounded-1/2', text ? 'bg-green-500' : 'bg-red-500')}
+            className={classNames(
+              'w-3 h-3 rounded-1/2 inline-flex',
+              text ? 'bg-green-500' : 'bg-red-500'
+            )}
           />
           <span className="ml-1">{text ? '已启用' : '已停用'}</span>
         </div>
@@ -95,14 +112,26 @@ const Option = () => {
       title: '操作',
       dataIndex: 'opreate',
       render: (_, record) => (
-        <Button
-          type="text"
+        <div
+          className="text-primary cursor-pointer hover:text-hex-967bbd"
           onClick={() => {
-            formRef.current?.setFieldsValue({ ...record })
-            setState({ ...state, modalType: ModalType.UPDATE })
+            setTimeout(() => {
+              formRef.current?.setFieldsValue({ ...record })
+            }, 80)
+            setState({
+              ...state,
+              modalType: ModalType.UPDATE,
+              modalVisible: true,
+              items: state.menuDataItems,
+              current: {
+                ID: record.ID,
+                name: record.name,
+                enable: record.enable
+              }
+            })
           }}>
           编辑
-        </Button>
+        </div>
       )
     }
   ]
@@ -159,44 +188,21 @@ const Option = () => {
           rowKey="ID"
           toolbar={{
             actions: [
-              <ModalForm
-                labelCol={{ span: 6 }}
-                key="form"
-                width="30%"
-                title="添加选项"
-                formRef={formRef}
-                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
+              <Button
+                key="btn-key"
+                size="small"
+                type="primary"
+                onClick={() => {
+                  setState({
+                    ...state,
+                    modalType: OptionModalType.ADD,
+                    modalVisible: true
                   })
-                  message.success('添加成功')
-                  return true
-                }}>
-                <ProFormText
-                  name="name"
-                  label="选项名称"
-                  rules={[{ required: true, message: '请输入选项名称' }]}
-                />
-                <ProFormRadio.Group
-                  name="enable"
-                  label="状态"
-                  options={[
-                    { label: '启用', value: true },
-                    { label: '停用', value: false }
-                  ]}
-                  rules={[{ required: true, message: '请选择启用/停用' }]}
-                />
-              </ModalForm>
+                }}
+                ghost>
+                <PlusOutlined />
+                添加选项
+              </Button>
             ]
           }}
           components={{
@@ -206,6 +212,63 @@ const Option = () => {
             }
           }}
         />
+        <ModalForm
+          labelCol={{ span: 6 }}
+          key="form"
+          width="30%"
+          title={`${state.modalType === OptionModalType.ADD ? '添加' : '编辑'}选项`}
+          formRef={formRef}
+          layout="horizontal"
+          visible={state.modalVisible}
+          onVisibleChange={visible => {
+            setState({ ...state, modalVisible: visible })
+            setTimeout(() => {
+              if (!visible) formRef.current?.resetFields()
+            }, 80)
+          }}
+          initialValues={{ enable: true }}
+          onFinish={async values => {
+            try {
+              if (state.modalType === OptionModalType.ADD) {
+                await tryAddDataSourceItem({ ...values, dataSourceID: state.activeID })
+              } else {
+                const newItemData = state.menuDataItems.map(item => {
+                  const newItem = { ...item }
+                  if (item.ID === state.current.ID) {
+                    newItem.items = values
+                    return newItem
+                  }
+                  return item
+                })
+
+                await tryUpdateDataSourceItem({
+                  ...values,
+                  ID: state.activeID,
+                  items: newItemData
+                })
+              }
+              message.success(`${state.modalType === OptionModalType.ADD ? '新增' : '编辑'}成功`)
+              return true
+            } catch (error) {
+              message.error(error)
+              return false
+            }
+          }}>
+          <ProFormText
+            name="name"
+            label="选项名称"
+            rules={[{ required: true, message: '请输入选项名称' }]}
+          />
+          <ProFormRadio.Group
+            name="enable"
+            label="状态"
+            options={[
+              { label: '启用', value: true },
+              { label: '停用', value: false }
+            ]}
+            rules={[{ required: true, message: '请选择启用/停用' }]}
+          />
+        </ModalForm>
       </div>
     </div>
   )