open-platform-admin-ui/src/views/apidocs/index.vue

<template>
  <div style="width: 800px">
    <el-table
      v-loading="isLoading"
      :data="listData"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="方法名" prop="method" width="300"/>
      <el-table-column label="版本号" prop="version" width="150"/>
      <el-table-column label="操作" width="70">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native="showDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <dialog-detail ref="dialogDetail"/>
    <!--    <el-drawer-->
    <!--      :title="currentDetail.title+'['+currentDetail.method+':'+currentDetail.version+']'"-->
    <!--      :visible.sync="showDrawer"-->
    <!--    >-->
    <!--      <el-table-->
    <!--        v-loading="isLoading"-->
    <!--        :data="currentDetail.listFields"-->
    <!--        border-->
    <!--        highlight-current-row-->
    <!--      >-->
    <!--        <el-table-column label="参数名" prop="name" width="150" />-->
    <!--        <el-table-column label="类型" prop="type" width="100" />-->
    <!--        <el-table-column label="必须">-->
    <!--          <template slot-scope="scope">-->
    <!--            {{ scope.row.required ? '是' : '否' }}-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="说明" prop="describe" />-->
    <!--      </el-table>-->
    <!--    </el-drawer>-->
  </div>
</template>

<script>
import { getApis } from '@/api/docsApis'
import { findPage } from '@/api/appKey'
import DialogDetail from '@/views/apidocs/DialogDetail'

export default {
  name: 'Dashboard',
  components: { DialogDetail },
  data() {
    return {
      queryForm: {},
      currentPage: 1,
      listData: [],
      isLoading: false,
      perList:[]
      // showDrawer: false,
      // currentDetail: {}
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    showDetail(row) {
      this.$refs.dialogDetail.open(row)
      // this.showDrawer = true
      // this.currentDetail = row
    },
    fetchData() {
      this.isLoading = true
      findPage({ ...this.queryForm, current: this.currentPage })
        .then((response) => {
          this.perList = response && response.records ? response.records.map(re=>re.permissions).flat(Infinity) : [];
          getApis().then(listData => {
            this.listData = listData.filter(data =>{
              return this.perList.includes(data.method+':'+data.version);
            });
          }).finally(() => {
            this.isLoading = false
          })
        })
        .finally(() => (this.isLoading = false))
    }
  }
}
</script>