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

package/src/components/category-selector.vue

@@ -8,9 +8,10 @@
                 v-show="categoryValuesMap[item.id]?.length"
                 :rules="[{ required: true, message: t('pleaseChoose'), trigger: ['change', 'blur'] }]">
                 <TreeSelect treeCheckable treeDefaultExpandAll :tree-data="categoryValuesMap[item.id]" showSearch
-                    allowClear v-model:value="item.attributeValueIds_view" treeNodeFilterProp="attributeName"
-                    v-model:searchValue="searchValue" :fieldNames="{ label: 'attributeName', value: 'id' }"
-                    treeNodeLabelProp="attributeName" :show-checked-strategy="SHOW_PARENT">
+                    allowClear v-model:value="item.attributeValueIds_view"
+                    treeNodeFilterProp="attributeName" v-model:searchValue="searchValue"
+                    :fieldNames="{ label: 'attributeName', value: 'id' }" treeNodeLabelProp="attributeName"
+                    :show-checked-strategy="SHOW_PARENT">
                     <template #title="{ attributeName }">
                         <span v-if="searchValue.toLowerCase() && attributeName.includes(searchValue.toLowerCase())"
                             style="color: #1677ff; font-weight: bold;">{{ attributeName
@@ -21,6 +22,9 @@
                 <span v-if="item.attributeValueIds_view?.includes(-1)" style="color: #ff4d4f; font-size: 12px;">
                     {{ t('categoryChangeTips', { category: item.categoryName }) }}
                 </span>
+                <span v-if="getDeleteAttributesNames(item)" style="color: #ff4d4f; font-size: 12px;">
+                    {{ t('deleteCategoryTips', { categorys: getDeleteAttributesNames(item) }) }}
+                </span>
             </FormItem>
         </template>
     </Form>
@@ -32,7 +36,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;
@@ -44,6 +48,14 @@ const props = defineProps({
     },
 })
 
+
+const formRef = ref();
+const searchValue = ref('');
+const { 
+    categoryValuesMap, 
+    getDeleteAttributesNames 
+} = useAttributesCache(props);
+
 const categoryInfo = computed(() => {
     return {
         categoryList: props.categoryList
@@ -53,20 +65,22 @@ const showForm = computed(() => {
     // 判断是否有数据
     return Object.values(categoryValuesMap).some(item => item.length > 0);
 });
-const formRef = ref();
-const searchValue = ref('');
-const { categoryValuesMap } = useAttributesCache(props);
+
 
 // 返回promise
 const validate = () => {
     return new Promise((resolve, reject) => {
+        if (!formRef.value) {
+            resolve(true);
+            return;
+        }
         formRef.value.validate().then(() => {
             resolve(true);
         }).catch(() => {
             reject(false);
         });
     });
-}
+};
 
 defineExpose({
     validate
@@ -75,7 +89,6 @@ defineExpose({
 </script>
 
 <style scoped>
-
 .crane-category-wraper {
     margin-top: 16px;
     padding: 12px;
@@ -97,11 +110,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 +131,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">
@@ -34,16 +34,17 @@
 
 		<Popover v-if="item.relatedCompleteNames?.length">
 			<template #content>
-				<div style="max-width: 400px;">
-					{{ t('adaptDepartment') }}：{{item.relatedCompleteNames.map((item: any) => {
-					return item;
-					}).join('、') }}
+				<div class="crane-department-wraper">
+					<div>
+						{{ t('adaptDepartment') }}：
+					</div>
+					<div v-for="item in item.relatedCompleteNames">{{ item }}</div>
 				</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 +60,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 +89,7 @@ import t from '../utils';
 
 const OWNER_STATUS = 'OWNER';
 
-const levelMap:LevelMapType = {
+const levelMap: LevelMapType = {
 	L1: {
 		color: '#1AA83B',
 		text: t('levels.L1'),
@@ -120,7 +121,7 @@ let props = defineProps({
 	},
 	item: {
 		type: Object as PropType<PermissionType>,
-		default: () => {}
+		default: () => { }
 	}
 });
 
@@ -136,7 +137,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);
@@ -145,15 +146,21 @@ const onChangeTimeHandler = () => {
 
 </script>
 <style scoped>
+.crane-department-wraper {
+	max-width: 600px;
+	max-height: 300px;
+	overflow-y: scroll;
+}
 .crane-flex-center {
 	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 +173,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>