feat: 组织架构添加子项、移动、删除功能

src/pages/Institutions/Company/Detail/components/Organization.tsx

@@ -18,8 +18,16 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
     visible: false,
     currentModalType: ModalType.ADD,
     defaultFormData: null,
-    parentID: '9dddcc99-0c4f-4589-bd47-87e939f8f7c8'
+    parentID: '',
+    typeEum: '1'
   })
+  const titleType = {
+    ADD: 1,
+    ADDITEM: 2,
+    RENAME: 3,
+    DEL: 4,
+    MOVE: 5
+  }
 
   const columns: ColumnType<API.OrganizationalStructureListItem>[] = [
     {
@@ -38,8 +46,37 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
       key: 'operation',
       render: (_, record) => (
         <div className="divide-x divide-bg-gray-400 flex flex-row">
-          <div className="px-2 text-primary cursor-pointer hover:text-hex-967bbd">添加子项</div>
-          <div className="px-2 text-primary cursor-pointer hover:text-hex-967bbd">移动</div>
+          <div
+            className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
+            onClick={() => {
+              // console.log(record.parentID)
+              setState({
+                ...state,
+                visible: true,
+                currentModalType: ModalType.ADD,
+                defaultFormData: {
+                  dataID: dataID,
+                  structureType: structureType,
+                  parentID: record.ID
+                },
+                typeEum: titleType.ADDITEM
+              })
+            }}>
+            添加子项
+          </div>
+          <div
+            className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
+            onClick={() => {
+              setState({
+                ...state,
+                visible: true,
+                currentModalType: ModalType.MOVE,
+                defaultFormData: record,
+                typeEum: titleType.MOVE
+              })
+            }}>
+            移动
+          </div>
           <div
             className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
             onClick={() => {
@@ -47,13 +84,24 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
                 ...state,
                 visible: true,
                 currentModalType: ModalType.UPDATE,
-                defaultFormData: record
+                defaultFormData: record,
+                typeEum: titleType.RENAME
               })
             }}>
             重命名
           </div>
           <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-967bbd">
-            <DeleteOutlined />
+            <DeleteOutlined
+              onClick={() => {
+                setState({
+                  ...state,
+                  visible: true,
+                  currentModalType: ModalType.DEL,
+                  defaultFormData: record,
+                  typeEum: titleType.DEL
+                })
+              }}
+            />
           </div>
         </div>
       )
@@ -99,6 +147,7 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
                     ...state,
                     visible: true,
                     currentModalType: ModalType.ADD,
+                    typeEum: titleType.ADD,
                     defaultFormData: {
                       dataID: dataID,
                       structureType: structureType,
@@ -114,6 +163,7 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
       ) : null}
       <OrganizationModal
         type={state.currentModalType}
