|
@@ -1,15 +1,23 @@
|
|
|
-import { Table } from 'antd'
|
|
|
-import React, { useState, useEffect } from 'react'
|
|
|
+import { Breadcrumb, Button } from 'antd'
|
|
|
+import ProTable from '@ant-design/pro-table'
|
|
|
+import React, { useState, useEffect, useRef } from 'react'
|
|
|
import { useRequest } from 'umi'
|
|
|
+import { DeleteOutlined } from '@ant-design/icons'
|
|
|
+import { queryOrganizationalStructureList } from '@/services/api/institution'
|
|
|
+import OrganizationModal, { ModalType } from './OrganizationModal'
|
|
|
|
|
|
type OrganizationProps = {
|
|
|
dataID: string
|
|
|
structureType: string
|
|
|
}
|
|
|
const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) => {
|
|
|
+ const tRef = useRef<ActionType>(null)
|
|
|
const [state, setState] = useState({
|
|
|
- id: '',
|
|
|
- organizationList: []
|
|
|
+ organizationList: [],
|
|
|
+ visible: false,
|
|
|
+ currentModalType: ModalType.ADD,
|
|
|
+ defaultFormData: null,
|
|
|
+ parentID: '9dddcc99-0c4f-4589-bd47-87e939f8f7c8'
|
|
|
})
|
|
|
|
|
|
const columns: ColumnType<API.OrganizationalStructureListItem>[] = [
|
|
@@ -25,8 +33,29 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
- dataIndex: 'operate',
|
|
|
- key: 'operate'
|
|
|
+ dataIndex: 'operation',
|
|
|
+ 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={() => {
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ visible: true,
|
|
|
+ currentModalType: ModalType.UPDATE,
|
|
|
+ defaultFormData: record
|
|
|
+ })
|
|
|
+ }}>
|
|
|
+ 重命名
|
|
|
+ </div>
|
|
|
+ <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-967bbd">
|
|
|
+ <DeleteOutlined />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
}
|
|
|
]
|
|
|
const { run: tryOrganizationList } = useRequest(
|
|
@@ -34,17 +63,61 @@ const Organization: React.FC<OrganizationProps> = ({ dataID, structureType }) =>
|
|
|
{
|
|
|
// manual: true,
|
|
|
onSuccess: result => {
|
|
|
- setState({ ...state, organizationList: result.data })
|
|
|
+ setState({ ...state, organizationList: result })
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
// tryOrganizationList()
|
|
|
}, [])
|
|
|
return (
|
|
|
<div>
|
|
|
- {/* <span>组织架构</span> */}
|
|
|
- <Table<API.OrganizationalStructureListItem> columns={columns} />
|
|
|
+ <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"
|
|
|
+ actionRef={tRef}
|
|
|
+ columns={columns}
|
|
|
+ dataSource={state.organizationList}
|
|
|
+ defaultExpandAllRows={true}
|
|
|
+ search={false}
|
|
|
+ pagination={false}
|
|
|
+ toolbar={{
|
|
|
+ actions: [
|
|
|
+ <Button
|
|
|
+ onClick={() =>
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ visible: true,
|
|
|
+ currentModalType: ModalType.ADD,
|
|
|
+ defaultFormData: {
|
|
|
+ dataID: dataID,
|
|
|
+ structureType: structureType,
|
|
|
+ parentID: state.parentID
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }>
|
|
|
+ 添加组织
|
|
|
+ </Button>
|
|
|
+ ]
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ <OrganizationModal
|
|
|
+ type={state.currentModalType}
|
|
|
+ visible={state.visible}
|
|
|
+ setVisible={(visible: boolean) => setState({ ...state, visible })}
|
|
|
+ reloadTable={() => tRef.current?.reload()}
|
|
|
+ defaultFormData={state.defaultFormData}
|
|
|
+ />
|
|
|
</div>
|
|
|
)
|
|
|
}
|