~jiyu/Jiyu-Web

ref: 080fcaf0de1a339fa9062adace83860797e186a5 Jiyu-Web/resources/js/Backend/Routes/Page.vue -rw-r--r-- 2.3 KiB
080fcaf0jiyu Made elements draggable 2 years ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
    <div class="container mt-5">
        <back-button></back-button>
        <div class="card mb-3">
            <div class="card-body">
                <div class="form-group">
                    <label for="titleInput">{{ $t('title') }}</label>
                    <input type="text" class="form-control" id="titleInput" v-on:input="setUnsaved" v-model="page.title" :placeholder="$t('enterTitle')" required="true">
                </div>
            </div>
        </div>
        <page-save-button :page="page" ref="save"></page-save-button>
        <page-content :page="page"></page-content>
        <pre>{{ page.content }}</pre>
        <add-element-button v-on:addElement="addElement"></add-element-button>
    </div>
</template>

<script>
    import BackButton from '../../Shared/Components/BackButton';
    import PageSaveButton from '../Components/PageSaveButton';
    import AddElementButton from '../Components/AddElementButton';
    import PageContent from '../Components/PageContent';
    import elements from '../Elements/elements';

    export default {
        data() {
            return {
                page: {
                    title: '',
                    content: [],
                },
            }
        },
        mounted() {
            if (this.$route.params.id && this.$route.params.id != 'new') {
                axios.get('api/pages/' + this.$route.params.id)
                .then(response => {
                    this.page = response.data.data;
                    this.$refs.save.setNoChange();
                });
            } else {
                this.$refs.save.setNoChange();
            }
        },
        methods: {
            setUnsaved() {
                this.$refs.save.setUnsaved();
            },
            addElement(event) {
                let newElement = {
                    type: event,
                }

                for (var i = 0; i < elements[event].fields.length; i++) {
                    newElement[elements[event].fields[i]] = null;
                }

                this.page.content.push(newElement);
                this.setUnsaved();
            }
        },
        components: {
            BackButton,
            PageSaveButton,
            AddElementButton,
            PageContent,
        }
    }
</script>