服务市场-我的调用

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

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+export const callFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    colProps: { lg: 4, md: 4 },
+  },
+];
+export const callTableColumn: BasicColumn[] = [
+  {
+    title: 'API名称',
+    dataIndex: 'name',
+    width: 150,
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 150,
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'num',
+    width: 150,
+  },
+  {
+    title: '调用成功次数',
+    dataIndex: 'successNum',
+    width: 150,
+  },
+  {
+    title: '调用失败次数',
+    dataIndex: 'fillNum',
+    width: 150,
+  },
+  {
+    title: '调用状态',
+    dataIndex: 'status',
+    width: 150,
+    slots: { customRender: 'status' },
+  },
+  {
+    title: '调用开始时间',
+    dataIndex: 'startTime',
+    width: 150,
+  },
+  {
+    title: '调用结束时间',
+    dataIndex: 'endTime',
+    width: 150,
+  },
+];

src/views/dataService/serviceMarket/myCall/callData.ts

+export const callData = [
+  {
+    businessId: 1,
+    name: 'test1',
+    path: 'test1',
+    num: '0',
+    successNum: '0',
+    fillNum: '0',
+    status: '调用中',
+    startTime: '2023-12-05 19:21:33',
+    endTime: '-',
+  },
+  {
+    businessId: 2,
+    name: 'test_doc',
+    path: 'test_xw/test_doc',
+    num: '0',
+    successNum: '0',
+    fillNum: '0',
+    status: '调用中',
+    startTime: '2023-12-06 11:21:22',
+    endTime: '-',
+  },
+  {
+    businessId: 3,
+    name: 'test_guide_001',
+    path: 'test_mc/test_guide_001',
+    num: '0',
+    successNum: '0',
+    fillNum: '0',
+    status: '调用中',
+    startTime: '2023-12-06 15:26:33',
+    endTime: '-',
+  },
+  {
+    businessId: 4,
+    name: 'SQL API',
+    path: '验收/SQL API',
+    num: '0',
+    successNum: '0',
+    fillNum: '0',
+    status: '调用中',
+    startTime: '2023-12-05 18:26:22',
+    endTime: '-',
+  },
+];

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

+import {BasicColumn} from "@/components/Table";
+
+export const detailQueryColumn: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '参数code',
+    dataIndex: 'code',
+    width: 150,
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'type',
+    width: 150,
+  },
+  {
+    title: '注释',
+    dataIndex: 'remark',
+    width: 150,
+  },
+  {
+    title: '是否必填',
+    dataIndex: 'required',
+    width: 150,
+  },
+  {
+    title: '默认值',
+    dataIndex: 'default',
+    width: 150,
+  },
+  {
+    title: '示例值',
+    dataIndex: 'value',
+    width: 150,
+  },
+];
+export const detailPageColumn: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '参数code',
+    dataIndex: 'code',
+    width: 150,
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'type',
+    width: 150,
+  },
+  {
+    title: '是否必填',
+    dataIndex: 'required',
+    width: 150,
+  },
+  {
+    title: '默认值',
+    dataIndex: 'default',
+    width: 150,
+  },
+];
+export const detailReturnColumn: BasicColumn[] = [
+  {
+    title: '参数code',
+    dataIndex: 'code',
+    width: 150,
+  },
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '注释',
+    dataIndex: 'remark',
+    width: 150,
+  },
+];

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

+export const detailQueryData = [
+  {
+    name: 'departmentID',
+    code: 'departmentID',
+    type: 'smallint',
+    remark: null,
+    required: '否',
+    default: '1',
+    value: null,
+  },
+];
+export const detailPageData = [
+  {
+    code: 'midgard_offset',
+    name: 'midgard_offset',
+    type: 'INT',
+    required: '是',
+    default: null,
+  },
+  {
+    code: 'midgard_size',
+    name: 'midgard_size',
+    type: 'INT',
+    required: '否',
+    default: 10,
+  },
+];
+export const detailReturnData = [
+  {
+    code: 'ss_sold_date_sk',
+    name: 'ss_sold_date_sk',
+    remark: null,
+  },
+];

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

