@yqg/permission 1.3.0-alpha.9 → 1.3.1-1.beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yqg/permission",
-    "version": "1.3.0-alpha.9",
+    "version": "1.3.11.beta.0",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "type": "module",
@@ -14,31 +14,30 @@
         "preview": "vite preview",
         "demo:build": "vue-tsc -b && STAGE=test vite build",
         "prod:build": "vue-tsc -b && STAGE=prod vite build"
-
     },
     "devDependencies": {
+        "@alicloud/cdn20180510": "3.1.2",
+        "@alicloud/openapi-client": "0.4.12",
         "@ant-design/icons-vue": "^7.0.1",
         "@commitlint/cli": "^19.5.0",
         "@commitlint/config-conventional": "^19.5.0",
+        "@originjs/vite-plugin-commonjs": "1.0.3",
         "@types/vue": "^2.0.0",
         "@typescript-eslint/parser": "^8.13.0",
         "@vitejs/plugin-vue": "^5.1.4",
+        "@yqg/max-utils": "^1.0.2",
+        "ali-oss": "6.17.1",
         "ant-design-vue": "4.x",
         "axios": "^1.7.7",
+        "chalk": "5.3.0",
         "eslint": "^9.14.0",
         "husky": "^9",
         "lint-staged": "^13.2.0",
+        "ora": "5.4.1",
         "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",
-        "@alicloud/cdn20180510": "3.1.2",
-        "@alicloud/openapi-client": "0.4.12",
-        "@originjs/vite-plugin-commonjs": "1.0.3",
-        "@yqg/max-utils": "^1.0.2",
-        "ali-oss": "6.17.1",
-        "chalk": "5.3.0",
-        "ora": "5.4.1"
+        "vue-tsc": "^2.1.8"
     }
 }

package/src/App.vue

@@ -1,30 +1,26 @@
 <script setup lang="ts">
-import {reactive, ref} from 'vue';
+import { ref } from 'vue';
 import {Button} from 'ant-design-vue';
 
 // 中英印尼菲律宾
 type LocaleType = 'zh-CN' | 'en-US' | 'id-ID' | 'fil-PH';
 
 const color = ref<string>('#1677ff');
-const locale = ref<LocaleType>('zh-CN');
+const locale = ref<LocaleType>('id-ID');
 
-const permissions = reactive([
-	'CRANE.PERMISSION.QUERY',
-	'CRANE.PERMISSION.CREATE',
-	'CRANE.PERMISSION.UPDATE',
-	'CRANE.PERMISSION.DELETE',
-	'CRANE.PERMISSION.DETAIL_QUERY',
-	'CRANE.PERMISSION.ROLE_ASSIGN',
-	'CRANE.PERMISSION.EXPORT',
-]);
-// const permissions = reactive(['CRANE.BUSINESS.QUERY', 'RANE.BUSINESS.CREATE', 'CRANE.BUSINESS.UPDATE', 'CRANE.BUSINESS.DELETE']);
+// const permissions = ref('CALL_CENTER.DATA_BUSINESS.QUERY,CALL_CENTER.ENTER_ADMIN,CALL_CENTER.USER.QUERY,CALL_CENTER.USER.MANAGE,CALL_CENTER.BUSINESS.QUERY,CALL_CENTER.SKILL_GROUP.QUERY');
+// const permissions = 'RECONCILIATION.DATA_INGESTION.RESOLVE_TASK.QUERY';
+//05615
+// const permissions = reactive(['CRANE.BUSINESS.QUERY', 'CRANE.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';
+	locale.value = locale.value === 'id-ID' ? 'en-US' : 'id-ID';
 }
 
+const permissions = ref('TECH.SCHEDULER.JOB.VISIBLE,TECH.SCHEDULER.JOB.QUERY,TECH.SCHEDULER.JOB.MODIFY');
+
 </script>
 
 <template>
