表格重构

src/style/common.less

@@ -183,4 +183,54 @@ html,body{
 .el-form-item__label{
     font-weight: normal;
 }
-
+.lock-dg {
+	overflow:hidden;
+}
+.lock-dg .lock-dg-header {
+	border-bottom:1px solid #e7eaec;
+	overflow:hidden;
+}
+TABLE.lockgrid {
+	border-collapse:collapse;
+	table-layout:fixed;
+}
+TABLE.lockgrid TH {
+	text-align: center;
+    PADDING: 2px;
+    font-size: 13px;
+    height:26px;
+	white-space:nowrap;
+	font-weight:normal;
+}
+TABLE.lockgrid TD.pms {
+    color: rgb(255, 0, 0);
+    font-weight: bold;
+}
+TABLE.lockgrid th.crossHead0,TABLE.lockgrid th.crossHead1,TABLE.lockgrid th.crossHead2 {
+	text-align: center;
+}
+TABLE.lockgrid TD.lockgrid-td, TD.grid3-foot {
+    padding: 8px 2px 8px 2px;
+    font-size: 12px;
+    height:20px;
+	border-bottom:1px solid #e7eaec;
+	line-height:1.42857;
+}
+TABLE.lockgrid div.dg-cell {
+	width:90px;
+	overflow:hidden;
+}
+TABLE.lockgrid tr:hover {
+	background-color:#FFFFD2;
+}
+.pagesizeinfo{
+	padding:3px;
+	clear:both;
+}
+.pagesizeinfo .pagesizeLeft {
+	float:left;
+}
+.pagesizeinfo .pagesizeRight{
+	text-align:right;
+	padding:3px;
+}

src/view/portal/LayoutOptarea.vue

@@ -239,7 +239,11 @@ export default {
           });
     },
     editComp(comp, layoutId){
-      this.$parent.$refs['layoutleftForm'].tabActive = 'data-tab-2';
+      if(comp.type ==='grid'){
+        this.$parent.$refs['layoutleftForm'].tabActive = 'data-tab-3';
+      }else{
+        this.$parent.$refs['layoutleftForm'].tabActive = 'data-tab-2';
+      }
       if(comp.type === 'text'){
         this.$refs['portalTextForm'].insertText("update", layoutId, comp);
       }else{

src/view/portal/data/Grid.vue

@@ -4,7 +4,7 @@
         <template v-if="!comp.cols || comp.cols.length === 0">
           <div class="tipinfo">拖拽数据表字段到此处作为表格的列字段</div>
         </template>
-        <template v-if="comp.cols.length > 0">
+        <template v-if="comp.cols && comp.cols.length > 0">
           <b>
             表格字段：
           </b>

src/view/portal/view/Grid.vue

@@ -21,13 +21,70 @@ export default {
   },
   render(h){
     let comp = this.comp;
-    if(comp.cols && comp.cols.length > 0){
+    let data = this.data;
+    if(data){
       let ths = [];
-      comp.cols.forEach(element => {
-        ths.push(h('th', {class:"grid3-td"}, [h('div', {class:"dg-cell"}, element.name)]));
+      data.header.forEach(element => {
+        ths.push(h('th', {class:"grid3-td",attrs:{align:element.align?element.align:"center"}}, [h('div', {class:"dg-cell"}, element.desc)]));
       });
-      let table = h('table', {class:"lockgrid"}, [h('thead', [h("tr", ths)])]);
-      return table;
+      let table1 = h('table', {class:"lockgrid"}, [h('thead', [h("tr", ths)])]);
+
+
+      
+
+      let trs = [];
+      data.datas.forEach((e, idx) => {
+        let tds = []
+        $(data.header).each((c, d)=>{
+          let hd = d;
+          let nd = e[d.name];
+          tds.push(h('td', {class:"lockgrid-td",attrs:{align:hd.align?hd.align:"center"}}, [h('div', {class:"dg-cell"}, nd.value)]));
+        });
+        trs.push(h('tr', tds));
+      });
+      let table2 = h('table', {class:"lockgrid"}, [h('thead', trs)]);
+
+        //分页信息
+        let allpage = 0;
+        if (data.total % data.pageSize === 0) {
+          allpage = data.total / data.pageSize;
+        } else {
+          allpage = Math.floor(data.total / data.pageSize) + 1;
+        }
+      let first = data.curPage <= 0;
+      let end = data.curPage >= allpage - 1;
+      console.log(allpage);
+      let pg = [
+        h('button', {class:"btn btn-link btn-xs",attrs:{disabled:first},on:{click:()=>{
+          if(!first){
+            this.comp.curPage = 0;
+            this.gridView();
+          }
+        }},domProps:{innerHTML:"<i class='fa fa-angle-double-left'></i>"}}),
+        h('button', {class:"btn btn-link btn-xs", on:{click:()=>{
+          if(!first){
+            this.comp.curPage = data.curPage - 1;
+            this.gridView();
+          }
+        }},attrs:{disabled:first},domProps:{innerHTML:"<i class='fa fa-angle-left'></i>"}}),
+        h('button', {class:"btn btn-link btn-xs",attrs:{disabled:end},on:{click:()=>{
+          if(!end){
+            this.comp.curPage = data.curPage + 1;
+            this.gridView();
+          }
+        }},domProps:{innerHTML:"<i class='fa fa-angle-right'></i>"}}),
+        h('button', {class:"btn btn-link btn-xs",attrs:{disabled:end}, on:{click:()=>{
+          if(!end){
+            this.comp.curPage = allpage - 1;
+            this.gridView();
+          }
+        }},domProps:{innerHTML:"<i class='fa fa-angle-double-right'></i>"}})
+      ];
+
+      let pageinfo = h('div', {class:"pagesizeinfo"}, [h('div', {class:"pagesizeLeft"}, pg), h('div', {class:"pagesizeRight"}, '第'+(data.curPage + 1)+'页，共'+data.total+'条记录')]);
+      let cld = [h('div', {class:"lock-dg-header"}, [table1]), h('div', {class:"lock-dg-body"}, [table2]), pageinfo];
+      return h('div', {class:"lock-dg"}, cld);
+      
     }
     return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
   },
@@ -38,7 +95,22 @@ export default {
   },
   methods: {
     gridView(){
-      
+      let ts = this;
+      let comp = this.comp;
+      if(comp.cols && comp.cols.length > 0){
+          let json = JSON.parse(JSON.stringify(comp));
+          let loadingInstance = Loading.service({fullscreen:false, target:document.querySelector('#c_'+comp.id+" div.ccctx")});
+          ajax({
+            url:"portal/GridView.action",
+            type:"POST",
+            data:JSON.stringify(json),
+            postJSON:true,
+            success:(resp)=>{
+              ts.data = resp.rows;
+              loadingInstance.close();
+            }
+          }, this);
+      }
     }
   },
   watch: {