feat: 表格组件增加名称更改和状态展示

frontend/package.json

@@ -37,7 +37,7 @@
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
     "@arco-design/web-vue": "^2.49.2",
-    "@arco-themes/vue-ms-theme-default": "^0.0.24",
+    "@arco-themes/vue-ms-theme-default": "^0.0.25",
     "@form-create/arco-design": "^3.1.21",
     "@vueuse/core": "^10.2.1",
     "ace-builds": "^1.22.0",

frontend/src/assets/style/arco-reset.less

@@ -507,7 +507,6 @@
 .arco-pagination-jumper {
   padding: 2px 8px;
   background: var(--color-text-n9);
-}
   .arco-pagination-jumper-input {
     padding: 3px 8px;
     width: 57px;
@@ -516,6 +515,7 @@
     border-radius: 3px;
     box-sizing: border-box;
   }
+}
 .arco-pagination-jumper-total-page {
   margin-right: 0;
   margin-left: 8px;

frontend/src/components/pure/ms-pagination/page-jumper.vue

@@ -28,7 +28,7 @@
 
   export interface PageJumperProps {
     current: number;
-    simple: boolean;
+    simple?: boolean;
     disabled: boolean;
     pages: number;
     size?: 'small' | 'mini' | 'medium' | 'large';

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

@@ -43,13 +43,45 @@
             <div v-else class="title">{{ t(item.title as string) }}</div>
           </template>
           <template #cell="{ column, record, rowIndex }">
-            <slot v-if="item.slotName" :name="item.slotName" v-bind="{ record, rowIndex, column }"></slot>
-            <template v-else>{{ record[item.dataIndex as string] }}</template>
+            <div class="flex flex-row items-center">
+              <template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
+                <div v-if="record.enable" class="flex items-center">
+                  <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
+                  {{ t('system.user.tableEnable') }}
+                </div>
+                <div v-else class="flex items-center text-[var(--color-text-4)]">
+                  <icon-stop class="mr-[2px]" />
+                  {{ t('system.user.tableDisable') }}
+                </div>
+              </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)"
+                />
+                <slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                  <span>{{ record[item.dataIndex as string] }}</span>
+                </slot>
+                <MsIcon
+                  v-if="item.editable && item.dataIndex === editKey"
+                  class="ml-2 cursor-pointer"
+                  :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
+                  type="icon-icon_edit_outlined"
+                  @click="handleEdit(rowIndex)"
+                />
+              </template>
+            </div>
           </template>
         </a-table-column>
       </template>
     </a-table>
-    <div class="ms-table-footer" :class="{ 'batch-action': showBatchAction }">
+    <div
+      class="flex h-[64px] w-[100%] flex-row flex-nowrap items-center justify-end px-0 py-4"
+      :class="{ 'batch-action': showBatchAction }"
+    >
       <batch-action
         v-if="showBatchAction"
         :select-row-count="selectCurrent"
@@ -71,7 +103,7 @@
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
   import { useAttrs, computed, ref, onMounted } from 'vue';
-  import { useTableStore } from '@/store';
+  import { useAppStore, useTableStore } from '@/store';
   import selectAll from './select-all.vue';
   import {
     MsTableProps,
@@ -80,6 +112,7 @@
     BatchActionParams,
     BatchActionConfig,
     MsTableColumn,
+    SpecialColumnEnum,
   } from './type';
   import BatchAction from './batchAction.vue';
   import MsPagination from '@/components/pure/ms-pagination/index';
@@ -89,7 +122,9 @@
   const batchleft = ref('10px');
   const { t } = useI18n();
   const tableStore = useTableStore();
+  const appStore = useAppStore();
   const columns = ref<MsTableColumn>([]);
+
   const props = defineProps<{
     selectedKeys?: (string | number)[];
     actionConfig?: BatchActionConfig;
@@ -100,28 +135,35 @@
     (e: 'batchAction', value: BatchActionParams): void;
     (e: 'pageChange', value: number): void;
     (e: 'pageSizeChange', value: number): void;
+    (e: 'rowNameChange', value: TableData): void;
   }>();
   const isSelectAll = ref(false);
   const attrs = useAttrs();
   // 全选按钮-当前的条数
   const selectCurrent = ref(0);
-  const { rowKey, pagination }: Partial<MsTableProps> = attrs;
-
   // 全选按钮-总条数
-  const selectTotal = computed(() => {
-    const { data }: Partial<MsTableProps> = attrs;
-    if (pagination) {
-      const { pageSize } = pagination as MsPaginationI;
-      return pageSize;
+  const selectTotal = ref(0);
+  // 编辑按钮的Active状态
+  const editActiveKey = ref(-1);
+  // 编辑input的Ref
+  const currentInputRef = ref(null);
+  const { rowKey, editKey }: Partial<MsTableProps> = attrs;
+
+  const setSelectAllTotal = (isAll: boolean) => {
+    const { data, msPagination }: Partial<MsTableProps> = attrs;
+    if (isAll) {
+      selectTotal.value = msPagination?.total || data?.length || appStore.pageSize;
+    } else {
+      selectTotal.value = data ? data.length : appStore.pageSize;
     }
-    return data ? data.length : 20;
-  });
+  };
 
   const initColumn = () => {
     columns.value = tableStore.getShowInTableColumns(attrs.tableKey as string);
   };
-  // 选择行change事件
-  const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean) => {
+  // 选择公共执行方法
+  const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean, isAll = false) => {
+    setSelectAllTotal(isAll);
     emit('selectedChange', arr);
     if (setCurrentSelect) {
       selectCurrent.value = arr.length;
@@ -130,7 +172,7 @@
 
   // 全选change事件
   const handleChange = (v: string) => {
-    const { data }: Partial<MsTableProps> = attrs;
+    const { data, msPagination }: Partial<MsTableProps> = attrs;
     isSelectAll.value = v === SelectAllEnum.ALL;
     if (v === SelectAllEnum.NONE) {
       selectionChange([], true);
@@ -144,10 +186,11 @@
       }
     }
     if (v === SelectAllEnum.ALL) {
-      const { total } = pagination as MsPaginationI;
+      const { total } = msPagination as MsPaginationI;
       if (data && data.length > 0) {
         selectionChange(
           data.map((item: any) => item[rowKey || 'id']),
+          false,
           true
         );
         selectCurrent.value = total;
@@ -168,6 +211,20 @@
     return selectCurrent.value > 0 && attrs.showSelectAll;
   });
 
+  const handleEditInputEnter = (record: TableData) => {
+    editActiveKey.value = -1;
+    emit('rowNameChange', record);
+  };
+
+  const handleEditInputBlur = () => {
+    editActiveKey.value = -1;
+  };
+
+  // 编辑单元格的input
+  const handleEdit = (rowIndex: number) => {
+    editActiveKey.value = rowIndex;
+  };
+
   // 根据参数获取全选按钮的位置
   const getBatchLeft = () => {
     if (attrs.enableDrag) {
@@ -219,17 +276,14 @@
     .title {
       color: var(--color-text-3);
     }
-    .ms-table-footer {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      padding: 16px 0;
-      width: 100%;
-      height: 62px;
-      flex-flow: row nowrap;
-    }
     .batch-action {
       justify-content: flex-start;
     }
+    .pop-title {
+      color: var(--color-text-1);
+    }
+    .ms-table-edit-active {
+      color: rgb(var(--primary-5));
+    }
   }
 </style>

frontend/src/components/pure/ms-table/locale/en-US.ts

@@ -24,5 +24,10 @@ export default {
       resetDefault: 'Reset default',
       nonSort: 'The above properties cannot be sorted',
     },
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    modify: 'Modify{name}',
+    nameIsNotNull: 'Name cannot be empty',
+    nameIsExist: '{name} already exists',
   },
 };

frontend/src/components/pure/ms-table/locale/zh-CN.ts

@@ -24,5 +24,10 @@ export default {
       resetDefault: '恢复默认',
       nonSort: '以上属性不可排序',
     },
+    cancel: '取消',
+    confirm: '确定',
+    modify: '修改{name}',
+    nameIsNotNull: 'Name cannot be empty',
+    nameIsExist: '已有 {name}, 请更改',
   },
 };

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

