@jari-ace/element-plus-component 0.2.1 → 0.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.3",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",
@@ -49,7 +49,7 @@
     "lodash-es": "^4.17.21",
     "vue": "^3.5.11",
     "vue-i18n": "^9.13.1",
-    "@jari-ace/app-bolts": "0.4.0"
+    "@jari-ace/app-bolts": "0.5.10"
   },
   "scripts": {
     "dev": "vite --port 3400",

package/packages/components/form/JaForm.vue

@@ -3,7 +3,7 @@ import {type PropType, provide, ref, computed, watch} from "vue";
 import {ElForm, type FormInstance, type FormRules} from "element-plus";
 import {type ValidationInstance} from "../../hooks/useBackendValidations";
 import type {JaFormModel} from "./types";
-
+import {mergeRules} from '../../utils/formUtils'
 interface Props {
     model: JaFormModel,
     inline?:boolean,
@@ -20,6 +20,7 @@ interface Props {
     disabled?: boolean,
     scrollToError?: boolean,
     validator: ValidationInstance,
+    requiredPosition?: 'left' | 'right'
 }
 
 const formRef = ref<FormInstance | undefined>(undefined);
@@ -35,82 +36,26 @@ const props = withDefaults(defineProps<Props>(),{
     validateOnRuleChange:true,
     size:'small',
     scrollToError:true,
-
+    requiredPosition:'right',
 })
 
-// const props = defineProps({
-//     model: {
-//         type: Object as PropType<JaFormModel>,
-//         required: true,
-//     },
-//     inline: {
-//         type: Boolean,
-//         default: false,
-//     },
-//     labelPosition: {
-//         type: String as PropType<"left" | "top" | "right">,
-//         default: "top",
-//     },
-//     labelWidth: {
-//         type: [String, Number],
-//     },
-//     labelSuffix: {
-//         type: String,
-//     },
-//     hideRequiredAsterisk: {
-//         type: Boolean,
-//         default: false,
-//     },
-//     showMessage: {
-//         type: Boolean,
-//         default: true,
-//     },
-//     inlineMessage: {
-//         type: Boolean,
-//         default: true,
-//     },
-//     statusIcon: {
-//         type: Boolean,
-//         default: false,
-//     },
-//     validateOnRuleChange: {
-//         type: Boolean,
-//         default: true,
-//     },
-//     rules: {
-//         type: Object as PropType<FormRules>,
-//         default: {},
-//     },
-//     size: {
-//         type: String as PropType<"small" | "default" | "large">,
-//         default: "small",
-//     },
-//     disabled: {
-//         type: Boolean,
-//         default: false,
-//     },
-//     scrollToError: {
-//         type: Boolean,
-//         default: true,
-//     },
-//     validator: {
-//         type: Object as PropType<ValidationInstance>,
-//         required: true,
-//     },
-// });
+
+
+
 
 defineEmits(["validate", "click"]);
 provide("aceFormValidator", props.validator);
 provide("aceFormModel", props.model);
 provide("aceFormSize", props.size);
+provide("aceFormRequiredPosition", props.requiredPosition);
+const rules = ref<FormRules>({})
 
-const rules = computed<FormRules>(() => {
-    return {
-        ...props.rules,
-        ...props.validator.rules,
-    };
+const model = computed(() => {
+    return props.model.formData?props.model.formData:props.model;
 });
 
+
+
 defineExpose({
     elForm: formRef,
     getElForm:():FormInstance|undefined=>formRef.value,
@@ -119,18 +64,21 @@ defineExpose({
         //先清空之前的校验
         formRef.value.clearValidate();
         //判断是否有传入rules如果有则先执行 formRef.value!.validate()
-        if(props.rules){
+        if(props.rules && Object.keys(props.rules).length>0){
             await formRef.value.validate((valid,fields)=>{
                 //判断校验是否成功
                 if(valid){
                     //前端校验已成功，执行异步submit
                     submit()
                         .then(() => {
+                            //成功
                             //校验通过清楚所有的错误校验信息
                             props.validator?.clearFiledErrors();
                         })
                         .catch(() => {
                             //失败
+                            //合并rules
+                            rules.value = mergeRules(props.rules, props.validator.rules);
                             formRef.value.validate();
                             if (onFail) onFail();
                         });
@@ -144,6 +92,9 @@ defineExpose({
                     props.validator?.clearFiledErrors();
                 })
                 .catch(async () => {
+                    //失败
+                    //合并rules
+                    rules.value = mergeRules(props.rules, props.validator.rules);
                     await formRef.value.validate();
                     if (onFail) onFail();
                 });
@@ -152,17 +103,26 @@ defineExpose({
 
 
     },
+    getRules: () => rules.value,
 });
 
+
 watch(() => props.model.formData, () => {
     props.validator?.clearFiledErrors();
 })
+
+watch(() => props.rules, () => {
+    //合并rules
+    rules.value = mergeRules(props.rules, props.validator.rules);
+}, { immediate: true })
+
+
 </script>
 
 <template>
     <el-form
         ref="formRef"
-        :model="model.formData"
+        :model="model"
         :rules="rules"
         :inline="inline"
         :label-position="labelPosition"

package/packages/components/formItem/JaFormItem.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import {provide, ref, withDefaults, defineProps, defineExpose} from 'vue'
+import { provide, ref, withDefaults, defineProps, defineExpose, inject, computed } from "vue";
 import {ElFormItem, ElIcon, ElText, type FormItemRule, ElTooltip} from 'element-plus'
 import {QuestionFilled} from "@element-plus/icons-vue";
 
+type RequiredPosition = 'left' | 'right'
+
+
+
+const aceFormRequiredPosition = inject('aceFormRequiredPosition')
 const props = withDefaults(defineProps<{
     prop?: string | string[]
     rules?: FormItemRule | FormItemRule[]
@@ -14,15 +19,23 @@ const props = withDefaults(defineProps<{
     showMessage?: boolean
     inlineMessage?: boolean
     size?: 'small' | 'default' | 'large'
+    requiredPosition?: RequiredPosition
+    labelGap?:string
 }>(), {
     required: false,
     showMessage: true,
     inlineMessage: true,
-    size: 'small'
+    size: 'small',
+    labelGap:'4px'
 })
 
 provide('aceFormItemProp', props.prop)
 
+const requiredPosition = computed(()=>{
+    return props.requiredPosition || aceFormRequiredPosition
+})
+
+
 const formItem = ref<typeof ElFormItem | null>(null)
 defineExpose({
     resetField: () => {
@@ -46,20 +59,26 @@ defineExpose({
                   :inline-message="inlineMessage"
                   :size="size">
         <template #label>
-            <el-text class="el-form-item__label">
-                {{ props.label }}
-                <span style="color:red" v-if="props.required">*</span>
-                <el-tooltip
-                    v-if="labelRemark"
-                    placement="top">
-                    <el-icon>
-                        <question-filled/>
-                    </el-icon>
-                    <template #content>
-                        <div v-html="labelRemark"/>
-                    </template>
-                </el-tooltip>
-            </el-text>
+            <div style="display: flex;" :style="{
+                gap: labelGap
+            }">
+                <span style="color:red" v-if="props.required && requiredPosition==='left'">*</span>
+                <el-text class="el-form-item__label">
+                    {{ props.label }}
+                    <el-tooltip
+                        v-if="labelRemark"
+                        placement="top">
+                        <el-icon>
+                            <question-filled/>
+                        </el-icon>
+                        <template #content>
+                            <div v-html="labelRemark"/>
+                        </template>
+                    </el-tooltip>
+                </el-text>
+                <span style="color:red" v-if="props.required && requiredPosition==='right'">*</span>
+            </div>
+
         </template>
         <slot></slot>
         <slot name="error"></slot>

package/packages/components/rolePicker/baseRolePicker.vue

@@ -21,8 +21,12 @@ const roles = ref<ProjectedRole[]>([]);
 const loadData = async () => {
     if (!props.appName) return;
     currentApp.value = await appApi.getByName(props.appName);
-    roles.value = await api.getAllRole(currentApp.value.id);
-    console.log(roles.value)
+    roles.value = (
+        await api.getAllRole(currentApp.value.id)
+    ).map(r => {
+        r.name = r.appName + "." + r.name
+        return r
+    });
     if (selectedRoleName.value) {
         currentRole.value = findRole(selectedRoleName.value, roles.value);
     } else {

package/packages/components/userPicker/src/JaUserList.vue

@@ -31,7 +31,7 @@ const handleScroll = () => {
     const scrollElement = scrollbar.value?.wrapRef;
     if (scrollElement) {
         const isBottom = scrollElement.scrollHeight - scrollElement.scrollTop
-                         <= scrollElement.clientHeight + tolerance;
+            <= scrollElement.clientHeight + tolerance;
 
         if (isBottom) {
             if (page.value < props.total / props.pageSize) {
@@ -55,7 +55,15 @@ function switchUserSelect(u: UserReference) {
             selectedUsers.value.splice(index, 1);
         }
     } else {
-        selectedUsers.value = u;
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或null")
+        }
+        if(selectedUsers.value!==null&&u.id===selectedUsers.value.id){
+            selectedUsers.value = null;
+        }else{
+            selectedUsers.value = u;
+        }
+
     }
 }
 
@@ -74,6 +82,7 @@ function onMouseUp() {
 }
 
 function onMouseEnter(u: UserReference) {
+    console.log("点击")
     if (isDragSelecting.value) {
         switchUserSelect(u);
     }
@@ -140,31 +149,56 @@ function onMouseOver(event: MouseEvent, index: number) {
 }
 
 function userSelected(u: UserReference) {
-    return selectedForBinding.value.some(su => su.id === u.id);
+    if (props.multiple) {
+        if (!Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+        }
+        return selectedUsers.value.some(su => su.id === u.id);
+    }else{
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象")
+        }
+        return selectedUsers.value?.id === u.id;
+    }
+
 }
 
 const userTagTheme = (u: UserReference) => {
-    if (selectedForBinding.value.some(su => su.id === u.id)) {
-        return "autumnOrange"
-    } else {
-        return "skyGray"
+    if (Array.isArray(selectedForBinding.value)) {
+        if (selectedForBinding.value.some(su => su.id === u.id)) {
+            return "autumnOrange"
+        } else {
+            return "skyGray"
+        }
+    }else {
+        if (selectedForBinding.value?.id === u.id) {
+            return "autumnOrange"
+        } else {
+            return "skyGray"
+        }
     }
 }
 
 const selectedForBinding = computed(() => {
-    if (props.multiple && Array.isArray(selectedUsers.value)) {
+
+    const isArray:boolean = Array.isArray(selectedUsers.value);
+    if (props.multiple && isArray) {
         return selectedUsers.value;
-    } else if (!props.multiple && !Array.isArray(selectedUsers.value)) {
+
+    } else if (!props.multiple && !isArray) {
         if (selectedUsers.value) {
             return [selectedUsers.value as UserReference];
         } else {
-            return [] as UserReference[];
+            return [] ;
         }
-    } else {
+    } else if(!props.multiple && isArray) {
+        return selectedUsers.value;
+    } else{
         throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
     }
 })
 
+
 function getUserItemClass(index: number) {
     return index === activeIndex.value ? "active" : "";
 }

package/packages/components/userPicker/src/JaUserPicker.vue

@@ -19,6 +19,7 @@ function onChange(value: UserReference[]) {
 }
 
 const mv = ref(getValue(model.formData, prop) as UserReference[] ?? []);
+
 watch(() => model.formData, () => {
     mv.value = getValue(model.formData, prop) as UserReference[] ?? []
 }, {
@@ -29,7 +30,9 @@ watch(() => model.formData, () => {
 <template>
     <user-picker v-model="mv"
                  @change="onChange"
-                 v-bind="$attrs"/>
+                 v-bind="$attrs">
+        <slot name="default"></slot>
+    </user-picker>
 </template>
 
 <style scoped lang="scss">

package/packages/components/userPicker/src/UserPicker.vue

@@ -5,9 +5,12 @@ import {
     ElInput,
     ElPopover,
     ElText,
-    ElSpace
+    ElSpace,
 } from "element-plus";
-import {computed, type PropType, ref, shallowRef, watch} from "vue"
+
+import type { PopoverInstance } from 'element-plus'
+
+import {computed,  ref, shallowRef, watch} from "vue"
 import {
     Delete,
     Finished,
@@ -16,6 +19,9 @@ import {
     Search, Setting,
     StarFilled
 } from "@element-plus/icons-vue";
+
+
+
 import {
     type BooleanResultExpression,
     createAxiosWithoutCache,
@@ -32,46 +38,102 @@ import {JaScrollbar} from "../../scrollbar";
 import CustomGroupManager from "./CustomGroupManager.vue";
 import JaUserList from "./JaUserList.vue";
 import {useRealms} from '../../../hooks/useRealms'
-const props = defineProps({
+
+const props = withDefaults( defineProps<{
+    /**
+     * Popover 弹出框的触发方式
+     */
+    trigger?:'click' | 'focus' | 'hover' | 'contextmenu',
     /**
      * 可选择用户的用户域ID
      */
-    realmId: {type: String, required: false},
+    realmId?:string,
     /**
      * 弹出下拉选框的快捷键
      */
-    shortcut: {type: String, required: false, default: "Ctrl+Alt+U"},
+    shortcut?:string,
     /**
      * 是否多选模式
      */
-    multiple: {type: Boolean, required: false, default: false},
+    multiple?:boolean
     /**
      * 密级过滤
      */
-    classificationLevel: {type: Number,  required: false, default: false},
+    classificationLevel?:number
     /**
      * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
      */
-    customFilter: {
-        type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
-        required: false
-    },
+    customFilter?:(qUser: InstanceType<typeof QUser>) => BooleanResultExpression,
     /**
      * 最多显示多少已选中的用户数量
      */
-    maxShowCount: {type: Number, required: false, default: 20},
+    maxShowCount?:number,
     /**
      * 高度，默认100%
      */
-    height: {type: [Number, String], required: false, default: '100%'},
+    height?:number|string
     /**
      * 最大高度
      */
-    maxHeight: {type: [Number, String], required: false},
+    maxHeight?: number|string,
+    /**
+     * 是否显示已选用户标签
+     */
+    showUserTag?:boolean
+
+}>(),{
+    trigger:'hover',
+    shortcut: "Ctrl+Alt+U",
+    multiple:false,
+    classificationLevel: 0,
+    maxShowCount: 20,
+    maxHeight: '100%',
+    showUserTag: true,
 })
 
+// const props = defineProps({
+
+    /**
+     * 可选择用户的用户域ID
+     */
+    // realmId: {type: String, required: false},
+    /**
+     * 弹出下拉选框的快捷键
+     */
+    // shortcut: {type: String, required: false, default: "Ctrl+Alt+U"},
+    /**
+     * 是否多选模式
+     */
+    // multiple: {type: Boolean, required: false, default: false},
+    /**
+     * 密级过滤
+     */
+    // classificationLevel: {type: Number,  required: false, default: 0},
+    /**
+     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+     */
+    // customFilter: {
+    //     type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
+    //     required: false
+    // },
+    /**
+     * 最多显示多少已选中的用户数量
+     */
+    // maxShowCount: {type: Number, required: false, default: 20},
+    /**
+     * 高度，默认100%
+     */
+    // height: {type: [Number, String], required: false, default: '100%'},
+    /**
+     * 最大高度
+     */
+    // maxHeight: {type: [Number, String], required: false},
+// })
+
 const localRealmId = ref<string>();
 
+const bookmarkDropdown = ref<PopoverInstance>()
+
 async function loadRealmId() {
     if (props.realmId) {
         localRealmId.value = props.realmId;
@@ -126,7 +188,14 @@ function switchUserSelect(u: UserReference) {
             selectedUsers.value.splice(index, 1);
         }
     } else {
-        selectedUsers.value = u;
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或者null")
+        }
+        if(selectedUsers.value!==null&&u.id===selectedUsers.value.id){
+            selectedUsers.value = null;
+        }else{
+            selectedUsers.value = u;
+        }
     }
 }
 
@@ -152,6 +221,7 @@ function onPopoverShow() {
 }
 
 function onPopoverHide() {
+    popoverVisible.value = false
     btn.value?.$el.focus();
 }
 
@@ -226,8 +296,15 @@ function showUserSelectDialog() {
     popoverVisible.value = false;
 }
 
+function handleMouseOver() {
+    popoverVisible.value = true
+}
+
+
 const selectedUsersForRender = computed(() => selectedForBinding.value.slice(0, props.maxShowCount))
 
+
+
 watch(()=>props.classificationLevel, ()=>{
     queryParams.value.classificationLevel = props.classificationLevel
 })
@@ -238,13 +315,22 @@ watch(()=>props.classificationLevel, ()=>{
     <ja-scrollbar :max-height="props.maxHeight" :height="props.height" v-bind="$attrs"
                   style="overflow-x: hidden;">
         <div class="ja-user-picker__root" v-shortcut:[props.shortcut]="popup">
+
             <el-popover ref="bookmarkDropdown" @show="onPopoverShow" @hide="onPopoverHide"
+                        v-model:visible="popoverVisible"
                         width="auto" teleported
-                        v-model:visible="popoverVisible">
+                        :trigger="props.trigger"
+                >
                 <template #reference>
-                    <el-button circle :icon="Plus" :size="'small'" ref="btn"
-                               @mouseover="popoverVisible=true">
-                    </el-button>
+                    <div style="display: flex;align-items: center;">
+                        <slot
+                            v-if="$slots.default"
+                            name="default"></slot>
+                        <el-button v-else circle :icon="Plus" :size="'small'" ref="btn"
+                                   @mouseover="handleMouseOver">
+                        </el-button>
+                    </div>
+
                 </template>
                 <template #default>
                     <div class="ja-user-picker-bookmark__dropdown">
@@ -301,31 +387,35 @@ watch(()=>props.classificationLevel, ()=>{
                             ref="userList"
                             :total="queryResult.total"
                             :empty-text="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery ? undefined : '无可选常用人员'"
-                            multiple
                             :page-size="pageParams.pageSize"
                             :loading="loading"
                             :users="users"
                             :height="300"
                             v-model="selectedUsers"
                             v-model:page="pageParams.currentPage"
+                            :multiple="props.multiple"
                             @item-clicked="onArrowKeyDown"
                             @arrow-key-down="onArrowKeyDown"></ja-user-list>
                     </div>
                 </template>
             </el-popover>
-            <ja-user-info-tag v-for="u in selectedUsersForRender" :key="u.id" :user-id="u.id"
-                              :full-name="u.fullName" closable :has-avatar="u.hasAvatar"
-                              @closed="onDeselected">
-            </ja-user-info-tag>
-            <div class="more-tag" v-if="selectedForBinding.length > props.maxShowCount">
-                +{{ selectedForBinding.length - props.maxShowCount }}人
-            </div>
-            <div v-if="selectedForBinding.length === 0">
-                <el-text type="info"> &lt;暂无选中人员&gt;</el-text>
+            <div v-if="props.showUserTag" class="ja-user-picker__tag-container">
+                <ja-user-info-tag  v-for="u in selectedUsersForRender" :key="u.id" :user-id="u.id"
+                                  :full-name="u.fullName" closable :has-avatar="u.hasAvatar"
+                                  @closed="onDeselected">
+                </ja-user-info-tag>
+                <div class="more-tag" v-if="selectedForBinding.length > props.maxShowCount">
+                    +{{ selectedForBinding.length - props.maxShowCount }}人
+                </div>
+                <div v-if="selectedForBinding.length === 0">
+                    <el-text type="info"> &lt;暂无选中人员&gt;</el-text>
+                </div>
             </div>
+
             <ja-user-select-dialog ref="dialogUserSelector"
                                    :multiple="props.multiple"
                                    :realm-id="localRealmId"
+                                   :classificationLevel="props.classificationLevel"
                                    :customFilter="props.customFilter"
                                    v-model="selectedUsers"></ja-user-select-dialog>
         </div>
@@ -337,12 +427,18 @@ watch(()=>props.classificationLevel, ()=>{
 <style scoped lang="scss">
 .ja-user-picker__root {
     display: flex;
-    flex-wrap: wrap;
+    //flex-wrap: wrap;
     justify-content: left;
-    align-items: center;
-    gap: 4px;
+    //align-items: center;
+    gap: 8px;
     padding: 8px 0;
-
+    .ja-user-picker__tag-container{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: left;
+        align-items: center;
+        gap: 4px;
+    }
     .more-tag {
         border-radius: 28px;
         height: 28px;