diff --git a/src/components/memberSelector/index.vue b/src/components/memberSelector/index.vue index ca817df..f18c701 100644 --- a/src/components/memberSelector/index.vue +++ b/src/components/memberSelector/index.vue @@ -36,6 +36,7 @@ value-key="id" v-select-more="handleLoadMore" @change="changeMember" + popper-class="standard-select-dropdown-height" > diff --git a/src/hooks/useLocalManager.ts b/src/hooks/useLocalManager.ts index 8f0e23b..4fcea62 100644 --- a/src/hooks/useLocalManager.ts +++ b/src/hooks/useLocalManager.ts @@ -1,7 +1,7 @@ import { ref, shallowRef, computed, watch } from 'vue'; export function useLocalManager(initialDataGetter: () => T[], pageSize = 20) { - // 1. 全量数据池（使用 shallowRef 保证 1W 条数据操作不卡顿） + // 1. 全量数据池 const fullData = shallowRef([]); // 2. 内部展示条数 @@ -10,10 +10,18 @@ export function useLocalManager(initialDataGetter: () => T[], pageSize = 20) // 3. 监听初始数据的变化（处理后端异步返回） watch(initialDataGetter, (newVal) => { if (Array.isArray(newVal)) { - fullData.value = [...newVal]; - displayCount.value = pageSize; + // 全量去重，确保内部池子纯净 + const map = new Map(); + newVal.forEach(item => { if((item as any).id) map.set((item as any).id, item) }); + const uniqueData = Array.from(map.values()) as T[]; + + fullData.value = uniqueData; + // 如果数据被删减到小于当前水位，重置水位 + if (uniqueData.length < displayCount.value) { + displayCount.value = Math.max(pageSize, uniqueData.length); + } } - }, { immediate: true }); + }, { immediate: true,deep:true }); // 4. 切片数据（UI 渲染对象） const displayData = computed(() => { @@ -28,22 +36,10 @@ export function useLocalManager(initialDataGetter: () => T[], pageSize = 20) displayCount.value += pageSize; }; - // 移除 - const remove = (id: string | number, key = 'id') => { - fullData.value = fullData.value.filter(item => (item as any)[key] !== id); - }; - - // 新增 - const add = (item: T) => { - fullData.value = [item, ...fullData.value]; - }; - return { - fullData, displayData, + displayCount, loadMore, noMore, - remove, - add }; } \ No newline at end of file diff --git a/src/pages/stage/permission/baseSegmentedPermission.scss b/src/pages/stage/permission/baseSegmentedPermission.scss index 955df3e..4f064a6 100644 --- a/src/pages/stage/permission/baseSegmentedPermission.scss +++ b/src/pages/stage/permission/baseSegmentedPermission.scss @@ -27,7 +27,7 @@ .permission-scroll-area{ padding: 0 var(--common-padding); box-sizing: border-box; - height: calc(100vh - 190px); //设置固定的高度 + height: calc(100vh - 194px); //设置固定的高度 overflow-y: auto; } @@ -66,7 +66,7 @@ .permission-row { display: flex; - align-items: center; + align-items: flex-start; margin-bottom: 12px; .row-label { diff --git a/src/pages/stage/permission/index.vue b/src/pages/stage/permission/index.vue index bd46008..ef14c41 100644 --- a/src/pages/stage/permission/index.vue +++ b/src/pages/stage/permission/index.vue @@ -27,48 +27,44 @@ - - - + + + @@ -105,9 +101,10 @@ import { enableRole, disableRole, getRoleMemberList, - copyRolePermission + copyRolePermission, + batchSaveRole } from "@/api/stage/permission/index.ts"; -import { useLocalManager } from '@/hooks/useLocalManager'; +import { useLocalManager } from "@/hooks/useLocalManager"; defineOptions({ name: "PermissionManagement" }); const activeTab = ref(1); const tableRef = ref(null); @@ -119,6 +116,7 @@ const showMember = ref(false); const showRoles = ref(false); const detailId = ref(""); const showPermission = ref(false); +const selectMember = ref({}); //当前选择的成员数量数据 const tabList = [ { label: "角色与权限", @@ -126,14 +124,8 @@ const tabList = [ }, ]; -const { - fullData, - displayData, - loadMore, - noMore, - remove, - add -} = useLocalManager(()=>memberList.value); +const { fullData, displayData, loadMore, noMore, remove, add } = + useLocalManager(() => memberList.value); const roleColumns = [ { @@ -229,7 +221,7 @@ const roleColumns = [ ElMessage.success("复制成功"); tableRef.value.refresh(); } catch (error) { - console.log('copy error',error); + console.log("copy error", error); } }, }, @@ -286,12 +278,24 @@ const tableColumns = computed(() => { // 当前成员数量 const addMember = (row) => { showMember.value = true; + selectMember.value = row; getMemberList({ id: row.id }); }; // 保存成员数量 -const handleSaveMember = async () => { - console.log("保存成员数量",memberList.value); +const handleSaveMember = async (row) => { + const { id } = selectMember.value; + const userIds = memberList.value.map((item) => item.id); + try { + await batchSaveRole(id,{userIds}) + ElMessage.success("保存成功"); + const currentRow = dataList.value.find(item => item.id === id); + if (currentRow) { + currentRow.memberCount = memberList.value.length; + } + } catch (error) { + console.log('batch save error',error); + } }; // 刷新列表 @@ -332,17 +336,12 @@ const getTableData = async (params) => { } }; -// TODO: 后面会修改成全部获取获取成员角色列表 （分页获取） +// 后面会修改成全部获取获取成员角色列表 const getMemberList = async (params) => { - // 获取成员角色列表 - const queryParams = { - roleId: "", - pageNo: 1, - pageSize: 10, - }; + try { - const res = await getRoleMemberList(params.id); - memberList.value = res.records; + const response = await getRoleMemberList(params.id); + memberList.value = response; } catch (error) { console.log("error", error); } diff --git a/src/styles/element.scss b/src/styles/element.scss index 2fb8486..37cedd8 100644 --- a/src/styles/element.scss +++ b/src/styles/element.scss @@ -194,4 +194,10 @@ .standard-overlay-dialog-flat { --el-overlay-color-lighter: rgba(0, 0, 0, .12); backdrop-filter: blur(8px); +} + +.standard-select-dropdown-height{ + .el-select-dropdown__wrap{ + min-height: 240px; + } } \ No newline at end of file