<template>
	<div>
		<div>
			<el-input v-model="queryDicName" placeholder="请输入查询条件" style="width :300px;float: left;margin-left: 10px;margin-bottom: 10px;"></el-input>
			<el-button type="info" @click="search">查询</el-button>
			<el-button type="danger" @click="handleExport">导出<i class="el-icon-download el-icon--right"></i></el-button>
		</div>
		<div style="padding-right: 30px;">
		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="id" label="编号" width="50" v-if="isShow">
			</el-table-column>
			<el-table-column prop="dicName" label="名称" width="120">
			</el-table-column>
			<el-table-column prop="dicType" label="类型" width="200">
			</el-table-column>
			<el-table-column prop="orderBy" label="序列" width="80">
			</el-table-column>
			
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		</div>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
		</el-pagination>
	</div>
</template>
<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				//表格初始化参数
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				queryDicName: '',
				isShow: false,
				loading: true,
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysDic/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					dicName: this.queryDicName
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total
					if (response) {
						this.loading = false
					} else {
						this.loading = true
					}
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			// 查询按钮事件
			search() {
				this.getTableData()
			},
			handleExport(){
			var dicName = this.queryDicName;
            location.href = "http://localhost:8080/SysDic/exportExcel.do?dicName="+dicName;
			}
		}
	}
</script>
