vue 小组件集合

emit.vue

    this.$emit('change', { perpage: this.perpage, page: page })

index.blade.php

      <div class="row">
                    <div class="col-md-9">
                        <navbar type="@yield('nav-index')" dropdown_type="@yield('second-nav-index')"></navbar>
                    </div>
                    <div class="col-md-1">
                        <env app_env="{{ env('APP_ENV', 'no')}}"></env>
                    </div>
                    <div class="col-md-1">
                        <p class="navbar-text navbar-right">{{ Auth::user()->name }}</p>
                    </div>
                    <div class="col-md-1">
                        <logout></logout>
                    </div>
                </div>

navbar.vue

<template>
    <div class="container">
        <ul class="nav nav-tabs">
            <li role="presentation"
                v-for="item in items"
                :class="{active: item.id == type}">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" v-if="item.dropdown">
                        {{item.text}} <span class="caret"></span>
                    </a>
                    <a  v-else :href="''+item.href">{{item.text}}</a>

                <ul class="dropdown-menu" v-if="item.dropdown">
                    <li v-for="sitem in item.dropdown"
                        :class="{active: item.id == type && sitem.id == dropdown_type }"
                        ><a :href="''+sitem.href">{{sitem.text}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    props: [
        'type',
        'dropdown_type'
    ],
    computed: {
        items () {
            return this.$store.state.navbar
        }
    }
}
</script>

sidebar.vue

<template>
    <div>
        <ul class="list-group">
            <li v-for="item of items"
                :class="{active: type == item.id}" class="list-group-item" @click="onClick(item)">
                {{item.text}}
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    props: [
        'type',
        'flag',
    ],
    data() {
        return {
        }
    },
    methods: {
        onClick: function (item) {
            window.location.href = item.href;
        }
    },
    computed: {
        items () {
            return this.$store.state.sidebar[this.flag]
        }
    }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    // 定义状态
    state: {
        navbar: [
            {
                id: "1", href:"/picture-books", text: "绘本管理"
            },
            {
                id: "4", href:"/promotions", text: "推广设置"
            },
            {
                id: "5", href:"/home", text: "个人主页"
            },
            {
                id: "6", href:"#", text: "其他", dropdown: [
                    {
                        id: 0, href:"/robots", text:"设备管理"
                    },
                    {
                        id: 1, href:"/packages", text:"OTA管理"
                    },
                    {
                        id: 2, href:"/users", text:"用户管理"
                    },

                ]
            },
            {
                id: "7", href:"#", text: "主题管理", dropdown: [
                    {
                        id: 0, href:"/picture-books-topic", text:"绘本主题"
                    },
                    {
                        id: 1, href:"/story-topic", text:"故事主题"
                    },
                ]
            },
        ],
        sidebar: {
            picture_books: [
                {id: 0, href:'/picture-books', text:'绘本'},
                {id: 1, href:'/picture-books/create', text:'绘本创建'}
            ],
            home: [
                {id: 0, href:'/home', text:'操作日志'},
            ],
            promotions: [
                {id: 0, href:'/promotions', text:'列表'},
                {id: 1, href:'/promotions/create', text:'添加'},
            ],
            robots: [
                {id: 0, href:'/robots', text:'查询'},
                {id: 1, href:'/robots/edit', text:'修改'},
            ],
            packages: [
                {id: 0, href:'/packages', text:'列表'},
            ],
            users: [
                {id: 0, href:'/users', text:'列表'},
                {id: 1, href:'/users/scan-isbns', text:'isbn'},
            ],
            picture_books_topic: [
                {id: 0, href:'/picture-books-topic', text:'列表'},
                {id: 1, href:'/picture-books-topic/create', text:'添加'},
            ],
            story_topic: [
                {id: 0, href:'/story-topic', text:'列表'},
                {id: 1, href:'/story-topic/create', text:'添加'},
            ],
        },
        env: {
            local: {
                key_text: '本地',
                env_class:'label-info',
            },
            qa: {
                key_text: '线下',
                env_class: 'label-warning',
            },
            production: {
                key_text: '线上',
                env_class: 'label-danger',
            },
            no: {
                key_text: '线上',
                env_class: 'label-default',
            },
        }
    },
})

