From 2f472293dfd36bee8da2960f4508c5d87e975bdd Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Mon, 14 Aug 2023 19:15:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=BB=84=E7=BB=87=E7=A7=BB=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting/system/organizationAndProject.ts  |  6 +++
 .../bussiness/ms-batch-modal/index.vue        |  2 +-
 .../ms-remove-button/MsRemoveButton.vue       | 47 +++++++++++++++++++
 .../bussiness/ms-user-selector/index.vue      |  3 +-
 .../src/components/pure/ms-table/useTable.ts  |  7 ++-
 frontend/src/locale/en-US/common.ts           | 27 +++++++++++
 frontend/src/locale/zh-CN/common.ts           | 27 +++++++++++
 .../components/systemOrganization.vue         |  3 +-
 .../components/userDrawer.vue                 | 35 +++++++++-----
 .../organizationAndProject/locale/en-US.ts    |  2 +
 .../organizationAndProject/locale/zh-CN.ts    |  3 +-
 11 files changed, 144 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/bussiness/ms-remove-button/MsRemoveButton.vue

diff --git a/frontend/src/api/modules/setting/system/organizationAndProject.ts b/frontend/src/api/modules/setting/system/organizationAndProject.ts
index 8e459e5afd..ca092c7782 100644
--- a/frontend/src/api/modules/setting/system/organizationAndProject.ts
+++ b/frontend/src/api/modules/setting/system/organizationAndProject.ts
@@ -30,3 +30,9 @@ export function addUserToOrgOrProject(data: AddUserToOrgOrProjectParams) {
 export function getUserByOrganizationOrProject(sourceId: string) {
   return MSR.get({ url: `${orgUrl.getUserByOrgOrProjectUrl}${sourceId}` });
 }
+// 删除组织或项目成员
+export function deleteUserFromOrgOrProject(sourceId: string, userId: string, isOrg = true) {
+  return MSR.get({
+    url: `${isOrg ? orgUrl.getDeleteOrgMemberUrl : orgUrl.getDeleteProjectMemberUrl}${sourceId}/${userId}`,
+  });
+}
diff --git a/frontend/src/components/bussiness/ms-batch-modal/index.vue b/frontend/src/components/bussiness/ms-batch-modal/index.vue
index 1fd3815459..812ae9e771 100644
--- a/frontend/src/components/bussiness/ms-batch-modal/index.vue
+++ b/frontend/src/components/bussiness/ms-batch-modal/index.vue
@@ -197,7 +197,7 @@
   };
   watch(
     () => props.treeData,
-    (newVal, oldVal) => {
+    (newVal) => {
       treeList.value = newVal;
       transferData = getTransferData(treeList.value, []);
     },
diff --git a/frontend/src/components/bussiness/ms-remove-button/MsRemoveButton.vue b/frontend/src/components/bussiness/ms-remove-button/MsRemoveButton.vue
new file mode 100644
index 0000000000..8cc8c2c4d5
--- /dev/null
+++ b/frontend/src/components/bussiness/ms-remove-button/MsRemoveButton.vue
@@ -0,0 +1,47 @@
+<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>
+  </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';
+
+  const props = defineProps<{
+    title: string;
+    subTitleTip: string;
+  }>();
+
+  const emit = defineEmits<{
+    (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();
+</script>
diff --git a/frontend/src/components/bussiness/ms-user-selector/index.vue b/frontend/src/components/bussiness/ms-user-selector/index.vue
index e642fb458d..6173530c87 100644
--- a/frontend/src/components/bussiness/ms-user-selector/index.vue
+++ b/frontend/src/components/bussiness/ms-user-selector/index.vue
@@ -32,7 +32,7 @@
     placeholder?: string;
     type?: 'organization' | 'usergroup';
     sourceId?: string;
-    disabledKey?: 'disabled' | 'memberFlag' | 'adminFlag';
+    disabledKey?: 'disabled' | 'memberFlag';
   }
 
   export interface UserItem {
@@ -41,7 +41,6 @@
     email: string;
     disabled?: boolean;
     memberFlag?: boolean;
-    adminFlag?: boolean;
   }
 
   const fieldNames = { value: 'id', label: 'name' };
diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts
index 65d5498f00..b5db74f1ed 100644
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@@ -190,8 +190,11 @@ export default function useTableProps(
       setTableErrorStatus('error');
     } finally {
       setLoading(false);
-      // eslint-disable-next-line no-console
-      if (propsRes.value.debug) console.info(propsRes.value);
+      // debug 模式下打印属性
+      if (propsRes.value.debug && import.meta.env.DEV) {
+        // eslint-disable-next-line no-console
+        console.log('Table propsRes: ', propsRes.value);
+      }
     }
   };
 
diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts
index bb7ef4279d..36b39cb3f1 100644
--- a/frontend/src/locale/en-US/common.ts
+++ b/frontend/src/locale/en-US/common.ts
@@ -1,3 +1,30 @@
 export default {
   'common.pleaseSelectMember': 'Please select member',
+  'common.add': 'Add',
+  'common.edit': 'Edit',
+  'common.delete': 'Delete',
+  'common.save': 'Save',
+  'common.cancel': 'Cancel',
+  'common.confirm': 'Confirm',
+  'common.confirmDelete': 'Confirm delete',
+  'common.search': 'Search',
+  'common.reset': 'Reset',
+  'common.retry': 'Retry',
+  'common.all': 'All',
+  'common.operation': 'Operation',
+  'common.remove': 'Remove',
+  'common.revoked': 'Revoked',
+  'common.deleteConfirm': 'Confirm delete?',
+  'common.deleteSuccess': 'Delete success',
+  'common.deleteFailed': 'Delete failed',
+  'common.addSuccess': 'Add success',
+  'common.addFailed': 'Add failed',
+  'common.editSuccess': 'Edit success',
+  'common.editFailed': 'Edit failed',
+  'common.saveSuccess': 'Save success',
+  'common.saveFailed': 'Save failed',
+  'common.operationSuccess': 'Operation success',
+  'common.operationFailed': 'Operation failed',
+  'common.removeSuccess': 'Remove success',
+  'common.removeFailed': 'Remove failed',
 };
diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts
index eaeab0678c..62563c428f 100644
--- a/frontend/src/locale/zh-CN/common.ts
+++ b/frontend/src/locale/zh-CN/common.ts
@@ -1,3 +1,30 @@
 export default {
   'common.pleaseSelectMember': '请选择成员',
+  'common.add': '添加',
+  'common.edit': '编辑',
+  'common.delete': '删除',
+  'common.save': '保存',
+  'common.cancel': '取消',
+  'common.confirm': '确认',
+  'common.confirmDelete': '确认删除',
+  'common.search': '搜索',
+  'common.reset': '重置',
+  'common.retry': '重试',
+  'common.all': '全部',
+  'common.operation': '操作',
+  'common.remove': '移除',
+  'common.revoked': '已撤销',
+  'common.deleteConfirm': '确认删除？',
+  'common.deleteSuccess': '删除成功',
+  'common.deleteFailed': '删除失败',
+  'common.addSuccess': '添加成功',
+  'common.addFailed': '添加失败',
+  'common.editSuccess': '编辑成功',
+  'common.editFailed': '编辑失败',
+  'common.saveSuccess': '保存成功',
+  'common.saveFailed': '保存失败',
+  'common.operationSuccess': '操作成功',
+  'common.operationFailed': '操作失败',
+  'common.removeSuccess': '移除成功',
+  'common.removeFailed': '移除失败',
 };
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
index b396e41f18..59f5792d41 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
@@ -189,7 +189,8 @@
     () => props.keyword,
     () => {
       fetchData();
-    }
+    },
+    { immediate: true }
   );
 </script>
 
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
index 09255c5707..fb9125978b 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
@@ -22,7 +22,11 @@
       </div>
       <ms-base-table class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
         <template #operation="{ record }">
