@yqg/permission 1.2.0 → 1.3.0-alpha.0

package/src/components/checkbox-item.vue

@@ -1,201 +0,0 @@
-<template>
-	<div class="crane-checkbox-line">
-		<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"
-					: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>
-						<div style="max-width: 400px;">{{ item.name }}</div>
-					</template>
-					<span class="crane-text-overflow">{{ item.name }}</span>
-				</Popover>
-				<Tag
-					v-if="item.businessApplyType && item.businessApplyType !== 'TEMP_OWNER'"
-					:bordered="false"
-					class="crane-tag-position crane-margin-left-4 crane-margin-right-0"
-					: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>
-				<div style="max-width: 400px;">{{ item.desc }}</div>
-			</template>
-			<QuestionCircleOutlined class=" crane-week-color"/>
-		</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>
-			<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.relatedCompleteNames.length }}</span>
-			</span>
-		</Popover>
-
-		<span v-if="checkedIds.includes(item.roleId)" class="crane-week-color crane-margin-left-12">
-			{{t('availableTime')}}：
-			<Select
-				v-model:value="validTime"
-		      	style="width: 100px"
-		      	:options="timeStatusOptions"
-				@change="onChangeTimeHandler"
-			  	size="small"
-		    >
-		    </Select>
-		</span>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { PropType, ref} from 'vue';
-	import {Checkbox, Tag, Popover, Select } from 'ant-design-vue';
-	import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-	import departmentImg from '@/assets/department.png';
-	import t, {formatOptions} from '../utils';
-
-	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 props = defineProps({
-		item: {
-			type: Object as PropType<PermissionType>,
-			default: () => {}
-		},
-		checkedIds: {
-			type: Array as PropType<number[]>,
-			default: []
-		},
-		onChangeTime: {
-			type: Function as PropType<() => void>,
-			default: () => {}
-		}
-  	});
-	const timeStatusOptions = formatOptions('availiables');
-	const statusMap = t('status');
-	const validTime = ref('');
-
-	//1登录人所在部门 = 权限适用范围，都默认90天，不需要区分等级和类型，
-	//2登录人所在部门 ≠ 权限适用范围，根据等级来，高（L3）默认给7天，中（L2）默认给30天，低（L1）默认给60天
-	const setDefaultTime = (item: PermissionType) => {
-		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 onChangeTimeHandler = (value: any) => {
-		props.item.validTime = value;
-		props.onChangeTime();
-  	};
-
-	const onCheck = (e: any) => {
-		if (e.target.checked) {
-			validTime.value = setDefaultTime(props.item);
-		}
-	};
-
-</script>
-<style scoped>
-.crane-flex-center {
-	display: flex;
-	align-items: center;
- }
-.crane-checkbox-line {
-	margin-bottom: 12px;
-	display: flex;
-	align-items: center;
-}
-.crane-checkbox-line:last-child {
-	margin-bottom: 0;
-}
-.crane-checkbox-label {
-	max-width: 346px;
-}
-.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-week-color {
-	color: #86909C;
- }
- .crane-text-overflow {
-	flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis
- }
-
-</style>