wangxiang
3 years ago
17 changed files with 27 additions and 1043 deletions
@ -1,22 +0,0 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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