Skip to content

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

api上线管理——api上线

parent 7306134b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 780 additions and 98 deletions
src/router/routes/index.ts
View file @ de0fec9c
......@@ -832,6 +832,26 @@ export const serviceDevelopmentRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'serviceManage/onlineManage/productionData',
name: 'productionData',
component: () =>
import('@/views/dataService/serviceManage/onlineManage/productionData.vue'),
meta: {
title: '上线设置',
icon: '',
},
},
{
path: 'serviceManage/onlineManage/productionTest',
name: 'productionTest',
component: () =>
import('@/views/dataService/serviceManage/onlineManage/productionTest.vue'),
meta: {
title: '上线测试',
icon: '',
},
},
],
};
......
src/views/dataService/serviceManage/onlineManage/handleConsanguinity.vue
View file @ de0fec9c
<template>
<!-- <PageWrapper :title="title" dense contentFullHeight fixedHeight contentClass="flex" @back="goBack">-->
<PageWrapper :title="title" :class="prefixCls" contentBackground @back="goBack">
<PageWrapper :title="title" :class="prefixCls" dense contentBackground @back="goBack">
<template #headerContent>
<span>API/共享工作区/tuomin_demo</span>
</template>
......
src/views/dataService/serviceManage/onlineManage/index.vue
View file @ de0fec9c
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<!-- <template #headerContent>
<dicv style="display:flex;">
<Icon icon="ant-design:folder-open-outlined" :size="24" :color="'#1091FE'"/>
<h2 style="margin-left: 15px">API</h2>
</dicv>
<div type="primary" class="save-button" >
<Icon icon="ant-design:bug-outlined" :size="24" :color="'#1091FE'"/>
<p>测试</p>
</div>
<div type="primary" class="save-button1">
<Icon icon="ant-design:inbox-outlined" :size="24" :color="'#1091FE'"/>
<p>保存</p>
</div>
</template>-->
<BasicTable @register="registerTable" :rowSelection="rowSelection" :searchInfo="searchInfo">
<template #toolbar>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary"
......@@ -18,45 +33,90 @@
:actions="[
{
icon:'ant-design:deployment-unit-outlined',
tooltip:'血缘',
/*label: '血缘',*/
onClick: handleConsanguinity.bind(null, record),
// 如果 flag 的值为某个特定值才显示按钮
/* visible: record.flag === '开发中'*/
ifShow: () => {
return record.flag !== '开发中'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
},
},
{
icon:'ant-design:fund-projection-screen-outlined',
tooltip:'详情',
/*label: '详情',*/
onClick: handleOffline.bind(null, record),
ifShow: () => {
return record.flag !== '开发中';
},
},
{
icon:'ant-design:upload-outlined',
tooltip:'上线',
/*label: '上线',*/
onClick: handleOnline.bind(null, record),
ifShow: () => {
return record.flag !== '开发中'&& record.flag === '未上线';
},
},
{
icon:'ant-design:cloud-download-outlined',
tooltip:'下线',
/*label: '下线',*/
onClick: handleOffline.bind(null, record),
ifShow: () => {
return record.flag !== '开发中'&& record.flag === '已上线';
},
},
{
icon:'ant-design:container-twotone',
tooltip:'API',
/*label: 'API',*/
onClick: handleOffline.bind(null, record),
ifShow: () => {
return record.flag !== '';
},
},
{
icon:'ant-design:setting-outlined',
tooltip:'设置',
/*label: '设置',*/
onClick: handleOffline.bind(null, record),
ifShow: () => {
return record.flag !== '开发中'&& record.flag === '已上线';
},
},
]"
:dropDownActions="[
{
icon: 'ant-design:delete-outlined',
color: 'error',
/*label: '删除',*/
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
title: '确认删除？',
confirm: handleDelete.bind(null, record),
},
},
]"
ifShow: () => {
return record.flag !== '其他';
},
}]"
/>
</template>
</template>
<template #name="{ text, record }">
<a @click="seeApi(record)">
<span v-if="record.mode === '托管模式'">
<Icon icon="ant-design:robot-outlined" :size="15" style="color:#5A70FB;" />
</span>
<span v-if="record.mode === 'SQL模式'">
<Icon icon="ant-design:rocket-outlined" :size="15" style="color:#5A70FB;" />
</span>
<span v-if="record.mode === '向导模式'">
<Icon icon="ant-design:flag-outlined" :size="15" style="color:#5A70FB;" />
</span>
<span v-if="record.mode === '编排模式'">
<Icon icon="ant-design:node-index-outlined" :size="15" style="color:#5A70FB;" />
</span>
{{ text }}</a>
</template>
<template #flag="{ text }">
<span v-if="text === '开发中'">
<Icon icon="ant-design:robot-filled" :size="15" style="color:#48A8F4;" />
......@@ -75,9 +135,6 @@
未知
</span>
</template>
<template #name="{ text, record }">
<a @click="seeApi(record)"> {{ text }}</a>
</template>
</BasicTable>
<sensitiveTypeModal @register="registerModal" @success="handleSuccess"/>
</PageWrapper>
......@@ -192,7 +249,12 @@ function handleOffline() {
/**上线按钮*/
function handleOnline() {
router.push({
path: '/dataService/serviceManage/onlineManage/productionData',
query: {
},
});
}
/** 删除按钮*/
......@@ -234,3 +296,30 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.modal_top {
padding: 20px 0 20px 20px;
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: 500;
}
}
.save-button {
position: absolute; /* 绝对定位 */
top: 15px; /* 顶部对齐 */
right: 10px; /* 右侧对齐 */
margin: 10px 60px 10px 10px; /* 可选：增加一些边缘间距 */
}
.save-button1 {
position: absolute; /* 绝对定位 */
top: 15px; /* 顶部对齐 */
right: 10px; /* 右侧对齐 */
margin: 10px; /* 可选：增加一些边缘间距 */
}
</style>
src/views/dataService/serviceManage/onlineManage/mock.ts
View file @ de0fec9c
......@@ -39,7 +39,7 @@ export const tableList: any[] = [
businessId: 4,
name: 'tuo_api',
flag: '开发中',
mode: '托管模式',
mode: '编排模式',
timeout: '5秒',
versionNum: '-',
createDate: '2023/12/05 14:38:37',
......@@ -61,14 +61,10 @@ export const tableList: any[] = [
},
];
export const uploadData = {
title: '发布',
result: '',
person: 'admin',
dept: '数据平台治理部',
time: '2023/06/15 15:24:59',
version: '大版本号自增',
};
export const routeList:any[] =[
{ label: '路由A', value: 'routeA' },
{ label: '路由B', value: 'routeB' },
{ label: '路由C', value: 'routeC' },];
export const modelData:any[] = [
{
id:1,
......@@ -177,7 +173,15 @@ export const apiDetailData = {
a5: 'inception',
a6: 'demo',
};
export const modelInfoData = {
name: 'employee',
path: 'admin-个人工作区/SDM数仓逻辑模型/SDM_DW数仓模型',
};
/**上线测试列表*/
export const testTableData: any[] = [
{
paramCode:'id',
paramPosition:'Body',
Xpath:'^.id',
paramType:'object',
comment:'',
isRequired:'是',
paramValue:'1'
},
];
src/views/dataService/serviceManage/onlineManage/onlineManage.data.ts
View file @ de0fec9c
import { getAllRoleList } from '@/api/system/role/role';
/*import { getAllRoleList } from '@/api/system/role/role';*/
import { BasicColumn, FormSchema } from '@/components/Table';
import {DescItem} from "@/components/Description";
// 引入开关组件
type CheckedType = boolean | string | number;
/*type CheckedType = boolean | string | number;*/
/** 列表筛选项*/
export const searchFormSchema: FormSchema[] = [
......@@ -35,6 +35,7 @@ export const columns: BasicColumn[] = [
title: '模式',
dataIndex: 'mode',
width: 120,
slots: { customRender: 'mode' }, // 使用自定义插槽
},
{
title: '超时时间',
......@@ -62,75 +63,8 @@ export const columns: BasicColumn[] = [
width: 120,
},
];
/** 筛选展示字段*/
/** 新增编辑表单字段*/
export const formSchema: any[] = [
{
field: 'name',
label: '名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入名称',
},
],
},
{
field: 'describe',
component: 'InputTextArea',
label: '描述',
componentProps: {
placeholder: '请输入描述',
rows: 4,
},
},
{
field: 'sort',
label: '最低安全分级',
component: 'Select',
componentProps: {
options: [
{ label: 'G1', value: 'G1' },
{ label: 'G2', value: 'G2' },
{ label: 'G3', value: 'G3' },
],
},
rules: [
{
required: true,
message: '请选择推荐保护动作',
},
],
},
{
field: 'protectAction',
label: '推荐脱敏算法',
component: 'Select',
componentProps: {
options: [
{ label: 'BlockFront', value: 'BlockFront' },
{ label: 'Delete', value: 'Delete' },
{ label: 'Mask', value: 'Mask' },
{ label: 'Base64', value: 'Base64' },
],
},
rules: [
{
required: true,
message: '请选择推荐保护动作',
},
],
},
{
field: 'params',
label: '算法参数',
component: 'Input',
},
]
/** 血缘对象*/
/** 血缘对象-左侧*/
export const modelFormSchema: FormSchema[] = [
{
field: 'member',
......@@ -148,6 +82,7 @@ export const modelColumns: BasicColumn[] = [
slots: { customRender: 'member' },
},
];
/** 血缘对象-右侧*/
export const Table1Schema: BasicColumn[] = [
{
title: '字段名称',
......@@ -277,5 +212,57 @@ export const apiDetailSchema: DescItem[] = [
field: 'a6',
label: '数据库',
},
];
/** 上线设置表单(暂无引用)*/
export const productionDataSchemas: FormSchema[] = [
{
field: 'field1',
component: 'Input',
label: '字段1',
colProps: {
span: 8,
},
required: true,
},
];
/** 上线测试列表*/
export const testTableSchema: BasicColumn[] = [
{
title: '参数code',
width: 150,
dataIndex: 'paramCode',
},
{
title: '参数位置',
width: 120,
dataIndex: 'paramPosition',
},
{
title: 'Xpath',
width: 120,
dataIndex: 'Xpath',
},
{
title: '参数类型',
width: 120,
dataIndex: 'paramType',
},
{
title: '注释',
width: 120,
dataIndex: 'comment',
},
{
title: '是否必填',
width: 120,
dataIndex: 'isRequired',
},
{
title: '参数值',
width: 120,
dataIndex: 'paramValue',
editable: true,
edit: true
},
];
src/views/dataService/serviceManage/onlineManage/productionTest.vue 0 → 100644
View file @ de0fec9c
<template>
<PageWrapper :title="title" contentBackground @back="goBack" dense fixedHeight >
<template #headerContent>
<span>API / 验收 / SQL API</span>
</template>
<BasicTable @register="registerTable" title="请求参数"/>
<div style="padding: 15px">
<a-button type="primary" @click="testButton"><Icon icon="ant-design:play-circle-outlined"></Icon>测试</a-button>
<div style="margin: 15px 0;font-weight: bold;font-size: 16px">请求报文</div>
<CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px"/>
<div style="margin-bottom: 15px;font-weight: bold;font-size: 16px">返回结果源码</div>
<CodeEditor v-model:value="value2" :mode="modeValue" />
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
/**上线设置页面*/
import {PageWrapper} from '@/components/Page';
import {tableList, testTableData} from './mock';
import Icon from "@/components/Icon/Icon.vue";
import {h, 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 BasicTable from "@/components/Table/src/BasicTable.vue";
import {testTableSchema} from "@/views/dataService/serviceManage/onlineManage/onlineManage.data";
import {useTable} from "@/components/Table";
import {CodeEditor, MODE} from "@/components/CodeEditor";
const title = ref();
const route = useRoute();
/**右-表（右上）*/
const [registerTable] = useTable({
dataSource: testTableData,
columns: testTableSchema,
pagination: false,
showIndexColumn: false,
scroll: {y: 100},
showSummary: true,
});
const { createMessage } = useMessage();
const modeValue = ref<MODE>(MODE.JSON);
const Data1 =
'{' +
'"id":"1"' +
'}';
const Data2 =
{
"data": {
"valueSize": 20,
"columnNames": [
"status",
"create_time"
],
"value": [
{
"create_time": "2023-07-19 17:15:23",
"status": "1"
}
]
},
"code": 200,
"message": "success"
}
const value1 = ref('{' +
'"id":"1"' +
'}');
const value2 = ref('');
/**返回上一级*/
function goBack() {
router.back();
}
/**测试按钮*/
function testButton() {
value1.value = Data1;
value2.value = Data2;
}
/**保存按钮*/
function handleSave() {
router.back();
}
/**接入数据*/
onMounted(() => {
const data = tableList.filter((item) => item.businessId === route.query.id);
// formParams.value = data[0];
console.log('数据：', data)
title.value = '测试';
/* Object.assign(formParams, data[0]); // 使用 Object.assign 赋值*/
/* resetFields();*/
})
</script>
<style lang="scss" scoped>
</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