update permission and product

src/pages/permission/PermissionEdit.vue

@@ -1,107 +0,0 @@
-<template>
-	<div v-can="pageAccess" class="permission-edit">
-		<t-form class="form" label-align="left">
-			<t-form-item label="名称">
-				<t-input v-model.trim="formModel.name" placeholder="权限名称" borderless />
-			</t-form-item>
-			<t-form-item label="代码">
-				<t-input v-model.trim="formModel.code" placeholder="如 customer:read" borderless />
-			</t-form-item>
-			<t-form-item label="模块">
-				<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless />
-			</t-form-item>
-			<t-form-item label="说明">
-				<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="权限说明" autosize borderless />
-			</t-form-item>
-		</t-form>
-		<t-button v-can="savePermissionCode" class="save" theme="primary" @click="savePermission">保存</t-button>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { Message } from "@/utils/message";
-import { moduleCode, usePermissionSettingsStore } from "@/store/permissionSettingsStore";
-import { corePermissionCodes } from "@/utils/permission";
-
-defineOptions({
-	name: "PermissionEdit"
-});
-
-const route = useRoute();
-const router = useRouter();
-const permissionStore = usePermissionSettingsStore();
-
-// ---------- 路由权限 ----------
-
-const routeId = computed(() => String(route.params.id || ""));
-const isCreateMode = computed(() => !routeId.value);
-const savePermissionCode = computed(() => isCreateMode.value ? corePermissionCodes.permission.create : corePermissionCodes.permission.update);
-const pageAccess = computed(() => ({
-	value: [corePermissionCodes.role.read, corePermissionCodes.permission.read, savePermissionCode.value],
-	mode: "and" as const
-}));
-
-// ---------- 表单 ----------
-
-const formModel = reactive({
-	id: "",
-	moduleCode: moduleCode,
-	code: "",
-	name: "",
-	description: ""
-});
-
-// ---------- 页面数据 ----------
-
-async function fillForm(): Promise<void> {
-	await permissionStore.loadAll();
-	const current = await permissionStore.loadPermissionDetail(routeId.value);
-	Object.assign(formModel, {
-		id: current.id,
-		moduleCode: current.moduleCode || moduleCode,
-		code: current.code,
-		name: current.name,
-		description: current.description
-	});
-}
-
-// ---------- 保存 ----------
-
-async function savePermission(): Promise<void> {
-	const permission = await permissionStore.upsertPermission({
-		id: formModel.id,
-		moduleCode: moduleCode,
-		code: formModel.code,
-		name: formModel.name,
-		description: formModel.description
-	}, isCreateMode.value);
-	Message.success("权限已保存");
-	await router.push(isCreateMode.value ? "/management/permissions/items" : `/management/permissions/items/${permission?.id || formModel.id}`);
-}
-
-onMounted(async () => {
-	await fillForm();
-});
-</script>
-
-<style scoped lang="less">
-.permission-edit {
-	padding: calc(var(--app-nav-height) + 1rem) 0 5rem 0;
-
-	.form {
-		border-radius: .75rem;
-	}
-
-	.textarea {
-		width: 100%;
-	}
-
-	.save {
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-	}
-}
-</style>
-

src/pages/permission/PermissionSettings.vue

@@ -67,7 +67,10 @@
 					@click="canAssignRole(item) && toAssign(item.id)"
 				>
 					<template #title>
-						<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
+						<div class="title" :style="{ paddingLeft: `${item.level * 1.25}rem` }">
+							<span v-text="item.name" />
+							<span class="scope" v-text="getRoleScopeLabel(item)" />
+						</div>
 					</template>
 				</t-cell>
 			</t-cell-group>
@@ -88,6 +91,8 @@ const router = useRouter();
 const userStore = useUserStore();
 const permissionStore = usePermissionSettingsStore();
 const authorizationRoleList = ref<Role[]>([]);
+const directRoleIdSet = ref(new Set<string>());
+const manageableRoleIdSet = ref(new Set<string>());
 const isSystemAdmin = computed(() => userStore.hasRoles(coreRoleCodes.admin));
 const roleCount = computed(() => authorizationRoleList.value.length);
 const permissionCount = computed(() => permissionStore.permissionList.length);
