refactor: 表格单行显示&MsTagGroup增加name参数

frontend/src/components/pure/ms-table/base-table.vue

@@ -55,24 +55,30 @@
             </slot>
           </template>
           <template #cell="{ column, record, rowIndex }">
-            <div class="flex flex-row flex-nowrap items-center" :class="item.isTag ? 'max-w-[360px]' : 'max-w-[300px]'">
+            <div class="flex flex-row flex-nowrap items-center">
               <template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
                 <slot name="enable" v-bind="{ record }">
-                  <div v-if="record.enable" class="flex items-center">
+                  <template v-if="record.enable">
                     <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
                     {{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }}
-                  </div>
+                  </template>
-                  <div v-else class="flex items-center text-[var(--color-text-4)]">
+                  <template v-else>
-                    <MsIcon type="icon-icon_disable" class="mr-[2px]" />
+                    <MsIcon type="icon-icon_disable" class="mr-[2px] text-[var(--color-text-4)]" />
                     <span class="text-[var(--color-text-1)]">
                       {{ item.disableTitle ? t(item.disableTitle) : t('msTable.disable') }}
                     </span>
-                  </div>
+                  </template>
                 </slot>
               </template>
+              <template v-else-if="item.isTag">
+                <div class="one-line-text max-w-[456px]">
+                  <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                    {{ record[item.dataIndex as string] || '-' }}
+                  </slot>
+                </div>
+              </template>
               <template v-else-if="item.showTooltip">
                 <a-tooltip placement="top" :content="record[item.dataIndex as string]">
-                  <div class="flex flex-row flex-nowrap items-center">
                   <a-input
                     v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
                     ref="currentInputRef"
@@ -81,9 +87,11 @@
                     @press-enter="handleEditInputEnter(record)"
                   />
                   <template v-else>
+                    <div class="one-line-text max-w-[300px]">
                       <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                        <div class="one-line-text">{{ record[item.dataIndex as string] || '-' }}</div>
+                        {{ record[item.dataIndex as string] || '-' }}
                       </slot>
+                    </div>
                     <MsIcon
                       v-if="item.editable && item.dataIndex === editKey && !record.deleted"
                       class="ml-2 cursor-pointer"
@@ -92,11 +100,9 @@
                       @click="handleEdit(rowIndex)"
                     />
                   </template>
-                  </div>
                 </a-tooltip>
               </template>
               <template v-else>
-                <div class="flex flex-row flex-nowrap items-center">
                 <a-input
                   v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
                   ref="currentInputRef"
@@ -106,7 +112,7 @@
                 />
                 <template v-else>
                   <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                      <div class="one-line-text max-w-[300px]">{{ record[item.dataIndex as string] || '-' }}</div>
+                    {{ record[item.dataIndex as string] || '-' }}
                   </slot>
                   <MsIcon
                     v-if="item.editable && item.dataIndex === editKey && !record.deleted"
@@ -116,7 +122,6 @@
                     @click="handleEdit(rowIndex)"
                   />
                 </template>
-                </div>
               </template>
             </div>
           </template>

frontend/src/components/pure/ms-tag/ms-tag-group.vue

@@ -1,8 +1,8 @@
 <template>
-  <a-tooltip :content="(props.tagList||[]).map((e: any) => e.name).join('，')">
+  <a-tooltip :content="(props.tagList||[]).map((e: any) => e[nameKey]).join('，')">
-    <div class="float-left flex min-h-[22px] max-w-[456px]">
+    <div class="flex min-h-[22px] max-w-[456px] flex-row">
       <MsTag v-for="tag of props.tagList.slice(0, props.showNum)" :key="tag.id" v-bind="attrs">
-        <slot :tag="tag"> </slot>
+        {{ tag[props.nameKey] }}
       </MsTag>
       <MsTag v-if="props.tagList.length > props.showNum" v-bind="attrs">
         +{{ props.tagList.length - props.showNum }}</MsTag
@@ -19,9 +19,11 @@
     defineProps<{
       tagList: any;
       showNum?: number;
+      nameKey?: string;
     }>(),
     {
       showNum: 2,
+      nameKey: 'name',
     }
   );
 

frontend/src/enums/tableEnum.ts

