├── r.bat
├── .gitignore
├── Img
    ├── User示例图片.png
    ├── 无限分级菜单示例.png
    ├── TestGrid示例图片.png
    └── vueStrap的demo示例.png
├── vueTest使用说明.docx
├── vueTest使用说明.pdf
├── src
    ├── assets
    │   ├── logo.png
    │   └── css
    │   │   └── custom.css
    ├── components
    │   ├── User
    │   │   ├── TestTabs.vue
    │   │   ├── TestGrid.vue
    │   │   ├── User.vue
    │   │   └── TestVueStrap.vue
    │   └── Common
    │   │   ├── Field.vue
    │   │   ├── FilterPane.vue
    │   │   ├── Pagination.vue
    │   │   ├── GridBase.vue
    │   │   ├── Menu.vue
    │   │   └── Grid.vue
    ├── index.html
    └── main.js
├── .babelrc
├── test
    └── unit
    │   ├── index.js
    │   └── Hello.spec.js
├── .eslintrc.js
├── LICENSE
├── README.md
├── package.json
└── db.json


/r.bat:
--------------------------------------------------------------------------------
1 | npm run dev


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/Img/User示例图片.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/Img/User示例图片.png


--------------------------------------------------------------------------------
/Img/无限分级菜单示例.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/Img/无限分级菜单示例.png


--------------------------------------------------------------------------------
/vueTest使用说明.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/vueTest使用说明.docx


--------------------------------------------------------------------------------
/vueTest使用说明.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/vueTest使用说明.pdf


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/Img/TestGrid示例图片.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/Img/TestGrid示例图片.png


--------------------------------------------------------------------------------
/Img/vueStrap的demo示例.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilsonDebug/VueTest/HEAD/Img/vueStrap的demo示例.png


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
1 | // Polyfill fn.bind() for PhantomJS
2 | /* eslint-disable no-extend-native */
3 | Function.prototype.bind = require('function-bind')
4 | 
5 | // require all test files (files that ends with .spec.js)
6 | var testsContext = require.context('.', true, /\.spec$/)
7 | testsContext.keys().forEach(testsContext)
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 4 |   extends: 'standard',
 5 |   // required to lint *.vue files
 6 |   plugins: [
 7 |     'html'
 8 |   ],
 9 |   // add your custom rules here
10 |   'rules': {
11 |     // allow paren-less arrow functions
12 |     'arrow-parens': 0,
13 |     // allow debugger during development
14 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/test/unit/Hello.spec.js:
--------------------------------------------------------------------------------
 1 | /* global describe, it, expect */
 2 | 
 3 | import Vue from 'vue'
 4 | import Hello from 'src/components/Hello'
 5 | 
 6 | describe('Hello.vue', () => {
 7 |   it('should render correct contents', () => {
 8 |     const vm = new Vue({
 9 |       template: '<div><hello></hello></div>',
10 |       components: { Hello }
11 |     }).$mount()
12 |     expect(vm.$el.querySelector('.hello h1').textContent).toBe('Hello World!')
13 |   })
14 | })
15 | 
16 | // also see example testing a component with mocks at
17 | // https://github.com/vuejs/vue-loader-example/blob/master/test/unit/a.spec.js#L24-L49
18 | 


--------------------------------------------------------------------------------
/src/components/User/TestTabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <fieldset>
 4 |       <legend>Tabs</legend>
 5 |       <tabs>
 6 |         <tab header="one">
 7 |           <div class="form-group">
 8 |             tab one
 9 |           </div>
10 |         </tab>
11 |         <tab header="two">
12 |           <div class="form-group">
13 |           tab two
14 |           </div>
15 |         </tab>
16 |         <tab header="three" disabled>
17 |           <div class="form-group">
18 |           tab three
19 |           </div>
20 |         </tab>
21 |       </tabs>
22 |     </fieldset>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import tabs from 'vue-strap/src/Tabset.vue'
28 | import tab from 'vue-strap/src/Tab.vue'
29 | 
30 | export default {
31 |   components: {
32 |     tabs,
33 |     tab
34 |   },
35 |   data () {
36 |     return {
37 | 
38 |     }
39 |   }
40 | }
41 | </script>


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vueTest</title>
 6 |   </head>
 7 |   <body>
 8 |     <div role="main">
 9 |       <div class="bs-example">
10 |         <nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example">
11 |           <div class="container">
12 |             <div class="navbar-header">
13 |               <button data-toggle="collapse" type="button" class="navbar-toggle">
14 |                 <span class="sr-only">Toggle navigation</span>
15 |                 <span class="icon-bar"></span>
16 |                 <span class="icon-bar"></span>
17 |                 <span class="icon-bar"></span>
18 |               </button>
19 |               <a href="#" class="navbar-brand">VueTest</a>
20 |             </div>
21 |             <menu :menus="menus"></menu>
22 |             <!-- /.nav-collapse -->
23 |           </div>
24 |           <!-- /.container -->
25 |         </nav>
26 |         <!-- /navbar-example -->
27 |       </div>
28 |     </div>
29 |     <router-view></router-view>
30 |   </body>
31 | </html>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 zhangxin369
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/assets/css/custom.css:
--------------------------------------------------------------------------------
 1 | /*sth like panel-body, we need the border*/
 2 | .box {
 3 | 	border: 1px solid #ddd;
 4 | 	border-radius: 4px;
 5 | 	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
 6 | 	padding: 10px 15px 10px 15px;
 7 | 	margin: 10px 0;
 8 | }
 9 | .vertical-center{
10 |   position: fixed;
11 |   top: 200px;
12 |   left: 50%;
13 |   transform: translate(-50%, -50%);
14 | }
15 | /*.btn {
16 | 	background: #704100;
17 | 	width: 100%;
18 | 	color: #FFF;
19 | }
20 | .btn:hover {
21 | 	background: #EFC06C !important;
22 | }*/
23 | 
24 | #people {
25 |   text-align: center;
26 |   width: 95%;
27 |   margin: 0 auto;
28 | }
29 | 
30 | h2 {
31 |   margin-bottom: 30px;
32 | }
33 | 
34 | th,
35 | td {
36 |   text-align: left;
37 | }
38 | 
39 | th:nth-child(n+2),
40 | td:nth-child(n+2) {
41 |   text-align: center;
42 | }
43 | 
44 | thead tr:nth-child(2) th {
45 |   font-weight: normal;
46 | }
47 | 
48 | .VueTables__sort-icon {
49 |   margin-left: 10px;
50 | }
51 | 
52 | .VueTables__dropdown-pagination {
53 |   margin-left: 10px;
54 | }
55 | 
56 | .VueTables__highlight {
57 |   background: yellow;
58 |   font-weight: normal;
59 | }
60 | 
61 | .VueTables__sortable {
62 |   cursor: pointer;
63 | }


--------------------------------------------------------------------------------
/src/components/User/TestGrid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <grid-base url="/api/menus" :filters="filters" :grid-columns="gridColumns" :is-show-action="false" :actions="actions" sort-key="id" order="ASC" :page-size-list="pageSizeList"></grid-base>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import gridBase from '../Common/GridBase'
 9 | 
10 | export default {
11 |   components: {
12 |     gridBase
13 |   },
14 |   data () {
15 |     return {
16 |       filters: {
17 |         title: 'TestGrid filterPane',
18 |         fields: [
19 |           {name: 'id', title: 'Id', type: 'number'},
20 |           {name: 'parentId', title: 'Parent Id', type: 'number'},
21 |           {name: 'menuName', title: 'Menu Name', type: 'text'}
22 |         ]
23 |       },
24 |       gridColumns: [
25 |         {name: 'id', title: 'Id', type: 'number'},
26 |         {name: 'parentId', title: 'Parent Id', type: 'number'},
27 |         {name: 'menuName', title: 'Menu Name', type: 'text'},
28 |         { name: 'url', title: 'Url', type: 'text' }
29 |       ],
30 |       // actions 暂时无用！！！！！
31 |       actions: {
32 |         label: 'Action',
33 |         template: ''
34 |       },
35 |       pageSizeList: [10, 20, 30, 50]
36 |     }
37 |   }
38 | }
39 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueTest
 2 | 
 3 | ========================================================
 4 | 
 5 | 项目描述
 6 | -----------------------
 7 | 针对vue.js开发的一些组件示例
 8 | 
 9 | 项目内容
