@yqg/permission 1.3.0-alpha.9 → 1.3.1-alpha.0

package/src/components/success-modal.vue

@@ -2,59 +2,59 @@
 	<contextHolder></contextHolder>
 </template>
 <script lang="ts" setup>
-	import { createVNode } from 'vue';
-	import { CheckCircleFilled } from '@ant-design/icons-vue';
-	import { Modal } from 'ant-design-vue';
-	import t from '../utils';
+import { createVNode } from 'vue';
+import { CheckCircleFilled } from '@ant-design/icons-vue';
+import { Modal } from 'ant-design-vue';
+import t from '../utils';
 
-	const [modal, contextHolder] = Modal.useModal();
+const [modal, contextHolder] = Modal.useModal();
 
-	const countDown = (url: string, callback?: ()=>void) => {
-	 	let secondsToGo = 10;
-	  	const modal1 = modal.confirm({
-	    	title: t('resoultTitle'),
-	    	content: t('successTips'),
-			cancelText: `${t('close')}(${secondsToGo}s)`,
-			okText:`${t('viewApprovalDetail')}>>`,
-			wrapClassName: 'yqg-permission-modal-wrap',
-			icon: createVNode(CheckCircleFilled, {style: 'color: #52c41a;'}),
-			onOk: () => {
-				window.open(url);
-				modal1.destroy();
-				callback && callback();
-				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
-				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
-					location.reload();
-				}
-			},
-			onCancel: () => {
-				modal1.destroy();
-				callback && callback();
-				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
-				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
-					location.reload();
-				}
-			},
-	  	});
+const countDown = (url: string, callback?: () => void) => {
+	let secondsToGo = 10;
+	const modal1 = modal.confirm({
+		title: t('resoultTitle'),
+		content: t('successTips'),
+		cancelText: `${t('close')}(${secondsToGo}s)`,
+		okText: `${t('viewApprovalDetail')}>>`,
+		wrapClassName: 'yqg-permission-modal-wrap',
+		icon: createVNode(CheckCircleFilled, { style: 'color: #52c41a;' }),
+		onOk: () => {
+			window.open(url);
+			modal1.destroy();
+			callback && callback();
+			window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+			if (!window.YQG_PERMISSION_CALLBACK && !callback) {
+				location.reload();
+			}
+		},
+		onCancel: () => {
+			modal1.destroy();
+			callback && callback();
+			window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+			if (!window.YQG_PERMISSION_CALLBACK && !callback) {
+				location.reload();
+			}
+		},
+	});
 
-	  	const interval = setInterval(() => {
-	    	secondsToGo -= 1;
-	    	modal1.update({
-				cancelText: `${t('close')}(${secondsToGo}s)`,
-	    	});
-	  	}, 1000);
+	const interval = setInterval(() => {
+		secondsToGo -= 1;
+		modal1.update({
+			cancelText: `${t('close')}(${secondsToGo}s)`,
+		});
+	}, 1000);
 
-	  	setTimeout(() => {
-	    	clearInterval(interval);
-	    	modal1.destroy();
-	  	}, secondsToGo * 1000);
-	}
+	setTimeout(() => {
+		clearInterval(interval);
+		modal1.destroy();
+	}, secondsToGo * 1000);
+}
 
-	defineExpose({countDown});
+defineExpose({ countDown });
 
 </script>
 <style>
 .yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns {
-	text-align: center!important;
+	text-align: center !important;
 }
 </style>

package/src/components/yqg-permission.vue

@@ -1,21 +1,21 @@
 <template>
 	<ConfigProvider prefixCls="yqg-permission" :theme="{
-      		token: {
-        		colorPrimary: props.color,
-      		}
-		}">
+		token: {
+			colorPrimary: props.color,
+		}
+	}">
 		<div class="crane-wraper">
 			<template v-if="[COM_TYPE.FLOATBUTTON, COM_TYPE.TEXT].includes(type)">
 				<FloatButton ref="dragElement" type="primary" :tooltip="t('clickToApply')" :style="{
-						right: RIGHT_DEFAULT,
-						top: currentTop,
-					}">
+					right: RIGHT_DEFAULT,
+					top: currentTop,
+				}">
 					<template #icon>
 						<img :src="applyIconUrl" height="20" width="20" />
 					</template>
 				</FloatButton>
 			</template>
-			<template v-else-if="type===COM_TYPE.CUSTOM">
+			<template v-else-if="type === COM_TYPE.CUSTOM">
 				<div @click="showModal">
 					<slot name="custom" />
 				</div>
