@yqg/permission 1.1.3-beta.0 → 1.2.1

package/src/components/yqg-permission.vue

@@ -1,24 +1,36 @@
 <template>
 	<ConfigProvider
-	v-if="allPermissions.length"
-	prefixCls="yqg-permission"
-	:theme="{
-      	token: {
-        	colorPrimary: props.color,
-      	}}">
+		prefixCls="yqg-permission"
+		:theme="{
+      		token: {
+        		colorPrimary: props.color,
+      		}
+		}"
+	>
 		<div class="crane-wraper">
-			<template v-if="type==='text'">
-				<TypographyLink @click="showModal">{{t('permissionApply')}}</TypographyLink>
+			<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,
+					}"
+				>
+					<template #icon>
+						<img :src="applyIconUrl" height="20" width="20"/>
+					</template>
+				</FloatButton>
 			</template>
-			<template v-else-if="type==='custom'">
+			<template v-else-if="type===COM_TYPE.CUSTOM">
 				<div @click="showModal">
-					<slot name="custom"></slot>
+					<slot name="custom"/>
 				</div>
 			</template>
 			<template v-else>
-				
 				<!-- 可申请 -->
-				<template v-if="curStatus.status === statusMap.DEFAULT">
+				<template v-if="curStatus.status === STATUS_MAP.DEFAULT">
 					<img 
 					:src="curStatus.imageUrl" 
 					height="200" 
@@ -32,7 +44,7 @@
 					</div>
 				</template>
 				<!-- 审批中 -->
-				<template v-if="curStatus.status === statusMap.PENDING">
+				<template v-if="curStatus.status === STATUS_MAP.PENDING">
 					<img 
 					:src="curStatus.imageUrl" 
 					height="200" 
@@ -52,7 +64,7 @@
 					</div>
 				</template>
 				<!-- 不可申请 -->
-				<div v-if="curStatus.status === statusMap.NO" class="crane-wraper">
+				<div v-if="curStatus.status === STATUS_MAP.NO" class="crane-wraper">
 					<img 
 					:src="curStatus.imageUrl" 
 					height="200" 
@@ -76,27 +88,42 @@
 		 :permissionList="permissionList" 
 		 :workNumber="workNumber"
 		 :businessCode="businessCode"
-		 @onSuccess="getPermissions">
+		 @onSuccess="() => emit('onSuccess')"
+		 @onSubmit="getPermissions">
 		</ApplyModal>
 
 	</ConfigProvider>
 </template>
 <script lang="ts" setup>
-	import { ref, defineAsyncComponent, computed, watchEffect, watch} from 'vue';
-	import { Button, ConfigProvider, TypographyLink, Popover , message} from 'ant-design-vue';
+	import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
+	import { Button, ConfigProvider, Popover , message, FloatButton} from 'ant-design-vue';
 	import applyUrl from '@/assets/applying.png';
+	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';
 
-	// 重置 message 类名，避免被全局样式覆盖
-	message.config({prefixCls: 'yqg-permission-message'});
-  	const ApplyModal = defineAsyncComponent(() =>import('./apply-modal.vue'));
-	const statusMap = {
+	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: {
@@ -107,10 +134,6 @@
 			type: [String, Array<String>],
 	  		default: []
   		},
-		businessCode: {
-	  		type: String,
-	  		default: ''
-		},
 		locale: {
 	  		type: String,
 	  		default: 'zh-CN'
@@ -123,9 +146,12 @@
 	  		type: String,
 	  		default: 'default'
 		},
+		top: {
+			type: String,
+			default: '100px'
+		}
 	});
-	const emit = defineEmits(['onSuccess']);
-
+	
   	const open = ref(false);
 	const curApproving = ref<PermissionType>();
   	let permissionList = ref<PermissionListType>([]);
@@ -133,18 +159,27 @@
 		imageUrl: noauthority,
 		status: '',
   	})
+	
   	const allPermissions = computed(() => {
+		permissionList.value = [];
 		if (Array.isArray(props.permissions)) {
-	  		return props.permissions;
-		} else {
-	  		return props.permissions.split(',');
+	  		return props.permissions.filter((item) => item.trim());
 		}
+		return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
   	});
 
