5.0

sop-website/sop-website-frontend/src/api/doc.ts

@@ -3,8 +3,9 @@ import type { Result } from "@/model";
 
 // 后端请求接口
 const apiUrl: any = createUrl({
-  listApp: "/website/listDocApp",
-  listDocTree: "/doc/info/tree"
+  listApp: "/website/docapp/list",
+  listDocTree: "/website/docinfo/tree",
+  getDocDetail: "/website/docinfo/detail"
 });
 
 interface DocApp {
@@ -28,5 +29,12 @@ export const api: any = {
    */
   listDocTree(params: object) {
     return http.get<Result<Array<any>>, any>(apiUrl.listDocTree, { params });
+  },
+  /**
+   * 查询文档详情
+   * @param data
+   */
+  getDocDetail(params: object) {
+    return http.get<Result<any>, any>(apiUrl.getDocDetail, { params });
   }
 };

sop-website/sop-website-frontend/src/components/ApiParamTable/index.ts

@@ -1,12 +1,6 @@
 import apiParamTable from "@/components/ApiParamTable/index.vue";
 import { withInstall } from "@pureadmin/utils";
 
-export function hasNoParentAndChildren(row) {
-  const children = row.children;
-  const noChildren = !children || children.length === 0;
-  return !row.parentId && noChildren;
-}
-
 const ApiParamTable = withInstall(apiParamTable);
 
 export { ApiParamTable };

sop-website/sop-website-frontend/src/style/index.scss

@@ -28,3 +28,14 @@
 .danger {
   color: #F56C6C;
 }
+.doc-view {
+  .api-description {
+    font-size: 14px;
+    a {
+      color: #406eeb;
+    }
+  }
+  .is-bordered-label {
+    width: 200px !important;
+  }
+}

sop-website/sop-website-frontend/src/utils/http/index.ts

@@ -13,6 +13,7 @@ import { stringify } from "qs";
 import NProgress from "../progress";
 import { getToken, formatToken } from "@/utils/auth";
 import { useUserStoreHook } from "@/store/modules/user";
+import { ElMessage } from "element-plus";
 
 export const baseUrl = (url: string) => {
   if (!url) {
@@ -181,8 +182,13 @@ class PureHttp {
     return new Promise((resolve, reject) => {
       PureHttp.axiosInstance
         .request(config)
-        .then((response: undefined) => {
-          resolve(response);
+        .then((response: any) => {
+          if (response.code && response.code !== "0") {
+            const msg = response.msg || "后台出错,请查看日志";
+            ElMessage.error(msg);
+          } else {
+            resolve(response);
+          }
         })
         .catch(error => {
           reject(error);

sop-website/sop-website-frontend/src/views/doc/api/index.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { api as docApi } from "@/api/doc";
 
 export const defaultActive = ref("overview.md");
@@ -8,13 +8,42 @@ export const contentShow = ref(false);
 export const openMenu = ref([]);
 export const apiModules = ref([]);
 export const dataNodeType = ref("Object");
-export const api = ref<any>({});
 export const requestParamsExample = ref({});
 export const responseParamsExample = ref({});
 
 export const docAppId = ref(0);
 export const docAppList = ref([]);
 export const docTree = ref([]);
+export const docDetail = ref({
+  docInfoView: {
+    url: "",
+    version: "",
+    docName: "",
+    description: "",
+    remark: "",
+    requestParams: [],
+    responseParams: []
+  },
+  docInfoConfig: {
+    openProdUrl: "",
+    openSandboxUrl: ""
+  }
+});
+
+export const showUrl = computed(() => {
+  return (
+    docDetail.value.docInfoConfig?.openProdUrl?.length > 0 &&
+    docDetail.value.docInfoConfig?.openSandboxUrl?.length > 0
+  );
+});
+
+export const showProdUrl = computed(() => {
+  return docDetail.value.docInfoConfig?.openProdUrl?.length > 0;
+});
+
+export const showSandBoxUrl = computed(() => {
+  return docDetail.value.docInfoConfig?.openSandboxUrl?.length > 0;
+});
 
 /*
     参数	            类型	    是否必填	    最大长度	    描述	            示例值
@@ -43,8 +72,8 @@ export const commonParams = ref([
     type: "String",
     maxLength: 128,
     required: 1,
-    description: "版本号",
-    example: "1.0"
+    description: "接口名称",
+    example: "shop.order.create"
   },
   {
     name: "format",
@@ -92,7 +121,7 @@ export const commonParams = ref([
     maxLength: 3,
     required: 1,
     description: "调用的接口版本，固定为：1.0",
-    example: "1.0"
+    example: "xxxx"
   },
   {
     name: "app_auth_token",
@@ -100,7 +129,7 @@ export const commonParams = ref([
     maxLength: 40,
     required: 0,
     description: "详见应用授权概述",
-    example: "1.0"
+    example: "xxxx"
   },
   {
     name: "biz_content",
@@ -163,7 +192,15 @@ export function handleChangeDocApp(id) {
 }
 
 export function handleNodeClick(node) {
-  console.log(node);
+  if (node.isFolder === 1) {
+    return;
+  }
+  const params = {
+    id: node.id
+  };
+  docApi.getDocDetail(params).then(resp => {
+    docDetail.value = resp.data;
+  });
 }
 
 function loadDocApp() {

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

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import {
-  openMenu,
-  defaultActive,
-  apiModules,
   contentShow,
   content,
-  api,
+  docDetail,
   commonParams,
-  activeIndex,
-  requestParamsExample,
-  responseParamsExample,
   dataNodeType,
   resultData,
-  onMenuClick,
   handleChangeDocApp,
   docAppId,
   docAppList,
   docTree,
-  handleNodeClick
+  handleNodeClick,
+  showUrl,
+  showProdUrl,
+  showSandBoxUrl
 } from "./index";
 import { ApiParamTable } from "@/components/ApiParamTable";
 import MavonEditor from "mavon-editor";
@@ -27,7 +23,7 @@ const defaultProps = {
 };
 </script>
 <template>
-  <el-container>
+  <el-container class="doc-view">
     <el-aside width="300px">
       <el-select
         v-show="docAppId > 0"
@@ -43,14 +39,20 @@ const defaultProps = {
           :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: 20px"
+        style="margin-top: 10px"
         @node-click="handleNodeClick"
       />
     </el-aside>
-    <el-main style="padding-top: 0">
+    <el-main
+      v-show="docDetail?.docInfoView?.url?.length > 0"
+      style="padding-top: 0"
+    >
       <div v-show="contentShow">
         <MavonEditor
           v-model="content"
@@ -62,11 +64,44 @@ const defaultProps = {
         />
       </div>
       <div v-show="!contentShow">
-        <h3>{{ api.description }}</h3>
-        <div v-if="api.remark" class="api-remark">
-          {{ api.remark }}
+        <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>
-        <div>接口名：{{ api.name }} 版本号：{{ api.version }}</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" />
@@ -93,11 +128,7 @@ const defaultProps = {
           <el-table-column prop="example" label="示例值" width="200" />
         </el-table>
         <h3>业务请求参数</h3>
-        <api-param-table :data="api.requestParams" />
-        <h4>请求示例</h4>
-        <pre class="normal-text">
-          {{ JSON.stringify(requestParamsExample, null, 4) }}
-        </pre>
+        <ApiParamTable :data="docDetail.docInfoView.requestParams" />
         <h3>公共返回参数</h3>
         <el-table :data="resultData" border highlight-current-row>
           <el-table-column label="名称" prop="name" width="200" />
@@ -126,11 +157,7 @@ const defaultProps = {
           <el-table-column label="示例值" prop="example" width="200" />
         </el-table>
         <h4>业务返回参数</h4>
-        <ApiParamTable :data="api.responseParams" />
-        <h4>返回示例</h4>
-        <pre class="normal-text">
-          {{ JSON.stringify(responseParamsExample, null, 4) }}
-        </pre>
+        <ApiParamTable :data="docDetail.docInfoView.responseParams" />
       </div>
     </el-main>
   </el-container>