Commit 8a5823ef authored by liwei's avatar liwei

新增了服务开发页面

parent 4be49630
......@@ -593,6 +593,33 @@ export const serviceDevelopmentRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'serviceDevelopment/guideModeApi',
name: 'guideModeApi',
component: () => import('@/views/dataService/serviceDevelopment/guideModeApi.vue'),
meta: {
title: '向导模式',
icon: '',
},
},
{
path: 'serviceDevelopment/sqlModeApi',
name: 'sqlModeApi',
component: () => import('@/views/dataService/serviceDevelopment/sqlModeApi.vue'),
meta: {
title: 'SQL模式',
icon: '',
},
},
{
path: 'serviceDevelopment/trusteeshipModeApi',
name: 'trusteeshipModeApi',
component: () => import('@/views/dataService/serviceDevelopment/trusteeshipModeApi.vue'),
meta: {
title: '托管模式',
icon: '',
},
},
],
};
......
<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 { publishApplicationFormSchema } from './api.data';
import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "@/views/dataStandards/basicStandards/basicStandardsData";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const rowId = ref('');
const getTitle = computed(() => ('版本发布申请'));
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: publishApplicationFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
setFieldsValue({
...data.record,
})
});
/**确定按钮*/
async function handleSubmit() {
createMessage.success('移动成功');
closeModal()
}
</script>
......@@ -104,7 +104,7 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,get
function contrastButton() {
closeModal()
router.push({
path: '/serviceDevelopment/apiContrast',
path: '/dataService/serviceDevelopment/apiContrast',
query: {
businessId:route.query.businessId,
},
......
......@@ -317,7 +317,479 @@ export const apiDocColumns: BasicColumn[] = [
"edit": true
}
];
/**版本发布申请 表单*/
export const publishApplicationFormSchema: any[] = [
{
"field": "applicationTitle",
"label": "申请标题",
"component": "Input",
"colProps": { "lg": 24, "md": 24 },
"rules": [
{
"required": true,
"message": "请输入申请标题"
}
],
"componentProps": {
"placeholder": "请输入申请标题"
}
},
{
"field": "applicationReason",
"label": "申请理由",
"component": "InputTextArea",
"colProps": { "lg": 24, "md": 24 },
"rules": [
{
"required": true,
"message": "请输入申请理由"
}
],
"componentProps": {
rows: 4,
"placeholder": "请输入申请理由"
}
},
{
"field": "versionDescription",
"label": "版本说明",
"component": "InputTextArea",
"colProps": { "lg": 24, "md": 24 },
"rules": [
{
"required": true,
"message": "请输入版本说明"
}
],
"componentProps": {
rows: 4,
"placeholder": "请输入版本说明"
}
},
{
"field": "apiName",
"label": "API名称",
"component": "Input",
"colProps": { "lg": 24, "md": 24 },
"rules": [
{
"required": true,
"message": "请输入API名称"
}
],
"componentProps": {
disabled: true,
"placeholder": "请输入API名称"
}
}
]
/**向导模式 表单*/
export const guideModeFormSchema: FormSchema[] = [
{
field: "dataSource",
label: "数据源",
component: "Select",
colProps: { span: 5 },
rules: [
{
required: true,
message: "请选择数据源"
}
],
defaultValue: 'mysql',
componentProps: {
options: [
{
label: "inceptor",
value: "inceptor",
},
{
label: "argodb",
value: "argodb",
},
{
label: "kundb",
value: "kundb",
},
{
label: "mysql",
value: "mysql",
},
{
label: "oracle",
value: "oracle",
},
{
label: "db2",
value: "db2",
},
{
label: "DM",
value: "DM",
},
{
label: "Hana",
value: "Hana",
},
{
label: "PostgreSql",
value: "PostgreSql",
},
],
placeholder: "请选择数据源"
}
},
{
"field": "database",
"label": "数据库",
"component": "Select",
colProps: { span: 5 },
"rules": [
{
"required": true,
"message": "请选择数据库"
}
],
defaultValue: '1',
"componentProps": {
options: [
{
label: '_demo0412',
value: '1'
},
{
label: 'dataBase2',
value: '2'
},
{
label: 'dataBase3',
value: '3'
},
{
label: 'dataBase4',
value: '4 '
},
],
"placeholder": "请选择数据库"
}
},
{
"field": "dataTable",
"label": "数据表",
"component": "Select",
colProps: { span: 5 },
"rules": [
{
"required": true,
"message": "请选择数据表"
}
],
defaultValue: '1',
"componentProps": {
options: [
{
label: '_demo0412',
value: '1'
},
{
label: 'dataTable2',
value: '2'
},
{
label: 'dataTable3',
value: '3'
},
{
label: 'dataTable4',
value: '4 '
},
],
"placeholder": "请选择数据表"
}
}
];
/**向导模式 列表1*/
export const guideModeTableColumns1: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'id',
value: '1',
},
{
label: '列名2',
value: '2',
},
],
},
width: 200,
},
{
title: '参数code',
dataIndex: 'parameterCode',
width: 200,
edit: true,
editable: true,
},
{
title: '参数类型',
dataIndex: 'parameterType',
width: 150,
},
{
title: '注释',
dataIndex: 'comment',
width: 200,
edit: true,
editable: true,
},
{
title: '是否必填',
dataIndex: 'required',
edit: true,
editable: true,
editComponent: 'Checkbox',
editValueMap: (value) => {
return value ? '是' : '否';
},
width: 200,
},
{
title: '默认值',
dataIndex: 'defaultValue',
width: 150
},
{
title: '示例值',
dataIndex: 'exampleValue',
width: 200,
edit: true,
editable: true,
},
];
/**向导模式 列表2*/
export const guideModeTableColumns2: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'id',
value: '1',
},
{
label: '列名2',
value: '2',
},
],
},
width: 200,
},
{
title: '参数code',
dataIndex: 'parameterCode',
width: 200,
edit: true,
editable: true,
},
{
title: '参数类型',
dataIndex: 'parameterType',
width: 150
},
{
title: '参数映射字段',
dataIndex: 'parameterMappingFields',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '用户ID',
value: '1',
},
{
label: '列名2',
value: '2',
},
],
},
width: 200,
},
];
/**向导模式 列表3*/
export const guideModeTableColumns3: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
edit: true,
editable: true,
width: 200,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'midgard_offset',
value: '1',
},
{
label: 'midgard_size',
value: '2',
},
],
},
},
{
title: '参数code',
dataIndex: 'parameterCode',
width: 200,
edit: true,
editable: true,
},
{
title: '参数类型',
dataIndex: 'parameterType',
width: 150
},
{
title: '是否必填',
dataIndex: 'required',
edit: true,
editable: true,
editComponent: 'Checkbox',
editValueMap: (value) => {
return value ? '是' : '否';
},
width: 200,
},
{
title: '默认值',
dataIndex: 'defaultValue',
width: 150,
edit: true,
editable: true,
},
];
/**向导模式 列表4*/
export const guideModeTableColumns4: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'age',
value: '1',
},
{
label: 'address',
value: '2',
},
{
label: 'create_time',
value: '3',
},
],
},
width: 200,
},
{
title: '参数code',
dataIndex: 'parameterCode',
width: 200,
edit: true,
editable: true,
},
{
title: '注释',
dataIndex: 'comment',
width: 150,
edit: true,
editable: true,
},
{
title: '示例值',
dataIndex: 'exampleValue',
width: 150,
edit: true,
editable: true,
},
];
/**向导模式 列表5*/
export const guideModeTableColumns5: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'age',
value: '1',
},
{
label: 'id',
value: '2',
},
],
},
width: 200,
},
{
title: '排序方式',
dataIndex: 'orderType',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '升序',
value: '1',
},
{
label: '降序',
value: '2',
},
],
},
width: 200,
},
];
/**向导模式 列表6*/
export const guideModeTableColumns6: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
width: 150
},
{
title: '参数类型',
dataIndex: 'parameterType',
width: 150
},
{
title: '注释',
dataIndex: 'comment',
width: 150
},
];
/**基础公共代码表单*/
......@@ -865,6 +1337,9 @@ export const addValueColumns: BasicColumn[] = [
width: 150
},
];
/**版本对比 表单*/
export const contrastSchema: FormSchema[] = [
{
......
......@@ -67,7 +67,7 @@ export const TreeData: any[] = [
"createDate": "2024-10-24 10:04:04",
"updateDate": "2024-10-24 10:04:04",
holder:'admin',
mode:'向导模式',
mode:'SQL模式',
workGroup:'共享工作区'
},
{
......@@ -79,7 +79,7 @@ export const TreeData: any[] = [
"createDate": "2024-10-24 10:04:04",
"updateDate": "2024-10-24 10:04:04",
holder:'admin',
mode:'向导模式',
mode:'托管模式',
workGroup:'共享工作区'
},
];
......@@ -122,7 +122,104 @@ export const apiDocColumnsData: any[] = [
parameterValue: '32e71d1a05eb42cca38'
}
];
/**向导模式 列表 数据1*/
export const guideModelTableData1: any[] = [
{
column: '1',
parameterCode: 'id',
parameterType: 'int',
comment: '',
required: true,
defaultValue:'-',
exampleValue:''
},
];
/**向导模式 列表 数据2*/
export const guideModelTableData2: any[] = [
{
column: '1',
parameterCode: 'id',
parameterType: 'int',
parameterMappingFields:'1',
},
];
/**向导模式 列表 数据3*/
export const guideModelTableData3: any[] = [
{
column: '1',
parameterCode: 'midgard_offset',
parameterType: 'INT',
required: true,
defaultValue:'-',
},
{
column: '2',
parameterCode: 'midgard_size',
parameterType: 'INT',
required: false,
defaultValue:'100',
},
];
/**向导模式 列表 数据4*/
export const guideModelTableData4: any[] = [
{
column: '1',
parameterCode: 'age',
comment: '',
exampleValue:''
},
{
column: '2',
parameterCode: 'address',
comment: '',
exampleValue:''
},
{
column: '3',
parameterCode: 'create_time',
comment: '',
exampleValue:''
},
];
/**向导模式 列表 数据5*/
export const guideModelTableData5: any[] = [
{
column: '1',
orderType:'1'
},
{
column: '2',
orderType:'1'
},
];
/**向导模式 列表 数据6*/
export const guideModelTableData6: any[] = [
{
column: 'id',
parameterType: 'int',
comment: '',
},
{
column: '_demo0412',
parameterType: 'string',
comment: '',
},
{
column: 'age',
parameterType: 'int',
comment: '',
},
{
column: 'address',
parameterType: 'string',
comment: '',
},
{
column: 'create_time',
parameterType: 'timestamp',
comment: '',
},
];
/**版本管理列表 表头*/
export const versionColumns: BasicColumn[] = [
......
This diff is collapsed.
......@@ -24,6 +24,11 @@
icon: 'eos-icons:api-outlined',
// label: 'api doc',
onClick: apiDocButton.bind(null, record),
},
{
icon: 'ant-design:send-outlined',
// label: '发布',
onClick: publishButton.bind(null, record),
},
{
icon: 'ant-design:folder-open-outlined',
......@@ -54,10 +59,8 @@
/>
</template>
</template>
<template #referenceStandard="{ text, record }">
<span v-for="(item, index) in text" :key="index">
{{ item.icon }}
</span>
<template #apiName="{ text, record }">
<a @click="editApi(record)"> {{ text }}</a>
</template>
</BasicTable>
<!-- 新建文件夹 弹窗-->
......@@ -74,6 +77,8 @@
<VersionModal @register="registerVersionModal" @success="handleSuccess" />
<!-- 导入 弹窗-->
<ImportModal @register="registerImportModal" @success="handleSuccess" />
<!-- 版本发布申请 弹窗-->
<PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
......@@ -97,10 +102,13 @@
import {exportUserList} from "@/api/system/user/user";
import {downloadByData} from "@/utils/file/download";
import ImportModal from './ImportModal.vue'
import PublishApplicationModal from './PublishApplicationModal.vue'
defineOptions({ name: 'AccountManagement' });
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const go = useGo();
const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal();
const [registerImportModal, { openModal: openImportModal }] = useModal();
const [registerVersionModal, { openModal: openVersionModal }] = useModal();
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
......@@ -188,6 +196,42 @@
});
}
/**发布 按钮*/
function publishButton(record) {
openPublishApplicationModal(true,{
record
})
}
/**编辑API*/
function editApi(record) {
const mode = record.mode
if (mode === '向导模式'){
router.push({
path: '/dataService/serviceDevelopment/guideModeApi',
query: {
}
})
}
if (mode === 'SQL模式'){
router.push({
path: '/dataService/serviceDevelopment/sqlModeApi',
query: {
}
})
}
if (mode === '托管模式'){
router.push({
path: '/dataService/serviceDevelopment/trusteeshipModeApi',
query: {
}
})
}
}
/**apiDoc 按钮*/
function apiDocButton(record) {
router.push({
......
<template>
<PageWrapper title="SQL模式" contentFullHeight contentBackground>
<div>
<BasicTable @register="registerTable"/>
</div>
<div>
<a-button type="primary" style="margin-bottom: 20px" @click="testButton">测试</a-button>
<div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">请求报文</div>
<CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px"/>
<div style="margin-bottom: 10px;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 { Divider } from 'ant-design-vue';
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { apiDocColumns } from './api.data';
import { apiDocColumnsData } from './apiData';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const modeValue = ref<MODE>(MODE.JSON);
const jsonData1 =
'{"API_CONF_TEST_DATA_VALUE":{"id":"32e71d1a05eb42cca38a55438561a6af"}}';
const jsonData2 =
{
"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('');
const value2 = ref('');
//初始化列表
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '请求参数',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: apiDocColumnsData.length,
code:'',
message:'',
data: [],
};
return { ...response,data: apiDocColumnsData };
},
columns:apiDocColumns,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
scroll: { y: 300 },
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showCancelBtn:false,showOkBtn:false });
});
/**测试 按钮*/
function testButton() {
value1.value = jsonData1
value2.value = jsonData2
}
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
</script>
<template>
<PageWrapper title="托管模式" contentFullHeight contentBackground>
<div>
<BasicTable @register="registerTable"/>
</div>
<div>
<a-button type="primary" style="margin-bottom: 20px" @click="testButton">测试</a-button>
<div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">请求报文</div>
<CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px"/>
<div style="margin-bottom: 10px;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 { Divider } from 'ant-design-vue';
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { apiDocColumns } from './api.data';
import { apiDocColumnsData } from './apiData';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const modeValue = ref<MODE>(MODE.JSON);
const jsonData1 =
'{"API_CONF_TEST_DATA_VALUE":{"id":"32e71d1a05eb42cca38a55438561a6af"}}';
const jsonData2 =
{
"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('');
const value2 = ref('');
//初始化列表
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '请求参数',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: apiDocColumnsData.length,
code:'',
message:'',
data: [],
};
return { ...response,data: apiDocColumnsData };
},
columns:apiDocColumns,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
scroll: { y: 300 },
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showCancelBtn:false,showOkBtn:false });
});
/**测试 按钮*/
function testButton() {
value1.value = jsonData1
value2.value = jsonData2
}
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
</script>
......@@ -20,7 +20,7 @@
<div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div>
<!-- <TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />-->
<TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />
</div>
</BasicModal>
</template>
......@@ -28,12 +28,10 @@
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { resetNameFormSchema, createBasicTypeFormSchema } from './basicStandards.data';
import { getDeptList } from '@/api/system/dept/dept';
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { createBasicTypeFormSchema } from './basicStandards.data';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData,dataBasicTreeData } from '@/views/dataStandards/basicStandards/basicStandardsData';
// import TreeTwo from '@/views/dataStandards/basicStandards/TreeTwo.vue';
import { TreeData,dataBasicTreeData } from './basicStandardsData';
import TreeTwo from './TreeTwo.vue';
defineOptions({ name: 'AccountModal' });
......
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