fix: merge table rows of members

Author: 1myuan

ui/src/views/system/role/component/Member.vue

@@ -29,12 +29,13 @@
       </div>
     </div>
     <app-table
-      class="mt-16"
+      class="member-table mt-16"
       :data="tableData"
       :pagination-config="paginationConfig"
       @sizeChange="handleSizeChange"
       @changePage="getList"
       v-loading="loading"
+      :span-method="objectSpanMethod"
     >
       <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
       <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
@@ -135,6 +136,23 @@ watch(
   },
 )
 
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+  if (column.property === 'nick_name' || column.property === 'username') {
+    const sameUserRows = tableData.value.filter(item => item.user_id === row.user_id);
+    if (rowIndex === tableData.value.findIndex(item => item.user_id === row.user_id)) {
+      return {
+        rowspan: sameUserRows.length,
+        colspan: 1
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0
+      };
+    }
+  }
+};
+
 const addMemberDrawerRef = ref<InstanceType<typeof AddMemberDrawer>>()
 
 function handleAdd() {
@@ -158,3 +176,9 @@ function handleDelete(row: RoleMemberItem) {
     .catch(() => {})
 }
 </script>
+
+<style lang="scss" scoped>
+.member-table :deep(.el-table__cell):nth-child(2) {
+  border-right: 1px solid var(--el-table-border-color);
+}
+</style>

ui/src/views/system/role/component/MemberFormContent.vue

@@ -12,7 +12,7 @@
           </el-select>
         </el-form-item>
         <!-- 删除按钮 -->
-        <el-button @click="handleDelete(index)" text
+        <el-button :disabled="props.keepOneLine && form.length === 1" @click="handleDelete(index)" text
           :style="{ 'margin-top': index === 0 && props.models.some((item) => item.label) ? '30px' : '' }">
           <el-icon>
             <Delete />
@@ -38,6 +38,7 @@ import type { FormItemModel } from '@/api/type/role'
 const props = defineProps<{
   models: FormItemModel[];
   addText?: string;
+  keepOneLine?: boolean; // 至少保留一行
 }>()
 
 const formRef = ref()

ui/src/views/system/user-manage/component/UserDrawer.vue

@@ -57,6 +57,7 @@
       {{ $t('views.userManage.roleSetting') }}</h4>
     <MemberFormContent ref="memberFormContentRef" :models="formItemModel" v-model:form="list"
                        v-loading="memberFormContentLoading"
+                       keepOneLine
                        :addText="$t('views.userManage.addRole')" v-if="user.isEE() || user.isPE()"/>
     <template #footer>
       <el-button @click.prevent="visible = false"> {{ $t('common.cancel') }}</el-button>

ui/src/views/system/workspace/component/Member.vue

@@ -32,6 +32,8 @@
     @sizeChange="handleSizeChange"
     @changePage="getList"
     v-loading="loading"
+    class="member-table"
+    :span-method="objectSpanMethod"
   >
     <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
     <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
@@ -131,6 +133,23 @@ watch(
   },
 )
 
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+  if (column.property === 'nick_name' || column.property === 'username') {
+    const sameUserRows = tableData.value.filter(item => item.user_id === row.user_id);
+    if (rowIndex === tableData.value.findIndex(item => item.user_id === row.user_id)) {
+      return {
+        rowspan: sameUserRows.length,
+        colspan: 1
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0
+      };
+    }
+  }
+};
+
 const addMemberDrawerRef = ref<InstanceType<typeof AddMemberDrawer>>()
 function handleAdd() {
   addMemberDrawerRef.value?.open()
@@ -155,3 +174,10 @@ function handleDelete(row: WorkspaceMemberItem) {
     .catch(() => {})
 }
 </script>
+
+<style lang="scss" scoped>
+.member-table :deep(.el-table__cell):nth-child(2) {
+  border-right: 1px solid var(--el-table-border-color);
+}
+</style>
+