@@ -28,7 +28,7 @@
 						{{ t('unavailableTips') }}
 					</div>
 					<div>
-						<Button type="primary" @click="showModal">+ {{t('applyPermission')}}</Button>
+						<Button type="primary" @click="showModal">+ {{ t('applyPermission') }}</Button>
 					</div>
 				</template>
 				<!-- 审批中 -->
@@ -36,14 +36,14 @@
 					<img :src="curStatus.imageUrl" height="200" width="200" style="margin-top: calc(50vh - 273px)" />
 					<div class="crane-margin10">
 						<span class="crane-unapply" v-html="t('appliedTips', {
-								status: `<style>.crane-unapply span {color: orange;}</style><span>${curStatus.tips}</span>`
-							})">
+							status: `<style>.crane-unapply span {color: orange;}</style><span>${curStatus.tips}</span>`
+						})">
 						</span>
 					</div>
 					<div>
-						<Button class="crane-margin-right10"
-							@click="goViewApproval">{{t('viewApprovalDetail')}}</Button>
-						<Button type="primary" @click="showModal">+ {{t('applyMore')}}</Button>
+						<Button class="crane-margin-right10" @click="goViewApproval">{{ t('viewApprovalDetail')
+							}}</Button>
+						<Button type="primary" @click="showModal">+ {{ t('applyMore') }}</Button>
 					</div>
 				</template>
 				<!-- 不可申请 -->
@@ -53,9 +53,9 @@
 						{{ t('unapplyTips') }}
 						<Popover>
 							<template #content>
-								<div style="max-width: 400px;">{{t('manager')}}: {{ curStatus.tips }}</div>
+								<div style="max-width: 400px;">{{ t('manager') }}: {{ curStatus.tips }}</div>
 							</template>
-							<span style="color: #1677ff;">{{t('callManager') }}</span>
+							<span style="color: #1677ff;">{{ t('callManager') }}</span>
 						</Popover>
 					</div>
 				</div>
@@ -63,139 +63,149 @@
 		</div>
 
 		<ApplyModal v-model="open" :permissionList="permissionList" :spining="loading" :workNumber="workNumber"
-			@onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions">
+			:defaultCheckedIds="defaultCheckedIds" :isAllOwn="isAllOwn" @onSuccess="() => emit('onSuccess')"
+			@onSubmit="getPermissions">
 		</ApplyModal>
 
 	</ConfigProvider>
 </template>
 <script lang="ts" setup>
-	import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
-	import { Button, ConfigProvider, Popover , message, FloatButton} from 'ant-design-vue';
-	import applyIconUrl from '@/assets/applyicon.png';
-	import noauthority from '@/assets/noauthority.png';
-	import Http from '../axios/index';
-	import t from '../utils';
-	import useDraggable from '../hooks/useDragable';
-	import useStatus from '../hooks/useStatus';
+import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
+import { Button, ConfigProvider, Popover, message, FloatButton } from 'ant-design-vue';
+import applyIconUrl from '@/assets/applyicon.png';
+import noauthority from '@/assets/noauthority.png';
+import Http from '../axios/index';
+import t from '../utils';
+import useDraggable from '../hooks/useDragable';
+import useStatus from '../hooks/useStatus';
 import useFormat from '../hooks/useFormat';
 
