@yqg/permission 1.0.0-beta.0 → 1.0.0

package/eslint.config.js

@@ -0,0 +1,26 @@
+import typescriptEslintParser from '@typescript-eslint/parser';
+
+export default {
+	parser: typescriptEslintParser,
+  	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+  	},
+  	plugins: ['@typescript-eslint', 'vue'],
+  	extends: [
+		'plugin:@typescript-eslint/recommended',
+		'plugin:vue/vue3-recommended',
+  	],
+  	rules: {
+		'vue/no-multiple-template-root': 'off',
+  	},
+  	env: {
+		browser: true,
+		node: true,
+  	},
+  	settings: {
+		'import/resolver': {
+	  		typescript: {},
+		},
+  	},
+}

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@yqg/permission",
-    "version": "1.0.0-beta.0",
-	"main": "dist/index.js",
-  	"module": "dist/index.js",
+    "version": "1.0.0",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
     "type": "module",
-	"publishConfig": {
+    "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
@@ -15,13 +15,19 @@
     },
     "dependencies": {
         "@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": {
+        "@typescript-eslint/parser": "^8.13.0",
         "@vitejs/plugin-vue": "^5.1.4",
+        "eslint": "^9.14.0",
+        "husky": "^9",
+        "lint-staged": "^13.2.0",
         "typescript": "~5.5.4",
         "vite": "^5.4.9",
         "vue-tsc": "^2.1.8"

package/src/App.vue

@@ -8,7 +8,14 @@ type LocaleType = 'zh-CN' | 'en-US' | 'id-ID' | 'fil-PH';
 const color = ref<string>('#1677ff');
 const locale = ref<LocaleType>('zh-CN');
 
-const permissions = reactive(['PPDL.0801-test2.XIUGAI.test5', 'PPDL.0801-test2.XIUGAI.test4', 'PPDL.0801-test2.XIUGAI.test6']);
+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';
@@ -28,13 +35,14 @@ const changeLocale = () => {
 			<div>1:默认组件</div>
 			<!-- 03541 -->
 			 <!-- 02124 -->
+			  <!-- 05184 -->
 			<yqg-permission 
 			:permissions="permissions"
-			workNumber="02124"
-			businessCode="PPDL"
+			workNumber="05181"
+			businessCode="CRANE"
 			:color="color"
 			:locale="locale"
-			@success="() => {console.log('成功')}"
+			@onSuccess="() => {console.log('成功')}"
 			>
 			</yqg-permission>
 		</div>

package/src/axios/axios.ts

@@ -8,7 +8,7 @@ const YQG_NOT_LOGIN = 10008;
 axios.defaults.withCredentials = true;
 // instance.defaults.paramsSerializer = (params) => qs.stringify(params, { arrayFormat: 'repeat' });
 
-axios.defaults.headers.common['Accept-Language'] = localStorage.getItem('permission_locale') as string;
+axios.defaults.headers.common['Accept-Language'] = localStorage.getItem('permission_locale');
 
 axios.interceptors.response.use(
     (res: any) => {

package/src/components/apply-modal.vue

@@ -5,6 +5,8 @@
 	width="800px"
 	@ok="handleOk"
 	:okText="t('submit')"
+	:maskClosable="false"
+	:ok-button-props="{ loading: loading }"
 	:cancelText="t('cancel')">
 		<Form
 		ref="formRef"
@@ -33,10 +35,16 @@
 
 			<FormItem 
 			name="applyReason"
-			:label="t('applyReason')" 
-			:rules="[{ required: true, message: t('reasonPlaceholder')}]">
+			:label="t('applyReason')"
+			:rules="[{ 
+				required: true, message: t('reasonPlaceholder'), trigger: ['change', 'blur']
+			}, {
+				max: 300, message: t('maxLengthTips', {length: 300}), trigger: ['change', 'blur']
+			}]">
 				<Textarea
-				v-model:value="formState.applyReason"
+				v-model:value.trim="formState.applyReason"
+				show-count 
+				:maxlength="300"
 				:placeholder="t('applyReasonPlaceholder')"
 				:auto-size="{ minRows: 2, maxRows: 5 }">
 				</Textarea>
@@ -61,7 +69,6 @@
 </template>
 <script lang="ts" setup>
 	import { 
-		defineModel, 
 		reactive, 
 		defineAsyncComponent, 
 		toRef, 
@@ -76,6 +83,7 @@
 		CheckboxGroup,
 		Textarea,
 		Tag,
+		message
   	} from 'ant-design-vue';
   	import SuccessModal from './success-modal.vue';
 	import ApprovalSteps from './approval-steps.vue';
@@ -105,11 +113,12 @@
 		},
 		
  	 });
