<template>
	<div style="text-align: center;">
		<div style="width:600px;float: left; margin-left: 10px;margin-bottom: 10px;">
			<el-input v-model="queryTableLabel" placeholder="请输入查询条件" style="width :300px;float: left;"></el-input>
			<el-button type="info" @click="search">查询</el-button>
			<el-button type="primary" @click="handleAdd">新增</el-button>
		</div>
		<div style="padding-right: 30px;">
			<el-table v-loading="loading" :data="tableData" stripe border>
				<el-table-column prop="id" label="编号" width="60" v-if="isShow">
				</el-table-column>
				<el-table-column prop="tableName" label="表名" width="80">
				</el-table-column>
				<el-table-column prop="tableField" label="表字段" width="80">
				</el-table-column>
				<el-table-column prop="tableType" label="对应列类型" width="80">
				</el-table-column>
				<el-table-column prop="tableLabel" label="标题名" width="80">
				</el-table-column>
				<el-table-column prop="tableProp" label="列名" width="80">
				</el-table-column>
				<el-table-column prop="tableWidth" label="列宽度" width="80">
				</el-table-column>
				<el-table-column prop="isForm" label="是否表单" width="80">
				</el-table-column>
				<el-table-column prop="formType" label="表单类型" width="80">
				</el-table-column>
				<el-table-column prop="formSort" label="表单排序" width="80">
				</el-table-column>
				<el-table-column prop="isQuery" label="是否查询" width="80">
				</el-table-column>
				<el-table-column prop="queryType" label="查询类型" width="80">
				</el-table-column>
				<el-table-column prop="querySort" 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>


		<el-dialog title="编辑信息" :visible.sync="dialogVisible" width="600px">
			<el-form :model="form" label-width="80px">
				<el-form-item label="用户编码" v-if="isShow">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="表名">
					<el-input v-model="form.tableName"></el-input>
				</el-form-item>
				<el-form-item label="表字段">
					<el-input v-model="form.tableField"></el-input>
				</el-form-item>
				<el-form-item label="对应列类型">
					<el-input v-model="form.tableType"></el-input>
				</el-form-item>
				<el-form-item label="标题名">
					<el-input v-model="form.tableLabel"></el-input>
				</el-form-item>
				<el-form-item label="列名">
					<el-input v-model="form.tableProp"></el-input>
				</el-form-item>
				<el-form-item label="列宽度">
					<el-input v-model="form.tableWidth"></el-input>
				</el-form-item>
				<el-form-item label="是否表单">
					<el-input v-model="form.isForm"></el-input>
				</el-form-item>
				<el-form-item label="表单类型">
					<el-input v-model="form.formType"></el-input>
				</el-form-item>
				<el-form-item label="表单排序">
					<el-input v-model="form.formSort"></el-input>
				</el-form-item>
				<el-form-item label="是否查询">
					<el-input v-model="form.isQuery"></el-input>
				</el-form-item>
				<el-form-item label="查询类型">
					<el-input v-model="form.queryType"></el-input>
				</el-form-item>
				<el-form-item label="查询排序">
					<el-input v-model="form.querySort"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>


	</div>
</template>

<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				//表格初始化参数
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				queryTableLabel: '',
				//录入框
				dialogVisible: false,
				form: {
					id: '',
					tableName: '',
					tableField: '',
					tableType: '',
					tableLabel: '',
					tableProp: '',
					tableWidth: '',
					isForm: '',
					formType: '',
					formSort: '',
					isQuery: '',
					queryType: '',
					querySort: ''
				},
				isShow: false,
				loading: true,
				// fullscreenLoading: false
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'DevTableProperty/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					tableLabel: this.queryTableLabel
				}
				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()
			},
			//保存按钮事件
			handleSave(row) {
				var userId = sessionStorage.getItem('userId');
				var url = 'DevTableProperty/save.do'
				var param = {
					id: this.form.id,
					tableName: this.form.tableName,
					tableField: this.form.tableField,
					tableType: this.form.tableType,
					tableLabel: this.form.tableLabel,
					tableProp: this.form.tableProp,
					tableWidth: this.form.tableWidth,
					isForm: this.form.isForm,
					formType: this.form.formType,
					formSort: this.form.formSort,
					isQuery: this.form.isQuery,
					queryType: this.form.queryType,
					querySort: this.form.querySort,
					userId: userId,
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data,
						});
					}
					// loading.close();
				});



			},
			//保存取消按钮事件   关闭编辑对话框
			handleCancelSave(row) {
				this.dialogVisible = false
			},

			// 新增按钮事件
			handleAdd() {
				this.dialogVisible = true
				this.form = {
					id: '',
					tableName: '',
					tableField: '',
					tableType: '',
					tableLabel: '',
					tableProp: '',
					tableWidth: '',
					isForm: '',
					formType: '',
					formSort: '',
					isQuery: '',
					queryType: '',
					querySort: ''
				}
			},
			// 编辑按钮事件
			handleEdit(row) {
				this.dialogVisible = true
				this.form = {
					id: row.id,
					tableName: row.tableName,
					tableField: row.tableField,
					tableType: row.tableType,
					tableLabel: row.tableLabel,
					tableProp: row.tableProp,
					tableWidth: row.tableWidth,
					isForm: row.isForm,
					formType: row.formType,
					formSort: row.formSort,
					isQuery: row.isQuery,
					queryType: row.queryType,
					querySort: row.querySort
				}
			},
			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var userId = sessionStorage.getItem('userId');
					var url = 'DevTableProperty/remove.do'
					var param = {
						id: id,
						userId: userId
					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
							this.getDataTree()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 查询按钮事件
			search() {
				this.getTableData()
			}
		}
	}
</script>
<style>
	/* .el-table{
	margin-left: 10px;
	margin-top: 10px;
}
.el-table th{
	background-color: #DCDFE6;
	color: black;
	font-size: 14px Medium;
}
.el-table tr{
	font-size: 11px;
}
.el-tree{
		margin-left: 10px;
		margin-top: 10px;
	 
	} */
</style>
