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.
95 lines
3.1 KiB
95 lines
3.1 KiB
import html from "html";
|
|
import { defineAsyncComponent, ref, reactive, watch } from "vue";
|
|
import { format } from "../../utils/index.js";
|
|
import { messages } from "../../utils/validation.js";
|
|
|
|
export default {
|
|
name: "formItem",
|
|
components: { AppFormInput: defineAsyncComponent(() => import("./form-input.js")) },
|
|
template: html`
|
|
<template v-if="!schema.hidden">
|
|
<template v-if="schema.type==='object'"></template>
|
|
<template v-else-if="schema.type!=='array'||schema.items.type!=='array'">
|
|
<el-form-item
|
|
:title="prop"
|
|
:label="schema.title"
|
|
:prop="getProp(prop)"
|
|
:rules="getRules(parentSchema,schema,model)"
|
|
:error="mode==='query'?null:getError(prop)"
|
|
>
|
|
<app-form-input :schema="schema" :prop="prop" v-model="model" :mode="mode" />
|
|
</el-form-item>
|
|
</template>
|
|
</template>
|
|
`,
|
|
props: ["modelValue", "mode", "parentSchema", "schema", "prop", "errors"],
|
|
emit: ["update:modelValue"],
|
|
setup(props, context) {
|
|
const model = reactive(props.modelValue);
|
|
watch(model, (value) => {
|
|
context.emit("update:modelValue", value);
|
|
});
|
|
/*start*/
|
|
const showItem = () => {
|
|
if (props.schema.hidden) {
|
|
return false;
|
|
}
|
|
if (props.schema.readOnly && (props.mode === "create" || props.mode === "update")) {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
//
|
|
const getProp = (prop) => {
|
|
return prop;
|
|
};
|
|
//
|
|
const getError = (prop) => {
|
|
return props.errors[prop];
|
|
};
|
|
//
|
|
const getRules = (parentSchema, property, data) => {
|
|
if (props.mode === "query" || props.mode === "details" || !property.rules) {
|
|
return null;
|
|
}
|
|
const rules = [...(Array.isArray(property.rules) ? property.rules : [property.rules])].map((o) =>
|
|
JSON.parse(JSON.stringify(o))
|
|
);
|
|
Object.values(rules).forEach((rule) => {
|
|
rule.data = data;
|
|
rule.schema = parentSchema;
|
|
rule.title = rule.title ?? property.title;
|
|
rule.type = property.type;
|
|
if (rule.validator) {
|
|
rule.validator = validators[rule.validator];
|
|
}
|
|
if (!rule.message) {
|
|
if (rule.required) {
|
|
rule.message = format(messages.required, property.title);
|
|
} else if (rule.pattern) {
|
|
rule.message = format(messages.pattern, property.title);
|
|
} else if (property.type === "string" || property.type === "number" || property.type === "array") {
|
|
if (rule.len) {
|
|
rule.message = format(messages[property.type].len, property.title, rule.len);
|
|
} else if (rule.min) {
|
|
rule.message = format(messages[property.type].min, property.title, rule.min);
|
|
} else if (rule.max) {
|
|
rule.message = format(messages[property.type].max, property.title, rule.max);
|
|
} else if (rule.range) {
|
|
rule.message = format(messages[property.type].range, property.title, rule.range);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return rules;
|
|
};
|
|
/*end*/
|
|
return {
|
|
model,
|
|
showItem,
|
|
getProp,
|
|
getError,
|
|
getRules,
|
|
};
|
|
},
|
|
};
|
|
|