feat: 表格编辑showTooltip优化

2023-09-06 19:20:50 +08:00 · 2023-09-06 19:20:50 +08:00 · 46d32374fd
parent b77fd9e712
commit 46d32374fd
8 changed files with 46 additions and 80 deletions
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -83,39 +83,10 @@
                <slot name="action" v-bind="{ record, rowIndex }" />
              </template>
              <template v-else-if="item.showTooltip">
-                <a-tooltip placement="top" :content="String(record[item.dataIndex as string])">
-                  <a-input
-                    v-if="
-                      editActiveKey === `${item.dataIndex}${rowIndex}` &&
-                      item.editable &&
-                      item.editType === ColumnEditTypeEnum.INPUT
-                    "
-                    ref="currentInputRef"
-                    v-model="record[item.dataIndex as string]"
-                    @blur="handleEditInputBlur()"
-                    @press-enter="handleEditInputEnter(record)"
-                  />
-                  <template v-else>
-                    <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 && !record.deleted"
-                      class="ml-2 cursor-pointer"
-                      :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
-                      type="icon-icon_edit_outlined"
-                      @click="handleEdit(item.dataIndex as string, rowIndex)"
-                    />
-                  </template>
-                </a-tooltip>
-              </template>
-              <template v-else-if="item.ellipsis">
                <a-input
                  v-if="
                    editActiveKey === `${item.dataIndex}${rowIndex}` &&
-                    item.editable &&
+                    item.editType &&
                    item.editType === ColumnEditTypeEnum.INPUT
                  "
                  ref="currentInputRef"
@ -123,45 +94,30 @@
                  @blur="handleEditInputBlur()"
                  @press-enter="handleEditInputEnter(record)"
                />
-                <template v-else>
+                <a-tooltip v-else placement="top" :content="String(record[item.dataIndex as string])">
                  <div class="one-line-text max-w-[300px]">
                    <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
                      {{ record[item.dataIndex as string] || '-' }}
                    </slot>
                  </div>
+                </a-tooltip>
+                <div>
                  <MsIcon
-                    v-if="item.editable && !record.deleted"
+                    v-if="item.editType && editActiveKey !== `${item.dataIndex}${rowIndex}` && !record.deleted"
                    class="ml-2 cursor-pointer"
                    :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
                    type="icon-icon_edit_outlined"
                    @click="handleEdit(item.dataIndex as string, rowIndex)"
                  />
-                </template>
+                </div>
+                <div>
+                  <slot :name="item.revokeDeletedSlot" v-bind="{ record, rowIndex, column }"></slot>
+                </div>
              </template>
              <template v-else>
-                <a-input
-                  v-if="
-                    editActiveKey === `${item.dataIndex}${rowIndex}` &&
-                    item.editable &&
-                    item.editType === ColumnEditTypeEnum.INPUT
-                  "
-                  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(item.dataIndex as string, rowIndex)"
-                  />
-                </template>
+                <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                  {{ record[item.dataIndex as string] || '-' }}
+                </slot>
              </template>
            </div>
          </template>
@ -376,7 +332,6 @@
      currentInputRef.value[0].focus();
    } else {
      nextTick(() => {
-        debugger;
        currentInputRef.value[0].focus();
      });
    }
--- a/frontend/src/components/pure/ms-table/columnSelector.vue
+++ b/frontend/src/components/pure/ms-table/columnSelector.vue
@ -41,10 +41,10 @@
      <a-divider orientation="center" class="non-sort"
        ><span class="text-xs text-[var(--color-text-4)]">{{ t('msTable.columnSetting.nonSort') }}</span></a-divider
      >
-      <Draggable tag="div" :list="couldSortColumn" class="list-group" handle=".handle" item-key="dateIndex">
+      <Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex">
        <template #item="{ element, index }">
          <div class="column-drag-item">
-            <div class="handle flex w-[90%] items-center">
+            <div class="flex w-[90%] items-center">
              <MsIcon type="icon-icon_drag" class="text-[16px] text-[var(--color-text-4)]" />
              <span class="ml-[8px]">{{ t(element.title as string) }}</span>
            </div>
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/frontend/src/components/pure/ms-table/type.ts
@ -29,6 +29,10 @@ export interface MsTableColumnData extends TableColumnData {
  isTag?: boolean;
  // editType
  editType?: ColumnEditTypeEnum;
+  // 撤销删除的组件
+  revokeDeletedSlot?: string;
+  // 表格列排序字段
+  sortIndex?: number;
 }

 export type MsTableErrorStatus = boolean | 'error' | 'empty';
