Commit eff0cfa8 authored by chenjiahao's avatar chenjiahao

API服务-修复已知问题

parent d95284e5
...@@ -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,
"data": { columnNames: ['status', 'create_time'],
"valueSize": 20, value: [
"columnNames": [ {
"status", create_time: '2023-07-19 17:15:23',
"create_time" status: '1',
], },
"value": [ ],
{ },
"create_time": "2023-07-19 17:15:23", code: 200,
"status": "1" message: 'success',
} };
]
},
"code": 200,
"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>
...@@ -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>
<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(
'manage/query/all-executor-info?page=1&size=1 -H Accept:\n' + 'http://172.26.2.22:28180/studio/api/workflow/v1/executor-\n' +
'application/json, text/plain, / -H Accept-Language: zh-CN\n' + 'manage/query/all-executor-info?page=1&size=1 -H Accept:\n' +
',zh;q=0.9,en;q=0.8 -H Connection: keep-alive -H Conten\n' + 'application/json, text/plain, / -H Accept-Language: zh-CN\n' +
't-Type: application/json;charset=UTF-8 -H Cookie\n' + ',zh;q=0.9,en;q=0.8 -H Connection: keep-alive -H Conten\n' +
': SESSION=0061390c-241e-4681-8162-lbaffefec8daccc') 't-Type: application/json;charset=UTF-8 -H Cookie\n' +
const hearder = ref('HTTP/1.1 200 OK\n' + ': SESSION=0061390c-241e-4681-8162-lbaffefec8daccc',
'transfer-encoding: chunked\n' + );
'X-Content-Type-Options: nosniff\n' + const hearder = ref(
'X-XSS-Protection: 1; mode=block\n' + 'HTTP/1.1 200 OK\n' +
'Cache-Control: no-cache, no-store, max-age=0, must-revalidate\n' + 'transfer-encoding: chunked\n' +
'Pragma: no-cache') 'X-Content-Type-Options: nosniff\n' +
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"}}]}') 'X-XSS-Protection: 1; mode=block\n' +
'Cache-Control: no-cache, no-store, max-age=0, must-revalidate\n' +
'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 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>
<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>
<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>
...@@ -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),
}, },
]" ]"
......
<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"
<a-button type="primary" @click="saveButton" style="margin-right: 10px">保存</a-button> class="backBtn"
</div> 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>
</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,{ openPublishApplicationModal(true, {
record:data 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>
<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"
...@@ -39,10 +46,10 @@ ...@@ -39,10 +46,10 @@
<div class="w-full"> <div class="w-full">
<Tabs defaultActiveKey="原始入参" @change="handleChangeTab"> <Tabs defaultActiveKey="原始入参" @change="handleChangeTab">
<TabPane tab="原始入参" key="原始入参"> <TabPane tab="原始入参" key="原始入参">
<BasicTable @register="registerTable1" /> <BasicTable @register="registerTable1" />
</TabPane> </TabPane>
<TabPane tab="行权限参数" key="行权限参数"> <TabPane tab="行权限参数" key="行权限参数">
<BasicTable @register="registerTable2" /> <BasicTable @register="registerTable2" />
</TabPane> </TabPane>
<TabPane tab="原始出参" key="原始出参"> <TabPane tab="原始出参" key="原始出参">
<BasicTable @register="registerTable3"> <BasicTable @register="registerTable3">
...@@ -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>
......
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