feat: 组织架构上移下移功能

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

@@ -1,10 +1,13 @@
-import { Breadcrumb, Button } from 'antd'
+import { Button, Popconfirm, message } from 'antd'
 import type { ActionType } from '@ant-design/pro-table'
 import ProTable from '@ant-design/pro-table'
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { useRequest } from 'umi'
 import { DeleteOutlined } from '@ant-design/icons'
-import { queryOrganizationalStructureList } from '@/services/api/institution'
+import {
+  queryOrganizationalStructureList,
+  moveOrganizationalStructure
+} from '@/services/api/institution'
 import OrganizationModal, { ModalType } from './OrganizationModal'
 
 type OrganizationProps = {
@@ -29,6 +32,24 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
     MOVE: 5
   }
 
+  const { run: tryOrganizationList } = useRequest(
+    () => queryOrganizationalStructureList({ dataID, structureType }),
+    {
+      // manual: true,
+      onSuccess: result => {
+        setState({ ...state, organizationList: result })
+      }
+    }
+  )
+
+  const { run: tryMoveOrganization } = useRequest(moveOrganizationalStructure, {
+    manual: true,
+    onSuccess: () => {
+      tryOrganizationList()
+      message.success('移动成功')
+    }
+  })
+
   const columns: ColumnType<API.OrganizationalStructureListItem>[] = [
     {
       title: '组织名称',
@@ -46,6 +67,28 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
       key: 'operation',
       render: (_, record) => (
         <div className="divide-x divide-bg-gray-400 flex flex-row">
+          {record.isStart === false ? (
+            <div className="px-2 text-primary cursor-pointer hover:text-hex-967bbd">
+              <Popconfirm
+                title="确认上移吗？"
+                okText="确认"
+                cancelText="取消"
+                onConfirm={() => tryMoveOrganization({ ID: record.ID, moveID: record.parentID })}>
+                上移
+              </Popconfirm>
+            </div>
+          ) : null}
+          {record.isEnd === false ? (
+            <div className="px-2 text-primary cursor-pointer hover:text-hex-967bbd">
+              <Popconfirm
+                title="确认下移吗？"
+                okText="确认"
+                cancelText="取消"
+                onConfirm={() => tryMoveOrganization({ ID: record.parentID, moveID: record.ID })}>
+                下移
+              </Popconfirm>
+            </div>
+          ) : null}
           <div
             className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
             onClick={() => {
@@ -64,7 +107,7 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
             }}>
             添加子项
           </div>
-          <div
+          {/* <div
             className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
             onClick={() => {
               setState({
@@ -76,7 +119,7 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
               })
             }}>
             移动
-          </div>
+          </div> */}
           <div
             className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
             onClick={() => {
@@ -90,46 +133,28 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
             }}>
             重命名
           </div>
-          <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-967bbd">
-            <DeleteOutlined
-              onClick={() => {
-                setState({
-                  ...state,
-                  visible: true,
-                  currentModalType: ModalType.DEL,
-                  defaultFormData: record,
-                  typeEum: titleType.DEL
-                })
-              }}
-            />
-          </div>
+          {!record.parentID === false ? (
+            <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-967bbd">
+              <DeleteOutlined
+                onClick={() => {
+                  setState({
+                    ...state,
+                    visible: true,
+                    currentModalType: ModalType.DEL,
+                    defaultFormData: record,
+                    typeEum: titleType.DEL
+                  })
+                }}
+              />
+            </div>
+          ) : null}
         </div>
       )
     }
   ]
-  const { run: tryOrganizationList } = useRequest(
-    () => queryOrganizationalStructureList({ dataID, structureType }),
-    {
-      // manual: true,
-      onSuccess: result => {
-        setState({ ...state, organizationList: result })
-      }
-    }
-  )
 
-  useEffect(() => {
-    // tryOrganizationList()
-  }, [])
   return (
     <div>
-      <div className="mb-2">
-        <Breadcrumb>
-          <Breadcrumb.Item>
-            <a href="/institutions/company">单位管理</a>
-          </Breadcrumb.Item>
-          <Breadcrumb.Item>组织架构</Breadcrumb.Item>
-        </Breadcrumb>
-      </div>
       {state.organizationList && state.organizationList.length ? (
         <ProTable<API.OrganizationalStructureListItem>
           rowKey="ID"
@@ -170,6 +195,8 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
           tryOrganizationList()
         }}
         defaultFormData={state.defaultFormData}
+        dataID={dataID}
+        structureType={structureType}
       />
     </div>
   )

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