--- a/frontend/src/enums/tableEnum.ts
+++ b/frontend/src/enums/tableEnum.ts
@ -22,7 +22,9 @@ export enum TableKeyEnum {

 // 具有特殊功能的列
 export enum SpecialColumnEnum {
-  // 编辑列
+  // 系统id
+  ID = 'num',
+  // 名称
  NAME = 'name',
  // 状态列
  ENABLE = 'enable',
--- a/frontend/src/store/modules/ms-table/index.ts
+++ b/frontend/src/store/modules/ms-table/index.ts
@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { MsTableSelectorItem, MsTableState, TableOpenDetailMode } from './types';
 import { MsTableColumn } from '@/components/pure/ms-table/type';
 import { parse, stringify } from '@/utils/serializeMap';
+import { SpecialColumnEnum } from '@/enums/tableEnum';

 const msTableStore = defineStore('msTable', {
  // 开启数据持久化
@ -25,6 +26,18 @@ const msTableStore = defineStore('msTable', {
          if (item.showInTable === undefined) {
            item.showInTable = true;
          }
+          if (item.dataIndex === SpecialColumnEnum.ID) {
+            item.showDrag = false;
+            item.sortIndex = 0;
+          }
+          if (item.dataIndex === SpecialColumnEnum.NAME) {
+            item.showDrag = false;
+            item.sortIndex = 1;
+          }
+          if (item.dataIndex === SpecialColumnEnum.OPERATION || item.dataIndex === SpecialColumnEnum.ACTION) {
+            item.showDrag = false;
+            item.sortIndex = 1000;
+          }
        });
        tmpMap.set(tableKey, { mode, column });
        this.selectorColumnMap = tmpMap;
--- a/frontend/src/views/setting/organization/project/orgProject.vue
+++ b/frontend/src/views/setting/organization/project/orgProject.vue
@ -12,8 +12,7 @@
      ></a-input-search>
    </div>
    <MsBaseTable v-bind="propsRes" v-on="propsEvent">
-      <template #name="{ record }">
-        <span class="one-line-text">{{ record.name }}</span>
+      <template #revokeDelete="{ record }">
        <a-tooltip background-color="#FFFFFF">
          <template #content>
            <span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>
@ -104,11 +103,10 @@
    },
    {
      title: 'system.organization.name',
-      slotName: 'name',
-      editable: true,
+      revokeDeletedSlot: 'revokeDelete',
      editType: ColumnEditTypeEnum.INPUT,
      dataIndex: 'name',
-      ellipsis: true,
+      showTooltip: true,
    },
    {
      title: 'system.organization.member',
@ -124,8 +122,7 @@
    {
      title: 'system.organization.description',
      dataIndex: 'description',
-      ellipsis: true,
-      tooltip: true,
+      showTooltip: true,
      showDrag: true,
    },
    {
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
@ -1,7 +1,6 @@
 <template>
  <MsBaseTable v-bind="propsRes" v-on="propsEvent">
-    <template #name="{ record }">
-      <div class="one-line-text max-w-[156px]">{{ record.name }}</div>
+    <template #revokeDelete="{ record }">
      <a-tooltip background-color="#FFFFFF">
        <template #content>
          <span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>
@ -101,12 +100,11 @@
    },
    {
      title: 'system.organization.name',
-      slotName: 'name',
      dataIndex: 'name',
-      width: 200,
-      editable: true,
+      width: 300,
+      revokeDeletedSlot: 'revokeDelete',
      editType: ColumnEditTypeEnum.INPUT,
-      ellipsis: true,
+      showTooltip: true,
    },
    {
      title: 'system.organization.member',
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@ -1,7 +1,6 @@
 <template>
  <MsBaseTable v-bind="propsRes" v-on="propsEvent">
-    <template #name="{ record }">
-      <span class="one-line-text">{{ record.name }}</span>
+    <template #revokeDelete="{ record }">
      <a-tooltip background-color="#FFFFFF">
        <template #content>
          <span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>
@ -96,11 +95,10 @@
    },
    {
      title: 'system.organization.name',
-      slotName: 'name',
      dataIndex: 'name',
-      editable: true,
+      revokeDeletedSlot: 'revokeDelete',
      editType: ColumnEditTypeEnum.INPUT,
-      ellipsis: true,
+      showTooltip: true,
      width: 300,
    },
    {
@ -115,8 +113,7 @@
    {
      title: 'system.organization.description',
      dataIndex: 'description',
-      ellipsis: true,
-      tooltip: true,
+      showTooltip: true,
    },
    {
      title: 'system.organization.subordinateOrg',