@yqg/permission 1.3.0 → 1.3.1-1.bate.1

package/src/components/permission-item.vue

@@ -19,10 +19,10 @@
 			:class="['PENDING'].includes(item.businessApplyType) ? '' : 'crane-disabled-color'">
 			{{ statusMap[item.businessApplyType] }}
 			{{ item.businessApplyType === 'TEMP_OWNER' ? `(${(item?.ownStatusVO?.dayDiff > 0 ?
-			t('lastDays', {
-			count:
-			item?.ownStatusVO?.dayDiff
-			}) : t('today'))})` : ''}}
+				t('lastDays', {
+					count:
+						item?.ownStatusVO?.dayDiff
+				}) : t('today'))})` : '' }}
 		</Tag>
 
 		<Popover v-if="item.desc">
@@ -34,16 +34,17 @@
 
 		<Popover v-if="item.relatedCompleteNames?.length">
 			<template #content>
-				<div style="max-width: 400px;">
-					{{ t('adaptDepartment') }}：{{item.relatedCompleteNames.map((item: any) => {
-					return item;
-					}).join('、') }}
+				<div class="crane-department-wraper">
+					<div>
+						{{ t('adaptDepartment') }}：
+					</div>
+					<div v-for="item in item.relatedCompleteNames">{{ item }}</div>
 				</div>
 			</template>
 			<div class="crane-flex-center crane-margin-left-4">
 				<img :src="departmentImg" height="14" width="14">
 				<span class="crane-weak-color crane-margin-left-4">{{ item.relatedCompleteNames.length
-					}}</span>
+				}}</span>
 			</div>
 		</Popover>
 
@@ -59,15 +60,15 @@
 			</template>
 			<div class="crane-weak-color crane-margin-left-4 crane-text-overflow">
 				{{item.categoryVOS?.map((item:
-				any) => {
-				return item.categoryName;
+					any) => {
+					return item.categoryName;
 				}).join('、')
 				}}
 			</div>
 		</Popover>
 
 		<!-- 选择框 -->
-		<span v-if="checkedKeys.includes(item.feature)" class="crane-weak-color crane-margin-left-12">
+		<span v-if="checkedKeys.includes(item.feature) && !item.disabled" class="crane-weak-color crane-margin-left-12">
 			{{ t('availableTime') }}：
 			<Select v-model:value="item.validTime" style="width: 100px"
 				:disabled="item.businessApplyType === OWNER_STATUS"
@@ -88,7 +89,7 @@ import t from '../utils';
 
 const OWNER_STATUS = 'OWNER';
 
-const levelMap:LevelMapType = {
+const levelMap: LevelMapType = {
 	L1: {
 		color: '#1AA83B',
 		text: t('levels.L1'),
@@ -120,7 +121,7 @@ let props = defineProps({
 	},
 	item: {
 		type: Object as PropType<PermissionType>,
-		default: () => {}
+		default: () => { }
 	}
 });
 
@@ -136,7 +137,7 @@ const tempTimeOptions = computed(() => {
 const getCategoryValue = (category: CategoryType) => {
 	return `【${category.categoryName}】：${category.attributeValues?.map((item: any) => item.attributeName)?.join('、') || t('empty')}`;
 };
-	
+
 const onChangeTimeHandler = () => {
 	emit('updateTime', props.item);
 	emit('onChangeTime', props.item);
@@ -145,15 +146,21 @@ const onChangeTimeHandler = () => {
 
 </script>
 <style scoped>
+.crane-department-wraper {
+	max-width: 600px;
+	max-height: 300px;
+	overflow-y: scroll;
+}
 .crane-flex-center {
 	display: flex;
 	align-items: center;
 	white-space: nowrap;
- }
+}
 
- .permission-item-wraper {
+.permission-item-wraper {
 	padding-right: 32px;
- }
+}
+
 .crane-checkbox-line {
 	line-height: 28px;
 	display: flex;
@@ -166,31 +173,36 @@ const onChangeTimeHandler = () => {
 	padding: 2px 4px;
 	line-height: 12px;
 	font-weight: 500;
- }
- .crane-margin-right-0 {
+}
+
+.crane-margin-right-0 {
 	margin-right: 0;
- }
- .crane-margin-left-4 {
+}
+
+.crane-margin-left-4 {
 	margin-left: 4px;
- }
- .crane-margin-right-4 {
+}
+
+.crane-margin-right-4 {
 	margin-right: 4px;
- }
- .crane-margin-left-12 {
+}
+
+.crane-margin-left-12 {
 	margin-left: 12px;
- }
- .crane-disabled-color {
+}
+
+.crane-disabled-color {
 	color: #C9CDD4;
- }
- .crane-weak-color {
+}
+
+.crane-weak-color {
 	color: #86909C;
- }
- .crane-text-overflow {
+}
+
+.crane-text-overflow {
 	max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
+	overflow: hidden;
+	text-overflow: ellipsis;
 	white-space: nowrap;
- }
- 
- 
+}
 </style>

package/src/components/success-modal.vue

@@ -2,59 +2,59 @@
 	<contextHolder></contextHolder>
 </template>
 <script lang="ts" setup>
-	import { createVNode } from 'vue';
-	import { CheckCircleFilled } from '@ant-design/icons-vue';
-	import { Modal } from 'ant-design-vue';
-	import t from '../utils';
+import { createVNode } from 'vue';
+import { CheckCircleFilled } from '@ant-design/icons-vue';
+import { Modal } from 'ant-design-vue';
+import t from '../utils';
 
-	const [modal, contextHolder] = Modal.useModal();
+const [modal, contextHolder] = Modal.useModal();
 
-	const countDown = (url: string, callback?: ()=>void) => {
-	 	let secondsToGo = 10;
-	  	const modal1 = modal.confirm({
-	    	title: t('resoultTitle'),
-	    	content: t('successTips'),
-			cancelText: `${t('close')}(${secondsToGo}s)`,
-			okText:`${t('viewApprovalDetail')}>>`,
-			wrapClassName: 'yqg-permission-modal-wrap',
-			icon: createVNode(CheckCircleFilled, {style: 'color: #52c41a;'}),
-			onOk: () => {
-				window.open(url);
-				modal1.destroy();
-				callback && callback();
-				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
-				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
-					location.reload();
-				}
-			},
-			onCancel: () => {
-				modal1.destroy();
-				callback && callback();
-				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
-				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
-					location.reload();
-				}
-			},
-	  	});
+const countDown = (url: string, callback?: () => void) => {
+	let secondsToGo = 10;
+	const modal1 = modal.confirm({
+		title: t('resoultTitle'),
+		content: t('successTips'),
+		cancelText: `${t('close')}(${secondsToGo}s)`,
+		okText: `${t('viewApprovalDetail')}>>`,
+		wrapClassName: 'yqg-permission-modal-wrap',
+		icon: createVNode(CheckCircleFilled, { style: 'color: #52c41a;' }),
+		onOk: () => {
+			window.open(url);
+			modal1.destroy();
+			callback && callback();
+			window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+			if (!window.YQG_PERMISSION_CALLBACK && !callback) {
+				location.reload();
+			}
+		},
+		onCancel: () => {
+			modal1.destroy();
+			callback && callback();
+			window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+			if (!window.YQG_PERMISSION_CALLBACK && !callback) {
+				location.reload();
+			}
+		},
+	});
 
-	  	const interval = setInterval(() => {
-	    	secondsToGo -= 1;
-	    	modal1.update({
-				cancelText: `${t('close')}(${secondsToGo}s)`,
-	    	});
-	  	}, 1000);
+	const interval = setInterval(() => {
+		secondsToGo -= 1;
+		modal1.update({
+			cancelText: `${t('close')}(${secondsToGo}s)`,
+		});
+	}, 1000);
 
-	  	setTimeout(() => {
-	    	clearInterval(interval);
-	    	modal1.destroy();
-	  	}, secondsToGo * 1000);
-	}
+	setTimeout(() => {
+		clearInterval(interval);
+		modal1.destroy();
+	}, secondsToGo * 1000);
+}
 
-	defineExpose({countDown});
+defineExpose({ countDown });
 
 </script>
 <style>
 .yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns {
-	text-align: center!important;
+	text-align: center !important;
 }
 </style>

package/src/components/yqg-permission.vue

@@ -1,21 +1,21 @@
 <template>
-	<ConfigProvider prefixCls="yqg-permission" :theme="{
-      		token: {
-        		colorPrimary: props.color,
-      		}
-		}">
-		<div class="crane-wraper">
+	<ConfigProvider prefixCls="yqg-permission" :key="locale" :theme="{
+		token: {
+			colorPrimary: color,
+		}
+	}">
+		<div class="crane-wraper" :key="locale">
 			<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,
-					}">
+					right: RIGHT_DEFAULT,
+					top: currentTop,
+				}">
 					<template #icon>
 						<img :src="applyIconUrl" height="20" width="20" />
 					</template>
 				</FloatButton>
 			</template>
-			<template v-else-if="type===COM_TYPE.CUSTOM">
+			<template v-else-if="type === COM_TYPE.CUSTOM">
 				<div @click="showModal">
 					<slot name="custom" />
 				</div>
@@ -28,7 +28,7 @@
 						{{ t('unavailableTips') }}
 					</div>
 					<div>
-						<Button type="primary" @click="showModal">+ {{t('applyPermission')}}</Button>
+						<Button type="primary" @click="showModal">+ {{ t('applyPermission') }}</Button>
 					</div>
 				</template>
 				<!-- 审批中 -->
@@ -36,14 +36,14 @@
 					<img :src="curStatus.imageUrl" height="200" width="200" style="margin-top: calc(50vh - 273px)" />
 					<div class="crane-margin10">
 						<span class="crane-unapply" v-html="t('appliedTips', {
-								status: `<style>.crane-unapply span {color: orange;}</style><span>${curStatus.tips}</span>`
-							})">
+							status: `<style>.crane-unapply span {color: orange;}</style><span>${curStatus.tips}</span>`
+						})">
 						</span>
 					</div>
 					<div>
-						<Button class="crane-margin-right10"
-							@click="goViewApproval">{{t('viewApprovalDetail')}}</Button>
-						<Button type="primary" @click="showModal">+ {{t('applyMore')}}</Button>
+						<Button class="crane-margin-right10" @click="goViewApproval">{{ t('viewApprovalDetail')
+							}}</Button>
+						<Button type="primary" @click="showModal">+ {{ t('applyMore') }}</Button>
 					</div>
 				</template>
 				<!-- 不可申请 -->
@@ -53,9 +53,9 @@
 						{{ t('unapplyTips') }}
 						<Popover>
 							<template #content>
-								<div style="max-width: 400px;">{{t('manager')}}: {{ curStatus.tips }}</div>
+								<div style="max-width: 400px;">{{ t('manager') }}: {{ curStatus.tips }}</div>
 							</template>
-							<span style="color: #1677ff;">{{t('callManager') }}</span>
+							<span style="color: #1677ff;">{{ t('callManager') }}</span>
 						</Popover>
 					</div>
 				</div>
@@ -63,142 +63,167 @@
 		</div>
 
 		<ApplyModal v-model="open" :permissionList="permissionList" :spining="loading" :workNumber="workNumber"
-			@onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions">
+			:zIndex="zIndex" :defaultCheckedIds="defaultCheckedIds" :isAllChecked="isAllChecked"
+			@onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions" :color="color">
 		</ApplyModal>
-
 	</ConfigProvider>
+
 </template>
 <script lang="ts" setup>
-	import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
-	import { Button, ConfigProvider, Popover , message, FloatButton} from 'ant-design-vue';
-	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';
-	import useStatus from '../hooks/useStatus';
+import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
+import { Button, ConfigProvider, Popover, message, FloatButton } from 'ant-design-vue';
+import applyIconUrl from '@/assets/applyicon.png';
+import noauthority from '@/assets/noauthority.png';
+import Http from '../axios/index';
+import t, { setLocale } from '../utils';
+import useDraggable from '../hooks/useDragable';
+import useStatus from '../hooks/useStatus';
 import useFormat from '../hooks/useFormat';
+import '../style/reset.css';
 
-	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: {
-	  		type: String,
-	  		default: ''
-		},
-		permissions: {
-			type: [String, Array<String>],
-	  		default: []
-  		},
-		locale: {
-	  		type: String,
-	  		default: 'zh-CN'
-		},
-		color: {
-	  		type: String,
-	  		default: '#1677ff'
-		},
-		type: {
-	  		type: String,
-	  		default: 'default'
-		},
-		top: {
-			type: String,
-			default: '100px'
-		}
-	});
-	
-  	const open = ref(false);
-	const curApproving = ref<PermissionType>();
-	const loading = ref(false);
-  	let permissionList = ref<PermissionListType>([]);
-  	let curStatus = ref<Record<string, any>>({
-		imageUrl: noauthority,
-		status: '',
-  	})
-	
-  	const allPermissions = computed(() => {
-		permissionList.value = [];
-		if (Array.isArray(props.permissions)) {
-	  		return props.permissions.filter((item) => item.trim());
-		}
-		return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
-  	});
-
-	const goViewApproval = () => {
-		const url = curApproving.value?.oaFlowUrl;
-		if (!url) return;
-		
-		window.open(url, '_blank');
+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: {
+		type: String,
+		default: ''
+	},
+	permissions: {
+		type: [String, Array<String>],
+		default: []
+	},
+	locale: {
+		type: String,
+		default: 'zh'
+	},
+	color: {
+		type: String,
+		default: '#1677ff'
+	},
+	type: {
+		type: String,
+		default: 'default'
+	},
+	top: {
+		type: String,
+		default: '100px'
+	},
+	zIndex: {
+		type: Number,
+		default: 10000
+	},
+	// 某些业务场景需要在特定页面隐藏某些数据维度
+	omitCategoryIds: {
+		type: [String, Array<number>],
+		required: false,
+		default: () => []
+	},
+});
+
+const open = ref(false);
+const curApproving = ref<PermissionType>();
+const loading = ref(false);
+const defaultCheckedIds = ref<string[]>([]);
+const isAllChecked = ref(false);
+let permissionList = ref<PermissionListType>([]);
+let curStatus = ref<Record<string, any>>({
+	imageUrl: noauthority,
+	status: '',
+})
+
+const needOmitCategoryIds = computed(() => {
+  if (Array.isArray(props.omitCategoryIds)) {
+    return props.omitCategoryIds;
+  }
+  return props.omitCategoryIds?.split(',')?.map((item) => Number(item)) || [];
+}); 
+
+const allPermissions = computed(() => {
+	permissionList.value = [];
+	if (Array.isArray(props.permissions)) {
+		return props.permissions.filter((item) => item.trim());
+	}
+	return props.permissions?.split(',')?.filter((item) => item.trim()) || [];
+});
+
+const goViewApproval = () => {
+	const url = curApproving.value?.oaFlowUrl;
+	if (!url) return;
+
+	window.open(url, '_blank');
+};
+
+const getPermissions = async () => {
+	const { workNumber } = props;
+	const permissions = allPermissions.value;
+	if (!permissions?.length || !workNumber) return;
+
+	const params = {
+		workNumber,
+		features: permissions.toString(),
 	};
 
-  	const getPermissions = async () => {
-		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);
-		loading.value = false;
-  	};
-
-  	const showModal = () => {
-		open.value = !open.value;
-		getPermissions();
-  	};
+	loading.value = true;
+	const res = await Http.getPermissions(params);
+	const datalist = useFormat(res.body || [], needOmitCategoryIds.value);
+	permissionList.value = datalist.data;
+	defaultCheckedIds.value = datalist.checkList;
+	isAllChecked.value = datalist.isAllChecked;
+	curStatus.value = useStatus(permissionList.value, curApproving);
+	loading.value = false;
+};
 
-	const { currentTop, dragElement } = useDraggable(props, showModal);
+const showModal = () => {
+	open.value = !open.value;
+	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});
+const { currentTop, dragElement } = useDraggable(props, showModal);
+
+watchEffect(() => {
+	if (props.type === COM_TYPE.DEFAULT) {
+		getPermissions();
+	}
+});
+watch(() => props.locale, (cur, pre) => {
+	if (cur === pre) return;
+	setLocale(cur);
+}, { immediate: true });
 </script>
 
 <style scoped>
-  	.crane-wraper {
-		display: flex;
-    	align-items: center;
-    	flex-direction: column;
-		font-size: 14px;
-		white-space: nowrap;
-  	}
-	.crane-margin10 {
-		margin: 10px;
-	}
-	.crane-margin-right10 {
-		margin-right: 10px;
-	}
-</style>
- ../hooks/useSort../hooks/useFormat
+.crane-wraper {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	font-size: 14px;
+	white-space: nowrap;
+}
+
+.crane-margin10 {
+	margin: 10px;
+}
+
+.crane-margin-right10 {
+	margin-right: 10px;
+}
+</style>

package/src/hooks/useCategory.ts

@@ -5,7 +5,7 @@ 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) => {
+            item.categoryVOS?.forEach((category: any) => {
                 category.attributeValueIds_view = category?.attributeValueIds || [];  
                 categoryList.push(category);
             });