@@ -1,12 +1,14 @@
 import { useRequest } from 'umi'
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import { Modal, message, TreeSelect, Form } from 'antd'
 import type { FormInstance } from 'antd'
 import ProForm, { ProFormText } from '@ant-design/pro-form'
 import {
   addOrganizationalStructure,
   updateOrganizationalStructure,
-  delOrganizationalStructure
+  delOrganizationalStructure,
+  moveOrganizationalStructure,
+  queryOrganizationalStructureList
 } from '@/services/api/institution'
 
 export enum ModalType {
@@ -28,16 +30,23 @@ type OrganizationModalProps = {
     name?: string
     parentID?: string
   }
+  dataID: string
+  structureType: string
 }
 const OrganizationModal: React.FC<OrganizationModalProps> = ({
   visible,
   type,
   typeEum,
+  dataID,
+  structureType,
   setVisible,
   defaultFormData,
   reload
 }) => {
   const ref = useRef<FormInstance>(null)
+  const [state, setState] = useState({
+    organizationList: []
+  })
   const titleTypeEunm = {
     1: {
       key: 'ADD',
@@ -60,9 +69,6 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
       name: '移动'
     }
   }
-  useEffect(() => {
-    visible && defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
-  }, [defaultFormData, visible])
   const { run: tryUpdateOrganization } = useRequest(updateOrganizationalStructure, {
     manual: true,
     onSuccess: () => {
@@ -81,6 +87,26 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
       message.success('删除成功')
     }
   })
+  const { run: tryOrganizationList } = useRequest(
+    () => queryOrganizationalStructureList({ dataID, structureType }),
+    {
+      manual: true,
+      onSuccess: result => {
+        setState({ ...state, organizationList: result })
+      }
+    }
+  )
+  const { run: tryMoveOrganization } = useRequest(moveOrganizationalStructure, {
+    manual: true,
+    onSuccess: () => {
+      message.success('移动成功')
+    }
+  })
+  useEffect(() => {
+    tryOrganizationList()
+    visible && defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
+  }, [defaultFormData, visible])
+
   const handleOnFinish = () => {
     ref.current?.validateFields().then(async values => {
       try {
@@ -89,6 +115,8 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
           await tryAddOrganization({ ...values, ...defaultFormData })
         } else if (type === ModalType.DEL) {
           await tryDelOrganization(values)
+        } else if (type === ModalType.MOVE) {
+          await tryMoveOrganization(values)
         } else {
           await tryUpdateOrganization(values)
         }
@@ -138,7 +166,7 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
           <p>确认删除？</p>
         </ProForm>
       ) : null}
-      {type === ModalType.MOVE ? (
+      {/* {type === ModalType.MOVE ? (
         <ProForm formRef={ref} submitter={{ render: false }}>
           <ProFormText name="ID" hidden />
           <Form.Item label="目标架构" name="moveID">
@@ -146,10 +174,11 @@ const OrganizationModal: React.FC<OrganizationModalProps> = ({
               style={{ width: '100%' }}
               placeholder="请选择目标架构"
               treeDefaultExpandAll
+              treeData={state.organizationList}
             />
           </Form.Item>
         </ProForm>
-      ) : null}
+      ) : null} */}
     </Modal>
   )
 }

src/pages/Institutions/Company/Detail/index.tsx

@@ -6,6 +6,7 @@ import Organization from './components/Organization'
 import Role from './components/Role'
 import styles from './style.less'
 import type { RouteComponentProps } from 'react-router'
+import { PageContainer } from '@ant-design/pro-layout'
 
 const { Item } = Menu
 
@@ -79,33 +80,35 @@ const CompanyDetail: React.FC<CompanyDetailProps> = ({ location }) => {
   }
 
   return (
-    <GridContent>
-      <div
-        className={styles.main}
-        ref={ref => {
-          if (ref) {
-            dom.current = ref
-          }
-        }}>
-        <div className={styles.leftMenu}>
-          <Menu
-            mode={initConfig.mode}
-            selectedKeys={[initConfig.selectKey]}
-            onClick={({ key }) => {
-              setInitConfig({
-                ...initConfig,
-                selectKey: key as CompanyNameStateKeys
-              })
-            }}>
-            {getMenu()}
-          </Menu>
+    <PageContainer title={false}>
+      <GridContent>
+        <div
+          className={styles.main}
+          ref={ref => {
+            if (ref) {
+              dom.current = ref
+            }
+          }}>
+          <div className={styles.leftMenu}>
+            <Menu
+              mode={initConfig.mode}
+              selectedKeys={[initConfig.selectKey]}
+              onClick={({ key }) => {
+                setInitConfig({
+                  ...initConfig,
+                  selectKey: key as CompanyNameStateKeys
+                })
+              }}>
+              {getMenu()}
+            </Menu>
+          </div>
+          <div className={styles.right}>
+            <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
+            {renderChildren()}
+          </div>
         </div>
-        <div className={styles.right}>
-          <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
-          {renderChildren()}
-        </div>
-      </div>
-    </GridContent>
+      </GridContent>
+    </PageContainer>
   )
 }