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

2023-09-05 12:57:48 +08:00 · 2023-09-05 12:57:48 +08:00 · ba70f598ea
parent 8c7ab91265
commit ba70f598ea
9 changed files with 60 additions and 101 deletions
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -55,48 +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>
-                  <div v-else class="flex items-center text-[var(--color-text-4)]">
-                    <MsIcon type="icon-icon_disable" class="mr-[2px]" />
+                  </template>
+                  <template v-else>
+                    <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"
-                      v-model="record[item.dataIndex as string]"
-                      @blur="handleEditInputBlur()"
-                      @press-enter="handleEditInputEnter(record)"
-                    />
-                    <template v-else>
-                      <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                        <div class="one-line-text">{{ record[item.dataIndex as string] || '-' }}</div>
-                      </slot>
-                      <MsIcon
-                        v-if="item.editable && item.dataIndex === editKey && !record.deleted"
-                        class="ml-2 cursor-pointer"
-                        :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
-                        type="icon-icon_edit_outlined"
-                        @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"
@ -105,9 +87,11 @@
                    @press-enter="handleEditInputEnter(record)"
                  />
                  <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>
-                    </slot>
+                    <div class="one-line-text max-w-[300px]">
+                      <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                        {{ record[item.dataIndex as string] || '-' }}
+                      </slot>
+                    </div>
                    <MsIcon
                      v-if="item.editable && item.dataIndex === editKey && !record.deleted"
                      class="ml-2 cursor-pointer"
@ -116,7 +100,28 @@
                      @click="handleEdit(rowIndex)"
                    />
                  </template>
-                </div>
+                </a-tooltip>
+              </template>
+              <template v-else>
+                <a-input
+                  v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
+                  ref="currentInputRef"
+                  v-model="record[item.dataIndex as string]"
+                  @blur="handleEditInputBlur()"
+                  @press-enter="handleEditInputEnter(record)"
+                />
+                <template v-else>
+                  <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                    {{ record[item.dataIndex as string] || '-' }}
+                  </slot>
+                  <MsIcon
+                    v-if="item.editable && item.dataIndex === editKey && !record.deleted"
+                    class="ml-2 cursor-pointer"
+                    :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
+                    type="icon-icon_edit_outlined"
+                    @click="handleEdit(rowIndex)"
+                  />
+                </template>
              </template>
            </div>
          </template>
--- a/frontend/src/components/pure/ms-tag/ms-tag-group.vue
+++ b/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('，')">
-    <div class="float-left flex min-h-[22px] max-w-[456px]">
+  <a-tooltip :content="(props.tagList||[]).map((e: any) => e[nameKey]).join('，')">
+    <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',
    }
  );

--- a/frontend/src/enums/tableEnum.ts
+++ b/frontend/src/enums/tableEnum.ts
@ -26,6 +26,10 @@ export enum SpecialColumnEnum {
  NAME = 'name',
  // 状态列
  ENABLE = 'enable',
+  // 操作列
+  ACTION = 'action',
+  // 操作列
+  OPERATION = 'operation',
 }

 export enum SelectAllEnum {
--- a/frontend/src/views/project-management/projectAndPermission/member/index.vue
+++ b/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
--- a/frontend/src/views/setting/organization/member/index.vue
+++ b/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
--- a/frontend/src/views/setting/organization/project/orgProject.vue
+++ b/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',
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/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',
--- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
+++ b/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">
-                <template #default="{ tag }">
-                  {{ tag.name }}
-                </template>
-              </MsTagGroup>
+              <MsTagGroup :tag-list="record.organizations || []" type="primary" theme="outline"> </MsTagGroup>
            </template>
          </a-table-column>
          <a-table-column
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/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(',')">
-          <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>
+        <MsTagGroup :tag-list="record.organizationList"> </MsTagGroup>
      </template>
      <template #userRole="{ record }">
-        <a-tooltip :content="record.userRoleList.map((e: any) => e.name).join(',')">
-          <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>
+        <MsTagGroup :tag-list="record.userRoleList" type="primary" theme="outline"> </MsTagGroup>
      </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',
-      showTooltip: true,
-      showInTable: true,
+      isTag: true,
    },
    {
      title: 'system.user.tableColumnUserGroup',
      slotName: 'userRole',
-      dataIndex: 'userRoleList',
-      showTooltip: true,
-      showInTable: true,
+      isTag: 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) => ({