Create a gist now

Instantly share code, notes, and snippets.

@liujingyu /emit.vue
Last active Aug 23, 2017

Embed
What would you like to do?
vue 小组件集合
this.$emit('change', { perpage: this.perpage, page: page })
<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>
<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>
<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>
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
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment