From bcae0edf12369115d9cf34ef4b510266f3a3b99e Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 09:31:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(organization):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=9C=BA=E6=9E=84=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrganizationUnitModal.vue                 | 115 +++++++++++++++++-
 .../OrganizationUnitTree.vue                  |  18 ++-
 2 files changed, 128 insertions(+), 5 deletions(-)

diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue
index 76711ad74..e9e25200e 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue
@@ -1,11 +1,124 @@
 <script setup lang="ts">
+import type {
+  OrganizationUnitCreateDto,
+  OrganizationUnitDto,
+  OrganizationUnitUpdateDto,
+} from '../../types/organization-units';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@abp/ui';
+
+import { createApi, getApi, updateApi } from '../../api/organization-units';
+
 defineOptions({
   name: 'OrganizationUnitModal',
 });
+const emits = defineEmits<{
+  (event: 'change', data: OrganizationUnitDto): void;
+}>();
+
+const defaultModel = {
+  displayName: '',
+} as OrganizationUnitDto;
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        style: {
+          display: 'none',
+        },
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        style: {
+          display: 'none',
+        },
+      },
+      fieldName: 'parentId',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'displayName',
+      label: $t('AbpIdentity.OrganizationUnit:DisplayName'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { id, parentId } = modalApi.getData<Record<string, any>>();
+      if (id) {
+        modalApi.setState({ loading: true });
+        try {
+          const dto = await getApi(id);
+          modalApi.setState({
+            title: $t('AbpIdentity.OrganizationUnit', [dto.displayName]),
+          });
+          formApi.setValues(dto);
+        } finally {
+          modalApi.setState({ loading: false });
+        }
+        return;
+      }
+      formApi.setValues({
+        ...defaultModel,
+        parentId,
+      });
+      modalApi.setState({
+        title: $t('AbpIdentity.OrganizationUnit:New'),
+      });
+    }
+  },
+  title: $t('AbpIdentity.OrganizationUnit:New'),
+});
+
+async function onSubmit(input: Record<string, any>) {
+  const api = input.id
+    ? updateApi(input.id, input as OrganizationUnitUpdateDto)
+    : createApi(input as OrganizationUnitCreateDto);
+  try {
+    modalApi.setState({
+      confirmLoading: true,
+    });
+    const dto = await api;
+    emits('change', dto);
+    modalApi.close();
+  } finally {
+    modalApi.setState({
+      confirmLoading: false,
+    });
+  }
+}
 </script>
 
 <template>
-  <div></div>
+  <Modal>
+    <Form />
+  </Modal>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
index 9dd8a554c..151077d48 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
@@ -6,8 +6,9 @@ import type {
 } from 'ant-design-vue/es/tree';
 import type { Key } from 'ant-design-vue/es/vc-table/interface';
 
-import { h, onMounted, ref, watchEffect } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref, watchEffect } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
@@ -36,6 +37,9 @@ const emits = defineEmits<{
 
 const MenuItem = Menu.Item;
 const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
+const OrganizationUnitModal = defineAsyncComponent(
+  () => import('./OrganizationUnitModal.vue'),
+);
 
 interface ContextMenuActionMap {
   [key: string]: (id: string) => Promise<void> | void;
@@ -52,6 +56,10 @@ const organizationUnits = ref<DataNode[]>([]);
 const loadedKeys = ref<string[]>([]);
 const selectedKey = ref<string>();
 
+const [OrganizationUnitEditModal, editModalApi] = useVbenModal({
+  connectedComponent: OrganizationUnitModal,
+});
+
 /** 刷新组织机构树 */
 async function onRefresh() {
   loadedKeys.value = [];
@@ -90,13 +98,14 @@ function onRightClick() {
 
 /** 创建组织机构树 */
 function onCreate(parentId?: string) {
-  !parentId && console.warn('create root method not implemented!');
-  parentId && console.warn('create children method not implemented!');
+  editModalApi.setData({ parentId });
+  editModalApi.open();
 }
 
 /** 编辑组织机构树 */
 function onUpdate(id: string) {
-  console.warn('update method not implemented!', id);
+  editModalApi.setData({ id });
+  editModalApi.open();
 }
 
 /** 编辑组织机构树权限 */
@@ -194,6 +203,7 @@ watchEffect(() => {
       </template>
     </Tree>
   </Card>
+  <OrganizationUnitEditModal @change="onRefresh" />
 </template>
 
 <style scoped></style>