域名管理-分组详情功能

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

@@ -7,7 +7,7 @@
   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';
+  import {createDocumentFormSchema} from './businessGrouping.data.ts';
 
   defineOptions({ name: 'AccountModal' });
 

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

 <template>
   <PageWrapper >
-  <div class="callerManage_details">
+  <div class="businessGrouping_details">
     <div class="header">
       <Icon @click="handleGoBack" class="backBtn" icon="ant-design:left-outlined" :size="20"  :color="'#666C81'" />
       <Icon icon="ant-design:partition-outlined" :size="20"  :color="'#AFBAFE'" />
@@ -88,7 +88,7 @@ import { EditOutlined } from '@ant-design/icons-vue';
 import {router} from "@/router";
   import { Description } from '@/components/Description';
 import { BasicForm, useForm } from '@/components/Form';
-import {detailsColumns, refundSchema, detailSchemas,refundData,detailsColumns2} from "./callerManage.data";
+import {detailsColumns, refundSchema, detailSchemas,refundData,detailsColumns2} from "./businessGrouping.data";
 import StepHeader from "@/components/stepHeader.vue";
 import {tableListDetails ,tableListDetails2} from "./mock";
 import { BasicTable, useTable, TableAction } from '@/components/Table';
@@ -198,7 +198,7 @@ function handleDelete() {
 </script>
 
 <style scoped lang="scss">
-.callerManage_details{
+.businessGrouping_details{
   background-color: white;
   padding: 20px;
   .header{

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

@@ -7,7 +7,7 @@
   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';
+  import {createDocumentFormSchema} from './businessGrouping.data.ts';
 
   defineOptions({ name: 'AccountModal' });
 

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

@@ -41,7 +41,7 @@ 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 { columns, searchFormSchema } from './businessGrouping.data';
 import {tableList} from "./mock";
 import CreateDocument from './createDocument.vue';//新建组件
   import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';

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

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+    <template #centerFooter>
+      <a-button>测试</a-button>
+    </template>
+  </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 './domainName.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/domainName/domainName.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: 'domainName',
+    width: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'describe',
+    width: 120,
+  },
+  {
+    title: '创建者',
+    dataIndex: 'createdBy',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'creationTime',
+    width: 120,
+  },
+  {
+    title: '关联API路由',
+    dataIndex: 'apiRouter',
+    width: 120,
+    slots: { customRender: 'apiRouter' },
+  },
+];
+
+
+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: 'domainName',
+    label: '域名地址',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    rules: [
+      {
+        required: true,
+        message: '请输入域名地址',
+      },
+    ],
+    componentProps: {
+      placeholder: '请输入域名地址',
+    },
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'Input',
+    defaultValue: '公司域名',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+  // const [registerTable] = useTable({
+  //   title: '可编辑单元格示例',
+  //   api: demoListApi,
+  //   columns: columns,
+  //   showIndexColumn: false,
+  //   bordered: true,
+  // });

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

 <template>
-  <page-wrapper>
-    域名管理
-  </page-wrapper>
+  <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="[
+              {
+                // label: '编辑',
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                // label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+      <template #apiRouter="{ 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 './domainName.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();
 
-<script setup lang="ts">
+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,
+    };
 
-import PageWrapper from "@/components/Page/src/PageWrapper.vue";
-</script>
+    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',
+    query: {
+      businessId: record.businessId,
+    }
+  });
+}
 
 
 
+
+onMounted(() => {
+
+});
+
+</script>

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

+
+
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    domainName:'www.asdf.sdf',
+    describe:'公司域名地址',
+    createdBy:'泰罗',
+    creationTime:'2023-12-05 13:05:06',
+    apiRouter:'28',
+  },
+    {
+    businessId: 2,
+    domainName:'www.asdf.sdf',
+    describe:'公司域名地址',
+    createdBy:'泰罗',
+    creationTime:'2023-12-05 13:05:06',
+    apiRouter:'28',
+  },
+    {
+    businessId: 3,
+    domainName:'www.asdf.sdf',
+    describe:'公司域名地址',
+    createdBy:'泰罗',
+    creationTime:'2023-12-05 13:05:06',
+    apiRouter:'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',
+  },
+]