You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

78 lines
2.0 KiB

import html from "html";
import { defineAsyncComponent, ref, reactive, watch } from "vue";
export default {
components: { AppFormItem: defineAsyncComponent(() => import("./form-item.js")) },
name: "AppForm",
template: html`<div v-loading="loading">
<el-form ref="formRef" :model="model" label-width="auto">
<template v-for="(value, prop) in schema.properties">
<app-form-item
:parentSchema="schema"
:schema="value"
v-model="model"
:prop="prop"
:mode="mode"
:errors="errors"
/>
</template>
<slot name="items"></slot>
<el-form-item v-if="!hideButton">
<template #label></template>
<el-button type="primary" @click="submit" :disabled="loading"><slot>$t('confirm')</slot></el-button>
</el-form-item>
</el-form>
</div>`,
props: ["modelValue", "schema", "action", "hideButton", "isQueryForm", "mode"],
emits: ["update:modelValue", "submit"],
setup(props, context) {
// init
const model = reactive(props.modelValue);
watch(model, (value) => {
context.emit("update:modelValue", value);
});
// ref
const formRef = ref(null);
const loading = ref(false);
//
const errors = ref({});
// reset
const reset = () => {
formRef.value.resetFields();
};
// validate
const validate = async () => {
return formRef.value.validate();
};
// submit
const submit = async () => {
try {
const valid = await validate();
if (valid) {
loading.value = true;
context.emit(
"submit",
(serverErrors) => {
if (serverErrors) {
errors.value = serverErrors;
}
},
loading
);
}
} catch (error) {
console.log(error);
}
};
// expose
context.expose({ validate, reset });
return {
model,
formRef,
loading,
errors,
reset,
submit,
};
},
};