feat(系统设置): 系统组织添加成员&结束&启用禁用&删除

frontend/src/api/modules/setting/system/organizationAndProject.ts

@@ -8,6 +8,16 @@ export function postOrgTable(data: TableQueryParams) {
   return MSR.post({ url: orgUrl.postOrgTableUrl, data });
 }
 
+// 删除组织
+export function deleteOrg(id: string) {
+  return MSR.get({ url: `${orgUrl.getDeleteOrgUrl}${id}` });
+}
+
+// 启用或禁用组织
+export function enableOrDisableOrg(id: string, isEnable = true) {
+  return MSR.get({ url: `${isEnable ? orgUrl.getEnableOrgUrl : orgUrl.getDisableOrgUrl}${id}` });
+}
+
 // 获取项目列表
 export function postProjectTable(data: TableQueryParams) {
   return MSR.post({ url: orgUrl.postProjectTableUrl, data });

frontend/src/components/bussiness/ms-remove-button/MsRemoveButton.vue

@@ -1,21 +1,18 @@
 <template>
   <MsPopconfirm
-    v-model:visible="currentVisible"
     :ok-text="t('common.remove')"
     :cancel-text="t('common.cancel')"
     type="error"
     :title="props.title"
     :sub-title-tip="props.subTitleTip"
     @confirm="handleOk"
-    @cancel="handleCancel"
   >
-    <MsButton @click="showPopconfirm">{{ t('common.remove') }}</MsButton>
+    <MsButton>{{ t('common.remove') }}</MsButton>
   </MsPopconfirm>
 </template>
 
 <script setup lang="ts">
   import { useI18n } from '@/hooks/useI18n';
-  import { ref } from 'vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsPopconfirm from '@/components/pure/ms-popconfirm/index.vue';
 
@@ -28,19 +25,8 @@
     (e: 'ok'): void;
   }>();
 
-  const currentVisible = ref(false);
-
-  const handleCancel = () => {
-    currentVisible.value = false;
-  };
-
-  const showPopconfirm = () => {
-    currentVisible.value = true;
-  };
-
   const handleOk = () => {
     emit('ok');
-    currentVisible.value = false;
   };
 
   const { t } = useI18n();

frontend/src/hooks/useModal.ts

@@ -1,5 +1,6 @@
 import { Modal } from '@arco-design/web-vue';
 import type { ModalConfig } from '@arco-design/web-vue';
+import { useI18n } from '@/hooks/useI18n';
 
 export type ModalType = 'info' | 'success' | 'warning' | 'error';
 
@@ -13,6 +14,11 @@ export interface ModalOptions extends ModalConfig {
   size?: ModalSize;
 }
 
