我的调用

src/views/dataService/serviceMarket/myCall/apiTest/index.vue

+<template>
+  <PageWrapper dense content-full-height header-sticky>
+    <template #footer>
+      <BasicTable @register="queryTable">
+        <template #configValue="{ text, record }">
+          <Input v-model:value="record.configValue" />
+        </template>
+      </BasicTable>
+      <a-button type="primary">测试</a-button>
+      <Tabs v-model:activeKey="activeKey">
+        <TabPane key="1" tab="请求报文" />
+        <TabPane key="2" tab="请求代码">
+          <div class="flex" style="margin: 15px 0">
+            <div style="width: 4px; margin: 4px 0; background-color: #128afa"></div>
+            <div style="margin-left: 6px"> 动态路由地址 </div>
+          </div>
+          <Textarea :rows="6" v-model:value="address" />
+          <div class="flex" style="margin: 25px 0 15px 0">
+            <span>返回结果源码</span>
+            <BasicHelp text="返回结果源码" />
+          </div>
+          <Textarea :rows="6" v-model:value="resultTxt" />
+        </TabPane>
+      </Tabs>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
+  import BasicTable from '../../../../../components/Table/src/BasicTable.vue';
+  import { Input, Tabs, TabPane, Textarea } from 'ant-design-vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { ref } from 'vue';
+  import { testTableColumn } from '@/views/dataService/serviceMarket/myCall/apiTest/test.data';
+  import { testTableData } from '@/views/dataService/serviceMarket/myCall/apiTest/testData';
+  import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
+
+  const address = 'curl -X POST‘http://node322:28143/employee′-H\'token:\n' +
+    '7406056a00d65806200fe299d573a49b6bac08938e4ec73143d48caf110723bbc6d0e7efac9e01a2abbadada175b3c6ca3b251fd76cbbefed08f234998b5f7ac\'-H\'Content-Type:\n' +
+    'application/json\'-H\'Accept:*/*’-d\'("departmentID":"1")}"';
+  const resultTxt = '{\n' +
+    '"success":true,\n' +
+    '"code":200，\n' +
+    '"message": "success"，\n' +
+    '“data":{\n' +
+    '"valueSize": 70,\n' +
+    '"columnNames":[\n' +
+    '"LastName"\n' +
+    '"FirstName"\n' +
+    '}\n' +
+    '}';
+  const activeKey = ref();
+  const [queryTable] = useTable({
+    title: '请求参数',
+    scroll: { y: 200 },
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: testTableData.length,
+        code: '',
+        message: '',
+        data: testTableData,
+      };
+      return { ...response };
+    },
+    columns: testTableColumn,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    pagination: false,
+    rowKey: 'id',
+  } as BasicTableProps);
+</script>
+
+<style scoped></style>

src/views/dataService/serviceMarket/myCall/apiTest/test.data.ts

+import { BasicColumn } from '@/components/Table';
+
+export const testTableColumn: BasicColumn[] = [
+  {
+    title: '参数code',
+    dataIndex: 'code',
+  },
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'type',
+  },
+  {
+    title: '注释',
+    dataIndex: 'remark',
+  },
+  {
+    title: '是否必填',
+    dataIndex: 'required',
+  },
+  {
+    title: '参数值',
+    dataIndex: 'configValue',
+    slots: { customRender: 'configValue' },
+  },
+];

src/views/dataService/serviceMarket/myCall/apiTest/testData.ts

+export const testTableData = [
+  {
+    code: 'departmentID',
+    name: 'departmentID',
+    type: 'String',
+    remark: '',
+    required: '否',
+    configValue: 1,
+  },
+];

src/views/dataService/serviceMarket/myCall/detail/detail.data.ts

@@ -66,13 +66,13 @@ export const detailPageColumn: BasicColumn[] = [
 ];
 export const detailReturnColumn: BasicColumn[] = [
   {
-    title: '参数code',
-    dataIndex: 'code',
+    title: '列名',
+    dataIndex: 'name',
     width: 150,
   },
   {
-    title: '参数名称',
-    dataIndex: 'name',
+    title: '参数code',
+    dataIndex: 'code',
     width: 150,
   },
   {
@@ -81,3 +81,15 @@ export const detailReturnColumn: BasicColumn[] = [
     width: 150,
   },
 ];
+export const detailOrderColumn: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'field',
+    width: 150,
+  },
+  {
+    title: '排序方式',
+    dataIndex: 'order',
+    width: 150,
+  },
+];

src/views/dataService/serviceMarket/myCall/detail/index.vue

@@ -9,12 +9,15 @@
         <Descriptions.Item label="API模式"> 向导模式 </Descriptions.Item>
         <Descriptions.Item label="数据源"> Kundb2.1.2-yl </Descriptions.Item>
         <Descriptions.Item label="数据库"> bm_catalog1 </Descriptions.Item>
-        <Descriptions.Item label="数据库"> employee </Descriptions.Item>
+        <Descriptions.Item label="数据表"> employee </Descriptions.Item>
       </Descriptions>
       <Divider />
+      <div class="flex" style="gap: 20px; flex-direction: column">
         <BasicTable @register="queryTable" />
         <BasicTable @register="pageTable" />
         <BasicTable @register="returnTable" />
+        <BasicTable @register="orderTable" />
+      </div>
     </template>
     <AddModel @register="addModel" />
   </PageWrapper>
