@yqg/permission 1.3.0-alpha.0 → 1.3.0-alpha.10

package/package.json

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

package/src/App.vue

@@ -9,13 +9,12 @@ const color = ref<string>('#1677ff');
 const locale = ref<LocaleType>('zh-CN');
 
 const permissions = reactive([
-	'test222.testlyt2',
-	'test222.testplyt',
-	'test222.tstplyt3',
-	'test222.tstplyt4',
-	'test222.tstplyt5',
-	'test222.wjkwd13',
-	'test222.YEWEITEST.query01',
+	'CRANE.PERMISSION.QUERY',
+	'CRANE.EMPLOYEE.QUERY',
+	'CRANE.EMPLOYEE.DETAIL_QUERY',
+	'CRANE.EMPLOYEE.ATTRIBUTE_CREATE',
+	'CRANE.EMPLOYEE.ROLE_ASSIGN',
+	'CRANE.EMPLOYEE.DEPARTMENT_ROLE.ATTRIBUTE_ROLE_CREATE',
 ]);
 // const permissions = reactive(['CRANE.BUSINESS.QUERY', 'RANE.BUSINESS.CREATE', 'CRANE.BUSINESS.UPDATE', 'CRANE.BUSINESS.DELETE']);
 const changeColor = () => {
@@ -35,25 +34,15 @@ const changeLocale = () => {
 		<div class="case-card">
 			<div>1:默认组件</div>
 			<!-- 03541 -->
-			 <!-- 02124 -->
-			  <!-- 05184 -->
-			<yqg-permission
-			:permissions="permissions"
-			workNumber="05184"
-			:color="color"
-			:locale="locale"
-			@onSuccess="() => {console.log('成功')}"
-			>
+			<!-- 02124 -->
+			<!-- 05184 -->
+			<yqg-permission :permissions="permissions" workNumber="04697" :color="color" :locale="locale"
+				@onSuccess="() => {console.log('成功')}">
 			</yqg-permission>
 		</div>
 		<data class="case-card">
 			<div>2:文字组件</div>
-			<yqg-permission
-			:permissions="['ddd']"
-			:color="color"
-			workNumber="02124"
-			type="text"
-			>
+			<yqg-permission :permissions="permissions" :color="color" workNumber="04697" type="text">
 			</yqg-permission>
 		</data>
 

package/src/components/apply-modal.vue

@@ -9,8 +9,8 @@
 						{{t('noPermissionTips')}}
 					</span>
 
-					<Tree checkable :defaultExpandAll="true" :tree-data="permissionList" :height="200"
-						:checkedKeys="formState.features" class="crane-permission-tree" @check="onCheck">
+					<Tree checkable :default-expand-all="true" :tree-data="permissionList" :height="200" :expandedKeys="expandedKeys"
+						:checkedKeys="formState.features" class="crane-permission-tree" @check="onCheck" @expand="expandedKeys = $event">
 						<template #title="item: PermissionType">
 							<div v-if="item.children && item.children.length">
 								{{ item.shortName }}
@@ -69,6 +69,10 @@ import SuccessModal from './success-modal.vue';
 import ApprovalSteps from './approval-steps.vue';
 import t, {throttle, deepTree} from '../utils';
 import useCategory from '../hooks/useCategory';
+import useDefaultTime from '../hooks/useDefaultTime';
+
+const OWNER_STATUS = 'OWNER';
+const MAX_COUNT = 5;
 
 const CategorySelector = defineAsyncComponent(() =>
 	import('./category-selector.vue')
@@ -107,6 +111,7 @@ const categoryRef = ref();
 let stepNodes = ref([]);
 const categoryList = ref<CategoryType[]>([]);
 const validTimeOptions = ref([]);
+const expandedKeys = ref<any[]>([]);
 const formState = reactive<formStateType>({
 	features: [],
 	roleVoList: [],
@@ -154,7 +159,6 @@ const getParams = () => {
 		};
 		
 	});
-
 	deepTree(permissionList.value, (item: any) => {
 		if (!item.children && formState.features.includes(item.feature)) {
 			roleVoList.push({
@@ -179,6 +183,7 @@ const setDefaultTime = (permission: PermissionType) => {
 
 const onChangeTime = throttle(async () => {
 	const params = getParams();
+
 	if (params.roleVoList.length === 0) {
 		stepNodes.value = [];
 		return;
@@ -198,44 +203,59 @@ const onCheck = (checkedIds:any, info:any) => {
 		if (!item.children && formState.features.includes(item.feature)) {
 			curTotal += 1;
 		}
+		if (!item.children && !formState.features.includes(item.feature)) {
+			// 新选择的节点，设置默认时间
+			item.validTime = useDefaultTime(item, OWNER_STATUS);
+		}
 	})
 
-	if (curTotal === 5) {
-		message.warning(t('maxCountTips', {count: 5}));
+	if (curTotal > MAX_COUNT) {
+		message.warning(t('maxCountTips', { count: MAX_COUNT }));
 		return;
 	}
-	onChangeTime();
-	if (!info.node.children && total > 5) {
+	if (!info.node.children && total > MAX_COUNT) {
 		//选择的是子节点
 		formState.features = formState.features.filter((item) => item !== info.node.feature);
-		message.warning(t('maxCountTips', {count: 5}));
+		message.warning(t('maxCountTips', { count: MAX_COUNT }));
+		onChangeTime();
+		categoryList.value = useCategory(permissionList.value, formState.features);
 		return;
 	}
 
-	if (info.node.children && total > 5) {
+	if (info.node.children && total > MAX_COUNT) {
 		//选择的是父节点，则找出刚选的所有叶子节点， 并且删除其中多余(total-5)的节点
-		const diff = total - 5;
+		const diff = total - MAX_COUNT;
 		let leafNodes:string[] = [];
 		deepTree([info.node], (item: any) => {
-			if (!item.children && !formState.features.includes(item.feature)) {
+			if (!item.children && !item.disabled && !formState.features.includes(item.feature)) {
 				leafNodes.push(item.feature);
 			}
 		})
 		// 从后面删除多余的节点
 		leafNodes = leafNodes.slice(0, leafNodes.length - diff);
 		formState.features = formState.features.concat(leafNodes);
-		message.warning(t('maxCountTips', {count: 5}));
+		message.warning(t('maxCountTips', { count: MAX_COUNT }));
+		onChangeTime();
+		categoryList.value = useCategory(permissionList.value, formState.features);
 		return;
 	};
 
 	formState.features = checkedIds;
-
+	onChangeTime();
 	// 收集需要展示的数据属性
 	categoryList.value = useCategory(permissionList.value, formState.features);
-
 	// 预览审批流程
 }
 
+watch(() => props.permissionList, (cur) => {
+	expandedKeys.value = [];
+	deepTree(cur, (item: any) => {
+		if (item.children && item.children.length) {
+			expandedKeys.value.push(item.feature);
+		}
+	})
+})
+
 watch(() => open.value, (cur) => {
 	if (cur) {
 		formRef.value?.resetFields();

package/src/components/category-selector.vue

@@ -19,7 +19,7 @@
                     </template>
                 </TreeSelect>
                 <span v-if="item.attributeValueIds_view?.includes(-1)" style="color: #ff4d4f; font-size: 12px;">
-                    {{ t('categoryChangeTips') }}
+                    {{ t('categoryChangeTips', { category: item.categoryName }) }}
                 </span>
             </FormItem>
         </template>
@@ -55,7 +55,7 @@ const showForm = computed(() => {
 });
 const formRef = ref();
 const searchValue = ref('');
-const { categoryValuesMap } = useAttributesCache(props.categoryList);
+const { categoryValuesMap } = useAttributesCache(props);
 
 // 返回promise
 const validate = () => {

package/src/components/permission-item.vue

@@ -62,16 +62,16 @@
 				any) => {
 				return item.categoryName;
 				}).join('、')
-				}}325kjfhkjdhfkdshfkjdshglkjshdfgkjkjdhfkdshfkjdshglkjshdfgkjkjdhfkdshfkjdshglkjshdfgkjkjdhfkdshfkjdshglkjshdfgkjsfd
+				}}
 			</div>
 		</Popover>
 
 		<!-- 选择框 -->
 		<span v-if="checkedKeys.includes(item.feature)" class="crane-weak-color crane-margin-left-12">
 			{{ t('availableTime') }}：
-			<Select v-model:value="validTime" style="width: 100px"
-				:disabled="DISABLED_STATUS.includes(item.businessApplyType)"
-				:options="DISABLED_STATUS.includes(item.businessApplyType) ? validTimeOptions : tempTimeOptions"
+			<Select v-model:value="item.validTime" style="width: 100px"
+				:disabled="item.businessApplyType === OWNER_STATUS"
+				:options="item.businessApplyType === OWNER_STATUS ? validTimeOptions : tempTimeOptions"
 				@change="onChangeTimeHandler" size="small">
 			</Select>
 		</span>
@@ -79,7 +79,7 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { PropType, ref, watch, defineEmits, computed } from 'vue';
+import { PropType, defineEmits, computed } from 'vue';
 import { Tag, Popover, Select } from 'ant-design-vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import departmentImg from '@/assets/department.png';
@@ -87,8 +87,6 @@ import categoryImg from '@/assets/category.png';
 import t from '../utils';
 
 const OWNER_STATUS = 'OWNER';
-const PENDING_STATUS = 'PENDING';
-const DISABLED_STATUS = [OWNER_STATUS, PENDING_STATUS];
 
 const levelMap:LevelMapType = {
 	L1: {
@@ -127,7 +125,6 @@ let props = defineProps({
 });
 
 const statusMap = t('status');
-const validTime = ref('');
 
 const tempTimeOptions = computed(() => {
 	return props.validTimeOptions.filter((item: any) => {
@@ -136,42 +133,11 @@ const tempTimeOptions = computed(() => {
 });
 
 
-//1登录人所在部门 = 权限适用范围，都默认90天，不需要区分等级和类型，
-//2登录人所在部门 ≠ 权限适用范围，根据等级来，高（L3）默认给7天，中（L2）默认给30天，低（L1）默认给60天
-const setDefaultTime = (item: PermissionType) => {
-	if (OWNER_STATUS.includes(item.businessApplyType)) {
-		return item.virtualOwnState?.timeStatus
-	}
-	if (PENDING_STATUS.includes(item.businessApplyType)) {
-		return item.pendingValidTime
-	}
-	const validMap = {
-		L1: 'SIXTY_DAYS',
-		L2: 'THIRTY_DAYS',
-		L3: 'SEVEN_DAYS',
-	};
-	const { relatedDepartmentIds = [], curDepartmentId = 0, securityLevel } = item;
-	if (relatedDepartmentIds?.includes(curDepartmentId as number)) {
-			item.validTime = 'NINETY_DAYS';
-		} else {
-			item.validTime = validMap[securityLevel];
-		}
-	return item.validTime;
-};
-
 const getCategoryValue = (category: CategoryType) => {
 	return `【${category.categoryName}】：${category.attributeValues?.map((item: any) => item.attributeName)?.join('、') || t('empty')}`;
 };
-
-watch(() => props.checkedKeys, (newVal, oldVal) => {
-	if ((oldVal && !oldVal.includes(props.item.feature)) && newVal.includes(props.item.feature)) {
-		validTime.value = setDefaultTime(props.item);
-		props.item.validTime = setDefaultTime(props.item);
-		emit('updateTime', props.item);
-}}, { immediate: true });
 	
-const onChangeTimeHandler = (value:any) => {
-	props.item.validTime = value;
+const onChangeTimeHandler = () => {
 	emit('updateTime', props.item);
 	emit('onChangeTime', props.item);
 };

package/src/components/success-modal.vue

@@ -2,7 +2,7 @@
 	<contextHolder></contextHolder>
 </template>
 <script lang="ts" setup>
-  	import { createVNode } from 'vue';
+	import { createVNode } from 'vue';
 	import { CheckCircleFilled } from '@ant-design/icons-vue';
 	import { Modal } from 'ant-design-vue';
 	import t from '../utils';
@@ -53,8 +53,8 @@
 	defineExpose({countDown});
 
 </script>
-<style scoped>
-:deep(.yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns) {
+<style>
+.yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns {
 	text-align: center!important;
 }
 </style>

package/src/components/yqg-permission.vue

@@ -63,7 +63,7 @@
 		</div>
 
 		<ApplyModal v-model="open" :permissionList="permissionList" :spining="loading" :workNumber="workNumber"
-			:businessCode="businessCode" @onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions">
+			@onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions">
 		</ApplyModal>
 
 	</ConfigProvider>
@@ -144,13 +144,6 @@ import useFormat from '../hooks/useFormat';
 		return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
   	});
 
-	const businessCode = computed(() => {
-		const code = allPermissions.value[0] || '';
-		if (!code) return '';
-
-		return code.split('.')[0];
-	})
-
 	const goViewApproval = () => {
 		const url = curApproving.value?.oaFlowUrl;
 		if (!url) return;
@@ -162,14 +155,13 @@ import useFormat from '../hooks/useFormat';
 		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);
@@ -177,18 +169,21 @@ import useFormat from '../hooks/useFormat';
   	};
 
   	const showModal = () => {
-		getPermissions();
 		open.value = !open.value;
+		getPermissions();
   	};
 
 	const { currentTop, dragElement } = useDraggable(props, showModal);
 
-  	watchEffect(getPermissions);
-
+  	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})
+  	}, {immediate: true});
 </script>
 
 <style scoped>

package/src/hooks/useAttributesCache.ts

@@ -2,10 +2,10 @@ import { watch, reactive } from 'vue';
 import Http from '../axios/index';
 
 const categoryValuesMap = reactive<Record<number, []>>({});
-export default function useAttributesCache(categoryList: CategoryType[]) {
+export default function useAttributesCache(props: any) {
 
-    watch(() => categoryList, (newVal) => {
-        newVal.forEach(async (item) => {
+    watch(() => props.categoryList, (newVal) => {
+        newVal.forEach(async (item:CategoryType) => {
             if (!categoryValuesMap[item.id]) {
                 const res = await Http.getCategoryValues(item.id);
                 const { flatAttributeValue, treeAttributeValue, showWay } = res.body;
@@ -13,7 +13,7 @@ export default function useAttributesCache(categoryList: CategoryType[]) {
             }
         });
 
-    }, { immediate: true });
+    }, { immediate: true, deep: true });
 
     return {
         categoryValuesMap

package/src/hooks/useCategory.ts

@@ -5,7 +5,6 @@ export default function useCategory(tree: PermissionType[], checkedIds: string[]
     const categoryList: CategoryType[] = [];
     deepTree(tree, (item) => {
         if (!item.children && checkedIds.includes(item.feature)) {
-
             item.categoryVOS.forEach((category: any) => {
                 category.attributeValueIds_view = category?.attributeValueIds || [];  
                 categoryList.push(category);

package/src/hooks/useDefaultTime.ts

@@ -0,0 +1,20 @@
+
+//1登录人所在部门 = 权限适用范围，都默认90天，不需要区分等级和类型，
+//2登录人所在部门 ≠ 权限适用范围，根据等级来，高（L3）默认给7天，中（L2）默认给30天，低（L1）默认给60天
+export default function useDefaultTime (item: PermissionType, status:string):string  {
+    if (item.businessApplyType === status) {
+        return item.virtualOwnState?.timeStatus
+    }
+    const validMap = {
+        L1: 'SIXTY_DAYS',
+        L2: 'THIRTY_DAYS',
+        L3: 'SEVEN_DAYS',
+    };
+    const { relatedDepartmentIds = [], curDepartmentId = 0, securityLevel } = item;
+    if (relatedDepartmentIds?.includes(curDepartmentId as number)) {
+        item.validTime = 'NINETY_DAYS';
+    } else {
+        item.validTime = validMap[securityLevel];
+    }
+    return item.validTime;
+};

package/src/hooks/useFormat.ts

@@ -9,42 +9,48 @@ const StatusType = {
     TEMP_OWNER: 'TEMP_OWNER'
 }
 export default function useFormat(tree: PermissionListType) {
-    function sortTree(tree: PermissionListType, sortMap: Map<string | null, number>, levelSortMap: Map<string | null, number>) {
-        // 对当前层的节点进行排序
-        tree.sort((a, b) => {
-            return (sortMap.get(a.businessApplyType) ?? 0) - (sortMap.get(b.businessApplyType) ?? 0)
-                || (levelSortMap.get(a.securityLevel) ?? 0) - (levelSortMap.get(b.securityLevel) ?? 0);
-        });
-
-        // 递归对每个节点的子节点进行排序
-        tree.forEach(node => {
+    function sortTree(
+        tree: PermissionListType,
+        sortMap: Map<string | null, number>,
+        levelSortMap: Map<string | null, number>
+    ) {
+        return tree.map((node) => {
             node.key = node.feature;
-            node.desc = 'ddddd'
-            if (!node.children) {
+
+            if (!node.children || node.children.length === 0) {
                 node.categoryVOS = (node.categoryVOS || []).filter((item: any) => item.configWay !== Category.AUTO);
 
-                if ([StatusType.NO].includes(node.businessApplyType)) {
+                if ([StatusType.NO, StatusType.PENDING].includes(node.businessApplyType)) {
                     node.disabled = true;
                 }
 
-                if ([StatusType.OWNER, StatusType.PENDING].includes(node.businessApplyType) && !node.categoryVOS.length) {
+                if ([StatusType.OWNER].includes(node.businessApplyType) && !node.categoryVOS.length) {
+                    node.disabled = true;
+                }
+            } else {
+                // 递归对子节点进行排序
+                node.children = sortTree(node.children, sortMap, levelSortMap);
+
+                // 检查所有子节点是否 `disabled === true`
+                if (node.children.every((child) => child.disabled)) {
                     node.disabled = true;
                 }
             }
-            if (node.children && node.children.length > 0) {
-                sortTree(node.children, sortMap, levelSortMap);
-            }
-        });
 
-        return tree;
+            return node;
+        }).sort((a, b) => {
+            return (sortMap.get(a.businessApplyType) ?? 0) - (sortMap.get(b.businessApplyType) ?? 0)
+                || (levelSortMap.get(a.securityLevel) ?? 0) - (levelSortMap.get(b.securityLevel) ?? 0);
+        });
     }
 
     // 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
     // 然后再根据 L1, L2, L3 排序
     const sort = [null, StatusType.TEMP_OWNER, StatusType.PENDING, StatusType.OWNER, StatusType.NO];
-    const levelSort = [null, 'L1', 'L2', 'L3'];
+    const levelSort = [null, "L1", "L2", "L3"];
     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);
-};
+}
+

package/src/i18n/zh-CH.ts

@@ -36,8 +36,8 @@ export default {
     categoryTips: '当前您所拥有的数据范围如下：',
     empty: '空',
     category: '数据权限',
-    categotySelectTips: '上方选中的权限包含数据权限，请根据实际工作需要申请/更改数据范围',
-    categoryChangeTips: '提醒：您选择的数据权限范围较大！请确认实际工作场景是否需要全量「部门」权限，并在申请理由中写明，避免审批不通过！',
+    categotySelectTips: '上方选中的权限包含数据权限，请根据实际工作需要申请/更改数据范围。',
+    categoryChangeTips: '提醒：您选择的数据权限范围较大！请确认实际工作场景是否需要全量「{category}」权限，并在申请理由中写明，避免审批不通过！',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',

package/src/utils/index.ts

@@ -4,8 +4,8 @@ type optionsType = {
     [key: string]: any;
 };
 const t = (key: string, options?: optionsType) => {
-    // key的格式为：'xxx.xxx.xxx'
-    const en = localStorage.getItem('permission_locale') || 'en-US';
+    // key的格式为：'xxx.xxx.xxx'//国际化todo
+	const en = localStorage.getItem('permission_locale') || 'zh-CN';
     const keys = key.split('.');
     let result = language[en as string] || language['en-US'];
     for (let i = 0; i < keys.length; i++) {

package/src/yqg-permission/index.ts

@@ -36,7 +36,6 @@ class YqgPermission implements YqgPermissionType {
             return;
         }
         if (this.hasInit) {
-            console.warn('yqg-permission has already been initialized');
             return;
         }
 

package/tsconfig.app.json

@@ -25,8 +25,9 @@
 		"src/**/*.ts",
 		"src/**/*.d.ts",
 		"src/**/*.tsx",
-		"src/**/*.vue"
-	 ],
+		"src/**/*.vue", 
+        "src/i18n/zh-CH.js"	
+    ],
 	"exclude": [
 	    "node_modules",
 	    "vite.config.ts"  // 如果不需要解析 vite.config.ts