feat: 表格支持多个编辑项

frontend/src/App.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, onBeforeMount, onMounted } from 'vue';
+  import { computed, onBeforeMount, onMounted, watchEffect } from 'vue';
   import { useRouter } from 'vue-router';
   import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
   import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
@@ -70,7 +70,7 @@
   });
   const checkIsLogin = async () => {
     const isLogin = await userStore.isLogin();
-    const isLoginPage = window.location.hash === '#/login';
+    const isLoginPage = window.location.hash.indexOf('#/login') > -1;
     if (isLoginPage && isLogin) {
       // 当前页面为登录页面，且已经登录，跳转到首页
       router.push(WorkbenchRouteEnum.WORKBENCH);

frontend/src/api/http/checkStatus.ts

@@ -12,7 +12,8 @@ export default function checkStatus(status: number, msg: string, errorMessageMod
       errMessage = `${msg}`;
       break;
     case 401: {
-      if (msg.length > 100) {
+      if (msg.length === 216) {
+        // 216是salt的长度
         setSalt(msg);
       } else {
         errMessage = msg || t('api.errMsg401');

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

@@ -86,7 +86,11 @@
               <template v-else-if="item.showTooltip">
                 <a-tooltip placement="top" :content="String(record[item.dataIndex as string])">
                   <a-input
-                    v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
+                    v-if="
+                      editActiveKey === `${item.dataIndex}${rowIndex}` &&
+                      item.editable &&
+                      item.editType === ColumnEditTypeEnum.INPUT
+                    "
                     ref="currentInputRef"
                     v-model="record[item.dataIndex as string]"
                     @blur="handleEditInputBlur()"
@@ -99,18 +103,22 @@
                       </slot>
                     </div>
                     <MsIcon
-                      v-if="item.editable && item.dataIndex === editKey && !record.deleted"
+                      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(rowIndex)"
+                      @click="handleEdit(item.dataIndex as string, rowIndex)"
                     />
                   </template>
                 </a-tooltip>
               </template>
               <template v-else>
                 <a-input
-                  v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
+                  v-if="
+                    editActiveKey === `${item.dataIndex}${rowIndex}` &&
+                    item.editable &&
+                    item.editType === ColumnEditTypeEnum.INPUT
+                  "
                   ref="currentInputRef"
                   v-model="record[item.dataIndex as string]"
                   @blur="handleEditInputBlur()"
@@ -125,7 +133,7 @@
                     class="ml-2 cursor-pointer"
                     :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
                     type="icon-icon_edit_outlined"
-                    @click="handleEdit(rowIndex)"
+                    @click="handleEdit(item.dataIndex as string, rowIndex)"
                   />
                 </template>
               </template>
@@ -170,7 +178,7 @@
   import { useAttrs, computed, ref, onMounted, nextTick } from 'vue';
   import { useAppStore, useTableStore } from '@/store';
   import selectAll from './select-all.vue';
-  import { SpecialColumnEnum, SelectAllEnum } from '@/enums/tableEnum';
+  import { SpecialColumnEnum, SelectAllEnum, ColumnEditTypeEnum } from '@/enums/tableEnum';
   import BatchAction from './batchAction.vue';
   import MsPagination from '@/components/pure/ms-pagination/index';
   import ColumnSelector from './columnSelector.vue';
@@ -208,7 +216,7 @@
   // 全选按钮-总条数
   const selectTotal = ref(0);
   // 编辑按钮的Active状态
-  const editActiveKey = ref(-1);
+  const editActiveKey = ref<string>('');
   // 编辑input的Ref
   const currentInputRef = ref();
   const { rowKey, editKey }: Partial<MsTableProps<any>> = attrs;
@@ -308,13 +316,13 @@
   });
 
   const handleEditInputEnter = (record: TableData) => {
-    editActiveKey.value = -1;
+    editActiveKey.value = '';
     emit('rowNameChange', record);
   };
 
   const handleEditInputBlur = () => {
     currentInputRef.value = null;
-    editActiveKey.value = -1;
+    editActiveKey.value = '';
   };
 
   // 排序change事件
@@ -336,8 +344,8 @@
   };
 
   // 编辑单元格的input
-  const handleEdit = (rowIndex: number) => {
+  const handleEdit = (dataIndex: string, rowIndex: number) => {
-    editActiveKey.value = rowIndex;
+    editActiveKey.value = dataIndex + rowIndex;
     if (currentInputRef.value) {
       currentInputRef.value[0].focus();
     } else {

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

@@ -35,18 +35,18 @@
       <div class="flex-col">
         <div v-for="(item, idx) in nonSortColumn" :key="item.dataIndex" class="column-item">
           <div>{{ t(item.title as string) }}</div>
-          <a-switch size="small" :model-value="item.showInTable" @change="handleFirstColumnChange(idx)" />
+          <a-switch :model-value="item.showInTable" size="small" @change="handleFirstColumnChange(idx)" />
         </div>
       </div>
       <a-divider orientation="center" class="non-sort">{{ t('msTable.columnSetting.nonSort') }}</a-divider>
-      <Draggable tag="div" :list="couldSortColumn" class="list-group" handle=".handle" item-key="dateIndex">
+      <Draggable tag="div" :list="couldSortColumn" class="list-group" item-key="dateIndex">
         <template #item="{ element, index }">
           <div class="column-drag-item">
             <div class="flex items-center">
-              <icon-drag-dot-vertical class="handle" />
+              <icon-drag-dot-vertical />
               <div class="ml-[8px]">{{ t(element.title as string) }}</div>
             </div>
-            <a-switch size="small" :model-value="element.showInTable" @change="handleSecondColumnChange(index)" />
+            <a-switch :model-value="element.showInTable" size="small" @change="handleSecondColumnChange(index)" />
           </div>
         </template>
       </Draggable>
@@ -112,12 +112,14 @@
   const handleFirstColumnChange = (idx: number) => {
     const item = nonSortColumn.value[idx];
     item.showInTable = !item.showInTable;
+    nonSortColumn.value[idx] = item;
     hasChange.value = true;
   };
 
   const handleSecondColumnChange = (idx: number) => {
     const item = couldSortColumn.value[idx];
     item.showInTable = !item.showInTable;
+    couldSortColumn.value[idx] = item;
     hasChange.value = true;
   };
 

frontend/src/components/pure/ms-table/type.ts

@@ -1,3 +1,4 @@
+import { ColumnEditTypeEnum } from '@/enums/tableEnum';
 import { TableColumnData, TableData, TableDraggable, TableChangeExtra } from '@arco-design/web-vue';
 
 export interface MsPaginationI {
@@ -26,6 +27,8 @@ export interface MsTableColumnData extends TableColumnData {
   disableTitle?: string;
   // 当展示tooltip时，是否是Tag
   isTag?: boolean;
+  // editType
+  editType?: ColumnEditTypeEnum;
 }
 
 export type MsTableErrorStatus = boolean | 'error' | 'empty';
@@ -77,8 +80,6 @@ export interface MsTableProps<T> {
   showSetting?: boolean;
   // 分页是否是简单模式
   pageSimple?: boolean;
-  // 编辑的key，默认为name
-  editKey?: string;
   // 是否展示禁用的行
   noDisable?: boolean;
   // 表格的错误状态，默认为false

frontend/src/components/pure/ms-table/useTable.ts

@@ -36,7 +36,7 @@ export default function useTableProps<T>(
     bordered: true,
     showPagination: true,
     size: 'small',
-    scroll: { maxHeight: '800px', minWidth: '1600px', x: '1400px', y: '600px' },
+    scroll: { maxHeight: '800px', minWidth: '1600px', y: '600px' },
     checkable: true,
     loading: false,
     data: [],

frontend/src/enums/tableEnum.ts

@@ -37,3 +37,10 @@ export enum SelectAllEnum {
   CURRENT = 'current',
   NONE = 'none',
 }
+
+// 列编辑类型
+export enum ColumnEditTypeEnum {
+  INPUT = 'input',
+  SELECT = 'select',
+  SEARCH_SELECT = 'search_select',
+}

frontend/src/hooks/useUser.ts

@@ -26,7 +26,7 @@ export default function useUser() {
   };
 
   const isLoginPage = () => {
-    return router.currentRoute.value.name === 'login';
+    return window.location.hash.indexOf('login') > -1;
   };
 
   return {

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

@@ -68,7 +68,7 @@
     revokeDeleteProjectByOrg,
     createOrUpdateProjectByOrg,
   } from '@/api/modules/setting/organizationAndProject';
-  import { TableKeyEnum } from '@/enums/tableEnum';
+  import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -101,42 +101,51 @@
       dataIndex: 'num',
       width: 100,
       showTooltip: true,
+      editable: true,
+      editType: ColumnEditTypeEnum.INPUT,
     },
     {
       title: 'system.organization.name',
       slotName: 'name',
       editable: true,
+      editType: ColumnEditTypeEnum.INPUT,
       dataIndex: 'name',
       showTooltip: true,
     },
     {
       title: 'system.organization.member',
       slotName: 'memberCount',
+      showDrag: true,
     },
     {
       title: 'system.organization.status',
       dataIndex: 'enable',
       disableTitle: 'common.end',
+      showDrag: true,
     },
     {
       title: 'system.organization.description',
       dataIndex: 'description',
       ellipsis: true,
       tooltip: true,
+      showDrag: true,
     },
     {
       title: 'system.organization.subordinateOrg',
       dataIndex: 'organizationName',
+      showDrag: true,
     },
     {
       title: 'system.organization.creator',
       slotName: 'creator',
       width: 180,
+      showDrag: true,
     },
     {
       title: 'system.organization.createTime',
       dataIndex: 'createTime',
       width: 180,
+      showDrag: true,
     },
     {
       title: 'system.organization.operation',

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

@@ -43,12 +43,7 @@
     @submit="fetchData"
     @cancel="handleAddUserModalCancel"
   />
-  <UserDrawer
+  <UserDrawer v-bind="currentUserDrawer" @request-fetch-data="fetchData" @cancel="handleUserDrawerCancel" />
-    :project-id="currentProjectId"
-    v-bind="currentUserDrawer"
-    @request-fetch-data="fetchData"
-    @cancel="handleUserDrawerCancel"
-  />
 </template>
 
 <script lang="ts" setup>
@@ -181,7 +176,7 @@
 
   const currentUserDrawer = reactive({
     visible: false,
-    organizationId: '',
+    projectId: '',
   });
 
   const tableActions: ActionsItem[] = [
@@ -260,11 +255,12 @@
 
   const showUserDrawer = (record: TableData) => {
     currentUserDrawer.visible = true;
-    currentUserDrawer.organizationId = record.id;
+    currentUserDrawer.projectId = record.id;
   };
 
   const handleUserDrawerCancel = () => {
     currentUserDrawer.visible = false;
+    currentUserDrawer.projectId = '';
   };
 
   const handleAddUserModalCancel = () => {