@jari-ace/element-plus-component 0.2.0 → 0.2.2

package/packages/components/enumList/JaEnumList.vue

@@ -1,39 +1,39 @@
-<script setup lang="ts">
-import {inject, watch, ref} from "vue";
-import {getValue, setValue} from "../../utils/objectUtils";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-import EnumListInput from "./EnumListInput.vue";
-
-const model = inject('aceFormModel') as Record<string, never>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const emit = defineEmits<{
-    change: [value: string[]]
-}>()
-
-const props = defineProps<{ enumValues: Record<string, string> }>()
-
-function onChange(value: string[]) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', value)
-}
-
-const mv = ref(getValue(model.formData, prop) as string[] ?? [""]);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as string[] ?? [""]
-}, {
-    deep: true
-})
-</script>
-
-<template>
-    <enum-list-input v-model="mv"
-                     :enum-values="enumValues"
-                     @change="onChange"
-                     v-bind="$attrs"/>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {inject, watch, ref} from "vue";
+import {getValue, setValue} from "../../utils/objectUtils";
+import type {ValidationInstance} from "../../hooks/useBackendValidations";
+import EnumListInput from "./EnumListInput.vue";
+
+const model = inject('aceFormModel') as Record<string, never>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string[]]
+}>()
+
+const props = defineProps<{ enumValues: Record<string, string> }>()
+
+function onChange(value: string[]) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+const mv = ref(getValue(model.formData, prop) as string[] ?? [""]);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as string[] ?? [""]
+}, {
+    deep: true
+})
+</script>
+
+<template>
+    <enum-list-input v-model="mv"
+                     :enum-values="enumValues"
+                     @change="onChange"
+                     v-bind="$attrs"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/enumList/index.ts

@@ -1,7 +1,7 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import EnumList from "./JaEnumList.vue";
-import EnumListInput from "./EnumListInput.vue";
-
-export const JaEnumList: SFCWithInstall<typeof EnumList> = withInstall(EnumList);
-
-export const JaEnumListRaw: SFCWithInstall<typeof EnumListInput> = withInstall(EnumListInput);
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import EnumList from "./JaEnumList.vue";
+import EnumListInput from "./EnumListInput.vue";
+
+export const JaEnumList: SFCWithInstall<typeof EnumList> = withInstall(EnumList);
+
+export const JaEnumListRaw: SFCWithInstall<typeof EnumListInput> = withInstall(EnumListInput);

package/packages/components/enumPicker/index.ts

@@ -1,5 +1,5 @@
-
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import EnumPicker from "./src/EnumPicker.vue";
-
-export const JaEnumPicker: SFCWithInstall<typeof EnumPicker> = withInstall(EnumPicker);
+
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import EnumPicker from "./src/EnumPicker.vue";
+
+export const JaEnumPicker: SFCWithInstall<typeof EnumPicker> = withInstall(EnumPicker);

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

@@ -1,186 +1,146 @@
-<script setup lang="ts">
-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";
-
-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 = 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);
-provide("aceFormModel", props.model);
-provide("aceFormSize", props.size);
-
-const rules = computed<FormRules>(() => {
-    return {
-        ...props.rules,
-        ...props.validator.rules,
-    };
-});
-
-defineExpose({
-    elForm: formRef,
-    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)
-                }
-            })
-        }else{
-            submit()
-                .then(() => {
-                    props.validator?.clearFiledErrors();
-                })
-                .catch(async () => {
-                    await formRef.value.validate();
-                    if (onFail) onFail();
-                });
-        }
-
-
-
-    },
-});
-
-watch(() => props.model.formData, () => {
-    props.validator?.clearFiledErrors();
-})
-</script>
-
-<template>
-    <el-form
-        ref="formRef"
-        :model="model.formData"
-        :rules="rules"
-        :inline="inline"
-        :label-position="labelPosition"
-        :label-width="labelWidth"
-        :label-suffix="labelSuffix"
-        :hide-required-asterisk="hideRequiredAsterisk"
-        :show-message="showMessage"
-        :inline-message="inlineMessage"
-        :status-icon="statusIcon"
-        :validate-on-rule-change="validateOnRuleChange"
-        :size="size"
-        :disabled="disabled"
-        :scroll-to-error="scrollToError"
-        @validate="(prop, isValid, message) => $emit('validate', prop, isValid,message)"
-        @click="() => $emit('click')"
-    >
-        <slot></slot>
-    </el-form>
-</template>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+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,
+    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,
+    requiredPosition?: 'left' | 'right'
+}
+
+const formRef = ref<FormInstance | undefined>(undefined);
+
+
+const props = withDefaults(defineProps<Props>(),{
+    inline:false,
+    labelPosition:'top',
+    hideRequiredAsterisk:true,
+    showMessage:true,
+    inlineMessage:true,
+    statusIcon:false,
+    validateOnRuleChange:true,
+    size:'small',
+    scrollToError:true,
+    requiredPosition:'right',
+})
+
+
+
+
+
+defineEmits(["validate", "click"]);
+provide("aceFormValidator", props.validator);
+provide("aceFormModel", props.model);
+provide("aceFormSize", props.size);
+provide("aceFormRequiredPosition", props.requiredPosition);
+const rules = ref<FormRules>({})
+
+const model = computed(() => {
+    return props.model.formData?props.model.formData:props.model;
+});
+
+
+
+defineExpose({
+    elForm: formRef,
+    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 && 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();
+                        });
+                }else{
+                    console.log('error submit!',fields)
+                }
+            })
+        }else{
+            submit()
+                .then(() => {
+                    props.validator?.clearFiledErrors();
+                })
+                .catch(async () => {
+                    //失败
+                    //合并rules
+                    rules.value = mergeRules(props.rules, props.validator.rules);
+                    await formRef.value.validate();
+                    if (onFail) onFail();
+                });
+        }
+
+
+
+    },
+    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"
+        :rules="rules"
+        :inline="inline"
+        :label-position="labelPosition"
+        :label-width="labelWidth"
+        :label-suffix="labelSuffix"
+        :hide-required-asterisk="hideRequiredAsterisk"
+        :show-message="showMessage"
+        :inline-message="inlineMessage"
+        :status-icon="statusIcon"
+        :validate-on-rule-change="validateOnRuleChange"
+        :size="size"
+        :disabled="disabled"
+        :scroll-to-error="scrollToError"
+        @validate="(prop, isValid, message) => $emit('validate', prop, isValid,message)"
+        @click="() => $emit('click')"
+    >
+        <slot></slot>
+    </el-form>
+</template>
+
+<style scoped lang="scss"></style>

package/packages/components/form/index.ts

@@ -1,5 +1,5 @@
-import {withInstall, type SFCWithInstall} from "../../utils/install";
-import Form from "./JaForm.vue";
-export const JaForm: SFCWithInstall<typeof Form> = withInstall(Form);
-export * from "./types"
-export default Form;
+import {withInstall, type SFCWithInstall} from "../../utils/install";
+import Form from "./JaForm.vue";
+export const JaForm: SFCWithInstall<typeof Form> = withInstall(Form);
+export * from "./types"
+export default Form;