|
@@ -72,7 +72,7 @@
|
|
|
</n-form-item>
|
|
|
|
|
|
<n-form-item label="系统分配" path="key">
|
|
|
- <n-checkbox-group v-model:value="formParams.systems" @update:value="handleUpdateValue">
|
|
|
+ <n-checkbox-group v-model:value="formSystems" @update:value="handleUpdateValue">
|
|
|
<n-space item-style="display: flex;">
|
|
|
<n-checkbox
|
|
|
v-for="item in systems"
|
|
@@ -93,13 +93,44 @@
|
|
|
:tab="item.name || item.id"
|
|
|
>
|
|
|
<n-form-item label="权限分配">
|
|
|
+ <div class="checkbox-group-wrapper">
|
|
|
+ <n-space vertical>
|
|
|
+ <n-checkbox
|
|
|
+ :indeterminate="isIndeterminate(item.id)"
|
|
|
+ :checked="isAllChecked(item.id)"
|
|
|
+ @update:checked="(checked) => handleCheckAll(checked, item.id)"
|
|
|
+ >
|
|
|
+ 全选
|
|
|
+ </n-checkbox>
|
|
|
+ <n-checkbox-group
|
|
|
+ v-model:value="permissions[item.id]"
|
|
|
+ @update:value="(newValue) => handlePermissionsUpdateValue(newValue, item.id)"
|
|
|
+ >
|
|
|
+ <n-space
|
|
|
+ item-style="display: flex;"
|
|
|
+ align="center"
|
|
|
+ class="checkbox-container"
|
|
|
+ >
|
|
|
+ <n-checkbox
|
|
|
+ v-for="option in optionsPermissions"
|
|
|
+ :key="option.value"
|
|
|
+ :value="option.value"
|
|
|
+ :label="option.label"
|
|
|
+ />
|
|
|
+ </n-space>
|
|
|
+ </n-checkbox-group>
|
|
|
+ </n-space>
|
|
|
+ </div>
|
|
|
+ </n-form-item>
|
|
|
+
|
|
|
+ <!-- <n-form-item label="权限分配">
|
|
|
<n-select
|
|
|
multiple
|
|
|
v-model:value="formParams.permissions[item.id]"
|
|
|
:options="optionsPermissions"
|
|
|
@update:value="(newValue) => handlePermissionsUpdateValue(newValue, item.id)"
|
|
|
/>
|
|
|
- </n-form-item>
|
|
|
+ </n-form-item>-->
|
|
|
|
|
|
<n-form-item label="页面分配">
|
|
|
<n-tree-select
|
|
@@ -158,18 +189,24 @@
|
|
|
|
|
|
// 根据选中的checkbox生成active的tab panes
|
|
|
const activeTabPanes = computed(() => {
|
|
|
- if (!formParams.value.systems) {
|
|
|
- formParams.value.systems = [];
|
|
|
+ if (!formSystems.value) {
|
|
|
+ formSystems.value = [];
|
|
|
}
|
|
|
- return systems.value.filter((tab) => formParams.value.systems.includes(tab.id));
|
|
|
+ return systems.value.filter((tab) => formSystems.value.includes(tab.id));
|
|
|
});
|
|
|
|
|
|
+ const selectSystem = ref<any>([]);
|
|
|
+
|
|
|
function handleUpdateValue(values) {
|
|
|
// 找出新增的选项
|
|
|
- const added = values.filter((item) => !formParams.value.systems.includes(item));
|
|
|
+ const added = values.filter((item) => !selectSystem.value.includes(item));
|
|
|
// 如果有新增的tab,默认激活第一个新增的tab
|
|
|
if (added.length > 0) {
|
|
|
activeTab.value = added[0];
|
|
|
+ added.forEach((item) => {
|
|
|
+ pages.value[item] = formParams.value.pages[item] || [];
|
|
|
+ permissions.value[item] = formParams.value.permissions[item] || [];
|
|
|
+ });
|
|
|
}
|
|
|
// 如果当前激活的tab被移除了,则激活第一个可用的tab
|
|
|
else if (!values.includes(activeTab.value)) {
|
|
@@ -185,10 +222,33 @@
|
|
|
delete permissions.value[valueKey];
|
|
|
}
|
|
|
}
|
|
|
+ selectSystem.value = values;
|
|
|
}
|
|
|
|
|
|
const pages = ref<object>({});
|
|
|
const permissions = ref<object>({});
|
|
|
+ const formSystems = ref<any>([]);
|
|
|
+
|
|
|
+ // 检查是否全部选中
|
|
|
+ const isAllChecked = (id) => {
|
|
|
+ return permissions.value[id]?.length === optionsPermissions.value.length;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 检查是否是部分选中(不确定状态)
|
|
|
+ const isIndeterminate = (id) => {
|
|
|
+ const selectedCount = permissions.value[id]?.length || 0;
|
|
|
+ return selectedCount > 0 && selectedCount < optionsPermissions.value.length;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理全选/全不选
|
|
|
+ const handleCheckAll = (checked, sysId) => {
|
|
|
+ if (checked) {
|
|
|
+ permissions.value[sysId] = optionsPermissions.value.map((opt) => opt.value);
|
|
|
+ // formParams.value.permissions[sysId] = optionsPermissions.value.map((opt) => opt.value);
|
|
|
+ } else {
|
|
|
+ permissions.value[sysId] = [];
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
function handlePermissionsUpdateValue(val: any, sysId: number) {
|
|
|
permissions.value[sysId] = val;
|
|
@@ -252,6 +312,7 @@
|
|
|
}
|
|
|
|
|
|
function confirmForm(e: any) {
|
|
|
+ formParams.value.systems = formSystems.value;
|
|
|
formParams.value.permissions = permissions.value;
|
|
|
formParams.value.pages = pages.value;
|
|
|
e.preventDefault();
|
|
@@ -281,6 +342,8 @@
|
|
|
formParams.value = cloneDeep(record);
|
|
|
pages.value = record.pages;
|
|
|
permissions.value = record.permissions;
|
|
|
+ formSystems.value = record.systems;
|
|
|
+ selectSystem.value = record.systems;
|
|
|
activeTab.value = record.systems[0];
|
|
|
}
|
|
|
|
|
@@ -296,4 +359,31 @@
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .checkbox-group-wrapper {
|
|
|
+ border: 1px solid #eee;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox-container {
|
|
|
+ max-height: 300px; /* 设置最大高度 */
|
|
|
+ overflow-y: auto; /* 超出时显示垂直滚动条 */
|
|
|
+ padding-right: 8px; /* 为滚动条留出空间 */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px; /* 设置选项之间的间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 滚动条样式 */
|
|
|
+ .checkbox-container::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+ .checkbox-container::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #d9d9d9;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .checkbox-container::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #c1c1c1;
|
|
|
+ }
|
|
|
+</style>
|