@yqg/permission 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yqg/permission",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "type": "module",

package/src/App.vue

@@ -41,32 +41,30 @@ const changeLocale = () => {
 			<yqg-permission
 			:permissions="permissions"
 			workNumber="05184"
-			businessCode="CRANE"
 			:color="color"
 			:locale="locale"
 			@onSuccess="() => {console.log('成功')}"
 			>
 			</yqg-permission>
 		</div>
-		<!-- <data class="case-card">
+		<data class="case-card">
 			<div>2:文字组件</div>
 			<yqg-permission
-			:permissions="permissions"
-			businessCode="CRANE"
+			:permissions="['ddd']"
 			:color="color"
 			workNumber="02124"
-			type="text"
+			type="floatButton"
+			right="100px"
+			top="200px"
 			>
 			</yqg-permission>
 		</data>
-		 -->
 
 
 		<!-- <div class="case-card">
 			<div>3:自定义</div>
 			<yqg-permission
 			:permissions="permissions"
-			businessCode="CRANE"
 			:color="color"
 			workNumber="02124"
 			locale="zh-CN"

package/src/components/apply-modal.vue

@@ -18,7 +18,11 @@
 			:label="t('applyPermission')" 
 			name="roleIds"
 			:rules="[{ required: true, message: t('selectPlaceholder')}]">
+				<span v-if="!permissionList.length">
+					{{t('noPermissionTips')}}
+				</span>
 				<CheckboxGroup
+				v-else
 				v-model:value="formState.roleIds"
 				style="display: block;"
 				@change="onChangeHandler"
@@ -43,19 +47,9 @@
 			}]">
 				<Textarea
 				v-model:value.trim="formState.applyReason"
-				show-count 
-				:maxlength="300"
-				:placeholder="t('applyReasonPlaceholder')"
+				:placeholder="t('applyReasonPlaceholder', {number: 300})"
 				:auto-size="{ minRows: 2, maxRows: 5 }">
 				</Textarea>
-				<div style="margin-top: 4px;">
-					<Tag
-					:bordered="false"
-					style="cursor: pointer;"
-					v-for="item in reasons"
-					@click="addReasonHandler(item)"
-					:key="item">{{ item }}</Tag>
-				</div>
 			</FormItem>
 
 			<FormItem :label="t('approvalProcess')">
@@ -82,7 +76,6 @@
 		FormItem,
 		CheckboxGroup,
 		Textarea,
-		Tag,
 		message
   	} from 'ant-design-vue';
   	import SuccessModal from './success-modal.vue';
@@ -92,12 +85,6 @@
 		import('./checkbox-item.vue')
 	);
 
