iot/projects/WebMVC/wwwroot/router/shared/list.html

<template>
    <layout v-bind:title="title">
        <h1>{{data.schema.title}}</h1>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <!--query from-->
                        <form class="form-horizontal query" v-if="hasPermission('Read')" :action="url" @submit.prevent="onSubmit">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3" v-for="(value,key,index) in data.schema.properties" v-if="showForQuery(key,value)">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label" :for="key">{{value.title}}:</label>
                                        <div class="col-sm-9">
                                            <component :is="getQueryComponent(value)" :title="value.title" :name="'query.'+key" :value="data.model.query[key]" :data="data.data" :prefix="'query'" :mode="'query'" v-if="data.model.query" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" v-if="hasPermissions()">
                                <div class="col-12">
                                    <a href="javascript:;" class="btn btn-primary" v-if="hasPermission('Read')" v-on:click="onSubmit()">查询</a>
                                    <router-link :to="{path:'/router/shared/edit.html',query:{mode:'Add',entity:entity}}" v-if="hasPermission('Add')" class="btn btn-success">新建</router-link>
                                    <a href="javascript:;" class="btn btn-danger" v-if="hasPermission('Delete')">删除</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-body">
                        <div class="dataTables_wrapper dt-bootstrap4">
                            <!--list table-->
                            <div class="row">
                                <div class="col-12">
                                    <table class="table table-bordered table-striped dataTable dtr-inline">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" class="select_all" />
                                                </th>
                                                <th v-for="(value,key,index) in data.schema.properties" v-if="showForList(key,value)">
                                                    {{value.title}}
                                                </th>
                                                <th v-if="hasPermission('Edit')">编辑</th>
                                                <th v-if="hasPermission('Read')">查看</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="item in data.model.list">
                                                <td>
                                                    <input type="checkbox" name="list[]" :value="item.id" />
                                                </td>
                                                <td v-for="(value,key,index) in data.schema.properties" v-if="showForList(key,value)">
                                                    <component :is="getDisplayComponent(key)" v-bind:name="key" v-bind:value="item[key]" v-bind:data="data.data" :mode="'list'" />
                                                </td>
                                                <td v-if="hasPermission('Edit')">
                                                    <router-link :to="{path:'/router/shared/edit.html',query:{mode:'Edit',entity:entity,id:item.id}}" class="btn btn-sm btn-default">编辑</router-link>
                                                </td>
                                                <td v-if="hasPermission('Read')">
                                                    <router-link :to="{path:'/router/shared/details.html',query:{entity:entity,id:item.id}}" class="btn btn-sm btn-default">查看</router-link>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!--page list-->
                        </div>
                    </div>
                    <div class="card-footer">
                        <pagination :nav="load" :index="data.model.pageIndex" :size="data.model.pageSize" :total="data.model.totalCount" />
                    </div>
                </div>
            </div>
        </div>
    </layout>
</template>
<script>
    export default {
        name: 'page-list',
        data: function () {
            return {
                title: '列表页',
                url: '/IoTCenter/Admin/' + this.$route.query.entity + '/Index',
                entity: this.$route.query.entity,
                data: {
                    schema: {
                        title: ''
                    },
                    model: {
                        pageIndex: 1,
                        pageSize: 20,
                        list: [],
                    },
                    data: {}
                }
            }
        },
        mounted: function () {
            this.load(this.data.model.pageIndex, this.data.model.pageSize);
        },
        methods: {
            load: function (index, size) {
                if (index) {
                    this.data.model.pageIndex = index;
                }
                if (size) {
                    this.data.model.pageSize = size;
                }
                var vm = this;
                var url = this.baseUrl + this.url;
                var query = $("form.query").serialize();
                var page = 'pageIndex=' + this.data.model.pageIndex + '&pageSize=' + this.data.model.pageSize;
                if (query) {
                    url += '?' + query + '&' + page;
                }
                axios.get(url).then(function (response) {
                    vm.data = response.data;
                });
            },
            hasPermission: function (cmd) {
                var permission = cmd + '-' + this.entity;
                return Enumerable.from(store.state.permissions).any(o => o === permission);
            },
            hasPermissions: function () {
                return this.hasPermission('Read') || this.hasPermission('Add') || this.hasPermission('Edit') || this.hasPermission('Delete');
            },
            getDisplayComponent: function (key) {
                var property = this.data.schema.properties[key];
                var template = 'display-' + (property.ui || property.format || property.type);
                console.log(template);
                return template;
            },
            getQueryComponent: function (value) {
                var template = 'edit-' + (value.ui || value.format || value.type);
                console.log(template);
                return template;
            },
            showForQuery: function (key, value) {
                return value.type !== 'array'
                    && value.type !== 'object'
                    && value.format !== 'imageurl'
                    && key !== 'displayOrder'
                    && (value.ui ? value.ui !== 'cron' : true);
            },
            showForList: function (key, value) {
                return key !== 'id' && value.type !== 'array';
            },
            onSubmit: function () {
                this.load();
            }
        }
    }
</script>