-	const emit = defineEmits(['onSuccess']);
+	const emit = defineEmits(['onSubmit', 'onSuccess']);
 	const open = defineModel({
 		required: true,
 		default: false,
 	});
+	const loading = ref(false);
 	const permissionList = toRef(props, 'permissionList');
 	const businessCode = toRef(props, 'businessCode');
 	const submitWorkNumber = toRef(props, 'workNumber');
@@ -133,16 +142,22 @@
 		} else {
 			formState.applyReason += `、${item}`;
 		}
+		formRef.value.validateFields(['applyReason']);
 	}
 
   	const handleOk = async() => {
+		if (formState.roleIds.length > 5) {
+			return message.warning(t('maxCountTips', {count: 5}));
+		}
 		formRef.value.validate().then(async() => {
+			loading.value = true;
 			const params = getParams();
 			let res = await Http.submitApply(params);
 			const url = res?.body?.oaFlowUrl;
 			open.value = false;
-			emit('onSuccess');
-			successModal.value?.countDown(url);
+			loading.value = false;
+			emit('onSubmit');
+			successModal.value?.countDown(url, () => emit('onSuccess'));	
     	})
   	}; 
 
@@ -157,6 +172,10 @@
   	}
 
   	const onChangeHandler = throttle(async () => {
+		if (formState.roleIds.length > 1) {
+			return;
+		}
+
 		if (!formState.roleIds.length) {
 			stepNodes.value = [];
 			return;
@@ -167,6 +186,14 @@
 		stepNodes.value = res?.body?.nodes || [];
   	}, 0)
 
+	watch(() => formState.roleIds, (val) => {
+		// 写到watch里避免闪烁
+		if (val.length > 1) {
+			formState.roleIds.pop();
+			message.warning(t('maxCountTips', {count: 5}));
+		}
+	})
+
   	watch(() => open.value, (cur) => {
 		if (cur) {
 			formRef.value?.resetFields();

package/src/components/approval-steps.vue

@@ -2,16 +2,18 @@
 		<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 }} {{ getSubTip(index) }}
+					{{ 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>
 
-				<Popover v-if="item.employeeNameList?.length">
-					<template #content>
-						{{item.auditorName}}：{{ item.employeeNameList.join(',')}}
-					</template>
-					<ExclamationCircleOutlined style="margin: 0 2px"/>
-				</Popover>
-
 				<img 
 				v-if="index !== stepNodes.length - 1"
 				:src="arrowImg" 

package/src/components/checkbox-item.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="crane-checkbox-line">
-		<Checkbox :value="item.roleId" :disabled="!!item.businessApplyType" @change="onCheck">
+		<Checkbox 
+		:value="item.roleId"
+		:disabled="['OWNER', 'PENDING', 'NO'].includes(props.item.businessApplyType)"
+		@change="onCheck">
 			<div class="crane-flex-center crane-checkbox-label">
 				<Tag
 					v-if="item.securityLevel" 
@@ -19,12 +22,26 @@
 					<span class="crane-text-overflow">{{ item.name }}</span>
 				</Popover>
 				<Tag
-					v-if="item.businessApplyType" 
+					v-if="item.businessApplyType && item.businessApplyType !== 'TEMP_OWNER'" 
 					:bordered="false" 
 					class="crane-tag-position crane-margin-left-4 crane-margin-right-0"
-					:class="item.businessApplyType !== StatusTypePending ? 'crane-disabled-color' : ''">
-					{{ statusMap[item.businessApplyType].text }}
+					:class="['PENDING', 'TEMP_OWNER'].includes(item.businessApplyType) ? '' : 'crane-disabled-color'">
+					{{ statusMap[item.businessApplyType] }}
 				</Tag>
+				<Popover>
+					<template #content>
+						<span v-if="item?.ownStatusVO?.dayDiff>0">{{t('lastDays', {count: item?.ownStatusVO?.dayDiff})}}</span>
+						<span v-else>{{ t('taday') }}</span>
+					</template>
+					<Tag
+						v-if="item.businessApplyType === 'TEMP_OWNER'" 
+						:bordered="false" 
+						class="crane-tag-position crane-margin-left-4 crane-margin-right-0"
+						:class="['PENDING'].includes(item.businessApplyType) ? '' : 'crane-disabled-color'">
+						{{ statusMap[item.businessApplyType] }}
+					</Tag>
+				</Popover>
+				
 			</div>
 		</Checkbox>
 
@@ -39,7 +56,7 @@
 			<template #content>
 				{{t('adaptDepartment')}}：{{ item.relatedDepartments.map((item: any) => {
 					return item.name;
-				}).join(',') }}
+				}).join('、') }}
 			</template>
 			<span class="crane-flex-center crane-margin-left-4">
 				<img :src="departmentImg" height="14" width="14">