@@ -26,6 +26,10 @@ export enum SpecialColumnEnum {
   NAME = 'name',
   // 状态列
   ENABLE = 'enable',
+  // 操作列
+  ACTION = 'action',
+  // 操作列
+  OPERATION = 'operation',
 }
 
 export enum SelectAllEnum {

frontend/src/views/project-management/projectAndPermission/member/index.vue

@@ -33,14 +33,10 @@
       <MsTagGroup
         v-if="!record.showUserSelect"
         :tag-list="record.userRoles || []"
-        :show-num="2"
         type="primary"
         theme="outline"
         @click="changeUser(record)"
       >
-        <template #default="{ tag }">
-          {{ tag.name }}
-        </template>
       </MsTagGroup>
       <a-select
         v-else

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

@@ -27,13 +27,9 @@
         <MsTagGroup
           v-if="!record.showProjectSelect"
           :tag-list="record.projectIdNameMap || []"
-          :show-num="2"
           theme="outline"
           @click="changeUserOrProject(record, 'project')"
         >
-          <template #default="{ tag }">
-            {{ tag.name }}
-          </template>
         </MsTagGroup>
         <a-select
           v-else
@@ -51,14 +47,10 @@
         <MsTagGroup
           v-if="!record.showUserSelect"
           :tag-list="record.userRoleIdNameMap || []"
-          :show-num="2"
           type="primary"
           theme="outline"
           @click="changeUserOrProject(record, 'user')"
         >
-          <template #default="{ tag }">
-            {{ tag.name }}
-          </template>
         </MsTagGroup>
         <a-select
           v-else

frontend/src/views/setting/organization/project/orgProject.vue

@@ -96,6 +96,7 @@
       title: 'system.organization.ID',
       dataIndex: 'num',
       width: 100,
+      showTooltip: true,
     },
     {
       title: 'system.organization.name',

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

@@ -92,7 +92,7 @@
     {
       title: 'system.organization.ID',
       dataIndex: 'num',
-      width: 100,
+      showTooltip: true,
     },
     {
       title: 'system.organization.name',

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -87,11 +87,7 @@
                   </a-tag>
                 </span>
               </a-tooltip> -->
-              <MsTagGroup :tag-list="record.organizations || []" :show-num="2" type="primary" theme="outline">
+              <MsTagGroup :tag-list="record.organizations || []" type="primary" theme="outline"> </MsTagGroup>
-                <template #default="{ tag }">
-                  {{ tag.name }}
-                </template>
-              </MsTagGroup>
             </template>
           </a-table-column>
           <a-table-column

frontend/src/views/setting/system/user/index.vue

@@ -27,42 +27,10 @@
       @batch-action="handleTableBatch"
     >
       <template #organization="{ record }">
-        <a-tooltip :content="record.organizationList.map((e: any) => e.name).join(',')">
+        <MsTagGroup :tag-list="record.organizationList"> </MsTagGroup>
-          <div>
-            <a-tag
-              v-for="org of record.organizationList.slice(0, 2)"
-              :key="org.id"
-              class="mr-[4px] bg-transparent"
-              bordered
-            >
-              {{ org.name }}
-            </a-tag>
-            <a-tag v-show="record.organizationList.length > 2" class="mr-[4px] bg-transparent" bordered>
-              +{{ record.organizationList.length - 2 }}
-            </a-tag>
-          </div>
-        </a-tooltip>
       </template>
       <template #userRole="{ record }">
-        <a-tooltip :content="record.userRoleList.map((e: any) => e.name).join(',')">
+        <MsTagGroup :tag-list="record.userRoleList" type="primary" theme="outline"> </MsTagGroup>
-          <div>
-            <a-tag
-              v-for="role of record.userRoleList.slice(0, 2)"
-              :key="role.id"
-              :class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
-              bordered
-            >
-              {{ role.name }}
-            </a-tag>
-            <a-tag
-              v-show="record.userRoleList.length > 2"
-              :class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
-              bordered
-            >
-              +{{ record.userRoleList.length - 2 }}
-            </a-tag>
-          </div>
-        </a-tooltip>
       </template>
       <template #action="{ record }">
         <template v-if="!record.enable">
@@ -244,6 +212,7 @@
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import type { SimpleUserInfo, SystemRole, UserListItem } from '@/models/setting/user';
   import type { FormItemModel, MsBatchFormInstance } from '@/components/business/ms-batch-form/types';
+  import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
 
   const { t } = useI18n();
   const route = useRoute();
@@ -252,44 +221,37 @@
     {
       title: 'system.user.tableColumnEmail',
       dataIndex: 'email',
-      showInTable: true,
+      showTooltip: true,
     },
     {
       title: 'system.user.tableColumnName',
       dataIndex: 'name',
-      showInTable: true,
+      showTooltip: true,
     },
     {
       title: 'system.user.tableColumnPhone',
       dataIndex: 'phone',
-      showInTable: true,
     },
     {
       title: 'system.user.tableColumnOrg',
       slotName: 'organization',
-      dataIndex: 'organizationList',
+      isTag: true,
-      showTooltip: true,
-      showInTable: true,
     },
     {
       title: 'system.user.tableColumnUserGroup',
       slotName: 'userRole',
-      dataIndex: 'userRoleList',
+      isTag: true,
-      showTooltip: true,
-      showInTable: true,
     },
     {
       title: 'system.user.tableColumnStatus',
       slotName: 'enable',
       dataIndex: 'enable',
-      showInTable: true,
     },
     {
       title: 'system.user.tableColumnActions',
       slotName: 'action',
       fixed: 'right',
       width: 90,
-      showInTable: true,
     },
   ];
   const tableStore = useTableStore();
@@ -299,6 +261,7 @@
     {
       tableKey: TableKeyEnum.SYSTEM_USER,
       columns,
+      scroll: { x: 1200 },
       selectable: true,
     },
     (record) => ({