分页功能

src/style/common.less

@@ -40,6 +40,10 @@ html,body{
     height: calc(100% - 30px);
     overflow: auto;
 }
+.wrapper-content-nomargin {
+    height: calc(100% - 30px);
+    overflow: auto;
+}
 .ibox {
     /**
     margin-bottom: 20px;
@@ -111,4 +115,13 @@ html,body{
 }
 .el-form-item__error{
     padding-top:0px;
+}
+//覆盖elementUI 的 导航菜单
+.el-menu--horizontal>.el-menu-item {
+    height:35px;
+    line-height: 35px;
+}
+.el-menu--horizontal>.el-submenu .el-submenu__title {
+    height:35px;
+    line-height: 35px;
 }

src/view/bireport/ReportDesign.vue

@@ -1,6 +1,6 @@
 <template>
-  	<div class="wrapper-content">
-		<el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#777" mode="horizontal">
+  	<div class="wrapper-content-nomargin">
+		<el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#f6f8f8" text-color="#777" mode="horizontal">
 			<el-submenu index="1">
 				<template slot="title"><i class="fa fa-file"></i> 文件</template>
 				<el-menu-item index="1-1">打开</el-menu-item>
@@ -18,39 +18,44 @@
 			<el-menu-item index="3"><i class="fa fa-print"></i> 打印</el-menu-item>
 			<el-menu-item index="4"><i class="fa fa-list-alt"></i> 解释</el-menu-item>
 		</el-menu>
-		<div class="row">
-			<div class="col-sm-3">
-				<div class="ibox" style="border:none;">
-					<div class="ibox-content">
-						<button class="btn btn-block btn-primary" @click="selectdataset()"><i class="fa fa-refresh"></i> 切换数据</button>
-						<p class="text-warning">拖拽数据到表格或图表中展现</p>
-						<div id="datasettree"></div>
+		<div class="wrapper-content">
+			<div class="row">
+				<div class="col-sm-3">
+					<div class="ibox">
+						<div class="ibox-content" style="padding:0px;">
+							<div style="padding:15px 20px 0px 20px">
+								<button class="btn btn-block btn-primary" @click="selectCube()"><i class="fa fa-refresh"></i> 切换数据</button>
+								<p class="text-warning">拖拽数据到表格或图形中展现</p>
+							</div>
+							<div id="datasettree"></div>
+						</div>
 					</div>
 				</div>
-			</div>
-			
-			<div class="col-sm-9 animated fadeInRight">
-				<div class="ibox" style="border:none;">
-					<div class="ibox-content" id="p_param" style="padding:5px;">
-						<div class="ptabhelpr">拖拽维度到此处作为筛选条件</div>
+				
+				<div class="col-sm-9 animated fadeInRight">
+					<div class="ibox" style="margin-bottom:20px;">
+						<div class="ibox-content" id="p_param" style="padding:5px;">
+							<div class="ptabhelpr">拖拽维度到此处作为筛选条件</div>
+						</div>
 					</div>
+					
+					<el-tabs v-model="showtype" type="border-card">
+						<el-tab-pane label="表格" name="table">表格</el-tab-pane>
+						<el-tab-pane label="图形" name="chart">图形</el-tab-pane>
+					</el-tabs>
+							
+					
 				</div>
-				
-				<el-tabs v-model="showtype" type="border-card">
-					<el-tab-pane label="表格" name="table">表格</el-tab-pane>
-					<el-tab-pane label="图形" name="chart">图形</el-tab-pane>
-				</el-tabs>
-						
-				
 			</div>
 		</div>
-
+		<selectCube ref="selectCubeForm"></selectCube>
   	</div>
 </template>
 
 <script>
 	import {baseUrl} from '@/common/biConfig'
 	import $ from 'jquery'
+	import selectCube from "@/view/bireport/SelectCube";
 
 	export default {
 	    data(){
@@ -60,13 +65,19 @@
 				selectDs:""
 			}
 		},
+		components: {
+			selectCube
+    	},
 		mounted(){
-			this.selectdataset();
+			this.initdataset();
 		},
 		computed: {
 		},
 		methods: {	
-			selectdataset(){
+			selectCube(){
+				this.$refs['selectCubeForm'].select();
+			},
+			initdataset(){
 				if (this.selectDs.length === 0) {
 					$('#datasettree').jstree({
 						core: {
@@ -102,6 +113,10 @@
 	}
 </script>
 
-<style lang="less" scoped>
-	@import "../../style/mixin";
+<style lang="css">
+#p_param .ptabhelpr{
+	padding:5px;
+	color: #999999;
+    font-size: 14px;
+}
 </style>

src/view/bireport/SelectCube.vue

@@ -0,0 +1,88 @@
+<template>
+  	<el-dialog title="选择数据模型" :visible.sync="show">
+		<el-input v-model="search"	size="mini" placeholder="输入关键字搜索">
+			<el-button slot="append" icon="el-icon-search" @click="searchme"></el-button>
+		</el-input>
+			<el-table :data="tableData" @row-click="selectme" border style="width: 100%" header-row-class-name="tableHeadbg">
+				<el-table-column label="" width="45">
+					<template slot-scope="scope">
+						<el-radio v-model="checked" name="myselect2" :label="scope.row.cubeId">&nbsp;</el-radio>
+					</template>
+				</el-table-column>
+				<el-table-column align="center" prop="cubeName" label="模型名称"></el-table-column>
+				<el-table-column align="center" prop="desc" label="说明"></el-table-column>
+				<el-table-column align="center" prop="dsetName" label="数据集"></el-table-column>
+			</el-table>
+			<el-pagination
+				layout="prev, pager, next"
+				:total="total">
+			</el-pagination>
+			
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="save()">确 定</el-button>
+      <el-button @click="show = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+	import {ajax} from '@/common/biConfig'
+	import $ from 'jquery'
+
+	export default {
+	    data(){
+			return {
+				show:false,
+				checked:null,
+				tableData:[],
+				search:null,
+				total:0,
+				page:1,
+				rows:10,
+			}
+		},
+		mounted(){
+		},
+		computed: {
+		},
+		methods: {	
+			select(){
+				this.show = true;
+				this.search = null;
+				this.loadData();
+			},
+			save(){
+				this.show = false;
+			},
+			selectme:function(a, b){
+				this.checked = a.cubeId;
+			},
+			searchme(){
+				this.loadData();
+			},
+			loadData(){
+				ajax({
+					url:"model/pageCube.action",
+					type:"POST",
+					data:{rows:this.rows, page:this.page,key:this.search},
+					success:(resp)=>{
+						this.total = resp.total;
+						this.tableData = resp.rows.map(m=>{
+							return {
+								cubeId:m.cubeId,
+								cubeName:m.cubeName,
+								desc:m.desc,
+								dsetName:m.dsetName
+							}
+						});
+					}
+				}, this);
+			}
+		},
+		watch: {
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+</style>

src/view/frame/User.vue

@@ -38,6 +38,15 @@
 						</template>
 					</el-table-column>
 				</el-table>
+				<el-pagination
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+					:page-sizes="[10, 20, 50, 100]"
+					:current-page="page"
+					:page-size="rows"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="total">
+				</el-pagination>
 			  </div>
 		  </div>
 		  	<el-dialog :title="dialogTitle" :visible.sync="addUserDailog">
@@ -122,6 +131,9 @@
 				dialogTitle:"",
 				checked:null,
 				isupdate: false,
+				total:0,
+				page:1,
+				rows:10,
 				user:{
 					userId:null,
 					staffId:null,
@@ -187,13 +199,23 @@
 				let ts = this;
 				ajax({
 					type:"GET",
-					data:{},
+					data:{page:ts.page, rows:ts.rows},
 					url:"frame/user/list.action", 
 					success:function(resp){
 						ts.tableData = resp.rows;
+						ts.total = resp.total;
+						console.log(ts.total);
 					}
 				}, ts);
 			},
+			handleSizeChange(v){
+				this.rows = v;
+				this.loadDatas();
+			},
+			handleCurrentChange(v){
+				this.page = v;
+				this.loadDatas();
+			},
 			fmtstate:function(row, column, cellValue, index){
 				return cellValue === 1 ?"启用":"停用";
 			},