@jari-ace/element-plus-component 0.1.1 → 0.1.7

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

@@ -0,0 +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>

package/packages/components/form/JaForm.vue

@@ -4,68 +4,100 @@ import {ElForm, type FormInstance, type FormRules} from "element-plus";
 import {type ValidationInstance} from "../../hooks/useBackendValidations";
 import type {JaFormModel} from "./types";
 
+interface Props {
+    model: JaFormModel,
+    inline?:boolean,
+    labelPosition?: "left" | "top" | "right",
+    labelWidth?: string | number,
+    labelSuffix?: string,
+    hideRequiredAsterisk?: boolean,
+    showMessage?: boolean,
+    inlineMessage?: boolean,
+    statusIcon?: boolean,
+    validateOnRuleChange?: boolean,
+    rules?: FormRules,
+    size?: "small" | "default" | "large",
+    disabled?: boolean,
+    scrollToError?: boolean,
+    validator: ValidationInstance,
+}
+
 const formRef = ref<FormInstance | undefined>(undefined);
 
-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,
-    },
-});
+
+const props = withDefaults(defineProps<Props>(),{
+    inline:false,
+    labelPosition:'top',
+    hideRequiredAsterisk:true,
+    showMessage:true,
+    inlineMessage:true,
+    statusIcon:false,
+    validateOnRuleChange:true,
+    size:'small',
+    scrollToError:true,
+
+})
+
+// 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);
@@ -81,16 +113,44 @@ const rules = computed<FormRules>(() => {
 
 defineExpose({
     elForm: formRef,
-    validate: (submit: () => Promise<any>, onFail?: () => void) => {
-        formRef.value!.clearValidate();
-        return submit()
-            .then(() => {
-                props.validator?.clearFiledErrors();
+    getElForm:():FormInstance|undefined=>formRef.value,
+    validate:async (submit: () => Promise<any>, onFail?: () => void) => {
+        if(!formRef)return;
+        //先清空之前的校验
+        formRef.value.clearValidate();
+        //判断是否有传入rules如果有则先执行 formRef.value!.validate()
+        if(props.rules){
+            await formRef.value.validate((valid,fields)=>{
+                //判断校验是否成功
+                if(valid){
+                    //前端校验已成功，执行异步submit
+                    submit()
+                        .then(() => {
+                            //校验通过清楚所有的错误校验信息
+                            props.validator?.clearFiledErrors();
+                        })
+                        .catch(() => {
+                            //失败
+                            formRef.value.validate();
+                            if (onFail) onFail();
+                        });
+                }else{
+                    console.log('error submit!',fields)
+                }
             })
-            .catch(() => {
-                formRef.value!.validate();
-                if (onFail) onFail();
-            });
+        }else{
+            submit()
+                .then(() => {
+                    props.validator?.clearFiledErrors();
+                })
+                .catch(async () => {
+                    await formRef.value.validate();
+                    if (onFail) onFail();
+                });
+        }
+
+
+
     },
 });
 
@@ -102,7 +162,7 @@ watch(() => props.model.formData, () => {
 <template>
     <el-form
         ref="formRef"
-        :model="model"
+        :model="model.formData"
         :rules="rules"
         :inline="inline"
         :label-position="labelPosition"
@@ -116,7 +176,7 @@ watch(() => props.model.formData, () => {
         :size="size"
         :disabled="disabled"
         :scroll-to-error="scrollToError"
-        @validate="(prop, isValid, message) => $emit('validate', prop, isValid)"
+        @validate="(prop, isValid, message) => $emit('validate', prop, isValid,message)"
         @click="() => $emit('click')"
     >
         <slot></slot>

package/packages/components/index.ts

@@ -31,3 +31,4 @@ export * from "./channelPicker"
 export * from "./properyPicker"
 export * from "./inputI18n"
 export * from "./checkboxGroup"
+export * from "./enumPicker"

package/packages/components/rolePicker/baseRolePicker.vue

@@ -22,6 +22,7 @@ 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)
     if (selectedRoleName.value) {
         currentRole.value = findRole(selectedRoleName.value, roles.value);
     } else {

package/packages/hooks/useBackendValidations.ts

@@ -1,55 +1,81 @@
-import type {FormRules} from "element-plus";
-import type {IAceAxios, ValidationError} from "@jari-ace/app-bolts";
-import {createAxiosWithoutCache} from "@jari-ace/app-bolts";
-import {reactive} from "vue";
-
-export type ValidationInstance = {
-    axios: IAceAxios;
-    rules: FormRules;
-    removeFieldError: (prop: string) => void;
-    clearFiledErrors: () => void;
-};
-
-export function useBackendValidations<T>(props: string[], axios?: IAceAxios): ValidationInstance {
-    const rules = reactive<FormRules>({});
-    let errors: ValidationError[] = [];
-    if (!axios) axios = createAxiosWithoutCache();
-    axios!.setDefaultRequestConfig({
-        validationErrorProcessor: (errs) => {
-            errors = errs;
-        },
-    });
-
-    for (const p of props) {
-        rules[p] = {
-            trigger: "blur",
-            validator: (rule: any, value: any, callback: any) => {
-                if (!errors) return;
-                let hasErr = false;
-                for (const err of errors) {
-                    let fn = err.fieldName;
-                    if (fn?.endsWith("[]")) {
-                        fn = fn.substring(0, fn.length - 2);
-                    }
-                    if (fn === p) {
-                        hasErr = true
-                        callback(new Error(err.message));
-                    }
-                }
-                if (!hasErr) callback();
-            },
-        };
-    }
-    const removeFieldError = (prop: string) => {
-        errors = errors.filter((err) => err.fieldName !== prop);
-    };
-    const clearFiledErrors = () => {
-        errors = []
-    };
-    return {
-        removeFieldError,
-        clearFiledErrors,
-        axios,
-        rules,
-    };
-}
+import type { FormRules ,FormItemRule} from "element-plus";
+import type { IAceAxios, ValidationError } from "@jari-ace/app-bolts";
+import { createAxiosWithoutCache } from "@jari-ace/app-bolts";
+import { reactive } from "vue";
+
+export type ValidationInstance = {
+    axios: IAceAxios;
+    rules: FormRules;
+    removeFieldError: (prop: string) => void;
+    clearFiledErrors: () => void;
+};
+
+/**
+ * 后端校验
+ * @param props
+ * @param axios
+ * @param customRules
+ */
+export function useBackendValidations(
+    props: string[],
+    axios?: IAceAxios,
+    customRules?: FormRules,
+): ValidationInstance {
+    const rules = reactive<FormRules>({});
+    let errors: ValidationError[] = [];
+    if (!axios) axios = createAxiosWithoutCache();
+    axios!.setDefaultRequestConfig({
+        validationErrorProcessor: (errs) => {
+            errors = errs;
+        },
+    });
+
+    for (const p of props) {
+        // rules[p] = [
+        const rule = {
+            trigger: "blur",
+            validator: (rule: any, value: any, callback: any) => {
+                if (!errors) return;
+                let hasErr = false;
+                for (const err of errors) {
+                    let fn = err.fieldName;
+                    if (fn?.endsWith("[]")) {
+                        fn = fn.substring(0, fn.length - 2);
+                    }
+                    if (fn === p) {
+                        hasErr = true;
+                        callback(new Error(err.message));
+                    }
+                }
+                if (!hasErr) callback();
+            },
+        };
+
+        if (customRules&&customRules[p]) {
+            //合并数组customRules[p]
+            if (Array.isArray(customRules[p])) {
+                rules[p] = [rule,...customRules[p] as FormItemRule[]];
+            } else {
+                rules[p] = [rule, customRules[p] as FormItemRule];
+            }
+        }else{
+            rules[p] = rule
+        }
+
+
+    }
+    const removeFieldError = (prop: string) => {
+        errors = errors.filter((err) => err.fieldName !== prop);
+    };
+    const clearFiledErrors = () => {
+        errors = [];
+    };
+
+
+    return {
+        removeFieldError,
+        clearFiledErrors,
+        axios,
+        rules,
+    };
+}