@yqg/permission 1.2.1 → 1.3.0-alpha.1

package/src/components/permission-item.vue

@@ -0,0 +1,230 @@
+<template>
+	<div class="crane-flex-center permission-item-wraper">
+		<Tag 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>
+
+		<div style="flex-shrink: 0">{{ t(`operationType.${item.operationType}`) }}｜
+		</div>
+		<Popover>
+			<template #content>
+				<div style="max-width: 400px;">{{ item.name }}</div>
+			</template>
+			<div class="crane-text-overflow">{{ item.shortName }}</div>
+		</Popover>
+		<Tag v-if="item.businessApplyType" :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] }}
+			{{ item.businessApplyType === 'TEMP_OWNER' ? `(${(item?.ownStatusVO?.dayDiff > 0 ?
+			t('lastDays', {
+			count:
+			item?.ownStatusVO?.dayDiff
+			}) : t('today'))})` : ''}}
+		</Tag>
+
+		<Popover v-if="item.desc">
+			<template #content>
+				<div style="max-width: 400px;">{{ item.desc }}</div>
+			</template>
+			<QuestionCircleOutlined class="crane-weak-color crane-margin-left-4" />
+		</Popover>
+
+		<Popover v-if="item.relatedCompleteNames?.length">
+			<template #content>
+				<div style="max-width: 400px;">
+					{{ t('adaptDepartment') }}：{{item.relatedCompleteNames.map((item: any) => {
+					return item;
+					}).join('、') }}
+				</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>
+			</div>
+		</Popover>
+
+		<!-- 数据维度 -->
+		<img v-if="item.categoryVOS?.length" :src="categoryImg" height="16" width="16" class="crane-margin-left-4 ">
+		<Popover v-if="item.categoryVOS?.length">
+			<template #content>
+				<div style="max-width: 400px;">
+					<div>{{ t('categoryTips') }}</div>
+					<div v-for="category in item.categoryVOS" :key="category.id">{{ getCategoryValue(category) }}
+					</div>
+				</div>
+			</template>
+			<div class="crane-weak-color crane-margin-left-4 crane-text-overflow">
+				{{item.categoryVOS?.map((item:
+				any) => {
+				return item.categoryName;
+				}).join('、')
+				}}325kjfhkjdhfkdshfkjdshglkjshdfgkjkjdhfkdshfkjdshglkjshdfgkjkjdhfkdshfkjdshglkjshdfgkjkjdhfkdshfkjdshglkjshdfgkjsfd
+			</div>
+		</Popover>
+
+		<!-- 选择框 -->
+		<span v-if="checkedKeys.includes(item.feature)" class="crane-weak-color crane-margin-left-12">
+			{{ t('availableTime') }}：
+			<Select v-model:value="validTime" style="width: 100px"
+				:disabled="DISABLED_STATUS.includes(item.businessApplyType)"
+				:options="DISABLED_STATUS.includes(item.businessApplyType) ? validTimeOptions : tempTimeOptions"
+				@change="onChangeTimeHandler" size="small">
+			</Select>
+		</span>
+
+	</div>
+</template>
+<script lang="ts" setup>
+import { PropType, ref, watch, defineEmits, computed } from 'vue';
+import { Tag, Popover, Select } from 'ant-design-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import departmentImg from '@/assets/department.png';
+import categoryImg from '@/assets/category.png';
+import t from '../utils';
+
+const OWNER_STATUS = 'OWNER';
+const PENDING_STATUS = 'PENDING';
+const DISABLED_STATUS = [OWNER_STATUS, PENDING_STATUS];
+
+const levelMap:LevelMapType = {
+	L1: {
+		color: '#1AA83B',
+		text: t('levels.L1'),
+		background: '#E3F9E9',
+	},
+	L2: {
+		color: '#F37D1C',
+		text: t('levels.L2'),
+		background: '#FFE4BA'
+	},
+	L3: {
+		color: '#F2494B',
+		text: t('levels.L3'),
+		background: '#FDCDC5'
+	},
+};
+
+
+let emit = defineEmits(['onChangeTime', 'updateTime']);
+
+let props = defineProps({
+	checkedKeys: {
+		type: Array as PropType<string[]>,
+		default: () => []
+	},
+	validTimeOptions: {
+		type: Array as PropType<OptionsType[]>,
+		default: () => []
+	},
+	item: {
+		type: Object as PropType<PermissionType>,
+		default: () => {}
+	}
+});
+
+const statusMap = t('status');
+const validTime = ref('');
+
+const tempTimeOptions = computed(() => {
+	return props.validTimeOptions.filter((item: any) => {
+		return item.value !== 'FOREVER';
+	});
+});
+
+
+//1登录人所在部门 = 权限适用范围，都默认90天，不需要区分等级和类型，
+//2登录人所在部门 ≠ 权限适用范围，根据等级来，高（L3）默认给7天，中（L2）默认给30天，低（L1）默认给60天
+const setDefaultTime = (item: PermissionType) => {
+	if (OWNER_STATUS.includes(item.businessApplyType)) {
+		return item.virtualOwnState?.timeStatus
+	}
+	if (PENDING_STATUS.includes(item.businessApplyType)) {
+		return item.pendingValidTime
+	}
+	const validMap = {
+		L1: 'SIXTY_DAYS',
+		L2: 'THIRTY_DAYS',
+		L3: 'SEVEN_DAYS',
+	};
+	const { relatedDepartmentIds = [], curDepartmentId = 0, securityLevel } = item;
+	if (relatedDepartmentIds?.includes(curDepartmentId as number)) {
+			item.validTime = 'NINETY_DAYS';
+		} else {
+			item.validTime = validMap[securityLevel];
+		}
+	return item.validTime;
+};
+
+const getCategoryValue = (category: CategoryType) => {
+	return `【${category.categoryName}】：${category.attributeValues?.map((item: any) => item.attributeName)?.join('、') || t('empty')}`;
+};
+
+watch(() => props.checkedKeys, (newVal, oldVal) => {
+	if ((oldVal && !oldVal.includes(props.item.feature)) && newVal.includes(props.item.feature)) {
+		validTime.value = setDefaultTime(props.item);
+		props.item.validTime = setDefaultTime(props.item);
+		emit('updateTime', props.item);
+}}, { immediate: true });
+	
+const onChangeTimeHandler = (value:any) => {
+	props.item.validTime = value;
+	emit('updateTime', props.item);
+	emit('onChangeTime', props.item);
+};
+
+
+</script>
+<style scoped>
+.crane-flex-center {
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+ }
+
+ .permission-item-wraper {
+	padding-right: 32px;
+ }
+.crane-checkbox-line {
+	line-height: 28px;
+	display: flex;
+	align-items: center;
+}
+
+.crane-tag-position {
+	margin-right: 4px;
+	font-size: 10px;
+	padding: 2px 4px;
+	line-height: 12px;
+	font-weight: 500;
+ }
+ .crane-margin-right-0 {
+	margin-right: 0;
+ }
+ .crane-margin-left-4 {
+	margin-left: 4px;
+ }
+ .crane-margin-right-4 {
+	margin-right: 4px;
+ }
+ .crane-margin-left-12 {
+	margin-left: 12px;
+ }
+ .crane-disabled-color {
+	color: #C9CDD4;
+ }
+ .crane-weak-color {
+	color: #86909C;
+ }
+ .crane-text-overflow {
+	max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+	white-space: nowrap;
+ }
+ 
+ 
+</style>

