update

Former-commit-id: 008629aff38889f52ef51c5a7c7f5b9ab5b44c22
Former-commit-id: 9c75bbc702c0da36dfcd208dfe777e42dda13b1c

projects/Infrastructure/Web/Mvc/CrudController.cs

@@ -6,6 +6,8 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.Controllers;
 using Microsoft.AspNetCore.Mvc.Filters;
 using Microsoft.EntityFrameworkCore;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Serialization;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -295,7 +297,7 @@ namespace Infrastructure.Web.Mvc
 
         public IActionResult GetEditSchema()
         {
-            return Json(this.GetJsonSchema<TEditModel>());
+            return Json(this.GetJsonSchema<TEditModel>(), new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
         }
     }
 }

projects/WebMVC/wwwroot/js/components.js

@@ -1,4 +1,9 @@
-Vue.component('layout', function (resolve, reject) {
+Vue.component('pagination', function (resolve, reject) {
+    axios.get("/pages/shared/pagination.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});
+Vue.component('layout', function (resolve, reject) {
     axios.get("/pages/shared/layout.html").then(function (response) {
         resolve(parseModel(response));
     });

projects/WebMVC/wwwroot/pages/admin/list.html

@@ -1,6 +1,17 @@
 <template>
     <layout v-bind:title="title">
-        <h1>列表页</h1>
+        <h1>{{schema.title}}</h1>
+        <div class="row">
+            <table class="table table-bordered table-hover">
+                <tr>
+                    <th v-for="item in schema.properties">{{item.title}}</th>
+                </tr>
+                <tr v-for="item in data.list">
+                    <td v-for="(value,key,index) in schema.properties">{{item[key]}}</td>
+                </tr>
+            </table>
+        </div>
+        <pagination :nav="load" :index="data.pageIndex" :size="data.pageSize" :total="data.totalCount" />
     </layout>
 </template>
 <script>
@@ -8,12 +19,28 @@
         data: function () {
             return {
                 title: '列表页',
-                schema: null,
-                data: null
+                url: '/IoTCenter/Admin/' + this.$route.query.entity + '/GetEditSchema',
+                schema: {},
+                data: {
+                    list: []
+                }
             }
         },
-        mouted: function () {
-            alert(1);
+        mounted: function () {
+            this.load(1, 20);
+        },
+        methods: {
+            load: function (index, size) {
+                var url = config.baseUrl + this.url;
+                var vm = this;
+                axios.post(url).then(function (response) {
+                    vm.schema = response.data;
+                    var url = config.baseUrl + '/IoTCenter/Admin/' + vm.$route.query.entity + '/Index?pageIndex=' + index + '&pageSize=' + size;
+                    axios.get(url).then(function (response) {
+                        vm.data = response.data;
+                    });
+                });
+            }
         }
     }
 </script>

projects/WebMVC/wwwroot/pages/shared/layout.html

@@ -58,11 +58,11 @@
                                 </p>
                             </router-link>
                         </li>
-                        <li class="nav-item" v-if="hasPermission('Read-Setting')">
-                            <router-link :to="{path:'/pages/admin/list.html',query:{entity:'Setting'}}" :class="isEntityActive('Setting')">
+                        <li class="nav-item" v-if="hasPermission('Read-Node')">
+                            <router-link :to="{path:'/pages/admin/list.html',query:{entity:'Node'}}" :class="isEntityActive('Node')">
                                 <i class="nav-icon far fa-image"></i>
                                 <p>
-                                    设置
+                                    节点
                                 </p>
                             </router-link>
                         </li>

projects/WebMVC/wwwroot/pages/shared/pagination.html

@@ -0,0 +1,90 @@
+<template>
+    <div class="row">
+        <div class="col-sm-12 col-md-5">
+            <div class="dataTables_info">{{index}}/{{getPageCount()}}</div>
+        </div>
+        <div class="col-sm-12 col-md-7">
+            <div class="dataTables_paginate paging_simple_numbers">
+                <ul class="pagination">
+                    <li :class="'paginate_button page-item previous'+(hasPrev()?'':' disabled')">
+                        <a href="javascript:;" class="page-link" v-on:click="nav(index-1,size)">上一页</a>
+                    </li>
+                    <li v-for="item in getPageList()" :class="'paginate_button page-item' + (item===index?' active':'')">
+                        <a href="javascript:;" class="page-link" v-on:click="nav(item,size)">{{item}}</a>
+                    </li>
+                    <li :class="'paginate_button page-item next'+(hasNext()?'':' disabled')">
+                        <a href="javascript:;" class="page-link" v-on:click="nav(index+1,size)">下一页</a>
+                    </li>
+                    <li class="paginate_button page-item">
+                        <select class="form-control" v-model="size" v-on:change="nav(1,size)">
+                            <option v-for="item in sizeList" v-bind:value="item">
+                                {{ item }}
+                            </option>
+                        </select>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            index: {
+                type: Number,
+                default: 1
+            },
+            size: {
+                type: Number,
+                default: 20
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            sizeList: {
+                type: Array,
+                default: [20, 50, 100]
+            },
+            nav: {
+                type: Function,
+                default: null
+            }
+        },
+        methods: {
+            getPageCount: function () {
+                return Math.ceil(this.total / this.size);
+            },
+            hasPrev: function () {
+                return this.index > 1;
+            },
+            hasNext: function () {
+                return this.index + 1 < this.getPageCount();
+            },
+            getPageList: function () {
+                var pageCount = this.getPageCount();
+                var maxLinks = 10;
+                var left = maxLinks / 2;
+                var start = this.index - left;
+                start = start > 1 ? start : 1;
+                var end = this.index + (maxLinks - left - 1);
+                end = end > pageCount ? pageCount : end;
+                if (start == 1 && end < pageCount) {
+                    while (end - start + 1 < maxLinks && end < pageCount) {
+                        end++;
+                    }
+                }
+                if (end == pageCount && start > 1) {
+                    while (end - start + 1 < maxLinks && start > 1) {
+                        start--;
+                    }
+                }
+                var list = [];
+                for (var i = start; i <= end; i++) {
+                    list.push(i);
+                }
+                return list;
+            }
+        }
+    };
+</script>