+export interface DeleteModalOptions extends ModalConfig {
+  title: string;
+  content: string;
+}
+const { t } = useI18n();
 export default function useModal() {
   return {
     openModal: (options: ModalOptions) =>
@@ -32,5 +38,15 @@ export default function useModal() {
           options.size || 'small'
         } ms-usemodal-${options.type}`,
       }),
+    deleteModal: (options: DeleteModalOptions) =>
+      Modal.warning({
+        okText: t('common.confirmDelete'),
+        cancelText: t('common.cancel'),
+        hideCancel: false,
+        okButtonProps: { status: 'danger' },
+        titleAlign: 'start',
+        modalClass: `ms-usemodal ms-usemodal-warning ms-usemodal-${'small'} ms-usemodal--warning`,
+        ...options,
+      }),
   };
 }

frontend/src/locale/en-US/common.ts

@@ -10,6 +10,8 @@ export default {
   'common.search': 'Search',
   'common.reset': 'Reset',
   'common.retry': 'Retry',
+  'common.end': 'End',
+  'common.enable': 'Enable',
   'common.all': 'All',
   'common.operation': 'Operation',
   'common.remove': 'Remove',
@@ -27,4 +29,5 @@ export default {
   'common.operationFailed': 'Operation failed',
   'common.removeSuccess': 'Remove success',
   'common.removeFailed': 'Remove failed',
+  'common.admin': 'Admin',
 };

frontend/src/locale/zh-CN/common.ts

@@ -10,6 +10,8 @@ export default {
   'common.search': '搜索',
   'common.reset': '重置',
   'common.retry': '重试',
+  'common.end': '结束',
+  'common.enable': '启用',
   'common.all': '全部',
   'common.operation': '操作',
   'common.remove': '移除',
@@ -27,4 +29,5 @@ export default {
   'common.operationFailed': '操作失败',
   'common.removeSuccess': '移除成功',
   'common.removeFailed': '移除失败',
+  'common.admin': '管理员',
 };

frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue

@@ -38,6 +38,7 @@
   const { t } = useI18n();
   const props = defineProps<{
     visible: boolean;
+    organizationId?: string;
   }>();
 
   const formRef = ref<FormInstance>();

frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue

@@ -1,5 +1,11 @@
 <template>
   <MsBaseTable v-bind="propsRes" v-on="propsEvent">
+    <template #creator="{ record }">
+      <span>{{ record.createUser }}</span>
+      <span v-if="record.orgAdmins.length > 0" class="text-[var(--color-text-4)]">{{
+        `&nbsp;(${t('common.admin')})`
+      }}</span>
+    </template>
     <template #memberCount="{ record }">
       <span class="primary-color" @click="showUserDrawer(record)">{{ record.memberCount }}</span>
     </template>
@@ -8,18 +14,19 @@
     </template>
     <template #operation="{ record }">
       <template v-if="!record.enable">
-        <MsButton @click="handleEnable(record)">{{ t('system.organization.enable') }}</MsButton>
+        <MsButton @click="handleEnableOrDisableOrg(record)">{{ t('common.enable') }}</MsButton>
-        <MsButton @click="handleDelete(record)">{{ t('system.organization.delete') }}</MsButton>
+        <MsButton @click="handleDelete(record)">{{ t('common.delete') }}</MsButton>
       </template>
       <template v-else>
-        <MsButton @click="showOrganizationModal(record)">{{ t('system.organization.edit') }}</MsButton>
+        <MsButton @click="showOrganizationModal(record)">{{ t('common.edit') }}</MsButton>
         <MsButton @click="showAddUserModal(record)">{{ t('system.organization.addMember') }}</MsButton>
-        <MsButton @click="handleEnd(record)">{{ t('system.organization.end') }}</MsButton>
+        <MsButton @click="handleEnableOrDisableOrg(record, false)">{{ t('common.end') }}</MsButton>
         <MsTableMoreAction :list="tableActions" @select="handleMoreAction($event, record)"></MsTableMoreAction>
       </template>
     </template>
   </MsBaseTable>
-  <AddOrganizationModal :visible="userVisible" @cancel="handleAddUserModalCancel" />
+  <AddOrganizationModal type="edit" :visible="orgVisible" @cancel="handleAddOrgModalCancel" />
+  <AddUserModal :organization-id="currentOrganizationId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
   <ProjectDrawer v-bind="currentProjectDrawer" @cancel="handleProjectDrawerCancel" />
   <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
 </template>
@@ -31,15 +38,17 @@
   import { useTableStore } from '@/store';
   import { ref, reactive, watch } from 'vue';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
-  import { postOrgTable } from '@/api/modules/setting/system/organizationAndProject';
+  import { postOrgTable, deleteOrg, enableOrDisableOrg } from '@/api/modules/setting/system/organizationAndProject';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import AddOrganizationModal from './addOrganizationModal.vue';
   import ProjectDrawer from './projectDrawer.vue';
-  import { TableData } from '@arco-design/web-vue';
+  import { Message, TableData } from '@arco-design/web-vue';
   import UserDrawer from './userDrawer.vue';
+  import AddUserModal from './addUserModal.vue';
+  import useModal from '@/hooks/useModal';
 
   export interface SystemOrganizationProps {
     keyword: string;
@@ -50,76 +59,9 @@
   const { t } = useI18n();
   const tableStore = useTableStore();
   const userVisible = ref(false);
-
+  const orgVisible = ref(false);
-  const currentProjectDrawer = reactive({
+  const currentOrganizationId = ref('');
-    visible: false,
+  const { deleteModal } = useModal();
-    organizationId: '',
-    currentName: '',
-  });
-
-  const currentUserDrawer = reactive({
-    visible: false,
-    organizationId: '',
-  });
-
-  const tableActions: ActionsItem[] = [
-    {
-      label: 'system.user.delete',
-      eventTag: 'delete',
-      danger: true,
-    },
-  ];
-
-  const handleDelete = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
-  };
-
-  const handleMoreAction = (tag: string, record: any) => {
-    if (tag === 'delete') {
-      handleDelete(record);
-    }
-  };
-
-  const handleEnable = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
-  };
-
-  const handleEnd = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
-  };
-
-  const showOrganizationModal = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
-  };
-
-  const showAddUserModal = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
-    userVisible.value = true;
-  };
-
-  const handleProjectDrawerCancel = () => {
-    currentProjectDrawer.visible = false;
-  };
-
-  const showProjectDrawer = (record: TableData) => {
-    currentProjectDrawer.visible = true;
-    currentProjectDrawer.organizationId = record.id;
-    currentProjectDrawer.currentName = record.name;
-  };
-
-  const showUserDrawer = (record: TableData) => {
-    currentUserDrawer.visible = true;
-    currentUserDrawer.organizationId = record.id;
-  };
-
-  const handleUserDrawerCancel = () => {
-    currentUserDrawer.visible = false;
-  };
 
   const organizationColumns: MsTableColumn = [
     {
@@ -150,6 +92,7 @@
     },
     {
       title: 'system.organization.creator',
+      slotName: 'creator',
       dataIndex: 'createUser',
     },
     {
@@ -182,9 +125,95 @@
     await loadList();
   };
 
+  const currentProjectDrawer = reactive({
+    visible: false,
+    organizationId: '',
+    currentName: '',
+  });
+
+  const currentUserDrawer = reactive({
+    visible: false,
+    organizationId: '',
+  });
+
+  const tableActions: ActionsItem[] = [
+    {
+      label: 'system.user.delete',
+      eventTag: 'delete',
+      danger: true,
+    },
+  ];
+
+  const handleDelete = (record: TableData) => {
+    deleteModal({
+      title: t('system.organization.deleteName', { name: record.name }),
+      content: t('system.organization.deleteTip'),
+      onOk: async () => {
+        try {
+          await deleteOrg(record.id);
+          Message.success(t('common.deleteSuccess'));
+          fetchData();
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        }
+      },
+    });
+  };
+
+  const handleMoreAction = (tag: ActionsItem, record: TableData) => {
+    if (tag.eventTag === 'delete') {
+      handleDelete(record);
+    }
+  };
+
+  const handleEnableOrDisableOrg = async (record: any, isEnable = true) => {
+    try {
+      await enableOrDisableOrg(record.id, isEnable);
+      Message.success(t('common.updateSuccess'));
+      fetchData();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+
+  const showOrganizationModal = (record: any) => {
+    currentOrganizationId.value = record.id;
+    orgVisible.value = true;
+  };
+
+  const showAddUserModal = (record: any) => {
+    currentOrganizationId.value = record.id;
+    userVisible.value = true;
+  };
+
+  const handleProjectDrawerCancel = () => {
+    currentProjectDrawer.visible = false;
+  };
+
+  const showProjectDrawer = (record: TableData) => {
+    currentProjectDrawer.visible = true;
+    currentProjectDrawer.organizationId = record.id;
+    currentProjectDrawer.currentName = record.name;
+  };
+
+  const showUserDrawer = (record: TableData) => {
+    currentUserDrawer.visible = true;
+    currentUserDrawer.organizationId = record.id;
+  };
+
+  const handleUserDrawerCancel = () => {
+    currentUserDrawer.visible = false;
+  };
+
   const handleAddUserModalCancel = () => {
     userVisible.value = false;
   };
+  const handleAddOrgModalCancel = () => {
+    orgVisible.value = false;
+  };
+
   watch(
     () => props.keyword,
     () => {

frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue

@@ -113,15 +113,14 @@
   };
 
   const handleRemove = async (record: TableData) => {
-    deleteUserFromOrgOrProject(props.organizationId, record.id)
+    try {
-      .then(() => {
+      await deleteUserFromOrgOrProject(props.organizationId, record.id);
       Message.success(t('common.removeSuccess'));
       fetchData();
-      })
+    } catch (error) {
-      .catch((error) => {
       // eslint-disable-next-line no-console
       console.error(error);
-      });
+    }
   };
 
   watch(

frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts

@@ -37,4 +37,7 @@ export default {
   'system.organization.userName': '姓名',
   'system.organization.email': '邮箱',
   'system.organization.phone': '手机',
+  'system.organization.addSuccess': '添加成功',
+  'system.organization.deleteName': '确认删除 {name} 这个组织吗',
+  'system.organization.deleteTip': '删除组织同时将该组织下的项目数据一起删除，请谨慎操作！',
 };