SOP/sop-website/sop-website-frontend/src/views/doc/api/index.vue

<script setup lang="ts">
import {
  contentShow,
  content,
  docDetail,
  commonParams,
  dataNodeType,
  resultData,
  handleChangeDocApp,
  docAppId,
  docAppList,
  docTree,
  handleNodeClick,
  showUrl,
  showProdUrl,
  showSandBoxUrl
} from "./index";
import { ApiParamTable } from "@/components/ApiParamTable";
import MavonEditor from "mavon-editor";
const defaultProps = {
  children: "children",
  label: "docTitle"
};
</script>
<template>
  <el-container class="doc-view">
    <el-aside width="300px">
      <el-select
        v-show="docAppId > 0"
        v-model="docAppId"
        placeholder="Select"
        size="large"
        @change="handleChangeDocApp"
      >
        <el-option
          v-for="item in docAppList"
          :key="item.id"
          :label="item.appName"
          :value="item.id"
        />
      </el-select>
      <div style="margin-top: 10px">
        <el-link type="primary" href="" target="_blank">签名算法</el-link>
      </div>
      <el-tree
        :data="docTree"
        :props="defaultProps"
        style="margin-top: 10px"
        @node-click="handleNodeClick"
      />
    </el-aside>
    <el-main
      v-show="docDetail?.docInfoView?.url?.length > 0"
      style="padding-top: 0"
    >
      <div v-show="contentShow">
        <MavonEditor
          v-model="content"
          :box-shadow="false"
          :subfield="false"
          default-open="preview"
          :editable="false"
          :toolbars-flag="false"
        />
      </div>
      <div v-show="!contentShow">
        <h2>
          {{ docDetail.docInfoView.url + `(${docDetail.docInfoView.docName})` }}
        </h2>
        <div v-if="docDetail.docInfoView.description">
          <h3>接口说明</h3>
          <div
            class="api-description"
            v-html="docDetail.docInfoView.description"
          />
        </div>
        <el-descriptions border style="margin-top: 20px">
          <el-descriptions-item label="接口名称">
            {{ docDetail.docInfoView.url }}
          </el-descriptions-item>
          <el-descriptions-item label="版本号">
            {{ docDetail.docInfoView.version }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          v-show="showUrl"
          :column="1"
          title="请求地址"
          border
          style="margin-top: 20px"
        >
          <el-descriptions-item v-show="showProdUrl">
            <template #label>
              <div class="cell-item">生产环境</div>
            </template>
            {{ docDetail.docInfoConfig.openProdUrl }}
          </el-descriptions-item>
          <el-descriptions-item v-show="showSandBoxUrl">
            <template #label>
              <div class="cell-item">沙箱环境</div>
            </template>
            {{ docDetail.docInfoConfig.openSandboxUrl }}
          </el-descriptions-item>
        </el-descriptions>
        <h3>公共请求参数</h3>
        <el-table :data="commonParams" border highlight-current-row>
          <el-table-column prop="name" label="名称" width="200" />
          <el-table-column prop="type" label="类型" width="100" />
          <el-table-column prop="required" label="必须" width="60">
            <template #default="scope">
              <span :class="scope.row.required ? 'danger' : ''">
                {{ scope.row.required ? `是` : `否` }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="maxLength" label="最大长度" width="85" />
          <el-table-column prop="description" label="描述">
            <template #default="scope">
              <span v-if="scope.row.name === 'sign'">
                商户请求参数的签名串，详见
                <el-button type="primary" link>签名</el-button>
              </span>
              <span v-else>
                {{ scope.row.description }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="example" label="示例值" width="200" />
        </el-table>
        <h3>业务请求参数</h3>
        <ApiParamTable :data="docDetail.docInfoView.requestParams" />
        <h3>公共返回参数</h3>
        <el-table :data="resultData" border highlight-current-row>
          <el-table-column label="名称" prop="name" width="200" />
          <el-table-column label="类型" prop="type" width="100">
            <template #default="scope">
              <span v-if="scope.row.name === 'data'">
                {{ dataNodeType }}
              </span>
              <span v-else>
                {{ scope.row.type }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description">
            <template #default="scope">
              <span
                v-if="scope.row.name === 'code' || scope.row.name === 'msg'"
              >
                {{ dataNodeType }}
              </span>
              <span v-else>
                {{ scope.row.description }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="示例值" prop="example" width="200" />
        </el-table>
        <h4>业务返回参数</h4>
        <ApiParamTable :data="docDetail.docInfoView.responseParams" />
      </div>
    </el-main>
  </el-container>
</template>
<style lang="scss" scoped>
h3 {
  margin: 20px 0;
}
h4 {
  margin: 10px 0;
}
</style>