export default store

users-list.vue

<template>
    <div>
        <div class="row">
            <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
                        :actions="actions"
                        v-on:change="changePage"
                        v-on:column-sort="onColumn"
                        v-on:searching="onSearch"></datasource>
        </div>
        <div class="row">
            <modal name="users-list"
                   @before-open="beforeOpen" >
                   <show-luka-user :row="params.row"></show-luka-user>
            </modal>
        </div>
    </div>
</template>

<script>
import Datasource from 'vue-datasource';

export default {
    data() {
        const self = this;
        return {
            params: {},
            url: '/api/users',
            information: {
                pagination:{},
                data:[]
            },
            columns: [
                {
                    name: 'Id',
                    key: 'id',
                },
                {
                    name: 'Mobile',
                    key: 'name',
                },
                {
                    name: 'Nickname',
                    key: 'profile.nickname',
                },
                {
                    name: 'Avatar',
                    key: 'profile.avatar',
                    render(value) { // Render callback
                        if (value) {
                            return `<img src=${value} height="50" width="50" />`;
                        }
                        return '';
                    }
                },
                {
                    name: 'IsEdit',
                    key: 'profile.is_edited',
                },
                {
                    name: 'Accid',
                    key: 'netease.accid',
                },
            ],
            actions: [
                {
                    text: 'Show',
                    icon: 'glyphicon glyphicon-eye-open',
                    class: 'btn-info',
                    show (selectedRow) {
                        return true
                    },
                    event (e, row) {
                        if (row === null) {
                            alert('Ups.. data not found :(')
                            console.info('Ups.. data not found :(')
                        } else {
                            self.show(row)
                            console.info('Yeeei, I found this :)', JSON.stringify(row))
                        }
                    }
                }
            ],
            search:'',
            perpage: 15,
        }
    },
    components: {
        Datasource,
    },
    methods: {
        changePage(values) {
            this.perpage = values.perpage;
            axios.get(this.url,  {
                params: {
                    'page':  values.page,
                    'per_page' : values.perpage,
                    'search': this.search
                }
            }).then( (res) => {
                this.setPage(res)
            });
        },
        onSearch(searchQuery) {
            this.search = searchQuery;
            axios.get(this.url,  {
                params: {
                    'per_page' : this.perpage,
                    'search': this.search
                }
            }).then( (res) => {
                this.setPage(res)
            });
        },
        getOrder(value) {
            return this.columns[value.key].key+ ',' + value.order;
        },
        onColumn(column) {
            self = this
            axios.get(this.url,  {
                params: {
                    'per_page' : this.perpage,
                    'search': this.search,
                    'order': self.getOrder(column)
                }
            }).then( (res) => {
                this.setPage(res)
            });
        },
        show (row) {
            this.$modal.show('users-list', row);
        },
        hide () {
            this.$modal.hide('users-list');
        },
        beforeOpen (event) {
            this.params = event.params
        },
        setPage(res) {
            this.information.data = res.data.data;
            this.information.pagination = res.data.meta.pagination
            this.information.pagination.from = 1
            this.information.pagination.total = res.data.meta.pagination.total;
            this.information.pagination.to = res.data.meta.pagination.total_pages;
            this.information.pagination.last_page = res.data.meta.pagination.total_pages;
            this.information.pagination.current_page = res.data.meta.pagination.current_page;
            this.information.pagination.next_page_url = res.data.meta.pagination.links.next;
            this.information.pagination.prev_page_url = res.data.meta.pagination.links.previous;
        }
    },
    computed: {
        getData() {
            const self = this;
            return self.information.data;
        }
    },
    beforeMount() {
        axios.get(this.url, { params: {'search': this.search}}).then( (res) => {
            this.setPage(res)
        })
    }
}
</script>