@@ -35,25 +31,15 @@ const changeLocale = () => {
 		<div class="case-card">
 			<div>1:默认组件</div>
 			<!-- 03541 -->
-			 <!-- 02124 -->
-			  <!-- 05184 -->
-			<yqg-permission
-			:permissions="permissions"
-			workNumber="05621"
-			:color="color"
-			:locale="locale"
-			@onSuccess="() => {console.log('成功')}"
-			>
+			<!-- 02124 -->
+			<!-- 05184 -->
+			<yqg-permission :omitCategoryIds="[]" :permissions="permissions" workNumber="03541" :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/axios/index.ts

@@ -9,7 +9,7 @@ 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),
 
 	submitApply: (params: any) => axios.post(`${urlPrefix}/permission/apply/oa/flow/submit`, params),
 

package/src/components/apply-modal.vue

@@ -1,59 +1,79 @@
 <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')">
-		<Form ref="formRef" :model="formState" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
-			<FormItem :label="t('applyPermission')" name="features"
-				:rules="[{ required: true, message: t('selectPlaceholder')}]">
-				<Spin :spinning="spining">
-					<span v-if="!permissionList.length">
-						{{t('noPermissionTips')}}
+	<Modal v-model:open="open" width="1100px" :maskClosable="false" :zIndex="zIndex">
+		<template #footer>
+			<Button @click="open = false" v-show="!isAllChecked && permissionList.length">{{ t('cancel') }}</Button>
+			<Button type="primary" @click="handleOk" :loading="loading">{{ t('submit') }}</Button>
+		</template>
+		<template #title>
+			<span>{{ t('permissionApply') }}</span>
+			<span v-show="isAllChecked && permissionList.length" class="crane-permission-title-tips">{{
+				t('isAllOwnTips') }}</span>
+		</template>
+		<ConfigProvider :getPopupContainer="getPopupContainer" prefixCls="yqg-permission" :theme="{
+			token: {
+				colorPrimary: color,
+			}
+		}">
+			<Form ref="formRef" :model="formState" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
+				<FormItem :label="t('applyPermission')" name="features"
+					:rules="[{ required: true, message: t('selectPlaceholder') }]">
+					<Spin :spinning="spining">
+						<span v-if="!permissionList.length">
+							{{ t('noPermissionTips') }}
+						</span>
+						<div v-else :class="{ 'yqg-permission-tree-list-wraper': showScrollBar }">
+							<Tree checkable :default-expand-all="true" :tree-data="permissionList" :height="200"
+								:expandedKeys="expandedKeys" :checkedKeys="formState.features" @check="onCheck"
+								@expand="expandedKeys = $event">
+								<template #title="item: PermissionType">
+									<div v-if="item.children && item.children.length">
+										{{ item.shortName }}
+									</div>
+									<PermissionItem v-else :checkedKeys="formState.features" :item="item"
+										@onChangeTime="onChangeTime" @updateTime="setDefaultTime"
+										:validTimeOptions="validTimeOptions" />
+								</template>
+							</Tree>
+						</div>
+						<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']
+                }]">
+					<Textarea v-model:value.trim="formState.applyReason" :placeholder="t('applyReasonPlaceholder')"
+						:auto-size="{ minRows: 4, maxRows: 4 }" :disabled="isAllChecked || !permissionList.length">
+            </Textarea>
+					<span class="reason-tips" style="font-size: 12px">
+						{{ t('applyReasonTips') }}
 					</span>
+				</FormItem>
+
+				<FormItem :label="t('approvalProcess')">
+					<ApprovalSteps :stepNodes="stepNodes" />
+				</FormItem>
+
+			</Form>
 
-					<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 }}
-							</div>
-							<PermissionItem v-else :checkedKeys="formState.features" :item="item"
-								@onChangeTime="onChangeTime" @updateTime="setDefaultTime"
-								:validTimeOptions="validTimeOptions" />
-						</template>
-					</Tree>
-					<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']
-	}]">
-				<Textarea v-model:value.trim="formState.applyReason" :placeholder="t('applyReasonPlaceholder')"
-					:auto-size="{ minRows: 4, maxRows: 4 }">
-		</Textarea>
-				<span class="reason-tips" style="font-size: 12px">
-					{{t('applyReasonTips')}}
-				</span>
-			</FormItem>
-
-			<FormItem :label="t('approvalProcess')">
-				<ApprovalSteps :stepNodes="stepNodes" />
-			</FormItem>
-		</Form>
-
-		<SuccessModal ref="successModal" />
+		</ConfigProvider>
 
 	</Modal>
