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.
94 lines
3.0 KiB
94 lines
3.0 KiB
1 year ago
|
import html from "html";
|
||
|
|
import { ref, reactive, watch } from "vue";
|
||
|
|
import { dayjs } from "element-plus";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
template: html`
|
||
|
|
<template v-if="getDisabled()">
|
||
|
|
<template v-if="model[prop]!==null">
|
||
|
|
<el-switch disabled v-model="model[prop]" type="checked" v-if="schema.type==='boolean'" />
|
||
|
|
<template v-else-if="schema.format==='datetime'">{{dayjs(model[prop]).format('YYYY-MM-DD HH:mm:ss')}}</template>
|
||
|
|
<template v-else-if="schema.format==='date'">{{dayjs(model[prop]).format('YYYY-MM-DD')}}</template>
|
||
|
|
<template v-else>{{model[prop]}}</template>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<template v-if="getInput(schema)==='select'">
|
||
|
|
<el-select
|
||
|
|
v-model="model[prop]"
|
||
|
|
:placeholder="$t('select')"
|
||
|
|
:multiple="!!schema.multiple"
|
||
|
|
clearable
|
||
|
|
style="width:100%"
|
||
|
|
>
|
||
|
|
<el-option v-for="item in schema.options" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
<el-input
|
||
|
|
:disabled="getDisabled()"
|
||
|
|
:placeholder="schema.title"
|
||
|
|
v-model="model[prop]"
|
||
|
|
type="number"
|
||
|
|
v-else-if="schema.type==='number'"
|
||
|
|
/>
|
||
|
|
<el-input-number
|
||
|
|
:disabled="getDisabled()"
|
||
|
|
:placeholder="schema.title"
|
||
|
|
v-model="model[prop]"
|
||
|
|
:precision="0"
|
||
|
|
v-else-if="schema.type==='integer'"
|
||
|
|
/>
|
||
|
|
<template v-else-if="schema.type==='boolean'">
|
||
|
|
<el-select :disabled="getDisabled()" v-model="model[prop]" :placeholder="schema.title" v-if="schema.nullable">
|
||
|
|
<el-option prop="select" :value="null" :label="$t('select')" />
|
||
|
|
<el-option prop="true" :value="true" :label="$t('true')" />
|
||
|
|
<el-option prop="false" :value="false" :label="$t('false')" />
|
||
|
|
</el-select>
|
||
|
|
<el-switch v-model="model[prop]" type="checked" v-else />
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<el-input
|
||
|
|
:disabled="getDisabled()"
|
||
|
|
:placeholder="schema.title"
|
||
|
|
v-model="model[prop]"
|
||
|
|
type="password"
|
||
|
|
show-password
|
||
|
|
v-if="schema.format==='password'"
|
||
|
|
/>
|
||
|
|
<el-input :disabled="getDisabled()" :placeholder="schema.title" v-model="model[prop]" type="text" v-else />
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
`,
|
||
|
|
props: ["modelValue", "schema", "prop", "isReadOnly"],
|
||
|
|
emit: ["update:modelValue"],
|
||
|
|
async setup(props, context) {
|
||
|
|
const model = reactive(props.modelValue);
|
||
|
|
watch(model, (value) => {
|
||
|
|
context.emit("update:modelValue", value);
|
||
|
|
});
|
||
|
|
/*start*/
|
||
|
|
const getDisabled = () => {
|
||
|
|
if (props.isReadOnly && props.isReadOnly === true) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if (props.schema.displayOnly) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if (props.mode === "update" && props.schema.addOnly) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
const getInput = (schema) => {
|
||
|
|
return schema.input ?? schema.type;
|
||
|
|
};
|
||
|
|
/*end*/
|
||
|
|
return {
|
||
|
|
model,
|
||
|
|
getDisabled,
|
||
|
|
getInput,
|
||
|
|
dayjs,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|