@yqg/permission 1.1.3-beta.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yqg/permission",
-    "version": "1.1.3-beta.0",
+    "version": "1.2.0",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "type": "module",
@@ -13,23 +13,22 @@
         "dev": "vite",
         "preview": "vite preview"
     },
-    "dependencies": {
+    "devDependencies": {
         "@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": {
+        "@types/vue": "^2.0.0",
         "@typescript-eslint/parser": "^8.13.0",
         "@vitejs/plugin-vue": "^5.1.4",
+        "ant-design-vue": "4.x",
+        "axios": "^1.7.7",
         "eslint": "^9.14.0",
         "husky": "^9",
         "lint-staged": "^13.2.0",
         "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"
     }
 }

package/src/App.vue

@@ -8,11 +8,20 @@ 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';
-}	
+}
 const changeLocale = () => {
 	locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN';
 }
@@ -29,44 +38,40 @@ const changeLocale = () => {
 			<!-- 03541 -->
 			 <!-- 02124 -->
 			  <!-- 05184 -->
-			<yqg-permission 
+			<yqg-permission
 			:permissions="permissions"
-			workNumber="H00408"
-			businessCode="PPDL"
+			workNumber="05184"
 			:color="color"
 			:locale="locale"
-			@success="() => {console.log('成功')}"
+			@onSuccess="() => {console.log('成功')}"
 			>
 			</yqg-permission>
 		</div>
-		<!-- <data class="case-card">
+		<data class="case-card">
 			<div>2:文字组件</div>
-			<yqg-permission 
-			:permissions="permissions"
-			businessCode="CRANE"
+			<yqg-permission
+			:permissions="['ddd']"
 			:color="color"
 			workNumber="02124"
 			type="text"
 			>
 			</yqg-permission>
 		</data>
-		 -->
 
-		
+
 		<!-- <div class="case-card">
 			<div>3:自定义</div>
-			<yqg-permission 
+			<yqg-permission
 			:permissions="permissions"
-			businessCode="CRANE"
 			:color="color"
 			workNumber="02124"
-			locale="zh-CN" 
+			locale="zh-CN"
 			type="custom"
 			>
 				<div style="color: red;" slot="custom">自定义按钮</div>
 			</yqg-permission>
 		</div> -->
-		
+
 	</div>
 
 </template>

package/src/axios/index.ts

@@ -1,6 +1,6 @@
 import axios from './axios';
 
-const urlPrefix = '/admin/crane';
+const urlPrefix = '/crane';
 
 type apiType = {
 	[key in string]: (params: any) => Promise<{body: any}>

package/src/components/apply-modal.vue

@@ -5,6 +5,7 @@
 	width="800px"
 	@ok="handleOk"
 	:okText="t('submit')"
+	:maskClosable="false"
 	:ok-button-props="{ loading: loading }"
 	:cancelText="t('cancel')">
 		<Form
@@ -17,7 +18,11 @@
 			:label="t('applyPermission')" 
 			name="roleIds"
 			:rules="[{ required: true, message: t('selectPlaceholder')}]">
+				<span v-if="!permissionList.length">
+					{{t('noPermissionTips')}}
+				</span>
 				<CheckboxGroup
+				v-else
 				v-model:value="formState.roleIds"
 				style="display: block;"
 				@change="onChangeHandler"
@@ -34,27 +39,20 @@
 
 			<FormItem 
 			name="applyReason"
-			:label="t('applyReason')" 
+			:label="t('applyReason')"
 			:rules="[{ 
-				required: true, message: t('reasonPlaceholder')
+				required: true, message: t('reasonPlaceholder'), trigger: ['change', 'blur']
 			}, {
-				max: 300, message: t('maxLengthTips', {length: 300})
+				max: 300, message: t('maxLengthTips', {length: 300}), trigger: ['change', 'blur']
 			}]">
 				<Textarea
