Browse Source

add search examples

master
taylor 8 years ago
parent
commit
be1507a70d
  1. 9
      src/App.vue
  2. 4
      src/api/api.js
  3. 4
      src/main.js
  4. 19
      src/mock/mock.js
  5. 26
      src/mockdata/user.js
  6. 28
      src/pages/nav1/Page3.vue
  7. 10
      src/pages/nav1/Table.vue
  8. 73
      src/pages/nav1/user.vue

9
src/App.vue

@ -91,4 +91,13 @@
vertical-align: baseline;
margin-right: 10px;
}
.toolbar .el-form-item {
margin-bottom: 10px;
}
.toolbar {
background: #fff;
padding: 10px 10px 0px 10px;
}
</style>

4
src/api/api.js

@ -2,4 +2,6 @@ import axios from 'axios';
let base = '';
export const requestLogin = params => { return axios.post(`${ base }/login`, params).then(res => res.data); };
export const requestLogin = params => { return axios.post(`${ base }/login`, params).then(res => res.data); };
export const getUserList = params => { return axios.get(`${ base }/user/list`, {params: params}); };

4
src/main.js

@ -14,7 +14,7 @@ import Home from './pages/Home.vue'
import Main from './pages/Main.vue'
import Table from './pages/nav1/Table.vue'
import Form from './pages/nav1/Form.vue'
import Page3 from './pages/nav1/Page3.vue'
import user from './pages/nav1/user.vue'
import Page4 from './pages/nav2/Page4.vue'
import Page5 from './pages/nav2/Page5.vue'
import Page6 from './pages/nav3/Page6.vue'
@ -44,7 +44,7 @@ const routes = [
//{ path: '/main', component: Main },
{ path: '/table', component: Table, name: 'Table' },
{ path: '/form', component: Form, name: 'Form' },
{ path: '/page3', component: Page3, name: '页面3' },
{ path: '/user', component: user, name: '列表' },
]
},
{

19
src/mock/mock.js

@ -1,6 +1,6 @@
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { LoginUsers } from '../mockdata/user';
import { LoginUsers, Users } from '../mockdata/user';
export default {
/**
@ -37,7 +37,22 @@ export default {
} else {
resolve([200, { code: 500, msg: '用户名或密码错误!!!' }]);
}
}, Math.random() * 1000 + 1000);
}, 500);
});
});
mock.onGet('/user/list').reply(config => {
let {name} = config.params;
let mockUsers = Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
return true;
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
users: mockUsers
}]);
}, 500);
});
});

26
src/mockdata/user.js

@ -8,18 +8,18 @@ const LoginUsers = [
}
];
// const Users = [];
// const userCount = 200;
const Users = [];
const userCount = 8;
// for (let i = 0; i < userCount; i++) {
// Users.push(Mock.mock({
// id: Mock.Random.guid(),
// name: Mock.Random.cname(),
// address: Mock.mock('@county(true)'),
// 'age|18-60': 1,
// date: Number(Mock.Random.datetime('T'))
// }));
// }
for (let i = 0; i < userCount; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
addr: Mock.mock('@county(true)'),
'age|18-60': 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
}));
}
//export { LoginUsers, Users };
export { LoginUsers };
export { LoginUsers, Users };

28
src/pages/nav1/Page3.vue

@ -1,28 +0,0 @@
<template>
<el-tabs style="width:100%;" type="card" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="用户管理">
<el-col :span="24" style="padding:10px;">
<el-steps :space="100" direction="vertical" :active="1">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
</el-col>
</el-tab-pane>
<el-tab-pane label="配置管理">222</el-tab-pane>
<el-tab-pane label="角色管理">333</el-tab-pane>
<el-tab-pane label="定时任务补偿">444</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab) {
console.log(tab);
}
}
};
</script>

10
src/pages/nav1/Table.vue

@ -2,7 +2,7 @@
<section>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form :inline="true" :model="formInline">
<el-form-item>
<el-input v-model="formInline.user" placeholder="姓名"></el-input>
</el-form-item>
@ -292,12 +292,4 @@
</script>
<style scoped>
.toolbar .el-form-item {
margin-bottom: 10px;
}
.toolbar {
background: #fff;
padding: 10px 10px 0px 10px;
}
</style>

73
src/pages/nav1/user.vue

@ -0,0 +1,73 @@
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button v-on:click="getUser">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<template>
<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="180" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" sortable>
</el-table-column>
</el-table>
</template>
</section>
</template>
<script>
import { getUserList } from '../../api/api';
export default {
data() {
return {
filters: {
name: ''
},
loading: false,
users: [
]
}
},
methods: {
//
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
//
getUser: function () {
let para = {
name: this.filters.name
};
this.loading = true;
getUserList(para).then((res) => {
this.users = res.data.users;
this.loading = false;
});
}
},
mounted() {
this.getUser();
}
};
</script>
<style scoped>
</style>
Loading…
Cancel
Save