@@ -16,6 +16,8 @@ export interface MsTableColumnData extends TableColumnData {
   showDrag?: boolean;
   // 是否展示在表格上
   showInTable?: boolean;
+  // 是否可编辑
+  editable?: boolean;
 }
 // 表格属性
 export interface MsTableProps {
@@ -59,6 +61,8 @@ export interface MsTableProps {
   showSetting?: boolean;
   // 分页是否是简单模式
   pageSimple?: boolean;
+  // 编辑的key，默认为name
+  editKey?: string;
   [key: string]: any;
 }
 
@@ -94,3 +98,16 @@ export interface BatchActionConfig {
   baseAction: BatchActionParams[];
   moreAction?: BatchActionParams[];
 }
+
+export interface renamePopconfirmVisibleType {
+  [key: string]: boolean;
+}
+
+// 具有特殊功能的列
+// eslint-disable-next-line no-shadow
+export enum SpecialColumnEnum {
+  // 编辑列
+  NAME = 'name',
+  // 状态列
+  ENABLE = 'enable',
+}

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

@@ -7,7 +7,7 @@ import { TableQueryParams } from '@/models/common';
 import { useAppStore } from '@/store';
 
 import type { TableData } from '@arco-design/web-vue';
-import type { MsTableProps, MsTableData, MsTableColumn } from './type';
+import { type MsTableProps, type MsTableData, type MsTableColumn, SpecialColumnEnum } from './type';
 
 export interface Pagination {
   current: number;
@@ -18,7 +18,11 @@ export interface Pagination {
 const appStore = useAppStore();
 export default function useTableProps(
   loadListFunc: (v: TableQueryParams) => Promise<any>,
-  props?: Partial<MsTableProps>
+  props?: Partial<MsTableProps>,
+  // 数据处理的回调函数
+  callBack?: (item: TableData) => TableData,
+  // 编辑操作的保存回调函数
+  saveCallBack?: (item: TableData) => Promise<any>
 ) {
   // 行选择
   const rowSelection = {
@@ -46,6 +50,8 @@ export default function useTableProps(
     // 禁用 arco-table 的分页
     pagination: false,
     pageSimple: false,
+    // 编辑的key
+    editKey: SpecialColumnEnum.NAME,
     ...props,
   };
 
@@ -160,6 +166,9 @@ export default function useTableProps(
         if (item.createTime) {
           item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
         }
+        if (callBack) {
+          item = callBack(item);
+        }
         return item;
       });
       setPagination({ current: data.current, total: data.total });
@@ -224,6 +233,12 @@ export default function useTableProps(
         propsRes.value.data = _data;
       }
     },
+    // 编辑触发
+    rowNameChange: (record: TableData) => {
+      if (saveCallBack) {
+        saveCallBack(record);
+      }
+    },
   });
 
   return {

frontend/src/views/setting/system/usergroup/components/userTable.vue

@@ -32,6 +32,7 @@
       dataIndex: 'name',
       showDrag: false,
       showInTable: true,
+      editable: true,
     },
     {
       title: 'system.userGroup.email',