From 02e686c76b4863808b1222fec573ec51278a309a Mon Sep 17 00:00:00 2001 From: RubyLiu Date: Thu, 3 Aug 2023 19:20:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=90=8D=E7=A7=B0=E6=9B=B4=E6=94=B9=E5=92=8C?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 2 +- frontend/src/assets/style/arco-reset.less | 16 +-- .../pure/ms-pagination/page-jumper.vue | 2 +- .../components/pure/ms-table/base-table.vue | 106 +++++++++++++----- .../components/pure/ms-table/locale/en-US.ts | 5 + .../components/pure/ms-table/locale/zh-CN.ts | 5 + frontend/src/components/pure/ms-table/type.ts | 17 +++ .../src/components/pure/ms-table/useTable.ts | 19 +++- .../system/usergroup/components/userTable.vue | 1 + 9 files changed, 135 insertions(+), 38 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index ac7c069ba7..df1a891317 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less index f06b6f5a5f..1b61a1d7b0 100644 --- a/frontend/src/assets/style/arco-reset.less +++ b/frontend/src/assets/style/arco-reset.less @@ -507,14 +507,14 @@ .arco-pagination-jumper { padding: 2px 8px; background: var(--color-text-n9); -} -.arco-pagination-jumper-input { - padding: 3px 8px; - width: 57px; - height: 28px; - border: 1px solid var(--color-text-input-border); - border-radius: 3px; - box-sizing: border-box; + .arco-pagination-jumper-input { + padding: 3px 8px; + width: 57px; + height: 28px; + border: 1px solid var(--color-text-input-border); + border-radius: 3px; + box-sizing: border-box; + } } .arco-pagination-jumper-total-page { margin-right: 0; diff --git a/frontend/src/components/pure/ms-pagination/page-jumper.vue b/frontend/src/components/pure/ms-pagination/page-jumper.vue index b3a0865795..aa27022751 100644 --- a/frontend/src/components/pure/ms-pagination/page-jumper.vue +++ b/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'; diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index e60dfa687b..d5b3fc8d10 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/frontend/src/components/pure/ms-table/base-table.vue @@ -43,13 +43,45 @@
{{ t(item.title as string) }}
-
+
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([]); + 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 = attrs; - // 全选按钮-总条数 - const selectTotal = computed(() => { - const { data }: Partial = 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 = attrs; + + const setSelectAllTotal = (isAll: boolean) => { + const { data, msPagination }: Partial = 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 = attrs; + const { data, msPagination }: Partial = 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)); + } } diff --git a/frontend/src/components/pure/ms-table/locale/en-US.ts b/frontend/src/components/pure/ms-table/locale/en-US.ts index dc00de7354..f20b61726e 100644 --- a/frontend/src/components/pure/ms-table/locale/en-US.ts +++ b/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', }, }; diff --git a/frontend/src/components/pure/ms-table/locale/zh-CN.ts b/frontend/src/components/pure/ms-table/locale/zh-CN.ts index 74ac9788f9..768f44697c 100644 --- a/frontend/src/components/pure/ms-table/locale/zh-CN.ts +++ b/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}, 请更改', }, }; diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts index 057e1c208d..e667eb34f3 100644 --- a/frontend/src/components/pure/ms-table/type.ts +++ b/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', +} diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts index f74e9b81fb..4288d0e8ab 100644 --- a/frontend/src/components/pure/ms-table/useTable.ts +++ b/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, - props?: Partial + props?: Partial, + // 数据处理的回调函数 + callBack?: (item: TableData) => TableData, + // 编辑操作的保存回调函数 + saveCallBack?: (item: TableData) => Promise ) { // 行选择 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 { diff --git a/frontend/src/views/setting/system/usergroup/components/userTable.vue b/frontend/src/views/setting/system/usergroup/components/userTable.vue index b36ad1c0dd..5c405ba73c 100644 --- a/frontend/src/views/setting/system/usergroup/components/userTable.vue +++ b/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',