-				v-model:value="formState.applyReason"
-				show-count 
-				:maxlength="300"
+				v-model:value.trim="formState.applyReason"
 				:placeholder="t('applyReasonPlaceholder')"
-				:auto-size="{ minRows: 2, maxRows: 5 }">
+				:auto-size="{ minRows: 4, maxRows: 4 }">
 				</Textarea>
-				<div style="margin-top: 4px;">
-					<Tag
-					:bordered="false"
-					style="cursor: pointer;"
-					v-for="item in reasons"
-					@click="addReasonHandler(item)"
-					:key="item">{{ item }}</Tag>
-				</div>
+				<span class="reason-tips" style="font-size: 12px">
+					{{t('applyReasonTips')}}
+				</span>
 			</FormItem>
 
 			<FormItem :label="t('approvalProcess')">
@@ -81,7 +79,6 @@
 		FormItem,
 		CheckboxGroup,
 		Textarea,
-		Tag,
 		message
   	} from 'ant-design-vue';
   	import SuccessModal from './success-modal.vue';
@@ -91,12 +88,6 @@
 		import('./checkbox-item.vue')
 	);
 
-	const reasons = [
-		t('applyReason1'),
-		t('applyReason2'),
-		t('applyReason3'),
-	]
-
   	const props = defineProps({
 		permissionList: {
 			type: Array as () => PermissionType[],
@@ -112,7 +103,7 @@
 		},
 		
  	 });
-	const emit = defineEmits(['onSuccess']);
+	const emit = defineEmits(['onSubmit', 'onSuccess']);
 	const open = defineModel({
 		required: true,
 		default: false,
@@ -131,17 +122,6 @@
 		applyReason: '',
 		submitWorkNumber: submitWorkNumber.value,
 	});
-	
-	const addReasonHandler = (item: string) => {
-		if (formState.applyReason.includes(item)) {
-			return;
-		}
-		if (!formState.applyReason || formState.applyReason.endsWith('、')) {
-			formState.applyReason += item;
-		} else {
-			formState.applyReason += `、${item}`;
-		}
-	}
 
   	const handleOk = async() => {
 		if (formState.roleIds.length > 5) {
@@ -154,8 +134,8 @@
 			const url = res?.body?.oaFlowUrl;
 			open.value = false;
 			loading.value = false;
-			
-			successModal.value?.countDown(url, () => emit('onSuccess'));
+			emit('onSubmit');
+			successModal.value?.countDown(url, () => emit('onSuccess'));	
     	})
   	}; 
 