-	const reasons = [
-		t('applyReason1'),
-		t('applyReason2'),
-		t('applyReason3'),
-	]
-
   	const props = defineProps({
 		permissionList: {
 			type: Array as () => PermissionType[],
@@ -132,18 +119,6 @@
 		applyReason: '',
 		submitWorkNumber: submitWorkNumber.value,
 	});
-	
-	const addReasonHandler = (item: string) => {
-		if (formState.applyReason.includes(item)) {
-			return;
-		}
-		if (!formState.applyReason || formState.applyReason.endsWith('、')) {
-			formState.applyReason += item;
-		} else {
-			formState.applyReason += `、${item}`;
-		}
-		formRef.value.validateFields(['applyReason']);
-	}
 
   	const handleOk = async() => {
 		if (formState.roleIds.length > 5) {

package/src/components/checkbox-item.vue

@@ -8,7 +8,7 @@
 				<Tag
 					v-if="item.securityLevel"
 					:bordered="false"
-					:color="levelMap[item.securityLevel].color"
+					:style="{color: levelMap[item.securityLevel].color, background: levelMap[item.securityLevel].background}"
 					class="crane-tag-position">
 					{{ levelMap[item.securityLevel].text }}
 				</Tag>
@@ -52,17 +52,15 @@
 			<QuestionCircleOutlined class=" crane-week-color"/>
 		</Popover>
 
-		<Popover v-if="item.relatedDepartments">
+		<Popover v-if="item.relatedCompleteNames">
 			<template #content>
 				<div  style="max-width: 400px;">
-					{{t('adaptDepartment')}}：{{ item.relatedDepartments.map((item: any) => {
-					return item.name;
-				}).join('、') }}
+					{{t('adaptDepartment')}}：{{ item.relatedCompleteNames.join('、') }}
 				</div>
 			</template>
 			<span class="crane-flex-center crane-margin-left-4">
 				<img :src="departmentImg" height="14" width="14">
-				<span class="crane-week-color crane-margin-left-4">{{ item.relatedDepartments.length }}</span>
+				<span class="crane-week-color crane-margin-left-4">{{ item.relatedCompleteNames.length }}</span>
 			</span>
 		</Popover>
 
@@ -88,16 +86,19 @@
 
 	const levelMap:LevelMapType = {
 		L1: {
-			color: 'green',
-			text: t('levels.L1')
+			color: '#1AA83B',
+			text: t('levels.L1'),
+			background: '#E3F9E9',
 		},
 		L2: {
-			color: 'orange',
-			text: t('levels.L2')
+			color: '#F37D1C',
+			text: t('levels.L2'),
+			background: '#FFE4BA'
 		},
 		L3: {
-			color: 'red',
-			text: t('levels.L3')
+			color: '#F2494B',
+			text: t('levels.L3'),
+			background: '#FDCDC5'
 		},
   	};
 

package/src/components/yqg-permission.vue

@@ -1,6 +1,5 @@
 <template>
 	<ConfigProvider
-		v-if="allPermissions.length"
 		prefixCls="yqg-permission"
 		:theme="{
       		token: {
@@ -9,10 +8,22 @@
 		}"
 	>
 		<div class="crane-wraper">
-			<template v-if="type === 'text'">
-				<TypographyLink @click="showModal" v-show="isShowText">{{t('permissionApply')}}</TypographyLink>
+			<template v-if="type === comType.FLOATBUTTON">
+				<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===comType.CUSTOM">
 				<div @click="showModal">
 					<slot name="custom"/>
 				</div>
@@ -84,12 +95,14 @@
 	</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';
 
 	const STATUS_MAP = {
 		DEFAULT: 'DEFAULT',
@@ -97,6 +110,13 @@
 		NO: 'NO',
 	} as const;
 
+	const comType = {
+		FLOATBUTTON: 'floatButton',
+		DEFAULT: 'default',
+		CUSTOM: 'custom',
+	};
+	const RIGHT_DEFAULT = '10px';
+
 	// 重置 message 类名，避免被全局样式覆盖
 	message.config({prefixCls: 'yqg-permission-message'});
 
@@ -113,10 +133,6 @@
 			type: [String, Array<String>],
 	  		default: []
   		},
-		businessCode: {
-	  		type: String,
-	  		default: ''
-		},
 		locale: {
 	  		type: String,
 	  		default: 'zh-CN'
@@ -129,8 +145,12 @@
 	  		type: String,
 	  		default: 'default'
 		},
+		top: {
+			type: String,
+			default: '100px'
+		}
 	});
-
+	
   	const open = ref(false);
 	const curApproving = ref<PermissionType>();
   	let permissionList = ref<PermissionListType>([]);
@@ -138,25 +158,27 @@
 		imageUrl: noauthority,
 		status: '',
   	})
-
+	
   	const allPermissions = computed(() => {
+		permissionList.value = [];
 		if (Array.isArray(props.permissions)) {
-	  		return props.permissions;
+	  		return props.permissions.filter((item) => item.trim());
 		}
-
-		return props.permissions.split(',');
+		return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
   	});
 
-	const isShowText = computed(() => {
-		// 所有权限点的状态要么是NO，要么是OWNER，那么不显示文字组件
-		return !permissionList.value.every((item) => item.businessApplyType === 'NO' || item.businessApplyType === 'OWNER');
-		
-	});
+	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 {
@@ -224,13 +246,11 @@
 	};
 
   	const getPermissions = async () => {
-		const { businessCode, workNumber } = props;
+		const { workNumber } = props;
 		const permissions = allPermissions.value;
-
-		if (!permissions?.length || !businessCode || !workNumber) return;
+		if (!permissions?.length || !workNumber) return;
 
 		const params = {
-			businessCode,
 			workNumber,
 			features: permissions.toString(),
 		};
@@ -246,6 +266,8 @@
 		open.value = !open.value;
   	};
 