package/src/components/success-modal.vue

@@ -53,8 +53,8 @@
 	defineExpose({countDown});
 
 </script>
-<style>
-	.yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns {
-		text-align: center!important;
-	}
+<style scoped>
+:deep(.yqg-permission-modal-wrap .yqg-permission-modal-confirm-btns) {
+	text-align: center!important;
+}
 </style>

package/src/components/yqg-permission.vue

@@ -1,41 +1,29 @@
 <template>
-	<ConfigProvider
-		prefixCls="yqg-permission"
-		:theme="{
+	<ConfigProvider prefixCls="yqg-permission" :theme="{
       		token: {
         		colorPrimary: props.color,
       		}
-		}"
-	>
+		}">
 		<div class="crane-wraper">
 			<template v-if="[COM_TYPE.FLOATBUTTON, COM_TYPE.TEXT].includes(type)">
-				<FloatButton
-					ref="dragElement"
-					type="primary"
-					:tooltip="t('clickToApply')"
-					:style="{
+				<FloatButton ref="dragElement" type="primary" :tooltip="t('clickToApply')" :style="{
 						right: RIGHT_DEFAULT,
 						top: currentTop,
-					}"
-				>
+					}">
 					<template #icon>
-						<img :src="applyIconUrl" height="20" width="20"/>
+						<img :src="applyIconUrl" height="20" width="20" />
 					</template>
 				</FloatButton>
 			</template>
 			<template v-else-if="type===COM_TYPE.CUSTOM">
 				<div @click="showModal">
