api上线管理—页面修改

src/views/dataService/serviceManage/onlineManage/index.vue

@@ -17,11 +17,11 @@
     </template>-->
     <BasicTable @register="registerTable" :rowSelection="rowSelection" :searchInfo="searchInfo">
       <template #toolbar>
-        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary"
-                  @click="handleDeleteIds">创建商城API
+        <a-button type="primary"
+                  @click="createMallAPI ">创建商城API
         </a-button>
         <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary"
-                  @click="handleDeleteIds">下载API Doc
+                  @click="DownloadAPI">下载API Doc
         </a-button>
         <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary"
                   @click="handleDeleteIds">删除
@@ -45,7 +45,7 @@
                 icon:'ant-design:fund-projection-screen-outlined',
                 tooltip:'详情',
                 /*label: '详情',*/
-                onClick: handleOffline.bind(null, record),
+                onClick: other.bind(null, record),
                 ifShow: () => {
                   return record.flag !== '开发中';
                 },
@@ -72,7 +72,7 @@
                 icon:'ant-design:container-twotone',
                 tooltip:'API',
                 /*label: 'API',*/
-                onClick: handleOffline.bind(null, record),
+                onClick: apiDetail.bind(null, record),
                 ifShow: () => {
                   return record.flag !== '';
                 },
@@ -81,7 +81,7 @@
                 icon:'ant-design:setting-outlined',
                 tooltip:'设置',
                 /*label: '设置',*/
-                onClick: handleOffline.bind(null, record),
+                onClick: Settings.bind(null, record),
                 ifShow: () => {
                   return record.flag !== '开发中'&& record.flag === '已上线';
                 },
@@ -136,7 +136,7 @@
         </span>
       </template>
     </BasicTable>
-    <sensitiveTypeModal @register="registerModal" @success="handleSuccess"/>
+<!--    <sensitiveTypeModal @register="registerModal" @success="handleSuccess"/>-->
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -192,7 +192,7 @@ const [registerTable, {
     return info;
   },
   actionColumn: {
-    width: 250,
+    width: 220,
     title: '操作',
     dataIndex: 'action',
     // slots: { customRender: 'action' },
@@ -201,24 +201,30 @@ const [registerTable, {
 
 /**查看API*/
 function seeApi(record) {
-  const mode = record.mode
+  const mode = record.mode;
   if (mode === '向导模式') {
     router.push({
-      path: '/dataService/serviceManage/guideModeApi',
-      query: {}
-    })
+      path: '/dataService/serviceDevelopment/guideModeApi',
+      query: {},
+    });
   }
   if (mode === 'SQL模式') {
     router.push({
-      path: '/dataService/serviceManage/sqlModeApi',
-      query: {}
-    })
+      path: '/dataService/serviceDevelopment/sqlModeApi',
+      query: {},
+    });
   }
   if (mode === '托管模式') {
     router.push({
-      path: '/dataService/serviceManage/trusteeshipModeApi',
-      query: {}
-    })
+      path: '/dataService/serviceDevelopment/trusteeshipModeApi',
+      query: {},
+    });
+  }
+  if (mode === '编排模式') {
+    router.push({
+      path: '/dataService/serviceDevelopment/trusteeshipModeApi',
+      query: {},
+    });
   }
 }
 
@@ -242,17 +248,47 @@ function handleConsanguinity(record: Recordable) {
   });
 }
 
-/**下线按钮*/
-function handleOffline() {
+/**设置按钮*/
+function Settings() {
+
+}
+/**按钮*/
+function other() {
 
 }
+/**api详情按钮*/
+function apiDetail() {
 
+}
+/**下线按钮*/
+function handleOffline(record) {
+  // 修改 record 对象的 flag 值为 "未上线"
+  record.flag = '未上线';
+}
 /**上线按钮*/
 function handleOnline() {
   router.push({
     path: '/dataService/serviceManage/onlineManage/productionData',
     query: {
-
+    },
+  });
+}
+/**创建商城API按钮*/
+function createMallAPI() {
+  createConfirm({
+    iconType: 'warning',
+    title: '功能待完善',
+    content: '具体后续~~~？',
+  });
+}
+/**下载API Doc按钮*/
+function DownloadAPI() {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认下载',
+    content: '确认批量下载选中数据吗？',
+    onOk() {
+      createMessage.success('下载成功!');
     },
   });
 }
