网关配置-域名管理-api弹窗

网关配置-网关拓扑-插图

src/views/dataService/serviceManage/gatewayConfig/domainName/apiRouter.vue

+<template>
+  <BasicModal  width="80%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" >
+<!--    <BasicForm @register="registerForm" />-->
+    <page-wrapper contentClass="flex">
+    <basic-table class="w-1/4 xl:w-1/5" @register="registerTable0"></basic-table>
+    <div class="w-3/4 xl:w-4/5">
+      <h2><Icon icon="ant-design:api-outlined" :size="30" :color="'#7887ca'" />中电费回收率</h2>
+      <basic-table @register="registerTable">
+      </basic-table>
+    </div>
+      </page-wrapper>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import {ref, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {apiRouterFormSchema} from './domainName.data.ts';
+  import {BasicTable,useTable} from "@/components/Table";
+import { columns2,columns0, searchFormSchema } from './domainName.data';
+  import Icon from "@/components/Icon/Icon.vue";
+import {tableList2,tableList0} from "./mock";
+  import PageWrapper from "@/components/Page/src/PageWrapper.vue";
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: apiRouterFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+
+    setModalProps({ confirmLoading: false ,showOkBtn: false,cancelText: '关闭'});
+    var formData = {}
+    if (data.record === null || data.record === undefined){
+      formData = {
+        standardsTree: '100'
+      }
+    } else {
+      formData = {
+        standardsTree: data.record.businessId
+      }
+    }
+    // 塞值
+    setFieldsValue({
+      ...formData,
+    });
+  });
+
+  /**表格配置 right*/
+  const [registerTable, { reload:reload, updateTableDataRecord:updateTableDataRecord, getSearchInfo:getSearchInfo, getForm:getForm,getRowSelection:getRowSelection }] = useTable({
+  title: 'API路由',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableList2.length,
+      code:'',
+      message:'',
+      data: tableList2,
+    };
+
+    return { ...response};
+  },
+  rowKey: 'businessId',
+  rowSelection: false,
+  columns:columns2,
+  // formConfig: {
+  //   labelWidth: 120,
+  //   schemas: searchFormSchema,
+  //   autoSubmitOnEnter: true,
+  // },
+  showIndexColumn: false,//列表序号取消
+  // useSearchForm: true,
+  // showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+});
+
+  /**表格配置 left*/
+  const [registerTable0, {  }] = useTable({
+  title: 'API',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableList0.length,
+      code:'',
+      message:'',
+      data: tableList0,
+    };
+
+    return { ...response};
+  },
+  rowKey: 'businessId',
+  rowSelection: {type:'radio'},//列表复选框取消
+  columns:columns0,
+    striped: false,
+    pagination: false,
+    maxHeight:300,
+    bordered: false,
+  // formConfig: {
+  //   labelWidth: 120,
+  //   schemas: searchFormSchema,
+  //   autoSubmitOnEnter: true,
+  // },
+  showIndexColumn: false,//列表序号取消
+  // useSearchForm: true,
+  // showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+});
+
+
+  const getTitle = computed(() => ('关联API路由'));
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal()
+  }
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/dataService/serviceManage/gatewayConfig/domainName/domainName.data.ts

@@ -98,8 +98,44 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+/** 弹窗-关联api路由列表展示字段*/
+export const columns2: BasicColumn[] = [
+  {
+    title: '路由名称',
+    dataIndex: 'routerName',
+    width: 120,
+  },
+  {
+    title: '业务分组',
+    dataIndex: 'grouping',
+    width: 120,
+  },
+  {
+    title: '请求方式',
+    dataIndex: 'requestManner',
+    width: 120,
+  },
+  {
+    title: '协议类型',
+    dataIndex: 'protocolType',
+    width: 120,
+  },
+  {
+    title: '动态路由',
+    dataIndex: 'dynamicRouter',
+    width: 120,
+  },
+];
+export const columns0: BasicColumn[] = [
+  {
+    // title: 'api列名',
+    dataIndex: 'apiColumnName',
+    width: 120,
+  },
+];
 