@@ -29,6 +32,7 @@
   import AddModel from '@/views/dataService/serviceMarket/serviceSearch/apiDetail/addModel.vue';
   import { useModal } from '@/components/Modal';
   import {
+    detailOrderColumn,
     detailPageColumn,
     detailQueryColumn,
     detailReturnColumn,
@@ -106,6 +110,24 @@
     showIndexColumn: false,
     // striped: false,
   });
+  const [orderTable] = useTable({
+    title: '排序参数',
+    // 定高
+    scroll: { y: 150 },
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response };
+    },
+    columns: detailOrderColumn,
+    pagination: false,
+    showIndexColumn: false,
+    // striped: false,
+  });
 </script>
 
 <style scoped></style>

src/views/dataService/serviceMarket/myCall/index.vue

@@ -2,25 +2,42 @@
   <PageWrapper title="我的调用" contentBackground headerSticky>
     <template #footer>
       <Descriptions :column="2">
-        <Descriptions.Item label="账号"> admin </Descriptions.Item>
-        <Descriptions.Item label="用户名称"> admin </Descriptions.Item>
-        <Descriptions.Item label="用户token" :span="2">
+        <Descriptions.Item>
+          <span class="item-label">账号:</span>
+          admin
+        </Descriptions.Item>
+        <Descriptions.Item> <span class="item-label">用户名称:</span> admin </Descriptions.Item>
+        <Descriptions.Item :span="2">
+          <span class="item-label">用户token:</span>
           <span>{{ token }}</span>
           <CopyOutlined @click="copyText" style="margin-left: 10px" />
-          <span v-if="copySuccess" style="color: #40c397">文本已复制！</span>
+          <span v-if="copySuccess" style="color: #40c397">复制成功！</span>
         </Descriptions.Item>
         <Descriptions.Item :span="2">
           <span style="color: #979dae; margin-left: 76.2px"
             >一个用户只有一个token，token用于识别用户身份和安全性要求</span
           >
         </Descriptions.Item>
-        <Descriptions.Item label="用户密钥" :span="2"> transwarp1234567 </Descriptions.Item>
+        <Descriptions.Item :span="2">
+          <span class="item-label">用户密钥:</span>
+          transwarp1234567
+        </Descriptions.Item>
       </Descriptions>
       <BasicTable @register="callTable">
         <template #toolbar>
-          <a-button type="link" :disabled="getRowSelection().selectedRowKeys <= 0"
+          <div class="flex-1 flex justify-between">
+            <Input style="width: 200px" placeholder="输入关键字搜索" v-model:value="searchValue">
+              <template #suffix>
+                <SearchOutlined />
+              </template>
+            </Input>
+            <a-button
+              type="link"
+              :disabled="getRowSelection().selectedRowKeys <= 0"
+              @click="handleDownload"
               ><FileMarkdownOutlined style="font-size: 18px" />下载API Doc</a-button
             >
+          </div>
         </template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
@@ -39,6 +56,7 @@
                 {
                   // api
                   icon: 'ant-design:api-outlined',
+                  onClick: handleApi.bind(null, record),
                 },
               ]"
             />
@@ -90,8 +108,13 @@
   import { useRoute, useRouter } from 'vue-router';
   import { useModal } from '@/components/Modal';
   import AddModel from '@/views/dataService/serviceMarket/serviceSearch/apiDetail/addModel.vue';
-  import BasicTable from '@/components/Table/src/BasicTable.vue';
-  import { BasicColumn, useTable, TableAction } from '@/components/Table';
+  import {
+    BasicColumn,
+    useTable,
+    TableAction,
+    BasicTableProps,
+    BasicTable,
+  } from '@/components/Table';
   import { entityData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
   import { entityColumns } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/comparison.data';
   import {
@@ -99,7 +122,9 @@
     callTableColumn,
   } from '@/views/dataService/serviceMarket/myCall/call.data';
   import { callData } from '@/views/dataService/serviceMarket/myCall/callData';
+  import {useMessage} from "@/hooks/web/useMessage";
 
+  const searchValue = ref();
   const router = useRouter();
   const token = ref<string>(
     'fc68b6929ceb4aad5035d8805cac466716a7edf6f848c2b2e26dfcla47ea4a1241b640016b91eb90bfc0d57517cd7fa3b251fd76cbbefed08f234998b5f7ac',
@@ -125,6 +150,11 @@
       query: record,
     });
   }
+  function handleApi() {
+    router.push({
+      path: '/dataService/serviceMarket/myCall/apiTest',
+    });
+  }
   function handleMonitor(record) {
     router.push({
       path: '/dataService/serviceMonitor/monitorInfo',
@@ -146,15 +176,15 @@
       };
       return { ...response };
     },
-    formConfig: {
-      labelWidth: 80,
-      schemas: callFormSchema,
-      autoSubmitOnEnter: true,
-    },
+    // formConfig: {
+    //   labelWidth: 80,
+    //   schemas: callFormSchema,
+    //   autoSubmitOnEnter: true,
+    // },
     rowKey: 'businessId',
     // 列
     columns: callTableColumn,
-    useSearchForm: true,
+    useSearchForm: false,
     showIndexColumn: false,
     showTableSetting: false,
     rowSelection: true,
@@ -165,7 +195,15 @@
       title: '操作',
       dataIndex: 'action',
     } as BasicColumn,
-  });
+  } as BasicTableProps);
+  const { createMessage } = useMessage();
+  function handleDownload() {
+    createMessage.success('下载成功！');
+  }
 </script>
 
-<style scoped></style>
+<style scoped>
+  .item-label {
+    width: 76.2px;
+  }
+</style>