@@ -278,7 +314,7 @@ function handleDeleteIds() {
 }
 
 /** 新增/编辑成功*/
-function handleSuccess({isUpdate, values}) {
+/*function handleSuccess({isUpdate, values}) {
   if (isUpdate) {
     // 演示不刷新表格直接更新内部数据。
     // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
@@ -288,7 +324,7 @@ function handleSuccess({isUpdate, values}) {
   } else {
     reload();
   }
-}
+}*/
 
 
 onMounted(() => {
@@ -310,16 +346,16 @@ onMounted(() => {
 
 .save-button {
 
-  position: absolute; /* 绝对定位 */
-  top: 15px; /* 顶部对齐 */
-  right: 10px; /* 右侧对齐 */
-  margin: 10px 60px 10px 10px; /* 可选：增加一些边缘间距 */
+  position: absolute;
+  top: 15px;
+  right: 10px;
+  margin: 10px 60px 10px 10px;
 }
 
 .save-button1 {
-  position: absolute; /* 绝对定位 */
-  top: 15px; /* 顶部对齐 */
-  right: 10px; /* 右侧对齐 */
-  margin: 10px; /* 可选：增加一些边缘间距 */
+  position: absolute;
+  top: 15px;
+  right: 10px;
+  margin: 10px;
 }
 </style>

src/views/dataService/serviceManage/onlineManage/mock.ts

@@ -60,11 +60,22 @@ export const tableList: any[] = [
     path: 'API/共享工作区/tuomin_demo',
   },
 ];
-
+/**上线设置-复合框数据*/
 export const routeList:any[] =[
-  { label: '路由A', value: 'routeA' },
-  { label: '路由B', value: 'routeB' },
-  { label: '路由C', value: 'routeC' },];
+  { value: '1', label: 'gateway地址'},
+  { value: '2', label: '域名' },
+];
+
+export const timeList:any[] =[
+  { value: '1', label: '秒'},
+  { value: '2', label: '分' },
+  { value: '3', label: '时' },];
+export const timesDataList:any[] =[
+  { value: '1', label: '每秒/次'},
+  { value: '2', label: '每分/次'},
+  { value: '3', label: '每时/次'},
+  { value: '4', label: '每天/次'},
+];
 export const modelData:any[] = [
   {
     id:1,

src/views/dataService/serviceManage/onlineManage/onlineManage.data.ts

@@ -215,16 +215,368 @@ export const apiDetailSchema: DescItem[] = [
 ];
 
 /** 上线设置表单(暂无引用)*/
-export const productionDataSchemas: FormSchema[] = [
+export const schemas: FormSchema[] = [
   {
-    field: 'field1',
+    field: 'title1',
+    component: 'BasicTitle',
+    label: '路由转发配置',
+    componentProps: {
+      // line: true,
+      span: true,
+    },
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'routeName',
     component: 'Input',
-    label: '字段1',
+    label: '路由名称',
     colProps: {
-      span: 8,
+      span: 20,
     },
     required: true,
   },
+  {
+    field: 'protocolType',
+    component: 'Select',
+    label: '协议类型',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      /*mode: 'multiple',*/
+      options: [
+        {
+          label: 'Http',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: 'Https',
+          value: '2',
+          key: '2',
+        },
+      ],
+      onChange: (value) => {
+        console.log(value, '123');
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择',
+        /*type: 'array',// 如果你启用了多选，使用 array*/
+        type: 'string',
+      },
+    ],
+  },
+  {
+    field: 'APISpecification',
+    component: 'Select',
+    label: '接口规范',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: 'rest',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: 'webservice',
+          value: '2',
+          key: '2',
+        },
+      ],
+      onChange: (value) => {
+        console.log(value, '123');
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择',
+        type: 'string',
+      },
+    ],
+  },
+  {
+    field: 'requestMethod',
+    component: 'Select',
+    label: '请求方式',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: 'Get',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: 'Post',
+          value: '2',
+          key: '2',
+        },
+      ],
+      onChange: (value) => {
+        console.log(value, '123');
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择',
+        type: 'string',
+      },
+    ],
+  },
+  {
+    field: 'accessMethod',
+    component: 'RadioGroup',
+    label: '访问方式',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '通过域名访问',
+          value: '1',
+        },
+        {
+          label: '通过IP访问',
+          value: '2',
+        },
+      ],
+    },
+    rules: [{required: true, message: '覆盖默认生成的校验信息'}],
+  },
+  {
+    field: 'dynamicRouting',
+    fields: ['dynamic'],
+    component: 'Input',
+    label: '动态路由',
+    colProps: {
+      span: 20,
+    },
+    colSlot: 'dynamicRouting'
+  },
+  {
+    field: 'businessGrouping',
+    component: 'Select',
+    label: '业务分组',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '默认业务分组',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: '默认业务分组1',
+          value: '2',
+          key: '2',
+        },
+      ],
+      onChange: (value) => {
+        console.log(value, '123');
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择',
+        type: 'string',
+      },
+    ],
+  },
+  {
+    field: 'title2',
+    component: 'BasicTitle',
+    label: '安全配置',
+    componentProps: {
+      // line: true,
+      span: true,
+    },
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'enableAllLogs',
+    component: 'RadioGroup',
+    label: '开启所有日志',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '是',
+          value: '1',
+        },
+        {
+          label: '否',
+          value: '2',
+        },
+      ],
+    },
+    rules: [{required: true, message: '覆盖默认生成的校验信息'}],
+  },
+  {
+    field: 'maxLogRetention',
+    component: 'Input',
+    label: '日志最长保存',
+    colProps: {
+      span: 20,
+    },
+    suffix: '天',
+    required: true,
+  },
+  {
+    field: '[startDateTime, endDateTime]',
+    /*    field: 'expirationDate',*/
+    label: '有效期',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: ['开始日期、时间', '结束日期、时间'],
+      showTime: {format: 'HH:mm:ss'},
+    },
+  },
+  {
+    field: 'cronExpression',
+    component: 'Input',
+    label: 'Cron表达式',
+    colProps: {
+      span: 20,
+    },
+  },
+  {
+    field: 'expirationDuration',
+    fields: ['expiration'],
+    component: 'Input',
+    label: '有效期持续时间',
+    colProps: {
+      span: 20,
+    },
+    colSlot: 'expirationDuration'
+  },
+  {
+    field: 'rateLimitPolicy',
+    fields: ['rateLimit'],
+    component: 'Input',
+    label: '流控策略',
+    colProps: {
+      span: 20,
+    },
+    colSlot: 'rateLimitPolicy'
+  },
+  {
+    field: 'encryptionMethod',
+    component: 'Select',
+    label: '加密方式',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '加密',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: '不加密',
+          value: '2',
+          key: '2',
+        },
+      ],
+      onChange: (value) => {
+        console.log(value, '123');
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择',
+        type: 'string',
+      },
+    ],
+  },
+  {
+    field: 'authenticationMode',
+    component: 'Select',
+    label: '鉴权模式',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '简单token鉴权',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: '复杂token鉴权',
+          value: '2',
+          key: '2',
+        },
+      ],
+      onChange: (value) => {
+        console.log(value, '123');
+      },
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择',
+        type: 'string',
+      },
+    ],
+  },
+  {
+    field: 'requestExample',
+    component: 'Input',
+    label: '请求示例',
+    colProps: {
+      span: 20,
+    },
+    componentProps: {
+      placeholder: ['curl-X POST -H’Content-Type: application/json; charset=utf-8‘ -H -d'],
+    },
+    helpMessage: ['您可以参考示例书写'],
+  },
+  {
+    field: 'associatedList',
+    component: 'RadioGroup',
+    label: '关联名单',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '关联',
+          value: '1',
+        },
+        {
+          label: '不关联',
+          value: '2',
+        },
+      ],
+    },
+    rules: [{required: true, message: '覆盖默认生成的校验信息'}],
+  },
 ];
 /** 上线测试列表*/
 export const testTableSchema: BasicColumn[] = [