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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@jari-ace/element-plus-component",
     "private": false,
-    "version": "0.1.9",
+    "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/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/hooks/useBackendValidations.ts

@@ -1,81 +1,81 @@
-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,
-    };
-}
+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";
+import {mergeRules} from '../utils/formUtils'
+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,
+    };
+}

package/packages/utils/formUtils.ts

@@ -0,0 +1,57 @@
+import {type FormRules,type FormItemRule} from "element-plus";
+
+/**
+ * 合并 rules 方法
+ * 将后端的rules合并到props.rules中
+ */
+export function mergeRules(frontendRules: FormRules, backendRules: FormRules): FormRules {
+    //合并里面的rules
+    let newRules: FormRules = {}
+
+    //浅拷贝
+    frontendRules = {...frontendRules};
+    backendRules = {...backendRules};
+
+    const frontendRulesKey: string[] = Object.keys(frontendRules);
+    const backendRulesKey: string[] = Object.keys(backendRules);
+
+    if (frontendRulesKey.length > 0 && backendRulesKey.length === 0) {
+        return frontendRules;
+    } else if (frontendRulesKey.length === 0 && backendRulesKey.length > 0) {
+        return backendRules;
+    } else if (
+        frontendRulesKey.length === 0 && backendRulesKey.length === 0
+    ) {
+        return {}
+    } else {  //frontendRulesKey 和 backendRulesKey 都有值
+        backendRulesKey.forEach(key => {
+            //frontendRulesKey中是否存在key
+            if (frontendRulesKey.includes(key)) {
+                if (Array.isArray(frontendRules[key]) && Array.isArray(backendRules[key])) {
+                    newRules[key] = [...frontendRules[key] as FormItemRule[], ...backendRules[key] as FormItemRule[]];
+                }
+                //props.rules[key] 为对象 props.validator.rules[key]为数组
+                else if (!Array.isArray(frontendRules[key]) && Array.isArray(backendRules[key])) {
+                    newRules[key] = [frontendRules[key]  as FormItemRule, ...backendRules[key] as FormItemRule[]];
+                }
+                //props.rules[key] 为数组 props.validator.rules[key]为对象
+                else if (Array.isArray(frontendRules[key]) && !Array.isArray(backendRules[key])) {
+                    newRules[key] = [...frontendRules[key] as FormItemRule[], backendRules[key] as FormItemRule];
+                }
+                //判断当前key的值类型是否都为对象
+                else if (!Array.isArray(frontendRules[key]) && !Array.isArray(backendRules[key])) {
+                    newRules[key] = [frontendRules[key] as FormItemRule, backendRules[key] as FormItemRule];
+                }
+            } else {
+                newRules[key] = backendRules[key];
+            }
+            //删除对应的 key
+            delete frontendRules[key];
+            delete backendRules[key];
+        })
+        newRules = {...newRules, ...frontendRules};
+        return newRules;
+    }
+
+
+}