+	
+	<SuccessModal ref="successModal" />
+
 </template>
 <script lang="ts" setup>
-import { 
-	reactive, 
-	defineAsyncComponent, 
-	toRef, 
-	ref, 
+import {
+	reactive,
+	defineAsyncComponent,
+	toRef,
+	ref,
 	watch,
 	PropType,
-	computed
+	computed,
+	nextTick
 } from 'vue';
 import Http from '../axios/index';
 import {
@@ -63,11 +83,13 @@ import {
 	Textarea,
 	message,
 	Tree,
-	Spin
+	Spin,
+	Button,
+    ConfigProvider,
 } 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 +115,25 @@ const props = defineProps({
 	spining: {
 		type: Boolean,
 		default: false
+	},
+	defaultCheckedIds: {
+		type: Array as PropType<string[]>,
+		default: () => []
+	},
+	isAllChecked: {
+		type: Boolean,
+		default: false
+	},
+	zIndex: {
+		type: Number,
+		default: 1000
+	},
+	color: {
+		type: String,
+		default: '#1677ff'
 	}
-	
- });
+
+});
 const emit = defineEmits(['onSubmit', 'onSuccess']);
 
 const open = defineModel({
@@ -109,13 +147,14 @@ const successModal = ref<InstanceType<typeof SuccessModal>>();
 const formRef = ref();
 const categoryRef = ref();
 let stepNodes = ref([]);
+const showScrollBar = ref(false);
 const categoryList = ref<CategoryType[]>([]);
 const validTimeOptions = ref([]);
 const expandedKeys = ref<any[]>([]);
 const formState = reactive<formStateType>({
 	features: [],
 	roleVoList: [],
-	applyReason: '',
+	applyReason: t('applyReasonTips'),
 	dataRule: {
 		ruleItems: [],
 	},
@@ -128,39 +167,48 @@ const getValidTimeOptions = async () => {
 };
 
 getValidTimeOptions();
-const handleOk = async() => {
-	await Promise.all([formRef.value.validate(), categoryRef.value?.validate()])
-	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'));	
-}; 
+const handleOk = async () => {
+	if (props.isAllChecked || !permissionList.value.length) {
+		open.value = false;
+		return;
+	}
+	if (loading.value) return;
+	try { 
+		await Promise.all([formRef.value.validate(), categoryRef.value?.validate()])
+		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'));
+	} catch (e) {
+		loading.value = false;
+	}
+};
 
 
 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) {
 			ruleItems.push({
 				attributeCategoryId: category.id,
-				attributeValueIds: category.attributeValueIds_view
+				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 +235,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 +275,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);
@@ -247,15 +297,33 @@ const onCheck = (checkedIds:any, info:any) => {
 	// 预览审批流程
 }
 
+const initScrollBar = () => {
+  const treeHeight = document.querySelector('.yqg-permission-tree-list-holder')?.children?.[0]?.clientHeight || 0;
+  if (treeHeight > 200) {
+    // 设置树的高度
+    showScrollBar.value = true;
+  } else {
+    showScrollBar.value = false;
+  }
+}
+
 watch(() => props.permissionList, (cur) => {
 	expandedKeys.value = [];
 	deepTree(cur, (item: any) => {
 		if (item.children && item.children.length) {
 			expandedKeys.value.push(item.feature);
 		}
+	});
+
+	nextTick(() => {
+		initScrollBar();
 	})
 })
 
+watch(() => props.defaultCheckedIds, (cur) => {
+	formState.features = cur.concat(formState.features);
+}, { immediate: true })
+
 watch(() => open.value, (cur) => {
 	if (cur) {
 		formRef.value?.resetFields();
@@ -263,12 +331,26 @@ watch(() => open.value, (cur) => {
 		stepNodes.value = [];
 	}
 })
+
+const getPopupContainer = ():HTMLElement => {
+    const modalRoot = document.querySelector('.yqg-permission-modal-content');
+
+    return (modalRoot || document.body) as HTMLElement;
+}
 </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 +366,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) {
@@ -296,4 +379,8 @@ watch(() => open.value, (cur) => {
 	width: 100% !important;
 }
 
+.yqg-permission-tree-list-wraper :deep(.yqg-permission-tree-list-scrollbar) {
+  display: block !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;