diff --git a/web/client/src/sections/organization/components/depModal.js b/web/client/src/sections/organization/components/depModal.js
new file mode 100644
index 00000000..3fa50520
--- /dev/null
+++ b/web/client/src/sections/organization/components/depModal.js
@@ -0,0 +1,88 @@
+import React, { useRef, useState } from 'react';
+import { connect } from 'react-redux';
+import { Spin, Card, Modal, TreeSelect } from 'antd';
+import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
+
+const DepModal = (props) => {
+  const { visible, onVisibleChange, onConfirm, depModalType, depData, data } = props;
+  const formRef = useRef();
+  const onFinish = (values) => {
+    if (onConfirm) {
+      if (depModalType === 'edit') {
+        let value = {
+          name: values.name,
+          depId: data.id
+        }
+        onConfirm(value)
+      } else {
+        onConfirm(values);
+      }
+
+    }
+  }
+
+  return (
+    <Spin spinning={false}>
+      <ModalForm
+        title={depModalType === 'edit' ? '编辑部门' : '新增部门'}
+        visible={visible}
+        onVisibleChange={onVisibleChange}
+        onFinish={onFinish}
+        formRef={formRef}
+        destroyOnClose
+        initialValues={data || null}
+      >
+        <ProFormText
+          name={['name']}
+          width="md"
+          label="部门名称"
+          required
+          maxLength={10}
+          placeholder="请输入部门名称"
+          fieldProps={{
+            autocomplete: 'new-password'
+          }}
+          rules={[
+            { required: true, message: '请输入部门名称' }, { max: 20, message: '请输入10个字以内的名称' }
+          ]}
+        />
+        <ProFormTreeSelect
+          name={['dependence']}
+          width="md"
+          label="上级部门"
+          autocomplete='off'
+          placeholder="选择上级部门"
+          fieldNames={{
+            title: 'name',
+            key: 'id',
+            children: 'subordinate'
+          }}
+          request={async () => {
+            return depData
+          }}
+        />
+      </ModalForm>
+    </Spin>
+  )
+}
+
+function mapStateToProps(state) {
+  const { depMessage } = state;
+  const pakData = (dep) => {
+    return dep.map((d) => {
+      return {
+        title: d.name,
+        value: d.id,
+        // key: d.id,
+        children: pakData(d.subordinate)
+      }
+    })
+  }
+  let depData = pakData(depMessage.data || [])
+  return {
+    loading: depMessage.isRequesting,
+    depData,
+  };
+}
+
+export default connect(mapStateToProps)(DepModal);
\ No newline at end of file