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.
68 lines
1.8 KiB
68 lines
1.8 KiB
import html from "html";
|
|
import { defineAsyncComponent, ref, reactive, watch } from "vue";
|
|
import { getRules } 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="getDisabled()?[]: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 getDisabled = () => {
|
|
if (props.mode === "details") {
|
|
return true;
|
|
}
|
|
if (props.mode === "update" && props.schema.readOnly) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
//
|
|
const getProp = (prop) => {
|
|
return prop;
|
|
};
|
|
//
|
|
const getError = (prop) => {
|
|
return props.errors[prop];
|
|
};
|
|
/*end*/
|
|
return {
|
|
model,
|
|
showItem,
|
|
getProp,
|
|
getError,
|
|
getDisabled,
|
|
getRules,
|
|
};
|
|
},
|
|
};
|
|
|