@@ -47,7 +64,7 @@
 			</span>
 		</Popover>
 
-		<span v-show="checkedIds.includes(item.roleId)" class="crane-week-color crane-margin-left-12">
+		<span v-if="checkedIds.includes(item.roleId)" class="crane-week-color crane-margin-left-12">
 			{{t('availableTime')}}：
 			<Select
 				v-model:value="validTime"
@@ -81,21 +98,6 @@
 			text: t('levels.L3')
 		},
   	};
-  
-  	const statusMap:StatusMapType = {
-		PENDING:  {
-			color: 'orange',
-			text: t('status.PENDING')
-		},
-		OWNER: {
-			color: 'green',
-			text: t('status.OWNER')
-		},
-		NO: {
-			color: 'red',
-			text: t('status.NO')
-		}
-  	}
 
   	let props = defineProps({
 		item: {
@@ -112,7 +114,7 @@
 		}
   	});
 	const timeStatusOptions = formatOptions('availiables');
-  	const StatusTypePending = 'PENDING';
+	const statusMap = t('status');
 	const validTime = ref('');
 
 	//1登录人所在部门 = 权限适用范围，都默认90天，不需要区分等级和类型，

package/src/components/success-modal.vue

@@ -9,22 +9,25 @@
 
 	const [modal, contextHolder] = Modal.useModal();
 
-	const countDown = (url: string) => {
+	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: 'success-modal-wrap',
+			wrapClassName: 'yqg-permission-modal-wrap',
 			icon: createVNode(CheckCircleFilled, {style: 'color: #52c41a;'}),
 			onOk: () => {
 				window.open(url);
-				location.reload();
+				modal1.destroy();
+				callback && callback();
+				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
 			},
 			onCancel: () => {
 				modal1.destroy();
-				location.reload();
+				callback && callback();
+				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
 			},
 	  	});
 
@@ -44,8 +47,8 @@
 	defineExpose({countDown});
 
 </script>
