@yqg/permission 1.2.1 → 1.3.0-alpha.0

package/src/components/apply-modal.vue

@@ -1,182 +1,279 @@
 <template>
-	<Modal
-	v-model:open="open"
-	:title="t('permissionApply')"
-	width="800px"
-	@ok="handleOk"
-	:okText="t('submit')"
-	:maskClosable="false"
-	:ok-button-props="{ loading: loading }"
-	:cancelText="t('cancel')">
-		<Form
-		ref="formRef"
-		:model="formState"
-		:labelCol="{ span: 4 }"
-        :wrapperCol="{ span: 19 }">
-
-			<FormItem 
-			: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"
-				>
-					<CheckboxItem
-					v-for="item in permissionList"
-					:key="item.roleId"
-					:item="item"
-					:checkedIds="formState.roleIds"
-					:onChangeTime="onChangeHandler">
-					</CheckboxItem>
-				</CheckboxGroup>
-			</FormItem>
+	<Modal v-model:open="open" :title="t('permissionApply')" width="1100px" @ok="handleOk" :okText="t('submit')"
+		:maskClosable="false" :ok-button-props="{ loading: loading }" :cancelText="t('cancel')">
+		<Form ref="formRef" :model="formState" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }">
+			<FormItem :label="t('applyPermission')" name="features"
+				:rules="[{ required: true, message: t('selectPlaceholder')}]">
+				<Spin :spinning="spining">
+					<span v-if="!permissionList.length">
+						{{t('noPermissionTips')}}
+					</span>
 
-			<FormItem 
-			name="applyReason"
-			:label="t('applyReason')"
-			:rules="[{ 
-				required: true, message: t('reasonPlaceholder'), trigger: ['change', 'blur']
-			}, {
-				max: 300, message: t('maxLengthTips', {length: 300}), trigger: ['change', 'blur']
-			}]">
-				<Textarea
-				v-model:value.trim="formState.applyReason"
-				:placeholder="t('applyReasonPlaceholder')"
-				:auto-size="{ minRows: 4, maxRows: 4 }">
-				</Textarea>
+					<Tree checkable :defaultExpandAll="true" :tree-data="permissionList" :height="200"
+						:checkedKeys="formState.features" class="crane-permission-tree" @check="onCheck">
+						<template #title="item: PermissionType">
+							<div v-if="item.children && item.children.length">
+								{{ item.shortName }}
+							</div>
+							<PermissionItem v-else :checkedKeys="formState.features" :item="item"
+								@onChangeTime="onChangeTime" @updateTime="setDefaultTime"
+								:validTimeOptions="validTimeOptions" />
+						</template>
+					</Tree>
+					<CategorySelector v-if="categoryList.length" :categoryList="categoryList" ref="categoryRef" />
+				</Spin>
+			</FormItem>
+			<FormItem name="applyReason" :label="t('applyReason')" :rules="[{ 
+		required: true, message: t('reasonPlaceholder'), trigger: ['change']
+	}, {
+		max: 300, message: t('maxLengthTips', {length: 300}), trigger: ['change', 'blur']
+	}]">
+				<Textarea v-model:value.trim="formState.applyReason" :placeholder="t('applyReasonPlaceholder')"
+					:auto-size="{ minRows: 4, maxRows: 4 }">
+		</Textarea>
 				<span class="reason-tips" style="font-size: 12px">
 					{{t('applyReasonTips')}}
 				</span>
 			</FormItem>
 
 			<FormItem :label="t('approvalProcess')">
-				<ApprovalSteps :stepNodes="stepNodes"/>
+				<ApprovalSteps :stepNodes="stepNodes" />
 			</FormItem>
 		</Form>
 
-		<SuccessModal ref="successModal"/>
+		<SuccessModal ref="successModal" />
 
-	 </Modal>
+	</Modal>
 </template>
 <script lang="ts" setup>
