@yqg/permission 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yqg/permission",
-    "version": "1.3.2",
+    "version": "1.3.4",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "type": "module",

package/src/components/apply-modal.vue

@@ -9,48 +9,56 @@
 			<span v-show="isAllChecked && permissionList.length" class="crane-permission-title-tips">{{
 				t('isAllOwnTips') }}</span>
 		</template>
-		<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') }}
+		<ConfigProvider :getPopupContainer="getPopupContainer" prefixCls="yqg-permission" :theme="{
+			token: {
+				colorPrimary: color,
+			}
+		}">
+			<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>
+
+						<Tree checkable :default-expand-all="true" :tree-data="permissionList" :height="200"
+							:expandedKeys="expandedKeys" :checkedKeys="formState.features" class="crane-permission-tree"
+							@check="onCheck" @expand="expandedKeys = $event">
+							<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 }" :disabled="isAllChecked || !permissionList.length">
+            </Textarea>
+					<span class="reason-tips" style="font-size: 12px">
+						{{ t('applyReasonTips') }}
 					</span>
+				</FormItem>
+
+				<FormItem :label="t('approvalProcess')">
+					<ApprovalSteps :stepNodes="stepNodes" />
+				</FormItem>
+
+			</Form>
 
-					<Tree checkable :default-expand-all="true" :tree-data="permissionList" :height="200"
-						:expandedKeys="expandedKeys" :checkedKeys="formState.features" class="crane-permission-tree"
-						@check="onCheck" @expand="expandedKeys = $event">
-						<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 }" :disabled="isAllChecked || !permissionList.length">
-		</Textarea>
-				<span class="reason-tips" style="font-size: 12px">
-					{{ t('applyReasonTips') }}
-				</span>
-			</FormItem>
-
-			<FormItem :label="t('approvalProcess')">
-				<ApprovalSteps :stepNodes="stepNodes" />
-			</FormItem>
-		</Form>
-
-		<SuccessModal ref="successModal" />
+			<SuccessModal ref="successModal" />
+
+		</ConfigProvider>
 
 	</Modal>
 </template>
@@ -73,7 +81,8 @@ import {
 	message,
 	Tree,
 	Spin,
-	Button
+	Button,
+    ConfigProvider,
 } from 'ant-design-vue';
 import SuccessModal from './success-modal.vue';
 import ApprovalSteps from './approval-steps.vue';
@@ -116,6 +125,10 @@ const props = defineProps({
 		type: Number,
 		default: 1000
 	},
+	color: {
+		type: String,
+		default: '#1677ff'
+	}
 
 });
 const emit = defineEmits(['onSubmit', 'onSuccess']);
@@ -143,7 +156,6 @@ const formState = reactive<formStateType>({
 	},
 	submitWorkNumber: submitWorkNumber.value,
 });
-
 const getValidTimeOptions = async () => {
 	let res = await Http.getValidTimeOptions();
 	validTimeOptions.value = res.body;
@@ -295,6 +307,12 @@ watch(() => open.value, (cur) => {
 		stepNodes.value = [];
 	}
 })
+
+const getPopupContainer = ():HTMLElement => {
+    const modalRoot = document.querySelector('.yqg-permission-modal-content');
+
+    return (modalRoot || document.body) as HTMLElement;
+}
 </script>
 
 <style scoped>

package/src/components/category-selector.vue

@@ -8,7 +8,7 @@
                 v-show="categoryValuesMap[item.id]?.length"
                 :rules="[{ required: true, message: t('pleaseChoose'), trigger: ['change', 'blur'] }]">
                 <TreeSelect treeCheckable treeDefaultExpandAll :tree-data="categoryValuesMap[item.id]" showSearch
-                    :getPopupContainer="() => $el" allowClear v-model:value="item.attributeValueIds_view"
+                    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">

package/src/components/yqg-permission.vue

@@ -62,12 +62,12 @@
 			</template>
 		</div>
 
-		<ApplyModal v-model="open" :permissionList="permissionList" :spining="loading" :workNumber="workNumber" :zIndex="zIndex"
-			:defaultCheckedIds="defaultCheckedIds" :isAllChecked="isAllChecked" @onSuccess="() => emit('onSuccess')"
-			@onSubmit="getPermissions">
+		<ApplyModal v-model="open" :permissionList="permissionList" :spining="loading" :workNumber="workNumber"
+			:zIndex="zIndex" :defaultCheckedIds="defaultCheckedIds" :isAllChecked="isAllChecked"
+			@onSuccess="() => emit('onSuccess')" @onSubmit="getPermissions" :color="color">
 		</ApplyModal>
-
 	</ConfigProvider>
+
 </template>
 <script lang="ts" setup>
 import { ref, defineAsyncComponent, computed, watchEffect, watch } from 'vue';
@@ -79,6 +79,7 @@ import t from '../utils';
 import useDraggable from '../hooks/useDragable';
 import useStatus from '../hooks/useStatus';
 import useFormat from '../hooks/useFormat';
+import '../style/reset.css';
 
 const STATUS_MAP = {
 	DEFAULT: 'DEFAULT',
@@ -95,7 +96,7 @@ const COM_TYPE = {
 const RIGHT_DEFAULT = '10px';
 
 // 重置 message 类名，避免被全局样式覆盖
-message.config({ prefixCls: 'yqg-permission-message' });
+message.config({ prefixCls : 'yqg-permission-message'});
 
 const ApplyModal = defineAsyncComponent(() => import('./apply-modal.vue'));
 
@@ -212,4 +213,5 @@ watch(() => props.locale, (cur, pre) => {
 .crane-margin-right10 {
 	margin-right: 10px;
 }
+
 </style>

package/src/style/reset.css

@@ -0,0 +1,3 @@
+.yqg-permission-message {
+	z-index: 10010;
+}