-	const STATUS_MAP = {
-		DEFAULT: 'DEFAULT',
-		PENDING: 'PENDING',
-		NO: 'NO',
-	} as const;
-
-	const COM_TYPE = {
-		FLOATBUTTON: 'floatButton',
-		DEFAULT: 'default',
-		TEXT: 'text',	
-		CUSTOM: 'custom',
-	};
-	const RIGHT_DEFAULT = '10px';
-
-	// 重置 message 类名，避免被全局样式覆盖
-	message.config({prefixCls: 'yqg-permission-message'});
-
-  	const ApplyModal = defineAsyncComponent(() =>import('./apply-modal.vue'));
-
-	const emit = defineEmits(['onSuccess']);
-
-	const props = defineProps({
-		workNumber: {
-	  		type: String,
-	  		default: ''
-		},
-		permissions: {
-			type: [String, Array<String>],
-	  		default: []
-  		},
-		locale: {
-	  		type: String,
-	  		default: 'zh-CN'
-		},
-		color: {
-	  		type: String,
-	  		default: '#1677ff'
-		},
-		type: {
-	  		type: String,
-	  		default: 'default'
-		},
-		top: {
-			type: String,
-			default: '100px'
-		}
-	});
-	
-  	const open = ref(false);
-	const curApproving = ref<PermissionType>();
-	const loading = ref(false);
-  	let permissionList = ref<PermissionListType>([]);
-  	let curStatus = ref<Record<string, any>>({
-		imageUrl: noauthority,
-		status: '',
-  	})
-	
-  	const allPermissions = computed(() => {
-		permissionList.value = [];
-		if (Array.isArray(props.permissions)) {
-	  		return props.permissions.filter((item) => item.trim());
-		}
-		return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
-  	});
-
-	const goViewApproval = () => {
-		const url = curApproving.value?.oaFlowUrl;
-		if (!url) return;
-		
-		window.open(url, '_blank');
-	};
+const STATUS_MAP = {
+	DEFAULT: 'DEFAULT',
+	PENDING: 'PENDING',
+	NO: 'NO',
+} as const;
+
+const COM_TYPE = {
+	FLOATBUTTON: 'floatButton',
+	DEFAULT: 'default',
+	TEXT: 'text',
+	CUSTOM: 'custom',
+};
+const RIGHT_DEFAULT = '10px';
+
+// 重置 message 类名，避免被全局样式覆盖
+message.config({ prefixCls: 'yqg-permission-message' });
+
+const ApplyModal = defineAsyncComponent(() => import('./apply-modal.vue'));
+
+const emit = defineEmits(['onSuccess']);
+
+const props = defineProps({
+	workNumber: {
+		type: String,
+		default: ''
+	},
+	permissions: {
+		type: [String, Array<String>],
+		default: []
+	},
+	locale: {
+		type: String,
+		default: 'zh-CN'
+	},
+	color: {
+		type: String,
+		default: '#1677ff'
+	},
+	type: {
+		type: String,
+		default: 'default'
+	},
+	top: {
+		type: String,
+		default: '100px'
+	}
+});
+
+const open = ref(false);
+const curApproving = ref<PermissionType>();
+const loading = ref(false);
+const defaultCheckedIds = ref<string[]>([]);
+const isAllOwn = ref(false);
+let permissionList = ref<PermissionListType>([]);
+let curStatus = ref<Record<string, any>>({
+	imageUrl: noauthority,
+	status: '',
+})
+
+const allPermissions = computed(() => {
+	permissionList.value = [];
+	if (Array.isArray(props.permissions)) {
+		return props.permissions.filter((item) => item.trim());
+	}
+	return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
+});
 
-  	const getPermissions = async () => {
-		const { workNumber } = props;
-		const permissions = allPermissions.value;
-		if (!permissions?.length || !workNumber) return;
-
-		const params = {
-			workNumber,
-			features: permissions.toString(),
-		};
-
-		loading.value = true;
-		const res = await Http.getPermissions(params);
-		permissionList.value = useFormat(res.body || []);
-		curStatus.value = useStatus(permissionList.value, curApproving);
-		loading.value = false;
-  	};
-
-  	const showModal = () => {
-		open.value = !open.value;
-		getPermissions();
-  	};
+const goViewApproval = () => {
+	const url = curApproving.value?.oaFlowUrl;
+	if (!url) return;
+
+	window.open(url, '_blank');
+};
 
-	const { currentTop, dragElement } = useDraggable(props, showModal);
+const getPermissions = async () => {
+	const { workNumber } = props;
+	const permissions = allPermissions.value;
+	if (!permissions?.length || !workNumber) return;
 
-  	watchEffect(getPermissions);
+	const params = {
+		workNumber,
+		features: permissions.toString(),
+	};
 
-  	watch(() => props.locale, (cur, pre) => {
-		if (cur === pre) return;
-		localStorage.setItem('permission_locale', props.locale);
-  	}, {immediate: true});
+	loading.value = true;
+	const res = await Http.getPermissions(params);
+	const datalist = useFormat(res.body || []);
+	permissionList.value = datalist.data;
+	defaultCheckedIds.value = datalist.ownList;
+	isAllOwn.value = datalist.isAllOwn;
+	curStatus.value = useStatus(permissionList.value, curApproving);
+	loading.value = false;
+};
+
+const showModal = () => {
+	open.value = !open.value;
+	getPermissions();
+};
+
+const { currentTop, dragElement } = useDraggable(props, showModal);
+
+watchEffect(() => {
+	if (props.type === COM_TYPE.DEFAULT) {
+		getPermissions();
+	}
+});
+watch(() => props.locale, (cur, pre) => {
+	if (cur === pre) return;
+	localStorage.setItem('permission_locale', props.locale);
+}, { immediate: true });
 </script>
 
 <style scoped>