@@ -141,6 +146,15 @@ function canAssignRole(role: Pick<Role, "protectedRole">): boolean {
 	return isSystemAdmin.value || role.protectedRole !== true;
 }
 
+function getRoleScopeLabel(role: Pick<Role, "id">): string {
+	const direct = directRoleIdSet.value.has(role.id);
+	const manageable = manageableRoleIdSet.value.has(role.id);
+	if (direct && manageable) {
+		return "直属且可管理";
+	}
+	return direct ? "直属角色" : "可管理角色";
+}
+
 // ---------- 页面数据 ----------
 
 onMounted(async () => {
@@ -151,8 +165,17 @@ onMounted(async () => {
 	}
 
 	await permissionStore.loadAll();
-	const roleList = await permissionStore.loadManageableRoles();
-	authorizationRoleList.value = roleList;
+	const [manageableRoleList, currentRoleList] = await Promise.all([
+		permissionStore.loadManageableRoles(),
+		permissionStore.loadCurrentRoleDetails()
+	]);
+	const roleMap = new Map<string, Role>();
+	for (const role of [...currentRoleList, ...manageableRoleList]) {
+		roleMap.set(role.id, role);
+	}
+	authorizationRoleList.value = Array.from(roleMap.values());
+	directRoleIdSet.value = new Set(currentRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
+	manageableRoleIdSet.value = new Set(manageableRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
 });
 </script>
 
@@ -179,5 +202,16 @@ onMounted(async () => {
 			}
 		}
 	}
+
+	.title {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+
+		.scope {
+			color: var(--td-text-color-placeholder);
+			font-size: .75rem;
+		}
+	}
 }
 </style>

src/pages/permission/RoleEdit.vue

@@ -1,71 +1,70 @@
 <template>
 	<div v-can="pageAccess" class="role-edit">
-			<t-form v-entrance-transition class="form" label-align="left">
-				<t-form-item label="名称">
-					<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
-				</t-form-item>
-				<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
-					<t-input v-model.trim="formModel.code" placeholder="如 front-desk" borderless :disabled="!canEditRoleCode" />
-				</t-form-item>
-				<t-form-item label="模块">
-					<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
-				</t-form-item>
-				<t-form-item
-					label="上级"
-					:arrow="canEditParentRole"
-					@click.stop="openParentRolePicker"
-				>
-					<div class="picker-text" v-text="selectedParentRoleName" />
-				</t-form-item>
-				<t-form-item label="说明">
-					<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
-				</t-form-item>
-				<t-form-item
-					label="继承角色"
-					:arrow="canEditRoleRelation"
-					@click.stop="openChildRolePicker"
-				>
-					<div class="picker-text" v-text="selectedChildRoleName" />
-				</t-form-item>
-			</t-form>
-			<t-cell-group v-entrance-transition="70" v-if="!isCreateMode" title="权限授权" theme="card">
-				<t-cell
-					v-can="rolePermissionReadAccess"
-					title="直接授权权限 P"
-					arrow
-					@click="toRolePermissionPage"
-				>
-					<template #leftIcon>
-						<t-icon name="secured" size="1.5rem" />
-					</template>
-				</t-cell>
-				<t-cell
-					v-can="rolePermissionReadAccess"
-					title="可转授权限 D"
-					arrow
-					@click="toRoleDelegationPage"
-				>
-					<template #leftIcon>
-						<t-icon name="user-checked" size="1.5rem" />
-					</template>
-				</t-cell>
-			</t-cell-group>
-			<card-container v-entrance-transition="140" v-if="aggregatePermissionList.length" title="聚合权限 P">
-				<template #description>
-					<div>该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
-					<permission-legend />
+		<t-form v-entrance-transition class="form" label-align="left">
+			<t-form-item label="名称">
+				<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
+			</t-form-item>
+			<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
+				<t-input v-model.trim="formModel.code" placeholder="如 ROLE_CODE" borderless :disabled="!canEditRoleCode" />
+			</t-form-item>
+			<t-form-item label="模块">
+				<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
+			</t-form-item>
+			<t-form-item
+				label="上级"
+				:arrow="canEditParentRole"
+				@click.stop="openParentRolePicker"
+			>
+				<div class="picker-text" v-text="selectedParentRoleName" />
+			</t-form-item>
+			<t-form-item label="说明">
+				<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
+			</t-form-item>
+			<t-form-item
+				label="继承角色"
+				:arrow="canEditRoleRelation"
+				@click.stop="openChildRolePicker"
+			>
+				<div class="picker-text" v-text="selectedChildRoleName" />
+			</t-form-item>
+		</t-form>
+		<t-cell-group v-entrance-transition="70" v-if="!isCreateMode && canManageRole" title="权限授权" theme="card">
+			<t-cell
+				v-can="rolePermissionReadAccess"
+				title="直接授权权限 P"
+				arrow
+				@click="toRolePermissionPage"
+			>
+				<template #leftIcon>
+					<t-icon name="secured" size="1.5rem" />
 				</template>
-				<t-cell-group class="permission-list" theme="card">
-					<permission-cell
-						v-for="item in aggregatePermissionList"
-						:key="item.id"
-						:permission="item"
-						:source="item.source"
-					/>
-				</t-cell-group>
-			</card-container>
+			</t-cell>
+			<t-cell
+				v-can="rolePermissionReadAccess"
+				title="可转授权限 D"
+				arrow
+				@click="toRoleDelegationPage"
+			>
+				<template #leftIcon>
+					<t-icon name="user-checked" size="1.5rem" />
+				</template>
+			</t-cell>
+		</t-cell-group>
+		<card-container v-entrance-transition="140" v-if="aggregatePermissionList.length" title="聚合权限 P">
+			<template #description>
+				<div>该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
+				<permission-legend />
+			</template>
+			<t-cell-group class="permission-list" theme="card">
+				<permission-cell
+					v-for="item in aggregatePermissionList"
+					:key="item.id"
+					:permission="item"
+					:source="item.source"
+				/>
+			</t-cell-group>
+		</card-container>
 	</div>
-
 	<t-popup v-model="parentRolePickerVisible" placement="bottom">
 		<t-picker
 			v-model="parentRolePickerDraft"
@@ -170,7 +169,12 @@ const isSystemAdmin = computed(() => userStore.hasRoles(coreRoleCodes.admin));
 const isBuiltinRole = computed(() => currentRole.value?.builtin === true);
 const isProtectedRole = computed(() => !isSystemAdmin.value && currentRole.value?.protectedRole === true);
 const canManageRole = computed(() => isCreateMode.value || Boolean(currentRole.value && candidateRoleList.value.some(item => item.id === formModel.id)));
-const canEditRoleInfo = computed(() => userStore.hasPermissions(savePermissionCode.value) && (isCreateMode.value || (
+const isCurrentUserDirectRole = computed(() => {
+	const current = currentRole.value;
+	return Boolean(current?.moduleCode && current.code && userStore.hasRoles(`${current.moduleCode}:${current.code}`));
+});
+const hasSavePermission = computed(() => userStore.hasPermissions(savePermissionCode.value));
+const canEditRoleInfo = computed(() => hasSavePermission.value && (isCreateMode.value || (
 	canManageRole.value
 	&& !isProtectedRole.value
 	)));
@@ -181,11 +185,10 @@ const canUpdateRoleRelation = computed(() => userStore.hasPermissions([
 	corePermissionCodes.rolePermissionInherit.delete
 ], "and"));
 const canEditRoleRelation = computed(() => !isCreateMode.value && canUpdateRoleRelation.value && (
-	canManageRole.value
+	(canManageRole.value || isCurrentUserDirectRole.value)
 	&& !isProtectedRole.value
 ));
 const canSaveBaseInfo = computed(() => canEditRoleInfo.value);
-const canShowSaveAction = computed(() => canSaveBaseInfo.value && userStore.hasPermissions(savePermissionCode.value));
 type PermissionSource = "direct" | "inherited";
 type PermissionWithSource = Permission & {
 	source: PermissionSource;
@@ -308,14 +311,14 @@ function isManagementChildRole(roleId: string, parentRoleId: string, visitedRole
 // ---------- 页面跳转 ----------
 
 async function toRolePermissionPage(): Promise<void> {
-	if (!formModel.id) {
+	if (!formModel.id || !canManageRole.value) {
 		return;
 	}
 	await router.push(`/management/permissions/roles/${formModel.id}/assign/p`);
 }
 
 async function toRoleDelegationPage(): Promise<void> {
-	if (!formModel.id) {
+	if (!formModel.id || !canManageRole.value) {
 		return;
 	}
 	await router.push(`/management/permissions/roles/${formModel.id}/assign/d`);
@@ -327,7 +330,7 @@ async function fillForm(): Promise<void> {
 	await permissionStore.loadAll();
 	await loadAuthorizationScope();
 	if (isCreateMode.value) {
-		parentRoleOptions.value = candidateRoleList.value;
+		parentRoleOptions.value = await permissionStore.loadCreateParentGrantableRoles();
 		formModel.parentRoleId = parentRoleOptions.value[0]?.id || "";
 		return;
 	}
@@ -342,16 +345,6 @@ async function reloadCurrentRole(): Promise<void> {
 		.filter(item => item.id !== current.id && isManagementChildRole(item.id, current.id) && !hasChildRole(item.id, current.id))
 		.map(item => item.id));
 	const childRoleIdList = current.childRoleIdList.filter(id => childOptionIdSet.has(id));
-	parentRoleOptions.value = await permissionStore.loadParentGrantableRoles(current.id);
-	if (current.parentRole?.id && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
-		parentRoleOptions.value.unshift({
-			...current.parentRole,
-			id: current.parentRole.id,
-			permissionIdList: current.parentRole.permissionIdList || current.parentRole.permissionList?.map(item => item.id) || [],
-			childRoleIdList: current.parentRole.childRoleIdList || current.parentRole.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
-			delegationPermissionIdList: current.parentRole.delegationPermissionIdList || current.parentRole.delegationPermissionList?.map(item => item.id) || []
-		});
-	}
 	Object.assign(formModel, {
 		id: current.id,
 		moduleCode: current.moduleCode || moduleCode,
@@ -361,6 +354,18 @@ async function reloadCurrentRole(): Promise<void> {
 		parentRoleId: current.parentRoleId || "",
 		childRoleIdList
 	});
+	parentRoleOptions.value = canEditParentRole.value
+		? await permissionStore.loadParentGrantableRoles(current.id)
+		: [];
+	if (current.parentRole?.id && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
+		parentRoleOptions.value.unshift({
+			...current.parentRole,
+			id: current.parentRole.id,
+			permissionIdList: current.parentRole.permissionIdList || current.parentRole.permissionList?.map(item => item.id) || [],
+			childRoleIdList: current.parentRole.childRoleIdList || current.parentRole.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
+			delegationPermissionIdList: current.parentRole.delegationPermissionIdList || current.parentRole.delegationPermissionList?.map(item => item.id) || []
+		});
+	}
 }
 
 async function loadAuthorizationScope(): Promise<void> {
@@ -453,16 +458,22 @@ async function getCurrentStoreId(): Promise<string> {
 	return storeId;
 }
 
-onMounted(fillForm);
-
 function updateNavBar(): void {
 	navBarStore.clearRight();
-	if (canShowSaveAction.value) {
-		navBarStore.setRightText("保存", "var(--td-brand-color)", saveBaseInfo);
+	if (!hasSavePermission.value) {
+		return;
 	}
+
+	navBarStore.setRightText("保存", "var(--td-brand-color)", saveBaseInfo);
+	navBarStore.setRightDisabled(!canSaveBaseInfo.value);
 }
 
-watch(canShowSaveAction, updateNavBar, { immediate: true });
+watch([hasSavePermission, canSaveBaseInfo], updateNavBar, { immediate: true });
+
+onMounted(async () => {
+	await fillForm();
+	updateNavBar();
+});
 
 onUnmounted(() => navBarStore.clearRight());
 </script>

src/pages/permission/RoleList.vue

@@ -15,7 +15,7 @@
 					>
 						<t-cell
 							:title="item.name"
-							:note="item.code"
+							:note="`${item.code} · ${getRoleScopeLabel(item)}`"
 							arrow
 							hover
 							@click="router.push(`/management/permissions/roles/${item.id}`)"
@@ -53,6 +53,7 @@ const permissionStore = usePermissionSettingsStore();
 const userStore = useUserStore();
 const isRefreshing = ref(false);
 const deletableRoleIdSet = ref(new Set<string>());
+const directRoleIdSet = ref(new Set<string>());
 
 // ---------- 顶部导航 ----------
 
@@ -93,6 +94,15 @@ function canDeleteRole(role: Role): boolean {
 	return role.builtin !== true && role.protectedRole !== true && deletableRoleIdSet.value.has(role.id);
 }
 
+function getRoleScopeLabel(role: Role): string {
+	const direct = directRoleIdSet.value.has(role.id);
+	const manageable = deletableRoleIdSet.value.has(role.id);
+	if (direct && manageable) {
+		return "直属且可管理";
+	}
+	return direct ? "直属角色" : "可管理角色";
+}
+
 // ---------- 页面数据 ----------
 
 async function refresh(): Promise<void> {
@@ -155,10 +165,19 @@ async function refreshAuthorizationScope(): Promise<void> {
 	}
 
 	try {
-		const roleList = await permissionStore.loadManageableRoles();
-		displayRoleList.value = roleList;
-		deletableRoleIdSet.value = new Set(roleList.map(item => item.id).filter((id): id is string => Boolean(id)));
+		const [manageableRoleList, currentRoleList] = await Promise.all([
+			permissionStore.loadManageableRoles(),
+			permissionStore.loadCurrentRoleDetails()
+		]);
+		const roleMap = new Map<string, Role>();
+		for (const role of [...currentRoleList, ...manageableRoleList]) {
+			roleMap.set(role.id, role);
+		}
+		displayRoleList.value = Array.from(roleMap.values());
+		directRoleIdSet.value = new Set(currentRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
+		deletableRoleIdSet.value = new Set(manageableRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
 	} catch {
+		directRoleIdSet.value = new Set<string>();
 		deletableRoleIdSet.value = new Set<string>();
 	}
 }

src/pages/permission/RolePermissionAssign.vue

@@ -19,7 +19,7 @@
 			</div>
 		</div>
 		<t-cell-group
-			v-if="activeRole && grantablePermissionList.length"
+			v-if="canLoadActiveRolePermissions && activeRole && grantablePermissionList.length"
 			:title="showChildRolePermissions ? '继承权限表示通过继承子级角色间接获得的权限' : ''"
 			class="list"
 			theme="card"
@@ -41,7 +41,10 @@
 					</template>
 				</t-cell>
 		</t-cell-group>
-		<t-empty v-else-if="!permissionStore.loading" description="暂无可配置的直接权限 P" />
+		<t-empty
+			v-else-if="!permissionStore.loading"
+			:description="canLoadActiveRolePermissions ? '暂无可配置的直接权限 P' : '当前角色不在可管理范围内，不能配置直接授权权限 P'"
+		/>
 	</div>
 </template>
 
@@ -80,6 +83,8 @@ const isSystemAdmin = computed(() => userStore.hasRoles(coreRoleCodes.admin));
 const canEditActiveRole = computed(() => Boolean(activeRole.value)
 	&& candidateRoleList.value.some(item => item.id === activeRoleId.value)
 	&& (isSystemAdmin.value || activeRole.value?.protectedRole !== true));
+const canLoadActiveRolePermissions = computed(() => Boolean(activeRole.value)
+	&& candidateRoleList.value.some(item => item.id === activeRoleId.value));
 const roleOptions = computed<DropdownOption[]>(() => candidateRoleList.value
 	.filter(item => !!item.id)
 	.map(item => ({
@@ -110,6 +115,10 @@ async function loadActiveRolePermissions(): Promise<void> {
 		clearPermissionState();
 		return;
 	}
+	if (!candidateRoleList.value.some(item => item.id === roleId)) {
+		clearPermissionState();
+		return;
+	}
 
 	const currentSeq = permissionSyncSeq + 1;
 	permissionSyncSeq = currentSeq;
@@ -254,6 +263,21 @@ onMounted(async () => {
 		}
 	}
 
+	:deep(.t-cell__title) {
+		min-width: 0;
+	}
+
+	:deep(.t-cell__description) {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	:deep(.t-cell__right) {
+		flex: 0 0 auto;
+		margin-left: .75rem;
+	}
+
 	.list {
 
 		:deep(.t-cell) {