+        typeEum={state.typeEum}
         visible={state.visible}
         setVisible={(visible: boolean) => setState({ ...state, visible })}
         reload={() => {

src/pages/Institutions/Company/Detail/components/OrganizationModal.tsx

@@ -1,22 +1,26 @@
 import { useRequest } from 'umi'
 import React, { useRef, useEffect } from 'react'
-import { Modal, message } from 'antd'
+import { Modal, message, TreeSelect, Form } from 'antd'
 import type { FormInstance } from 'antd'
 import ProForm, { ProFormText } from '@ant-design/pro-form'
 import {
   addOrganizationalStructure,
-  updateOrganizationalStructure
+  updateOrganizationalStructure,
+  delOrganizationalStructure
 } from '@/services/api/institution'
 
 export enum ModalType {
   ADD = 0,
-  UPDATE = 1
+  UPDATE = 1,
+  DEL = 2,
+  MOVE = 5
 }
 
 type OrganizationModalProps = {
   visible: boolean
   setVisible: (visible: boolean) => void
   type: ModalType
+  typeEum: string
   reload: () => void
   defaultFormData?: {
     structureType?: string
@@ -28,11 +32,34 @@ type OrganizationModalProps = {
 const OrganizationModal: React.FC<OrganizationModalProps> = ({
   visible,
   type,
+  typeEum,
   setVisible,
   defaultFormData,
   reload
 }) => {
   const ref = useRef<FormInstance>(null)
+  const titleTypeEunm = {
+    1: {
+      key: 'ADD',
+      name: '添加父级组织'
+    },
+    2: {
+      key: 'ADDITEM',
+      name: '添加子项'
+    },
+    3: {
+      key: 'RENAME',
+      name: '重命名'
+    },
+    4: {
+      key: 'DEL',
+      name: '删除组织架构'
+    },
+    5: {
+      key: 'MOVE',
+      name: '移动'
+    }
+  }
   useEffect(() => {
     visible && defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
   }, [defaultFormData, visible])
@@ -48,15 +75,24 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
       message.success('创建成功')
     }
   })
+  const { run: tryDelOrganization } = useRequest(delOrganizationalStructure, {
+    manual: true,
+    onSuccess: () => {
+      message.success('删除成功')
+    }
+  })
   const handleOnFinish = () => {
     ref.current?.validateFields().then(async values => {
       try {
         // 执行表单提交
         if (type === ModalType.ADD) {
-          await tryAddOrganization(values)
+          await tryAddOrganization({ ...values, ...defaultFormData })
+        } else if (type === ModalType.DEL) {
+          await tryDelOrganization(values)
         } else {
           await tryUpdateOrganization(values)
         }
+
         setVisible(false)
 
         ref.current?.resetFields()
@@ -70,20 +106,50 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
     <Modal
       width="35vw"
       visible={visible}
-      title={type === ModalType.ADD ? '添加父级组织' : '重命名'}
+      // title={type === ModalType.ADD ? '添加父级组织' : '重命名'}
+      title={titleTypeEunm[typeEum].name}
       onCancel={() => {
         ref.current?.resetFields()
         setVisible(false)
       }}
       onOk={() => handleOnFinish()}>
-      <ProForm formRef={ref} submitter={{ render: false }}>
-        {type === ModalType.UPDATE ? <ProFormText name="ID" hidden /> : null}
-        <ProFormText
-          name="name"
-          label="组织架构名称"
-          rules={[{ required: true, message: '请输入组织架构名称' }]}
-        />
-      </ProForm>
+      {type === ModalType.ADD ? (
+        <ProForm formRef={ref} submitter={{ render: false }}>
+          <ProFormText
+            name="name"
+            label="组织架构名称"
+            rules={[{ required: true, message: '请输入组织架构名称' }]}
+          />
+        </ProForm>
+      ) : null}
+      {type === ModalType.UPDATE ? (
+        <ProForm formRef={ref} submitter={{ render: false }}>
+          <ProFormText name="ID" hidden />
+          <ProFormText
+            name="name"
+            label="组织架构名称"
+            rules={[{ required: true, message: '请输入组织架构名称' }]}
+          />
+        </ProForm>
+      ) : null}
+      {type === ModalType.DEL ? (
+        <ProForm formRef={ref} submitter={{ render: false }}>
+          <ProFormText name="ID" hidden />
+          <p>确认删除？</p>
+        </ProForm>
+      ) : null}
+      {type === ModalType.MOVE ? (
+        <ProForm formRef={ref} submitter={{ render: false }}>
+          <ProFormText name="ID" hidden />
+          <Form.Item label="目标架构" name="moveID">
+            <TreeSelect
+              style={{ width: '100%' }}
+              placeholder="请选择目标架构"
+              treeDefaultExpandAll
+            />
+          </Form.Item>
+        </ProForm>
+      ) : null}
     </Modal>
   )
 }

src/services/api/institution.ts

@@ -67,7 +67,7 @@ export async function queryOrganizationalStructureList(
 
 /** 新增组织结构 */
 export async function addOrganizationalStructure(params: API.OrganizationalStructureAddParams) {
-  return request('OrganizationalStructure/add', {
+  return request('/OrganizationalStructure/add', {
     method: 'POST',
     data: params
   })