fix(系统设置): 成员拼写和成员删除交互调整

frontend/src/components/pure/ms-popconfirm/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <a-popconfirm v-bind="attrs" :type="props.type" class="w-[352px]" @before-ok="handleConfirm">
+    <template v-if="props.type === 'error'" #icon>
+      <MsIcon type="icon-icon_warning_filled" class="mr-[2px] text-xl text-[rgb(var(--danger-6))]" />
+    </template>
+    <slot v-if="props.type !== 'error'" name="icon"></slot>
+    <template #content>
+      <span class="font-semibold">
+        {{ props.title }}
+      </span>
+      <div class="py-2 text-sm leading-6 text-[var(--color-text-2)]">
+        {{ props.subTitleTip }}
+      </div>
+    </template>
+    <slot></slot>
+  </a-popconfirm>
+</template>
+
+<script setup lang="ts">
+  import { useAttrs } from 'vue';
+
+  export type types = 'error' | 'info' | 'success' | 'warning';
+
+  const props = withDefaults(
+    defineProps<{
+      title: string;
+      subTitleTip: string;
+      type: types;
+    }>(),
+    {
+      type: 'warning',
+    }
+  );
+  const emits = defineEmits<{
+    (e: 'confirm'): void;
+  }>();
+  const attrs = useAttrs();
+  const handleConfirm = () => {
+    emits('confirm');
+  };
+</script>
+
+<style scoped lang="less"></style>

frontend/src/views/setting/organization/member/index.vue

@@ -89,9 +89,28 @@
           </a-select>
         </a-tooltip>
       </template>
+      <template #enable="{ record }">
+        <div v-if="record.enable" class="flex items-center">
+          <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
+          {{ t('organization.member.statusEnable') }}
+        </div>
+        <div v-else class="flex items-center text-[var(--color-text-4)]">
+          <MsIcon type="icon-icon_disable" class="mr-[2px]" />
+          {{ t('organization.member.statusDisable') }}
+        </div>
+      </template>
       <template #action="{ record }">
         <MsButton @click="addOrEditMember('edit', record)">{{ t('organization.member.edit') }}</MsButton>
-        <MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
+        <MsPopConfirm
+          type="error"
+          position="br"
+          :ok-text="t('organization.member.remove')"
+          :title="t('organization.member.deleteMemberTip', { name: characterLimit(record.name) })"
+          :sub-title-tip="t('organization.member.subTitle')"
+          @confirm="deleteMember(record)"
+        >
+          <MsButton>{{ t('organization.member.remove') }}</MsButton>
+        </MsPopConfirm>
       </template>
     </ms-base-table>
   </MsCard>
@@ -124,6 +143,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import AddMemberModal from './components/addMemberModal.vue';
   import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsPopConfirm from '@/components/pure/ms-popconfirm/index.vue';
   import {
     getMemberList,
     deleteMemberReq,
@@ -133,7 +153,6 @@
     getProjectList,
     getGlobalUserGroup,
   } from '@/api/modules/setting/member';
-  import useModal from '@/hooks/useModal';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import MSBatchModal from '@/components/bussiness/ms-batch-modal/index.vue';
   import { useTableStore, useUserStore } from '@/store';
@@ -157,50 +176,43 @@
       title: 'organization.member.tableColunmEmail',
       dataIndex: 'email',
       width: 200,
-      showDrag: false,
       showInTable: true,
     },
     {
       title: 'organization.member.tableColunmName',
       dataIndex: 'name',
-      showDrag: false,
       showInTable: true,
     },
     {
       title: 'organization.member.tableColunmPhone',
       dataIndex: 'phone',
-      showDrag: false,
       showInTable: true,
     },
     {
       title: 'organization.member.tableColunmPro',
       slotName: 'project',
       dataIndex: 'projectIdNameMap',
-      width: 280,
-      showDrag: false,
+      width: 300,
       showInTable: true,
     },
     {
       title: 'organization.member.tableColunmUsergroup',
       slotName: 'userRole',
       dataIndex: 'userRoleIdNameMap',
-      width: 250,
-      showDrag: false,
+      width: 300,
       showInTable: true,
     },
     {
       title: 'organization.member.tableColunmStatus',
       slotName: 'enable',
       dataIndex: 'enable',
-      showDrag: false,
       showInTable: true,
     },
     {
       title: 'organization.member.tableColunmActions',
       slotName: 'action',
       fixed: 'right',
-      width: 100,
-      showDrag: false,
+      width: 140,
       showInTable: true,
     },
   ];
@@ -226,7 +238,6 @@
   const keyword = ref('');
   const tableSelected = ref<(string | number)[]>([]);
   const selectData = ref<string[]>([]);
-  const { openModal } = useModal();
 
   interface TreeDataItem {
     key: string;
@@ -253,27 +264,14 @@
       AddMemberRef.value.edit(record);
     }
   };
-  const deleteMember = (record: MemberItem) => {
-    openModal({
-      type: 'warning',
-      title: t('organization.member.deleteMemberTip', { name: characterLimit(record.name) }),
-      content: '',
-      okText: t('organization.member.deleteMemberConfirm'),
-      cancelText: t('organization.member.deleteMemberCancel'),
-      okButtonProps: {
-        status: 'danger',
-      },
-      onBeforeOk: async () => {
-        try {
-          await deleteMemberReq(lastOrganizationId, record.id);
-          Message.success(t('organization.member.deleteMemberSuccess'));
-          initData();
-        } catch (error) {
-          console.log(error);
-        }
-      },
-      hideCancel: false,
-    });
+  const deleteMember = async (record: MemberItem) => {
+    try {
+      await deleteMemberReq(lastOrganizationId, record.id);
+      Message.success(t('organization.member.deleteMemberSuccess'));
+      initData();
+    } catch (error) {
+      console.log(error);
+    }
   };
   const handleTableSelect = (selectArr: (string | number)[]) => {
     tableSelected.value = selectArr;

frontend/src/views/setting/organization/member/locale/en-US.ts

@@ -32,4 +32,7 @@ export default {
   'organization.member.batchUpdateSuccess': 'Successfully updated',
   'organization.member.project': 'Project',
   'organization.member.selectUserScope': 'Please select a user group for the above members',
+  'organization.member.statusEnable': 'Normal',
+  'organization.member.statusDisable': 'Disabled',
+  'organization.member.subTitle': 'When removed, you lose your organization privileges',
 };

frontend/src/views/setting/organization/member/locale/zh-CN.ts

@@ -23,7 +23,7 @@ export default {
   'organization.member.selectUserEmptyTip': '用户组不能为空',
   'organization.member.Confirm': '确定',
   'organization.member.Cancel': '取消',
-  'organization.member.deleteMemberTip': '确认移除 `{name}` 这个成员吗？',
+  'organization.member.deleteMemberTip': '确认移除 {name} 这个成员吗？',
   'organization.member.deleteMemberConfirm': '确认删除',
   'organization.member.deleteMemberCancel': '取消',
   'organization.member.deleteMemberSuccess': '删除成功',
@@ -31,4 +31,7 @@ export default {
   'organization.member.batchUpdateSuccess': '更新成功',
   'organization.member.project': '项目',
   'organization.member.selectUserScope': '请为以上成员选择用户组',
+  'organization.member.statusEnable': '正常',
+  'organization.member.statusDisable': '禁用',
+  'organization.member.subTitle': '移除后，将失去组织权限',
 };