-					<slot name="custom"/>
+					<slot name="custom" />
 				</div>
 			</template>
 			<template v-else>
 				<!-- 可申请 -->
 				<template v-if="curStatus.status === STATUS_MAP.DEFAULT">
-					<img 
-					:src="curStatus.imageUrl" 
-					height="200" 
-					width="200" 
-					style="margin-top: calc(50vh - 273px)" />
+					<img :src="curStatus.imageUrl" height="200" width="200" style="margin-top: calc(50vh - 273px)" />
 					<div class="crane-margin10">
 						{{ t('unavailableTips') }}
 					</div>
@@ -45,31 +33,22 @@
 				</template>
 				<!-- 审批中 -->
 				<template v-if="curStatus.status === STATUS_MAP.PENDING">
-					<img 
-					:src="curStatus.imageUrl" 
-					height="200" 
-					width="200" 
-					style="margin-top: calc(50vh - 273px)" />
+					<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', {
+						<span class="crane-unapply" v-html="t('appliedTips', {
 								status: `<style>.crane-unapply span {color: orange;}</style><span>${curStatus.tips}</span>`
 							})">
 						</span>
 					</div>
 					<div>
-						<Button class="crane-margin-right10" @click="goViewApproval">{{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-if="curStatus.status === STATUS_MAP.NO" class="crane-wraper">
-					<img 
-					:src="curStatus.imageUrl" 
-					height="200" 
-					width="200" 
-					style="margin-top: calc(50vh - 273px)" />
+					<img :src="curStatus.imageUrl" height="200" width="200" style="margin-top: calc(50vh - 273px)" />
 					<div class="crane-margin10">
 						{{ t('unapplyTips') }}
 						<Popover>
@@ -83,13 +62,8 @@
 			</template>
 		</div>
 
-		 <ApplyModal 
-		 v-model="open" 
-		 :permissionList="permissionList" 
-		 :workNumber="workNumber"
-		 :businessCode="businessCode"
-		 @onSuccess="() => emit('onSuccess')"
-		 @onSubmit="getPermissions">
+		<ApplyModal v-model="open" :permissionList="permissionList" :spining="loading" :workNumber="workNumber"
+			:businessCode="businessCode" @onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions">
 		</ApplyModal>
 
 	</ConfigProvider>
@@ -97,12 +71,13 @@
 <script lang="ts" setup>
 	import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
 	import { Button, ConfigProvider, Popover , message, FloatButton} from 'ant-design-vue';
-	import applyUrl from '@/assets/applying.png';
 	import applyIconUrl from '@/assets/applyicon.png';
 	import noauthority from '@/assets/noauthority.png';
 	import Http from '../axios/index';
 	import t from '../utils';
 	import useDraggable from '../hooks/useDragable';
+	import useStatus from '../hooks/useStatus';
+import useFormat from '../hooks/useFormat';
 
 	const STATUS_MAP = {
 		DEFAULT: 'DEFAULT',
@@ -154,6 +129,7 @@
 	
   	const open = ref(false);
 	const curApproving = ref<PermissionType>();
+	const loading = ref(false);
   	let permissionList = ref<PermissionListType>([]);
   	let curStatus = ref<Record<string, any>>({
 		imageUrl: noauthority,
@@ -175,70 +151,6 @@
 		return code.split('.')[0];
 	})
 
-  	const formatPermissionsData = (data: PermissionListType) => {
-		const arr:PermissionListType = [];
-		const flattenData = (list: PermissionListType) => {
-			list.forEach((item) => {
-				item.name = item.name.replace(/^[^.]+\./, '');
-				if (item.children) {
-					flattenData(item.children);
-				} else {
-					arr.push(item);
-				}
-			})
-		};
-		flattenData(data);
-
-		// 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
-		// 然后再根据 L1, L2, L3 排序
-		const sort = [ null, 'TEMP_OWNER', 'PENDING', 'OWNER', 'NO'];
-		const levelSort = ['L1', 'L2', 'L3'];
-		const sortMap = new Map(sort.map((value, index) => [value, index]));
-		const levelSortMap = new Map(levelSort.map((value, index) => [value, index]));
-
-		arr.sort((a, b) => {
-			return (sortMap.get(a.businessApplyType) ?? 0) - (sortMap.get(b.businessApplyType) ?? 0) 
-				|| (levelSortMap.get(a.securityLevel) ?? 0) - (levelSortMap.get(b.securityLevel) ?? 0);
-		});
-
-		return arr;
-  	}
-
-  	const getStatus = (data: PermissionListType) => {
-		if (!data.length) {
-			return {
-				imageUrl: noauthority,
-				status: ''
-			};
-		}
-
-		const current = data.find((per) => per.businessApplyType === STATUS_MAP.PENDING);
-		const cannotApply = data.every((per) => per.businessApplyType === STATUS_MAP.NO);
-
-		if (current) {
-			curApproving.value = current;
-			return {
-				imageUrl: applyUrl,
-				status: STATUS_MAP.PENDING,
-				tips: t('status.PENDING'),
-				url: current.oaFlowUrl,
-			};
-	  	};
-
-	  	if (cannotApply) {
-			return {
-				imageUrl: noauthority,
-				status: STATUS_MAP.NO,
-				tips: data[0].admin?.map((item) => `${item.name}(${item.departmentName})`)?.join('、'),
-			};
-	  	};
-
-	  	return {
-			imageUrl: noauthority,
-			status: STATUS_MAP.DEFAULT,
-		}
-  	};
-
 	const goViewApproval = () => {
 		const url = curApproving.value?.oaFlowUrl;
 		if (!url) return;
@@ -255,11 +167,13 @@
 			workNumber,
 			features: permissions.toString(),
 		};
+		
+		loading.value = true;
 
 		const res = await Http.getPermissions(params);
-		permissionList.value = formatPermissionsData(res.body || []);
-		
-		curStatus.value = getStatus(permissionList.value);
+		permissionList.value = useFormat(res.body || []);
+		curStatus.value = useStatus(permissionList.value, curApproving);
+		loading.value = false;
   	};
 
   	const showModal = () => {
@@ -292,5 +206,4 @@
 		margin-right: 10px;
 	}
 </style>
- 
-../hooks/useDragable
+ ../hooks/useSort../hooks/useFormat

package/src/hooks/useAttributesCache.ts

@@ -0,0 +1,21 @@
+import { watch, reactive } from 'vue';
+import Http from '../axios/index';
+
+const categoryValuesMap = reactive<Record<number, []>>({});
+export default function useAttributesCache(categoryList: CategoryType[]) {
+
+    watch(() => categoryList, (newVal) => {
+        newVal.forEach(async (item) => {
+            if (!categoryValuesMap[item.id]) {
+                const res = await Http.getCategoryValues(item.id);
+                const { flatAttributeValue, treeAttributeValue, showWay } = res.body;
+                categoryValuesMap[item.id] = showWay === 'TREE' ? treeAttributeValue : flatAttributeValue;
+            }
+        });
+
+    }, { immediate: true });
+
+    return {
+        categoryValuesMap
+    }
+}

package/src/hooks/useCategory.ts

@@ -0,0 +1,20 @@
+
+
+import { deepTree } from '../utils';
+export default function useCategory(tree: PermissionType[], checkedIds: string[]): CategoryType[] {
+    const categoryList: CategoryType[] = [];
+    deepTree(tree, (item) => {
+        if (!item.children && checkedIds.includes(item.feature)) {
+            item.categoryVOS.forEach((category: any) => {
+                category.attributeValueIds_view = category?.attributeValueIds || [];  
+                categoryList.push(category);
+            });
+        }
+    });
+    // 需要去重
+    const map = new Map();
+    categoryList.forEach((item) => {
+        map.set(item.id, item);
+    });
+    return Array.from(map.values());
+}

package/src/hooks/useDragable.ts

@@ -11,7 +11,6 @@ export default function useDraggable(props: { top: any }, showModal: () => void)
     const dragElement = ref<any>(null);
 
     watch(() => props.top, (newVal) => {
-        console.log('newVal', newVal);
         currentTop.value = newVal;
     }, { immediate: true });
 
@@ -39,6 +38,9 @@ export default function useDraggable(props: { top: any }, showModal: () => void)
     const onMouseMove = (e: MouseEvent, el: HTMLElement) => {
         if (!isDragging.value) return;
 
+        e.preventDefault();  // 阻止默认行为
+        e.stopPropagation(); // 阻止事件冒泡
+
         // 移动的时候yqg-permission-tooltip隐藏
         const tooltip = document.querySelector('.yqg-permission-tooltip') as HTMLElement;
         if (tooltip) {
@@ -61,29 +63,26 @@ export default function useDraggable(props: { top: any }, showModal: () => void)
         e.preventDefault();  // 阻止默认行为
         e.stopPropagation(); // 阻止事件冒泡
 
+        // 卸载拖拽
+        isDragging.value = false;
+        // 清除事件监听
+        document.removeEventListener('mousemove', (e) => onMouseMove(e, el));
+        document.removeEventListener('mouseup', (e) => onMouseUp(e, el));
+
         // // 获取元素当前的位置
         const { x: currentX, y: currentY } = getPosition(el);
         if ( Math.abs(currentY - initialY.value) < 10 && Math.abs(currentX - initialX.value) < 10) {
             showModal();
-            // 卸载拖拽
-            isDragging.value = false;
 
             return;
         }
 
-
-        isDragging.value = false;
         const { clientY } = e;
-
         // 在鼠标松开时设置x为初始位置，y为鼠标当前位置
         const { x, y } = constrainToScreen(initialX.value, clientY - currentTop.value + initialY.value, el);
         el.style.transition = 'all 0.3s';
         el.style.left = `${x}px`;
         el.style.top = `${y}px`;
-
-        // 清除事件监听
-        document.removeEventListener('mousemove', (e) => onMouseMove(e, el));
-        document.removeEventListener('mouseup', (e) => onMouseUp(e, el));
     };
 
     // 鼠标按下时的处理函数

package/src/hooks/useFormat.ts

@@ -0,0 +1,56 @@
+const Category = {
+    AUTO: 'AUTO',
+    MANAL: 'MANAL'
+}
+const StatusType = {
+    PENDING: 'PENDING',
+    NO: 'NO',
+    OWNER: 'OWNER',
+    TEMP_OWNER: 'TEMP_OWNER'
+}
+export default function useFormat(tree: PermissionListType) {
+    function sortTree(
+        tree: PermissionListType,
+        sortMap: Map<string | null, number>,
+        levelSortMap: Map<string | null, number>
+    ) {
+        return tree.map((node) => {
+            node.key = node.feature;
+
+            if (!node.children || node.children.length === 0) {
+                node.categoryVOS = (node.categoryVOS || []).filter((item: any) => item.configWay !== Category.AUTO);
+
+                if ([StatusType.NO].includes(node.businessApplyType)) {
+                    node.disabled = true;
+                }
+
+                if ([StatusType.OWNER, StatusType.PENDING].includes(node.businessApplyType) && !node.categoryVOS.length) {
+                    node.disabled = true;
+                }
+            } else {
+                // 递归对子节点进行排序
+                node.children = sortTree(node.children, sortMap, levelSortMap);
+
+                // 检查所有子节点是否 `disabled === true`
+                if (node.children.every((child) => child.disabled)) {
+                    node.disabled = true;
+                }
+            }
+
+            return node;
+        }).sort((a, b) => {
+            return (sortMap.get(a.businessApplyType) ?? 0) - (sortMap.get(b.businessApplyType) ?? 0)
+                || (levelSortMap.get(a.securityLevel) ?? 0) - (levelSortMap.get(b.securityLevel) ?? 0);
+        });
+    }
+
+    // 需要排序，规则：businessApplyType 为 null 在前面， PENDING. OWNER 在中间， NO 在后面
+    // 然后再根据 L1, L2, L3 排序
+    const sort = [null, StatusType.TEMP_OWNER, StatusType.PENDING, StatusType.OWNER, StatusType.NO];
+    const levelSort = [null, "L1", "L2", "L3"];
+    const sortMap = new Map(sort.map((value, index) => [value, index]));
+    const levelSortMap = new Map(levelSort.map((value, index) => [value, index]));
+
+    return sortTree(tree, sortMap, levelSortMap);
+}
+

package/src/hooks/useStatus.ts

@@ -0,0 +1,82 @@
+
+
+import noauthority from '@/assets/noauthority.png';
+import applyUrl from '@/assets/applying.png';
+import t from '../utils';
+import type { Ref } from 'vue';
+
+interface StatusResult {
+    imageUrl: string;
+    status: string;
+    tips?: string;
+    url?: string;
+}
+
+
+
+const STATUS_MAP = {
+    PENDING: 'PENDING',
+    NO: 'NO',
+    DEFAULT: 'DEFAULT',
+};
+
+export default function useStatus(
+    tree: PermissionListType, 
+    curApproving: Ref<PermissionType | undefined, PermissionType | undefined>
+): StatusResult {
+    if (!tree.length) {
+        return {
+            imageUrl: noauthority,
+            status: '',
+        };
+    }
+
+    // 递归获取所有叶子节点
+    const getLeafNodes = (nodes: PermissionListType): PermissionListType => {
+        let leafNodes: PermissionListType = [];
+        nodes.forEach((node) => {
+
+            if (node.children && node.children.length > 0) {
+                leafNodes = leafNodes.concat(getLeafNodes(node.children));
+            } else {
+                leafNodes.push(node);
+            }
+        });
+        return leafNodes;
+    };
+
+    const leafNodes = getLeafNodes(tree);
+
+    // 从叶子节点中查找 current
+    const current = leafNodes.find((per) => per.businessApplyType === STATUS_MAP.PENDING);
+
+    // 判断是否所有叶子节点都是 NO
+    const cannotApply = leafNodes.every((per) => per.businessApplyType === STATUS_MAP.NO);
+
+    if (current) {
+        curApproving.value = current;
+        return {
+            imageUrl: applyUrl,
+            status: STATUS_MAP.PENDING,
+            tips: t('status.PENDING'),
+            url: current.oaFlowUrl,
+        };
+    }
+
+    if (cannotApply) {
+        const adminNames = leafNodes
+            .flatMap((node) => node.admin?.map((item) => `${item.name}(${item.departmentName})`))
+            .filter(Boolean)
+            .join('、');
+        return {
+            imageUrl: noauthority,
+            status: STATUS_MAP.NO,
+            tips: adminNames,
+        };
+    }
+
+    return {
+        imageUrl: noauthority,
+        status: STATUS_MAP.DEFAULT,
+    };
+};