api服务接口联调

lihua
Showing 10 changed files with 149 additions and 210 deletions
.env.development
.env.product
src/api/modules/dataService.ts
src/router/modules/dataService.ts
src/views/data_asset/registerCatalogCreate.vue
src/views/data_asset/registerCatalogDetail.vue
src/views/data_service/apiCreate.vue
src/views/data_service/apiManagement.vue
src/views/data_service/apiTest.vue
src/views/data_service/detail_serviceApi.vue
--- a/.env.development
View file @0142920
+++ b/.env.development
View file @0142920
@@ -98,7 +98,7 @@ VITE_APP_CIRCULATION = https://daop-lt-test.zgsjzc.com/
 VITE_APP_DATA_DELIVERY = https://daop-jgjf-test.zgsjzc.com/
 #数据服务接口地址
-VITE_APP_SERVICE_BASEURL = ms-daop-jgjf-data-open-service
+VITE_APP_SERVICE_BASEURL = ms-daop-trust-api-service
 # 本地访问地址
 # VITE_API_CIRCULATION_URL = http://localhost:9000/circulation
--- a/.env.product
View file @0142920
+++ b/.env.product
View file @0142920
@@ -84,7 +84,7 @@ VITE_API_MESSAGE = ms-daop-message-service
 VITE_APP_PERSONAL_URL = ms-daop-personel-service
 #数据服务接口地址
-VITE_APP_SERVICE_BASEURL = ms-daop-jgjf-data-open-service
+VITE_APP_SERVICE_BASEURL = ms-daop-trust-api-service
 #流通平台接口地址
 VITE_APP_CIRCULATION = https://sz-lt.zgsjzc.com/
--- a/src/api/modules/dataService.ts
View file @0142920
+++ b/src/api/modules/dataService.ts
View file @0142920
@@ -266,8 +266,8 @@ export const getSceneValidApiLabel = (isApiValid = false) => request({
 })
 /** 根据标签获取有效的api列表 */