-          <ms-button @click="handleRemove(record)">{{ t('system.organization.remove') }}</ms-button>
+          <MsRemoveButton
+            :title="t('system.organization.removeName', { name: record.name })"
+            :sub-title-tip="t('system.organization.removeTip')"
+            @ok="handleRemove(record)"
+          />
         </template>
       </ms-base-table>
     </div>
@@ -31,7 +35,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { postUserTableByOrgId } from '@/api/modules/setting/system/organizationAndProject';
+  import {
+    postUserTableByOrgId,
+    deleteUserFromOrgOrProject,
+  } from '@/api/modules/setting/system/organizationAndProject';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import { useI18n } from '@/hooks/useI18n';
@@ -39,8 +46,8 @@
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import AddUserModal from './addUserModal.vue';
-  import { TableData } from '@arco-design/web-vue';
-  import MsButton from '@/components/pure/ms-button/index.vue';
+  import { TableData, Message } from '@arco-design/web-vue';
+  import MsRemoveButton from '@/components/bussiness/ms-remove-button/MsRemoveButton.vue';
 
   export interface projectDrawerProps {
     visible: boolean;
@@ -71,7 +78,7 @@
       title: 'system.organization.phone',
       dataIndex: 'phone',
     },
-    { title: 'system.organization.operation', dataIndex: 'operation' },
+    { title: 'system.organization.operation', slotName: 'operation' },
   ];
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserTableByOrgId, {
@@ -93,6 +100,7 @@
   };
 
   const fetchData = async () => {
+    setLoadListParams({ organizationId: props.organizationId });
     await loadList();
   };
 
@@ -104,16 +112,21 @@
     userVisible.value = false;
   };
 
-  const handleRemove = (record: TableData) => {
-    // TODO: remove user
-    // eslint-disable-next-line no-console
-    console.log(record);
+  const handleRemove = async (record: TableData) => {
+    deleteUserFromOrgOrProject(props.organizationId, record.id)
+      .then(() => {
+        Message.success(t('common.removeSuccess'));
+        fetchData();
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      });
   };
 
   watch(
     () => props.organizationId,
-    (organizationId) => {
-      setLoadListParams({ organizationId });
+    () => {
       fetchData();
     }
   );
diff --git a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
index 3366925639..a070d82e18 100644
--- a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
@@ -6,6 +6,8 @@ export default {
   'system.organization.edit': 'Edit',
   'system.organization.save': 'Save',
   'system.organization.end': 'End',
+  'system.organization.removeName': 'Confirm to remove {name} this user',
+  'system.organization.removeTip': 'After removal, the organization permission will be lost',
   'system.organization.addMember': 'Add Member',
   'system.organization.addMemberPlaceholder': 'Please select member',
   'system.organization.addMemberRequired': 'Please select member',
diff --git a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
index e839522f54..17c9c42a0e 100644
--- a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
@@ -6,7 +6,8 @@ export default {
   'system.organization.edit': '编辑',
   'system.organization.save': '保存',
   'system.organization.end': '结束',
-  'system.organization.remove': '移除',
+  'system.organization.removeName': '确认移除 {name} 这个用户吗',
+  'system.organization.removeTip': '移除后，将失去组织权限',
   'system.organization.addMember': '添加成员',
   'system.organization.addMemberPlaceholder': '请选择成员',
   'system.organization.addMemberRequired': '请选择成员',