@yqg/permission 1.0.0-beta.0

package/src/components/success-modal.vue

@@ -0,0 +1,51 @@
+<template>
+	<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';
+
+	const [modal, contextHolder] = Modal.useModal();
+
+	const countDown = (url: string) => {
+	 	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',
+			icon: createVNode(CheckCircleFilled, {style: 'color: #52c41a;'}),
+			onOk: () => {
+				window.open(url);
+				location.reload();
+			},
+			onCancel: () => {
+				modal1.destroy();
+				location.reload();
+			},
+	  	});
+
+	  	const interval = setInterval(() => {
+	    	secondsToGo -= 1;
+	    	modal1.update({
+				cancelText: `${t('close')}(${secondsToGo}s)`,
+	    	});
+	  	}, 1000);
+
+	  	setTimeout(() => {
+	    	clearInterval(interval);
+	    	modal1.destroy();
+	  	}, secondsToGo * 1000);
+	}
+
+	defineExpose({countDown});
+
+</script>
+<style scoped>
+	::v-deep .success-modal-wrap .yqg-permission-modal-confirm-btns {
+		text-align: center;
+	}
+</style>

package/src/components/yqg-permission.vue

@@ -0,0 +1,208 @@
+<template>
+	<ConfigProvider
+	v-if="allPermissions.length"
+	prefixCls="yqg-permission"
+	:theme="{
+      	token: {
+        	colorPrimary: props.color,
+      	}}">
+		<div class="crane-wraper">
+			<template v-if="type==='text'">
+				<TypographyLink @click="showModal">{{t('permissionApply')}}</TypographyLink>
+			</template>
+			<template v-else-if="type==='custom'">
+				<div @click="showModal">
+					<slot name="custom"></slot>
+				</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">
+						{{ t('unavailableTips') }}
+					</div>
+					<div>
+						<Button type="primary" @click="showModal">+ {{t('applyPermission')}}</Button>
+					</div>
+				</template>
+				<!-- 审批中 -->
+				<template v-else-if="curStatus.status === statusMap.PENDING">
+					<div style="margin: 10px">
+						<span
+							class="crane-unapply"
+							v-html="t('appliedTips', {
+								status: `<style>.crane-unapply span {color: orange;}</style><span>${curStatus.tips}</span>`
+							})">
+						</span>
+					</div>
+					<div>
+						<Button style="margin-right: 10px;">{{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>
+			</template>
+		</div>
+
+		 <ApplyModal 
+		 v-model="open" 
+		 :permissionList="permissionList" 
+		 :workNumber="workNumber"
+		 :businessCode="businessCode"
+		 @onSuccess="getPermissions">
+		</ApplyModal>
+
+	</ConfigProvider>
+</template>
+<script lang="ts" setup>
+	import { ref, defineAsyncComponent, computed, watchEffect, watch} from 'vue';
+	import {Button, ConfigProvider, TypographyLink, Popover } from 'ant-design-vue';
+	import applyUrl from '@/assets/applying.png';
+	import noauthority from '@/assets/noauthority.png';
+	import Http from '../axios/index';
+	import t from '../utils';
+  	const ApplyModal = defineAsyncComponent(() =>
+		import('./apply-modal.vue')
+	);
+	const statusMap = {
+		DEFAULT: 'DEFAULT',
+		PENDING: 'PENDING',
+		NO: 'NO',
+	}
+
+	const props = defineProps({
+		workNumber: {
+	  		type: String,
+	  		default: ''
+		},
+		permissions: {
+			type: [String, Array<String>],
+	  		default: []
+  		},
+		businessCode: {
+	  		type: String,
+	  		default: ''
+		},
+		locale: {
+	  		type: String,
+	  		default: 'zh-CN'
+		},
+		color: {
+	  		type: String,
+	  		default: '#1677ff'
+		},
+		type: {
+	  		type: String,
+	  		default: 'default'
+		},
+	});
+	const emit = defineEmits(['onSuccess']);
+
+  	const open = ref(false);
+  	let permissionList = ref<PermissionListType>([]);
+  	let curStatus = ref<Record<string, any>>({
+		imageUrl: noauthority,
+		status: statusMap.DEFAULT,
+  	})
+  	const allPermissions = computed(() => {
+		if (Array.isArray(props.permissions)) {
+	  		return props.permissions;
+		} else {
+	  		return props.permissions.split(',');
+		}
+  	});
+
+  	const formatPermissionsData = (data: PermissionListType) => {
+		const arr:PermissionListType = [];
+		const flattenData = (list: PermissionListType) => {
+			list.forEach((item) => {
+				if (item.children) {
+					flattenData(item.children);
+				} else {
+					arr.push(item);
+				}
+			})
+		};
+		flattenData(data);
+		// 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
+		// 然后再根据 L1, L2, L3 排序
+		const sort = [ null, '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);
+		});
+		return arr;
+  	}
+
+  	const getStatus = (data: PermissionListType) => {
+		if (!data.length) return curStatus.value;
+		const current = data.find((per) => per.businessApplyType === statusMap.PENDING);
+		const cannotApply = data.every((per) => per.businessApplyType === statusMap.NO);
+		if (current) {
+			return {
+				imageUrl: applyUrl,
+				status: statusMap.PENDING,
+				tips: t('status.PENDING'),
+				url: current.oaFlowUrl,
+			};
+	  	};
+
+	  	if (cannotApply) {
+			return {
+				imageUrl: noauthority,
+				status: statusMap.NO,
+				tips: data[0].admin?.join(','),
+			};
+	  	};
+	  	return curStatus.value;
+  	};
+
+  	const getPermissions = async () => {
+		if (!allPermissions.value.length || !props.businessCode || !props.workNumber) return;
+
+		const params = {
+			businessCode: props.businessCode,
+			features: allPermissions.value.toString(),
+			workNumber: props.workNumber,
+		};
+
+		let res = await Http.getPermissions(params);
+		permissionList.value = formatPermissionsData(res.body || []);
+		curStatus.value = getStatus(permissionList.value);
+  	};
+
+  	const showModal = () => {
+		open.value = !open.value;
+  	};
+
+  	watchEffect(getPermissions);
+
+  	watch(() => props.locale, (cur, pre) => {
+		if (cur === pre) return;
+		localStorage.setItem('permission_locale', props.locale);
+  	}, {immediate: true})
+
+</script>
+<style scoped>
+  	.crane-wraper {
+		display: flex;
+    	align-items: center;
+    	flex-direction: column;
+		font-size: 14px;
+  	}
+</style>
+ 

package/src/i18n/en-US.ts

@@ -0,0 +1,52 @@
+export default {
+    permissionApply: '权限申请',
+    applyPermission: '申请权限',
+    applyReason: '申请理由',
+    approvalProcess: '审批流程',
+    applyReason1: '新入职员工申请',
+    applyReason2: '临时项目',
+    applyReason3: '数据查询与分析',
+    applyReasonPlaceholder: '请尽可能详细描述申请理由',
+    cancel: '取消',
+    submit: '确定',
+    close: '关闭',
+    viewApprovalDetail: '查看审批详情',
+	applyMore: '继续申请其他权限',
+    successTips: '已提交申请，审批通过后可拥有相关权限',
+    resoultTitle: '操作结果反馈',
+    start: '发起',
+    end: '结束',
+	noNeed: '无需审批',
+    adaptDepartment: '适用部门',
+	noApprovalProcess: '无审批流程',
+    excessTips: '一次最多可申请{number}个权限',
+    unavailableTips: '您暂无权限查看/操作该页面，请点击按钮进行申请',
+    appliedTips: '权限已申请，正在{status}...',
+    unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
+	callManager: '如有需要请联系系统管理员',
+	manager: '系统管理员',
+    availableTime: '有效期',
+	selectPlaceholder: '请选择权限点',
+	reasonPlaceholder: '请输入申请理由',
+    availiables: {
+        SEVEN_DAYS: '7天',
+        THIRTY_DAYS: '30天',
+        SIXTY_DAYS: '60天',
+        NINETY_DAYS: '90天',
+        FOREVER: '永久有效',
+    },
+    levels: {
+        L1: '低',
+        L2: '中',
+        L3: '高',
+    },
+    status: {
+        PENDING: '审批中',
+        NO: '不可申请',
+        OWNER: '已拥有',
+    },
+	operationType: {
+		QUERY: '查询',
+		MANAGE: '操作',	
+	}
+};

package/src/i18n/index.ts

@@ -0,0 +1,11 @@
+import enUS from './en-US';
+import zhCH from './zh-CH';
+
+const language: {
+    [key: string]: any;
+} = {
+    'zh-CN': zhCH,
+    'en-US': enUS,
+};
+
+export default language;

package/src/i18n/zh-CH.ts

@@ -0,0 +1,52 @@
+export default {
+    permissionApply: '权限申请',
+    applyPermission: '申请权限',
+    applyReason: '申请理由',
+    approvalProcess: '审批流程',
+    applyReason1: '新入职员工申请',
+    applyReason2: '临时项目',
+    applyReason3: '数据查询与分析',
+    applyReasonPlaceholder: '请尽可能详细描述申请理由',
+    cancel: '取消',
+    submit: '确定',
+    close: '关闭',
+    viewApprovalDetail: '查看审批详情',
+	applyMore: '继续申请其他权限',
+    successTips: '已提交申请，审批通过后可拥有相关权限',
+    resoultTitle: '操作结果反馈',
+    start: '发起',
+    end: '结束',
+	noNeed: '无需审批',
+    adaptDepartment: '适用部门',
+	noApprovalProcess: '无审批流程',
+    excessTips: '一次最多可申请{number}个权限',
+    unavailableTips: '您暂无权限查看/操作该页面，请点击按钮进行申请',
+    appliedTips: '权限已申请，正在{status}...',
+    unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
+	callManager: '如有需要请联系系统管理员',
+	manager: '系统管理员',
+    availableTime: '有效期',
+	selectPlaceholder: '请选择权限点',
+	reasonPlaceholder: '请输入申请理由',
+    availiables: {
+        SEVEN_DAYS: '7天',
+        THIRTY_DAYS: '30天',
+        SIXTY_DAYS: '60天',
+        NINETY_DAYS: '90天',
+        FOREVER: '永久有效',
+    },
+    levels: {
+        L1: '低',
+        L2: '中',
+        L3: '高',
+    },
+    status: {
+        PENDING: '审批中',
+        NO: '不可申请',
+        OWNER: '已拥有',
+    },
+	operationType: {
+		QUERY: '查询',
+		MANAGE: '操作',	
+	}
+};

package/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.css';
+import yqgPermission from './yqg-permission';
+// import yqgPermission from '../dist';
+yqgPermission.start();
+
+const app = createApp(App);
+app.mount('#app');

package/src/style.css

@@ -0,0 +1,81 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 87%);
+    background-color: #242424;
+    font-synthesis: none;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+
+button:hover {
+    border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+    padding: 2em;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #fff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}

package/src/typings/index.d.ts

@@ -0,0 +1,53 @@
+declare enum LevelType {
+	L1 = 'L1',
+	L2 = 'L2',
+	L3 = 'L3'
+};
+
+declare enum StatusType {
+	PENDING =  'PENDING',
+	OWNER = 'OWNER',
+	NO = 'NO'
+};
+
+declare type PermissionType = {
+	name: string;
+	roleId: number;
+	desc: string;
+    businessCode: string;
+    feature: string;
+	validTime?: string;
+    operationType: string;
+    securityLevel: LevelType;
+    relatedDepartments?: any[];
+	relatedDepartmentIds?: number[];
+	curDepartmentId?: number;
+	businessApplyType: StatusType;
+	oaFlowUrl?: string;
+	children?: PermissionListType;
+	admin?: any[];
+};
+declare type PermissionListType = PermissionType[];
+
+declare type LevelMapType = {
+    [key in LevelType]: {
+        color: string;
+        text: string;
+    };
+};
+
+declare type StatusMapType = {
+    [key in StatusType]: {
+        color: string;
+        text: string;
+    };
+};
+
+declare type formStateType = {
+	applyBusinessCode: string,
+	roleIds: number[],
+	roleVoList: any[],
+	applyReason: string,
+	submitWorkNumber: string,
+
+};

package/src/utils/index.ts

@@ -0,0 +1,47 @@
+import language from '../i18n';
+
+type optionsType = {
+    [key: string]: any;
+};
+const t = (key: string, options?: optionsType) => {
+    // key的格式为：'xxx.xxx.xxx'
+    const en = localStorage.getItem('permission_locale') || 'en-US';
+    const keys = key.split('.');
+    let result = language[en as string] || language['en-US'];
+    for (let i = 0; i < keys.length; i++) {
+        result = result[keys[i]];
+    }
+    // 替换参数
+    if (options) {
+        Object.keys(options).forEach((k) => {
+            result = result.replace(new RegExp(`{${k}}`, 'g'), options[k]);
+        });
+    }
+    return result || key;
+};
+
+export const throttle = (fn: Function, delay: number) => {
+	let timer: any = null;
+	return function () {
+		if (timer) {
+			return;
+		}
+		timer = setTimeout(() => {
+			fn(arguments);
+			timer = null;
+		}, delay*1000);
+	};
+};
+
+export  const formatOptions = (enumkey:string) => {
+	const enumMap = t(enumkey);
+	return Object.keys(enumMap).map((key) => {
+		return {
+			label: enumMap[key],
+			value: key
+		}
+
+  	})
+};
+
+export default t;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/yqg-permission/index.ts

@@ -0,0 +1,61 @@
+import { defineAsyncComponent, defineCustomElement } from 'vue';
+const YqgPermissionApply = defineAsyncComponent(() => import('../components/yqg-permission.vue'));
+
+const defineElement = (tagName: string): void => {
+    customElements.define(
+        tagName,
+        defineCustomElement(YqgPermissionApply, {
+            shadowRoot: false,
+            styles: [],
+        }),
+    );
+};
+
+interface Options {
+    tagName?: string;
+}
+
+interface YqgPermissionType {
+    tagName: string;
+    hasInit: boolean;
+    start: (options: Options) => void;
+}
+
+class YqgPermission implements YqgPermissionType {
+    tagName: string;
+    hasInit: boolean;
+
+    constructor() {
+        this.tagName = 'yqg-permission';
+        this.hasInit = false;
+    }
+
+    start(options?: Options): void {
+        if (!window || !window.customElements) {
+            console.error('yqg-permission is not supported in this environment');
+            return;
+        }
+        if (this.hasInit) {
+            console.warn('yqg-permission has already been initialized');
+            return;
+        }
+
+        this.hasInit = true;
+        if (options?.tagName) {
+            if (/^yqg-permission(-\S+)?/.test(options.tagName)) {
+                this.tagName = options.tagName;
+            } else {
+                console.error(`${options.tagName} is invalid tagName`);
+                return;
+            }
+        }
+
+        if (window.customElements.get(this.tagName)) {
+            return;
+        }
+
+        defineElement(this.tagName);
+    };
+}
+
+export default new YqgPermission();

package/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "typeRoots": ["node_modules/@types", "src/types"],
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "composite": true,
+    "include": ["src"]
+}

package/tsconfig.json

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

package/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "composite": true,
+    "include": ["vite.config.ts"]
+}