Commit 6192b6c0 authored by liwei's avatar liwei

新增了服务开发页面

parent 21272514
...@@ -170,7 +170,6 @@ ...@@ -170,7 +170,6 @@
createMessage.success('测试成功'); createMessage.success('测试成功');
test.value = 'success' test.value = 'success'
executionList1.value = cardList2 executionList1.value = cardList2
console.log(executionList1.value)
} }
/**点击事件*/ /**点击事件*/
......
...@@ -4,56 +4,69 @@ ...@@ -4,56 +4,69 @@
@register="registerDrawer" @register="registerDrawer"
showFooter showFooter
:title="getTitle" :title="getTitle"
width="50%" width="40%"
@ok="handleSubmit" @ok="handleSubmit"
> >
<BasicTree <div style="display: flex;width: 100%;height: 750px">
ref="treeRef" <div style="width: 50%;height: 750px;border: 1px solid #ccc;">
toolbar <BasicTree
search ref="treeRef"
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" toolbar
:clickRowToExpand="false" search
:defaultExpandAll="true" treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:treeData="treeData" :clickRowToExpand="false"
:fieldNames="{ key: 'businessId', title: 'apiName' }" :defaultExpandAll="true"
@select="handleSelect" :treeData="treeData"
:beforeRightClick="getRightMenuList" :fieldNames="{ key: 'businessId', title: 'apiName' }"
:actionList="actionList" @select="handleSelect"
/> :beforeRightClick="getRightMenuList"
<List :pagination="pagination"> :actionList="actionList"
<template v-for="item in executionList" :key="item.id"> />
<List.Item class="list"> </div>
<List.Item.Meta style="display: flex !important; align-items: center !important">
<template #avatar> <div style="width: 50%;height:750px;border: 1px solid #ccc;">
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" /> <div style="padding: 10px 10px 10px 10px;width: 100%;background-color: rgb(232, 236, 247)">
</template> <a-input-search/>
<template #title> </div>
<span>{{ item.executionDate }}</span> <div>
</template> <List :pagination="pagination">
<template #description> <template v-for="item in executionList" :key="item.id">
<div class="info"> <List.Item @click="clickButton(item)" :class="{ 'listItemClass': selectedItem === item }">
<div>{{ item.sensitiveState }}</div> <List.Item.Meta style="display: flex !important; align-items: center !important">
</div> <template #avatar>
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
</template>
<template #title>
<span v-if="item.title.includes('执行')" style="font-weight: bold;height: 20px">{{ item.title }}</span>
<span v-else>{{ item.title }}</span>
</template>
<template #description>
<div class="info">
<div v-if="item.desc">{{ item.desc }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{{ item.type }}</div>
</div>
</template>
</List.Item.Meta>
</List.Item>
</template> </template>
</List.Item.Meta> </List>
</List.Item> </div>
</template> </div>
</List> </div>
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {h, nextTick, onMounted, ref, unref} from 'vue'; import {h, nextTick, onMounted, ref, unref} from 'vue';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { } from './api.data'; import { } from './api.data';
import { metadataTreeData } from './apiData'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'; import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree'; import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
import {useMessage} from "@/hooks/web/useMessage"; import {useMessage} from "@/hooks/web/useMessage";
import { List } from 'ant-design-vue'; import { List } from 'ant-design-vue';
import { cardList1 } from './apiData'; import { cardList3,cardList4,cardList2,cardList5, metadataTreeData } from './apiData';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
const executionList = ref(cardList1); const executionList = ref(cardList3);
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const treeRef = ref<Nullable<TreeActionType>>(null); const treeRef = ref<Nullable<TreeActionType>>(null);
...@@ -63,7 +76,7 @@ ...@@ -63,7 +76,7 @@
const treeData = ref<TreeItem[]>([]); const treeData = ref<TreeItem[]>([]);
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
setDrawerProps({ confirmLoading: false }); setDrawerProps({ confirmLoading: false,showOkBtn: false,showCancelBtn: false });
treeData.value = handleTree(metadataTreeData, 'businessId',undefined,undefined,undefined) treeData.value = handleTree(metadataTreeData, 'businessId',undefined,undefined,undefined)
await nextTick(() => { await nextTick(() => {
getTree().expandAll(true) getTree().expandAll(true)
...@@ -82,6 +95,17 @@ ...@@ -82,6 +95,17 @@
} }
function handleSelect(keys) {
console.log(keys[0])
if (keys[0] === 201 || keys[0] === 202){
executionList.value = cardList3
}else if (keys[0] === 203 || keys[0] === 204){
executionList.value = cardList4
} else {
executionList.value = cardList5
}
}
/** 转成树 */ /** 转成树 */
function handleTree(data, id, parentId, children, rootId) { function handleTree(data, id, parentId, children, rootId) {
id = id || 'id' id = id || 'id'
...@@ -103,3 +127,17 @@ ...@@ -103,3 +127,17 @@
return treeData !== '' ? treeData : data return treeData !== '' ? treeData : data
} }
</script> </script>
<style lang="scss" scoped>
.icon {
font-size: 30px !important;
}
.tableClass{
::v-deep(.ant-table){
height: 300px;
}
}
.listItemClass{
background-color: #badeee;
height: 30px;
}
</style>
...@@ -430,6 +430,7 @@ export const metadataTreeData: any[] = [ ...@@ -430,6 +430,7 @@ export const metadataTreeData: any[] = [
"anotherName": "@!&test@&", "anotherName": "@!&test@&",
"parentId": 0, "parentId": 0,
icon: "material-symbols:database-outline", icon: "material-symbols:database-outline",
}, },
{ {
"businessId": 102, "businessId": 102,
...@@ -995,6 +996,172 @@ export const cardList2:any[] = [ ...@@ -995,6 +996,172 @@ export const cardList2:any[] = [
color: '#2f9d59', color: '#2f9d59',
}, },
] ]
export const cardList3:any[] = [
{
id: 2,
desc: '_',
type:'int(11)',
title: 'id',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 3,
desc: '_',
type:'varchar(10)',
title: 'name',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 4,
desc: '_',
title: 'height',
type:'float',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'decimal(10,2)',
title: 'weight',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'text',
title: 'family',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'bigint(20)',
title: 'phone_number',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'char(20)',
title: 'city',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'tinyint(1)',
title: 'sex',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'date',
title: 'birthday',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
]
export const cardList4:any[] = [
{
id: 2,
desc: '_',
type:'int(11)',
title: 'id',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 3,
desc: '_',
type:'varchar(10)',
title: 'name',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 4,
desc: '_',
title: 'height',
type:'float',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'decimal(10,2)',
title: 'weight',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
]
export const cardList5:any[] = [
{
id: 2,
desc: '_',
type:'int(11)',
title: 'id',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 3,
desc: '_',
type:'varchar(10)',
title: 'name',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 4,
desc: '_',
title: 'height',
type:'float',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'decimal(10,2)',
title: 'weight',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'text',
title: 'family',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'tinyint(1)',
title: 'sex',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
{
id: 5,
desc: '_',
type:'date',
title: 'birthday',
icon: 'material-symbols:table-rows-outline',
color: 'rgb(3, 140, 255)',
},
]
/**对比左侧列表 数据1*/ /**对比左侧列表 数据1*/
......
...@@ -495,6 +495,8 @@ ...@@ -495,6 +495,8 @@
/**初始化*/ /**初始化*/
onMounted(() => { onMounted(() => {
show.value = '5'
show1.value = '5'
optionValue.value = '自动解析' optionValue.value = '自动解析'
optionValue1.value = '自动解析' optionValue1.value = '自动解析'
}); });
......
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