-export const getValidApi = (sceneGuid) => request({ 
+export const getValidApi = () => request({ 
-    url: `${import.meta.env.VITE_APP_SERVICE_BASEURL}/api-base-info/list-valid?sceneGuid=${sceneGuid}`,
+    url: `${import.meta.env.VITE_APP_SERVICE_BASEURL}/api-base-info/activate-list`,
    method: 'get'
 })
--- a/src/router/modules/dataService.ts
View file @0142920
+++ b/src/router/modules/dataService.ts
View file @0142920
@@ -77,11 +77,16 @@ const routes: RouteRecordRaw[] = [
        name: 'apiDetail',
        component: () => import('@/views/data_service/detail_serviceApi.vue'),
        meta: {
-          title: '流程详情',
+          title: '详情-',
          sidebar: false,
          breadcrumb: false,
          cache: true,
          reuse: true
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.guid) {
+            to.meta.title = `详情-${to.query.apiName}`;
+          }
        }
      },
      {
--- a/src/views/data_asset/registerCatalogCreate.vue
View file @0142920
+++ b/src/views/data_asset/registerCatalogCreate.vue
View file @0142920
@@ -24,6 +24,10 @@ import {
  getTenantList,
  getRegisterCatalogProductList
 } from "@/api/modules/dataAsset";
+import {
+  getValidApi,
+  apiTypes
+} from "@/api/modules/dataService";
 import { ContentWrap } from '@/components/ContentWrap';
 import importTableField from "./importTableField.vue";
 import { useValidator } from '@/hooks/useValidator';
@@ -668,9 +672,11 @@ const productTableInfo = ref({
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "服务名称", field: "apiGuid", width: 180, required: true, columClass: 'edit-colum', type: 'edit' },
-    { label: "API类型", field: "apiType", width: 100 },
+    { label: "API类型", field: "apiType", width: 100, getName: (scope) => {
-    { label: "API地址", field: "requestUrl", width: 240 },
+      return scope.row.apiType && apiTypes.find(a => a.value == scope.row.apiType)?.label;
-    { label: "描述", field: "apiDescription", width: 240 },
+    } },
+    { label: "API地址", field: "requestUrl", minWidth: 240 },
+    { label: "描述", field: "apiDescription", width: 300 },
  ],
  editInfo: {
    apiGuid: {
@@ -850,6 +856,11 @@ onBeforeMount(() => {
          baseInfoFormRef.value.ruleFormRef.clearValidate(['sceneDescription', 'subjectDomain', 'coverageAreas', 'isPublicData', 'dataSources', 'propertyDescription', 'sceneLimit']);
        }, 0);
        assetDataTableInfo.value.data = detailInfo.value.damCatalogTableInfo;
+        productData.value = detailInfo.value.associationApiInfo?.map(d => {
+          d.apiGuid = d.guid;
+          return d;
+        }) || [];
+        productTableInfo.value.data = productData.value;
      } else {
        proxy.$ElMessage.error(res.msg);
        fullscreenLoading.value = false;
@@ -960,6 +971,15 @@ onBeforeMount(() => {
      proxy.$ElMessage.error(res.msg);
    }
  })
+  getValidApi().then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      apiList.value = res.data || [];
+      productTableInfo.value.editInfo.apiGuid.options = apiList.value;
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  })
 });
 const cancel = () => {
--- a/src/views/data_asset/registerCatalogDetail.vue
View file @0142920
+++ b/src/views/data_asset/registerCatalogDetail.vue
View file @0142920
@@ -19,6 +19,9 @@ import {
  getCertificateDetail,
  getRegisterCatalogDetailGuids
 } from "@/api/modules/dataAsset";
+import {
+  apiTypes
+} from "@/api/modules/dataService";
 import { changeNum } from '@/utils/common'
 import { ElMessage, ElMessageBox } from "element-plus";
 import { passFlowData, rejectFlowData, revokeFlowData, isMyFirstNode } from "@/api/modules/workFlowService";
@@ -193,7 +196,7 @@ const getDetailInfo = () => {
      detailInfo.value = data;
      publicDataProductsMainRSVO.value = detailInfo.value.publicDataProductsMainRSVO || {};
      //TODO. 返回服务包信息
-      productTableInfo.value.data = detailInfo.value.associationApiVO || [];
+      productTableInfo.value.data = detailInfo.value.associationApiInfo || [];
      //  detailInfo.value.damTypeName = damTypes.find(d => d.value == detailInfo.value.damType)?.label;
      detailInfo.value.dataSourcesName = dataSourcesList.find(d => d.value == detailInfo.value.dataSources)?.label;
      if (!isJSZQ.value) {
@@ -328,8 +331,10 @@ const productTableInfo = ref({
  height: '214px',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
-    { label: "服务名称", field: "apiGuid", width: 180 },
+    { label: "服务名称", field: "apiName", width: 180 },
-    { label: "API类型", field: "apiType", width: 100 },
+    { label: "API类型", field: "apiType", width: 100, getName: (scope) => {
+      return scope.row.apiType && apiTypes.find(a => a.value == scope.row.apiType)?.label;
+    } },
    { label: "API地址", field: "requestUrl", width: 240 },
    { label: "描述", field: "apiDescription", width: 240 },
  ],
--- a/src/views/data_service/apiCreate.vue
View file @0142920
+++ b/src/views/data_service/apiCreate.vue
View file @0142920
--- a/src/views/data_service/apiManagement.vue
View file @0142920
+++ b/src/views/data_service/apiManagement.vue
View file @0142920
@@ -66,21 +66,22 @@ const tableSearchItemList: any = ref([
    placeholder: 'API类型',
    options: apiTypes,
    clearable: true
-  }, {
+  }, 
-    type: 'select',
+  // {
-    label: '',
+  //   type: 'select',
-    field: 'approveState',
+  //   label: '',
-    default: '',
+  //   field: 'approveState',
-    placeholder: '全部状态',
+  //   default: '',
-    options: [
+  //   placeholder: '全部状态',
-      { label: '草稿中', value: 'N' },
+  //   options: [
-      { label: '审批中', value: 'A' },
+  //     { label: '草稿中', value: 'N' },
-      { label: '已通过', value: 'Y' },
+  //     { label: '审批中', value: 'A' },
-      { label: '已驳回', value: 'R' },
+  //     { label: '已通过', value: 'Y' },
-      { label: '已撤销', value: 'C' },
+  //     { label: '已驳回', value: 'R' },
-    ],
+  //     { label: '已撤销', value: 'C' },
-    clearable: true
+  //   ],
-  }
+  //   clearable: true
+  // }
 ]);
 const getTableData = () => {
@@ -163,14 +164,15 @@ const tableInfo = ref({
    },
    { label: "API请求路径", field: "requestUrl", width: TableColumnWidth.DESCRIPTION },
    {
-      label: '状态', field: 'apiState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center', isDisabled: (scope) => {
+      label: '状态', field: 'apiState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center'
-        if (scope.row.apiState == 1 && scope.row.bindingCount > 0) {//被授权的不能禁用。
+      // , isDisabled: (scope) => {
-          return true;
+      //   if (scope.row.apiState == 1) {//被授权的不能禁用。
-        }
+      //     return true;
-        return scope.row.approveState != 'Y';//正在审批中的不能停用。草稿中的不能启用。
+      //   }
-      }
+      //   return scope.row.approveState != 'Y';//正在审批中的不能停用。草稿中的不能启用。
+      // }
    },
-    { label: "审批状态", field: "approveState", type: "tag", width: TableColumnWidth.STATE, align: 'center' },
+    // { label: "审批状态", field: "approveState", type: "tag", width: TableColumnWidth.STATE, align: 'center' },
    { label: "API描述", field: "apiDescription", width: TableColumnWidth.DESCRIPTION },
    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
    { label: "修改时间", field: "updateTime", width: 170 },
@@ -185,12 +187,12 @@ const tableInfo = ref({
    label: "操作",
    type: "btn",
    isMore: false,
-    width: 200,
+    width: 180,
    btns: (scope) => {
      const { row } = scope;
      let list: any = [];
-      list.push({ label: "编辑", value: "edit", click: apiManageTableBtnMap.EDIT });
+      list.push({ label: "编辑", disabled: row.apiState == 1, value: "edit", click: apiManageTableBtnMap.EDIT });
-      list.push({ label: "删除", value: "del", click: apiManageTableBtnMap.DELETE });
+      list.push({ label: "删除", disabled: row.apiState == 1, value: "del", click: apiManageTableBtnMap.DELETE });
      list.push({ label: "详情", value: "detail", click: apiManageTableBtnMap.DETAIL });
      list.push({ label: "复制", value: "copy", click: apiManageTableBtnMap.COPY })
      return list;
@@ -266,7 +268,7 @@ const apiManageTableBtnMap = {
    let row = scope.row;
    router.push({
      name: 'apiDetail',
-      query: { guid: row.guid, type: 'detail' }
+      query: { guid: row.guid, apiName: row.apiName }
    });
    return;
    // const approveVO = row.approveVO || {};
@@ -343,7 +345,7 @@ const apiManageTableBtnMap = {
        if (res.code == proxy.$passCode) {
          APIDataPage.value.curr = 1;
          getTableData();
-          proxy.$ElMessage.success('删除该API提交成功');
+          proxy.$ElMessage.success('删除该API成功');
        } else {
          proxy.$ElMessage.error(res.msg);
        }
--- a/src/views/data_service/apiTest.vue
View file @0142920
+++ b/src/views/data_service/apiTest.vue
View file @0142920
@@ -5,37 +5,33 @@
 <script lang="ts" setup name="apiTest">
 import { ref } from 'vue';
 import {
-  getValidApiLabel,
+  getValidApi,
-  getSceneValidApiLabel,
-  getAllApi,
  testApiData,
  getApiDetail
 } from "@/api/modules/dataService";
 import { TableColumnWidth } from '@/utils/enum';
 import { useValidator } from '@/hooks/useValidator';
-import { progressProps } from 'element-plus';
 import { useRouter } from "vue-router";
 const { required } = useValidator();
 const router = useRouter();
 const { proxy } = getCurrentInstance() as any;
 /** API下拉列表。已发布的启用的API名称，选择后自动带出路径和请求参数。 */
-const apiLabelList = ref([]);
+const validApiList = ref([]);
-const processDTOSValue = ref([]);
 const apiFormRef = ref();
 /** 选择要测试的API. */
 const apiFormItems = ref([
  {
-    type: 'tree-select',
+    type: 'select',
    label: 'API名称',
    field: 'apiGuid',
    default: '',
    placeholder: '请选择',
-    options: [],
+    options: validApiList.value,
    col: 'path-w30',
    props: {
-      label: "sceneName",
+      label: "apiName",
      children: "children",
      value: 'guid',
      isLeaf: 'isLeaf'
@@ -86,7 +82,7 @@ const apiFormItems = ref([
 ]);
 const apiFormRules = ref({
-  apiGuid: [required('请选择数据产品')]
+  apiGuid: [required('请选择API')]
 });
 const requestParamsTableInfo = ref({
@@ -208,98 +204,19 @@ const resultFormItems = ref([{
 const getValidLabelPromise: any = ref(null);
 onBeforeMount(() => {
-  getValidLabelPromise.value = getSceneValidApiLabel().then((res: any) => {
+  getValidApi().then((res: any) => {
-    getValidLabelPromise.value = null;
    if (res.code == proxy.$passCode) {
-      apiLabelList.value = res.data || [];
+      validApiList.value = res.data || [];
+      apiFormItems.value[0].options = validApiList.value;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
-  // selectApiDetailInfo.value = {
-  //   requestUrl: 'baidu.com',
-  //   sceneName: '场景A',
-  //   sceneGuid: 'A',
-  //   processOrderNo: [
-  //     {
-  //       processOrderNo:1111,
-  //       guid:'02e799002ad64cd3b1bc5aa31b592eca',
-  //       requirementOrderName:'需求名称1',
-  //     },
-  //     {
-  //       processOrderNo:2222,
-  //       guid:'02e799002ad64cd3b1bc5aa31b592eca',
-  //       requirementOrderName:'需求名称2',
-  //     }
-  //   ]
-  // };
-  if(selectApiDetailInfo.value?.processOrderNo?.length>0){
-    selectApiDetailInfo.value.processOrderNo.forEach(item=>{
-      item.noName=item.processOrderNo + '' + item.requirementOrderName
-    })
-  }
-  console.log('selectApiDetailInfo',selectApiDetailInfo.value);
 })
-const apiNodeLoad = (node, resolve, item) => {
-  if (node.level === 0) {
-    if (getValidLabelPromise.value) {
-      getValidLabelPromise.value.then(() => {
-        resolve(apiLabelList.value);
-      });
-      return;
-    }
-    resolve(apiLabelList.value)
-  } else if (node.level === 1) {
-    getAllApi(node.data.guid).then((res: any) => {
-      if (res.code == proxy.$passCode) {
-        const apiData = res.data?.map(d => {
-          d.sceneName = d.apiName;
-          d.isLeaf = true;
-          return d;
-        }) ?? [];
-        resolve(apiData);
-      } else {
-        proxy.$ElMessage.error(res.msg);
-      }
-    });
-  }
-}
 const getApiDetailPromise: any = ref(null);
 const selectApiDetailInfo: any = ref({});////选择数据产品后带出来的信息
-const apiSelectNodeChange = (node, item) => {
-  if (!node.isLeaf) {
-    return true;
-  }
-  requestParamsTableInfo.value.loading = true;
-  getApiDetailPromise.value = getApiDetail(node.guid).then((res: any) => {
-    getApiDetailPromise.value = null;
-    requestParamsTableInfo.value.loading = false;
-    requestParamsTableInfo.value.data = [];
-    if (res.code == proxy.$passCode) {
-      let data = res.data;
-      selectApiDetailInfo.value = res.data || {};
-      if(data.processDTOS&&data.processDTOS.length>0){
-        let processDTOS=data.processDTOS || [];
-        if(processDTOS?.length>0){
-          processDTOS.forEach(obj=>{
-            obj.noName=obj.processOrderNo + '' + obj.requirementOrderName
-          })
-        }
-        processDTOSValue.value = processDTOS || [];
-      }
-    }
-    else {
-      proxy.$ElMessage.error(res.msg);
-    }
-  })
-}
 const apiSelectChange = (val) => {
  if (!val) {//清空值
    apiFormItems.value[0].default = val;
@@ -310,13 +227,13 @@ const apiSelectChange = (val) => {
  } else {
    resultFormItems.value[0].default = '';
    resultFormItems.value[1].default = '';
-    if (getApiDetailPromise.value) {
+    requestParamsTableInfo.value.loading = true;
-      getApiDetailPromise.value.then(() => {
+    getApiDetail(val).then((res: any) => {
+      requestParamsTableInfo.value.loading = false;
+      requestParamsTableInfo.value.data = [];
+      if (res.code == proxy.$passCode) {
+        selectApiDetailInfo.value = res.data || {};
        apiFormItems.value[0].default = val;
-        // apiFormItems.value[1].default = selectApiDetailInfo.value.requestUrl;
-        // apiFormItems.value[2].default = selectApiDetailInfo.value.sceneName;
-        // apiFormItems.value[3].default = selectApiDetailInfo.value.sceneGuid;
-        // apiFormItems.value[4].default = selectApiDetailInfo.value.processOrderNo;
        let apiConfigAccessRSVOS = selectApiDetailInfo.value.apiConfigAccessRSVOS || [];
        apiConfigAccessRSVOS.forEach(vo => {
          if (vo.paramType == 'REQ') {
@@ -325,30 +242,13 @@ const apiSelectChange = (val) => {
            requestParamsTableInfo.value.data.push({ ...vo, isConst: true, introductionValue: vo.defaultValue });
          }
        })
-        if (selectApiDetailInfo.value.authenticationType == 'N') {
-          defaultParamsTableInfo.value.data = defaultParamsData.value.concat([{
-            paramName: 'appKey',
-            dataType: '字符型',
-            isRequired: '是',
-            value: ''
-          }]);
-        } else {
        defaultParamsTableInfo.value.data = defaultParamsData.value;
      }
-      });
+      else {
-    } else {
+        proxy.$ElMessage.error(res.msg);
-      apiFormItems.value[0].default = val;
-      // apiFormItems.value[1].default = selectApiDetailInfo.value.requestUrl;
-      let apiConfigAccessRSVOS = selectApiDetailInfo.value.apiConfigAccessRSVOS || [];
-      apiConfigAccessRSVOS.forEach(vo => {
-        if (vo.paramType == 'REQ') {
-          requestParamsTableInfo.value.data.push({ ...vo, introductionValue: vo.defaultValue });
-        } else if (vo.paramType == 'CONSTANT') {
-          requestParamsTableInfo.value.data.push({ ...vo, isConst: true, introductionValue: vo.defaultValue });
      }
    })
  }
-  }
 }
 const startTestApiBtnLoading = ref(false);
@@ -400,15 +300,6 @@ const startTestApi = () => {
    }
  });
 }
-const seeDetail = (row) => {
-  console.log('row',row);
-  router.push({
-    name: 'processSheetDetail',
-    query: {
-      guid: row.guid,
-    }
-  });
-}
 </script>
@@ -417,25 +308,7 @@ const seeDetail = (row) => {
    <ContentWrap id="id-requestParams" title="请求参数" description="">
      <div>
        <Form ref="apiFormRef" :itemList="apiFormItems" formId="table-base-form" :rules="apiFormRules" col="col3"
-        @treeSelectLoad="apiNodeLoad" @treeSelectNodeChange="apiSelectNodeChange" @select-change="apiSelectChange" />
+          @select-change="apiSelectChange" />
-        <el-row :gutter="24" class="mb10" v-if="selectApiDetailInfo?.sceneName">
-          <el-col :span="24">
-            <span class="label">API路径：</span>
-            <!--  -->
-            <span class="value">{{ selectApiDetailInfo?.requestUrl||'-' }}</span>
-          </el-col>
-          <!-- <el-col :span="12">
-            <span class="label">场景名称：</span>
-            <span class="value">{{ selectApiDetailInfo?.sceneName }}</span>
-          </el-col>
-           -->
-        </el-row>
-        <!-- <el-row :gutter="24" class="mb10"  v-if="selectApiDetailInfo?.sceneName">
-          <el-col :span="24">
-            <span class="label">加工单号：</span>
-            <span v-for="(obj,idx) in processDTOSValue" @click="seeDetail(obj)" class="value cursor" style="color:#4fa1a4;padding-right:8px">{{ obj.noName }}{{ idx<processDTOSValue.length-1?'、':'' }}</span>
-          </el-col>
-        </el-row> -->
      </div>
      <Table :tableInfo="requestParamsTableInfo" class="mb10 mt8" />
@@ -462,10 +335,12 @@ const seeDetail = (row) => {
    width: calc(60% - 6px) !important;
    max-width: 720px;
  }
  .el-form-item.path-w30 {
    width: calc(30% - 6px) !important;
    max-width: 540px;
  }
  .el-form-item.path-w20 {
    width: calc(18% - 6px) !important;
    max-width: 540px;
@@ -490,6 +365,7 @@ const seeDetail = (row) => {
 .mb10 {
  margin-bottom: 10px;
 }
 .value {
  color: #212121;
 }
--- a/src/views/data_service/detail_serviceApi.vue
View file @0142920
+++ b/src/views/data_service/detail_serviceApi.vue
View file @0142920
 <script lang="ts" setup name="detail_serviceApi">
 import { ref } from "vue";
 import { TableColumnWidth } from '@/utils/enum';
-import { getCamundaDeploymentId } from "@/api/modules/workFlowService"
 import {
  getApiApprovalDetail,
  getApiDetail,
  apiTypes,
 } from "@/api/modules/dataService";
+import useUserStore from "@/store/modules/user";
+const userStore = useUserStore();
 const route = useRoute();
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
@@ -33,13 +35,13 @@ onBeforeMount(() => {
  if (route.query.guid) {
    getDetail();
  } else {
-    getCamundaDeploymentId('10023').then((res: any) => {
+    // getCamundaDeploymentId('10023').then((res: any) => {
-      if (res.code == proxy.$passCode) {
+    //   if (res.code == proxy.$passCode) {
-        deploymentId.value = res.data;
+    //     deploymentId.value = res.data;
-      } else {
+    //   } else {
-        proxy.$ElMessage.error(res.msg);
+    //     proxy.$ElMessage.error(res.msg);
-      }
+    //   }
-    })
+    // })
  }
 });
@@ -68,8 +70,8 @@ const getDetail = () => {
      let { approveVO } = data
      pageDetail.value = res.data;
      bizApproveVO.value = data.approveVO;
-      deploymentId.value = approveVO.camundaDeploymentId
+      deploymentId.value = approveVO?.camundaDeploymentId
-      processInstanceId.value = approveVO.camundaInstanceId
+      processInstanceId.value = approveVO?.camundaInstanceId
      process.value?.renderProcessNodes();
      detailInfo.value = data;
      apiType.value = data.apiType;
@@ -104,11 +106,11 @@ const getDetail = () => {
          constData.push(vo);
        }
      });
-      if(data.processDTOS&&data.processDTOS.length>0){
+      if (data.processDTOS && data.processDTOS.length > 0) {
-        let processDTOS=data.processDTOS || [];
+        let processDTOS = data.processDTOS || [];
-        if(processDTOS?.length>0){
+        if (processDTOS?.length > 0) {
-          processDTOS.forEach(obj=>{
+          processDTOS.forEach(obj => {
-            obj.noName=obj.processOrderNo + '' + obj.requirementOrderName
+            obj.noName = obj.processOrderNo + '' + obj.requirementOrderName
          })
        }
        processDTOSValue.value = processDTOS || [];
@@ -296,16 +298,24 @@ const sortParamsTableInfo = ref({
  loading: false
 });
+const cancel = () => {
+  userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== route.fullPath));
+  router.push({
+    path: '/data-service/api-management'
+  });
+}
 </script>
 <template>
-  <div class="content_main" v-loading="detailLoading">
+  <div class="page-main" v-loading="detailLoading">
-    <ContentWrap  title="基础信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true"
+    <div class="content_main">
-        class="mb16" @expand="(v) => baseInfoExpand = v">
+      <ContentWrap title="基础信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true" class="mb16"
+        @expand="(v) => baseInfoExpand = v">
        <div class="list_panel">
          <div class="list_item">
            <span class="item_label">API类型:</span>
-          <span class="item_value">{{ apiTypes.find(a => a.value == apiType)?.label || '-' }}</span>
+            <span class="item_value">{{apiTypes.find(a => a.value == apiType)?.label || '-'}}</span>
          </div>
          <div class="list_item">
            <span class="item_label">API名称:</span>
@@ -330,8 +340,8 @@ const sortParamsTableInfo = ref({
          <div class="list_item" v-if="detailInfo.authenticationType == 'N'">
            <span class="item_label">IP白名单:</span>
            <span class="item_value">
-            <ellipsis-tooltip :content="detailInfo.whiteIPAddrs?.length ? detailInfo.whiteIPAddrs.join(',') : '-'" class-name="w100f mr8-i"
+              <ellipsis-tooltip :content="detailInfo.whiteIPAddrs?.length ? detailInfo.whiteIPAddrs.join(',') : '-'"
-            :refName="'tooltipOver' + 'WhiteIPs'"></ellipsis-tooltip>
+                class-name="w100f mr8-i" :refName="'tooltipOver' + 'WhiteIPs'"></ellipsis-tooltip>
            </span>
          </div>
          <!-- 空白占位符 -->
@@ -378,7 +388,8 @@ const sortParamsTableInfo = ref({
            </div>
            <div class="list_item">
              <span class="item_label">后端超时:</span>
-            <span class="item_value">{{ detailInfo.backstageOvertime == null ? '-' : (detailInfo.backstageOvertime + 'ms') }}</span>
+              <span class="item_value">{{ detailInfo.backstageOvertime == null ? '-' : (detailInfo.backstageOvertime +
+                'ms') }}</span>
            </div>
            <div class="list_item is_block">
              <span class="item_label">后台服务PATH:</span>
@@ -391,7 +402,8 @@ const sortParamsTableInfo = ref({
      </ContentWrap>
      <template v-if="inputParamsTableInfo.data.length">
-      <div class="list_item" style="font-weight: 500;color: var(--el-color-regular);margin: 8px 0px;">{{ apiType == '3' ? '请求参数' : '入参定义' }}</div>
+        <div class="list_item" style="font-weight: 500;color: var(--el-color-regular);margin: 8px 0px;">{{ apiType ==
+          '3' ? '请求参数' : '入参定义' }}</div>
        <Table :tableInfo="inputParamsTableInfo" />
      </template>
      <template v-if="requestParamsTableInfo.data.length">
@@ -420,19 +432,28 @@ const sortParamsTableInfo = ref({
        <div class="list_item" style="font-weight: 500;color: var(--el-color-regular);margin: 8px 0px;">查询sql</div>
        <el-input v-model.trim="sql" :rows="10" type="textarea" :readonly="true" />
      </template>
-    <ContentWrap title="流程审批" v-if="detailInfo.approveVO && detailInfo.isApprove != 'N'" description="" :isExpand="flowExpand" :expand-swicth="true" 
+      <!-- <ContentWrap title="流程审批" v-if="detailInfo.approveVO && detailInfo.isApprove != 'N'" description="" :isExpand="flowExpand" :expand-swicth="true" 
      class="mb16" @expand="(v) => flowExpand = v">
        <ApprovalProcess ref="process" v-if="deploymentId" :deploymentId="deploymentId" :processInstanceId="processInstanceId">
        </ApprovalProcess>
-    </ContentWrap>
+    </ContentWrap> -->
-    <FlowBtnGroup pageType="detail" :approveVO="bizApproveVO" @refreshPage="getDetail"></FlowBtnGroup>
    </div>
+    <div class="tool_btns">
+      <div class="btns">
+        <el-button :plain="true" @click="cancel">{{ '关闭' }}</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 <style scoped lang="scss">
+.page-main {
+  height: 100%;
+}
 .content_main {
-  height: calc(100% - 40px);
+  height: calc(100% - 44px);
  padding: 16px;
  overflow: hidden auto;
  position: sticky;
@@ -502,4 +523,14 @@ const sortParamsTableInfo = ref({
    min-height: 200px;
  }
 }
+.tool_btns {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  border-top: 1px solid var(--el-border-color-regular);
+}
 </style>
\ No newline at end of file