-<style scoped>
-	::v-deep .success-modal-wrap .yqg-permission-modal-confirm-btns {
-		text-align: center;
+<style>
+	.yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns {
+		text-align: center!important;
 	}
 </style>

package/src/components/yqg-permission.vue

@@ -16,14 +16,15 @@
 				</div>
 			</template>
 			<template v-else>
-				<img 
-				:src="curStatus.imageUrl" 
-				height="200" 
-				width="200" 
-				style="margin-top: calc(50vh - 273px)" />
+				
 				<!-- 可申请 -->
 				<template v-if="curStatus.status === statusMap.DEFAULT">
-					<div style="margin: 10px">
+					<img 
+					:src="curStatus.imageUrl" 
+					height="200" 
+					width="200" 
+					style="margin-top: calc(50vh - 273px)" />
+					<div class="crane-margin10">
 						{{ t('unavailableTips') }}
 					</div>
 					<div>
@@ -31,8 +32,13 @@
 					</div>
 				</template>
 				<!-- 审批中 -->
-				<template v-else-if="curStatus.status === statusMap.PENDING">
-					<div style="margin: 10px">
+				<template v-if="curStatus.status === statusMap.PENDING">
+					<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', {
@@ -41,19 +47,26 @@
 						</span>
 					</div>
 					<div>
-						<Button style="margin-right: 10px;">{{t('viewApprovalDetail')}}</Button>
+						<Button class="crane-margin-right10" @click="goViewApproval">{{t('viewApprovalDetail')}}</Button>
 						<Button type="primary" @click="showModal">+ {{t('applyMore')}}</Button>
 					</div>
 				</template>
 				<!-- 不可申请 -->
-				<div v-else style="margin: 10px">
-					{{ t('unapplyTips') }}
-					<Popover>
-						<template #content>
-							{{t('manager')}}: {{ curStatus.tips }}
-						</template>
-						{{ t('callManager') }}
-					</Popover>
+				<div v-if="curStatus.status === statusMap.NO" class="crane-wraper">
+					<img 
+					:src="curStatus.imageUrl" 
+					height="200" 
+					width="200" 
+					style="margin-top: calc(50vh - 273px)" />
+					<div class="crane-margin10">
+						{{ t('unapplyTips') }}
+						<Popover>
+							<template #content>
+								<div style="max-width: 400px;">{{t('manager')}}: {{ curStatus.tips }}</div>
+							</template>
+							<span style="color: #1677ff;">{{t('callManager') }}</span>
+						</Popover>
+					</div>
 				</div>
 			</template>
 		</div>
@@ -63,7 +76,8 @@
 		 :permissionList="permissionList" 
 		 :workNumber="workNumber"
 		 :businessCode="businessCode"
-		 @onSuccess="getPermissions">
+		 @onSuccess="() => emit('onSuccess')"
+		 @onSubmit="getPermissions">
 		</ApplyModal>
 
 	</ConfigProvider>
@@ -113,10 +127,11 @@
 	const emit = defineEmits(['onSuccess']);
 
   	const open = ref(false);
+	const curApproving = ref<PermissionType>();
   	let permissionList = ref<PermissionListType>([]);
   	let curStatus = ref<Record<string, any>>({
 		imageUrl: noauthority,
-		status: statusMap.DEFAULT,
+		status: '',
   	})
   	const allPermissions = computed(() => {
 		if (Array.isArray(props.permissions)) {
@@ -140,7 +155,7 @@
 		flattenData(data);
 		// 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
 		// 然后再根据 L1, L2, L3 排序
-		const sort = [ null, 'PENDING', 'OWNER', 'NO'];
+		const sort = [ null, 'TEMP_OWNER', 'PENDING', 'OWNER', 'NO'];
 		const levelSort = ['L1', 'L2', 'L3'];
 		arr.sort((a, b) => {
 			return sort.indexOf(a.businessApplyType) - sort.indexOf(b.businessApplyType) || levelSort.indexOf(a.securityLevel) - levelSort.indexOf(b.securityLevel);
@@ -149,10 +164,16 @@
   	}
 
   	const getStatus = (data: PermissionListType) => {
-		if (!data.length) return curStatus.value;
+		if (!data.length) {
+			return {
+				imageUrl: noauthority,
+				status: '',
+			};
+		}
 		const current = data.find((per) => per.businessApplyType === statusMap.PENDING);
 		const cannotApply = data.every((per) => per.businessApplyType === statusMap.NO);
 		if (current) {
+			curApproving.value = current;
 			return {
 				imageUrl: applyUrl,
 				status: statusMap.PENDING,
@@ -165,12 +186,22 @@
 			return {
 				imageUrl: noauthority,
 				status: statusMap.NO,
-				tips: data[0].admin?.join(','),
+				tips: data[0].admin?.map((item) => `${item.name}(${item.departmentName})`)?.join('、'),
 			};
 	  	};
-	  	return curStatus.value;
+	  	return {
+			imageUrl: noauthority,
+			status: statusMap.DEFAULT,
+		}
   	};
 
+	const goViewApproval = () => {
+		console.log(curApproving.value)
+		if (curApproving.value?.oaFlowUrl) {
+			window.open(curApproving.value.oaFlowUrl);
+		}
+	};
+
   	const getPermissions = async () => {
 		if (!allPermissions.value.length || !props.businessCode || !props.workNumber) return;
 
@@ -203,6 +234,13 @@
     	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/i18n/en-US.ts

@@ -28,6 +28,10 @@ export default {
     availableTime: '有效期',
 	selectPlaceholder: '请选择权限点',
 	reasonPlaceholder: '请输入申请理由',
+	maxCountTips: '一次最多只可申请{count}个权限',
+	maxLengthTips: '最多{length}个字符',
+	lastDays: '{count}天后到期',
+	taday: '今天到期',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',
@@ -43,7 +47,8 @@ export default {
     status: {
         PENDING: '审批中',
         NO: '不可申请',
-        OWNER: '已拥有',
+        OWNER: '永久拥有',
+		TEMP_OWNER: '临时拥有',
     },
 	operationType: {
 		QUERY: '查询',

package/src/i18n/zh-CH.ts

@@ -28,6 +28,10 @@ export default {
     availableTime: '有效期',
 	selectPlaceholder: '请选择权限点',
 	reasonPlaceholder: '请输入申请理由',
+	maxCountTips: '一次最多只可申请{count}个权限',
+	maxLengthTips: '最多{length}个字符',
+	lastDays: '{count}天后到期',
+	taday: '今天到期',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',
@@ -43,7 +47,8 @@ export default {
     status: {
         PENDING: '审批中',
         NO: '不可申请',
-        OWNER: '已拥有',
+        OWNER: '永久拥有',
+		TEMP_OWNER: '临时拥有',
     },
 	operationType: {
 		QUERY: '查询',

package/src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue';
 import './style.css';
 import yqgPermission from './yqg-permission';
 // import yqgPermission from '../dist';
-yqgPermission.start();
+yqgPermission.init();
 
 const app = createApp(App);
 app.mount('#app');

package/src/typings/index.d.ts

@@ -7,6 +7,7 @@ declare enum LevelType {
 declare enum StatusType {
 	PENDING =  'PENDING',
 	OWNER = 'OWNER',
+	TEMP_OWNER = 'TEMP_OWNER',
 	NO = 'NO'
 };
 
@@ -25,6 +26,7 @@ declare type PermissionType = {
 	businessApplyType: StatusType;
 	oaFlowUrl?: string;
 	children?: PermissionListType;
+	ownStatusVO: any;
 	admin?: any[];
 };
 declare type PermissionListType = PermissionType[];
@@ -51,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/src/yqg-permission/index.ts

@@ -18,7 +18,7 @@ interface Options {
 interface YqgPermissionType {
     tagName: string;
     hasInit: boolean;
-    start: (options: Options) => void;
+    init: (options: Options) => void;
 }
 
 class YqgPermission implements YqgPermissionType {
@@ -30,7 +30,7 @@ class YqgPermission implements YqgPermissionType {
         this.hasInit = false;
     }
 
-    start(options?: Options): void {
+    init(options?: Options): void {
         if (!window || !window.customElements) {
             console.error('yqg-permission is not supported in this environment');
             return;

package/tsconfig.app.json

@@ -21,5 +21,14 @@
         "noFallthroughCasesInSwitch": true
     },
     "composite": true,
-    "include": ["src"]
+    "include": [
+		"src/**/*.ts",
+		"src/**/*.d.ts",
+		"src/**/*.tsx",
+		"src/**/*.vue"
+	 ],
+	"exclude": [
+	    "node_modules",
+	    "vite.config.ts"  // 如果不需要解析 vite.config.ts
+	],
 }

package/tsconfig.json

@@ -1,10 +1,10 @@
 {
     "files": [],
-    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+    "references": [{ "path": "./tsconfig.app.json" }],
     "path": {
         "@src": "./src"
     },
     "compilerOptions": {
         "typeRoots": ["node_modules/ant-design-vue/typings", "./src/typings"]
-    }
+    },
 }