@@ -161,8 +184,10 @@
import Message from 'bkui-vue/lib/message';
import { debounce } from 'lodash';
import useGlobalStore from '../../../store/global';
+ import CheckType from '../../../../types/across-checked';
import { getSpaceGroupList, deleteGroup } from '../../../api/group';
import useTablePagination from '../../../utils/hooks/use-table-pagination';
+ import useTableAcrossCheck from '../../../utils/hooks/use-table-across-check';
import { IGroupItem, IGroupCategory, IGroupCategoryItem } from '../../../../types/group';
import CreateGroup from './create-group.vue';
import EditGroup from './edit-group.vue';
@@ -171,6 +196,7 @@
import ServicesToPublished from './services-to-published.vue';
import tableEmpty from '../../../components/table/table-empty.vue';
import DeleteConfirmDialog from '../../../components/delete-confirm-dialog.vue';
+ import acrossCheckBox from '../../../components/across-checkbox.vue';
const { spaceId } = storeToRefs(useGlobalStore());
const { t, locale } = useI18n();
@@ -186,7 +212,6 @@
const changeViewPending = ref(false);
const isDeleteGroupDialogShow = ref(false);
const deleteGroupItem = ref();
- const selectedIds = ref([]);
const isCreateGroupShow = ref(false);
const isEditGroupShow = ref(false);
const editingGroup = ref({
@@ -207,9 +232,24 @@
'分组由 1 个或多个标签选择器组成，服务配置版本选择分组上线结合客户端配置的标签用于灰度发布、A/B Test等运营场景，详情参考文档：',
),
);
-
- const checkedGroups = computed(() => {
- return groupList.value.filter((item) => selectedIds.value.includes(item.id));
+ // 跨页全选
+ const filterFailureTableData = computed(() => groupList.value.filter((item) => item.released_apps_num < 1));
+ const filterFailureCurTableData = computed(() => tableData.value.filter((item) => item.released_apps_num! < 1));
+ const selectedIds = computed(() => {
+ return (selections.value as IGroupItem[]).filter((item) => item.released_apps_num === 0).map((item) => item.id);
+ });
+ const {
+ selectType,
+ selections,
+ // handleResetCheckStatus,
+ renderSelection,
+ handleRowCheckChange,
+ handleSelectionAll,
+ handleClearSelection,
+ } = useTableAcrossCheck({
+ tableData: filterFailureTableData, // 全量数据，排除禁用
+ curPageData: filterFailureCurTableData, // 当前页数据，排除禁用
+ arrowShow: isCategorizedView, // 展示跨页下拉框；按标签分类查看无分页，默认为当前页
});
watch(
@@ -281,33 +321,6 @@
return categoryList;
};
- // 表格行是否可以选中
- const isRowSelectEnable = ({ row, isCheckAll }: { row: IGroupItem; isCheckAll: boolean }) => {
- return isCheckAll || row.released_apps_num < 1;
- };
-
- // 表格行选择事件
- const handleSelectionChange = ({ checked, row }: { checked: boolean; row: IGroupItem }) => {
- const index = selectedIds.value.findIndex((id) => id === row.id);
- if (checked) {
- if (index === -1) {
- selectedIds.value.push(row.id);
- }
- } else {
- selectedIds.value.splice(index, 1);
- }
- };
-
- // 全选
- const handleSelectAll = ({ checked }: { checked: boolean }) => {
- if (checked) {
- const list = isCategorizedView.value ? groupList.value : tableData.value;
- selectedIds.value = (list as IGroupItem[]).filter((item) => item.released_apps_num === 0).map((item) => item.id);
- } else {
- selectedIds.value = [];
- }
- };
-
// 分类视图下的table数据
const getCategorizedTableData = () => {
const list: IGroupCategoryItem[] = [];
@@ -340,8 +353,8 @@
const handleChangeView = () => {
changeViewPending.value = true;
pagination.value.current = 1;
- selectedIds.value = [];
refreshTableData();
+ handleClearSelection();
nextTick(() => {
changeViewPending.value = false;
});
@@ -381,6 +394,7 @@
isSearchEmpty.value = true;
}
refreshTableData();
+ handleClearSelection();
}, 300);
// 关联服务
@@ -420,11 +434,16 @@
const handlePageChange = (val: number) => {
pagination.value.current = val;
refreshTableData();
+ if (!(selectType.value === CheckType.HalfAcrossChecked || selectType.value === CheckType.AcrossChecked)) {
+ // 非跨页全选 需要重置全选状态
+ handleClearSelection();
+ }
};
const handlePageLimitChange = (val: number) => {
updatePagination('limit', val);
refreshTableData();
+ handleClearSelection();
};
// hover提示文字
@@ -448,13 +467,13 @@
const refreshAfterBatchDelete = () => {
if (
!isCategorizedView.value &&
- selectedIds.value.length === tableData.value.length &&
+ selections.value.length === tableData.value.length &&
pagination.value.current > 1
) {
pagination.value.current = pagination.value.current - 1;
}
- selectedIds.value = [];
+ handleClearSelection();
loadGroupList();
};
@@ -575,4 +594,25 @@
margin-left: auto;
}
}
+ .selections-style {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 30px;
+ font-size: 12px;
+ color: #63656e;
+ background: #ebecf0;
+ .checked-number {
+ padding: 0 5px;
+ font-weight: 700;
+ }
+ .checked-em {
+ margin-left: 5px;
+ color: #3a84ff;
+ cursor: pointer;
+ &:hover {
+ color: #699df4;
+ }
+ }
+ }
diff --git a/bcs-services/bcs-bscp/ui/types/across-checked.ts b/bcs-services/bcs-bscp/ui/types/across-checked.ts
new file mode 100644
index 0000000000..18b646fd6a
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/types/across-checked.ts
@@ -0,0 +1,8 @@
+enum CheckType {
+ Uncheck, // 0 未选
+ HalfChecked, // 1 当前页半选
+ HalfAcrossChecked, // 2 跨页半选
+ Checked, // 3 当前页全选
+ AcrossChecked, // 4 跨页全选
+}
+export default CheckType;