-	import { 
-		reactive, 
-		defineAsyncComponent, 
-		toRef, 
-		ref, 
-		watch,
-	} from 'vue';
-	import Http from '../axios/index';
-	import {
-		Modal,
-		Form,
-		FormItem,
-		CheckboxGroup,
-		Textarea,
-		message
-  	} from 'ant-design-vue';
-  	import SuccessModal from './success-modal.vue';
-	import ApprovalSteps from './approval-steps.vue';
-  	import t, {throttle} from '../utils';
-	const CheckboxItem = defineAsyncComponent(() =>
-		import('./checkbox-item.vue')
-	);
-
-  	const props = defineProps({
-		permissionList: {
-			type: Array as () => PermissionType[],
-			default: () => []
-		},
-		businessCode: {
-			type: String,
-			default: ''
-		},
-		workNumber: {
-			type: String,
-			default: ''
-		},
+import { 
+	reactive, 
+	defineAsyncComponent, 
+	toRef, 
+	ref, 
+	watch,
+	PropType,
+	computed
+} from 'vue';
+import Http from '../axios/index';
+import {
+	Modal,
+	Form,
+	FormItem,
+	Textarea,
+	message,
+	Tree,
+	Spin
+} from 'ant-design-vue';
+import SuccessModal from './success-modal.vue';
+import ApprovalSteps from './approval-steps.vue';
+import t, {throttle, deepTree} from '../utils';
+import useCategory from '../hooks/useCategory';
+
+const CategorySelector = defineAsyncComponent(() =>
+	import('./category-selector.vue')
+);
+const PermissionItem = defineAsyncComponent(() =>
+	import('./permission-item.vue')
+);
+
+const props = defineProps({
+	permissionList: {
+		type: Array as PropType<any[]>,
+		default: () => []
+	},
+	workNumber: {
+		type: String,
+		default: ''
+	},
+	spining: {
+		type: Boolean,
+		default: false
+	}
+	
+ });
+const emit = defineEmits(['onSubmit', 'onSuccess']);
+
+const open = defineModel({
+	required: true,
+	default: false,
+});
+const loading = ref(false);
+const permissionList = computed(() => props.permissionList);
+const submitWorkNumber = toRef(props, 'workNumber');
+const successModal = ref<InstanceType<typeof SuccessModal>>();
+const formRef = ref();
+const categoryRef = ref();
+let stepNodes = ref([]);
+const categoryList = ref<CategoryType[]>([]);
+const validTimeOptions = ref([]);
+const formState = reactive<formStateType>({
+	features: [],
+	roleVoList: [],
+	applyReason: '',
+	dataRule: {
+		ruleItems: [],
+	},
+	submitWorkNumber: submitWorkNumber.value,
+});
+
+const getValidTimeOptions = async () => {
+	let res = await Http.getValidTimeOptions();
+	validTimeOptions.value = res.body;
+};
+
+getValidTimeOptions();
+const handleOk = async() => {
+	await Promise.all([formRef.value.validate(), categoryRef.value?.validate()])
+	loading.value = true; 
+	const params = getParams();
+	let res = await Http.submitApply(params);
+	const url = res?.body?.oaFlowUrl;
+	open.value = false;
+	loading.value = false;
+	emit('onSubmit');
+	successModal.value?.countDown(url, () => emit('onSuccess'));	
+}; 
+
+
+const getParams = () => {
+	formState.submitWorkNumber = submitWorkNumber.value;
+	const roleVoList:{
+		roleId: number;
+		validTime: string;
+	}[] = [];
+
+	const ruleItems: { attributeCategoryId: number, attributeValueIds: number[]}[] = [];
+	categoryList.value.forEach((category: CategoryType) => {
+		// 添加有数据范围值的属性
+		if (category.attributeValueIds_view.length) {
+			ruleItems.push({
+				attributeCategoryId: category.id,
+				attributeValueIds: category.attributeValueIds_view
+			})
+		};
 		
- 	 });
-	const emit = defineEmits(['onSubmit', 'onSuccess']);
-	const open = defineModel({
-		required: true,
-		default: false,
-	});
-	const loading = ref(false);
-	const permissionList = toRef(props, 'permissionList');
-	const businessCode = toRef(props, 'businessCode');
-	const submitWorkNumber = toRef(props, 'workNumber');
-	const successModal = ref<InstanceType<typeof SuccessModal>>();
-	const formRef = ref();
-	let stepNodes = ref([]);
-	const formState = reactive<formStateType>({
-		applyBusinessCode: businessCode.value,
-		roleIds: [],
-		roleVoList: [],
-		applyReason: '',
-		submitWorkNumber: submitWorkNumber.value,
 	});
 
-  	const handleOk = async() => {
-		if (formState.roleIds.length > 5) {
-			return message.warning(t('maxCountTips', {count: 5}));
+	deepTree(permissionList.value, (item: any) => {
+		if (!item.children && formState.features.includes(item.feature)) {
+			roleVoList.push({
+				roleId: item.roleId,
+				validTime: item.validTime
+			});
 		}
-		formRef.value.validate().then(async() => {
-			loading.value = true;
-			const params = getParams();
-			let res = await Http.submitApply(params);
-			const url = res?.body?.oaFlowUrl;
-			open.value = false;
-			loading.value = false;
-			emit('onSubmit');
-			successModal.value?.countDown(url, () => emit('onSuccess'));	
-    	})
-  	}; 
-
-  	const getParams = () => {
-		formState.roleVoList = formState.roleIds.map((roleId) => {
-			return {
-				roleId,
-				validTime: permissionList.value.find((item) => item.roleId === roleId)?.validTime
-			};
-		});
-		return formState;
-  	}
-
-  	const onChangeHandler = throttle(async () => {
-		if (formState.roleIds.length > 5) {
-			return;
+	})
+	formState.roleVoList = roleVoList
+	formState.dataRule.ruleItems = ruleItems;
+	return formState;
+}
+
+const setDefaultTime = (permission: PermissionType) => {
+	// 找到当前节点。设置时间
+	deepTree(permissionList.value, (item: any) => {
+		if (item.feature === permission.feature) {
+			item.validTime = permission.validTime;
 		}
+	})
+}
 
-		if (!formState.roleIds.length) {
-			stepNodes.value = [];
-			return;
+const onChangeTime = throttle(async () => {
+	const params = getParams();
+	if (params.roleVoList.length === 0) {
+		stepNodes.value = [];
+		return;
+	}
+	let res = await Http.getFlowPreview(params);
+	stepNodes.value = res?.body?.nodes || [];
+}, 0)
+const onCheck = (checkedIds:any, info:any) => {
+	// 如果选择的是子节点，判断是否超过5个，超过的话，删除当前选的节点，并给予提示
+	// 如果选择的是父节点，判断是否超过5个，超过的话，从当前选择的父节点的叶子节点中删除多出的个数，并给予提示
+	let total = 0;
+	let curTotal = 0;
+	deepTree(permissionList.value, (item: any) => {
+		if (!item.children && checkedIds.includes(item.feature)) {
+			total += 1;
 		}
-		const params = getParams();
-		let res = await Http.getFlowPreview(params);
-		
-		stepNodes.value = res?.body?.nodes || [];
-  	}, 0)
-
-	watch(() => formState.roleIds, (val) => {
-		// 写到watch里避免闪烁
-		if (val.length > 5) {
-			formState.roleIds.pop();
-			message.warning(t('maxCountTips', {count: 5}));
+		if (!item.children && formState.features.includes(item.feature)) {
+			curTotal += 1;
 		}
 	})
 
-  	watch(() => open.value, (cur) => {
-		if (cur) {
-			formRef.value?.resetFields();
-			stepNodes.value = [];
-		}
-  	})
+	if (curTotal === 5) {
+		message.warning(t('maxCountTips', {count: 5}));
+		return;
+	}
+	onChangeTime();
+	if (!info.node.children && total > 5) {
+		//选择的是子节点
+		formState.features = formState.features.filter((item) => item !== info.node.feature);
+		message.warning(t('maxCountTips', {count: 5}));
+		return;
+	}
+
+	if (info.node.children && total > 5) {
+		//选择的是父节点，则找出刚选的所有叶子节点， 并且删除其中多余(total-5)的节点
+		const diff = total - 5;
+		let leafNodes:string[] = [];
+		deepTree([info.node], (item: any) => {
+			if (!item.children && !formState.features.includes(item.feature)) {
+				leafNodes.push(item.feature);
+			}
+		})
+		// 从后面删除多余的节点
+		leafNodes = leafNodes.slice(0, leafNodes.length - diff);
+		formState.features = formState.features.concat(leafNodes);
+		message.warning(t('maxCountTips', {count: 5}));
+		return;
+	};
+
+	formState.features = checkedIds;
+
+	// 收集需要展示的数据属性
+	categoryList.value = useCategory(permissionList.value, formState.features);
+
+	// 预览审批流程
+}
+
+watch(() => open.value, (cur) => {
+	if (cur) {
+		formRef.value?.resetFields();
+		categoryList.value = [];
+		stepNodes.value = [];
+	}
+})
+</script>
+
+<style scoped>
+:deep(.yqg-permission-tree-list) {
+	margin-top: 4px;
+}
+:deep(.yqg-permission-tree-node-selected) {
+	background: none !important;
+}
+
+:deep(.yqg-permission-tree-checkbox) {
+	margin: 0 !important;
+}
+
+:deep(.yqg-permission-tree-switcher-noop) {
+	width: 18px !important;
+}
+
+:deep(.yqg-permission-tree-checkbox+span:hover) {
+	background: none !important;
+}
+:deep(.yqg-permission-tree-treenode) {
+	width: 100%!important;
+}
+
+:deep(.yqg-permission-tree-node-content-wrapper-normal) {
+	width: 100% !important;
+}
+
+:deep(.yqg-permission-tree-title) {
+	width: 100% !important;
+}
 
-  </script>
+</style>

package/src/components/category-selector.vue

@@ -0,0 +1,130 @@
+<template>
+    <Form class="crane-category-wraper" :model="categoryInfo" ref="formRef" v-if="showForm">
+        <div class="crane-required">{{ t('category') }}</div>
+        <div class="crane-category-tips">{{ t('categotySelectTips') }}</div>
+        <div class="crane-category-line"></div>
+        <template v-for="(item, index) in categoryInfo.categoryList" :key="item.id">
+            <FormItem :label="item.categoryName" :name="['categoryList', index, 'attributeValueIds_view']"
+                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">
+                    <template #title="{ attributeName }">
+                        <span v-if="searchValue.toLowerCase() && attributeName.includes(searchValue.toLowerCase())"
+                            style="color: #1677ff; font-weight: bold;">{{ attributeName
+                            }}</span>
+                        <span v-else>{{ attributeName }}</span>
+                    </template>
+                </TreeSelect>
+                <span v-if="item.attributeValueIds_view?.includes(-1)" style="color: #ff4d4f; font-size: 12px;">
+                    {{ t('categoryChangeTips') }}
+                </span>
+            </FormItem>
+        </template>
+    </Form>
+</template>
+<script lang="ts" setup>
+import {
+    Form,
+    FormItem,
+    TreeSelect
+} from 'ant-design-vue';
+
+import { defineProps, PropType, ref, computed, defineExpose} from 'vue';
+import t from '../utils';
+import useAttributesCache from '../hooks/useAttributesCache';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+const props = defineProps({
+    categoryList: {
+        type: Array as PropType<CategoryType[]>,
+        default: () => []
+    },
+})
+
+const categoryInfo = computed(() => {
+    return {
+        categoryList: props.categoryList
+    }
+})
+const showForm = computed(() => {
+    // 判断是否有数据
+    return Object.values(categoryValuesMap).some(item => item.length > 0);
+});
+const formRef = ref();
+const searchValue = ref('');
+const { categoryValuesMap } = useAttributesCache(props.categoryList);
+
+// 返回promise
+const validate = () => {
+    return new Promise((resolve, reject) => {
+        formRef.value.validate().then(() => {
+            resolve(true);
+        }).catch(() => {
+            reject(false);
+        });
+    });
+}
+
+defineExpose({
+    validate
+})
+
+</script>
+
+<style scoped>
+
+.crane-category-wraper {
+    margin-top: 16px;
+    padding: 12px;
+    padding-bottom: 1px !important;
+    border-radius: 4px;
+    background-color: #F2F3F5;
+}
+
+:deep(.crane-category-wraper label) {
+    font-size: 12px !important;
+}
+
+:deep(.yqg-permission-form-item-explain-error) {
+    font-size: 12px;
+}
+
+:deep(.yqg-permission-form-item) {
+    margin-bottom: 18px;
+}
+
+:deep(.yqg-permission-form-item-required) {
+    font-size: 12px!important;
+}
+
+:deep(.yqg-permission-form-item-required::before) {
+    display: none!important;
+}
+
+.crane-required {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.crane-required::before {
+    display: inline-block;
+    margin-inline-end: 4px;
+    color: #ff4d4f;
+    font-size: 14px;
+    font-family: SimSun, sans-serif;
+    line-height: 1;
+    content: "*";
+}
+.crane-category-tips {
+    color: #86909C;
+    font-size: 12px;
+}
+.crane-category-line{
+    height: 1px;
+    background-color: #C9CDD4;
+    margin: 10px 0;
+}
+</style>