@yqg/permission 1.0.9-beta.0 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yqg/permission",
-    "version": "1.0.9-beta.0",
+    "version": "1.0.10",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "type": "module",
@@ -13,23 +13,22 @@
         "dev": "vite",
         "preview": "vite preview"
     },
-    "dependencies": {
+    "devDependencies": {
         "@ant-design/icons-vue": "^7.0.1",
         "@commitlint/cli": "^19.5.0",
         "@commitlint/config-conventional": "^19.5.0",
-        "ant-design-vue": "4.x",
-        "axios": "^1.7.7",
-        "vite-plugin-css-injected-by-js": "^3.5.2",
-        "vue": "^3.5.12"
-    },
-    "devDependencies": {
+        "@types/vue": "^2.0.0",
         "@typescript-eslint/parser": "^8.13.0",
         "@vitejs/plugin-vue": "^5.1.4",
+        "ant-design-vue": "4.x",
+        "axios": "^1.7.7",
         "eslint": "^9.14.0",
         "husky": "^9",
         "lint-staged": "^13.2.0",
         "typescript": "~5.5.4",
         "vite": "^5.4.9",
+        "vite-plugin-css-injected-by-js": "^3.5.2",
+        "vue": "^3.5.12",
         "vue-tsc": "^2.1.8"
     }
 }

package/src/App.vue

@@ -8,14 +8,16 @@ type LocaleType = 'zh-CN' | 'en-US' | 'id-ID' | 'fil-PH';
 const color = ref<string>('#1677ff');
 const locale = ref<LocaleType>('zh-CN');
 
