@jari-ace/element-plus-component 0.1.8 → 0.1.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@jari-ace/element-plus-component",
     "private": false,
-    "version": "0.1.8",
+    "version": "0.1.10",
     "main": "lib/index.umd.cjs",
     "module": "lib/index.js",
     "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
         "animate.css": "^4.1.1"
     },
     "devDependencies": {
-        "@jari-ace/app-bolts": "0.3.6",
+        "@jari-ace/app-bolts": "catalog:",
         "@types/lodash-es": "^4.17.12",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.1",

package/packages/components/enumPicker/src/EnumPicker.vue

@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import type { EnumValueDefinition } from '@jari-ace/app-bolts';
-
-import { computed, ref, watch } from 'vue';
-
-import { createAxiosWithoutCache } from '@jari-ace/app-bolts';
-import { useEnumApi } from '@jari-ace/app-bolts';
-import { ElOption, ElSelect } from 'element-plus';
-// 遍历出EnumValueDefinition类型的KEY 并排除掉
-type KeyFields = 'id' | 'text' | 'value';
-
-interface ModelValue {
-    value?: string;
-    text?: string;
-    id?: string;
-}
-const props = withDefaults(
-    defineProps<{
-        clearable?: boolean; // 是否可清空
-        filterable?: boolean; // 是否可筛选
-        keyField?: KeyFields;
-        multiple?: boolean; // 是否多选
-        name: string; // 枚举名称，用于获取枚举数据
-        serviceName: string;
-    }>(),
-    {
-        multiple: false,
-        clearable: true,
-        filterable: true,
-        keyField: 'value',
-    },
-);
-
-const enums = ref<EnumValueDefinition[]>([]);
-const loading = ref<boolean>(false);
-const model = defineModel<ModelValue[]>({
-    default: () => [],
-});
-
-const axios = createAxiosWithoutCache();
-const api = useEnumApi(axios);
-async function loadData() {
-    if (!props.name || !props.serviceName) return;
-    loading.value = true;
-    api
-        .queryByName(props.serviceName, props.name)
-        .then((res) => {
-            enums.value = res.values;
-        })
-        .finally(() => {
-            loading.value = false;
-        });
-}
-
-const modelValue = computed((): string | string[] | undefined => {
-    if (props.multiple) {
-        return model.value.map((m) => m[props.keyField] as string) || [];
-    } else {
-        if (model.value[0] !== undefined) {
-            return model.value[0][props.keyField];
-        }
-    }
-    return '';
-});
-
-const handleChange = (value: string | string[]) => {
-    if (typeof value === 'string') {
-        const obj = enums.value.find((e) => e[props.keyField] === value);
-        model.value = obj ? [obj] : [];
-    } else {
-        model.value = enums.value.filter((e) => value.includes(e[props.keyField]));
-    }
-};
-
-// function filter(queryName: string) {
-//   bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
-// }
-
-loadData();
-
-watch(() => props.name, loadData);
-watch(() => props.serviceName, loadData);
-</script>
-
-<template>
-    <ElSelect
-        v-loading="loading"
-        :model-value="modelValue"
-        :filterable="props.filterable"
-        :multiple="props.multiple"
-        :clearable="props.clearable"
-        @change="handleChange"
-    >
-        <ElOption
-            v-for="item in enums"
-            :key="item.id"
-            :value="item[props.keyField]"
-            :label="item.text"
-        />
-    </ElSelect>
-</template>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import type { EnumValueDefinition } from '@jari-ace/app-bolts';
+
+import { computed, ref, watch } from 'vue';
+
+import { createAxiosWithoutCache } from '@jari-ace/app-bolts';
+import { useEnumApi } from '@jari-ace/app-bolts';
+import { ElOption, ElSelect } from 'element-plus';
+// 遍历出EnumValueDefinition类型的KEY 并排除掉
+type KeyFields = 'id' | 'text' | 'value';
+
+interface ModelValue {
+    value?: string;
+    text?: string;
+    id?: string;
+}
+const props = withDefaults(
+    defineProps<{
+        clearable?: boolean; // 是否可清空
+        filterable?: boolean; // 是否可筛选
+        keyField?: KeyFields;
+        multiple?: boolean; // 是否多选
+        name: string; // 枚举名称，用于获取枚举数据
+        serviceName: string;
+    }>(),
+    {
+        multiple: false,
+        clearable: true,
+        filterable: true,
+        keyField: 'value',
+    },
+);
+
+const enums = ref<EnumValueDefinition[]>([]);
+const loading = ref<boolean>(false);
+const model = defineModel<ModelValue[]>({
+    default: () => [],
+});
+
+const axios = createAxiosWithoutCache();
+const api = useEnumApi(axios);
+async function loadData() {
+    if (!props.name || !props.serviceName) return;
+    loading.value = true;
+    api
+        .queryByName(props.serviceName, props.name)
+        .then((res) => {
+            enums.value = res.values;
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+const modelValue = computed((): string | string[] | undefined => {
+    if (props.multiple) {
+        return model.value.map((m) => m[props.keyField] as string) || [];
+    } else {
+        if (model.value[0] !== undefined) {
+            return model.value[0][props.keyField];
+        }
+    }
+    return '';
+});
+
+const handleChange = (value: string | string[]) => {
+    if (typeof value === 'string') {
+        const obj = enums.value.find((e) => e[props.keyField] === value);
+        model.value = obj ? [obj] : [];
+    } else {
+        model.value = enums.value.filter((e) => value.includes(e[props.keyField]));
+    }
+};
+
+// function filter(queryName: string) {
+//   bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
+// }
+
+loadData();
+
+watch(() => props.name, loadData);
+watch(() => props.serviceName, loadData);
+</script>
+
+<template>
+    <ElSelect
+        v-loading="loading"
+        :model-value="modelValue"
+        :filterable="props.filterable"
+        :multiple="props.multiple"
+        :clearable="props.clearable"
+        @change="handleChange"
+    >
+        <ElOption
+            v-for="item in enums"
+            :key="item.id"
+            :value="item[props.keyField]"
+            :label="item.text"
+        />
+    </ElSelect>
+</template>
+
+<style scoped lang="scss"></style>

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/inputI18n/InputI18n.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import {ElInput, ElOption, ElSelect} from "element-plus";
 import {nextTick, onUnmounted, ref, watch} from "vue"
-import {createAxios, useAppMessageApi, useLoginUser} from "@jari-ace/app-bolts";
+import {
+    createAxiosWithoutCache,
+    useAppMessageApi,
+    useLoginUser
+} from "@jari-ace/app-bolts";
 import MessageEditor from "./I18nBundleEditor.vue"
 import {trim} from "lodash-es";
 import {useAppInstances} from "../../hooks/useAppInstances";
@@ -20,7 +24,7 @@ const props = withDefaults(defineProps<{
 const model = defineModel<string>({
     default: ""
 })
-const axios = createAxios()
+const axios = createAxiosWithoutCache()
 const api = useAppMessageApi(axios)
 const locale = useLoginUser().locale
 const messageKeys = ref<string[]>()

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

@@ -31,12 +31,12 @@ import {JaUserSelectDialog} from "../../userSelectDialog";
 import {JaScrollbar} from "../../scrollbar";
 import CustomGroupManager from "./CustomGroupManager.vue";
 import JaUserList from "./JaUserList.vue";
-
+import {useRealms} from '../../../hooks/useRealms'
 const props = defineProps({
     /**
      * 可选择用户的用户域ID
      */
-    realmId: {type: String, required: false, default: 1},
+    realmId: {type: String, required: false},
     /**
      * 弹出下拉选框的快捷键
      */
@@ -65,13 +65,15 @@ const props = defineProps({
      */
     maxHeight: {type: [Number, String], required: false},
 })
+
 const localRealmId = ref<string>();
 
-function loadRealmId() {
+async function loadRealmId() {
     if (props.realmId) {
         localRealmId.value = props.realmId;
     } else {
-        localRealmId.value = useLoginUser().realmId;
+        const defaultRealm = await useRealms().getDefaultRealm();
+        localRealmId.value = defaultRealm.id;
     }
 }
 
@@ -126,8 +128,8 @@ function switchUserSelect(u: UserReference) {
 
 
 function onPopoverShow() {
-    if (!queryParams.value.realmId || queryParams.value.realmId !== localRealmId.value) {
-        queryParams.value.realmId = localRealmId.value
+    if (props.realmId) {
+        queryParams.value.realmId = props.realmId
     }
     if (queryParams.value.name && queryParams.value.name.length > minLengthToTriggerUserQuery) {
         queryParams.value.name = undefined;

package/packages/components/userSelectDialog/src/userSelectDialog.vue

@@ -37,12 +37,13 @@ import {JaButton} from "../../button";
 import throttle from "lodash-es/throttle";
 import {JaUserGroupTree} from "../../userGroupTree";
 import {JaCustomGroupTree} from "../../customGroupTree";
+import { useRealms } from "../../../hooks/useRealms";
 //#region Props和Const声明和初始化
 const props = defineProps({
     /**
      * 可选择用户的用户域ID
      */
-    realmId: {type: String, required: true, default: 1},
+    realmId: {type: String, required: false},
     /**
      * 是否多选模式
      */
@@ -59,12 +60,20 @@ const selectedUsers = defineModel<UserReference[] | UserReference | null>({
     required: true
 });
 const localRealmId = ref<string>();
-const login = useLoginUser();
-if (props.realmId) {
-    localRealmId.value = props.realmId;
-} else {
-    localRealmId.value = login.realmId;
+
+
+async function loadRealmId() {
+    if (props.realmId) {
+        localRealmId.value = props.realmId;
+    } else {
+        const defaultRealm = await useRealms().getDefaultRealm();
+        localRealmId.value = defaultRealm.id;
+    }
 }
+
+loadRealmId()
+
+
 if (props.multiple) {
     if (!selectedUsers.value) {
         selectedUsers.value = [];
@@ -256,8 +265,7 @@ function switchSelectOnlyView() {
 }
 
 function onOpen() {
-    if (!userQuery.queryParams.value.realmId || userQuery.queryParams.value.realmId
-        !== localRealmId.value) {
+    if (!userQuery.queryParams.value.realmId && localRealmId.value) {
         userQuery.queryParams.value.realmId = localRealmId.value;
     }