91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<template>
|
|
<ui-form ref="form" class="editor-page" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
|
|
<ui-form-header v-model:value="model" :prefix="prefix" :title="title" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="canDelete" @delete="onDelete" />
|
|
<ui-editor :config="editor" v-model="model" :meta="meta" :disabled="disabled" :scope="true">
|
|
<template v-slot:below>
|
|
<ui-editor-infos v-model="model" :disabled="disabled" />
|
|
</template>
|
|
</ui-editor>
|
|
</ui-form>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'uiEditorPage',
|
|
|
|
props: {
|
|
api: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
editor: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
prefix: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
route: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
canDelete: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
|
|
|
|
computed: {
|
|
id()
|
|
{
|
|
return this.$route.params.id;
|
|
}
|
|
},
|
|
|
|
|
|
data: () => ({
|
|
meta: {},
|
|
model: {},
|
|
disabled: false
|
|
}),
|
|
|
|
methods: {
|
|
|
|
async onLoad(form)
|
|
{
|
|
var config = { system: this.$route.query['zero.scope'] == 'system' };
|
|
const response = await form.load(() => this.id ? this.api.getById(this.id, undefined, config) : this.api.getEmpty(this.$route.query['zero.flavor'], config));
|
|
this.model = response;
|
|
},
|
|
|
|
|
|
async onSubmit(form)
|
|
{
|
|
var config = { system: this.$route.query['zero.scope'] == 'system' };
|
|
const response = this.id ? await this.api.update(this.model, config) : await this.api.create(this.model, config);
|
|
await form.handle(response);
|
|
},
|
|
|
|
|
|
onDelete(item, opts)
|
|
{
|
|
opts.hide();
|
|
var config = { system: this.$route.query['zero.scope'] == 'system' };
|
|
this.$refs.form.onDelete(this.api.delete.bind(this, this.id, config));
|
|
}
|
|
}
|
|
})
|
|
</script> |