Skip to content

B
bigDataSystem
Commit eff0cfa8 authored by chenjiahao's avatar chenjiahao
Browse files
Options

API服务-修复已知问题

parent d95284e5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2706 additions and 2087 deletions
src/views/dataService/serviceDevelopment/ApiTestDrawer.vue
View file @ eff0cfa8
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
@ok="handleSubmit" @ok="handleSubmit"
> >
<div> <div>
<BasicTable @register="registerTable"/> <BasicTable @register="registerTable" />
</div> </div>
<div> <div>
<a-button type="primary" style="margin-bottom: 20px" @click="testButton">测试</a-button> <a-button type="primary" style="margin-bottom: 20px" @click="testButton">测试</a-button>
<div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">请求报文</div> <div style="margin-bottom: 10px; font-weight: bold; font-size: 16px">请求报文</div>
<CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px"/> <CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px" />
<div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">返回结果源码</div> <div style="margin-bottom: 10px; font-weight: bold; font-size: 16px">返回结果源码</div>
<CodeEditor v-model:value="value2" :mode="modeValue" /> <CodeEditor v-model:value="value2" :mode="modeValue" />
</div> </div>
</BasicDrawer> </BasicDrawer>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'; import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { BasicTree, TreeItem } from '@/components/Tree'; import { BasicTree, TreeItem } from '@/components/Tree';
import {useMessage} from "@/hooks/web/useMessage"; import { useMessage } from '@/hooks/web/useMessage';
import { Divider } from 'ant-design-vue'; import { Divider } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor'; import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
...@@ -34,66 +34,61 @@ ...@@ -34,66 +34,61 @@
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const modeValue = ref<MODE>(MODE.JSON); const modeValue = ref<MODE>(MODE.JSON);
const jsonData1 = const jsonData1 = '{"API_CONF_TEST_DATA_VALUE":{"id":"32e71d1a05eb42cca38a55438561a6af"}}';
'{"API_CONF_TEST_DATA_VALUE":{"id":"32e71d1a05eb42cca38a55438561a6af"}}'; const jsonData2 = {
const jsonData2 = data: {
valueSize: 20,
columnNames: ['status', 'create_time'],
value: [
{ {
"data": { create_time: '2023-07-19 17:15:23',
"valueSize": 20, status: '1',
"columnNames": [ },
"status",
"create_time"
], ],
"value": [
{
"create_time": "2023-07-19 17:15:23",
"status": "1"
}
]
}, },
"code": 200, code: 200,
"message": "success" message: 'success',
} };
const value1 = ref(''); const value1 = ref('');
const value2 = ref(''); const value2 = ref('');
//初始化列表 //初始化列表
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({ const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '请求参数', title: '请求参数',
api: async (params) => { api: async (params) => {
const response = { const response = {
pageNu: "1", pageNu: '1',
pageSize: "10", pageSize: '10',
pages: "1", pages: '1',
total: apiDocColumnsData.length, total: apiDocColumnsData.length,
code:'', code: '',
message:'', message: '',
data: [], data: [],
}; };
return { ...response,data: apiDocColumnsData }; return { ...response, data: apiDocColumnsData };
}, },
columns:apiDocColumns, columns: apiDocColumns,
useSearchForm: false, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
showIndexColumn:false, showIndexColumn: false,
bordered: true, bordered: true,
scroll: { y: 300 }, scroll: { y: 300 },
}); });
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
setDrawerProps({ confirmLoading: false }); setDrawerProps({ confirmLoading: false });
}); });
/**测试 按钮*/ /**测试 按钮*/
function testButton() { function testButton() {
value1.value = jsonData1 value1.value = jsonData1;
value2.value = jsonData2 value2.value = jsonData2;
} }
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
closeDrawer() closeDrawer();
} }
</script> </script>
src/views/dataService/serviceDevelopment/BasicInfoDrawer.vue
View file @ eff0cfa8
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
width="30%" width="30%"
@ok="handleSubmit" @ok="handleSubmit"
> >
<BasicForm @register="registerForm"/> <BasicForm @register="registerForm" />
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -16,16 +16,16 @@ ...@@ -16,16 +16,16 @@
import { guideModeFormSchema2 } from './api.data'; import { guideModeFormSchema2 } from './api.data';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'; import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { BasicTree, TreeItem } from '@/components/Tree'; import { BasicTree, TreeItem } from '@/components/Tree';
import { roleDetailApi,roleUpdataApi,addRoleApi } from "@/api/system/role/role"; import { roleDetailApi, roleUpdataApi, addRoleApi } from '@/api/system/role/role';
import { getMenuSelect,getRoleMenuSelected } from "@/api/system/menu/menu"; import { getMenuSelect, getRoleMenuSelected } from '@/api/system/menu/menu';
import {encryptTwo} from "@/utils/jsencrypt"; import { encryptTwo } from '@/utils/jsencrypt';
import {useMessage} from "@/hooks/web/useMessage"; import { useMessage } from '@/hooks/web/useMessage';
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const isUpdate = ref(true); const isUpdate = ref(true);
const roleId = ref(''); const roleId = ref('');
const getTitle = computed(() => ('基本信息')); const getTitle = computed(() => '基本信息');
const treeData = ref<TreeItem[]>([]); const treeData = ref<TreeItem[]>([]);
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 90, labelWidth: 90,
...@@ -37,11 +37,9 @@ ...@@ -37,11 +37,9 @@
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
resetFields(); resetFields();
setDrawerProps({ confirmLoading: false }); setDrawerProps({ confirmLoading: false });
}); });
async function handleSubmit() { async function handleSubmit() {
closeDrawer();
} }
</script> </script>
src/views/dataService/serviceDevelopment/DebugModal.vue
View file @ eff0cfa8
<template> <template>
<BasicModal width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<div class="div3"> <div class="div3">
调试模式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Select 调试模式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Select
class="selectCss" class="selectCss"
...@@ -10,109 +16,133 @@ ...@@ -10,109 +16,133 @@
@search="handleSearch" @search="handleSearch"
/> />
</div> </div>
<div style="display: flex;margin-top: 10px;margin-bottom: 10px" v-if="optionValue === 'curl调试'"> <div
style="display: flex; margin-top: 10px; margin-bottom: 10px"
v-if="optionValue === 'curl调试'"
>
curl&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; curl&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Textarea rows="6" style="width: 80%" :value="curl"/> <Textarea rows="6" style="width: 80%" :value="curl" />
</div> </div>
<div style="display: flex;margin-top: 10px;margin-bottom: 10px" v-if="optionValue === '参数化调试'"> <div
style="display: flex; margin-top: 10px; margin-bottom: 10px"
v-if="optionValue === '参数化调试'"
>
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="addButton">添加</a-button> <a-button type="primary" @click="addButton">添加</a-button>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
<a-button type="primary" style="margin-top: 10px;margin-bottom: 10px" @click="typeManageButton">调试</a-button> <a-button type="primary" style="margin-top: 10px; margin-bottom: 10px" @click="typeManageButton"
<div style="display: flex;margin-top: 10px;margin-bottom: 10px"> >调试</a-button
>
<div style="display: flex; margin-top: 10px; margin-bottom: 10px">
响应头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 响应头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Textarea rows="6" style="width: 80%" :value="hearder"/> <Textarea rows="6" style="width: 80%" :value="hearder" />
</div> </div>
<div style="display: flex;margin-top: 10px;margin-bottom: 10px"> <div style="display: flex; margin-top: 10px; margin-bottom: 10px">
响应报文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 响应报文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Textarea rows="6" style="width: 80%" :value="hearderText"/> <Textarea rows="6" style="width: 80%" :value="hearderText" />
</div> </div>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { trusteeshipTableColumns4 } from './api.data'; import { trusteeshipTableColumns4 } from './api.data';
import {trusteeshipTableData4} from './apiData' import { trusteeshipTableData4 } from './apiData';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { Select,Textarea } from 'ant-design-vue'; import { Select, Textarea } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const getTitle = computed(() => ('原始出参调试')); const getTitle = computed(() => '原始出参调试');
const curl = ref('http://172.26.2.22:28180/studio/api/workflow/v1/executor-\n' + const curl = ref(
'http://172.26.2.22:28180/studio/api/workflow/v1/executor-\n' +
'manage/query/all-executor-info?page=1&size=1 -H Accept:\n' + 'manage/query/all-executor-info?page=1&size=1 -H Accept:\n' +
'application/json, text/plain, / -H Accept-Language: zh-CN\n' + 'application/json, text/plain, / -H Accept-Language: zh-CN\n' +
',zh;q=0.9,en;q=0.8 -H Connection: keep-alive -H Conten\n' + ',zh;q=0.9,en;q=0.8 -H Connection: keep-alive -H Conten\n' +
't-Type: application/json;charset=UTF-8 -H Cookie\n' + 't-Type: application/json;charset=UTF-8 -H Cookie\n' +
': SESSION=0061390c-241e-4681-8162-lbaffefec8daccc') ': SESSION=0061390c-241e-4681-8162-lbaffefec8daccc',
const hearder = ref('HTTP/1.1 200 OK\n' + );
const hearder = ref(
'HTTP/1.1 200 OK\n' +
'transfer-encoding: chunked\n' + 'transfer-encoding: chunked\n' +
'X-Content-Type-Options: nosniff\n' + 'X-Content-Type-Options: nosniff\n' +
'X-XSS-Protection: 1; mode=block\n' + 'X-XSS-Protection: 1; mode=block\n' +
'Cache-Control: no-cache, no-store, max-age=0, must-revalidate\n' + 'Cache-Control: no-cache, no-store, max-age=0, must-revalidate\n' +
'Pragma: no-cache') 'Pragma: no-cache',
const hearderText = ref('{"pagination": { "page": 1,"total": 5, "size": 10 },"data": [{"@Clazz": "io.transwarp.studio.foundation.navigator.entity.dto.DataApiNodeWithPath", "relatedCategory": null "workspaceUuid": "2","nodeType": "FILE","category": "SERVICE","description": "","owner": "admin","tenant": null,"size": "","readOnly": false,"createTime": "2022-12-01T05:47:04.000+00:00","updateTime": "2022-12-02T03:36:04.000+00:00","used": null,"relatedUuid": "","remark": null,"path": {"relatedCategory": "WORKSPACE","workspaceUuid": "2","nodeType": "DIR","category": "SERVICE","uuid": "B9D"}}]}') );
const hearderText = ref(
'{"pagination": { "page": 1,"total": 5, "size": 10 },"data": [{"@Clazz": "io.transwarp.studio.foundation.navigator.entity.dto.DataApiNodeWithPath", "relatedCategory": null "workspaceUuid": "2","nodeType": "FILE","category": "SERVICE","description": "","owner": "admin","tenant": null,"size": "","readOnly": false,"createTime": "2022-12-01T05:47:04.000+00:00","updateTime": "2022-12-02T03:36:04.000+00:00","used": null,"relatedUuid": "","remark": null,"path": {"relatedCategory": "WORKSPACE","workspaceUuid": "2","nodeType": "DIR","category": "SERVICE","uuid": "B9D"}}]}',
);
const options = ref([ const options = ref([
{ {
label: 'curl调试', label: 'curl调试',
value: 'curl调试' value: 'curl调试',
}, },
{ {
label: '参数化调试', label: '参数化调试',
value: '参数化调试' value: '参数化调试',
}, },
]) ]);
const optionValue = ref('curl调试') const optionValue = ref('curl调试');
let trusteeshipTableDataList4 = ref(trusteeshipTableData4);
//初始化弹框 //初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,okText: '解析' }); setModalProps({ confirmLoading: false, okText: '解析' });
}); });
const [registerTable] = useTable({ const [registerTable, { reload }] = useTable({
title: '', title: '',
api: async (params) => { api: async (params) => {
var data = []; var data = [];
const response = { const response = {
pageNu: "1", pageNu: '1',
pageSize: "10", pageSize: '10',
pages: "1", pages: '1',
total: trusteeshipTableData4.length, total: trusteeshipTableDataList4.value.length,
code:'', code: '',
message:'', message: '',
data: [], data: [],
}; };
//过滤data中的数据，取出等于params.deptId的数据 //过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: trusteeshipTableData4 }; return { ...response, data: trusteeshipTableDataList4.value };
}, },
columns:trusteeshipTableColumns4, columns: trusteeshipTableColumns4,
useSearchForm: false, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
showIndexColumn:false, showIndexColumn: false,
pagination: false, pagination: false,
bordered: true, bordered: true,
scroll: { y: 300 }, scroll: { y: 300 },
}); });
function addButton() {
const param = {
parameterCode: 'Basic Input',
parameterLocation: 'BODY',
Xpath: 'root/a.b/value[0,a]',
dataType: 'string',
};
trusteeshipTableDataList4.value.push(param);
reload();
}
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
closeModal();
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.selectCss{ .selectCss {
::v-deep(.ant-select-selector){ ::v-deep(.ant-select-selector) {
width:200px!important; width: 200px !important;
}
} }
}
</style> </style>
src/views/dataService/serviceDevelopment/MoveModal.vue
View file @ eff0cfa8
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { moveFormSchema } from './api.data'; import { moveFormSchema } from './api.data';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "./apiData"; import { TreeData } from './apiData';
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const rowId = ref(''); const rowId = ref('');
const getTitle = computed(() => ('移动')); const getTitle = computed(() => '移动');
//获取接口数据并放在下拉框里（这里是打开了一个弹框） //获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单 //初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
...@@ -33,13 +39,13 @@ ...@@ -33,13 +39,13 @@
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
setFieldsValue({ setFieldsValue({
...data.record, ...data.record,
}) });
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined) const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([ updateSchema([
{ {
field: 'path', field: 'path',
componentProps: { componentProps: {
treeData: treeList treeData: treeList,
}, },
}, },
]); ]);
...@@ -48,27 +54,35 @@ ...@@ -48,27 +54,35 @@
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
createMessage.success('移动成功'); createMessage.success('移动成功');
closeModal() closeModal();
} }
/**数组对象转成树*/ /**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) { function handleTree(data, id, parentId, children, rootId) {
id = id || 'id' id = id || 'id';
parentId = parentId || 'parentId' parentId = parentId || 'parentId';
children = children || 'children' children = children || 'children';
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0 rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆 // 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data)) const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项 // 循环所有项
const treeData = cloneData.filter(father => { const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter(child => { const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组 // 返回每一项的子级数组
return father[id] === child[parentId] return father[id] === child[parentId];
}) });
branchArr.length > 0 ? father.children = branchArr : '' branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层 // 返回第一层
return father[parentId] === rootId return father[parentId] === rootId;
}) });
return treeData !== '' ? treeData : data return treeData !== '' ? treeData : data;
} }
</script> </script>
src/views/dataService/serviceDevelopment/PublishApplicationModal.vue
View file @ eff0cfa8
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { publishApplicationFormSchema } from './api.data'; import { publishApplicationFormSchema } from './api.data';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "@/views/dataStandards/basicStandards/basicStandardsData"; import { TreeData } from '@/views/dataStandards/basicStandards/basicStandardsData';
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const rowId = ref(''); const rowId = ref('');
const getTitle = computed(() => ('版本发布申请')); const getTitle = computed(() => '版本发布申请');
//获取接口数据并放在下拉框里（这里是打开了一个弹框） //获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单 //初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
...@@ -33,13 +40,12 @@ ...@@ -33,13 +40,12 @@
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
setFieldsValue({ setFieldsValue({
...data.record, ...data.record,
}) });
}); });
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
createMessage.success('移动成功'); createMessage.success('发布成功');
closeModal() closeModal();
} }
</script> </script>
src/views/dataService/serviceDevelopment/index.vue
View file @ eff0cfa8
...@@ -33,31 +33,37 @@ ...@@ -33,31 +33,37 @@
{ {
icon: 'ant-design:form-outlined', icon: 'ant-design:form-outlined',
// label: '重命名', // label: '重命名',
tooltip: '重命名',
onClick: resetNameButton.bind(null, record), onClick: resetNameButton.bind(null, record),
}, },
{ {
icon: 'ant-design:fund-projection-screen-outlined', icon: 'ant-design:fund-projection-screen-outlined',
// label: '重命名', // label: '重命名',
tooltip: 'API监控',
onClick: apiMonitorButton.bind(null, record), onClick: apiMonitorButton.bind(null, record),
}, },
{ {
icon: 'eos-icons:api-outlined', icon: 'eos-icons:api-outlined',
// label: 'api doc', // label: 'api doc',
tooltip: 'api doc',
onClick: apiDocButton.bind(null, record), onClick: apiDocButton.bind(null, record),
}, },
{ {
icon: 'ant-design:send-outlined', icon: 'ant-design:send-outlined',
// label: '发布', // label: '发布',
tooltip: '发布',
onClick: publishButton.bind(null, record), onClick: publishButton.bind(null, record),
}, },
{ {
icon: 'ant-design:folder-open-outlined', icon: 'ant-design:folder-open-outlined',
// label: '移动', // label: '移动',
tooltip: '移动',
onClick: MoveButton.bind(null, record), onClick: MoveButton.bind(null, record),
}, },
{ {
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
// label: '删除', // label: '删除',
tooltip: '删除',
color: 'error', color: 'error',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
...@@ -68,11 +74,13 @@ ...@@ -68,11 +74,13 @@
{ {
icon: 'ant-design:folder-outlined', icon: 'ant-design:folder-outlined',
// label: '复制', // label: '复制',
tooltip: '复制',
onClick: copyButton.bind(null, record), onClick: copyButton.bind(null, record),
}, },
{ {
icon: 'ant-design:down-circle-outlined', icon: 'ant-design:down-circle-outlined',
// label: '版本管理', // label: '版本管理',
tooltip: '版本管理',
onClick: versionButton.bind(null, record), onClick: versionButton.bind(null, record),
}, },
]" ]"
......
src/views/dataService/serviceDevelopment/sqlModeApi.vue
View file @ eff0cfa8
<template> <template>
<PageWrapper title="SQL模式" class="content-padding" contentBackground @back="goBack"> <PageWrapper class="content-padding" contentBackground @back="goBack">
<div style="display: flex; justify-content: flex-end;margin-bottom: 10px"> <template #headerContent>
<a-button type="primary" @click="basicInfoButton" style="margin-right: 10px">基本信息</a-button> <div class="modal_top">
<a-button type="primary" @click="dataPreviewButton" style="margin-right: 10px">数据预览</a-button> <div style="display: flex">
<a-button type="primary" @click="apiTestButton" style="margin-right: 10px">API测试</a-button> <Icon
<a-button type="primary" @click="publishButton" style="margin-right: 10px">发布</a-button> @click="goBack"
class="backBtn"
icon="eva:arrow-ios-back-outline"
:size="30"
:color="'#666C81'"
/>
<div style="display: flex">
<Icon icon="meteor-icons:plug" :size="37" :color="'#5b72fb'" />
<div>
<div class="title">test02</div>
<div style="margin-left: 10px" class="path"> API / 共享工作区 / test02 </div>
</div>
</div>
</div>
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px">
<a-button type="primary" @click="basicInfoButton" style="margin-right: 10px"
>基本信息</a-button
>
<a-button type="primary" @click="dataPreviewButton" style="margin-right: 10px"
>数据预览</a-button
>
<a-button type="primary" @click="apiTestButton" style="margin-right: 10px"
>API测试</a-button
>
<a-button
:disabled="!isSave"
type="primary"
@click="publishButton"
style="margin-right: 10px"
>发布</a-button
>
<a-button type="primary" @click="saveButton" style="margin-right: 10px">保存</a-button> <a-button type="primary" @click="saveButton" style="margin-right: 10px">保存</a-button>
</div> </div>
</div>
</template>
<div class="step-form-form"> <div class="step-form-form">
<Steps :current="current"> <Steps :current="current">
<Steps.Step title="原始参数配置" /> <Steps.Step title="原始参数配置" />
...@@ -15,21 +47,22 @@ ...@@ -15,21 +47,22 @@
</Steps> </Steps>
</div> </div>
<Step1 @next="handleStep1Next" v-show="current === 0" /> <Step1 @next="handleStep1Next" v-show="current === 0" />
<Step2 @prev="handleStepPrev" @next="handleStep1Next" v-show="current === 1"/> <Step2 @prev="handleStepPrev" @next="handleStep1Next" v-show="current === 1" />
<Step3 @prev="handleStepPrev" v-show="current === 2"/> <Step3 @prev="handleStepPrev" v-show="current === 2" />
<!-- 基本信息 抽屉--> <!--基本信息 抽屉-->
<BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" /> <BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" />
<!-- api测试 抽屉--> <!--api测试 抽屉-->
<ApiTestDrawer @register="registerApiTestDrawer" @success="handleSuccess" /> <ApiTestDrawer @register="registerApiTestDrawer" @success="handleSuccess" />
<!-- 数据预览 抽屉--> <!--数据预览 抽屉-->
<DataPreviewDrawer @register="registerDataPreviewDrawer" @success="handleSuccess" /> <DataPreviewDrawer @register="registerDataPreviewDrawer" @success="handleSuccess" />
<!-- 版本发布申请 弹窗--> <!--版本发布申请 弹窗-->
<PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" /> <PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Icon from '@/components/Icon/Icon.vue';
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Steps } from 'ant-design-vue'; import { Steps } from 'ant-design-vue';
...@@ -38,18 +71,22 @@ ...@@ -38,18 +71,22 @@
import Step3 from './sqlModeStep3.vue'; import Step3 from './sqlModeStep3.vue';
import { useGo } from '@/hooks/web/usePage'; import { useGo } from '@/hooks/web/usePage';
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import BasicInfoDrawer from './BasicInfoDrawer.vue' import BasicInfoDrawer from './BasicInfoDrawer.vue';
import ApiTestDrawer from './ApiTestDrawer.vue' import ApiTestDrawer from './ApiTestDrawer.vue';
import DataPreviewDrawer from './DataPreviewDrawer.vue' import DataPreviewDrawer from './DataPreviewDrawer.vue';
import PublishApplicationModal from './PublishApplicationModal.vue' import PublishApplicationModal from './PublishApplicationModal.vue';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { router } from '@/router';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountDetail' }); defineOptions({ name: 'AccountDetail' });
const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal(); const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal();
const [registerDataPreviewDrawer, { openDrawer:openDataPreviewDrawer }] = useDrawer(); const [registerDataPreviewDrawer, { openDrawer: openDataPreviewDrawer }] = useDrawer();
const [registerApiTestDrawer, { openDrawer:openApiTestDrawer }] = useDrawer(); const [registerApiTestDrawer, { openDrawer: openApiTestDrawer }] = useDrawer();
const current = ref(0); const current = ref(0);
const isSave = ref(false);
const go = useGo(); const go = useGo();
function handleStep1Next(step1Values: any) { function handleStep1Next(step1Values: any) {
...@@ -62,37 +99,40 @@ ...@@ -62,37 +99,40 @@
/**基本信息*/ /**基本信息*/
function basicInfoButton() { function basicInfoButton() {
openDrawer(true, { openDrawer(true, {});
});
} }
/**API测试*/ /**API测试*/
function apiTestButton() { function apiTestButton() {
openApiTestDrawer(true,{}) openApiTestDrawer(true, {});
} }
/**数据预览*/ /**数据预览*/
function dataPreviewButton() { function dataPreviewButton() {
openDataPreviewDrawer(true,{ openDataPreviewDrawer(true, {});
})
} }
/**发布 按钮*/ /**发布 按钮*/
function publishButton() { function publishButton() {
const data = { const data = {
apiName:'test02' apiName: 'test02',
};
openPublishApplicationModal(true, {
record: data,
});
} }
openPublishApplicationModal(true,{
record:data /**保存 按钮**/
}) function saveButton() {
isSave.value = true;
createMessage.success('保存成功!');
} }
// 页面左侧点击返回链接时的操作 // 页面左侧点击返回链接时的操作
function goBack() { function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页 // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
go('/kinship/kinshipParse/index'); // go('/kinship/kinshipParse/index');
router.go(-1);
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -105,4 +145,18 @@ ...@@ -105,4 +145,18 @@
width: 750px; width: 750px;
margin: 0 auto; margin: 0 auto;
} }
.modal_top {
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 25px;
font-weight: 500;
margin-left: 10px;
}
.path {
font-size: 14px;
color: gray;
}
}
</style> </style>
src/views/dataService/serviceDevelopment/sqlModeStep1.vue
View file @ eff0cfa8
<template> <template>
<PageWrapper contentClass="content-padding"> <PageWrapper contentClass="content-padding">
<div style="display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 10px"> <div
style="display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 10px"
>
<div> <div>
数据源&nbsp;&nbsp;<Select 数据源&nbsp;&nbsp;<Select
width="60%" width="60%"
...@@ -16,14 +18,19 @@ ...@@ -16,14 +18,19 @@
</div> </div>
</div> </div>
<div> <div>
<Alert message="请求参数以 #{参数} 在sql中占位，行权限参数以 {参数} 在SQL中占位； SQL示例： select name,age from t_user where sex = #{sex} and deleted = #{deleted} and organid = {organid} limit #{offset},#{maxRows}" show-icon /> <Alert
message="请求参数以 #{参数} 在sql中占位，行权限参数以 {参数} 在SQL中占位； SQL示例： select name,age from t_user where sex = #{sex} and deleted = #{deleted} and organid = {organid} limit #{offset},#{maxRows}"
show-icon
/>
</div> </div>
<div class="editor"> <div class="editor">
<CodeEditor v-model:value="sql" /> <CodeEditor v-model:value="sql" />
</div> </div>
<div style="display: flex; justify-content: flex-start;"> <div style="display: flex; justify-content: flex-start">
<a-button type="primary" @click="" style="margin-right: 10px">解析</a-button> <a-button type="primary" @click="" style="margin-right: 10px">解析</a-button>
<a-button type="primary" @click="settingSQLButton" style="margin-right: 10px">SQL设置</a-button> <a-button type="primary" @click="settingSQLButton" style="margin-right: 10px"
>SQL设置</a-button
>
<BasicUpload <BasicUpload
:maxSize="20" :maxSize="20"
:maxNumber="10" :maxNumber="10"
...@@ -53,52 +60,51 @@ ...@@ -53,52 +60,51 @@
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
<div style="display:flex;justify-content: flex-end"> <div style="display: flex; justify-content: flex-end">
<a-button style="margin-top: 20px" type="primary" @click="customSubmitFunc">下一步</a-button> <a-button style="margin-top: 20px" type="primary" @click="customSubmitFunc">下一步</a-button>
</div> </div>
<!-- SQL设置 弹窗--> <!-- SQL设置 弹窗-->
<SqlSettingModal @register="registerSqlSettingModal" @success="handleSuccess" /> <SqlSettingModal @register="registerSqlSettingModal" @success="handleSuccess" />
<!-- 元数据预览 抽屉--> <!-- 元数据预览 抽屉-->
<MetadataPreviewDrawer @register="registerMetadataPreviewDrawer" @success="handleSuccess" /> <MetadataPreviewDrawer @register="registerMetadataPreviewDrawer" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Card, Tabs, TabPane } from 'ant-design-vue'; import { Card, Tabs, TabPane, Alert, Space, Select } from 'ant-design-vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import BasicTable from '@/components/Table/src/BasicTable.vue'; import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table'; import { useTable } from '@/components/Table';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue"; import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue';
import {step1TableColumns1,step1TableColumns2,step1TableColumns3} from './api.data' import { step1TableColumns1, step1TableColumns2, step1TableColumns3 } from './api.data';
import {step1SQLData,step1TableData1,step1TableData2,step1TableData3} from './apiData' import { step1SQLData, step1TableData1, step1TableData2, step1TableData3 } from './apiData';
import { Alert, Space } from 'ant-design-vue'; import SqlSettingModal from './sqlSettingModal.vue';
import { Select } from 'ant-design-vue'; import MetadataPreviewDrawer from './MetadataPreviewDrawer.vue';
import SqlSettingModal from './sqlSettingModal.vue'
import MetadataPreviewDrawer from './MetadataPreviewDrawer.vue'
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import { BasicUpload } from '@/components/Upload'; import { BasicUpload } from '@/components/Upload';
const [registerMetadataPreviewDrawer, { openDrawer:openMetadataPreviewDrawer }] = useDrawer(); const [registerMetadataPreviewDrawer, { openDrawer: openMetadataPreviewDrawer }] = useDrawer();
const [registerRunModal, { openModal: openRunModal }] = useModal(); const [registerRunModal, { openModal: openRunModal }] = useModal();
const [registerSqlSettingModal, { openModal: openSqlSettingModal }] = useModal(); const [registerSqlSettingModal, { openModal: openSqlSettingModal }] = useModal();
const [registerSelectDatasourceModal, { openModal: openSelectDatasourceModal }] = useModal(); const [registerSelectDatasourceModal, { openModal: openSelectDatasourceModal }] = useModal();
const businessId = ref(); const businessId = ref();
let step1TableDataList3 = ref(step1TableData3);
const emit = defineEmits(['next']); const emit = defineEmits(['next']);
const sql = ref(step1SQLData[0].sql); const sql = ref(step1SQLData[0].sql);
const options = ref([ const options = ref([
{ {
label: 'mysql-36', label: 'mysql-36',
value: '1' value: '1',
}, },
{ {
label: 'mysql2', label: 'mysql2',
value: '2' value: '2',
}, },
]) ]);
const optionValue = ref('') const optionValue = ref('');
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const [registerTable1] = useTable({ const [registerTable1] = useTable({
api: async () => { api: async () => {
...@@ -114,7 +120,7 @@ ...@@ -114,7 +120,7 @@
return { ...response }; return { ...response };
}, },
rowKey: 'key', rowKey: 'key',
columns:step1TableColumns1, columns: step1TableColumns1,
showIndexColumn: false, showIndexColumn: false,
showTableSetting: false, showTableSetting: false,
scroll: { y: 300 }, scroll: { y: 300 },
...@@ -133,26 +139,26 @@ ...@@ -133,26 +139,26 @@
return { ...response }; return { ...response };
}, },
rowKey: 'key', rowKey: 'key',
columns:step1TableColumns2, columns: step1TableColumns2,
showIndexColumn: false, showIndexColumn: false,
showTableSetting: false, showTableSetting: false,
scroll: { y: 300 }, scroll: { y: 300 },
}); });
const [registerTable3] = useTable({ const [registerTable3, { reload: reload3 }] = useTable({
api: async () => { api: async () => {
const response = { const response = {
pageNu: '1', pageNu: '1',
pageSize: '10', pageSize: '10',
pages: '1', pages: '1',
total: step1TableData3.length, total: step1TableDataList3.value.length,
code: '', code: '',
message: '', message: '',
data: step1TableData3, data: step1TableDataList3.value,
}; };
return { ...response }; return { ...response };
}, },
rowKey: 'key', rowKey: 'key',
columns:step1TableColumns3, columns: step1TableColumns3,
showIndexColumn: false, showIndexColumn: false,
showTableSetting: false, showTableSetting: false,
scroll: { y: 300 }, scroll: { y: 300 },
...@@ -170,24 +176,31 @@ ...@@ -170,24 +176,31 @@
} }
} }
function addParameterButton() {
const param = {
column: '',
alias: '',
sourceSql: '',
sql: '',
comment: '',
};
step1TableDataList3.value.push(param);
reload3();
}
/**SQL设置*/ /**SQL设置*/
function settingSQLButton() { function settingSQLButton() {
openSqlSettingModal(true,{ openSqlSettingModal(true, {});
})
} }
/**元数据预览*/ /**元数据预览*/
function previewButton() { function previewButton() {
openMetadataPreviewDrawer(true, { openMetadataPreviewDrawer(true, {});
});
} }
/**初始化*/ /**初始化*/
onMounted(() => { onMounted(() => {
optionValue.value = '1' optionValue.value = '1';
}); });
</script> </script>
<style scoped> <style scoped>
......
src/views/dataService/serviceDevelopment/sqlModeStep2.vue
View file @ eff0cfa8
<template> <template>
<div class="step2"> <div class="step2">
<div style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;display: flex"> <div style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px; display: flex">
配置模式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Select 配置模式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Select
class="selectCss" class="selectCss"
v-model:value="optionValue1" v-model:value="optionValue1"
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
:options="options1" :options="options1"
@search="handleSearch" @search="handleSearch"
/> />
<div style="margin-left: 20px" v-if="optionValue1 == '脚本模式'"> <div style="margin-left: 20px" v-if="optionValue1 === '脚本模式'">
脚本语言&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Select 脚本语言&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Select
class="selectCss" class="selectCss"
v-model:value="optionValue3" v-model:value="optionValue3"
...@@ -19,15 +19,29 @@ ...@@ -19,15 +19,29 @@
@search="handleSearch" @search="handleSearch"
/> />
</div> </div>
<a-button style="margin-left: 20px" type="primary" @click="mappingButton" v-if="optionValue1 != '脚本模式'">一键映射</a-button> <a-button
style="margin-left: 20px"
type="primary"
@click="mappingButton"
v-if="optionValue1 !== '脚本模式'"
>一键映射</a-button
>
</div> </div>
<div v-if="optionValue1 != '脚本模式'"> <div v-if="optionValue1 !== '脚本模式'">
<div style="font-size: 16px;font-weight: bold;margin-top: 20px;margin-bottom: 20px;margin-left: 10px"> <div
style="
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
"
>
开放入参定义 开放入参定义
</div> </div>
<div style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px"> <div style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px">
参数配置方式&nbsp;&nbsp;&nbsp;<Select 参数配置方式&nbsp;&nbsp;&nbsp;<Select
class="selectCss" class="selectCss"
v-model:value="optionValue2" v-model:value="optionValue2"
...@@ -38,15 +52,22 @@ ...@@ -38,15 +52,22 @@
/> />
</div> </div>
<div style="display: flex;margin-top: 20px;margin-bottom: 20px;margin-left: 10px" v-if="optionValue2 === '自动解析'"> <div
<div style="font-size: 16px">json</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style="display: flex; margin-top: 20px; margin-bottom: 20px; margin-left: 10px"
<Textarea rows="4" style="width: 35%" :value="json"/> v-if="optionValue2 === '自动解析'"
<a-button type="primary" style="margin-top: 5%;margin-left: 10px" @click="typeManageButton">解析</a-button> >
<div style="font-size: 16px">json</div
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Textarea rows="4" style="width: 35%" :value="json" />
<a-button type="primary" style="margin-top: 5%; margin-left: 10px" @click="typeManageButton"
>解析</a-button
>
</div> </div>
<BasicTable @register="registerTable1"> <BasicTable @register="registerTable1">
<template #toolbar> <template #toolbar>
<BasicUpload <BasicUpload
v-if="optionValue2 !== '自动解析'"
:maxSize="20" :maxSize="20"
:maxNumber="10" :maxNumber="10"
@change="handleChange" @change="handleChange"
...@@ -86,12 +107,14 @@ ...@@ -86,12 +107,14 @@
</BasicTable> </BasicTable>
</div> </div>
</div> </div>
<div v-if="optionValue1 == '脚本模式'"> <div v-if="optionValue1 === '脚本模式'">
<CodeEditor v-model:value="sql"/> <CodeEditor v-model:value="sql" />
</div> </div>
<div style="display: flex;justify-content: flex-end;margin-top: 20px"> <div style="display: flex; justify-content: flex-end; margin-top: 20px">
<a-button style="margin-right: 20px" type="primary" @click="customResetFunc">上一步</a-button> <a-button style="margin-right: 20px" type="primary" @click="customResetFunc">上一步</a-button>
<a-button style="margin-right: 10px" type="primary" @click="customSubmitFunc">下一步</a-button> <a-button style="margin-right: 10px" type="primary" @click="customSubmitFunc"
>下一步</a-button
>
</div> </div>
</div> </div>
</template> </template>
...@@ -99,73 +122,75 @@ ...@@ -99,73 +122,75 @@
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { Description } from '@/components/Description'; import { Description } from '@/components/Description';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { step2TableData1,step2TableData2,step1SQLData } from './apiData'; import { step2TableData1, step2TableData2, step1SQLData } from './apiData';
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { Select,Textarea } from 'ant-design-vue'; import { Select, Textarea } from 'ant-design-vue';
import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue"; import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns,step2TableColumns1,step2TableColumns2 } from './api.data'; import { columns, step2TableColumns1, step2TableColumns2 } from './api.data';
import { BasicUpload } from '@/components/Upload'; import { BasicUpload } from '@/components/Upload';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const emit = defineEmits(['next']); const emit = defineEmits(['next']);
const tableData1 = ref(step2TableData1) const tableData1 = ref(step2TableData1);
const optionValue1 = ref('') const optionValue1 = ref('');
const optionValue2 = ref('') const optionValue2 = ref('');
const optionValue3 = ref('') const optionValue3 = ref('');
const options1 = ref([ const options1 = ref([
{ {
label: '映射规则', label: '映射规则',
value: '映射规则' value: '映射规则',
}, },
{ {
label: '脚本模式', label: '脚本模式',
value: '脚本模式' value: '脚本模式',
}, },
]) ]);
const options2 = ref([ const options2 = ref([
{ {
label: '自动解析', label: '自动解析',
value: '自动解析' value: '自动解析',
}, },
{ {
label: '手动添加', label: '手动添加',
value: '手动添加' value: '手动添加',
}, },
]) ]);
const options3 = ref([ const options3 = ref([
{ {
label: 'JAVA', label: 'JAVA',
value: 'JAVA' value: 'JAVA',
}, },
{ {
label: 'Groovy', label: 'Groovy',
value: 'Groovy' value: 'Groovy',
}, },
]) ]);
const sql = ref(step1SQLData[0].sql); const sql = ref(step1SQLData[0].sql);
const show = ref(false) const show = ref(false);
const json = ref('{ "category": "SERVICE", "page": 1, "size": 10, "searchText": "", "uuid": "5B86749FD7CFB3CFF8100794FE15D3E", "sortRules": [], "filterRules": [], "timeRangeFilters": [], "fieldFuzzySearch": [], "childrenRequest": null, "catalogFlag": false }') const json = ref(
const [registerTable1,{reload:reload1}] = useTable({ '{ "category": "SERVICE", "page": 1, "size": 10, "searchText": "", "uuid": "5B86749FD7CFB3CFF8100794FE15D3E", "sortRules": [], "filterRules": [], "timeRangeFilters": [], "fieldFuzzySearch": [], "childrenRequest": null, "catalogFlag": false }',
);
const [registerTable1, { reload: reload1 }] = useTable({
title: '', title: '',
api: async (params) => { api: async (params) => {
var data = []; var data = [];
const response = { const response = {
pageNu: "1", pageNu: '1',
pageSize: "10", pageSize: '10',
pages: "1", pages: '1',
total: tableData1.value.length, total: tableData1.value.length,
code:'', code: '',
message:'', message: '',
data: [], data: [],
}; };
//过滤data中的数据，取出等于params.deptId的数据 //过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: tableData1.value }; return { ...response, data: tableData1.value };
}, },
columns:step2TableColumns1, columns: step2TableColumns1,
useSearchForm: false, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
showIndexColumn:false, showIndexColumn: false,
bordered: true, bordered: true,
scroll: { y: 300 }, scroll: { y: 300 },
actionColumn: { actionColumn: {
...@@ -179,37 +204,39 @@ ...@@ -179,37 +204,39 @@
api: async (params) => { api: async (params) => {
var data = []; var data = [];
const response = { const response = {
pageNu: "1", pageNu: '1',
pageSize: "10", pageSize: '10',
pages: "1", pages: '1',
total: step2TableData2.length, total: step2TableData2.length,
code:'', code: '',
message:'', message: '',
data: [], data: [],
}; };
//过滤data中的数据，取出等于params.deptId的数据 //过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: step2TableData2 }; return { ...response, data: step2TableData2 };
}, },
columns:step2TableColumns2, columns: step2TableColumns2,
useSearchForm: false, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
showIndexColumn:false, showIndexColumn: false,
bordered: true, bordered: true,
scroll: { y: 300 }, scroll: { y: 300 },
}); });
const deleteList = ref([]);
/**删除按钮*/ /**删除按钮*/
function deleteButton() { function deleteButton(record) {
console.log(record);
deleteList.value.push(record.Xpath);
tableData1.value = step2TableData1.filter((item) => !deleteList.value.includes(item.Xpath));
reload1();
createMessage.success('删除成功!'); createMessage.success('删除成功!');
} }
function customSubmitFunc() { function customSubmitFunc() {
try { try {
emit('next', ''); emit('next', '');
} catch (error) { } catch (error) {}
}
} }
function customResetFunc() { function customResetFunc() {
...@@ -218,37 +245,36 @@ ...@@ -218,37 +245,36 @@
/**一键映射 按钮*/ /**一键映射 按钮*/
function mappingButton() { function mappingButton() {
show.value = true show.value = true;
} }
/**添加参数*/ /**添加参数*/
function addParamButton(){ function addParamButton() {
const param = { const param = {
parameterCode:'', parameterCode: '',
parameterLocation:'', parameterLocation: '',
Xpath:'', Xpath: '',
dataType:'', dataType: '',
comment:'', comment: '',
isNeed:'', isNeed: '',
defaultValue:'', defaultValue: '',
exampleValue:'' exampleValue: '',
} };
tableData1.value.push(param) tableData1.value.push(param);
reload1() reload1();
} }
/**初始化*/ /**初始化*/
onMounted(() => { onMounted(() => {
optionValue1.value = '映射规则' optionValue1.value = '映射规则';
optionValue2.value = '手动添加' optionValue2.value = '手动添加';
optionValue3.value = 'JAVA' optionValue3.value = 'JAVA';
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.selectCss{ .selectCss {
::v-deep(.ant-select-selector){ ::v-deep(.ant-select-selector) {
width:200px!important; width: 200px !important;
}
} }
}
</style> </style>
src/views/dataService/serviceDevelopment/trusteeshipApiTest.vue
View file @ eff0cfa8
<template> <template>
<PageWrapper title="API测试" class="content-padding" contentBackground @back="goBack"> <PageWrapper title="API测试" class="content-padding" contentBackground @back="goBack">
<div style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;display: flex"> <div style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px; display: flex">
<div style="font-weight: bold;align-items: center;display: flex">参数输入模式</div> <div style="font-weight: bold; align-items: center; display: flex">参数输入模式</div>
<Select <Select
style="margin-left: 20px" style="margin-left: 20px"
class="selectCss" class="selectCss"
...@@ -13,60 +13,61 @@ ...@@ -13,60 +13,61 @@
/> />
</div> </div>
<div v-if="optionValue === '参数模式'"> <div v-if="optionValue === '参数模式'">
<BasicTable @register="registerTable"/> <BasicTable @register="registerTable" />
</div> </div>
<div v-if="optionValue === '报文模式'"> <div v-if="optionValue === '报文模式'">
<BasicForm @register="registerForm"/> <BasicForm @register="registerForm" />
</div> </div>
<a-button type="primary" @click="testButton(optionValue)">测试</a-button> <a-button type="primary" @click="testButton(optionValue)">测试</a-button>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Icon from '@/components/Icon/Icon.vue';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { Description } from '@/components/Description'; import { Description } from '@/components/Description';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { step2TableData1,step2TableData2,trusteeshipTableData5 } from './apiData'; import { step2TableData1, step2TableData2, trusteeshipTableData5 } from './apiData';
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { Select,Textarea } from 'ant-design-vue'; import { Select, Textarea } from 'ant-design-vue';
import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue"; import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { trusteeshipTableColumns7,trusteeshipFormSchema3 } from './api.data'; import { trusteeshipTableColumns7, trusteeshipFormSchema3 } from './api.data';
import {router} from "@/router"; import { router } from '@/router';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const emit = defineEmits(['next']); const emit = defineEmits(['next']);
const optionValue = ref('') const optionValue = ref('');
const options = ref([ const options = ref([
{ {
label: '参数模式', label: '参数模式',
value: '参数模式' value: '参数模式',
}, },
{ {
label: '报文模式', label: '报文模式',
value: '报文模式' value: '报文模式',
}, },
]) ]);
const show = ref(false) const show = ref(false);
const [registerTable] = useTable({ const [registerTable] = useTable({
title: '请求参数', title: '请求参数',
api: async (params) => { api: async (params) => {
var data = []; var data = [];
const response = { const response = {
pageNu: "1", pageNu: '1',
pageSize: "10", pageSize: '10',
pages: "1", pages: '1',
total: trusteeshipTableData5.length, total: trusteeshipTableData5.length,
code:'', code: '',
message:'', message: '',
data: [], data: [],
}; };
//过滤data中的数据，取出等于params.deptId的数据 //过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: trusteeshipTableData5 }; return { ...response, data: trusteeshipTableData5 };
}, },
columns:trusteeshipTableColumns7, columns: trusteeshipTableColumns7,
useSearchForm: false, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
showIndexColumn:false, showIndexColumn: false,
bordered: true, bordered: true,
scroll: { y: 300 }, scroll: { y: 300 },
}); });
...@@ -81,25 +82,28 @@ ...@@ -81,25 +82,28 @@
}, },
}); });
/**测试按钮*/ /**测试按钮*/
function testButton(){ function testButton() {
router.push({ router.push({
path: '/dataService/serviceDevelopment/trusteeshipApiTestResult', path: '/dataService/serviceDevelopment/trusteeshipApiTestResult',
query: { query: {
optionValue:optionValue.value optionValue: optionValue.value,
}, },
}); });
} }
function goBack() {
router.back();
}
/**初始化*/ /**初始化*/
onMounted(() => { onMounted(() => {
optionValue.value = '参数模式' optionValue.value = '参数模式';
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.selectCss{ .selectCss {
::v-deep(.ant-select-selector){ ::v-deep(.ant-select-selector) {
width:200px!important; width: 200px !important;
}
} }
}
</style> </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