-  	.crane-wraper {
-		display: flex;
-    	align-items: center;
-    	flex-direction: column;
-		font-size: 14px;
-		white-space: nowrap;
-  	}
-	.crane-margin10 {
-		margin: 10px;
-	}
-	.crane-margin-right10 {
-		margin-right: 10px;
-	}
-</style>
- ../hooks/useSort../hooks/useFormat
+.crane-wraper {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	font-size: 14px;
+	white-space: nowrap;
+}
+
+.crane-margin10 {
+	margin: 10px;
+}
+
+.crane-margin-right10 {
+	margin-right: 10px;
+}
+</style>

package/src/hooks/useFormat.ts

@@ -9,6 +9,8 @@ const StatusType = {
     TEMP_OWNER: 'TEMP_OWNER'
 }
 export default function useFormat(tree: PermissionListType) {
+    const ownList: string[] = [];
+    let allCount: number = 0;
     function sortTree(
         tree: PermissionListType,
         sortMap: Map<string | null, number>,
@@ -16,7 +18,7 @@ export default function useFormat(tree: PermissionListType) {
     ) {
         return tree.map((node) => {
             node.key = node.feature;
-
+            allCount++;
             if (!node.children || node.children.length === 0) {
                 node.categoryVOS = (node.categoryVOS || []).filter((item: any) => item.configWay !== Category.AUTO);
 
@@ -26,8 +28,13 @@ export default function useFormat(tree: PermissionListType) {
 
                 if ([StatusType.OWNER].includes(node.businessApplyType) && !node.categoryVOS.length) {
                     node.disabled = true;
+                    ownList.push(node.feature);
                 }
             } else {
+                // 如果当前节点的所有自节点都符合[StatusType.OWNER].includes(node.businessApplyType) && !node.categoryVOS.length；那么也把当前featrue放到ownList中
+                if (node.children.every((child) => [StatusType.OWNER].includes(child.businessApplyType) && !child?.categoryVOS?.length)) {
+                    ownList.push(node.feature);
+                }
                 // 递归对子节点进行排序
                 node.children = sortTree(node.children, sortMap, levelSortMap);
 
@@ -35,7 +42,8 @@ export default function useFormat(tree: PermissionListType) {
                 if (node.children.every((child) => child.disabled)) {
                     node.disabled = true;
                 }
-            }
+            };
+
 
             return node;
         }).sort((a, b) => {
@@ -51,6 +59,10 @@ export default function useFormat(tree: PermissionListType) {
     const sortMap = new Map(sort.map((value, index) => [value, index]));
     const levelSortMap = new Map(levelSort.map((value, index) => [value, index]));
 
-    return sortTree(tree, sortMap, levelSortMap);
+    return {
+        data: sortTree(tree, sortMap, levelSortMap),
+        ownList,
+        isAllOwn: allCount === ownList.length
+    };
 }
 

package/src/i18n/zh-CH.ts

@@ -3,6 +3,7 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
+    isAllOwnTips: '您当前已拥有该页面所有权限，无需申请',
     applyReasonPlaceholder: '请尽可能详细说明申请原因和使用场景，不要只填写“工作需要”之类的理由，以免影响你获取权限的审批时间。',
     applyReasonTips: '示例：由于XX项目需要，需要查看/操作XXXX场景/问题，涉及到XXX权限的使用，因此提交申请！',
     cancel: '取消',

package/src/typings/index.d.ts

@@ -39,6 +39,7 @@ declare type PermissionType = {
 	admin?: any[];
 	checked?: boolean;
 	disabled?: boolean;
+	disableCheckbox?: boolean;
 	children?: PermissionListType;
 };
 declare type PermissionListType = PermissionType[];

package/tsconfig.app.json

@@ -22,14 +22,14 @@
     },
     "composite": true,
     "include": [
-		"src/**/*.ts",
-		"src/**/*.d.ts",
-		"src/**/*.tsx",
-		"src/**/*.vue", 
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue", 
         "src/i18n/zh-CH.js"	
     ],
-	"exclude": [
-	    "node_modules",
-	    "vite.config.ts"  // 如果不需要解析 vite.config.ts
-	],
+    "exclude": [
+        "node_modules",
+        "vite.config.ts"  // 如果不需要解析 vite.config.ts
+    ],
 }