Skip to content

B
bigDataSystem
Commit 2b8ac6e6 authored by 冷玲鹏's avatar 冷玲鹏
Browse files
Options

api上线管理—页面修改

parent 9817791e
Show whitespace changes
Inline Side-by-side
Showing with 505 additions and 426 deletions
src/views/dataService/serviceManage/onlineManage/index.vue
View file @ 2b8ac6e6
......@@ -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
View file @ 2b8ac6e6
......@@ -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
View file @ 2b8ac6e6
......@@ -215,15 +215,367 @@ 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: '路由名称',
colProps: {
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: '字段1',
label: '动态路由',
colProps: {
span: 20,
},
colSlot: 'dynamicRouting'
},
{
field: 'businessGrouping',
component: 'Select',
label: '业务分组',
colProps: {
span: 8,
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: '覆盖默认生成的校验信息'}],
},
];
/** 上线测试列表*/
......
src/views/dataService/serviceManage/onlineManage/productionData.vue
View file @ 2b8ac6e6
......@@ -12,406 +12,75 @@
<p>保存</p>
</div>
</template>
<div>
<BasicForm @register="register" @submit="handleSubmit" style="padding:15px 0 0 40px">
<template #colSlot_dynamicRouting="{ model, field, disabled }">
<template #dynamicRouting="{ field,model, }">
<FormItem :name="field" label="动态路由"
:rules="[{ required: true, message: '请选择动态路由' }]">
<a-select
v-model:value="model[field]"
:disabled="disabled"
mode="multiple"
style="width: 50%"
placeholder="请选择"
:options="routeList"
/>
<a-input
v-model:value="model[field]"
:disabled="disabled"
style="width: 50%"
placeholder="请选择"
/>
:rules="[{ required: true, message: '请选择动态路由',type: 'string' }]"
style="margin-left: 45px">
<Input.Group>
<FormItemRest>
<Select style="width: 380px" placeholder="请选择"
v-model:value="model['dynamic']" :options="routeList"/>
</FormItemRest>
<FormItemRest>
<Input style="width: calc(100% - 380px); margin-left: -1px;"
v-model:value="model[field]" placeholder="请输入"/>
</FormItemRest>
</Input.Group>
</FormItem>
</template>
<template #expirationDuration="{ field,model, }">
<FormItem :name="field" label="有效期持续时间"
:rules="[{ required: true, message: '请输入有效期持续时间',type: 'string' }]"
style="margin-left: 0">
<Input.Group>
<FormItemRest>
<Input style="width: calc(100% - 380px); margin-left: -1px;"
v-model:value="model[field]" placeholder="请输入"/>
</FormItemRest>
<FormItemRest>
<Select style="width: 380px" placeholder="请选择"
v-model:value="model['expiration']" :options="timeList"/>
</FormItemRest>
</Input.Group>
</FormItem>
</template>
<template #rateLimitPolicy="{ field,model, }">
<FormItem :name="field" label="流控策略"
:rules="[{ required: true, message: '请输入流控策略',type: 'string' }]"
style="margin-left: 45px">
<Input.Group>
<FormItemRest>
<Input style="width: calc(100% - 380px); margin-left: -1px;"
v-model:value="model[field]" placeholder="请输入"/>
</FormItemRest>
<Select style="width: 380px" placeholder="请选择"
v-model:value="model['rateLimit']" :options="timesDataList"/>
</Input.Group>
</FormItem>
</template>
</BasicForm>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
/**上线设置页面*/
import {PageWrapper} from '@/components/Page';
import {tableList, routeList} from './mock';
import {productionDataSchemas} from './onlineManage.data';
import {tableList, routeList, timeList, timesDataList} from './mock';
import {schemas} from './onlineManage.data';
import Icon from "@/components/Icon/Icon.vue";
import {onMounted, reactive, ref} from "vue";
import {router} from '@/router';
import {useRoute} from "vue-router";
import {BasicForm, FormSchema, useForm} from "@/components/Form";
import {useMessage} from "@/hooks/web/useMessage";
import {FormItem} from "ant-design-vue";
import {FormItem, FormItemRest} from "ant-design-vue";
import {Select, Input} from "ant-design-vue";
const title = ref();
const route = useRoute();
/**上线设置表单配置*/
const schemas: FormSchema[] = [
{
field: 'title1',
component: 'BasicTitle',
label: '路由转发配置',
componentProps: {
// line: true,
span: true,
},
colProps: {
span: 24,
},
},
{
field: 'routeName',
component: 'Input',
label: '路由名称',
colProps: {
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',
component: 'Input',
label: '动态路由',
colProps: {
span: 20,
},
required: true,
colSlot: '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',
component: 'Input',
label: '有效期持续时间',
colProps: {
span: 20,
},
},
{
field: 'rateLimitPolicy',
component: 'Input',
label: '流控策略',
colProps: {
span: 20,
},
},
{
field: 'rateLimitPolicy',
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: '请求示例',
helpMessage: ['您可以参考示例书写'],
componentProps: {
placeholder: ['curl-X POST -H’Content-Type: application/json; charset=utf-8‘ -H -d'],
},
colProps: {
span: 20,
},
},
{
field: 'associatedList',
component: 'RadioGroup',
label: '关联名单',
colProps: {
span: 23,
},
componentProps: {
options: [
{
label: '关联',
value: '1',
},
{
label: '不关联',
value: '2',
},
],
},
rules: [{required: true, message: '覆盖默认生成的校验信息'}],
},
];
const {createMessage} = useMessage();
const [register, {getFieldsValue, resetFields, setFieldsValue}] =
useForm({
......@@ -447,9 +116,9 @@ function handleSubmit(values: any) {
/**接入数据*/
onMounted(() => {
const data = tableList.filter((item) => item.businessId === route.query.id);
/* const data = tableList.filter((item) => item.businessId === route.query.id);*/
// formParams.value = data[0];
console.log('数据：', data)
/*console.log('数据：', data)*/
title.value = '上线设置';
/* Object.assign(formParams, data[0]); // 使用 Object.assign 赋值*/
/* resetFields();*/
......@@ -482,4 +151,15 @@ onMounted(() => {
right: 10px; /* 右侧对齐 */
margin: 10px; /* 可选：增加一些边缘间距 */
}
.local_typeValue {
width: calc(100% - 120px);
margin-bottom: 0;
margin-left: -1px;
border-right: 0;
.ant-input {
border-radius: 0 6px 6px 0;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment