新增业务分组管理功能

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/callerManage.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+export const detailSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+
+export const detailsColumns: BasicColumn[] = [
+  {
+    title: 'API名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'callNum',
+    width: 120,
+  },
+  {
+    title: '调用成功次数',
+    dataIndex: 'callSuccessNum',
+    width: 120,
+  },
+  {
+    title: '调用失败次数',
+    dataIndex: 'callFailNum',
+    width: 120,
+  },
+  {
+    title: '调用状态',
+    dataIndex: 'flag',
+    width: 120,
+  },
+  {
+    title: '调用开始时间',
+    dataIndex: 'startTime',
+    width: 120,
+  },
+  {
+    title: '调用结束时间',
+    dataIndex: 'endTime',
+    width: 120,
+  },
+]
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '业务分组名称',
+    dataIndex: 'name',
+    width: 120,
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '关联API路由数',
+    dataIndex: 'apiRoutNum',
+    width: 120,
+  },
+  {
+    title: '关联executor数',
+    dataIndex: 'executorNum',
+    width: 120,
+  },
+];
+
+
+export const formSchema: any[] = [
+  {
+    field: 'account',
+    label: '账号',
+    component: 'Input',
+    defaultValue:'admin',
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+    },
+  },
+  {
+    field: 'name',
+    label: '用户名称',
+    component: 'Input',
+    defaultValue:'admin',
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+    },
+  },
+  {
+    field: 'token',
+    label: '用户token',
+    component: 'InputTextArea',
+    defaultValue:'13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
+    componentProps: {
+      rows: 4,
+      readOnly:true,
+      disabled: true,
+    },
+  },
+  {
+  field: 'tokenTime',
+  label: 'token自动刷新频率',
+    slot: 'tokenTime',
+  component: 'InputNumber',
+  defaultValue: 1,
+    labelWidth: 160,
+  componentProps: {
+    min: 1,
+    max: 9999,
+    // disabled: true,
+  },
+},
+  {
+    //用户密钥
+    field: 'userKey',
+    label: '用户密钥',
+    slot: 'userKey',
+    component: 'Input',
+    defaultValue:'transwarp12345',
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+      style: { width: '27%' },
+    },
+  },
+
+]
+/**新建文件夹 表单*/
+export const createDocumentFormSchema: FormSchema[] = [
+  {
+    field: 'documentName',
+    label: '文件名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    rules: [
+      {
+        required: true,
+        message: '请输入文件夹名称',
+      },
+    ],
+    componentProps: {
+      placeholder: '请输入文件夹名称',
+    },
+  },
+  {
+    field: 'fileType',
+    label: '文件类型',
+    component: 'Select',
+    defaultValue: '默认分组',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      options: [
+        {
+          label: '默认分组',
+          value: '默认分组',
+        },
+        {
+          label: 'test1',
+          value: 'test1',
+        },
+        {
+          label: 'test2',
+          value: 'test2',
+        },
+      ],
+    },
+  },
+];
+  // const [registerTable] = useTable({
+  //   title: '可编辑单元格示例',
+  //   api: demoListApi,
+  //   columns: columns,
+  //   showIndexColumn: false,
+  //   bordered: true,
+  // });

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/createDocument.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </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 {createDocumentFormSchema} from './callerManage.data.ts';
+
+  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: createDocumentFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    var formData = {}
+    if (data.record === null || data.record === undefined){
+      formData = {
+        standardsTree: '100'
+      }
+    } else {
+      formData = {
+        standardsTree: data.record.businessId
+      }
+    }
+    // 塞值
+    setFieldsValue({
+      ...formData,
+    });
+  });
+
+  const getTitle = computed(() => ('新建文件夹'));
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal()
+  }
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails/index.vue

+<template>
+  <page-wrapper>
+    分组详情
+  </page-wrapper>
+</template>
+
+
+<script setup lang="ts">
+
+import PageWrapper from "@/components/Page/src/PageWrapper.vue";
+</script>
+
+
+

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

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
+      <template #toolbar>
+        <a-button type="primary" @click="handleNew">新建</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+      <template #name="{ text, record }">
+        <a @click="editApi(record)"> {{ text }}</a>
+      </template>
+    </BasicTable>
+    <CreateDocument @register="registerCreateDocumentModal" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { useModal } from '@/components/Modal';
+import { reactive, onMounted,ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import { useMessage } from '@/hooks/web/useMessage';
+import { columns, searchFormSchema } from './callerManage.data';
+import {tableList} from "./mock";
+import CreateDocument from './createDocument.vue';//新建组件
+  import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
+
+const router = useRouter();
+defineOptions({ name: 'safetyLevelManage' });
+const { createMessage,createConfirm } = useMessage();
+const route = useRoute();
+
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
+  title: '业务分组列表',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableList.length,
+      code:'',
+      message:'',
+      data: tableList,
+    };
+
+    return { ...response};
+  },
+  rowKey: 'businessId',
+  rowSelection: true,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+  },
+  showIndexColumn: false,//列表序号取消
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+  },
+});
+
+/**新建按钮 */
+  const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
+function handleNew(){
+    openCreateDocumentModal(true, {
+    });
+}
+
+function handleDelete() {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '确认删除选中数据吗？',
+  });
+}
+// 编辑按钮
+function handleEdit() {
+  console.log('点击触发handleEdit')
+}
+
+/**业务分组详情 */
+function editApi(record: any) {
+  console.log('点击触发editApi',record)
+  router.push({
+    path: '/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails',
+  });
+}
+
+
+
+
+onMounted(() => {
+
+});
+
+</script>

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

+
+
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name:'默认分组',
+    apiRoutNum:'17',
+    executorNum:'28',
+  },
+  {
+    businessId: 2,
+    name:'test1',
+    apiRoutNum:'17',
+    executorNum:'28',
+  },
+  {
+    businessId: 3,
+    name:'test2',
+    apiRoutNum:'17',
+    executorNum:'28',
+  },
+
+]
+
+export const tableListDetails: any[] = [
+  {
+    businessId: 1,
+    name:'test1',
+    callNum:'0',
+    callSuccessNum:'0',
+    callFailNum:'0',
+    flag:'调用中',
+    startTime:'2023-12-05',
+    endTime:'2023-12-05',
+  },
+  {
+    businessId: 1,
+    name:'test1',
+    callNum:'0',
+    callSuccessNum:'0',
+    callFailNum:'0',
+    flag:'调用中',
+    startTime:'2023-12-05',
+    endTime:'2023-12-05',
+  },
+  {
+    businessId: 1,
+    name:'test1',
+    callNum:'0',
+    callSuccessNum:'0',
+    callFailNum:'0',
+    flag:'调用中',
+    startTime:'2023-12-05',
+    endTime:'2023-12-05',
+  },
+]

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

+<template>
+  <page-wrapper>
+    域名管理
+  </page-wrapper>
+</template>
+
+
+<script setup lang="ts">
+
+import PageWrapper from "@/components/Page/src/PageWrapper.vue";
+</script>
+
+
+

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

+<template>
+  <page-wrapper>
+网关拓扑
+  </page-wrapper>
+</template>
+
+
+<script setup lang="ts">
+
+import PageWrapper from "@/components/Page/src/PageWrapper.vue";
+</script>
+
+
+