10 | ------------------------
11 | 1. 无限分级菜单组件：Menu.vue
12 | 2. Grid 组件： Grid.vue
13 | 3. 分页组件： Pagination.vue （ 添加pageSizeList: [10,20,30,40,50,60] 设置每页显示记录数 ）
14 | 4. 查询组件：FilterPane.vue
15 | 5. 2-3-4 合并成GridBase组件，其中 TestGrid.vue, User.vue 使用GridBase组件来改写。
16 | 6. VueStrap 的使用示例：TestVueStrap.vue
17 | 
18 | 项目依赖
19 | --------------------------
20 | 
21 |     "bootstrap": "^3.3.6",
22 |     "font-awesome": "^4.5.0",
23 |      "jquery": "^2.2.1",
24 |     "json-server": "^0.8.9",
25 |     "mockjs": "^1.0.0",
26 |     "vue": "^1.0.18",
27 |     "vue-resource": "^0.7.0",
28 |     "vue-router": "^0.7.10",
29 |     "vue-strap": "1.0.8" //改为固定1.0.8, 加入 新版本 1.0.10 有点bug
30 | 
31 | 数据来源
32 | --------------------------
33 | 数据通过mock.js 生成，然后用json-server 来管理根目录下的db.json，模拟后端数据库，
34 | 产生restful api, 供前端调用。Restful api 可以通过localhost:8080/api/访问。所以现在看到的
35 | testgrid, user 页面，基本上和访问后端数据库一样，可以完全模拟访问后端api。
36 | 
37 | 访问
38 | ----------------------------
39 | 1. npm install
40 | 2. r.bat
41 | 
42 |     运行完毕后，就可以启动服务进行访问。
43 | 
44 |     访问localhost:8090/api/*， 可以访问json-server 的api.
45 | 
46 |     访问localhost:8090/app/index.html, 可以访问示例程序。
47 | 
48 | 运行效果可以参考Img目录下的图片。
49 | 


--------------------------------------------------------------------------------
/src/components/User/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <grid-base url="/api/users" :filters="filters" :grid-columns="gridColumns" :is-show-action="true" sort-key="name" order="ASC" :page-size-list="pageSizeList"></grid-base>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import gridBase from '../Common/GridBase'
 9 | 
10 | export default {
11 |   components: {
12 |     gridBase
13 |   },
14 |   data () {
15 |     return {
16 |       filters: {
17 |         title: 'User filterPane',
18 |         fields: [
19 |           {name: 'name', title: 'Name', type: 'text'},
20 |           {name: 'sex', title: 'Sex', type: 'select', options: ['M', 'F']},
21 |           {name: 'email', title: 'Email', type: 'text'}
22 |         ]
23 |       },
24 |       gridColumns: [
25 |         {name: 'name', title: 'Name', type: 'text'},
26 |         {name: 'sex', title: 'Sex', type: 'select', options: ['M', 'F']},
27 |         {name: 'email', title: 'Email', type: 'text'}
28 |       ],
29 |       sortKey: '',
30 |       order: '',
31 |       // actions 暂时无用！！！！！
32 |       actions: {
33 |         label: 'Action',
34 |         template: ''
35 |       },
36 |       pageSizeList: [10, 20, 30, 50, 60],
37 |       selectedRecords: []
38 |     }
39 |   },
40 |   methods: {
41 |     // save: function (items) {
42 |     //   console.log('Save in User.vue')
43 |     // }
44 |   }
45 | }
46 | 
47 | </script>


--------------------------------------------------------------------------------
/src/components/Common/Field.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input class="form-control" v-model="value" type="{{type}}" v-if="type == 'text'" @keyup.enter="onEnter"></input>
 3 |   <select class="form-control" v-model="value" v-if="type == 'select'" >
 4 |     <option v-for="opt in options">{{opt}}</option>
 5 |   </select>
 6 |   <input class="form-control" v-model="value" type="{{type}}" v-if="type == 'textarea'"></input>
 7 |   <input class="form-control" v-model="value" type="{{type}}" v-if="type == 'number'"></input>
 8 |   <input class="form-control" v-model="value" type="{{type}}" v-if="type == 'date'"></input>
 9 |   <input class="form-control" v-model="value" type="{{type}}" v-if="type == 'checkbox'"></input>
10 |   <input class="form-control" v-model="value" type="{{type}}" v-if="type == 'radio'"></input>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     value: String,
17 |     type: {
18 |       type: String,
19 |       required: true,
20 |       validator: function (value) {
21 |         console.log('value:', value)
22 |         return ['text', 'textarea', 'select', 'number', 'date', 'checkbox', 'radio'].indexOf(value) >= 0
23 |       },
24 |       default: function () {
25 |         return 'text'
26 |       }
27 |     },
28 |     options: Array,
29 |     onEnter: {
30 |       type: Function,
31 |       default () {
32 |       }
33 |     }
34 |   },
35 |   data () {
36 |     return {
37 |     }
38 |   },
39 |   computed: {
40 |   }
41 | }
42 | </script>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Menu from './components/Common/Menu'
 3 | 
 4 | require('bootstrap/dist/css/bootstrap.min.css')
 5 | require('./assets/css/custom.css')
 6 | 
 7 | Vue.use(require('vue-resource'));
 8 | Vue.http.options.emulateJSON = true;
 9 | Vue.http.options.emulateHTTP = true;
10 | 
11 | //ajax 拦截
12 | Vue.http.interceptors.push({
13 |   request: function (request) {
14 |     return request
15 |   },
16 |   response: function (response) {
17 |     var status = response.status;
18 |     if(status === 404) {
19 | 
20 |     }
21 |     if(response.data.STATUS) {
22 |       console.log('response.data.STATUS:', response.data.STATUS)
23 |     }
24 |     return response
25 |   }
26 | });
27 | 
28 | var VueRouter = require('vue-router');
29 | Vue.use(VueRouter);
30 | 
31 | var router = new VueRouter();
32 | router.map({
33 |     '/testGrid': {
34 |       component: require('./components/User/TestGrid')
35 |     },
36 |     '/user': {
37 |       component: require('./components/User/User')
38 |     },
39 |     '/testVueStrap': {
40 |       component: require('./components/User/TestVueStrap')
41 |     },
42 |     '/testTabs': {
43 |       component: require('./components/User/TestTabs')
44 |     },
45 |     '/:param': {
46 |       component: {
47 |         template: '<div>{{$route.params|json}}</div>'
48 |       }
49 |     }
50 | });
51 | 
52 | router.beforeEach(function (transition) {
53 |   console.log('transition.to.path:',transition.to.path);
54 |   if (transition.to.path === '/' || transition.to.path.indexOf('/api') > 0) {
55 |     transition.abort()
56 |   } else {
57 |     transition.next()
58 |   }
59 | });
60 | 
61 | var app = Vue.extend({
62 |   el: "body",
63 |   components: {
64 |     Menu
65 |   },
66 |   data: {
67 |     menus: []
68 |   },
69 |   ready() {
70 |     this.$http({url: '/api/menus', method: 'GET'}).then(function (response) {
71 |       var menus = response.data;
72 |       console.log('menus:', menus);
73 |       this.$set('menus', menus);
74 |     }, function (response) {
75 |         // error callback
76 |     })
77 |   }
78 | });
79 | 
80 | router.start(app, 'body');
81 | window.router = router;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueTest",
 3 |   "description": "A Vue.js project",
 4 |   "author": "wilson <wilson.sz@flexsystem.com>",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "node build/dev-server.js",
 8 |     "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js",
 9 |     "test": "karma start build/karma.conf.js --single-run"
10 |   },
11 |   "dependencies": {
12 |     "bootstrap": "^3.3.6",
13 |     "font-awesome": "^4.5.0",
14 |     "jquery": "^2.2.1",
15 |     "json-server": "^0.8.9",
16 |     "mockjs": "^1.0.0",
17 |     "vue": "^1.0.18",
18 |     "vue-resource": "^0.7.0",
19 |     "vue-router": "^0.7.10",
20 |     "vue-strap": "1.0.8"
21 |   },
22 |   "devDependencies": {
23 |     "babel-core": "^6.0.0",
24 |     "babel-loader": "^6.0.0",
25 |     "babel-plugin-transform-runtime": "^6.0.0",
26 |     "babel-preset-es2015": "^6.0.0",
27 |     "babel-preset-stage-2": "^6.0.0",
28 |     "babel-runtime": "^5.8.0",
29 |     "connect-history-api-fallback": "^1.1.0",
30 |     "cross-env": "^1.0.7",
31 |     "css-loader": "^0.23.0",
32 |     "eslint": "^2.0.0",
33 |     "eslint-config-standard": "^5.1.0",
34 |     "eslint-friendly-formatter": "^1.2.2",
35 |     "eslint-loader": "^1.3.0",
36 |     "eslint-plugin-html": "^1.3.0",
37 |     "eslint-plugin-promise": "^1.0.8",
38 |     "eslint-plugin-standard": "^1.3.2",
39 |     "eventsource-polyfill": "^0.9.6",
40 |     "express": "^4.13.3",
41 |     "extract-text-webpack-plugin": "^1.0.1",
42 |     "file-loader": "^0.8.4",
43 |     "function-bind": "^1.0.2",
44 |     "html-webpack-plugin": "^2.8.1",
45 |     "inject-loader": "^2.0.1",
46 |     "jasmine-core": "^2.4.1",
47 |     "json-loader": "^0.5.4",
48 |     "karma": "^0.13.15",
49 |     "karma-jasmine": "^0.3.6",
50 |     "karma-phantomjs-launcher": "^1.0.0",
51 |     "karma-spec-reporter": "0.0.24",
52 |     "karma-webpack": "^1.7.0",
53 |     "phantomjs-prebuilt": "^2.1.3",
54 |     "rimraf": "^2.5.0",
55 |     "url-loader": "^0.5.7",
56 |     "vue-hot-reload-api": "^1.2.0",
57 |     "vue-html-loader": "^1.0.0",
58 |     "vue-loader": "^8.1.3",
59 |     "vue-style-loader": "^1.0.0",
60 |     "webpack": "^1.12.2",
61 |     "webpack-dev-middleware": "^1.4.0",
62 |     "webpack-hot-middleware": "^2.6.0",
63 |     "style-loader": "^0.13.0",
64 |     "transfer-webpack-plugin": "^0.1.4",
65 |     "minimatch": "^3.0.0",
66 |     "color-convert": "^1.0.0",
67 |     "ansi-regex": "^2.0.0",
68 |     "expose-loader": "^0.7.1",
69 |     "http-proxy-middleware": "^0.13.0"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/components/Common/FilterPane.vue:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 | .btn-filter {
  3 |   width: 140px !important;
  4 | }
  5 | </style>
  6 | <template>
  7 | <div class="form-horizontal">
  8 |   <fieldset>
  9 |     <legend>
 10 |       {{filtersTitle}} &nbsp;&nbsp;&nbsp;&nbsp;
 11 |       <a href="#" @click="showFilter()">{{filterTitle}}<b class="caret" v-show="!isShowFilter"></b></a></legend>
 12 |     <div class="form-group" v-show="isShowFilter">
 13 |       <div class="col-md-8">
 14 |         <div class="form-group" v-for="field in filtersFields">
 15 |           <label class="control-label text-left col-md-4" for="{{field.name}}">
 16 |             {{field.title}}
 17 |           </label>
 18 |           <div class="col-md-8">
 19 |             <field :value.sync="field.value" :type="field.type" :options="field.options" :on-enter="onSearch"></field>
 20 |           </div>
 21 |         </div>
 22 | 
 23 |         <hr/>
 24 |         <div class="form-group">
 25 |           <label class="control-label text-left col-md-4">
 26 |             Order By:
 27 |           </label>
 28 |           <div class="col-md-8 form-inline">
 29 |             <select class="form-control" v-model="sortKey">
 30 |               <option value="{{field.name}}" v-for="field in sortFields">{{field.title}}</option>
 31 |             </select>
 32 |             <input type="radio" name="order" v-model="order" value="ASC" /> <label>Asc</label>
 33 |             <input type="radio" name="order" v-model="order" value="DESC" /> <label>Desc</label>
 34 |           </div>
 35 |         </div>
 36 |       </div>
 37 | 
 38 |       <div class="col-md-4">
 39 |         <slot name="one">
 40 |           <div class="form-group">
 41 |             <button class="btn btn-primary btn-filter" @click="onSearch()">Search</button>
 42 |           </div>
 43 |           <div class="form-group">
 44 |             <button class="btn btn-default  btn-filter" @click="reset()">Reset</button>
 45 |           </div>
 46 |         </slot>
 47 |       </div>
 48 |     </div>
 49 |     <hr>
 50 |   </fieldset>
 51 | </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | import field from '../Common/Field'
 56 | 
 57 | export default {
 58 |   components: {
 59 |     field
 60 |   },
 61 |   props: {
 62 |     title: String,
 63 |     filtersTitle: String,
 64 |     filtersFields: Array,
 65 |     sortFields: Array,
 66 |     sortKey: String,
 67 |     order: String,
 68 |     onSearch: {
 69 |       type: Function,
 70 |       default: function () {
 71 | 
 72 |       }
 73 |     }
 74 |   },
 75 |   data () {
 76 |     return {
 77 |       isShowFilter: true
 78 |     }
 79 |   },
 80 |   computed: {
 81 |     filterTitle: function () {
 82 |       return (this.isShowFilter ? 'Hide Filter' : 'Show Filter')
 83 |     }
 84 |   },
 85 |   methods: {
 86 |     showFilter: function () {
 87 |       this.isShowFilter = !this.isShowFilter
 88 |     },
 89 |     // search: function () {
 90 |     //   console.log('search')
 91 |     //   this.$dispatch('search', true)
 92 |     // },
 93 |     reset: function () {
 94 |       console.log('reset')
 95 |       for (var it in this.fields) {
 96 |         this.fields[it].value = ''
 97 |       }
 98 |     }
 99 |   }
100 | }
101 | </script>


--------------------------------------------------------------------------------
/src/components/Common/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 | 
  3 | ul,li{
  4 |     margin: 0px;
  5 |     padding: 0px;
  6 | }
  7 | .page-bar li{
  8 |     list-style: none;
  9 |     display: inline
 10 | }
 11 | .page-bar li:first-child>a {
 12 |    margin-left: 0px
 13 | }
 14 | .page-bar a{
 15 |     border: 1px solid #ddd;
 16 |     text-decoration: none;
 17 |     position: relative;
 18 |     float: left;
 19 |     padding: 6px 12px;
 20 |     margin-left: -1px;
 21 |     line-height: 1.42857143;
 22 |     color: #337ab7;
 23 |     cursor: pointer
 24 | }
 25 | .page-bar a:hover{
 26 |     background-color: #eee;
 27 | }
 28 | .page-bar .active a{
 29 |     color: #fff;
 30 |     cursor: default;
 31 |     background-color: #337ab7;
 32 |     border-color: #337ab7;
 33 | }
 34 | .page-bar i{
 35 |     font-style:normal;
 36 |     color: #d44950;
 37 |     margin: 0px 4px;
 38 |     font-size: 12px;
 39 | }
 40 | .page-size-list {
 41 |   width: 140px !important;
 42 | }
 43 | </style>
 44 | <template>
 45 | <div class="container">
 46 |   <div class="page-bar">
 47 |     <ul>
 48 |       <li v-if="showFirst"><a @click="page=1">First</a></li>
 49 |       <li v-if="showFirst"><a @click="page--"><</a></li>
 50 |       <li v-for="index in indexs"  v-bind:class="{ 'active': page === index}">
 51 |        <a @click="btnClick(index)">{{ index }}</a>
 52 |       </li>
 53 |       <li v-if="showLast"><a @click="page++">></a></li>
 54 |       <li v-if="showLast"><a @click="page=all">Last</a></li>
 55 |       <li>
 56 |         <a>{{page}} /{{all}} pages ({{records}} records)</a>
 57 |       </li>
 58 |       <li>
 59 |           <select class="form-control page-size-list" v-model="pageSize">
 60 |             <option v-for="p in pageSizeList">{{p}}</option>
 61 |           </select>
 62 |       </li>
 63 | 
 64 |     </ul>
 65 |   </div>
 66 | </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | export default {
 71 |   props: {
 72 |     records: Number,
 73 |     page: Number,
 74 |     pageSize: {
 75 |       type: Number,
 76 |       default: 10
 77 |     },
 78 |     pageSizeList: {
 79 |       type: Array,
 80 |       default: function () {
 81 |         return [10, 20, 30, 40, 50]
 82 |       }
 83 |     }
 84 |   },
 85 |   computed: {
 86 |     all: function () {
 87 |       return Math.ceil(this.records / this.pageSize)
 88 |     },
 89 |     indexs: function () {
 90 |       var left = 1
 91 |       var right = this.all
 92 |       var ar = []
 93 |       if (this.all >= 11) {
 94 |         if (this.page > 5 && this.page < this.all - 4) {
 95 |           left = this.page - 5
 96 |           right = this.page + 4
 97 |         } else {
 98 |           if (this.page <= 5) {
 99 |             left = 1
100 |             right = 10
101 |           } else {
102 |             right = this.all
103 |             left = this.all - 9
104 |           }
105 |         }
106 |       }
107 |       while (left <= right) {
108 |         ar.push(left)
109 |         left++
110 |       }
111 |       return ar
112 |     },
113 |     showLast: function () {
114 |       if (this.page === this.all) {
115 |         return false
116 |       }
117 |       return true
118 |     },
119 |     showFirst: function () {
120 |       if (this.page === 1) {
121 |         return false
122 |       }
123 |       return true
124 |     }
125 |   },
126 |   methods: {
127 |     btnClick: function (data) {
128 |       if (data !== this.page) {
129 |         this.page = data
130 |       }
131 |     }
132 |   }
133 | }
134 | </script>


--------------------------------------------------------------------------------
/src/components/Common/GridBase.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div>现在使用json-server的模拟数据，模拟后端api.</div>
  4 |     {{queryUrl}}|page:{{page}}
  5 |     <filter-pane :filters-title="filters.title" :filters-fields.sync="filters.fields" :sort-fields.sync="gridColumns" :sort-key.sync="sortKey" :order.sync="order" :on-search="search"></filter-pane>
  6 |     <grid :grid-data="gridData" :columns="gridColumns" :is-show-action="isShowAction" :actions="actions" :sort-key.sync="sortKey" :order.sync="order" :on-save="onSave">
  7 |     </grid>
  8 |     <pagination :page.sync="page" :page-size.sync="pageSize" :page-size-list="pageSizeList" :records="records"></pagination>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | import grid from '../Common/Grid'
 14 | import filterPane from '../Common/filterPane'
 15 | import pagination from '../Common/Pagination'
 16 | 
 17 | export default {
 18 |   components: {
 19 |     filterPane,
 20 |     grid,
 21 |     pagination
 22 |   },
 23 |   props: {
 24 |     url: {
 25 |       type: String,
 26 |       default: function () {
 27 |         return '/api/users'
 28 |       }
 29 |     },
 30 |     filters: Object,
 31 |     gridColumns: Array,
 32 |     gridData: Array,
 33 |     isShowAction: Boolean,
 34 |     // actions 暂时无用！！！！！
 35 |     actions: Array,
 36 | 
 37 |     sortKey: String,
 38 |     order: String,
 39 |     page: {
 40 |       type: Number,
 41 |       default: function () {
 42 |         return 1
 43 |       }
 44 |     },
 45 |     pageSize: {
 46 |       type: Number,
 47 |       default: function () {
 48 |         return 10
 49 |       }
 50 |     },
 51 |     pageSizeList: Array,
 52 |     onSave: {
 53 |       type: Function,
 54 |       default: function (items) {
 55 |         console.log('gridBase onSave items:', items)
 56 |       }
 57 |     }
 58 |   },
 59 |   data () {
 60 |     return {
 61 |       queryUrl: '',
 62 |       records: 0
 63 |     }
 64 |   },
 65 |   methods: {
 66 |     getQueryUrl: function (isStart) {
 67 |       if (isStart) {
 68 |         this.page = 1
 69 |       }
 70 | 
 71 |       var arrFilters = []
 72 |       for (var it in this.filters.fields) {
 73 |         var field = this.filters.fields[it]
 74 |         if (field.value) {
 75 |           arrFilters.push(field.name + '_like=' + field.value)
 76 |         }
 77 |       }
 78 | 
 79 |       var start = (this.page - 1) * this.pageSize
 80 |       arrFilters.push('_start=' + start)
 81 |       arrFilters.push('_limit=' + this.pageSize)
 82 |       arrFilters.push('_sort=' + this.sortKey)
 83 |       arrFilters.push('_order=' + this.order)
 84 | 
 85 |       return this.url + '?' + arrFilters.join('&')
 86 |     },
 87 |     search: function (isStart) {
 88 |       console.log('parent search isStart:', isStart)
 89 |       this.queryUrl = this.getQueryUrl(isStart)
 90 | 
 91 |       console.log('search queryUrl:', this.queryUrl)
 92 | 
 93 |       this.$http({url: this.queryUrl, method: 'GET'})
 94 |       .then(function (response) {
 95 |         console.log('search response:', response)
 96 |         var count = response.headers('X-Total-Count')
 97 |         this.gridData = response.data
 98 |         this.records = parseInt(count)
 99 |       }, function (response) {
100 |           // error callback
101 |       })
102 |     }
103 |   },
104 |   ready: function () {
105 |     this.search(true)
106 |   },
107 |   watch: {
108 |     page: function (oldValue, newValue) {
109 |       console.log('arguments:', oldValue, newValue)
110 |       this.search()
111 |     },
112 |     pageSize: function (oldValue, newValue) {
113 |       console.log('arguments:', oldValue, newValue)
114 |       this.search(true)
115 |     },
116 |     sortKey: function (oldValue, newValue) {
117 |       console.log('arguments:', oldValue, newValue)
118 |       this.search()
119 |     },
120 |     order: function (oldValue, newValue) {
121 |       console.log('arguments:', oldValue, newValue)
122 |       this.search()
123 |     }
124 |   }
125 | }
126 | 
127 | </script>


--------------------------------------------------------------------------------
/src/components/Common/Menu.vue:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |     .dropdown-submenu {
  3 |         position: relative;
  4 |     }
  5 |     .dropdown-submenu > .dropdown-menu {
  6 |         top: 0;
  7 |         left: 100%;
  8 |         margin-top: -6px;
  9 |         margin-left: -1px;
 10 |         -webkit-border-radius: 0 6px 6px 6px;
 11 |         -moz-border-radius: 0 6px 6px;
 12 |         border-radius: 0 6px 6px 6px;
 13 |     }
 14 |     .dropdown-submenu:hover > .dropdown-menu {
 15 |         display: block;
 16 |     }
 17 |     .dropdown-submenu > a:after {
 18 |         display: block;
 19 |         content: " ";
 20 |         float: right;
 21 |         width: 0;
 22 |         height: 0;
 23 |         border-color: transparent;
 24 |         border-style: solid;
 25 |         border-width: 5px 0 5px 5px;
 26 |         border-left-color: #ccc;
 27 |         margin-top: 5px;
 28 |         margin-right: -10px;
 29 |     }
 30 |     .dropdown-submenu:hover > a:after {
 31 |         border-left-color: #fff;
 32 |     }
 33 |     .dropdown-submenu.pull-left {
 34 |         float: none;
 35 |     }
 36 |     .dropdown-submenu.pull-left > .dropdown-menu {
 37 |         left: -100%;
 38 |         margin-left: 10px;
 39 |         -webkit-border-radius: 6px 0 6px 6px;
 40 |         -moz-border-radius: 6px 0 6px 6px;
 41 |         border-radius: 6px 0 6px 6px;
 42 |     }
 43 |     .show-menu {
 44 |       display: block!important;
 45 |     }
 46 | </style>
 47 | 
 48 | <template>
 49 |   <div class="collapse navbar-collapse">
 50 |     <ul class="nav navbar-nav"> <!--第一层菜单-->
 51 |       <li class="dropdown" v-for="menu in topMenus|filterBy -1 in 'parentId'">
 52 |         <a href="#" data-toggle="dropdown" v-link="{path: menu.url=='' ? '/' : menu.url}" @click="show(menu.id)">
 53 |           {{menu.menuName}}
 54 |           <b class="caret" v-show="isShowCaret(menu)"></b>
 55 |         </a>
 56 |         <ul class="dropdown-menu" v-bind:class="{'show-menu': isShowChild(menu)}"><!--第二层菜单-->
 57 |           <li class="{{parentIds[m.id] ? 'dropdown-submenu':''}}" v-for="m in childMenus|filterBy menu.id in 'parentId'">
 58 |             <a href="#" tabindex="-1" data-toggle="dropdown" v-link="{path: m.url }" @click="resetMenu()">{{m.menuName}}</a>
 59 |             <child :child-menus="childMenus" :parent-ids="parentIds" :parent-menu="m" :active-parent-menu.sync="activeParentMenu"></child>
 60 |           </li>
 61 |         </ul>
 62 |       </li>
 63 |     </ul>
 64 |   </div>
 65 | </template>
 66 | 
 67 | <script>
 68 | import Vue from 'vue'
 69 | 
 70 | Vue.component('child', {
 71 |   props: {
 72 |     parentMenu: Object,
 73 |     parentIds: Object,
 74 |     childMenus: Array,
 75 |     activeParentMenu: {
 76 |       type: Number,
 77 |       twoWay: true
 78 |     }
 79 |   },
 80 |   methods: {
 81 |     resetMenu: function () {
 82 |       this.activeParentMenu = 0
 83 |     }
 84 |   },
 85 |   name: 'child',
 86 |   template: '<ul class="dropdown-menu">' +
 87 |               '<li class="{{parentIds[m.id]==1 ? \'dropdown-submenu\':\'\'}}" v-for="m in childMenus|filterBy parentMenu.id in \'parentId\'">' +
 88 |                 '<a href="#" tabindex="-1" data-toggle="dropdown" v-link="{path: m.url }" @click="resetMenu()">{{m.menuName}}</a>' +
 89 |                 '<child :child-menus="childMenus" :parent-ids="parentIds" :parent-menu="m" :active-parent-menu.sync="activeParentMenu"></child>' +
 90 |               '</li></ul>'
 91 | })
 92 | 
 93 | export default {
 94 |   data () {
 95 |     return {
 96 |       topMenus: [],
 97 |       childMenus: [],
 98 |       parentIds: {},
 99 |       activeParentMenu: 0
100 |     }
101 |   },
102 |   props: {
103 |     menus: Array
104 |   },
105 |   methods: {
106 |     show: function (menuId) {
107 |       this.activeParentMenu = menuId
108 |     },
109 |     isShowCaret: function (menu) {
110 |       return menu.url === '' && this.parentIds[menu.id]
111 |     },
112 |     isShowChild: function (menu) {
113 |       return (menu.id === this.activeParentMenu) && menu.url === '' && this.parentIds[menu.id]
114 |     },
115 |     resetMenu: function () {
116 |       this.activeParentMenu = 0
117 |     }
118 |   },
119 |   watch: {
120 |     menus: function (oldValue, newValue) {
121 |       console.log(oldValue, newValue)
122 |       console.log('created', this.menus)
123 | 
124 |       var topMenus = []
125 |       var childMenus = []
126 |       var parentIds = {}
127 | 
128 |       for (var i = 0; i < this.menus.length; i++) {
129 |         var menu = this.menus[i]
130 |         if (!parentIds[menu.parentId]) {
131 |           parentIds[menu.parentId] = 1
132 |         }
133 | 
134 |         if (menu.parentId === -1) {
135 |           topMenus.push(menu)
136 |         } else {
137 |           childMenus.push(menu)
138 |         }
139 |       }
140 | 
141 |       this.$set('topMenus', topMenus)
142 |       this.$set('childMenus', childMenus)
143 |       this.$set('parentIds', parentIds)
144 |     }
145 |   }
146 | }
147 | </script>


--------------------------------------------------------------------------------
/src/components/Common/Grid.vue:
--------------------------------------------------------------------------------
  1 | <style type="text/css">
  2 |   .edit-grid {
  3 |     max-height:500px;
  4 |     overflow:auto;
  5 |   }
  6 | </style>
  7 | <template>
  8 | <!-- grid list begin-->
  9 | <div class="container">
 10 |   <table class="table table-hover">
 11 |     <thead>
 12 |       <tr>
 13 |         <th v-if="isShowAction"><input type="checkbox" value="true" v-model="isSelectedAll" />&nbsp;</th>
 14 |         <th v-for="key in columns"
 15 |           @click="sortBy(key.name)"
 16 |           :class="{active: sortKey === key.name}">
 17 |           <a href="#">{{key.name | capitalize}}
 18 |             <span class="caret" v-show="sortOrders[key.name] < 0"></span>
 19 |           </a>
 20 |         </th>
 21 |       </tr>
 22 |     </thead>
 23 |     <tbody>
 24 |       <tr v-for="entry in gridData">
 25 |         <td v-if="isShowAction"><input type="checkbox" true-value="true" false-value="false" v-model="entry.isChecked" /></td>
 26 |         <td v-for="key in columns">
 27 |           {{entry[key.name]}}
 28 |         </td>
 29 |       </tr>
 30 |     </tbody>
 31 |   </table>
 32 |   <div class="form-group" v-if="isShowAction">
 33 |     <!-- <button class="btn btn-primary" @click="add">Add</button> -->
 34 |     <button class="btn btn-primary" @click="edit" >Edit</button>
 35 |     <button class="btn btn-default" @click="delete" >Delete</button>
 36 |   </div>
 37 | </div>
 38 | <!-- grid list end -->
 39 | <!-- grid edit begin -->
 40 | <modal :show.sync="showEditModal" effect="fade" width="90%">
 41 |   <div slot="modal-header" class="modal-header">
 42 |     <h4 class="modal-title">Edit Selected Records</h4>
 43 |   </div>
 44 |   <div slot="modal-body" class="modal-body edit-grid">
 45 |     <table class="table table-hover">
 46 |       <thead>
 47 |         <tr>
 48 |           <th>&nbsp;</th>
 49 |           <th v-for="key in columns">{{key.title}}</th>
 50 |         </tr>
 51 |       </thead>
 52 |       <tbody>
 53 |         <tr v-for="entry in gridData|filterBy true in 'isChecked'">
 54 |           <td><input name="chkEntry" type="radio" true-value="true" false-value="false" @click="select(entry)" /></td>
 55 |           <td v-for="key in columns">
 56 |            <field :value.sync="entry[key.name]" :type="key.type" :options="key.options"></field>
 57 |           </td>
 58 |         </tr>
 59 |       </tbody>
 60 |     </table>
 61 |     <fieldset>
 62 |       <legend>Details</legend>
 63 |         <div v-for="key in columns">
 64 |           <label>{{key.title}}</label>
 65 |           <field :value.sync="selectedRow[key.name]" :type="key.type" :options="key.options"></field>
 66 |         </div>
 67 |       </div>
 68 |     </fieldset>
 69 |     </div>
 70 |   </div>
 71 |   <div slot="modal-footer" class="modal-footer">
 72 |     <button type="button" class="btn btn-default" @click='showEditModal = false'>Cancel</button>
 73 |     <button type="button" class="btn btn-success" @click='save'>Save</button>
 74 |   </div>
 75 | </modal>
 76 | <!-- grid edit end -->
 77 | </template>
 78 | 
 79 | <script>
 80 | import Vue from 'vue'
 81 | import field from '../Common/Field'
 82 | import { alert, modal, datepicker } from 'vue-strap'
 83 | export default {
 84 |   components: {
 85 |     field,
 86 |     alert,
 87 |     modal,
 88 |     datepicker
 89 |   },
 90 |   props: {
 91 |     gridData: Array,
 92 |     columns: Array,
 93 |     isShowAction: {
 94 |       type: Boolean,
 95 |       default: function () {
 96 |         return false
 97 |       }
 98 |     },
 99 |     // actions 暂时无用！！！！！
100 |     actions: {
101 |       type: Object,
102 |       default: function () {
103 |         return {
104 |           label: 'Action',
105 |           template: ''
106 |         }
107 |       }
108 |     },
109 |     sortKey: String,
110 |     order: String,
111 |     selectedRow: Object,
112 |     onSave: {
113 |       type: Function,
114 |       default: function (items) {
115 |         console.log('grid onSave items:', items)
116 |       }
117 |     }
118 |   },
119 |   data () {
120 |     return {
121 |       showEditModal: false,
122 |       sortOrders: {}
123 |     }
124 |   },
125 |   computed: {
126 |     isSelectedAll: {
127 |       get: function () {
128 |         var isCheckAll = true
129 | 
130 |         for (var i in this.gridData) {
131 |           var item = this.gridData[i]
132 |           if (!item.isChecked) {
133 |             isCheckAll = false
134 |             break
135 |           }
136 |         }
137 |         return isCheckAll
138 |       },
139 |       set: function (newValue) {
140 |         console.log('set newValue:', newValue)
141 | 
142 |         for (var i in this.gridData) {
143 |           var item = this.gridData[i]
144 |           Vue.set(item, 'isChecked', newValue)
145 |         }
146 |       }
147 |     }
148 |   },
149 |   methods: {
150 |     sortBy: function (key) {
151 |       console.log('click sortBy:', key)
152 |       this.sortKey = key
153 | 
154 |       var self = this
155 | 
156 |       var newSort = this.sortOrders[key] ? (this.sortOrders[key] * -1) : -1
157 |       var orders = {}
158 |       this.columns.forEach(function (k) {
159 |         var keyName = k.name
160 | 
161 |         console.log(k.name === key)
162 |         if (keyName === key) {
163 |           self.order = (newSort < 0 ? 'ASC' : 'DESC')
164 |           orders[keyName] = newSort
165 |         } else {
166 |           orders[keyName] = 1
167 |         }
168 |       })
169 |       this.$set('sortOrders', orders)
170 |     },
171 |     select: function (entry) {
172 |       this.selectedRow = entry
173 |     },
174 |     edit: function () {
175 |       console.log('edit')
176 |       this.showEditModal = true
177 |     },
178 |     delete: function () {
179 |       console.log('delete')
180 |     },
181 |     add: function () {
182 |       console.log('edit')
183 |     },
184 |     save: function () {
185 |       console.log('save')
186 |       this.showEditModal = false
187 | 
188 |       var editGridData = []
189 |       for (var i in this.gridData) {
190 |         var tmp = this.gridData[i]
191 | 
192 |         if (tmp.isChecked) {
193 |           editGridData.push(tmp)
194 |         }
195 |       }
196 |       this.onSave(editGridData)
197 |     }
198 |   }
199 | }
200 | </script>


--------------------------------------------------------------------------------
/src/components/User/TestVueStrap.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <!-- vueStrap modal -->
  4 |     <div class="form-group">
  5 |       vue strap demo:
  6 |       <a href="http://yuche.github.io/vue-strap/" target="_blank">http://yuche.github.io/vue-strap/</a>
  7 |     </div>
  8 |     <fieldset>
  9 |       <legend>Alert</legend>
 10 |       <button class="btn btn-default btn-lg"
 11 |         @click="showTop = !showTop">
 12 |         Click to toggle alert on top
 13 |       </button>
 14 |       <button class="btn btn-default btn-lg"
 15 |         @click="showRight = !showRight">
 16 |         Click to toggle alert on right
 17 |       </button>
 18 |       <hr>
 19 | 
 20 |       <alert
 21 |         :show.sync="showRight"
 22 |         :duration="3000"
 23 |         type="success"
 24 |         width="400px"
 25 |         placement="top-right"
 26 |         dismissable
 27 |       >
 28 |         <span class="icon-ok-circled alert-icon-float-left"></span>
 29 |         <strong>Well Done!</strong>
 30 |         <p>You successfully read this important alert message.</p>
 31 |       </alert>
 32 | 
 33 |       <alert
 34 |         :show.sync="showTop"
 35 |         :duration="3000"
 36 |         type="danger"
 37 |         width="400px"
 38 |         placement="top"
 39 |         dismissable>
 40 |         <span class="icon-info-circled alert-icon-float-left"></span>
 41 |         <strong>Heads up!</strong>
 42 |         <p>This alert needs your attention.</p>
 43 |       </alert>
 44 |     </fieldset>
 45 | 
 46 |     <hr/>
 47 | 
 48 |     <fieldset>
 49 |       <legend>VueStrap Modal Window</legend>
 50 |       <button class="btn btn-default" @click="showModal = true">Show modal</button>
 51 |       <modal :show.sync="showModal">
 52 |         <div slot="modal-header" class="modal-header">
 53 |           <h4 class="modal-title">Modal title</h4>
 54 |         </div>
 55 |         <div slot="modal-body" class="modal-body"></div>
 56 |       </modal>
 57 |     </fieldset>
 58 |     <hr/>
 59 |     <fieldset>
 60 |       <legend>VueStrap Tabs</legend>
 61 |       <tabs>
 62 |         <tab header="one">
 63 |           <div class="form-group">
 64 |             tab one
 65 |           </div>
 66 |         </tab>
 67 |         <tab header="two">
 68 |           <div class="form-group">
 69 |           tab two
 70 |           </div>
 71 |         </tab>
 72 |         <tab header="three" disabled>
 73 |           <div class="form-group">
 74 |           tab three
 75 |           </div>
 76 |         </tab>
 77 |       </tabs>
 78 |     </fieldset>
 79 |     <hr/>
 80 |     <fieldset>
 81 |       <legend>Datepicker</legend>
 82 |       <div class="row">
 83 |         <label class="control-label col-md-2">Select Date:</label>
 84 |         <div class="col-md-6 form-inline">
 85 |           <datepicker
 86 |             :value.sync="date"
 87 |             :disabled-days-of-Week="disabledWeek"
 88 |             placeholder="select date"
 89 |             :format="dateFormat">
 90 |           </datepicker>
 91 |         </div>
 92 |       </div>
 93 |       <div class="row">
 94 |         <label class="control-label col-md-2">disabled date of week</label>
 95 |         <div class="col-md-6 form-inline">
 96 |           <v-select multiple :value.sync="disabledWeek" size=5>
 97 |             <v-option value="0">0</v-option>
 98 |             <v-option value="1">1</v-option>
 99 |             <v-option value="2">2</v-option>
100 |             <v-option value="3">3</v-option>
101 |             <v-option value="4">4</v-option>
102 |             <v-option value="5">5</v-option>
103 |             <v-option value="6">6</v-option>
104 |           </v-select>
105 |         </div>
106 |           {{disabledWeek}}
107 |       </div>
108 | 
109 |       <div class="row">
110 |          <label class="control-label col-md-2">Date Format</label>
111 |          <div class="col-md-6 form-inline">
112 |           <v-select  :value.sync="dateFormat">
113 |             <v-option value="yyyy,MM,dd">yyyy,MM,dd</v-option>
114 |             <v-option value="yyyy-MM-dd">yyyy-MM-dd</v-option>
115 |             <v-option value="yyyy.MM.dd">yyyy.MM.dd</v-option>
116 |             <v-option value="MMM/dd/yyyy">MMM/dd/yyyy</v-option>
117 |             <v-option value="MMMM/dd/yyyy">MMMM/dd/yyyy</v-option>
118 |           </v-select>
119 |           {{dateFormat}}
120 |         </div>
121 |     </fieldset>
122 |     <hr>
123 |     <fieldset>
124 |       <legend>Typeahead</legend>
125 |         <h4>Static arrays {{typeaheadValue}}</h4>
126 |         <typeahead
127 |           :data="USstate"
128 |           placeholder="USA states"
129 |           :on-hit="typeaheadCallback"
130 |         >
131 |         </typeahead>
132 | <!--
133 |         <h4>Asynchronous results</h4>
134 |           <typeahead
135 |             key="name"
136 |             placeholder="Users"
137 |             async="/api/users?q={{query}}"
138 |             :on-hit="typeaheadCallback">
139 |         </typeahead> -->
140 |     </fieldset>
141 |     <button
142 |       class="btn btn-success btn-lg"
143 |       @click="showRight = true">Show Aside on right {{showRight}}
144 |     </button>
145 |     <aside :show.sync="showRight" placement="right" header="Title" :width="350">
146 |     sssssssssssssssss
147 |     </aside>
148 | 
149 |     <button
150 |         class="btn btn-danger btn-lg"
151 |         @click="showLeft = true">Show Aside on left {{showLeft}}
152 |     </button>
153 | 
154 |     <aside :show.sync="showLeft" placement="left" header="Title" :width="350">
155 |     sdfsdfs
156 |     </aside>
157 |   </div>
158 | </template>
159 | 
160 | <script>
161 | import tabs from 'vue-strap/src/Tabset.vue'
162 | import tab from 'vue-strap/src/Tab.vue'
163 | import vSelect from 'vue-strap/src/Select.vue'
164 | import vOption from 'vue-strap/src/Option.vue'
165 | 
166 | import { alert, modal, datepicker, typeahead, tooltip, aside } from 'vue-strap'
167 | 
168 | var Mock = require('mockjs')
169 | var data = Mock.mock({
170 |   'list|1-10': [{
171 |     'id|+1': 1
172 |   }]
173 | })
174 | console.log('data:', data)
175 | export default {
176 |   components: {
177 |     alert,
178 |     modal,
179 |     datepicker,
180 |     typeahead,
181 |     tooltip,
182 |     tabs,
183 |     tab,
184 |     vSelect,
185 |     vOption,
186 |     aside
187 |   },
188 |   partials: {
189 |   },
190 |   data () {
191 |     return {
192 |       showModal: false,
193 |       date: '2016-03-28',
194 |       disabledWeek: [],
195 |       dateFormat: 'yyyy-MM-dd',
196 |       typeaheadValue: '',
197 |       showLeft: false,
198 |       showTop: false,
199 |       showRight: false,
200 |       USstate: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
201 |     }
202 |   },
203 |   methods: {
204 |     typeaheadCallback: function (items, targetVM) {
205 |       console.log('items:', items)
206 |       this.typeaheadValue = items
207 |       var that = targetVM
208 |       that.reset()
209 |       that.query = items
210 |     }
211 |   }
212 | }
213 | </script>


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "menus": [
  3 |     {
  4 |       "id": 1001,
  5 |       "parentId": -1,
  6 |       "menuName": "1001",
  7 |       "url": ""
  8 |     },
  9 |     {
 10 |       "id": 1002,
 11 |       "parentId": -1,
 12 |       "menuName": "1002",
 13 |       "url": ""
 14 |     },
 15 |     {
 16 |       "id": 2001,
 17 |       "parentId": -1,
 18 |       "menuName": "TestGrid",
 19 |       "url": "/testGrid"
 20 |     },
 21 |     {
 22 |       "id": 3001,
 23 |       "parentId": -1,
 24 |       "menuName": "User",
 25 |       "url": "/user"
 26 |     },
 27 |     {
 28 |       "id": 4001,
 29 |       "parentId": -1,
 30 |       "menuName": "VueStrap",
 31 |       "url": "/testVueStrap"
 32 |     },
 33 |     {
 34 |       "id": 5001,
 35 |       "parentId": -1,
 36 |       "menuName": "TestTabs",
 37 |       "url": "/testTabs"
 38 |     },
 39 |     {
 40 |       "id": 1003,
 41 |       "parentId": 1001,
 42 |       "menuName": "1003",
 43 |       "url": ""
 44 |     },
 45 |     {
 46 |       "id": 1004,
 47 |       "parentId": 1001,
 48 |       "menuName": "1004",
 49 |       "url": ""
 50 |     },
 51 |     {
 52 |       "id": 1005,
 53 |       "parentId": 1002,
 54 |       "menuName": "1005",
 55 |       "url": ""
 56 |     },
 57 |     {
 58 |       "id": 1006,
 59 |       "parentId": 1002,
 60 |       "menuName": "1006",
 61 |       "url": "/1006"
 62 |     },
 63 |     {
 64 |       "id": 1007,
 65 |       "parentId": 1003,
 66 |       "menuName": "1007",
 67 |       "url": ""
 68 |     },
 69 |     {
 70 |       "id": 1008,
 71 |       "parentId": 1003,
 72 |       "menuName": "1008",
 73 |       "url": "/1008"
 74 |     },
 75 |     {
 76 |       "id": 1009,
 77 |       "parentId": 1004,
 78 |       "menuName": "1009",
 79 |       "url": ""
 80 |     },
 81 |     {
 82 |       "id": 1010,
 83 |       "parentId": 1004,
 84 |       "menuName": "1010",
 85 |       "url": "/1010"
 86 |     },
 87 |     {
 88 |       "id": 1011,
 89 |       "parentId": 1005,
 90 |       "menuName": "1011",
 91 |       "url": "/1011"
 92 |     },
 93 |     {
 94 |       "id": 1012,
 95 |       "parentId": 1005,
 96 |       "menuName": "1012",
 97 |       "url": "/1012"
 98 |     },
 99 |     {
100 |       "id": 1013,
101 |       "parentId": 1009,
102 |       "menuName": "1013",
103 |       "url": "/1013"
104 |     },
105 |     {
106 |       "id": 1014,
107 |       "parentId": 1009,
108 |       "menuName": "1014",
109 |       "url": "/1014"
110 |     },
111 |     {
112 |       "id": 1015,
113 |       "parentId": 1007,
114 |       "menuName": "testGrid",
115 |       "url": "/testGrid"
116 |     }
117 |   ],
118 |   "users": [
119 |     {
120 |       "id": 1,
121 |       "name": "Frank Ronald Rodriguez",
122 |       "sex": "M",
123 |       "email": "x.tglxetsgt@kvt.kg"
124 |     },
125 |     {
126 |       "id": 2,
127 |       "name": "Jeffrey Ruth Martin",
128 |       "sex": "M",
129 |       "email": "x.kctkvb@rvlao.la"
130 |     },
131 |     {
132 |       "id": 3,
133 |       "name": "Robert Sharon Rodriguez",
134 |       "sex": "M",
135 |       "email": "m.zneyhhfhwu@wvibiqigtc.mq"
136 |     },
137 |     {
138 |       "id": 4,
139 |       "name": "Sarah Patricia Young",
140 |       "sex": "F",
141 |       "email": "t.fwcpddz@eunwgem.dk"
142 |     },
143 |     {
144 |       "id": 5,
145 |       "name": "Donna Daniel Clark",
146 |       "sex": "M",
147 |       "email": "f.eiyvtz@agyxyjegr.lr"
148 |     },
149 |     {
150 |       "id": 6,
151 |       "name": "Mark Dorothy Hall",
152 |       "sex": "M",
153 |       "email": "j.jvmbp@aenlszhr.kh"
154 |     },
155 |     {
156 |       "id": 7,
157 |       "name": "Steven Jennifer White",
158 |       "sex": "F",
159 |       "email": "v.isitsrc@dtrhs.jo"
160 |     },
161 |     {
162 |       "id": 8,
163 |       "name": "Edward Ruth Rodriguez",
164 |       "sex": "M",
165 |       "email": "j.oxwmgivwst@eyspyfbb.cc"
166 |     },
167 |     {
168 |       "id": 9,
169 |       "name": "Joseph Sandra Harris",
170 |       "sex": "M",
171 |       "email": "t.yycyrukd@rdfrdujyn.hu"
172 |     },
173 |     {
174 |       "id": 10,
175 |       "name": "Ronald Richard Hall",
176 |       "sex": "F",
177 |       "email": "r.mhgkilc@kalhcboue.in"
178 |     },
179 |     {
180 |       "id": 11,
181 |       "name": "Eric Timothy Rodriguez",
182 |       "sex": "M",
183 |       "email": "e.iotyqlqad@oodvcv.at"
184 |     },
185 |     {
186 |       "id": 12,
187 |       "name": "Michelle Donna Hernandez",
188 |       "sex": "M",
189 |       "email": "u.gxm@crpi.su"
190 |     },
191 |     {
192 |       "id": 13,
193 |       "name": "Charles George Brown",
194 |       "sex": "M",
195 |       "email": "s.wlrwmxyd@grxamuq.gr"
196 |     },
197 |     {
198 |       "id": 14,
199 |       "name": "David Patricia Garcia",
200 |       "sex": "M",
201 |       "email": "e.kwwnob@hadbb.br"
202 |     },
203 |     {
204 |       "id": 15,
205 |       "name": "Laura Paul Allen",
206 |       "sex": "F",
207 |       "email": "i.djjtwppv@rlqq.eh"
208 |     },
209 |     {
210 |       "id": 16,
211 |       "name": "William Mark Garcia",
212 |       "sex": "F",
213 |       "email": "h.swvlos@hysjx.cg"
214 |     },
215 |     {
216 |       "id": 17,
217 |       "name": "Donald Kevin Davis",
218 |       "sex": "F",
219 |       "email": "q.ezfvpe@dqqkt.中国"
220 |     },
221 |     {
222 |       "id": 18,
223 |       "name": "Daniel Betty Hernandez",
224 |       "sex": "F",
225 |       "email": "s.lezutto@izjsdnyzi.ua"
226 |     },
227 |     {
228 |       "id": 19,
229 |       "name": "Jason Brian Brown",
230 |       "sex": "M",
231 |       "email": "g.odqcs@tcsjomtvj.bg"
232 |     },
233 |     {
234 |       "id": 20,
235 |       "name": "Scott Larry Jones",
236 |       "sex": "M",
237 |       "email": "a.kyt@jgyex.by"
238 |     },
239 |     {
240 |       "id": 21,
241 |       "name": "Lisa Steven Young",
242 |       "sex": "M",
243 |       "email": "o.qvg@tdbtnb.np"
244 |     },
245 |     {
246 |       "id": 22,
247 |       "name": "Joseph Ronald Perez",
248 |       "sex": "M",
249 |       "email": "v.xrikg@bteg.aw"
250 |     },
251 |     {
252 |       "id": 23,
253 |       "name": "Dorothy Richard Johnson",
254 |       "sex": "F",
255 |       "email": "l.kdwsemgz@juw.kp"
256 |     },
257 |     {
258 |       "id": 24,
259 |       "name": "Timothy Eric Lee",
260 |       "sex": "M",
261 |       "email": "f.maltuby@mllo.su"
262 |     },
263 |     {
264 |       "id": 25,
265 |       "name": "Melissa Kimberly Miller",
266 |       "sex": "M",
267 |       "email": "j.ype@kllgoxshk.hu"
268 |     },
269 |     {
270 |       "id": 26,
271 |       "name": "Richard Betty Jones",
272 |       "sex": "M",
273 |       "email": "d.ccvr@newssuft.dz"
274 |     },
275 |     {
276 |       "id": 27,
277 |       "name": "George Linda Garcia",
278 |       "sex": "M",
279 |       "email": "a.juhblivauc@jklxhzdid.ve"
280 |     },
281 |     {
282 |       "id": 28,
283 |       "name": "Betty Frank Young",
284 |       "sex": "M",
285 |       "email": "m.wtybilefni@htxetg.to"
286 |     },
287 |     {
288 |       "id": 29,
289 |       "name": "Elizabeth Donna Johnson",
290 |       "sex": "F",
291 |       "email": "h.qxgbnxlw@tjgs.af"
292 |     },
293 |     {
294 |       "id": 30,
295 |       "name": "Jessica Matthew Moore",
296 |       "sex": "M",
297 |       "email": "g.cxhohpvc@umeg.au"
298 |     },
299 |     {
300 |       "id": 31,
301 |       "name": "Susan Patricia Rodriguez",
302 |       "sex": "F",
303 |       "email": "i.jqfibikkmc@gknugbf.am"
304 |     },
305 |     {
306 |       "id": 32,
307 |       "name": "Deborah Kevin Lopez",
308 |       "sex": "F",
309 |       "email": "u.uoijl@lpcdvii.ke"
310 |     },
311 |     {
312 |       "id": 33,
313 |       "name": "Deborah Scott Garcia",
314 |       "sex": "F",
315 |       "email": "o.jkletkyk@ufwrrked.eh"
316 |     },
317 |     {
318 |       "id": 34,
319 |       "name": "Michelle Cynthia Lewis",
320 |       "sex": "F",
321 |       "email": "w.vpdk@xuwn.gr"
322 |     },
323 |     {
324 |       "id": 35,
325 |       "name": "Timothy Eric Harris",
326 |       "sex": "M",
327 |       "email": "y.nhi@yfc.dk"
328 |     },
329 |     {
330 |       "id": 36,
331 |       "name": "David George Miller",
332 |       "sex": "M",
333 |       "email": "r.hfmwxleh@qoemsb.pe"
334 |     },
335 |     {
336 |       "id": 37,
337 |       "name": "Dorothy William Perez",
338 |       "sex": "M",
339 |       "email": "j.vxnsggt@cluo.es"
340 |     },
341 |     {
342 |       "id": 38,
343 |       "name": "Shirley Ruth Clark",
344 |       "sex": "M",
345 |       "email": "l.ynktf@wiovvfn.ml"
346 |     },
347 |     {
348 |       "id": 39,
349 |       "name": "Linda Amy Johnson",
350 |       "sex": "F",
351 |       "email": "j.ckwxauqfr@ufrnqfxzwm.lk"
352 |     },
353 |     {
354 |       "id": 40,
355 |       "name": "Gary Mary Lopez",
356 |       "sex": "F",
357 |       "email": "w.yeir@yxqmdqhkn.uy"
358 |     },
359 |     {
360 |       "id": 41,
361 |       "name": "Michael Paul Allen",
362 |       "sex": "M",
363 |       "email": "w.umrytxp@edvuko.mh"
364 |     },
365 |     {
366 |       "id": 42,
367 |       "name": "Kenneth John Hall",
368 |       "sex": "M",
369 |       "email": "a.ktcofumt@hcifey.sd"
370 |     },
371 |     {
372 |       "id": 43,
373 |       "name": "Lisa Edward Miller",
374 |       "sex": "F",
375 |       "email": "m.ldkktkypu@ehritxs.gn"
376 |     },
377 |     {
378 |       "id": 44,
379 |       "name": "Sharon Lisa Hall",
380 |       "sex": "M",
381 |       "email": "m.pfjtj@qwnuvy.om"
382 |     },
383 |     {
384 |       "id": 45,
385 |       "name": "Melissa Frank Lopez",
386 |       "sex": "F",
387 |       "email": "f.fows@awzmimtdr.gr"
388 |     },
389 |     {
390 |       "id": 46,
391 |       "name": "Kenneth Scott Davis",
392 |       "sex": "M",
393 |       "email": "i.lxct@mnmci.uy"
394 |     },
395 |     {
396 |       "id": 47,
397 |       "name": "John Deborah Walker",
398 |       "sex": "M",
399 |       "email": "c.wewqwl@oglef.ag"
400 |     },
401 |     {
402 |       "id": 48,
403 |       "name": "Linda Helen Rodriguez",
404 |       "sex": "F",
405 |       "email": "j.nfbvj@xuhc.ci"
406 |     },
407 |     {
408 |       "id": 49,
409 |       "name": "Anthony Jose Thomas",
410 |       "sex": "M",
411 |       "email": "i.ezboeeigs@ddubqog.biz"
412 |     },
413 |     {
414 |       "id": 50,
415 |       "name": "Mark Michael Hall",
416 |       "sex": "F",
417 |       "email": "s.dshe@pyjeoec.hn"
418 |     },
419 |     {
420 |       "id": 51,
421 |       "name": "Carol John Lee",
422 |       "sex": "F",
423 |       "email": "y.mywttsh@yljxsmdg.ec"
424 |     },
425 |     {
426 |       "id": 52,
427 |       "name": "Larry Steven Lopez",
428 |       "sex": "F",
429 |       "email": "o.xscmtbmp@kipedwwjc.is"
430 |     },
431 |     {
432 |       "id": 53,
433 |       "name": "Deborah Susan Miller",
434 |       "sex": "F",
435 |       "email": "i.qmuesly@azutqtlqyv.mq"
436 |     },
437 |     {
438 |       "id": 54,
439 |       "name": "Carol Jose Hernandez",
440 |       "sex": "F",
441 |       "email": "y.vfjatjvn@snlqtfrvwk.lr"
442 |     },
443 |     {
444 |       "id": 55,
445 |       "name": "Cynthia Daniel Martin",
446 |       "sex": "M",
447 |       "email": "n.oyimw@qnt.ky"
448 |     },
449 |     {
450 |       "id": 56,
451 |       "name": "John Richard Hernandez",
452 |       "sex": "F",
453 |       "email": "t.qepdzdr@veohn.mo"
454 |     },
455 |     {
456 |       "id": 57,
457 |       "name": "Maria Betty Martinez",
458 |       "sex": "M",
459 |       "email": "n.ddqccd@qnqhofvkxn.am"
460 |     },
461 |     {
462 |       "id": 58,
463 |       "name": "Michael David Jones",
464 |       "sex": "M",
465 |       "email": "m.mribu@hgvjc.gl"
466 |     },
467 |     {
468 |       "id": 59,
469 |       "name": "Nancy Karen Gonzalez",
470 |       "sex": "F",
471 |       "email": "f.wexbdnpx@wisgeo.tt"
472 |     },
473 |     {
474 |       "id": 60,
475 |       "name": "Dorothy Lisa Gonzalez",
476 |       "sex": "M",
477 |       "email": "n.fiksyvcp@rfyvmgb.jm"
478 |     },
479 |     {
480 |       "id": 61,
481 |       "name": "Kenneth Eric Martin",
482 |       "sex": "F",
483 |       "email": "j.lqqrkob@victiit.pt"
484 |     },
485 |     {
486 |       "id": 62,
487 |       "name": "Jennifer Michael Miller",
488 |       "sex": "M",
489 |       "email": "y.snzexkqxdo@foqadeyku.tk"
490 |     },
491 |     {
492 |       "id": 63,
493 |       "name": "Robert Betty Lopez",
494 |       "sex": "F",
495 |       "email": "a.dniwha@son.gi"
496 |     },
497 |     {
498 |       "id": 64,
499 |       "name": "Ruth Robert Miller",
500 |       "sex": "M",
501 |       "email": "o.gyl@iptcycnru.vn"
502 |     },
503 |     {
504 |       "id": 65,
505 |       "name": "Sarah Betty Thomas",
506 |       "sex": "M",
507 |       "email": "y.omnpkmoq@jgwrru.ml"
508 |     },
509 |     {
510 |       "id": 66,
511 |       "name": "Lisa Brian Martinez",
512 |       "sex": "M",
513 |       "email": "n.zfld@mliuvy.mz"
514 |     },
515 |     {
516 |       "id": 67,
517 |       "name": "Carol Betty Robinson",
518 |       "sex": "F",
519 |       "email": "f.xwdnudmve@biijm.mx"
520 |     },
521 |     {
522 |       "id": 68,
523 |       "name": "Michelle John Martinez",
524 |       "sex": "M",
525 |       "email": "b.lexi@iqldnk.nz"
526 |     },
527 |     {
528 |       "id": 69,
529 |       "name": "Eric Cynthia Walker",
530 |       "sex": "F",
531 |       "email": "e.qjchbeib@injrh.ws"
532 |     },
533 |     {
534 |       "id": 70,
535 |       "name": "Paul Robert Jones",
536 |       "sex": "F",
537 |       "email": "f.qgskautm@rsqr.ir"
538 |     },
539 |     {
540 |       "id": 71,
541 |       "name": "Nancy Edward Smith",
542 |       "sex": "M",
543 |       "email": "x.xxbigerf@lbx.travel"
544 |     },
545 |     {
546 |       "id": 72,
547 |       "name": "Michelle Patricia Robinson",
548 |       "sex": "M",
549 |       "email": "e.furl@pmqnbwsonp.jm"
550 |     },
551 |     {
552 |       "id": 73,
553 |       "name": "Cynthia Cynthia Garcia",
554 |       "sex": "F",
555 |       "email": "x.bntjgawld@khpkybns.ms"
556 |     },
557 |     {
558 |       "id": 74,
559 |       "name": "Carol Betty Hernandez",
560 |       "sex": "M",
561 |       "email": "g.cljghywmk@uqhivu.sh"
562 |     },
563 |     {
564 |       "id": 75,
565 |       "name": "George Anthony Brown",
566 |       "sex": "F",
567 |       "email": "p.chiasm@tlkywilk.中国"
568 |     },
569 |     {
570 |       "id": 76,
571 |       "name": "Joseph Amy Jackson",
572 |       "sex": "F",
573 |       "email": "v.aixv@cphkdkybc.tv"
574 |     },
575 |     {
576 |       "id": 77,
577 |       "name": "Susan George Anderson",
578 |       "sex": "F",
579 |       "email": "g.fneu@wvkrr.sb"
580 |     },
581 |     {
582 |       "id": 78,
583 |       "name": "Sandra Melissa Thompson",
584 |       "sex": "M",
585 |       "email": "b.wrskq@bfjjdpvf.to"
586 |     },
587 |     {
588 |       "id": 79,
589 |       "name": "John Barbara Walker",
590 |       "sex": "M",
591 |       "email": "w.qxslp@uvj.wf"
592 |     },
593 |     {
594 |       "id": 80,
595 |       "name": "William Jose Brown",
596 |       "sex": "M",
597 |       "email": "p.mvh@rqvkx.bd"
598 |     },
599 |     {
600 |       "id": 81,
601 |       "name": "Sharon Joseph Thomas",
602 |       "sex": "F",
603 |       "email": "l.lgtqjp@usgrnwmpt.ve"
604 |     },
605 |     {
606 |       "id": 82,
607 |       "name": "Susan Michelle Martinez",
608 |       "sex": "F",
609 |       "email": "b.njgsg@hvxykfwd.pa"
610 |     },
611 |     {
612 |       "id": 83,
613 |       "name": "Brenda Deborah Moore",
614 |       "sex": "M",
615 |       "email": "t.pmgkugadu@nipaw.va"
616 |     },
617 |     {
618 |       "id": 84,
619 |       "name": "Robert Michael Martin",
620 |       "sex": "M",
621 |       "email": "n.lhhak@gdpgk.gl"
622 |     },
623 |     {
624 |       "id": 85,
625 |       "name": "Sandra Anthony Moore",
626 |       "sex": "M",
627 |       "email": "k.cyiintb@mdbks.net"
628 |     },
629 |     {
630 |       "id": 86,
631 |       "name": "Patricia Laura Brown",
632 |       "sex": "M",
633 |       "email": "i.ytzymofxok@tsgbk.vc"
634 |     },
635 |     {
636 |       "id": 87,
637 |       "name": "Amy Richard Wilson",
638 |       "sex": "F",
639 |       "email": "p.irdsdnoof@otpse.nu"
640 |     },
641 |     {
642 |       "id": 88,
643 |       "name": "Richard Donna Lewis",
644 |       "sex": "M",
645 |       "email": "j.mfx@qgrv.id"
646 |     },
647 |     {
648 |       "id": 89,
649 |       "name": "Ronald Scott Lopez",
650 |       "sex": "F",
651 |       "email": "v.ycykxk@ybpig.kp"
652 |     },
653 |     {
654 |       "id": 90,
655 |       "name": "Kenneth Mark Brown",
656 |       "sex": "M",
657 |       "email": "o.akkgiqpem@jjurnm.bo"
658 |     },
659 |     {
660 |       "id": 91,
661 |       "name": "Barbara John Jackson",
662 |       "sex": "F",
663 |       "email": "g.qfcdhcve@irmue.net"
664 |     },
665 |     {
666 |       "id": 92,
667 |       "name": "Donald Donna Rodriguez",
668 |       "sex": "M",
669 |       "email": "h.segyn@tboyykrd.no"
670 |     },
671 |     {
672 |       "id": 93,
673 |       "name": "Eric Kevin Garcia",
674 |       "sex": "F",
675 |       "email": "z.akpnlrdqsw@rtuwiv.pa"
676 |     },
677 |     {
678 |       "id": 94,
679 |       "name": "Larry George Miller",
680 |       "sex": "M",
681 |       "email": "i.lucpkypk@hxmvkvxx.gr"
682 |     },
683 |     {
684 |       "id": 95,
685 |       "name": "David Anthony Walker",
686 |       "sex": "M",
687 |       "email": "o.kvvl@gkrhq.lc"
688 |     },
689 |     {
690 |       "id": 96,
691 |       "name": "Margaret George Martin",
692 |       "sex": "F",
693 |       "email": "g.egmr@kxiudmvak.bz"
694 |     },
695 |     {
696 |       "id": 97,
697 |       "name": "Sharon Margaret Davis",
698 |       "sex": "M",
699 |       "email": "i.iegvjivvpl@qogkms.bi"
700 |     },
701 |     {
702 |       "id": 98,
703 |       "name": "John Carol Anderson",
704 |       "sex": "F",
705 |       "email": "s.nxbutztkxl@wjmif.ni"
706 |     },
707 |     {
708 |       "id": 99,
709 |       "name": "Patricia Linda Robinson",
710 |       "sex": "M",
711 |       "email": "c.pykdkqnvmr@qkg.wf"
712 |     },
713 |     {
714 |       "id": 100,
715 |       "name": "Shirley Paul Thomas",
716 |       "sex": "F",
717 |       "email": "c.uslbxovn@exeoagwuis.af"
718 |     }
719 |   ]
720 | }


--------------------------------------------------------------------------------