@@ -171,7 +151,7 @@
 
   	const onChangeHandler = throttle(async () => {
 		if (formState.roleIds.length > 5) {
-			return message.warning(t('maxCountTips', {count: 5}));
+			return;
 		}
 
 		if (!formState.roleIds.length) {
@@ -184,6 +164,14 @@
 		stepNodes.value = res?.body?.nodes || [];
   	}, 0)
 
+	watch(() => formState.roleIds, (val) => {
+		// 写到watch里避免闪烁
+		if (val.length > 5) {
+			formState.roleIds.pop();
+			message.warning(t('maxCountTips', {count: 5}));
+		}
+	})
+
   	watch(() => open.value, (cur) => {
 		if (cur) {
 			formRef.value?.resetFields();

package/src/components/checkbox-item.vue

@@ -1,53 +1,72 @@
 <template>
 	<div class="crane-checkbox-line">
-		<Checkbox :value="item.roleId" :disabled="disabled" @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" 
-					:bordered="false" 
-					:color="levelMap[item.securityLevel].color"
+					v-if="item.securityLevel"
+					:bordered="false"
+					:style="{color: levelMap[item.securityLevel].color, background: levelMap[item.securityLevel].background}"
 					class="crane-tag-position">
 					{{ levelMap[item.securityLevel].text }}
 				</Tag>
-				
+
 				<span>{{t(`operationType.${item.operationType}`)}}｜
 				</span>
 				<Popover>
 					<template #content>
-						{{ item.name }}
+						<div style="max-width: 400px;">{{ item.name }}</div>
 					</template>
 					<span class="crane-text-overflow">{{ item.name }}</span>
 				</Popover>
 				<Tag
-					v-if="item.businessApplyType" 
-					:bordered="false" 
+					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' : ''">
+					: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>
 
 		<Popover v-if="item.desc">
 			<template #content>
-				{{ item.desc }}
+				<div style="max-width: 400px;">{{ item.desc }}</div>
 			</template>
 			<QuestionCircleOutlined class=" crane-week-color"/>
 		</Popover>
 
-		<Popover v-if="item.relatedDepartments">
+		<Popover v-if="item.relatedCompleteNames?.length">
 			<template #content>
-				{{t('adaptDepartment')}}：{{ item.relatedDepartments.map((item: any) => {
-					return item.name;
+				<div  style="max-width: 400px;">
+					{{t('adaptDepartment')}}：{{ item.relatedCompleteNames.map((item: any) => {
+					return item;
 				}).join('、') }}
+				</div>
 			</template>
 			<span class="crane-flex-center crane-margin-left-4">
 				<img :src="departmentImg" height="14" width="14">
-				<span class="crane-week-color crane-margin-left-4">{{ item.relatedDepartments.length }}</span>
+				<span class="crane-week-color crane-margin-left-4">{{ item.relatedCompleteNames.length }}</span>
 			</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"
@@ -69,16 +88,19 @@
 
 	const levelMap:LevelMapType = {
 		L1: {
-			color: 'green',
-			text: t('levels.L1')
+			color: '#1AA83B',
+			text: t('levels.L1'),
+			background: '#E3F9E9',
 		},
 		L2: {
-			color: 'orange',
-			text: t('levels.L2')
-		},	
+			color: '#F37D1C',
+			text: t('levels.L2'),
+			background: '#FFE4BA'
+		},
 		L3: {
-			color: 'red',
-			text: t('levels.L3')
+			color: '#F2494B',
+			text: t('levels.L3'),
+			background: '#FDCDC5'
 		},
   	};
 
@@ -98,8 +120,6 @@
   	});
 	const timeStatusOptions = formatOptions('availiables');
 	const statusMap = t('status');
-  	const StatusTypePending = 'PENDING';
-	const disabled = ['NO', 'PENDING'].includes(props.item.businessApplyType);
 	const validTime = ref('');
 
 	//1登录人所在部门 = 权限适用范围，都默认90天，不需要区分等级和类型，
@@ -138,7 +158,7 @@
  }
 .crane-checkbox-line {
 	margin-bottom: 12px;
-	display: flex; 
+	display: flex;
 	align-items: center;
 }
 .crane-checkbox-line:last-child {
@@ -149,8 +169,8 @@
 }
 .crane-tag-position {
 	margin-right: 4px;
-	font-size: 10px; 
-	padding: 2px 4px; 
+	font-size: 10px;
+	padding: 2px 4px;
 	line-height: 12px;
 	font-weight: 500;
  }
@@ -177,5 +197,5 @@
     overflow: hidden;
     text-overflow: ellipsis
  }
- 
+
 </style>

package/src/components/success-modal.vue

@@ -1,5 +1,5 @@
 <template>
-	<contextHolder></contextHolder>	
+	<contextHolder></contextHolder>
 </template>
 <script lang="ts" setup>
   	import { createVNode } from 'vue';
@@ -21,17 +21,17 @@
 			onOk: () => {
 				window.open(url);
 				modal1.destroy();
-				if (callback) {
-					callback();
-				} else {
+				callback && callback();
+				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
 					location.reload();
 				}
 			},
 			onCancel: () => {
 				modal1.destroy();
-				if (callback) {
-					callback();
-				} else {
+				callback && callback();
+				window.YQG_PERMISSION_CALLBACK && window.YQG_PERMISSION_CALLBACK();
+				if (!window.YQG_PERMISSION_CALLBACK && !callback) {
 					location.reload();
 				}
 			},