From 98b09376d1ce3eeb5d599c6513866a4846fa3af2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= <li.jianhao@free-sun.com.cn>
Date: Thu, 21 Jul 2022 20:11:15 +0800
Subject: [PATCH] =?UTF-8?q?'=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organization/components/depModal.js       | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 web/client/src/sections/organization/components/depModal.js

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