wangxiang
3 years ago
17 changed files with 27 additions and 1043 deletions
@ -1,22 +0,0 @@ |
|||||||
import { ApiVO, ApiDTO, Api as SysApi } from './model/apiModel'; |
|
||||||
import { defHttp } from '/@/utils/http/axios'; |
|
||||||
|
|
||||||
enum Api { |
|
||||||
Page = '/mate-system/api/page', |
|
||||||
Set = '/mate-system/api/set', |
|
||||||
Del = '/mate-system/api/del', |
|
||||||
Sync = '/mate-system/api/sync', |
|
||||||
} |
|
||||||
|
|
||||||
// 分页查询
|
|
||||||
export const page = (params: ApiVO) => defHttp.get<ApiDTO>({ url: Api.Page, params }); |
|
||||||
|
|
||||||
// 保存
|
|
||||||
export const set = (params: SysApi) => defHttp.post<SysApi>({ url: Api.Set, params }); |
|
||||||
|
|
||||||
// 同步
|
|
||||||
export const sync = () => defHttp.post({ url: Api.Sync }); |
|
||||||
|
|
||||||
// 删除
|
|
||||||
export const del = (params: { ids: String }) => |
|
||||||
defHttp.post<boolean>({ url: Api.Del + `?ids=${params.ids}` }); |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import { BlacklistVO, BlacklistDTO, Blacklist } from './model/blacklistModel'; |
|
||||||
import { defHttp } from '/@/utils/http/axios'; |
|
||||||
|
|
||||||
enum Api { |
|
||||||
Page = '/mate-system/blacklist/page', |
|
||||||
Set = '/mate-system/blacklist/set', |
|
||||||
Del = '/mate-system/blacklist/del', |
|
||||||
Tree = '/mate-system/blacklist/list-item', |
|
||||||
} |
|
||||||
|
|
||||||
// 分页查询
|
|
||||||
export const page = (params: BlacklistVO) => defHttp.get<BlacklistDTO>({ url: Api.Page, params }); |
|
||||||
|
|
||||||
// 树
|
|
||||||
export const tree = () => defHttp.get({ url: Api.Tree }); |
|
||||||
|
|
||||||
// 保存
|
|
||||||
export const set = (params: Blacklist) => defHttp.post<Blacklist>({ url: Api.Set, params }); |
|
||||||
|
|
||||||
// 删除
|
|
||||||
export const del = (params: { ids: String }) => |
|
||||||
defHttp.post<boolean>({ url: Api.Del + `?ids=${params.ids}` }); |
|
||||||
@ -1,29 +0,0 @@ |
|||||||
// 引入基础包
|
|
||||||
import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel'; |
|
||||||
|
|
||||||
// 定义查询参数
|
|
||||||
export type ApiVO = BasicPageParams & { |
|
||||||
keyword?: string; |
|
||||||
startDate?: string; |
|
||||||
endDate?: string; |
|
||||||
}; |
|
||||||
|
|
||||||
// 定义系统接口对象
|
|
||||||
export interface Api { |
|
||||||
id: string; |
|
||||||
code: string; |
|
||||||
name: string; |
|
||||||
notes: string; |
|
||||||
method: string; |
|
||||||
className: string; |
|
||||||
methodName: string; |
|
||||||
path: string; |
|
||||||
contentType: string; |
|
||||||
serviceId: string; |
|
||||||
status: string; |
|
||||||
auth: string; |
|
||||||
createTime: string; |
|
||||||
} |
|
||||||
|
|
||||||
// 根据字典对象生成响应模型
|
|
||||||
export type ApiDTO = BasicFetchResult<ApiVO>; |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
// 引入基础包
|
|
||||||
import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel'; |
|
||||||
|
|
||||||
// 定义查询参数
|
|
||||||
export type BlacklistVO = BasicPageParams & { |
|
||||||
keyword?: string; |
|
||||||
startDate?: string; |
|
||||||
endDate?: string; |
|
||||||
}; |
|
||||||
|
|
||||||
// 定义黑名单对象
|
|
||||||
export interface Blacklist { |
|
||||||
id: string; |
|
||||||
ip: string; |
|
||||||
requestUri: string; |
|
||||||
requestMethod: string; |
|
||||||
startTime: string; |
|
||||||
endTime: string; |
|
||||||
status: string; |
|
||||||
createTime: string; |
|
||||||
} |
|
||||||
|
|
||||||
// 根据字典对象生成响应模型
|
|
||||||
export type BlacklistDTO = BasicFetchResult<BlacklistVO>; |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
// 引入基础包
|
|
||||||
import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel'; |
|
||||||
|
|
||||||
// 定义查询参数
|
|
||||||
export type RouteVO = BasicPageParams & { |
|
||||||
keyword?: string; |
|
||||||
startDate?: string; |
|
||||||
endDate?: string; |
|
||||||
}; |
|
||||||
|
|
||||||
// 定义路由对象
|
|
||||||
export interface Route { |
|
||||||
id: string; |
|
||||||
name: string; |
|
||||||
path: string; |
|
||||||
url: string; |
|
||||||
serviceId: string; |
|
||||||
status: string; |
|
||||||
tenantId: string; |
|
||||||
createTime: string; |
|
||||||
} |
|
||||||
|
|
||||||
// 根据字典对象生成响应模型
|
|
||||||
export type RouteDTO = BasicFetchResult<RouteVO>; |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import { RouteVO, RouteDTO, Route } from './model/routeModel'; |
|
||||||
import { defHttp } from '/@/utils/http/axios'; |
|
||||||
|
|
||||||
enum Api { |
|
||||||
Page = '/mate-system/route/page', |
|
||||||
Set = '/mate-system/route/set', |
|
||||||
Del = '/mate-system/route/del', |
|
||||||
Tree = '/mate-system/route/list-item', |
|
||||||
} |
|
||||||
|
|
||||||
// 分页查询
|
|
||||||
export const page = (params: RouteVO) => defHttp.get<RouteDTO>({ url: Api.Page, params }); |
|
||||||
|
|
||||||
// 树
|
|
||||||
export const tree = () => defHttp.get({ url: Api.Tree }); |
|
||||||
|
|
||||||
// 保存
|
|
||||||
export const set = (params: Route) => defHttp.post<Route>({ url: Api.Set, params }); |
|
||||||
|
|
||||||
// 删除
|
|
||||||
export const del = (params: { ids: String }) => |
|
||||||
defHttp.post<boolean>({ url: Api.Del + `?ids=${params.ids}` }); |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
<template> |
|
||||||
<BasicDrawer |
|
||||||
v-bind="$attrs" |
|
||||||
@register="registerDrawer" |
|
||||||
showFooter |
|
||||||
:title="getTitle" |
|
||||||
width="500px" |
|
||||||
@ok="handleSubmit" |
|
||||||
> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicDrawer> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { ref, computed, unref } from 'vue'; |
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|
||||||
import { formSchema } from './api.data'; |
|
||||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
|
||||||
import { set } from '/@/api/gateway/api'; |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']); |
|
||||||
const isUpdate = ref(true); |
|
||||||
|
|
||||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
|
||||||
labelWidth: 100, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
}); |
|
||||||
|
|
||||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
|
||||||
resetFields(); |
|
||||||
setDrawerProps({ confirmLoading: false }); |
|
||||||
isUpdate.value = !!data?.isUpdate; |
|
||||||
|
|
||||||
if (unref(isUpdate)) { |
|
||||||
setFieldsValue({ |
|
||||||
...data.record, |
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增API' : '编辑API')); |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate(); |
|
||||||
setDrawerProps({ confirmLoading: true }); |
|
||||||
await set(values); |
|
||||||
closeDrawer(); |
|
||||||
emit('success'); |
|
||||||
} finally { |
|
||||||
setDrawerProps({ confirmLoading: false }); |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,45 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="bg-white m-4 mr-0 overflow-hidden"> |
|
||||||
<BasicTree |
|
||||||
title="微服务列表" |
|
||||||
toolbar |
|
||||||
search |
|
||||||
:clickRowToExpand="false" |
|
||||||
:treeData="treeData" |
|
||||||
:replaceFields="{ key: 'id', title: 'name' }" |
|
||||||
@select="handleSelect" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script lang="ts"> |
|
||||||
import { defineComponent, onMounted, ref } from 'vue'; |
|
||||||
import { BasicTree, TreeItem } from '/@/components/Tree'; |
|
||||||
import { tree } from '/@/api/gateway/route'; |
|
||||||
import { findNode } from '/@/utils/helper/treeHelper'; |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
name: 'DeptTree', |
|
||||||
components: { BasicTree }, |
|
||||||
|
|
||||||
emits: ['select'], |
|
||||||
setup(_, { emit }) { |
|
||||||
const treeData = ref<TreeItem[]>([]); |
|
||||||
|
|
||||||
async function fetch() { |
|
||||||
treeData.value = (await tree()) as unknown as TreeItem[]; |
|
||||||
} |
|
||||||
|
|
||||||
function handleSelect(keys: string) { |
|
||||||
const node = findNode(treeData.value, (item) => item.id === keys[0], { |
|
||||||
id: 'id', |
|
||||||
}); |
|
||||||
emit('select', node.name); |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
fetch(); |
|
||||||
}); |
|
||||||
return { treeData, handleSelect }; |
|
||||||
}, |
|
||||||
}); |
|
||||||
</script> |
|
||||||
@ -1,136 +0,0 @@ |
|||||||
import { BasicColumn } from '/@/components/Table'; |
|
||||||
import { FormSchema } from '/@/components/Table'; |
|
||||||
import { h } from 'vue'; |
|
||||||
import { Tag } from 'ant-design-vue'; |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '编码', |
|
||||||
dataIndex: 'code', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '服务ID', |
|
||||||
dataIndex: 'serviceId', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求方法', |
|
||||||
dataIndex: 'method', |
|
||||||
width: 60, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求路径', |
|
||||||
dataIndex: 'path', |
|
||||||
width: 130, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '认证', |
|
||||||
dataIndex: 'auth', |
|
||||||
width: 60, |
|
||||||
customRender: ({ record }) => { |
|
||||||
const auth = record.auth; |
|
||||||
const enable = ~~auth === 1; |
|
||||||
const color = enable ? 'green' : 'red'; |
|
||||||
const text = enable ? '认证' : '不认证'; |
|
||||||
return h(Tag, { color: color }, () => text); |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 60, |
|
||||||
customRender: ({ record }) => { |
|
||||||
const status = record.status; |
|
||||||
const enable = ~~status === 0; |
|
||||||
const color = enable ? 'green' : 'red'; |
|
||||||
const text = enable ? '启用' : '停用'; |
|
||||||
return h(Tag, { color: color }, () => text); |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
field: 'keyword', |
|
||||||
label: '关键字', |
|
||||||
component: 'Input', |
|
||||||
componentProps: { |
|
||||||
placeholder: '请输入编码/请求地址', |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'startDate', |
|
||||||
label: '起始时间', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'endDate', |
|
||||||
label: '截止时间', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
field: 'id', |
|
||||||
label: 'ID', |
|
||||||
component: 'Input', |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'code', |
|
||||||
label: '编码', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'serviceId', |
|
||||||
label: '服务ID', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'name', |
|
||||||
label: '名称', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'method', |
|
||||||
label: '请求方法', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'className', |
|
||||||
label: '类名', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'methodName', |
|
||||||
label: '方法名', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'status', |
|
||||||
label: '状态', |
|
||||||
component: 'RadioButtonGroup', |
|
||||||
defaultValue: '0', |
|
||||||
componentProps: { |
|
||||||
options: [ |
|
||||||
{ label: '启用', value: '0' }, |
|
||||||
{ label: '禁用', value: '1' }, |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
]; |
|
||||||
@ -1,94 +0,0 @@ |
|||||||
<template> |
|
||||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
|
||||||
<RouteTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> |
|
||||||
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button type="primary" @click="handleSync">同步API</a-button> |
|
||||||
</template> |
|
||||||
<template #action="{ record }"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: 'clarity:note-edit-line', |
|
||||||
onClick: handleEdit.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: 'ant-design:delete-outlined', |
|
||||||
color: 'error', |
|
||||||
popConfirm: { |
|
||||||
title: '是否确认删除', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<ApiDrawer @register="registerDrawer" @success="handleSuccess" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { reactive } from 'vue'; |
|
||||||
// 引入基础组件 |
|
||||||
import { PageWrapper } from '/@/components/Page'; |
|
||||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|
||||||
// 插入数据内容 |
|
||||||
import { columns, searchFormSchema } from './api.data'; |
|
||||||
// 通过API接口获取日志 |
|
||||||
import { page, sync, del } from '/@/api/gateway/api'; |
|
||||||
import { useDrawer } from '/@/components/Drawer'; |
|
||||||
import ApiDrawer from './ApiDrawer.vue'; |
|
||||||
import { useMessage } from '/@/hooks/web/useMessage'; |
|
||||||
import RouteTree from './RouteTree.vue'; |
|
||||||
const { createMessage } = useMessage(); |
|
||||||
const searchInfo = reactive<Recordable>({}); |
|
||||||
|
|
||||||
const [registerDrawer, { openDrawer }] = useDrawer(); |
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '微服务列表', |
|
||||||
api: page, |
|
||||||
columns, |
|
||||||
formConfig: { |
|
||||||
labelWidth: 120, |
|
||||||
schemas: searchFormSchema, |
|
||||||
}, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
bordered: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 80, |
|
||||||
title: '操作', |
|
||||||
dataIndex: 'action', |
|
||||||
slots: { customRender: 'action' }, |
|
||||||
fixed: undefined, |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
async function handleSync() { |
|
||||||
await sync(); |
|
||||||
handleSuccess(); |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openDrawer(true, { |
|
||||||
record, |
|
||||||
isUpdate: true, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await del({ ids: record.id }); |
|
||||||
createMessage.success('删除成功!'); |
|
||||||
handleSuccess(); |
|
||||||
} |
|
||||||
|
|
||||||
function handleSelect(serviceId = '') { |
|
||||||
searchInfo.serviceId = serviceId; |
|
||||||
reload(); |
|
||||||
} |
|
||||||
|
|
||||||
function handleSuccess() { |
|
||||||
reload(); |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
<template> |
|
||||||
<BasicDrawer |
|
||||||
v-bind="$attrs" |
|
||||||
@register="registerDrawer" |
|
||||||
showFooter |
|
||||||
:title="getTitle" |
|
||||||
width="500px" |
|
||||||
@ok="handleSubmit" |
|
||||||
> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicDrawer> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { ref, computed, unref } from 'vue'; |
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|
||||||
import { formSchema } from './blacklist.data'; |
|
||||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
|
||||||
import { set } from '/@/api/gateway/blacklist'; |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']); |
|
||||||
const isUpdate = ref(true); |
|
||||||
|
|
||||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
|
||||||
labelWidth: 100, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
}); |
|
||||||
|
|
||||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
|
||||||
resetFields(); |
|
||||||
setDrawerProps({ confirmLoading: false }); |
|
||||||
isUpdate.value = !!data?.isUpdate; |
|
||||||
|
|
||||||
if (unref(isUpdate)) { |
|
||||||
setFieldsValue({ |
|
||||||
...data.record, |
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增黑名单' : '编辑黑名单')); |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate(); |
|
||||||
if (!unref(isUpdate)) { |
|
||||||
values.startTime = values.startTime.format('HH:mm:ss'); |
|
||||||
values.endTime = values.endTime.format('HH:mm:ss'); |
|
||||||
} |
|
||||||
setDrawerProps({ confirmLoading: true }); |
|
||||||
await set(values); |
|
||||||
closeDrawer(); |
|
||||||
emit('success'); |
|
||||||
} finally { |
|
||||||
setDrawerProps({ confirmLoading: false }); |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
import { BasicColumn } from '/@/components/Table'; |
|
||||||
import { FormSchema } from '/@/components/Table'; |
|
||||||
import { h } from 'vue'; |
|
||||||
import { Tag } from 'ant-design-vue'; |
|
||||||
import moment from 'moment'; |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: 'IP地址', |
|
||||||
dataIndex: 'ip', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求地址', |
|
||||||
dataIndex: 'requestUri', |
|
||||||
width: 130, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求方法', |
|
||||||
dataIndex: 'requestMethod', |
|
||||||
width: 80, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '开始时间', |
|
||||||
dataIndex: 'startTime', |
|
||||||
width: 90, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '结束时间', |
|
||||||
dataIndex: 'endTime', |
|
||||||
width: 90, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 80, |
|
||||||
customRender: ({ record }) => { |
|
||||||
const status = record.status; |
|
||||||
const enable = ~~status === 0; |
|
||||||
const color = enable ? 'green' : 'red'; |
|
||||||
const text = enable ? '启用' : '停用'; |
|
||||||
return h(Tag, { color: color }, () => text); |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
field: 'keyword', |
|
||||||
label: '关键字', |
|
||||||
component: 'Input', |
|
||||||
componentProps: { |
|
||||||
placeholder: '请输入名称/服务ID', |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'startDate', |
|
||||||
label: '起始时间', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'endDate', |
|
||||||
label: '截止时间', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
field: 'id', |
|
||||||
label: 'ID', |
|
||||||
component: 'Input', |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'ip', |
|
||||||
label: 'IP地址', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'requestUri', |
|
||||||
label: '请求地址', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'requestMethod', |
|
||||||
label: '请求方法', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'startTime', |
|
||||||
label: '开始时间', |
|
||||||
component: 'TimePicker', |
|
||||||
defaultValue: moment('09:00:00', 'HH:mm:ss'), |
|
||||||
componentProps: { |
|
||||||
valueFormat: 'HH:mm:ss', |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'endTime', |
|
||||||
label: '结束时间', |
|
||||||
component: 'TimePicker', |
|
||||||
defaultValue: moment('21:00:00', 'HH:mm:ss'), |
|
||||||
componentProps: { |
|
||||||
valueFormat: 'HH:mm:ss', |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'status', |
|
||||||
label: '状态', |
|
||||||
component: 'RadioButtonGroup', |
|
||||||
defaultValue: '0', |
|
||||||
componentProps: { |
|
||||||
options: [ |
|
||||||
{ label: '启用', value: '0' }, |
|
||||||
{ label: '禁用', value: '1' }, |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
]; |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
<template> |
|
||||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button type="primary" @click="handleCreate">新增黑名单</a-button> |
|
||||||
</template> |
|
||||||
<template #action="{ record }"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: 'clarity:note-edit-line', |
|
||||||
onClick: handleEdit.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: 'ant-design:delete-outlined', |
|
||||||
color: 'error', |
|
||||||
popConfirm: { |
|
||||||
title: '是否确认删除', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<BlacklistDrawer @register="registerDrawer" @success="handleSuccess" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
// 引入基础组件 |
|
||||||
import { PageWrapper } from '/@/components/Page'; |
|
||||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|
||||||
// 插入数据内容 |
|
||||||
import { columns, searchFormSchema } from './blacklist.data'; |
|
||||||
// 通过API接口获取日志 |
|
||||||
import { page, del } from '/@/api/gateway/blacklist'; |
|
||||||
import { useDrawer } from '/@/components/Drawer'; |
|
||||||
import BlacklistDrawer from './BlacklistDrawer.vue'; |
|
||||||
import { useMessage } from '/@/hooks/web/useMessage'; |
|
||||||
|
|
||||||
const { createMessage } = useMessage(); |
|
||||||
const [registerDrawer, { openDrawer }] = useDrawer(); |
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '黑名单列表', |
|
||||||
api: page, |
|
||||||
columns, |
|
||||||
formConfig: { |
|
||||||
labelWidth: 120, |
|
||||||
schemas: searchFormSchema, |
|
||||||
}, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
bordered: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 80, |
|
||||||
title: '操作', |
|
||||||
dataIndex: 'action', |
|
||||||
slots: { customRender: 'action' }, |
|
||||||
fixed: undefined, |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openDrawer(true, { |
|
||||||
isUpdate: false, |
|
||||||
}); |
|
||||||
} |
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openDrawer(true, { |
|
||||||
record, |
|
||||||
isUpdate: true, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await del({ ids: record.id }); |
|
||||||
createMessage.success('删除成功!'); |
|
||||||
handleSuccess(); |
|
||||||
} |
|
||||||
|
|
||||||
function handleSuccess() { |
|
||||||
reload(); |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
<template> |
|
||||||
<BasicDrawer |
|
||||||
v-bind="$attrs" |
|
||||||
@register="registerDrawer" |
|
||||||
showFooter |
|
||||||
:title="getTitle" |
|
||||||
width="500px" |
|
||||||
@ok="handleSubmit" |
|
||||||
> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicDrawer> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { ref, computed, unref } from 'vue'; |
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|
||||||
import { formSchema } from './route.data'; |
|
||||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
|
||||||
import { set } from '/@/api/gateway/route'; |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']); |
|
||||||
const isUpdate = ref(true); |
|
||||||
|
|
||||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
|
||||||
labelWidth: 100, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
}); |
|
||||||
|
|
||||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
|
||||||
resetFields(); |
|
||||||
setDrawerProps({ confirmLoading: false }); |
|
||||||
isUpdate.value = !!data?.isUpdate; |
|
||||||
|
|
||||||
if (unref(isUpdate)) { |
|
||||||
setFieldsValue({ |
|
||||||
...data.record, |
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增微服务' : '编辑微服务')); |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate(); |
|
||||||
setDrawerProps({ confirmLoading: true }); |
|
||||||
await set(values); |
|
||||||
closeDrawer(); |
|
||||||
emit('success'); |
|
||||||
} finally { |
|
||||||
setDrawerProps({ confirmLoading: false }); |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
<template> |
|
||||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button type="primary" @click="handleCreate">新增微服务</a-button> |
|
||||||
</template> |
|
||||||
<template #action="{ record }"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: 'clarity:note-edit-line', |
|
||||||
onClick: handleEdit.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: 'ant-design:delete-outlined', |
|
||||||
color: 'error', |
|
||||||
popConfirm: { |
|
||||||
title: '是否确认删除', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<RouteDrawer @register="registerDrawer" @success="handleSuccess" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
// 引入基础组件 |
|
||||||
import { PageWrapper } from '/@/components/Page'; |
|
||||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|
||||||
// 插入数据内容 |
|
||||||
import { columns, searchFormSchema } from './route.data'; |
|
||||||
// 通过API接口获取日志 |
|
||||||
import { page, del } from '/@/api/gateway/route'; |
|
||||||
import { useDrawer } from '/@/components/Drawer'; |
|
||||||
import RouteDrawer from './RouteDrawer.vue'; |
|
||||||
import { useMessage } from '/@/hooks/web/useMessage'; |
|
||||||
|
|
||||||
const { createMessage } = useMessage(); |
|
||||||
const [registerDrawer, { openDrawer }] = useDrawer(); |
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '微服务列表', |
|
||||||
api: page, |
|
||||||
columns, |
|
||||||
formConfig: { |
|
||||||
labelWidth: 120, |
|
||||||
schemas: searchFormSchema, |
|
||||||
}, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
bordered: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 80, |
|
||||||
title: '操作', |
|
||||||
dataIndex: 'action', |
|
||||||
slots: { customRender: 'action' }, |
|
||||||
fixed: undefined, |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openDrawer(true, { |
|
||||||
isUpdate: false, |
|
||||||
}); |
|
||||||
} |
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openDrawer(true, { |
|
||||||
record, |
|
||||||
isUpdate: true, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await del({ ids: record.id }); |
|
||||||
createMessage.success('删除成功!'); |
|
||||||
handleSuccess(); |
|
||||||
} |
|
||||||
|
|
||||||
function handleSuccess() { |
|
||||||
reload(); |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,109 +0,0 @@ |
|||||||
import { BasicColumn } from '/@/components/Table'; |
|
||||||
import { FormSchema } from '/@/components/Table'; |
|
||||||
import { h } from 'vue'; |
|
||||||
import { Tag } from 'ant-design-vue'; |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '服务ID', |
|
||||||
dataIndex: 'serviceId', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '服务路径', |
|
||||||
dataIndex: 'path', |
|
||||||
width: 130, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'URI', |
|
||||||
dataIndex: 'url', |
|
||||||
width: 90, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 80, |
|
||||||
customRender: ({ record }) => { |
|
||||||
const status = record.status; |
|
||||||
const enable = ~~status === 0; |
|
||||||
const color = enable ? 'green' : 'red'; |
|
||||||
const text = enable ? '启用' : '停用'; |
|
||||||
return h(Tag, { color: color }, () => text); |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
field: 'keyword', |
|
||||||
label: '关键字', |
|
||||||
component: 'Input', |
|
||||||
componentProps: { |
|
||||||
placeholder: '请输入名称/服务ID', |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'startDate', |
|
||||||
label: '起始时间', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'endDate', |
|
||||||
label: '截止时间', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
field: 'id', |
|
||||||
label: 'ID', |
|
||||||
component: 'Input', |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'name', |
|
||||||
label: '名称', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'serviceId', |
|
||||||
label: '服务ID', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'path', |
|
||||||
label: '服务路径', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'url', |
|
||||||
label: 'URI', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'status', |
|
||||||
label: '状态', |
|
||||||
component: 'RadioButtonGroup', |
|
||||||
defaultValue: '0', |
|
||||||
componentProps: { |
|
||||||
options: [ |
|
||||||
{ label: '启用', value: '0' }, |
|
||||||
{ label: '禁用', value: '1' }, |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
]; |
|
||||||
Loading…
Reference in new issue