feat: 表格编辑showTooltip优化

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
+                <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                  v-if="
+                  {{ record[item.dataIndex as string] || '-' }}
-                    editActiveKey === `${item.dataIndex}${rowIndex}` &&
+                </slot>
-                    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>
               </template>
             </div>
           </template>
@@ -376,7 +332,6 @@
       currentInputRef.value[0].focus();
     } else {
       nextTick(() => {
-        debugger;
         currentInputRef.value[0].focus();
       });
     }

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>

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';

frontend/src/enums/tableEnum.ts

@@ -22,7 +22,9 @@ export enum TableKeyEnum {
 
 // 具有特殊功能的列
 export enum SpecialColumnEnum {
-  // 编辑列
+  // 系统id
+  ID = 'num',
+  // 名称
   NAME = 'name',
   // 状态列
   ENABLE = 'enable',

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;

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 }">
+      <template #revokeDelete="{ record }">
-        <span class="one-line-text">{{ record.name }}</span>
         <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',
+      revokeDeletedSlot: 'revokeDelete',
-      editable: true,
       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,
+      showTooltip: true,
-      tooltip: true,
       showDrag: true,
     },
     {

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

@@ -1,7 +1,6 @@
 <template>
   <MsBaseTable v-bind="propsRes" v-on="propsEvent">
-    <template #name="{ record }">
+    <template #revokeDelete="{ record }">
-      <div class="one-line-text max-w-[156px]">{{ record.name }}</div>
       <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,
+      width: 300,
-      editable: true,
+      revokeDeletedSlot: 'revokeDelete',
       editType: ColumnEditTypeEnum.INPUT,
-      ellipsis: true,
+      showTooltip: true,
     },
     {
       title: 'system.organization.member',

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

@@ -1,7 +1,6 @@
 <template>
   <MsBaseTable v-bind="propsRes" v-on="propsEvent">
-    <template #name="{ record }">
+    <template #revokeDelete="{ record }">
-      <span class="one-line-text">{{ record.name }}</span>
       <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,
+      showTooltip: true,
-      tooltip: true,
     },
     {
       title: 'system.organization.subordinateOrg',