Skip to content

B
bigDataSystem
Commit 038932c9 authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改页面

parent cb1a14ba
Hide whitespace changes
Inline Side-by-side
Showing with 1131 additions and 614 deletions
src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.vue
View file @ 038932c9
......@@ -75,6 +75,8 @@
closeModal();
if (isUpdate.value) {
createMessage.success('编辑成功');
} else {
createMessage.success('添加成功');
}
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
......
src/views/dataService/APIIntegrationSecurity/AccessControl/index.vue
View file @ 038932c9
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<Tabs v-model:value="activeKey" @change="handleTabChange" class="ml-5">
<Tabs.TabPane key="1" tab="默认"
><BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
<a-button
type="error"
@click="handleDeleteBatch"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>删除选中</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="2" tab="域名"
><BasicTable @register="registerTabletab2" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
<a-button
type="error"
@click="handleDeleteBatch"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>删除选中</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="3" tab="特征流量"
><BasicTable @register="registerTabletab3" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
<a-button
type="error"
@click="handleDeleteBatch"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>删除选中</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="4" tab="URL"
><BasicTable @register="registerTabletab4" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
<a-button
type="error"
@click="handleDeleteBatch"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>删除选中</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="5" tab="API"
><BasicTable @register="registerTabletab5" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
<a-button
type="error"
@click="handleDeleteBatch"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>删除选中</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
</Tabs>
<ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
<ClassificationAndGradingModaltab2 @register="registerModaltab2" @success="handleSuccess" />
<ClassificationAndGradingModaltab3 @register="registerModaltab3" @success="handleSuccess" />
<ClassificationAndGradingModaltab4 @register="registerModaltab4" @success="handleSuccess" />
<ClassificationAndGradingModaltab5 @register="registerModaltab5" @success="handleSuccess" />
</PageWrapper>
<div class="all_of_all">
<PageWrapper dense>
<PageWrapper dense class="sensitiveRecognition_executionRecord">
<div class="title">
<div class="title_left">
<div>
<Icon icon="ant-design:safety-outlined" :size="32" :color="'#3787f3'" />
</div>
<div style="padding-left: 10px">
<div class="name">接入安全</div>
<div style="color: darkgray"> </div>
</div>
</div>
</div>
</PageWrapper>
<PageWrapper dense contentFullHeight fixedHeight>
<a-divider class="header-top-divider">访问控制规则</a-divider>
<Tabs v-model:value="activeKey" @change="handleTabChange" class="ml-5">
<Tabs.TabPane key="1" tab="默认"
><BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #headerTop>
<a-Input-Search placeholder="请输入ip" style="width: 200px; margin-left: 10px" />
<Select
placeholder="保护动作"
style="width: 200px; margin-left: 10px"
:options="[
{ label: '放行', value: '放行' },
{ label: '拒绝', value: '拒绝' },
]"
/>
<a-button type="primary" @click="handleCreate" style="margin-left: 50%"
>添加访问控制规则</a-button
>
<a-button
type="error"
@click="handleDeleteBatch"
style="margin-left: 10px"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>批量删除</a-button
>
</template>
<template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="2" tab="域名"
><BasicTable @register="registerTabletab2" :searchInfo="searchInfo">
<template #headerTop>
<a-Input-Search placeholder="搜索ip" style="width: 200px; margin-left: 10px" />
<a-Input-Search placeholder="搜索域名" style="width: 200px; margin-left: 10px" />
<Select
placeholder="保护动作"
style="width: 200px; margin-left: 10px"
:options="[
{ label: '放行', value: '放行' },
{ label: '拒绝', value: '拒绝' },
]"
/>
<a-button type="primary" @click="handleCreate" style="margin-left: 30%"
>添加访问控制规则</a-button
>
<a-button
type="error"
@click="handleDeleteBatch"
style="margin-left: 10px"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>批量删除</a-button
>
</template>
<template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="3" tab="特征流量"
><BasicTable @register="registerTabletab3" :searchInfo="searchInfo">
<template #headerTop>
<a-Input-Search placeholder="搜索ip" style="width: 200px; margin-left: 10px" />
<a-Input-Search
placeholder="搜索特征流量"
style="width: 200px; margin-left: 10px"
/>
<Select
placeholder="保护动作"
style="width: 200px; margin-left: 10px"
:options="[
{ label: '放行', value: '放行' },
{ label: '拒绝', value: '拒绝' },
]"
/>
<a-button type="primary" @click="handleCreate" style="margin-left: 30%"
>添加访问控制规则</a-button
>
<a-button
type="error"
@click="handleDeleteBatch"
style="margin-left: 10px"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>批量删除</a-button
> </template
><template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="4" tab="URL"
><BasicTable @register="registerTabletab4" :searchInfo="searchInfo">
<template #headerTop>
<a-Input-Search
placeholder="搜索ip"
style="width: 200px; margin-left: 10px"
/><a-Input-Search placeholder="搜索URL" style="width: 200px; margin-left: 10px" />
<Select
placeholder="保护动作"
style="width: 200px; margin-left: 10px"
:options="[
{ label: '放行', value: '放行' },
{ label: '拒绝', value: '拒绝' },
]"
/>
<a-button type="primary" @click="handleCreate" style="margin-left: 30%"
>添加访问控制规则</a-button
>
<a-button
type="error"
@click="handleDeleteBatch"
style="margin-left: 10px"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>批量删除</a-button
> </template
><template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
<Tabs.TabPane key="5" tab="API"
><BasicTable @register="registerTabletab5" :searchInfo="searchInfo">
<template #headerTop>
<a-Input-Search placeholder="搜索ip" style="width: 200px; margin-left: 10px" />
<a-Input-Search placeholder="搜索API" style="width: 200px; margin-left: 10px" />
<Select
placeholder="保护动作"
style="width: 200px; margin-left: 10px"
:options="[
{ label: '放行', value: '放行' },
{ label: '拒绝', value: '拒绝' },
]"
/>
<a-button type="primary" @click="handleCreate" style="margin-left: 30%"
>添加访问控制规则</a-button
>
<a-button
type="error"
@click="handleDeleteBatch"
style="margin-left: 10px"
:disabled="getRowSelection().selectedRowKeys.length <= 0"
>批量删除</a-button
> </template
><template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '编辑',
onClick: handleEdit.bind(null, record, true),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </BasicTable
></Tabs.TabPane>
</Tabs>
<ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
<ClassificationAndGradingModaltab2 @register="registerModaltab2" @success="handleSuccess" />
<ClassificationAndGradingModaltab3 @register="registerModaltab3" @success="handleSuccess" />
<ClassificationAndGradingModaltab4 @register="registerModaltab4" @success="handleSuccess" />
<ClassificationAndGradingModaltab5 @register="registerModaltab5" @success="handleSuccess" />
</PageWrapper>
</PageWrapper>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Divider, Tabs, Alert, Switch, Tag, Select, Modal } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { Modal, Tabs } from 'ant-design-vue';
import { tableList } from './mock';
import { tableList, tableListtab2, tableListtab3, tableListtab4, tableListtab5 } from './mock';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { router } from '@/router';
import ClassificationAndGradingModal from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.vue';
......@@ -212,10 +306,15 @@
searchFormSchematab5,
} from '@/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data';
import { t } from '@/hooks/web/useI18n';
import Icon from '@/components/Icon/Icon.vue';
const { createMessage } = useMessage();
const route = useRoute();
let tableData = ref(tableList);
let tableDatatab2 = ref(tableListtab2);
let tableDatatab3 = ref(tableListtab3);
let tableDatatab4 = ref(tableListtab4);
let tableDatatab5 = ref(tableListtab5);
const [registerModal, { openModal }] = useModal();
const [registerModaltab2, { openModal: openModaltab2 }] = useModal();
const [registerModaltab3, { openModal: openModaltab3 }] = useModal();
......@@ -233,7 +332,7 @@
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '分类分级结果',
title: ' ',
api: async (params) => {
// console.log(params);
const response = {
......@@ -258,7 +357,7 @@
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
......@@ -278,7 +377,7 @@
getRowSelection: getRowSelectiontab2,
},
] = useTable({
title: '分类分级结果',
title: ' ',
api: async (params) => {
// console.log(params);
......@@ -286,10 +385,10 @@
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
total: tableDatatab2.value.length,
code: '',
message: '',
data: tableData.value,
data: tableDatatab2.value,
};
return { ...response };
......@@ -304,7 +403,7 @@
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
......@@ -324,17 +423,17 @@
getRowSelection: getRowSelectiontab3,
},
] = useTable({
title: '分类分级结果',
title: ' ',
api: async (params) => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
total: tableDatatab3.value.length,
code: '',
message: '',
data: tableData.value,
data: tableDatatab3.value,
};
return { ...response };
......@@ -349,7 +448,7 @@
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
......@@ -369,17 +468,17 @@
getRowSelection: getRowSelectiontab4,
},
] = useTable({
title: '分类分级结果',
title: ' ',
api: async (params) => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
total: tableDatatab4.value.length,
code: '',
message: '',
data: tableData.value,
data: tableDatatab4.value,
};
return { ...response };
......@@ -394,7 +493,7 @@
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
......@@ -414,17 +513,17 @@
getRowSelection: getRowSelectiontab5,
},
] = useTable({
title: '分类分级结果',
title: ' ',
api: async (params) => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
total: tableDatatab5.value.length,
code: '',
message: '',
data: tableData.value,
data: tableDatatab5.value,
};
return { ...response };
......@@ -439,7 +538,7 @@
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
......@@ -449,7 +548,7 @@
dataIndex: 'action',
},
});
/** 新增按钮*/
/** 添加访问控制规则*/
function handleCreate() {
openModal(true, {
isUpdate: false,
......@@ -475,7 +574,7 @@
reload();
}
/** 新增/编辑成功*/
/** 添加访问控制规则/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
......@@ -586,3 +685,39 @@
tableData.value = tableList;
});
</script>
<style lang="less" scoped>
.all_of_all {
background-color: #fff;
}
.header-top-divider {
display: block;
margin-top: 20px;
margin-left: 20px;
color: #000;
}
.sensitiveRecognition_executionRecord {
height: 100%;
padding: 20px;
background-color: white;
.title {
display: flex;
align-items: center;
justify-content: space-between;
.title_left {
display: flex;
align-items: center;
justify-content: space-between;
.name {
padding-bottom: 5px;
font-size: 17px;
font-weight: 600;
}
}
}
}
</style>
src/views/dataService/APIIntegrationSecurity/AccessControl/mock.ts
View file @ 038932c9
......@@ -4,45 +4,323 @@ export const tableList: any[] = [
{
id: '1',
businessId: '301',
ip: '127.0.0.1',
protectAction: '阻断',
markTime: '2023-12-08 15:27:07',
fieldName: 'user',
featureTraffic: '1000',
ip: '192.168.1.100',
protectAction: '放行',
markTime: '2023-12-08 14:30:00',
fieldName: 'username',
featureTraffic: '500',
api: 'login',
url: 'https://www.badu.com',
url: 'https://www.example.com/login',
},
{
id: '2',
businessId: '302',
ip: '127.0.0.1',
protectAction: '阻断',
markTime: '2023-12-08 15:06:44',
fieldName: 'user',
featureTraffic: '1000',
ip: '10.0.0.1',
protectAction: '放行',
markTime: '2023-12-08 12:45:00',
fieldName: 'email',
featureTraffic: '2000',
api: 'login',
url: 'https://www.badu.com',
url: 'https://www.example.com/register',
},
{
id: '3',
businessId: '303',
ip: '127.0.0.1',
protectAction: '阻断',
markTime: '2023-12-08 15:48:56',
fieldName: 'user',
featureTraffic: '1000',
ip: '172.16.1.100',
protectAction: '放行',
markTime: '2023-12-08 16:15:00',
fieldName: 'password',
featureTraffic: '100',
api: 'login',
url: 'https://www.badu.com',
url: 'https://www.example.com/forgot-password',
},
{
id: '4',
businessId: '304',
ip: '127.0.0.1',
protectAction: '阻断',
markTime: '2023-12-08 15:27:07',
fieldName: 'user',
ip: '192.168.1.50',
protectAction: '拒绝',
markTime: '2023-12-08 14:30:00',
fieldName: 'phone',
featureTraffic: '1500',
api: 'login',
url: 'https://www.example.com/profile',
},
{
id: '5',
businessId: '304',
ip: '10.0.0.100',
protectAction: '拒绝',
markTime: '2023-12-08 14:30:00',
fieldName: 'address',
featureTraffic: '2500',
api: 'login',
url: 'https://www.example.com/settings',
},
];
export const tableListtab2: any[] = [
{
id: '1',
businessId: '305',
ip: '172.16.1.200',
protectAction: '拒绝',
markTime: '2023-12-08 17:00:00',
fieldName: 'company',
featureTraffic: '3000',
api: 'login',
url: 'https://www.example.com/company-profile',
},
{
id: '2',
businessId: '306',
ip: '192.168.1.150',
protectAction: '拒绝',
markTime: '2023-12-08 13:15:00',
fieldName: 'location',
featureTraffic: '1200',
api: 'login',
url: 'https://www.example.com/location-map',
},
{
id: '3',
businessId: '307',
ip: '10.0.0.50',
protectAction: '拒绝',
markTime: '2023-12-08 15:45:00',
fieldName: 'department',
featureTraffic: '1800',
api: 'login',
url: 'https://www.example.com/department-directory',
},
{
id: '4',
businessId: '308',
ip: '172.16.1.250',
protectAction: '拒绝',
markTime: '2023-12-08 16:30:00',
fieldName: 'team',
featureTraffic: '2500',
api: 'login',
url: 'https://www.example.com/team-profile',
},
];
export const tableListtab3: any[] = [
{
id: '1',
businessId: '309',
ip: '192.168.1.100',
protectAction: '放行',
markTime: '2023-12-08 14:00:00',
fieldName: 'project',
featureTraffic: '1000',
api: 'login',
url: 'https://www.badu.com',
url: 'https://www.example.com/project-dashboard',
},
{
id: '2',
businessId: '310',
ip: '10.0.0.200',
protectAction: '放行',
markTime: '2023-12-08 15:30:00',
fieldName: 'task',
featureTraffic: '2000',
api: 'login',
url: 'https://www.example.com/task-list',
},
{
id: '3',
businessId: '311',
ip: '172.16.1.300',
protectAction: '放行',
markTime: '2023-12-08 16:45:00',
fieldName: 'report',
featureTraffic: '3000',
api: 'login',
url: 'https://www.example.com/report-dashboard',
},
{
id: '4',
businessId: '312',
ip: '192.168.1.250',
protectAction: '放行',
markTime: '2023-12-08 17:15:00',
fieldName: 'chart',
featureTraffic: '1500',
api: 'login',
url: 'https://www.example.com/chart-gallery',
},
{
id: '5',
businessId: '313',
ip: '10.0.0.100',
protectAction: '放行',
markTime: '2023-12-08 14:45:00',
fieldName: 'table',
featureTraffic: '2500',
api: 'login',
url: 'https://www.example.com/table-data',
},
{
id: '6',
businessId: '314',
ip: '172.16.1.400',
protectAction: '放行',
markTime: '2023-12-08 16:00:00',
fieldName: 'form',
featureTraffic: '1200',
api: 'login',
url: 'https://www.example.com/form-builder',
},
{
id: '7',
businessId: '315',
ip: '192.168.1.350',
protectAction: '放行',
markTime: '2023-12-08 17:30:00',
fieldName: 'dashboard',
featureTraffic: '1800',
api: 'login',
url: 'https://www.example.com/dashboard-overview',
},
];
export const tableListtab4: any[] = [
{
id: '1',
businessId: '316',
ip: '10.0.0.300',
protectAction: '放行',
markTime: '2023-12-08 15:00:00',
fieldName: 'widget',
featureTraffic: '2200',
api: 'login',
url: 'https://www.example.com/widget-gallery',
},
{
id: '2',
businessId: '317',
ip: '172.16.1.500',
protectAction: '放行',
markTime: '2023-12-08 16:30:00',
fieldName: 'gadget',
featureTraffic: '2800',
api: 'login',
url: 'https://www.example.com/gadget-store',
},
{
id: '3',
businessId: '318',
ip: '192.168.1.400',
protectAction: '放行',
markTime: '2023-12-08 17:00:00',
fieldName: 'tool',
featureTraffic: '2000',
api: 'login',
url: 'https://www.example.com/toolbox',
},
{
id: '4',
businessId: '319',
ip: '10.0.0.250',
protectAction: '拒绝',
markTime: '2023-12-08 14:30:00',
fieldName: 'resource',
featureTraffic: '1500',
api: 'login',
url: 'https://www.example.com/resource-center',
},
{
id: '5',
businessId: '320',
ip: '172.16.1.600',
protectAction: '拒绝',
markTime: '2023-12-08 16:45:00',
fieldName: 'service',
featureTraffic: '3000',
api: 'login',
url: 'https://www.example.com/service-dashboard',
},
];
export const tableListtab5: any[] = [
{
id: '1',
businessId: '321',
ip: '192.168.1.450',
protectAction: '拒绝',
markTime: '2023-12-08 17:15:00',
fieldName: 'module',
featureTraffic: '2500',
api: 'login',
url: 'https://www.example.com/module-library',
},
{
id: '2',
businessId: '322',
ip: '10.0.0.350',
protectAction: '拒绝',
markTime: '2023-12-08 14:45:00',
fieldName: 'component',
featureTraffic: '2000',
api: 'login',
url: 'https://www.example.com/component-gallery',
},
{
id: '3',
businessId: '323',
ip: '172.16.1.700',
protectAction: '拒绝',
markTime: '2023-12-08 16:00:00',
fieldName: 'template',
featureTraffic: '2800',
api: 'login',
url: 'https://www.example.com/template-store',
},
{
id: '4',
businessId: '324',
ip: '192.168.1.500',
protectAction: '放行',
markTime: '2023-12-08 17:30:00',
fieldName: 'layout',
featureTraffic: '2200',
api: 'login',
url: 'https://www.example.com/layout-builder',
},
{
id: '5',
businessId: '325',
ip: '10.0.0.400',
protectAction: '放行',
markTime: '2023-12-08 15:15:00',
fieldName: 'theme',
featureTraffic: '3000',
api: 'login',
url: 'https://www.example.com/theme-gallery',
},
{
id: '6',
businessId: '326',
ip: '172.16.1.800',
protectAction: '放行',
markTime: '2023-12-08 16:45:00',
fieldName: 'plugin',
featureTraffic: '1500',
api: 'login',
url: 'https://www.example.com/plugin-store',
},
];
src/views/dataService/serviceManage/callerManage/details.vue
View file @ 038932c9
......@@ -23,24 +23,38 @@
</BasicForm>
<step-header title="已使用服务" />
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #headerTop>
<a-Input-search placeholder="输入关键字搜索" style="width: 200px" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '取消调用',
onClick: handleCancelCall.bind(null, record),
popConfirm: {
title: '是否取消调用',
placement: 'left',
confirm: handleCancelCall.bind(null, record),
},
},
]"
/>
</template>
<template v-if="column.key === 'flag'">
<div>
<div v-if="record.flag === '调用中'"><Tag color="yellow">调用中</Tag></div>
<!-- <Tag v-if="record.flag === '调用中'" color="yellow">调用中</Tag> -->
<Tag v-else color="red">失败</Tag>
</div>
</template>
</template>
</BasicTable>
</div>
</template>
<script lang="ts" setup>
import { InputNumber, Input } from 'ant-design-vue';
import { InputNumber, Input, Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { EditOutlined } from '@ant-design/icons-vue';
import { router } from '@/router';
......@@ -50,7 +64,9 @@
import { tableListDetails } from './mock';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { ref } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
......@@ -93,7 +109,8 @@
schemas: detailSchemas,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showIndexColumn: false,
useSearchForm: false,
showTableSetting: false,
bordered: true,
actionColumn: {
......@@ -106,7 +123,9 @@
function handleGoBack() {
router.go(-1);
}
function handleCancelCall() {}
function handleCancelCall() {
createMessage.success('取消调用成功');
}
</script>
<style scoped lang="scss">
......@@ -148,3 +167,5 @@
}
}
</style>
function useMessage(): { createMessage: any; } { throw new Error('Function not implemented.'); }
src/views/dataService/serviceManage/callerManage/index.vue
View file @ 038932c9
......@@ -52,6 +52,7 @@
import { router } from '@/router';
import GroupTree from './GroupTree.vue';
import Icon from '@/components/Icon/Icon.vue';
import { Tag } from 'ant-design-vue';
defineOptions({ name: 'SafetyLevelManage' });
const { createMessage, createConfirm } = useMessage();
......
src/views/dataService/serviceManage/callerManage/mock.ts
View file @ 038932c9
......@@ -182,7 +182,7 @@ export const tableListDetails: any[] = [
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
flag: '失败',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
......
src/views/dataService/serviceManage/gatewayConfig/businessGrouping/businessGrouping.data.ts
View file @ 038932c9
......@@ -67,14 +67,14 @@ export const detailsColumns: BasicColumn[] = [
dataIndex: 'endTime',
width: 120,
},
]
];
/** 列表展示字段*/
export const columns: BasicColumn[] = [
{
title: '业务分组名称',
dataIndex: 'name',
dataIndex: 'documentName',
width: 120,
slots: { customRender: 'name' },
slots: { customRender: 'documentName' },
},
{
title: '关联API路由数',
......@@ -88,15 +88,14 @@ export const columns: BasicColumn[] = [
},
];
export const formSchema: any[] = [
{
field: 'account',
label: '账号',
component: 'Input',
defaultValue:'admin',
defaultValue: 'admin',
componentProps: {
readOnly:true,
readOnly: true,
disabled: true,
},
},
......@@ -104,9 +103,9 @@ export const formSchema: any[] = [
field: 'name',
label: '用户名称',
component: 'Input',
defaultValue:'admin',
defaultValue: 'admin',
componentProps: {
readOnly:true,
readOnly: true,
disabled: true,
},
},
......@@ -114,41 +113,40 @@ export const formSchema: any[] = [
field: 'token',
label: '用户token',
component: 'InputTextArea',
defaultValue:'13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
defaultValue: '13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
componentProps: {
rows: 4,
readOnly:true,
readOnly: true,
disabled: true,
},
},
{
field: 'tokenTime',
label: 'token自动刷新频率',
field: 'tokenTime',
label: 'token自动刷新频率',
slot: 'tokenTime',
component: 'InputNumber',
defaultValue: 1,
component: 'InputNumber',
defaultValue: 1,
labelWidth: 160,
componentProps: {
min: 1,
max: 9999,
// disabled: true,
componentProps: {
min: 1,
max: 9999,
// disabled: true,
},
},
},
{
//用户密钥
field: 'userKey',
label: '用户密钥',
slot: 'userKey',
component: 'Input',
defaultValue:'transwarp12345',
defaultValue: 'transwarp12345',
componentProps: {
readOnly:true,
readOnly: true,
disabled: true,
style: { width: '27%' },
},
},
]
];
/**新建文件夹 表单*/
export const createDocumentFormSchema: FormSchema[] = [
{
......@@ -170,30 +168,31 @@ export const createDocumentFormSchema: FormSchema[] = [
field: 'fileType',
label: '文件类型',
component: 'Select',
defaultValue: '默认分组',
defaultValue: '业务分组',
colProps: { lg: 24, md: 24 },
componentProps: {
disabled: true,
options: [
{
label: '默认分组',
value: '默认分组',
label: '业务分组',
value: '业务分组',
},
{
label: 'test1',
value: 'test1',
label: 'test1分组',
value: 'test1分组',
},
{
label: 'test2',
value: 'test2',
label: 'test2分组',
value: 'test2分组',
},
],
},
},
];
// const [registerTable] = useTable({
// title: '可编辑单元格示例',
// api: demoListApi,
// columns: columns,
// showIndexColumn: false,
// bordered: true,
// });
// const [registerTable] = useTable({
// title: '可编辑单元格示例',
// api: demoListApi,
// columns: columns,
// showIndexColumn: false,
// bordered: true,
// });
src/views/dataService/serviceManage/gatewayConfig/businessGrouping/createDocument.vue
View file @ 038932c9
<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" />
</BasicModal>
</template>
<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 { BasicForm, useForm } from '@/components/Form';
import {createDocumentFormSchema} from './businessGrouping.data.ts';
import { createDocumentFormSchema } from './businessGrouping.data.ts';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const { createMessage, createConfirm } = useMessage();
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const isMove = ref(false);
......@@ -30,30 +37,25 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
var formData = {}
if (data.record === null || data.record === undefined){
formData = {
standardsTree: '100'
}
} else {
formData = {
standardsTree: data.record.businessId
}
}
isUpdate.value = !!data?.isUpdate;
// 塞值
setFieldsValue({
...formData,
...data.record,
});
});
const getTitle = computed(() => ('新建文件夹'));
const getTitle = computed(() => (!unref(isUpdate) ? '新建分组' : '重命名分组'));
/**确定按钮*/
async function handleSubmit() {
closeModal()
var values = await validate();
if (!unref(isUpdate)) {
createMessage.success({ content: '新增成功' });
closeModal();
} else {
createMessage.success({ content: '重命名成功' });
closeModal();
}
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
src/views/dataService/serviceManage/gatewayConfig/businessGrouping/index.vue
View file @ 038932c9
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #toolbar>
<a-button type="primary" @click="handleNew">新建</a-button>
<PageWrapper dense>
<PageWrapper dense class="sensitiveRecognition_executionRecord">
<div class="title">
<div class="title_left">
<div>
<Icon icon="ant-design:branches-outlined" :size="32" :color="'#3787f3'" />
</div>
<div style="padding-left: 10px">
<div class="name">业务分组</div>
<div style="color: darkgray"> 服务管理 / 网关配置 / 业务分组</div>
</div>
</div>
</div>
</PageWrapper>
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #headerTop>
<a-Input-Search placeholder="输入关键字搜索" style="width: 200px" />
<a-button type="primary" @click="handleNew" style="margin-left: 10px">新建</a-button>
</template>
<template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
......@@ -11,6 +27,7 @@
{
// label: '编辑',
icon: 'clarity:note-edit-line',
tooltip: '重命名',
onClick: handleEdit.bind(null, record),
},
{
......@@ -37,94 +54,119 @@
</template>
<script lang="ts" setup>
import { useModal } from '@/components/Modal';
import { reactive, onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './businessGrouping.data';
import {tableList} from "./mock";
import CreateDocument from './createDocument.vue';//新建组件
import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
import { reactive, onMounted, ref, unref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './businessGrouping.data';
import { tableList } from './mock';
import CreateDocument from './createDocument.vue'; //新建组件
import { useRoute, onBeforeRouteLeave, useRouter } from 'vue-router';
import Icon from '@/components/Icon/Icon.vue';
import Tooltip from '@/components/EllipsisText/src/Tooltip.vue';
import { is } from '@/utils/is';
const router = useRouter();
defineOptions({ name: 'safetyLevelManage' });
const { createMessage,createConfirm } = useMessage();
const route = useRoute();
const router = useRouter();
defineOptions({ name: 'SafetyLevelManage' });
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
title: '业务分组列表',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableList.length,
code:'',
message:'',
data: tableList,
};
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: ' ',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return { ...response};
},
rowKey: 'businessId',
rowSelection: true,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
showIndexColumn: false,//列表序号取消
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
return { ...response };
},
rowKey: 'businessId',
rowSelection: false,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
showIndexColumn: false, //列表序号取消
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
/**新建按钮 */
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
function handleNew(){
/**新建按钮 */
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
function handleNew() {
openCreateDocumentModal(true, {
isUpdate: false,
});
}
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认删除选中数据吗？',
});
}
// 编辑按钮
function handleEdit() {
console.log('点击触发handleEdit')
}
/**业务分组详情 */
function editApi(record: any) {
console.log('点击触发editApi',record)
router.push({
path: '/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails',
query: {
businessId: record.businessId,
}
});
}
}
function handleDelete() {
createMessage.success('删除成功!');
}
// 重命名按钮
function handleEdit(record: Recordable) {
openCreateDocumentModal(true, {
record,
isUpdate: true,
});
}
/**业务分组详情 */
function editApi(record: any) {
console.log('点击触发editApi', record);
router.push({
path: '/dataService/serviceManage/gatewayConfig/businessGrouping/groupDetails',
query: {
businessId: record.businessId,
},
});
}
onMounted(() => {});
</script>
<style scoped lang="scss">
.sensitiveRecognition_executionRecord {
height: 100%;
padding: 20px;
background-color: white;
onMounted(() => {
.title {
display: flex;
align-items: center;
justify-content: space-between;
});
.title_left {
display: flex;
align-items: center;
justify-content: space-between;
</script>
.name {
padding-bottom: 5px;
font-size: 17px;
font-weight: 600;
}
}
}
}
</style>
src/views/dataService/serviceManage/gatewayConfig/businessGrouping/mock.ts
View file @ 038932c9
export const tableList: any[] = [
{
businessId: 1,
name:'默认分组',
apiRoutNum:'17',
executorNum:'28',
documentName: '默认分组',
apiRoutNum: '17',
executorNum: '28',
},
{
businessId: 2,
name:'test1',
apiRoutNum:'17',
executorNum:'28',
documentName: 'test1',
apiRoutNum: '17',
executorNum: '28',
},
{
businessId: 3,
name:'test2',
apiRoutNum:'17',
executorNum:'28',
documentName: 'test2',
apiRoutNum: '17',
executorNum: '28',
},
]
];
export const tableListDetails: any[] = [
{
businessId: 1,
name:'test1',
callNum:'0',
callSuccessNum:'0',
callFailNum:'0',
flag:'调用中',
startTime:'2023-12-05',
endTime:'2023-12-05',
name: 'test1',
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
{
businessId: 1,
name:'test1',
callNum:'0',
callSuccessNum:'0',
callFailNum:'0',
flag:'调用中',
startTime:'2023-12-05',
endTime:'2023-12-05',
name: 'test1',
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
{
businessId: 1,
name:'test1',
callNum:'0',
callSuccessNum:'0',
callFailNum:'0',
flag:'调用中',
startTime:'2023-12-05',
endTime:'2023-12-05',
name: 'test1',
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
]
];
src/views/dataService/serviceManage/gatewayConfig/domainName/createDocument.vue
View file @ 038932c9
<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" />
<template #centerFooter>
<a-button>测试</a-button>
<a-button @click="handletest">测试</a-button>
</template>
</BasicModal>
</template>
<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 { BasicForm, useForm } from '@/components/Form';
import {createDocumentFormSchema} from './domainName.data.ts';
import { createDocumentFormSchema } from './domainName.data.ts';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
......@@ -18,6 +25,7 @@
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
const { createMessage, createConfirm } = useMessage();
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
......@@ -33,30 +41,31 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
var formData = {}
if (data.record === null || data.record === undefined){
formData = {
standardsTree: '100'
}
} else {
formData = {
standardsTree: data.record.businessId
}
}
isUpdate.value = !!data?.isUpdate;
// 塞值
setFieldsValue({
...formData,
...data.record,
});
});
const getTitle = computed(() => ('新建文件夹'));
const getTitle = computed(() => (!unref(isUpdate) ? '新建文件夹' : '修改文件夹'));
/**测试按钮*/
function handletest() {
createMessage.success('测试成功');
closeModal();
}
/**确定按钮*/
async function handleSubmit() {
closeModal()
var values = await validate();
if (!unref(isUpdate)) {
createMessage.success({ content: '新增成功' });
closeModal();
} else {
createMessage.success({ content: '修改成功' });
closeModal();
}
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
src/views/dataService/serviceManage/gatewayConfig/domainName/domainName.data.ts
View file @ 038932c9
......@@ -67,7 +67,7 @@ export const detailsColumns: BasicColumn[] = [
dataIndex: 'endTime',
width: 120,
},
]
];
/** 列表展示字段*/
export const columns: BasicColumn[] = [
{
......@@ -77,7 +77,7 @@ export const columns: BasicColumn[] = [
},
{
title: '描述',
dataIndex: 'describe',
dataIndex: 'description',
width: 120,
},
{
......@@ -140,9 +140,9 @@ export const apiRouterFormSchema: any[] = [
field: 'account',
label: '账号',
component: 'Input',
defaultValue:'admin',
defaultValue: 'admin',
componentProps: {
readOnly:true,
readOnly: true,
disabled: true,
},
},
......@@ -150,9 +150,9 @@ export const apiRouterFormSchema: any[] = [
field: 'name',
label: '用户名称',
component: 'Input',
defaultValue:'admin',
defaultValue: 'admin',
componentProps: {
readOnly:true,
readOnly: true,
disabled: true,
},
},
......@@ -160,41 +160,40 @@ export const apiRouterFormSchema: any[] = [
field: 'token',
label: '用户token',
component: 'InputTextArea',
defaultValue:'13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
defaultValue: '13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
componentProps: {
rows: 4,
readOnly:true,
readOnly: true,
disabled: true,
},
},
{
field: 'tokenTime',
label: 'token自动刷新频率',
field: 'tokenTime',
label: 'token自动刷新频率',
slot: 'tokenTime',
component: 'InputNumber',
defaultValue: 1,
component: 'InputNumber',
defaultValue: 1,
labelWidth: 160,
componentProps: {
min: 1,
max: 9999,
// disabled: true,
componentProps: {
min: 1,
max: 9999,
// disabled: true,
},
},
},
{
//用户密钥
field: 'userKey',
label: '用户密钥',
slot: 'userKey',
component: 'Input',
defaultValue:'transwarp12345',
defaultValue: 'transwarp12345',
componentProps: {
readOnly:true,
readOnly: true,
disabled: true,
style: { width: '27%' },
},
},
]
];
/**新建文件夹 表单*/
export const createDocumentFormSchema: FormSchema[] = [
{
......@@ -216,14 +215,13 @@ export const createDocumentFormSchema: FormSchema[] = [
field: 'description',
label: '描述',
component: 'Input',
defaultValue: '公司域名',
colProps: { lg: 24, md: 24 },
},
];
// const [registerTable] = useTable({
// title: '可编辑单元格示例',
// api: demoListApi,
// columns: columns,
// showIndexColumn: false,
// bordered: true,
// });
// const [registerTable] = useTable({
// title: '可编辑单元格示例',
// api: demoListApi,
// columns: columns,
// showIndexColumn: false,
// bordered: true,
// });
src/views/dataService/serviceManage/gatewayConfig/domainName/index.vue
View file @ 038932c9
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #toolbar>
<a-button type="primary" @click="handleNew">新建</a-button>
<PageWrapper dense>
<PageWrapper dense class="sensitiveRecognition_executionRecord">
<div class="title">
<div class="title_left">
<div>
<Icon icon="ant-design:branches-outlined" :size="32" :color="'#3787f3'" />
</div>
<div style="padding-left: 10px">
<div class="name">业务域名管理</div>
<div style="color: darkgray"> 服务管理 / 网关配置 / 业务域名管理</div>
</div>
</div>
</div>
</PageWrapper>
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #headerTop>
<a-Input-Search placeholder="输入关键字搜索" style="width: 200px" />
<a-button type="primary" @click="handleNew" style="margin-left: 10px">新建</a-button>
</template>
<template #toolbar> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
// label: '编辑',
// label: '修改',
icon: 'clarity:note-edit-line',
tooltip: '修改',
onClick: handleEdit.bind(null, record),
},
{
// label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
tooltip: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
......@@ -38,91 +54,113 @@
</template>
<script lang="ts" setup>
import { useModal } from '@/components/Modal';
import { reactive, onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './domainName.data';
import {tableList} from "./mock";
import ApiRouter from './apiRouter.vue'//关联api路由
import CreateDocument from './createDocument.vue';//新建组件
import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './domainName.data';
import { tableList } from './mock';
import ApiRouter from './apiRouter.vue'; //关联api路由
import CreateDocument from './createDocument.vue'; //新建组件
import { useRoute, onBeforeRouteLeave, useRouter } from 'vue-router';
import { is } from '@/utils/is';
import Icon from '@/components/Icon/Icon.vue';
const router = useRouter();
defineOptions({ name: 'safetyLevelManage' });
const { createMessage,createConfirm } = useMessage();
const route = useRoute();
const router = useRouter();
defineOptions({ name: 'SafetyLevelManage' });
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
title: '域名管理',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableList.length,
code:'',
message:'',
data: tableList,
};
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '域名管理',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return { ...response};
},
rowKey: 'businessId',
rowSelection: true,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
showIndexColumn: false,//列表序号取消
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
return { ...response };
},
rowKey: 'businessId',
rowSelection: true,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
showIndexColumn: false, //列表序号取消
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
/**新建按钮 */
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
function handleNew(){
/**新建按钮 */
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
function handleNew() {
openCreateDocumentModal(true, {
isUpdate: false,
});
}
/**关联api路由弹窗 */
const [registerApiRouterModal, { openModal: openApiRouterModal }] = useModal();
function editApi() {
openApiRouterModal(true, { });
}
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认删除选中数据吗？',
});
}
// 编辑按钮
function handleEdit() {
console.log('点击触发handleEdit')
}
}
/**关联api路由弹窗 */
const [registerApiRouterModal, { openModal: openApiRouterModal }] = useModal();
function editApi() {
openApiRouterModal(true, {});
}
function handleDelete() {
createMessage.success('删除成功');
}
// 修改按钮
function handleEdit(record: Recordable) {
openCreateDocumentModal(true, {
record,
isUpdate: true,
});
}
onMounted(() => {});
</script>
<style scoped lang="scss">
.sensitiveRecognition_executionRecord {
height: 100%;
padding: 20px;
background-color: white;
onMounted(() => {
.title {
display: flex;
align-items: center;
justify-content: space-between;
});
.title_left {
display: flex;
align-items: center;
justify-content: space-between;
</script>
.name {
padding-bottom: 5px;
font-size: 17px;
font-weight: 600;
}
}
}
}
</style>
src/views/dataService/serviceManage/gatewayConfig/domainName/mock.ts
View file @ 038932c9
export const tableList: any[] = [
{
businessId: 1,
domainName:'www.asdf.sdf',
describe:'公司域名地址',
createdBy:'泰罗',
creationTime:'2023-12-05 13:05:06',
apiRouter:'28',
domainName: 'www.asdf.sdf',
description: '公司域名地址',
createdBy: '泰罗',
creationTime: '2023-12-05 13:05:06',
apiRouter: '28',
},
{
{
businessId: 2,
domainName:'www.asdf.sdf',
describe:'公司域名地址',
createdBy:'泰罗',
creationTime:'2023-12-05 13:05:06',
apiRouter:'28',
domainName: 'www.asdf.sdf',
description: '公司域名地址',
createdBy: '泰罗',
creationTime: '2023-12-05 13:05:06',
apiRouter: '28',
},
{
{
businessId: 3,
domainName:'www.asdf.sdf',
describe:'公司域名地址',
createdBy:'泰罗',
creationTime:'2023-12-05 13:05:06',
apiRouter:'28',
domainName: 'www.asdf.sdf',
description: '公司域名地址',
createdBy: '泰罗',
creationTime: '2023-12-05 13:05:06',
apiRouter: '28',
},
]
];
/** 关联api路由弹窗 */
export const tableList0: any[] = [
{
businessId: 1,
apiColumnName:'中电费回收率',
apiColumnName: '中电费回收率',
},
{
businessId: 2,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
{
businessId: 3,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
{
businessId: 4,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
{
businessId: 5,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
{
businessId: 6,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
{
businessId: 7,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
{
businessId: 8,
apiColumnName:'电费回收率',
apiColumnName: '电费回收率',
},
]
];
export const tableList2: any[] = [
{
businessId: 1,
routerName:'天涯海角路由',
grouping:'默认分组',
requestManner:'Get',
protocolType:'HTTP',
dynamicRouter:'www.asdf.sdf',
routerName: '天涯海角路由',
grouping: '默认分组',
requestManner: 'Get',
protocolType: 'HTTP',
dynamicRouter: 'www.asdf.sdf',
},
{
businessId: 2,
routerName:'天涯海角路由',
grouping:'默认分组',
requestManner:'Post',
protocolType:'HTTP',
dynamicRouter:'www.asdf.sdf',
routerName: '天涯海角路由',
grouping: '默认分组',
requestManner: 'Post',
protocolType: 'HTTP',
dynamicRouter: 'www.asdf.sdf',
},
{
businessId: 3,
routerName:'天涯海角路由',
grouping:'默认分组',
requestManner:'Get',
protocolType:'HTTPS',
dynamicRouter:'www.asdf.sdf',
routerName: '天涯海角路由',
grouping: '默认分组',
requestManner: 'Get',
protocolType: 'HTTPS',
dynamicRouter: 'www.asdf.sdf',
},
]
];
export const tableListDetails: any[] = [
{
businessId: 1,
name:'test1',
callNum:'0',
callSuccessNum:'0',
callFailNum:'0',
flag:'调用中',
startTime:'2023-12-05',
endTime:'2023-12-05',
name: 'test1',
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
{
businessId: 1,
name:'test1',
callNum:'0',
callSuccessNum:'0',
callFailNum:'0',
flag:'调用中',
startTime:'2023-12-05',
endTime:'2023-12-05',
name: 'test1',
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
{
businessId: 1,
name:'test1',
callNum:'0',
callSuccessNum:'0',
callFailNum:'0',
flag:'调用中',
startTime:'2023-12-05',
endTime:'2023-12-05',
},
]
name: 'test1',
callNum: '0',
callSuccessNum: '0',
callFailNum: '0',
flag: '调用中',
startTime: '2023-12-05',
endTime: '2023-12-05',
},
];
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