+<template>
+  <PageWrapper :title="title" content-background header-sticky>
+    <template #extra>
+      <a-button type="primary" @click="handleBasic">基本信息</a-button>
+    </template>
+    <template #footer>
+      <Divider />
+      <Descriptions :column="4">
+        <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>
+      <Divider />
+      <BasicTable @register="queryTable" />
+      <BasicTable @register="pageTable" />
+      <BasicTable @register="returnTable" />
+    </template>
+    <AddModel @register="addModel" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { Divider, Descriptions } from 'ant-design-vue';
+  import PageWrapper from '../../../../../components/Page/src/PageWrapper.vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { useRoute, useRouter } from 'vue-router';
+  import {
+    docPageColumn,
+    docQueryColumn,
+    docReturnColumn,
+  } from '@/views/dataService/serviceMarket/serviceSearch/apiDoc/doc.data';
+  import {
+    docPageData,
+    docQueryData,
+  } from '@/views/dataService/serviceMarket/serviceSearch/apiDoc/docData';
+  import AddModel from '@/views/dataService/serviceMarket/serviceSearch/apiDetail/addModel.vue';
+  import { useModal } from '@/components/Modal';
+  import {
+    detailPageColumn,
+    detailQueryColumn,
+    detailReturnColumn,
+  } from '@/views/dataService/serviceMarket/myCall/detail/detail.data';
+  import {
+    detailPageData,
+    detailQueryData,
+    detailReturnData,
+  } from '@/views/dataService/serviceMarket/myCall/detail/detailData';
+
+  const [addModel, { openModal: openAddModel }] = useModal();
+  const route = useRoute();
+  const router = useRouter();
+  const title = route.query.name;
+  function handleBasic() {
+    router.push({
+      path: '/dataService/serviceMarket/serviceSearch/apiDetail',
+      query: {
+        title: route.query.name,
+        type: 'myCall',
+      },
+    });
+  }
+  const [queryTable, {}] = useTable({
+    title: '请求参数',
+    // 定高
+    scroll: { y: 150 },
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        code: '',
+        message: '',
+        data: detailQueryData,
+      };
+      return { ...response };
+    },
+    columns: detailQueryColumn,
+    pagination: false,
+    showIndexColumn: false,
+    // striped: false,
+  });
+  const [pageTable, {}] = useTable({
+    title: '分页参数',
+    // 定高
+    scroll: { y: 150 },
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        code: '',
+        message: '',
+        data: detailPageData,
+      };
+      return { ...response };
+    },
+    columns: detailPageColumn,
+    pagination: false,
+    showIndexColumn: false,
+    // striped: false,
+  });
+  const [returnTable, {}] = useTable({
+    title: '返回参数',
+    // 定高
+    scroll: { y: 150 },
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        code: '',
+        message: '',
+        data: detailReturnData,
+      };
+      return { ...response };
+    },
+    columns: detailReturnColumn,
+    pagination: false,
+    showIndexColumn: false,
+    // striped: false,
+  });
+</script>
+
+<style scoped></style>

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

