transfer-server/SuperAPI/wwwroot/rezero/default_ui/dynamic_interface.html

@@master_page.html
<link href="css/page_interface.css?v=2" rel="stylesheet" />
<div id="apibox">
    <div class="form-group row">
        <form id="frmSearch" onsubmit="return false;">
            <div class="row ">
                <div class="col-md-2"> </div>
                <div class="col-md-6">
                    <input class="form-control" type="text" id="txtSearch" name="example-text-input" placeholder="Url or name">
                </div>
                <div class="col-md-4">
                    <button @click="onSearch()" id="btnSearch" class="btn btn-success" type="submit"><i class="mdi mdi-magnify"></i>搜索</button>
                    <button onclick="frmSearch.reset()" id="btnSearch" class="btn btn-close" type="submit">清空</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            数据库 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li v-for="item in database"><a :href="getDynamicApiDocUrlByDatabase(item)">{{item.Name}}</a></li>
                        </ul>
                    </div>
                    <div class="btn-group m-l-10">
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            分类 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li v-for="item in interfaceCategroyList"><a :href="getDynamicApiDocUrl(item)">{{item.Name}}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="data" v-for="masterItem in data" :key="masterItem.Key">
        <h2>{{ masterItem.Key }} </h2>
        <section v-for="item in masterItem.Value" :key="item.Id">
            <div :class="getEndpointType(item)">
                <p class="p" @click="toggleEndpoint">
                    <span class="method">{{ item.HttpMethod }}</span>
                    <span class="url"> {{item.Url}}   {{item.Name}}</span>
                    <span class="openapi">+</span>
                </p>
                <p>{{ item.Description }}</p>
                <div class="parameter-title" style="display:none">
                    Parameters:
                    <div class="try-out">
                        <button class="btn try-out__btn" @click="tryItOut(item)">Try it out </button>
                    </div>
                </div>
                <div class="parameter" style="display:none" v-if="item.DataModel.DefaultParameters && item.DataModel.DefaultParameters.length > 0">
                    <ul>
                        <li v-for="param in item.DataModel.DefaultParameters.filter(p => !p.ValueIsReadOnly && p.Value !== undefined && p.Value !== '')" :key="param.Name">
                            <code>{{ param.ValueIsReadOnly ?   'Readonly:':''}}{{ param.Name }}</code> ({{ param.ValueType }}) - {{param.Type}} {{ param.Description }}  {{ param.Value  ?  ' ['+param.Name +' = ' + param.Value+']' : ''}}
                        </li>
                        <li v-if="item.DataModel.OrderDynamicParemters">
                            <code>OrderBy:[{FieldName:"FieldName",OrderByType:0}]  0 Asc, 1 Desc </code>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
    <!-- 添加这个div来显示“还没有数据”当data为空时 -->
    <div v-if="data==null||data.length === 0" class="no-data-message">
        <div class="alert alert-warning" role="alert">
            <p>  没有创建接口：1、先创建实体，2、点同步创建表，3、创建接口</p>
            <p> 创建了没显示： 菜单：【系统配置-接口授权】 给用户授权可以访问的接口 或者 清空所有接口授权</p>
        </div> 
    </div>
</div>
<script>
    new Vue({
        el: '#apibox',
        data: {
            data: null,
            error: null,
            interfaceCategroyList: [],
            database: [],
        },
        mounted() {
            // 在组件加载时触发数据获取
            this.fetchData(null);
            this.bindInterfaceCategroySelect();
            this.bindDatabaseSelect();
        },
        methods: {
            fetchData(name) {
                var urlParams = new URLSearchParams(window.location.search);
                var idFromUrl = urlParams.get('InterfaceCategoryId');
                var databaseIdFromUrl = urlParams.get('DatabaseId');
                var url = url = '/PrivateReZeroRoute/100003/GetInternalInterfaceList?IsInitialized=0';
                var urlParameters = "&" + tools.objectToQueryString({
                    Name: txtSearch.value,
                    InterfaceCategoryId: idFromUrl,
                    DatabaseId:databaseIdFromUrl
                });
                url = url + urlParameters;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.data = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            tryItOut(item) {
                var urlParams = new URLSearchParams(window.location.search);
                var token = urlParams.get('token');
                window.open('/rezero/try_api.html?id=' + item.Id + "&token=" + token, '_blank');
            },
            onSearch: function () {
                this.fetchData(txtSearch.value);
            },
            toggleEndpoint(event) {
                var $currentTarget = $(event.currentTarget);
                var $parent = $currentTarget.parent();
                var $parameterElements = $parent.find(".parameter-title, .parameter");
                var $textEle = $currentTarget.find(".openapi");
                var isTextPlus = $textEle.text() === "+";
                $parameterElements.toggle(100);
                $textEle.text(isTextPlus ? "-" : "+").toggleClass("reduction", isTextPlus);
            }, 
            bindInterfaceCategroySelect: function () {
                axios.get("/PrivateReZeroRoute/100004/GetDynamicInterfaceCategoryList", jwHeader)
                    .then(response => {
                        this.interfaceCategroyList = response.data;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            bindDatabaseSelect: function () {
                axios.get("/PrivateReZeroRoute/100004/GetDatabaseInfoAllList", jwHeader)
                    .then(response => {
                        this.database = response.data;
                        this.databaseId = this.database[0].Id;
                        var th = this;
                        setTimeout(function () {
                            th.onSearch();
                        }, 50);
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            getEndpointType(item) {
                var actionType =item.DataModel.ActionType;
                if (item.HttpMethod == "Get") {
                    return 'endpoint endpointGet';
                } else if (item.HttpMethod == "Post") {
                    return 'endpoint endpointPost';
                } else if (item.HttpMethod == "Delete") {
                    return 'endpoint endpointDelete';
                } else if (item.HttpMethod == "Put") {
                    return 'endpoint endpointPut';
                } else if (actionType.startsWith('1')) {
                    return 'endpoint endpointGet';
                } else if (actionType.startsWith('2')) {
                    return 'endpoint endpointPost';
                } else if (actionType.startsWith('6')) {
                    return 'endpoint endpointPost';
                } else if (actionType.startsWith('3')) {
                    return 'endpoint endpointDelete';
                } else if (actionType.startsWith('4')) {
                    return 'endpoint endpointPut';
                } else if (actionType.startsWith('9')) {
                    return 'endpoint endpointSql';
                } else {
                    return 'endpoint endpointOther';
                }
            },
            getDynamicApiDocUrl: function (item)
            {
                var urlParams = new URLSearchParams(window.location.search);
                var token = urlParams.get('token');
                var model = urlParams.get('model');
                return "/rezero/dynamic_interface.html?InterfaceCategoryId=" + item.Id + "&model=" + model + "&token=" + token;
            },
            getDynamicApiDocUrlByDatabase: function (item) {
                var urlParams = new URLSearchParams(window.location.search);
                var token = urlParams.get('token');
                var model = urlParams.get('model');
                return "/rezero/dynamic_interface.html?DatabaseId=" + item.Id + "&model=" + model + "&token=" + token;
            }
        }
    });
</script>