@jari-ace/element-plus-component 0.1.0 → 0.1.6

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

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

@@ -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/src/api/domainModel/enum';
+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,126 +1,186 @@
-<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";
-
-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,
-    },
-});
-
-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,
-    validate: (submit: () => Promise<any>, onFail?: () => void) => {
-        formRef.value!.clearValidate();
-        return submit()
-            .then(() => {
-                props.validator?.clearFiledErrors();
-            })
-            .catch(() => {
-                formRef.value!.validate();
-                if (onFail) onFail();
-            });
-    },
-});
-
-watch(() => props.model.formData, () => {
-    props.validator?.clearFiledErrors();
-})
-</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)"
-        @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";
+
+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>

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;

package/packages/components/form/types.ts

@@ -1,4 +1,4 @@
-export interface JaFormModel  {
-    formData: Record<string, any>,
-    [key: string | number | symbol]: any
-}
+export interface JaFormModel  {
+    formData: Record<string, any>,
+    [key: string | number | symbol]: any
+}