@yqg/permission 1.3.0 → 1.3.1-alpha.0

package/package.json

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

package/src/axios/index.ts

@@ -2,6 +2,8 @@ import axios from './axios';
 
 const urlPrefix = '/crane';
 
+export const controller = new AbortController();
+
 type apiType = {
 	[key in string]: (params?: any) => Promise<{body: any}>
 }
@@ -9,7 +11,9 @@ type apiType = {
 export default {
     getPermissions: (params: any) => axios.get(`${urlPrefix}/permission/apply`, {params}),
 
-	getFlowPreview: (params: any)=> axios.post(`${urlPrefix}/permission/apply/oa/flow/submit/preview`, params),
+	getFlowPreview: (params: any) => axios.post(`${urlPrefix}/permission/apply/oa/flow/submit/preview`, params, {
+		signal: controller.signal // 关键配置
+	}),
 
 	submitApply: (params: any) => axios.post(`${urlPrefix}/permission/apply/oa/flow/submit`, params),
 

package/src/components/apply-modal.vue

@@ -1,16 +1,24 @@
 <template>
-	<Modal v-model:open="open" :title="t('permissionApply')" width="1100px" @ok="handleOk" :okText="t('submit')"
-		:maskClosable="false" :ok-button-props="{ loading: loading }" :cancelText="t('cancel')">
+	<Modal v-model:open="open" width="1100px" :maskClosable="false">
+		<template #footer>
+			<Button @click="open = false" v-show="!isAllOwn">{{ t('cancel') }}</Button>
+			<Button type="primary" @click="handleOk" :loading="loading">{{ t('submit') }}</Button>
+		</template>
+		<template #title>
+			<span>{{ t('permissionApply') }}</span>
+			<span v-show="isAllOwn" class="crane-permission-title-tips">{{ t('isAllOwnTips') }}</span>
+		</template>
 		<Form ref="formRef" :model="formState" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
 			<FormItem :label="t('applyPermission')" name="features"
-				:rules="[{ required: true, message: t('selectPlaceholder')}]">
+				:rules="[{ required: true, message: t('selectPlaceholder') }]">
 				<Spin :spinning="spining">
 					<span v-if="!permissionList.length">
-						{{t('noPermissionTips')}}
+						{{ t('noPermissionTips') }}
 					</span>
 
-					<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">
+					<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 }}
@@ -23,16 +31,16 @@
 					<CategorySelector v-if="categoryList.length" :categoryList="categoryList" ref="categoryRef" />
 				</Spin>
 			</FormItem>
-			<FormItem name="applyReason" :label="t('applyReason')" :rules="[{ 
-		required: true, message: t('reasonPlaceholder'), trigger: ['change']
-	}, {
-		max: 300, message: t('maxLengthTips', {length: 300}), trigger: ['change', 'blur']
-	}]">
+			<FormItem name="applyReason" :label="t('applyReason')" :rules="[{
+				required: true, message: t('reasonPlaceholder'), trigger: ['change']
+			}, {
+				max: 300, message: t('maxLengthTips', { length: 300 }), trigger: ['change', 'blur']
+			}]">
 				<Textarea v-model:value.trim="formState.applyReason" :placeholder="t('applyReasonPlaceholder')"
-					:auto-size="{ minRows: 4, maxRows: 4 }">
-		</Textarea>
+					:auto-size="{ minRows: 4, maxRows: 4 }" :disabled="isAllOwn">
+	</Textarea>
 				<span class="reason-tips" style="font-size: 12px">
-					{{t('applyReasonTips')}}
+					{{ t('applyReasonTips') }}
 				</span>
 			</FormItem>
 
@@ -46,11 +54,11 @@
 	</Modal>
 </template>
 <script lang="ts" setup>
