<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<jsp:include page="head.jsp"/>
	<title>com.izouma.awesomeadmin.frame</title>
</head>
<body>
<jsp:include page="contentBefore.jsp"/>
<template>
	<div class="filters">
		<el-button type="primary" @click="create()">创建</el-button>

		&nbsp;&nbsp;&nbsp;
		<a href="../userInfo/exportExcel">
			<el-button type="primary" >导 出</el-button>
		</a>

		<div class="num"> 共{{totalNumber}}标签</div>
	</div>

	<el-table :data="rows"
			ref="table"
			style="width: 100%"
			element-loading-text="拼命加载中"
			stripe
			v-loading="loading">
			<el-table-column
				type="index"
				width="70"
				align="center">
			</el-table-column>
		<el-table-column
				prop="username"
				label="username"
				align="center">
		</el-table-column>
		<el-table-column
				prop="nickname"
				label="nickname"
				align="center">
		</el-table-column>
		<el-table-column
				prop="icon"
				label="icon"
				align="center">
		</el-table-column>
		<el-table-column
				prop="age"
				label="age"
				align="center">
		</el-table-column>
		<el-table-column
				prop="sex"
				label="sex"
				align="center">
		</el-table-column>
		<el-table-column
				prop="openId"
				label="openId"
				align="center">
		</el-table-column>
		<el-table-column
				prop="unionId"
				label="unionId"
				align="center">
		</el-table-column>
		<el-table-column
				prop="phone"
				label="phone"
				align="center">
		</el-table-column>
		<el-table-column
				prop="mail"
				label="mail"
				align="center">
		</el-table-column>
		<el-table-column
				prop="focusArea"
				label="focusArea"
				align="center">
		</el-table-column>
		<el-table-column
				prop="investmentQuota"
				label="investmentQuota"
				align="center">
		</el-table-column>
		<el-table-column
				prop="investmentArea"
				label="investmentArea"
				align="center">
		</el-table-column>
		<el-table-column
				prop="createTime"
				label="createTime"
				align="center">
		</el-table-column>
		<el-table-column
				prop="delFlag"
				label="delFlag"
				align="center">
		</el-table-column>
		<el-table-column
				:context="_self"
				width="150"
				inline-template
				label="操作"
				align="center">
			<div>
				<el-button size="small" @click="editRow(row)">编辑</el-button>
				<el-button size="small" type="danger" @click="deleteRow(row)">删除</el-button>
			</div>
		</el-table-column>
	</el-table>
	<div class="pagination-wrapper" v-show="!loading">
		<el-pagination layout="sizes, prev, pager, next" :page-size="pageSize" :total="totalNumber"
					:page-size="pageSize"
					:current-page="currentPage" @current-change="pageChange" @size-change="sizeChange">
		</el-pagination>
	</div>
</template>
<jsp:include page="contentAfter.jsp"/>
</body>
<script>
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]);
		return null;
	}
	new Vue({
		el: '#app',
		created: function () {
			this.getRows();
		},
		data: function () {
			return {
				menu: '1-1',
				user: {
					id: '',

					username: 'admin',
					avatar: ''
				},
				loading: false,
				totalNumber: 0,
				totalPage: 10,
				currentPage: 1,
				pageSize: 20,
				rows: []
			};
		},
		methods: {
			logout: function () {
				this.$confirm('确定要注销吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'info'
				}).then(function () {
					localStorage.removeItem('user');
					this.$router.push({path: '/login'});
				}.bind(this)).catch(function (e) {

				});
			},
			getRows: function () {
				$.get({
					url: '../userInfo/page',
					data: {
						currentPage: this.currentPage,
						pageNumber: this.pageSize
					}
				}).then(function (res) {
					if (res.success) {
						this.totalNumber = res.data.page.totalNumber;
						this.rows = res.data.pp;
					}
				}.bind(this))
			},
			pageChange: function (page) {
				this.currentPage = page;
				this.getRows();
			},
			sizeChange: function (size) {
				this.pageSize = size;
				this.getRows();
			},
			editRow: function (row) {
				window.location = 'userInfo?id=' + row.id;
			},
			deleteRow: function (row) {
				this.$confirm('确定要删除吗?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					return $.post({
						url: '../userInfo/del',
						data: {
							id: row.id
						}
					})
				}.bind(this)).then(function (res) {
					if (res.success) {
						this.$message.success('删除成功');
						this.getRows();
					} else {
						this.$message.error('删除失败');
					}
				}.bind(this)).catch(function () {

				});
			},
			create: function () {
				window.location = 'userInfo';
			}
		}
	})
</script>
</html>