-const permissions = reactive(['CRANE.ROLE.QUERY',
-                'CRANE.ROLE.CREATE',
-                'CRANE.ROLE.UPDATE',
-                'CRANE.ROLE.DELETE',
-                'CRANE.ROLE.PERMISSION_ASSIGN',
-                'CRANE.ROLE.EMPLOYEE_ASSIGN',
-                'CRANE.ROLE.DETAIL_QUERY',
-                'CRANE.ROLE.EXPORT']);
+const permissions = reactive([
+	'CRANE.ROLE.QUERY',
+    'CRANE.ROLE.CREATE',
+    'CRANE.ROLE.UPDATE',
+    'CRANE.ROLE.DELETE',
+    'CRANE.ROLE.PERMISSION_ASSIGN',
+    'CRANE.ROLE.EMPLOYEE_ASSIGN',
+    'CRANE.ROLE.DETAIL_QUERY',
+    'CRANE.ROLE.EXPORT'
+]);
 // const permissions = reactive(['CRANE.BUSINESS.QUERY', 'RANE.BUSINESS.CREATE', 'CRANE.BUSINESS.UPDATE', 'CRANE.BUSINESS.DELETE']);
 const changeColor = () => {
 	color.value = color.value === '#f00' ? '#1677ff' : '#f00';
@@ -38,7 +40,7 @@ const changeLocale = () => {
 			  <!-- 05184 -->
 			<yqg-permission 
 			:permissions="permissions"
-			workNumber="05181"
+			workNumber="05184"
 			businessCode="CRANE"
 			:color="color"
 			:locale="locale"

package/src/axios/index.ts

@@ -1,6 +1,6 @@
 import axios from './axios';
 
-const urlPrefix = '/admin/crane';
+const urlPrefix = '/crane';
 
 type apiType = {
 	[key in string]: (params: any) => Promise<{body: any}>

package/src/components/apply-modal.vue

@@ -172,7 +172,7 @@
   	}
 
   	const onChangeHandler = throttle(async () => {
-		if (formState.roleIds.length > 1) {
+		if (formState.roleIds.length > 5) {
 			return;
 		}
 
@@ -188,7 +188,7 @@
 
 	watch(() => formState.roleIds, (val) => {
 		// 写到watch里避免闪烁
-		if (val.length > 1) {
+		if (val.length > 5) {
 			formState.roleIds.pop();
 			message.warning(t('maxCountTips', {count: 5}));
 		}

package/src/components/checkbox-item.vue

@@ -17,7 +17,7 @@
 				</span>
 				<Popover>
 					<template #content>
-						{{ item.name }}
+						<div style="max-width: 400px;">{{ item.name }}</div>
 					</template>
 					<span class="crane-text-overflow">{{ item.name }}</span>
 				</Popover>
@@ -47,16 +47,18 @@
 
 		<Popover v-if="item.desc">
 			<template #content>
-				{{ item.desc }}
+				<div style="max-width: 400px;">{{ item.desc }}</div>
 			</template>
 			<QuestionCircleOutlined class=" crane-week-color"/>
 		</Popover>
 
 		<Popover v-if="item.relatedDepartments">
 			<template #content>
-				{{t('adaptDepartment')}}：{{ item.relatedDepartments.map((item: any) => {
+				<div  style="max-width: 400px;">
+					{{t('adaptDepartment')}}：{{ item.relatedDepartments.map((item: any) => {
 					return item.name;
 				}).join('、') }}
+				</div>
 			</template>
 			<span class="crane-flex-center crane-margin-left-4">
 				<img :src="departmentImg" height="14" width="14">

package/src/components/success-modal.vue

@@ -21,17 +21,17 @@
 			onOk: () => {
 				window.open(url);
 				modal1.destroy();
-				if (callback) {
-					callback();
-				} else {
+				callback && callback();
+				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
 					location.reload();
 				}
 			},
 			onCancel: () => {
 				modal1.destroy();
-				if (callback) {
-					callback();
-				} else {
+				callback && callback();
+				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
 					location.reload();
 				}
 			},

package/src/components/yqg-permission.vue

@@ -1,24 +1,25 @@
 <template>
 	<ConfigProvider
-	v-if="allPermissions.length"
-	prefixCls="yqg-permission"
-	:theme="{
-      	token: {
-        	colorPrimary: props.color,
-      	}}">
+		v-if="allPermissions.length"
+		prefixCls="yqg-permission"
+		:theme="{
+      		token: {
+        		colorPrimary: props.color,
+      		}
+		}"
+	>
 		<div class="crane-wraper">
 			<template v-if="type==='text'">
 				<TypographyLink @click="showModal">{{t('permissionApply')}}</TypographyLink>
 			</template>
 			<template v-else-if="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 +33,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 +53,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" 
@@ -84,19 +85,24 @@
 </template>
 <script lang="ts" setup>
 	import { ref, defineAsyncComponent, computed, watchEffect, watch} from 'vue';
-	import {Button, ConfigProvider, TypographyLink, Popover } from 'ant-design-vue';
+	import { Button, ConfigProvider, TypographyLink, Popover , message} from 'ant-design-vue';
 	import applyUrl from '@/assets/applying.png';
 	import noauthority from '@/assets/noauthority.png';
 	import Http from '../axios/index';
 	import t from '../utils';
-  	const ApplyModal = defineAsyncComponent(() =>
-		import('./apply-modal.vue')
-	);
-	const statusMap = {
+
+	const STATUS_MAP = {
 		DEFAULT: 'DEFAULT',
 		PENDING: 'PENDING',
 		NO: 'NO',
-	}
+	} as const;
+
+	// 重置 message 类名，避免被全局样式覆盖
+	message.config({prefixCls: 'yqg-permission-message'});
+
+  	const ApplyModal = defineAsyncComponent(() =>import('./apply-modal.vue'));
+
+	const emit = defineEmits(['onSuccess']);
 
 	const props = defineProps({
 		workNumber: {
@@ -124,7 +130,6 @@
 	  		default: 'default'
 		},
 	});
-	const emit = defineEmits(['onSuccess']);
 
   	const open = ref(false);
 	const curApproving = ref<PermissionType>();
@@ -133,12 +138,13 @@
 		imageUrl: noauthority,
 		status: '',
   	})
+
   	const allPermissions = computed(() => {
 		if (Array.isArray(props.permissions)) {
 	  		return props.permissions;
-		} else {
-	  		return props.permissions.split(',');
 		}
+
+		return props.permissions.split(',');
   	});
 
   	const formatPermissionsData = (data: PermissionListType) => {
@@ -153,13 +159,19 @@
 			})
 		};
 		flattenData(data);
+
 		// 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
 		// 然后再根据 L1, L2, L3 排序
 		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 +179,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,38 +199,44 @@
 	  	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 = () => {
-		console.log(curApproving.value)
-		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 { businessCode, workNumber } = props;
+		const permissions = allPermissions.value;
+
+		if (!permissions?.length || !businessCode || !workNumber) return;
 
 		const params = {
-			businessCode: props.businessCode,
-			features: allPermissions.value.toString(),
-			workNumber: props.workNumber,
+			businessCode,
+			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;
   	};
 
@@ -226,8 +246,8 @@
 		if (cur === pre) return;
 		localStorage.setItem('permission_locale', props.locale);
   	}, {immediate: true})
-
 </script>
+
 <style scoped>
   	.crane-wraper {
 		display: flex;

package/src/i18n/en-US.ts

@@ -4,7 +4,7 @@ export default {
     applyReason: '申请理由',
     approvalProcess: '审批流程',
     applyReason1: '新入职员工申请',
-    applyReason2: '临时项目',
+    applyReason2: '项目需要',
     applyReason3: '数据查询与分析',
     applyReasonPlaceholder: '请尽可能详细描述申请理由',
     cancel: '取消',
@@ -20,7 +20,7 @@ export default {
     adaptDepartment: '适用部门',
 	noApprovalProcess: '无审批流程',
     excessTips: '一次最多可申请{number}个权限',
-    unavailableTips: '您暂无权限查看/操作该页面，请点击按钮进行申请',
+    unavailableTips: '您暂无权限查看/操作该页面，请点击下方按钮进行申请',
     appliedTips: '权限已申请，正在{status}...',
     unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
 	callManager: '如有需要请联系系统管理员',

package/src/i18n/zh-CH.ts

@@ -4,7 +4,7 @@ export default {
     applyReason: '申请理由',
     approvalProcess: '审批流程',
     applyReason1: '新入职员工申请',
-    applyReason2: '临时项目',
+    applyReason2: '项目需要',
     applyReason3: '数据查询与分析',
     applyReasonPlaceholder: '请尽可能详细描述申请理由',
     cancel: '取消',
@@ -20,7 +20,7 @@ export default {
     adaptDepartment: '适用部门',
 	noApprovalProcess: '无审批流程',
     excessTips: '一次最多可申请{number}个权限',
-    unavailableTips: '您暂无权限查看/操作该页面，请点击按钮进行申请',
+    unavailableTips: '您暂无权限查看/操作该页面，请点击下方按钮进行申请',
     appliedTips: '权限已申请，正在{status}...',
     unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
 	callManager: '如有需要请联系系统管理员',

package/src/typings/index.d.ts

@@ -53,3 +53,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,
             },