+<template>
+  <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">
+          <span
+            >fc68b6929ceb4aad5035d8805cac466716a7edf6f848c2b2e26dfcla47ea4a1241b640016b91eb90bfc0d57517cd7fa3b251fd76cbbefed08f234998b5f7ac</span
+          >
+          <CopyOutlined style="margin-left: 10px" />
+        </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>
+      <BasicTable @register="callTable">
+        <template #toolbar>
+          <a-button type="link" :disabled="getRowSelection().selectedRowKeys <= 0"
+            ><FileMarkdownOutlined style="font-size: 18px" />下载API Doc</a-button
+          >
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // 分析
+                  icon: 'ant-design:line-chart-outlined',
+                  onClick: handleMonitor.bind(null, record),
+                },
+                {
+                  // 详情
+                  icon: 'ant-design:file-search-outlined',
+                  onClick: handleDetail.bind(null, record),
+                },
+                {
+                  // api
+                  icon: 'ant-design:api-outlined',
+                },
+              ]"
+            />
+          </template>
+        </template>
+        <template #name="{ text, record }">
+          <ApiOutlined style="color: #6c7ffb" />{{ text }}
+        </template>
+        <template #status="{ text, record }">
+          <CheckCircleOutlined style="color: #42c397" />{{ text }}
+        </template>
+      </BasicTable>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import Icon from '@/components/Icon/Icon.vue';
+  import {
+    Radio,
+    Select,
+    Switch,
+    Input,
+    Dropdown,
+    Menu,
+    MenuItem,
+    Card,
+    Row,
+    Col,
+    List,
+    Descriptions,
+  } from 'ant-design-vue';
+  import { PageWrapper } from '@/components/Page';
+  import {
+    SearchOutlined,
+    DownOutlined,
+    ApiOutlined,
+    AppstoreOutlined,
+    CopyOutlined,
+    FileMarkdownOutlined,
+    CheckCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { BasicTree } from '@/components/Tree';
+  import BasicForm from '../../../../components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { cardListData, searchTreeData } from './searchData';
+  import { ref } from 'vue';
+  import { searchFormSchema } from '@/views/dataService/serviceMarket/serviceSearch/search.data';
+  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 { entityData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+  import { entityColumns } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/comparison.data';
+  import {
+    callFormSchema,
+    callTableColumn,
+  } from '@/views/dataService/serviceMarket/myCall/call.data';
+  import { callData } from '@/views/dataService/serviceMarket/myCall/callData';
+
+  const router = useRouter();
+  function handleDetail(record) {
+    router.push({
+      path: '/dataService/serviceMarket/myCall/detail',
+      query: record,
+    });
+  }
+  function handleMonitor(record) {
+    router.push({
+      path: '/dataService/serviceMonitor/monitorInfo',
+      query: record,
+    });
+  }
+  const [callTable, { getRowSelection }] = useTable({
+    title: '',
+    // 数据
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: callData.length,
+        code: '',
+        message: '',
+        data: callData,
+      };
+      return { ...response };
+    },
+    formConfig: {
+      labelWidth: 80,
+      schemas: callFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: callTableColumn,
+    useSearchForm: true,
+    showIndexColumn: false,
+    showTableSetting: false,
+    rowSelection: true,
+    // bordered: true,
+    // pagination: false,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    } as BasicColumn,
+  });
+</script>
+
+<style scoped></style>

src/views/dataService/serviceMarket/serviceSearch/apiDetail/index.vue

@@ -3,7 +3,7 @@
     <template #extra>
       <a-button type="primary">基本信息</a-button>
       <a-button type="primary" @click="handleApiDoc">查看API Doc</a-button>
-      <a-button type="primary" @click="handleAdd">申请调用</a-button>
+      <a-button type="primary" @click="handleAdd" v-if="type !== 'myCall'">申请调用</a-button>
     </template>
     <template #footer>
       <BasicTable @register="register" />
@@ -25,14 +25,24 @@
   const route = useRoute();
   const router = useRouter();
   const title = route.query.title; // 模态框
+  const type = route.query.type;
   const [addModel, { openModal: openAddModel }] = useModal();
   function handleApiDoc() {
-    router.push({
-      path: '/dataService/serviceMarket/serviceSearch/apiDoc',
-      query: {
-        title: route.query.title,
-      },
-    });
+    if (type === 'myCall') {
+      router.push({
+        path: '/dataService/serviceMarket/myCall/detail',
+        query: {
+          title: route.query.title,
+        },
+      });
+    } else {
+      router.push({
+        path: '/dataService/serviceMarket/serviceSearch/apiDoc',
+        query: {
+          title: route.query.title,
+        },
+      });
+    }
   }
   function handleAdd() {
     openAddModel(true, {

src/views/dataService/serviceMarket/serviceSearch/apiDoc/index.vue

-89+6++++++88888888888
 <template>
   <PageWrapper :title="title" content-background header-sticky>
     <template #extra>