-export const formSchema: any[] = [
+/** 关联api路由表单*/
+export const apiRouterFormSchema: any[] = [
   {
     field: 'account',
     label: '账号',

src/views/dataService/serviceManage/gatewayConfig/domainName/index.vue

@@ -29,10 +29,11 @@
         </template>
       </template>
       <template #apiRouter="{ text, record }">
-        <a @click="editApi(record)"> {{ text }}</a>
+        <a @click="editApi()"> {{ text }}</a>
       </template>
     </BasicTable>
     <CreateDocument @register="registerCreateDocumentModal" />
+    <ApiRouter @register="registerApiRouterModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -43,6 +44,7 @@ import { PageWrapper } from '@/components/Page';
 import { useMessage } from '@/hooks/web/useMessage';
 import { columns, searchFormSchema } from './domainName.data';
 import {tableList} from "./mock";
+import ApiRouter from './apiRouter.vue'//关联api路由
 import CreateDocument from './createDocument.vue';//新建组件
   import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
 
@@ -96,6 +98,12 @@ function handleNew(){
     openCreateDocumentModal(true, {
     });
 }
+/**关联api路由弹窗 */
+const [registerApiRouterModal, { openModal: openApiRouterModal }] = useModal();
+function editApi() {
+  openApiRouterModal(true, {  });
+}
+
 
 function handleDelete() {
   createConfirm({
@@ -109,16 +117,6 @@ function handleEdit() {
   console.log('点击触发handleEdit')
 }
 
-/**业务分组详情 */
-function editApi(record: any) {
-  console.log('点击触发editApi',record)
-  router.push({
-    path: '/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails',
-    query: {
-      businessId: record.businessId,
-    }
-  });
-}
 
 
 

src/views/dataService/serviceManage/gatewayConfig/domainName/mock.ts

@@ -26,6 +26,69 @@ export const tableList: any[] = [
     apiRouter:'28',
   },
 
+]
+/** 关联api路由弹窗 */
+export const tableList0: any[] = [
+  {
+    businessId: 1,
+    apiColumnName:'中电费回收率',
+  },
+  {
+    businessId: 2,
+    apiColumnName:'电费回收率',
+  },
+  {
+    businessId: 3,
+    apiColumnName:'电费回收率',
+  },
+  {
+    businessId: 4,
+    apiColumnName:'电费回收率',
+  },
+  {
+    businessId: 5,
+    apiColumnName:'电费回收率',
+  },
+  {
+    businessId: 6,
+    apiColumnName:'电费回收率',
+  },
+  {
+    businessId: 7,
+    apiColumnName:'电费回收率',
+  },
+  {
+    businessId: 8,
+    apiColumnName:'电费回收率',
+  },
+
+]
+export const tableList2: any[] = [
+  {
+    businessId: 1,
+    routerName:'天涯海角路由',
+    grouping:'默认分组',
+    requestManner:'Get',
+    protocolType:'HTTP',
+    dynamicRouter:'www.asdf.sdf',
+  },
+  {
+    businessId: 2,
+    routerName:'天涯海角路由',
+    grouping:'默认分组',
+    requestManner:'Post',
+    protocolType:'HTTP',
+    dynamicRouter:'www.asdf.sdf',
+  },
+  {
+    businessId: 3,
+    routerName:'天涯海角路由',
+    grouping:'默认分组',
+    requestManner:'Get',
+    protocolType:'HTTPS',
+    dynamicRouter:'www.asdf.sdf',
+  },
+
 ]
 
 export const tableListDetails: any[] = [

src/views/dataService/serviceManage/gatewayConfig/topology/index.vue

 <template>
   <page-wrapper>
-网关拓扑
+    <img src="@/assets/images/topology.png">
   </page-wrapper>
 </template>