diff --git a/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue b/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue new file mode 100644 index 0000000000..96dff85a0c --- /dev/null +++ b/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index ae16b8ddcd..7be68d3a00 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/frontend/src/components/pure/ms-table/base-table.vue @@ -1,25 +1,32 @@ - selectionChange(e, true)" @sorter-change="(dataIndex: string,direction: string) => handleSortChange(dataIndex, direction)" > + + + + + + + + - - - {{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }} - - - - + + + {{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }} + + + + {{ item.disableTitle ? t(item.disableTitle) : t('msTable.disable') }} - - + + @@ -146,10 +153,10 @@ :select-row-count="selectCurrent" :action-config="props.actionConfig" @batch-action="(item: BatchActionParams) => emit('batchAction', item)" - @clear="selectionChange([], true)" + @clear="emit('clearSelector')" /> ([]); + const appStore = useAppStore(); const props = defineProps<{ - selectedKeys?: (string | number)[]; + selectedKeys: Set; + excludeKeys: Set; + selectorStatus: SelectAllEnum; actionConfig?: BatchActionConfig; noDisable?: boolean; showSetting?: boolean; @@ -189,19 +199,35 @@ spanMethod?: (params: { record: TableData; rowIndex: number; columnIndex: number }) => void; }>(); const emit = defineEmits<{ - (e: 'selectedChange', value: (string | number)[]): void; (e: 'batchAction', value: BatchActionParams): void; (e: 'pageChange', value: number): void; (e: 'pageSizeChange', value: number): void; (e: 'rowNameChange', value: TableData): void; + (e: 'rowSelectChange', key: string): void; + (e: 'selectAllChange', value: SelectAllEnum): void; (e: 'sorterChange', value: { [key: string]: string }): void; + (e: 'clearSelector'): void; }>(); - const isSelectAll = ref(false); const attrs = useAttrs(); - // 全选按钮-当前的条数 - const selectCurrent = ref(0); + // 全选按钮-总条数 - const selectTotal = ref(0); + const selectTotal = computed(() => { + const { selectorStatus } = props; + if (selectorStatus === SelectAllEnum.ALL) { + return (attrs.msPagination as MsPaginationI)?.total || appStore.pageSize; + } + return (attrs.msPagination as MsPaginationI).pageSize || appStore.pageSize; + }); + + // 全选按钮-当前的条数 + const selectCurrent = computed(() => { + const { selectorStatus, excludeKeys, selectedKeys } = props; + if (selectorStatus === SelectAllEnum.ALL) { + return selectTotal.value - excludeKeys.size; + } + return selectedKeys.size; + }); + // 编辑按钮的Active状态 const editActiveKey = ref(''); // 编辑input的Ref @@ -233,15 +259,6 @@ return undefined; }); - 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; - } - }; - const initColumn = () => { let tmpArr: MsTableColumn = []; if (props.showSetting) { @@ -252,41 +269,13 @@ currentColumns.value = tmpArr; }; - // 选择公共执行方法 - const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean, isAll = false) => { - setSelectAllTotal(isAll); - emit('selectedChange', arr); - if (setCurrentSelect) { - selectCurrent.value = arr.length; - } - }; - // 全选change事件 - const handleChange = (v: string) => { - const { data, msPagination }: Partial> = attrs; - isSelectAll.value = v === SelectAllEnum.ALL; - if (v === SelectAllEnum.NONE) { - selectionChange([], true); - } - if (v === SelectAllEnum.CURRENT) { - if (data && data.length > 0) { - selectionChange( - data.map((item: any) => item[rowKey || 'id']), - true - ); - } - } - if (v === SelectAllEnum.ALL) { - const { total } = msPagination as MsPaginationI; - if (data && data.length > 0) { - selectionChange( - data.map((item: any) => item[rowKey || 'id']), - false, - true - ); - selectCurrent.value = total; - } - } + const handleSelectAllChange = (v: SelectAllEnum) => { + emit('selectAllChange', v); + }; + // 行选择器change事件 + const rowSelectChange = (key: string) => { + emit('rowSelectChange', key); }; // 分页change事件 @@ -376,15 +365,6 @@