feat(organization): 完善组织机构编辑

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>

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!');
+  editModalApi.setData({ parentId });
-  parentId && console.warn('create children method not implemented!');
+  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>