-import { 
-	reactive, 
-	defineAsyncComponent, 
-	toRef, 
-	ref, 
+import {
+	reactive,
+	defineAsyncComponent,
+	toRef,
+	ref,
 	watch,
 	PropType,
 	computed
@@ -63,11 +71,12 @@ import {
 	Textarea,
 	message,
 	Tree,
-	Spin
+	Spin,
+	Button
 } from 'ant-design-vue';
 import SuccessModal from './success-modal.vue';
 import ApprovalSteps from './approval-steps.vue';
-import t, {throttle, deepTree} from '../utils';
+import t, { throttle, deepTree } from '../utils';
 import useCategory from '../hooks/useCategory';
 import useDefaultTime from '../hooks/useDefaultTime';
 
@@ -93,9 +102,17 @@ const props = defineProps({
 	spining: {
 		type: Boolean,
 		default: false
+	},
+	defaultCheckedIds: {
+		type: Array as PropType<string[]>,
+		default: () => []
+	},
+	isAllOwn: {
+		type: Boolean,
+		default: false
 	}
-	
- });
+
+});
 const emit = defineEmits(['onSubmit', 'onSuccess']);
 
 const open = defineModel({
@@ -128,27 +145,31 @@ const getValidTimeOptions = async () => {
 };
 
 getValidTimeOptions();
-const handleOk = async() => {
+const handleOk = async () => {
+	if (props.isAllOwn) {
+		open.value = false;
+		return;
+	}
 	await Promise.all([formRef.value.validate(), categoryRef.value?.validate()])
-	loading.value = true; 
+	loading.value = true;
 	const params = getParams();
 	let res = await Http.submitApply(params);
 	const url = res?.body?.oaFlowUrl;
 	open.value = false;
 	loading.value = false;
 	emit('onSubmit');
-	successModal.value?.countDown(url, () => emit('onSuccess'));	
-}; 
+	successModal.value?.countDown(url, () => emit('onSuccess'));
+};
 
 
 const getParams = () => {
 	formState.submitWorkNumber = submitWorkNumber.value;
-	const roleVoList:{
+	const roleVoList: {
 		roleId: number;
 		validTime: string;
 	}[] = [];
 
-	const ruleItems: { attributeCategoryId: number, attributeValueIds: number[]}[] = [];
+	const ruleItems: { attributeCategoryId: number, attributeValueIds: number[] }[] = [];
 	categoryList.value.forEach((category: CategoryType) => {
 		// 添加有数据范围值的属性
 		if (category.attributeValueIds_view.length) {
@@ -157,10 +178,10 @@ const getParams = () => {
 				attributeValueIds: category.attributeValueIds_view
 			})
 		};
-		
+
 	});
 	deepTree(permissionList.value, (item: any) => {
-		if (!item.children && formState.features.includes(item.feature)) {
+		if (!item.children && formState.features.includes(item.feature) && !item.disabled) {
 			roleVoList.push({
 				roleId: item.roleId,
 				validTime: item.validTime
@@ -187,20 +208,22 @@ const onChangeTime = throttle(async () => {
 	if (params.roleVoList.length === 0) {
 		stepNodes.value = [];
 		return;
-	}
+	};
+
 	let res = await Http.getFlowPreview(params);
 	stepNodes.value = res?.body?.nodes || [];
-}, 0)
-const onCheck = (checkedIds:any, info:any) => {
+}, 1)
+const onCheck = (checkedIds: any, info: any) => {
 	// 如果选择的是子节点，判断是否超过5个，超过的话，删除当前选的节点，并给予提示
 	// 如果选择的是父节点，判断是否超过5个，超过的话，从当前选择的父节点的叶子节点中删除多出的个数，并给予提示
 	let total = 0;
 	let curTotal = 0;
+
 	deepTree(permissionList.value, (item: any) => {
-		if (!item.children && checkedIds.includes(item.feature)) {
+		if (!item.children && checkedIds.includes(item.feature) && !item.disabled) {
 			total += 1;
 		}
-		if (!item.children && formState.features.includes(item.feature)) {
+		if (!item.children && formState.features.includes(item.feature) && !item.disabled) {
 			curTotal += 1;
 		}
 		if (!item.children && !formState.features.includes(item.feature)) {
@@ -225,7 +248,7 @@ const onCheck = (checkedIds:any, info:any) => {
 	if (info.node.children && total > MAX_COUNT) {
 		//选择的是父节点，则找出刚选的所有叶子节点， 并且删除其中多余(total-5)的节点
 		const diff = total - MAX_COUNT;
-		let leafNodes:string[] = [];
+		let leafNodes: string[] = [];
 		deepTree([info.node], (item: any) => {
 			if (!item.children && !item.disabled && !formState.features.includes(item.feature)) {
 				leafNodes.push(item.feature);
@@ -256,6 +279,10 @@ watch(() => props.permissionList, (cur) => {
 	})
 })
 
+watch(() => props.defaultCheckedIds, (cur) => {
+	formState.features = cur.concat(formState.features);
+}, { immediate: true })
+
 watch(() => open.value, (cur) => {
 	if (cur) {
 		formRef.value?.resetFields();
@@ -266,9 +293,17 @@ watch(() => open.value, (cur) => {
 </script>
 
 <style scoped>
+.crane-permission-title-tips {
+	color: #FF4D4F;
+	font-size: 14px;
+	margin-left: 8px;
+	font-weight: 400;
+}
+
 :deep(.yqg-permission-tree-list) {
 	margin-top: 4px;
 }
+
 :deep(.yqg-permission-tree-node-selected) {
 	background: none !important;
 }
@@ -284,8 +319,9 @@ watch(() => open.value, (cur) => {
 :deep(.yqg-permission-tree-checkbox+span:hover) {
 	background: none !important;
 }
+
 :deep(.yqg-permission-tree-treenode) {
-	width: 100%!important;
+	width: 100% !important;
 }
 
 :deep(.yqg-permission-tree-node-content-wrapper-normal) {
@@ -295,5 +331,4 @@ watch(() => open.value, (cur) => {
 :deep(.yqg-permission-tree-title) {
 	width: 100% !important;
 }
-
 </style>

package/src/components/approval-steps.vue

@@ -1,51 +1,48 @@
 <template>
-		<div v-if="stepNodes?.length > 1" class="crane-step-wraper">
-			<div v-for="(item, index) in stepNodes" :key="item.auditorName" class="crane-step-node">
-				<span style="white-space: nowrap;">
-					{{ item.auditorName }} 
-					<Popover v-if="item.employeeNameList?.length">
-						<template #content>
-							<div style="max-width: 400px;">
-								{{ item.employeeNameList.join('、')}}
-							</div>
-						</template>
-						<ExclamationCircleOutlined style="margin: 0 2px; color: #1677ff;"/>
-					</Popover> 
-					{{ getSubTip(index) }}
-				</span>
+	<div v-if="stepNodes?.length > 1" class="crane-step-wraper">
+		<div v-for="(item, index) in stepNodes" :key="item.auditorName" class="crane-step-node">
+			<span style="white-space: nowrap;">
+				{{ item.auditorName }}
+				<Popover v-if="item.employeeNameList?.length">
+					<template #content>
+						<div style="max-width: 400px;">
+							{{ item.employeeNameList.join('、') }}
+						</div>
+					</template>
+					<ExclamationCircleOutlined style="margin: 0 2px; color: #1677ff;" />
+				</Popover>
+				{{ getSubTip(index) }}
+			</span>
+
+			<img v-if="index !== stepNodes.length - 1" :src="arrowImg" class="crane-step-icon">
 
-				<img 
-				v-if="index !== stepNodes.length - 1"
-				:src="arrowImg" 
-				class="crane-step-icon">
-				
-			</div>
 		</div>
-		<span v-else-if="stepNodes?.length === 1">
-			{{t('noNeed')}}
-		</span>
-		<span v-else>-</span>
+	</div>
+	<span v-else-if="stepNodes?.length === 1">
+		{{ t('noNeed') }}
+	</span>
+	<span v-else>-</span>
 </template>
 <script lang="ts" setup>
-	import { PropType, toRef } from 'vue';
-	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-	import arrowImg from '@/assets/arrow.png';
-	import { Popover } from 'ant-design-vue';
-	import t from '../utils';
+import { PropType, toRef } from 'vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import arrowImg from '@/assets/arrow.png';
+import { Popover } from 'ant-design-vue';
+import t from '../utils';
 
-	const props = defineProps({
-		stepNodes: {
-			type: Array as PropType<any[]>,
-			required: true,
-			default: () => []
-		},
-	});
+const props = defineProps({
+	stepNodes: {
+		type: Array as PropType<any[]>,
+		required: true,
+		default: () => []
+	},
+});
 
-	const stepNodes = toRef(props, 'stepNodes');
+const stepNodes = toRef(props, 'stepNodes');
 
-	const getSubTip = (index: number) => {
-		return index === stepNodes.value.length - 1 ? `[${t('end')}]` : index === 0 ? `[${t('start')}]` : '';
-	}
+const getSubTip = (index: number) => {
+	return index === stepNodes.value.length - 1 ? `[${t('end')}]` : index === 0 ? `[${t('start')}]` : '';
+}
 
 </script>
 <style scoped>
@@ -57,10 +54,12 @@
 	line-height: 32px;
 	padding-bottom: 8px;
 }
+
 .crane-step-node {
 	display: flex;
 	align-items: center;
 }
+
 .crane-step-icon {
 	margin: 0 8px;
 	height: auto;

package/src/components/category-selector.vue

@@ -32,7 +32,7 @@ import {
     TreeSelect
 } from 'ant-design-vue';
 
-import { defineProps, PropType, ref, computed, defineExpose} from 'vue';
+import { defineProps, PropType, ref, computed, defineExpose } from 'vue';
 import t from '../utils';
 import useAttributesCache from '../hooks/useAttributesCache';
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
@@ -68,6 +68,7 @@ const validate = () => {
     });
 }
 
+
 defineExpose({
     validate
 })
@@ -75,7 +76,6 @@ defineExpose({
 </script>
 
 <style scoped>
-
 .crane-category-wraper {
     margin-top: 16px;
     padding: 12px;
@@ -97,11 +97,11 @@ defineExpose({
 }
 
 :deep(.yqg-permission-form-item-required) {
-    font-size: 12px!important;
+    font-size: 12px !important;
 }
 
 :deep(.yqg-permission-form-item-required::before) {
-    display: none!important;
+    display: none !important;
 }
 
 .crane-required {
@@ -118,11 +118,13 @@ defineExpose({
     line-height: 1;
     content: "*";
 }
+
 .crane-category-tips {
     color: #86909C;
     font-size: 12px;
 }
-.crane-category-line{
+
+.crane-category-line {
     height: 1px;
     background-color: #C9CDD4;
     margin: 10px 0;

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">
@@ -35,15 +35,18 @@
 		<Popover v-if="item.relatedCompleteNames?.length">
 			<template #content>
 				<div style="max-width: 400px;">
-					{{ t('adaptDepartment') }}：{{item.relatedCompleteNames.map((item: any) => {
-					return item;
-					}).join('、') }}
+					<div>
+						{{ t('adaptDepartment') }}：
+					</div>
+					{{item.relatedCompleteNames.map((item: any) => {
+						return item;
+					}).join('、')}}
 				</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 +62,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 +91,7 @@ import t from '../utils';
 
 const OWNER_STATUS = 'OWNER';
 
-const levelMap:LevelMapType = {
+const levelMap: LevelMapType = {
 	L1: {
 		color: '#1AA83B',
 		text: t('levels.L1'),
@@ -120,7 +123,7 @@ let props = defineProps({
 	},
 	item: {
 		type: Object as PropType<PermissionType>,
-		default: () => {}
+		default: () => { }
 	}
 });
 
@@ -136,7 +139,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);
@@ -149,11 +152,12 @@ const onChangeTimeHandler = () => {
 	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 +170,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>