@@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>