@yqg/permission 1.0.10 → 1.0.11-alpha.1

package/package.json

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

package/src/App.vue

@@ -21,7 +21,7 @@ const permissions = reactive([
 // const permissions = reactive(['CRANE.BUSINESS.QUERY', 'RANE.BUSINESS.CREATE', 'CRANE.BUSINESS.UPDATE', 'CRANE.BUSINESS.DELETE']);
 const changeColor = () => {
 	color.value = color.value === '#f00' ? '#1677ff' : '#f00';
-}	
+}
 const changeLocale = () => {
 	locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN';
 }
@@ -38,44 +38,40 @@ const changeLocale = () => {
 			<!-- 03541 -->
 			 <!-- 02124 -->
 			  <!-- 05184 -->
-			<yqg-permission 
+			<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"
+			<yqg-permission
+			:permissions="[]"
 			:color="color"
 			workNumber="02124"
-			type="text"
+			type="icon"
 			>
 			</yqg-permission>
 		</data>
-		 -->
 
-		
+
 		<!-- <div class="case-card">
 			<div>3:自定义</div>
-			<yqg-permission 
+			<yqg-permission
 			:permissions="permissions"
-			businessCode="CRANE"
 			:color="color"
 			workNumber="02124"
-			locale="zh-CN" 
+			locale="zh-CN"
 			type="custom"
 			>
 				<div style="color: red;" slot="custom">自定义按钮</div>
 			</yqg-permission>
 		</div> -->
-		
+
 	</div>
 
 </template>

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"
@@ -48,14 +52,6 @@
 				:placeholder="t('applyReasonPlaceholder')"
 				: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 +78,6 @@
 		FormItem,
 		CheckboxGroup,
 		Textarea,
-		Tag,
 		message
   	} from 'ant-design-vue';
   	import SuccessModal from './success-modal.vue';
@@ -92,12 +87,6 @@
 		import('./checkbox-item.vue')
 	);
 
-	const reasons = [
-		t('applyReason1'),
-		t('applyReason2'),
-		t('applyReason3'),
-	]
-
   	const props = defineProps({
 		permissionList: {
 			type: Array as () => PermissionType[],
@@ -132,18 +121,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

@@ -1,18 +1,18 @@
 <template>
 	<div class="crane-checkbox-line">
-		<Checkbox 
+		<Checkbox
 		:value="item.roleId"
 		:disabled="['OWNER', 'PENDING', 'NO'].includes(props.item.businessApplyType)"
 		@change="onCheck">
 			<div class="crane-flex-center crane-checkbox-label">
 				<Tag
-					v-if="item.securityLevel" 
-					:bordered="false" 
-					:color="levelMap[item.securityLevel].color"
+					v-if="item.securityLevel"
+					:bordered="false"
+					:style="{color: levelMap[item.securityLevel].color, background: levelMap[item.securityLevel].background}"
 					class="crane-tag-position">
 					{{ levelMap[item.securityLevel].text }}
 				</Tag>
-				
+
 				<span>{{t(`operationType.${item.operationType}`)}}｜
 				</span>
 				<Popover>
@@ -22,8 +22,8 @@
 					<span class="crane-text-overflow">{{ item.name }}</span>
 				</Popover>
 				<Tag
-					v-if="item.businessApplyType && item.businessApplyType !== 'TEMP_OWNER'" 
-					:bordered="false" 
+					v-if="item.businessApplyType && item.businessApplyType !== 'TEMP_OWNER'"
+					:bordered="false"
 					class="crane-tag-position crane-margin-left-4 crane-margin-right-0"
 					:class="['PENDING', 'TEMP_OWNER'].includes(item.businessApplyType) ? '' : 'crane-disabled-color'">
 					{{ statusMap[item.businessApplyType] }}
@@ -34,14 +34,14 @@
 						<span v-else>{{ t('taday') }}</span>
 					</template>
 					<Tag
-						v-if="item.businessApplyType === 'TEMP_OWNER'" 
-						:bordered="false" 
+						v-if="item.businessApplyType === 'TEMP_OWNER'"
+						:bordered="false"
 						class="crane-tag-position crane-margin-left-4 crane-margin-right-0"
 						:class="['PENDING'].includes(item.businessApplyType) ? '' : 'crane-disabled-color'">
 						{{ statusMap[item.businessApplyType] }}
 					</Tag>
 				</Popover>
-				
+
 			</div>
 		</Checkbox>
 
@@ -88,16 +88,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'
 		},
   	};
 
@@ -155,7 +158,7 @@
  }
 .crane-checkbox-line {
 	margin-bottom: 12px;
-	display: flex; 
+	display: flex;
 	align-items: center;
 }
 .crane-checkbox-line:last-child {
@@ -166,8 +169,8 @@
 }
 .crane-tag-position {
 	margin-right: 4px;
-	font-size: 10px; 
-	padding: 2px 4px; 
+	font-size: 10px;
+	padding: 2px 4px;
 	line-height: 12px;
 	font-weight: 500;
  }