+	const businessCode = computed(() => {
+		const code = allPermissions.value[0] || '';
+		if (!code) return '';
+
+		return code.split('.')[0];
+	})
+
   	const formatPermissionsData = (data: PermissionListType) => {
 		const arr:PermissionListType = [];
 		const flattenData = (list: PermissionListType) => {
 			list.forEach((item) => {
+				item.name = item.name.replace(/^[^.]+\./, '');
 				if (item.children) {
 					flattenData(item.children);
 				} else {
@@ -153,13 +188,19 @@
 			})
 		};
 		flattenData(data);
+
 		// 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
 		// 然后再根据 L1, L2, L3 排序
-		const sort = [ null, 'PENDING', 'OWNER', 'NO'];
+		const sort = [ null, 'TEMP_OWNER', 'PENDING', 'OWNER', 'NO'];
 		const levelSort = ['L1', 'L2', 'L3'];
+		const sortMap = new Map(sort.map((value, index) => [value, index]));
+		const levelSortMap = new Map(levelSort.map((value, index) => [value, index]));
+
 		arr.sort((a, b) => {
-			return sort.indexOf(a.businessApplyType) - sort.indexOf(b.businessApplyType) || levelSort.indexOf(a.securityLevel) - levelSort.indexOf(b.securityLevel);
+			return (sortMap.get(a.businessApplyType) ?? 0) - (sortMap.get(b.businessApplyType) ?? 0) 
+				|| (levelSortMap.get(a.securityLevel) ?? 0) - (levelSortMap.get(b.securityLevel) ?? 0);
 		});
+
 		return arr;
   	}
 
@@ -167,16 +208,18 @@
 		if (!data.length) {
 			return {
 				imageUrl: noauthority,
-				status: '',
+				status: ''
 			};
 		}
-		const current = data.find((per) => per.businessApplyType === statusMap.PENDING);
-		const cannotApply = data.every((per) => per.businessApplyType === statusMap.NO);
+
+		const current = data.find((per) => per.businessApplyType === STATUS_MAP.PENDING);
+		const cannotApply = data.every((per) => per.businessApplyType === STATUS_MAP.NO);
+
 		if (current) {
 			curApproving.value = current;
 			return {
 				imageUrl: applyUrl,
-				status: statusMap.PENDING,
+				status: STATUS_MAP.PENDING,
 				tips: t('status.PENDING'),
 				url: current.oaFlowUrl,
 			};
@@ -185,48 +228,55 @@
 	  	if (cannotApply) {
 			return {
 				imageUrl: noauthority,
-				status: statusMap.NO,
+				status: STATUS_MAP.NO,
 				tips: data[0].admin?.map((item) => `${item.name}(${item.departmentName})`)?.join('、'),
 			};
 	  	};
+
 	  	return {
 			imageUrl: noauthority,
-			status: statusMap.DEFAULT,
+			status: STATUS_MAP.DEFAULT,
 		}
   	};
 
 	const goViewApproval = () => {
-		if (curApproving.value?.oaFlowUrl) {
-			window.open(curApproving.value.oaFlowUrl);
-		}
+		const url = curApproving.value?.oaFlowUrl;
+		if (!url) return;
+		
+		window.open(url, '_blank');
 	};
 
   	const getPermissions = async () => {
-		if (!allPermissions.value.length || !props.businessCode || !props.workNumber) return;
+		const { workNumber } = props;
+		const permissions = allPermissions.value;
+		if (!permissions?.length || !workNumber) return;
 
 		const params = {
-			businessCode: props.businessCode,
-			features: allPermissions.value.toString(),
-			workNumber: props.workNumber,
+			workNumber,
+			features: permissions.toString(),
 		};
 
-		let res = await Http.getPermissions(params);
+		const res = await Http.getPermissions(params);
 		permissionList.value = formatPermissionsData(res.body || []);
+		
 		curStatus.value = getStatus(permissionList.value);
   	};
 
   	const showModal = () => {
+		getPermissions();
 		open.value = !open.value;
   	};
 
+	const { currentTop, dragElement } = useDraggable(props, showModal);
+
   	watchEffect(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;
@@ -243,3 +293,4 @@
 	}
 </style>
  
+../hooks/useDragable

package/src/hooks/useDragable.ts

@@ -0,0 +1,136 @@
+// useDraggable.js
+
+import { ref, onBeforeUnmount, watch, onMounted } from 'vue';
+
+export default function useDraggable(props: { top: any }, showModal: () => void) {
+    const currentTop = ref(0);
+    const isDragging = ref(false);   // 是否正在拖拽
+    const startX = ref(0);           // 鼠标按下时的X坐标
+    const initialX = ref(0);         // 元素初始X坐标
+    const initialY = ref(0);
+    const dragElement = ref<any>(null);
+
+    watch(() => props.top, (newVal) => {
+        console.log('newVal', newVal);
+        currentTop.value = newVal;
+    }, { immediate: true });
+
+    // 获取元素的初始位置
+    const getPosition = (el: HTMLElement) => {
+        const rect = el.getBoundingClientRect();
+        return {
+            x: rect.left,
+            y: rect.top
+        };
+    };
+
+    // 限制拖拽元素在屏幕内
+    const constrainToScreen = (clientX: number, clientY: number, el: HTMLElement) => {
+        const { innerWidth, innerHeight } = window;
+        const elRect = el.getBoundingClientRect();
+
+        const constrainedX = Math.min(Math.max(clientX, 0), innerWidth - elRect.width);
+        const constrainedY = Math.min(Math.max(clientY, 0), innerHeight - elRect.height);
+
+        return { x: constrainedX, y: constrainedY };
+    };
+
+    // 鼠标移动时的处理函数
+    const onMouseMove = (e: MouseEvent, el: HTMLElement) => {
+        if (!isDragging.value) return;
+
+        // 移动的时候yqg-permission-tooltip隐藏
+        const tooltip = document.querySelector('.yqg-permission-tooltip') as HTMLElement;
+        if (tooltip) {
+            tooltip.style.display = 'none';
+        }
+
+        const { clientX, clientY } = e;
+        const { x, y } = constrainToScreen(clientX - startX.value + initialX.value, clientY - currentTop.value + initialY.value, el);
+
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+
+    };
+
+    // 鼠标松开时的处理函数
+    const onMouseUp = (e: MouseEvent, el: HTMLElement) => {
+        if (!isDragging.value) return;
+
+        // 阻止点击事件触发
+        e.preventDefault();  // 阻止默认行为
+        e.stopPropagation(); // 阻止事件冒泡
+
+        // // 获取元素当前的位置
+        const { x: currentX, y: currentY } = getPosition(el);
+        if ( Math.abs(currentY - initialY.value) < 10 && Math.abs(currentX - initialX.value) < 10) {
+            showModal();
+            // 卸载拖拽
+            isDragging.value = false;
+
+            return;
+        }
+
+
+        isDragging.value = false;
+        const { clientY } = e;
+
+        // 在鼠标松开时设置x为初始位置，y为鼠标当前位置
+        const { x, y } = constrainToScreen(initialX.value, clientY - currentTop.value + initialY.value, el);
+        el.style.transition = 'all 0.3s';
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+
+        // 清除事件监听
+        document.removeEventListener('mousemove', (e) => onMouseMove(e, el));
+        document.removeEventListener('mouseup', (e) => onMouseUp(e, el));
+    };
+
+    // 鼠标按下时的处理函数
+    const onMouseDown = (e: MouseEvent, el: HTMLElement) => {
+        isDragging.value = true;
+
+        // 阻止点击事件触发
+        e.preventDefault();  // 阻止默认行为
+        e.stopPropagation();
+
+        // 获取鼠标按下时的位置
+        startX.value = e.clientX;
+        currentTop.value = e.clientY;
+
+
+        // 获取元素的初始位置
+        const { x, y } = getPosition(el);
+        initialX.value = x;
+        initialY.value = y;
+        el.style.transition = 'none';
+
+        // 添加鼠标移动和鼠标松开事件监听
+        document.addEventListener('mousemove', (e) => onMouseMove(e, el));
+        document.addEventListener('mouseup', (e) => onMouseUp(e, el));
+    };
+
+    // 返回拖拽的绑定方法
+    const bindDraggable = () => {
+        onMounted(() => {
+            const el = dragElement.value?.$el;
+            if (el) {
+                el.addEventListener('mousedown', (e: MouseEvent) => onMouseDown(e, el));
+            }
+        });
+
+        onBeforeUnmount(() => {
+            const el = dragElement.value?.$el;
+            if (el) {
+                el.removeEventListener('mousedown', (e: MouseEvent) => onMouseDown(e, el));
+            }
+        });
+    };
+
+    bindDraggable();
+
+    return {
+        currentTop,
+        dragElement,
+    };
+}

package/src/i18n/en-US.ts

@@ -3,31 +3,35 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '临时项目',
-    applyReason3: '数据查询与分析',
-    applyReasonPlaceholder: '请尽可能详细描述申请理由',
+    applyReasonPlaceholder: '请尽可能详细说明申请原因和使用场景，不要只填写“工作需要”之类的理由，以免影响你获取权限的审批时间。',
+    applyReasonTips: '示例：由于XX项目需要，需要查看/操作XXXX场景/问题，涉及到XXX权限的使用，因此提交申请！',
     cancel: '取消',
     submit: '确定',
     close: '关闭',
     viewApprovalDetail: '查看审批详情',
-	applyMore: '继续申请其他权限',
+    applyMore: '继续申请其他权限',
     successTips: '已提交申请，审批通过后可拥有相关权限',
     resoultTitle: '操作结果反馈',
     start: '发起',
     end: '结束',
-	noNeed: '无需审批',
+    noNeed: '无需审批',
     adaptDepartment: '适用部门',
-	noApprovalProcess: '无审批流程',
+    noApprovalProcess: '无审批流程',
     excessTips: '一次最多可申请{number}个权限',
-    unavailableTips: '您暂无权限查看/操作该页面，请点击按钮进行申请',
+    unavailableTips: '您暂无权限查看/操作该页面，请点击下方按钮进行申请',
     appliedTips: '权限已申请，正在{status}...',
     unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
-	callManager: '如有需要请联系系统管理员',
-	manager: '系统管理员',
+    callManager: '如有需要请联系系统管理员',
+    manager: '系统管理员',
     availableTime: '有效期',
-	selectPlaceholder: '请选择权限点',
-	reasonPlaceholder: '请输入申请理由',
+    selectPlaceholder: '请选择权限点',
+    reasonPlaceholder: '请输入申请理由',
+    maxCountTips: '一次最多只可申请{count}个权限',
+    maxLengthTips: '最多{length}个字符',
+    lastDays: '{count}天后到期',
+    taday: '今天到期',
+    clickToApply: '点击申请权限',
+    noPermissionTips: '该菜单下暂无权限点',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',
@@ -43,10 +47,11 @@ export default {
     status: {
         PENDING: '审批中',
         NO: '不可申请',
-        OWNER: '已拥有',
+        OWNER: '永久拥有',
+        TEMP_OWNER: '临时拥有',
     },
-	operationType: {
-		QUERY: '查询',
-		MANAGE: '操作',	
-	}
+    operationType: {
+        QUERY: '查询',
+        MANAGE: '操作',
+    }
 };

package/src/i18n/zh-CH.ts

@@ -3,10 +3,8 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '临时项目',
-    applyReason3: '数据查询与分析',
-    applyReasonPlaceholder: '请尽可能详细描述申请理由',
+    applyReasonPlaceholder: '请尽可能详细说明申请原因和使用场景，不要只填写“工作需要”之类的理由，以免影响你获取权限的审批时间。',
+    applyReasonTips: '示例：由于XX项目需要，需要查看/操作XXXX场景/问题，涉及到XXX权限的使用，因此提交申请！',
     cancel: '取消',
     submit: '确定',
     close: '关闭',
@@ -20,7 +18,7 @@ export default {
     adaptDepartment: '适用部门',
 	noApprovalProcess: '无审批流程',
     excessTips: '一次最多可申请{number}个权限',
-    unavailableTips: '您暂无权限查看/操作该页面，请点击按钮进行申请',
+    unavailableTips: '您暂无权限查看/操作该页面，请点击下方按钮进行申请',
     appliedTips: '权限已申请，正在{status}...',
     unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
 	callManager: '如有需要请联系系统管理员',
@@ -30,6 +28,10 @@ export default {
 	reasonPlaceholder: '请输入申请理由',
 	maxCountTips: '一次最多只可申请{count}个权限',
 	maxLengthTips: '最多{length}个字符',
+	lastDays: '{count}天后到期',
+	taday: '今天到期',
+    clickToApply: '点击申请权限',
+    noPermissionTips: '该菜单下暂无权限点',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',

package/src/typings/index.d.ts

@@ -15,17 +15,19 @@ declare type PermissionType = {
 	name: string;
 	roleId: number;
 	desc: string;
-    businessCode: string;
-    feature: string;
+	businessCode: string;
+	feature: string;
 	validTime?: string;
-    operationType: string;
-    securityLevel: LevelType;
-    relatedDepartments?: any[];
+	operationType: string;
+	securityLevel: LevelType;
+	relatedDepartments?: any[];
+	relatedCompleteNames: string[];
 	relatedDepartmentIds?: number[];
 	curDepartmentId?: number;
 	businessApplyType: StatusType;
 	oaFlowUrl?: string;
 	children?: PermissionListType;
+	ownStatusVO: any;
 	admin?: any[];
 };
 declare type PermissionListType = PermissionType[];
@@ -34,6 +36,7 @@ declare type LevelMapType = {
     [key in LevelType]: {
         color: string;
         text: string;
+		background: string;
     };
 };
 
@@ -52,3 +55,6 @@ declare type formStateType = {
 	submitWorkNumber: string,
 
 };
+declare interface Window {
+	YQG_PERMISSION_CALLBACK?: () => void;
+}

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     },
     server: {
         proxy: {
-            '/admin': {
+            '/crane': {
                 target: 'https://crane-test.yangqianguan.com',
 				changeOrigin: true,
             },