+	const { currentTop, dragElement } = useDraggable(props, showModal);
+
   	watchEffect(getPermissions);
 
   	watch(() => props.locale, (cur, pre) => {
@@ -270,3 +292,4 @@
 	}
 </style>
  
+../hooks/useDragable

package/src/hooks/useDragable.ts

@@ -0,0 +1,135 @@
+// 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) => {
+        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,35 +3,34 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '项目需要',
-    applyReason3: '数据查询与分析',
     applyReasonPlaceholder: '请尽可能详细描述申请理由',
     cancel: '取消',
     submit: '确定',
     close: '关闭',
     viewApprovalDetail: '查看审批详情',
-	applyMore: '继续申请其他权限',
+    applyMore: '继续申请其他权限',
     successTips: '已提交申请，审批通过后可拥有相关权限',
     resoultTitle: '操作结果反馈',
     start: '发起',
     end: '结束',
-	noNeed: '无需审批',
+    noNeed: '无需审批',
     adaptDepartment: '适用部门',
-	noApprovalProcess: '无审批流程',
+    noApprovalProcess: '无审批流程',
     excessTips: '一次最多可申请{number}个权限',
     unavailableTips: '您暂无权限查看/操作该页面，请点击下方按钮进行申请',
     appliedTips: '权限已申请，正在{status}...',
     unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
-	callManager: '如有需要请联系系统管理员',
-	manager: '系统管理员',
+    callManager: '如有需要请联系系统管理员',
+    manager: '系统管理员',
     availableTime: '有效期',
-	selectPlaceholder: '请选择权限点',
-	reasonPlaceholder: '请输入申请理由',
-	maxCountTips: '一次最多只可申请{count}个权限',
-	maxLengthTips: '最多{length}个字符',
-	lastDays: '{count}天后到期',
-	taday: '今天到期',
+    selectPlaceholder: '请选择权限点',
+    reasonPlaceholder: '请输入申请理由',
+    maxCountTips: '一次最多只可申请{count}个权限',
+    maxLengthTips: '最多{length}个字符',
+    lastDays: '{count}天后到期',
+    taday: '今天到期',
+    clickToApply: '点击申请菜单',
+    noPermissionTips: '该菜单下暂无权限点',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',
@@ -48,10 +47,10 @@ export default {
         PENDING: '审批中',
         NO: '不可申请',
         OWNER: '永久拥有',
-		TEMP_OWNER: '临时拥有',
+        TEMP_OWNER: '临时拥有',
     },
-	operationType: {
-		QUERY: '查询',
-		MANAGE: '操作',	
-	}
+    operationType: {
+        QUERY: '查询',
+        MANAGE: '操作',
+    }
 };

package/src/i18n/zh-CH.ts

@@ -3,10 +3,7 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '项目需要',
-    applyReason3: '数据查询与分析',
-    applyReasonPlaceholder: '请尽可能详细描述申请理由',
+    applyReasonPlaceholder: '请尽可能详细描述申请理由({number}字以内)',
     cancel: '取消',
     submit: '确定',
     close: '关闭',
@@ -32,6 +29,8 @@ export default {
 	maxLengthTips: '最多{length}个字符',
 	lastDays: '{count}天后到期',
 	taday: '今天到期',
+    clickToApply: '点击申请权限',
+    noPermissionTips: '该菜单下暂无权限点',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',

package/src/typings/index.d.ts

@@ -21,6 +21,7 @@ declare type PermissionType = {
     operationType: string;
     securityLevel: LevelType;
     relatedDepartments?: any[];
+	relatedCompleteNames: string[];
 	relatedDepartmentIds?: number[];
 	curDepartmentId?: number;
 	businessApplyType: StatusType;
@@ -35,6 +36,7 @@ declare type LevelMapType = {
     [key in LevelType]: {
         color: string;
         text: string;
+		background: string;
     };
 };