@@ -194,5 +197,5 @@
     overflow: hidden;
     text-overflow: ellipsis
  }
- 
+
 </style>

package/src/components/success-modal.vue

@@ -1,5 +1,5 @@
 <template>
-	<contextHolder></contextHolder>	
+	<contextHolder></contextHolder>
 </template>
 <script lang="ts" setup>
   	import { createVNode } from 'vue';

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">{{t('permissionApply')}}</TypographyLink>
+			<template v-if="type === comType.ICON">
+				<FloatButton
+					ref="dragElement"
+					type="primary"
+					:tooltip="t('clickToApply')"
+					:style="{
+						right,
+						top: currentTop,
+					}"
+				>
+					<template #icon>
+						<img :src="applyIconUrl" />
+					</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/apply.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,12 @@
 		NO: 'NO',
 	} as const;
 
+	const comType = {
+		ICON: 'icon',
+		DEFAULT: 'default',
+		CUSTOM: 'custom',
+	};
+
 	// 重置 message 类名，避免被全局样式覆盖
 	message.config({prefixCls: 'yqg-permission-message'});
 
@@ -113,10 +132,6 @@
 			type: [String, Array<String>],
 	  		default: []
   		},
-		businessCode: {
-	  		type: String,
-	  		default: ''
-		},
 		locale: {
 	  		type: String,
 	  		default: 'zh-CN'
@@ -129,16 +144,28 @@
 	  		type: String,
 	  		default: 'default'
 		},
+		right: {
+			type: String,
+			default: '100px'
+		},
+		top: {
+			type: String,
+			default: '100px'
+		}
 	});
+	
 
   	const open = ref(false);
 	const curApproving = ref<PermissionType>();
   	let permissionList = ref<PermissionListType>([]);
+	
+
+
   	let curStatus = ref<Record<string, any>>({
 		imageUrl: noauthority,
 		status: '',
   	})
-
+	
   	const allPermissions = computed(() => {
 		if (Array.isArray(props.permissions)) {
 	  		return props.permissions;
@@ -147,10 +174,19 @@
 		return props.permissions.split(',');
   	});
 
+	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 {
@@ -218,13 +254,12 @@
 	};
 
   	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(),
 		};
@@ -240,6 +275,8 @@
 		open.value = !open.value;
   	};
 
+	const { currentTop, dragElement } = useDraggable(props, showModal);
+
   	watchEffect(getPermissions);
 
   	watch(() => props.locale, (cur, pre) => {
@@ -264,3 +301,4 @@
 	}
 </style>
  
+../hooks/useDragable

package/src/hooks/useDragable.ts

@@ -0,0 +1,129 @@
+// 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;
+
+        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,9 +3,6 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '项目需要',
-    applyReason3: '数据查询与分析',
     applyReasonPlaceholder: '请尽可能详细描述申请理由',
     cancel: '取消',
     submit: '确定',
@@ -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

@@ -35,6 +35,7 @@ declare type LevelMapType = {
     [key in LevelType]: {
         color: string;
         text: string;
+		background: string;
     };
 };