@@master_page.html
<link href="css/page_interface.css" 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>
            </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="endpoint">
                <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>
<script>
    new Vue({
        el: '#apibox',
        data: {
            data: null,
            error: null
        },
        mounted() {
            // 在组件加载时触发数据获取
            this.fetchData(null);
        },
        methods: {
            fetchData(name) {
                var urlParams = new URLSearchParams(window.location.search);
                var idFromUrl = urlParams.get('InterfaceCategoryId');
                var url = url = '/PrivateReZeroRoute/100003/GetInternalInterfaceList?IsInitialized=1';
                var urlParameters = "&" + tools.objectToQueryString({
                    Name: txtSearch.value,
                    InterfaceCategoryId: idFromUrl
                });
                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) {
                window.open('/rezero/try_api.html?id=' + item.Id, '_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);
            },
        }
    });
</script>