Commit 038932c9 authored by baiyinhao's avatar baiyinhao

修改页面

parent cb1a14ba
...@@ -75,6 +75,8 @@ ...@@ -75,6 +75,8 @@
closeModal(); closeModal();
if (isUpdate.value) { if (isUpdate.value) {
createMessage.success('编辑成功'); createMessage.success('编辑成功');
} else {
createMessage.success('添加成功');
} }
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } }); emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally { } finally {
......
...@@ -4,45 +4,323 @@ export const tableList: any[] = [ ...@@ -4,45 +4,323 @@ export const tableList: any[] = [
{ {
id: '1', id: '1',
businessId: '301', businessId: '301',
ip: '127.0.0.1', ip: '192.168.1.100',
protectAction: '阻断', protectAction: '放行',
markTime: '2023-12-08 15:27:07', markTime: '2023-12-08 14:30:00',
fieldName: 'user', fieldName: 'username',
featureTraffic: '1000', featureTraffic: '500',
api: 'login', api: 'login',
url: 'https://www.badu.com', url: 'https://www.example.com/login',
}, },
{ {
id: '2', id: '2',
businessId: '302', businessId: '302',
ip: '127.0.0.1', ip: '10.0.0.1',
protectAction: '阻断', protectAction: '放行',
markTime: '2023-12-08 15:06:44', markTime: '2023-12-08 12:45:00',
fieldName: 'user', fieldName: 'email',
featureTraffic: '1000', featureTraffic: '2000',
api: 'login', api: 'login',
url: 'https://www.badu.com', url: 'https://www.example.com/register',
}, },
{ {
id: '3', id: '3',
businessId: '303', businessId: '303',
ip: '127.0.0.1', ip: '172.16.1.100',
protectAction: '阻断', protectAction: '放行',
markTime: '2023-12-08 15:48:56', markTime: '2023-12-08 16:15:00',
fieldName: 'user', fieldName: 'password',
featureTraffic: '1000', featureTraffic: '100',
api: 'login', api: 'login',
url: 'https://www.badu.com', url: 'https://www.example.com/forgot-password',
}, },
{ {
id: '4', id: '4',
businessId: '304', businessId: '304',
ip: '127.0.0.1', ip: '192.168.1.50',
protectAction: '阻断', protectAction: '拒绝',
markTime: '2023-12-08 15:27:07', markTime: '2023-12-08 14:30:00',
fieldName: 'user', 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', featureTraffic: '1000',
api: 'login', 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',
}, },
]; ];
...@@ -23,24 +23,38 @@ ...@@ -23,24 +23,38 @@
</BasicForm> </BasicForm>
<step-header title="已使用服务" /> <step-header title="已使用服务" />
<BasicTable @register="registerTable" :rowSelection="rowSelection"> <BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #headerTop>
<a-Input-search placeholder="输入关键字搜索" style="width: 200px" />
</template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
label: '取消调用', label: '取消调用',
onClick: handleCancelCall.bind(null, record), popConfirm: {
title: '是否取消调用',
placement: 'left',
confirm: handleCancelCall.bind(null, record),
},
}, },
]" ]"
/> />
</template> </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> </template>
</BasicTable> </BasicTable>
</div> </div>
</template> </template>
<script lang="ts" setup> <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 Icon from '@/components/Icon/Icon.vue';
import { EditOutlined } from '@ant-design/icons-vue'; import { EditOutlined } from '@ant-design/icons-vue';
import { router } from '@/router'; import { router } from '@/router';
...@@ -50,7 +64,9 @@ ...@@ -50,7 +64,9 @@
import { tableListDetails } from './mock'; import { tableListDetails } from './mock';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { ref } from 'vue'; import { ref } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100, labelWidth: 100,
baseColProps: { lg: 12, md: 24 }, baseColProps: { lg: 12, md: 24 },
...@@ -93,7 +109,8 @@ ...@@ -93,7 +109,8 @@
schemas: detailSchemas, schemas: detailSchemas,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
useSearchForm: true, showIndexColumn: false,
useSearchForm: false,
showTableSetting: false, showTableSetting: false,
bordered: true, bordered: true,
actionColumn: { actionColumn: {
...@@ -106,7 +123,9 @@ ...@@ -106,7 +123,9 @@
function handleGoBack() { function handleGoBack() {
router.go(-1); router.go(-1);
} }
function handleCancelCall() {} function handleCancelCall() {
createMessage.success('取消调用成功');
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -148,3 +167,5 @@ ...@@ -148,3 +167,5 @@
} }
} }
</style> </style>
function useMessage(): { createMessage: any; } { throw new Error('Function not implemented.'); }
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
import { router } from '@/router'; import { router } from '@/router';
import GroupTree from './GroupTree.vue'; import GroupTree from './GroupTree.vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { Tag } from 'ant-design-vue';
defineOptions({ name: 'SafetyLevelManage' }); defineOptions({ name: 'SafetyLevelManage' });
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
......
...@@ -182,7 +182,7 @@ export const tableListDetails: any[] = [ ...@@ -182,7 +182,7 @@ export const tableListDetails: any[] = [
callNum: '0', callNum: '0',
callSuccessNum: '0', callSuccessNum: '0',
callFailNum: '0', callFailNum: '0',
flag: '调用中', flag: '失败',
startTime: '2023-12-05', startTime: '2023-12-05',
endTime: '2023-12-05', endTime: '2023-12-05',
}, },
......
...@@ -67,14 +67,14 @@ export const detailsColumns: BasicColumn[] = [ ...@@ -67,14 +67,14 @@ export const detailsColumns: BasicColumn[] = [
dataIndex: 'endTime', dataIndex: 'endTime',
width: 120, width: 120,
}, },
] ];
/** 列表展示字段*/ /** 列表展示字段*/
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '业务分组名称', title: '业务分组名称',
dataIndex: 'name', dataIndex: 'documentName',
width: 120, width: 120,
slots: { customRender: 'name' }, slots: { customRender: 'documentName' },
}, },
{ {
title: '关联API路由数', title: '关联API路由数',
...@@ -88,15 +88,14 @@ export const columns: BasicColumn[] = [ ...@@ -88,15 +88,14 @@ export const columns: BasicColumn[] = [
}, },
]; ];
export const formSchema: any[] = [ export const formSchema: any[] = [
{ {
field: 'account', field: 'account',
label: '账号', label: '账号',
component: 'Input', component: 'Input',
defaultValue:'admin', defaultValue: 'admin',
componentProps: { componentProps: {
readOnly:true, readOnly: true,
disabled: true, disabled: true,
}, },
}, },
...@@ -104,9 +103,9 @@ export const formSchema: any[] = [ ...@@ -104,9 +103,9 @@ export const formSchema: any[] = [
field: 'name', field: 'name',
label: '用户名称', label: '用户名称',
component: 'Input', component: 'Input',
defaultValue:'admin', defaultValue: 'admin',
componentProps: { componentProps: {
readOnly:true, readOnly: true,
disabled: true, disabled: true,
}, },
}, },
...@@ -114,41 +113,40 @@ export const formSchema: any[] = [ ...@@ -114,41 +113,40 @@ export const formSchema: any[] = [
field: 'token', field: 'token',
label: '用户token', label: '用户token',
component: 'InputTextArea', component: 'InputTextArea',
defaultValue:'13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df', defaultValue: '13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
componentProps: { componentProps: {
rows: 4, rows: 4,
readOnly:true, readOnly: true,
disabled: true, disabled: true,
}, },
}, },
{ {
field: 'tokenTime', field: 'tokenTime',
label: 'token自动刷新频率', label: 'token自动刷新频率',
slot: 'tokenTime', slot: 'tokenTime',
component: 'InputNumber', component: 'InputNumber',
defaultValue: 1, defaultValue: 1,
labelWidth: 160, labelWidth: 160,
componentProps: { componentProps: {
min: 1, min: 1,
max: 9999, max: 9999,
// disabled: true, // disabled: true,
},
}, },
},
{ {
//用户密钥 //用户密钥
field: 'userKey', field: 'userKey',
label: '用户密钥', label: '用户密钥',
slot: 'userKey', slot: 'userKey',
component: 'Input', component: 'Input',
defaultValue:'transwarp12345', defaultValue: 'transwarp12345',
componentProps: { componentProps: {
readOnly:true, readOnly: true,
disabled: true, disabled: true,
style: { width: '27%' }, style: { width: '27%' },
}, },
}, },
];
]
/**新建文件夹 表单*/ /**新建文件夹 表单*/
export const createDocumentFormSchema: FormSchema[] = [ export const createDocumentFormSchema: FormSchema[] = [
{ {
...@@ -170,30 +168,31 @@ export const createDocumentFormSchema: FormSchema[] = [ ...@@ -170,30 +168,31 @@ export const createDocumentFormSchema: FormSchema[] = [
field: 'fileType', field: 'fileType',
label: '文件类型', label: '文件类型',
component: 'Select', component: 'Select',
defaultValue: '默认分组', defaultValue: '业务分组',
colProps: { lg: 24, md: 24 }, colProps: { lg: 24, md: 24 },
componentProps: { componentProps: {
disabled: true,
options: [ options: [
{ {
label: '默认分组', label: '业务分组',
value: '默认分组', value: '业务分组',
}, },
{ {
label: 'test1', label: 'test1分组',
value: 'test1', value: 'test1分组',
}, },
{ {
label: 'test2', label: 'test2分组',
value: 'test2', value: 'test2分组',
}, },
], ],
}, },
}, },
]; ];
// const [registerTable] = useTable({ // const [registerTable] = useTable({
// title: '可编辑单元格示例', // title: '可编辑单元格示例',
// api: demoListApi, // api: demoListApi,
// columns: columns, // columns: columns,
// showIndexColumn: false, // showIndexColumn: false,
// bordered: true, // bordered: true,
// }); // });
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import {createDocumentFormSchema} from './businessGrouping.data.ts'; import { createDocumentFormSchema } from './businessGrouping.data.ts';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const { createMessage, createConfirm } = useMessage();
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true); const isUpdate = ref(true);
const isMove = ref(false); const isMove = ref(false);
...@@ -30,30 +37,25 @@ ...@@ -30,30 +37,25 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields(); resetFields();
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
var formData = {} isUpdate.value = !!data?.isUpdate;
if (data.record === null || data.record === undefined){
formData = {
standardsTree: '100'
}
} else {
formData = {
standardsTree: data.record.businessId
}
}
// 塞值 // 塞值
setFieldsValue({ setFieldsValue({
...formData, ...data.record,
}); });
}); });
const getTitle = computed(() => ('新建文件夹')); const getTitle = computed(() => (!unref(isUpdate) ? '新建分组' : '重命名分组'));
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
closeModal() var values = await validate();
if (!unref(isUpdate)) {
createMessage.success({ content: '新增成功' });
closeModal();
} else {
createMessage.success({ content: '重命名成功' });
closeModal();
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <PageWrapper dense>
<BasicTable @register="registerTable" :rowSelection="rowSelection"> <PageWrapper dense class="sensitiveRecognition_executionRecord">
<template #toolbar> <div class="title">
<a-button type="primary" @click="handleNew">新建</a-button> <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>
<template #toolbar> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
...@@ -11,6 +27,7 @@ ...@@ -11,6 +27,7 @@
{ {
// label: '编辑', // label: '编辑',
icon: 'clarity:note-edit-line', icon: 'clarity:note-edit-line',
tooltip: '重命名',
onClick: handleEdit.bind(null, record), onClick: handleEdit.bind(null, record),
}, },
{ {
...@@ -37,94 +54,119 @@ ...@@ -37,94 +54,119 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { reactive, onMounted,ref } from 'vue'; import { reactive, onMounted, ref, unref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './businessGrouping.data'; import { columns, searchFormSchema } from './businessGrouping.data';
import {tableList} from "./mock"; import { tableList } from './mock';
import CreateDocument from './createDocument.vue';//新建组件 import CreateDocument from './createDocument.vue'; //新建组件
import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router'; 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(); const router = useRouter();
defineOptions({ name: 'safetyLevelManage' }); defineOptions({ name: 'SafetyLevelManage' });
const { createMessage,createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const route = useRoute(); const route = useRoute();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({ const [
title: '业务分组列表', registerTable,
api: async (params) => { { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
const response = { ] = useTable({
pageNu: "1", title: ' ',
pageSize: "10", api: async (params) => {
pages: "1", const response = {
total: tableList.length, pageNu: '1',
code:'', pageSize: '10',
message:'', pages: '1',
data: tableList, total: tableList.length,
}; code: '',
message: '',
data: tableList,
};
return { ...response}; return { ...response };
}, },
rowKey: 'businessId', rowKey: 'businessId',
rowSelection: true, rowSelection: false,
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
showIndexColumn: false,//列表序号取消 showIndexColumn: false, //列表序号取消
useSearchForm: true, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
bordered: true, bordered: true,
handleSearchInfoFn(info) { handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info); console.log('handleSearchInfoFn', info);
return info; return info;
}, },
actionColumn: { actionColumn: {
width: 120, width: 120,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
// slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });
/**新建按钮 */ /**新建按钮 */
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal(); const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
function handleNew(){ function handleNew() {
openCreateDocumentModal(true, { 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>
export const tableList: any[] = [ export const tableList: any[] = [
{ {
businessId: 1, businessId: 1,
name:'默认分组', documentName: '默认分组',
apiRoutNum:'17', apiRoutNum: '17',
executorNum:'28', executorNum: '28',
}, },
{ {
businessId: 2, businessId: 2,
name:'test1', documentName: 'test1',
apiRoutNum:'17', apiRoutNum: '17',
executorNum:'28', executorNum: '28',
}, },
{ {
businessId: 3, businessId: 3,
name:'test2', documentName: 'test2',
apiRoutNum:'17', apiRoutNum: '17',
executorNum:'28', executorNum: '28',
}, },
];
]
export const tableListDetails: any[] = [ export const tableListDetails: any[] = [
{ {
businessId: 1, businessId: 1,
name:'test1', name: 'test1',
callNum:'0', callNum: '0',
callSuccessNum:'0', callSuccessNum: '0',
callFailNum:'0', callFailNum: '0',
flag:'调用中', flag: '调用中',
startTime:'2023-12-05', startTime: '2023-12-05',
endTime:'2023-12-05', endTime: '2023-12-05',
}, },
{ {
businessId: 1, businessId: 1,
name:'test1', name: 'test1',
callNum:'0', callNum: '0',
callSuccessNum:'0', callSuccessNum: '0',
callFailNum:'0', callFailNum: '0',
flag:'调用中', flag: '调用中',
startTime:'2023-12-05', startTime: '2023-12-05',
endTime:'2023-12-05', endTime: '2023-12-05',
}, },
{ {
businessId: 1, businessId: 1,
name:'test1', name: 'test1',
callNum:'0', callNum: '0',
callSuccessNum:'0', callSuccessNum: '0',
callFailNum:'0', callFailNum: '0',
flag:'调用中', flag: '调用中',
startTime:'2023-12-05', startTime: '2023-12-05',
endTime:'2023-12-05', endTime: '2023-12-05',
}, },
] ];
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
<template #centerFooter> <template #centerFooter>
<a-button>测试</a-button> <a-button @click="handletest">测试</a-button>
</template> </template>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import {createDocumentFormSchema} from './domainName.data.ts'; import { createDocumentFormSchema } from './domainName.data.ts';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
...@@ -18,6 +25,7 @@ ...@@ -18,6 +25,7 @@
const isUpdate = ref(true); const isUpdate = ref(true);
const isMove = ref(false); const isMove = ref(false);
const rowId = ref(''); const rowId = ref('');
const { createMessage, createConfirm } = useMessage();
//获取接口数据并放在下拉框里(这里是打开了一个弹框) //获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单 //初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
...@@ -33,30 +41,31 @@ ...@@ -33,30 +41,31 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields(); resetFields();
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
var formData = {}
if (data.record === null || data.record === undefined){ isUpdate.value = !!data?.isUpdate;
formData = {
standardsTree: '100'
}
} else {
formData = {
standardsTree: data.record.businessId
}
}
// 塞值 // 塞值
setFieldsValue({ setFieldsValue({
...formData, ...data.record,
}); });
}); });
const getTitle = computed(() => ('新建文件夹')); const getTitle = computed(() => (!unref(isUpdate) ? '新建文件夹' : '修改文件夹'));
/**测试按钮*/
function handletest() {
createMessage.success('测试成功');
closeModal();
}
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
closeModal() var values = await validate();
if (!unref(isUpdate)) {
createMessage.success({ content: '新增成功' });
closeModal();
} else {
createMessage.success({ content: '修改成功' });
closeModal();
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
...@@ -67,7 +67,7 @@ export const detailsColumns: BasicColumn[] = [ ...@@ -67,7 +67,7 @@ export const detailsColumns: BasicColumn[] = [
dataIndex: 'endTime', dataIndex: 'endTime',
width: 120, width: 120,
}, },
] ];
/** 列表展示字段*/ /** 列表展示字段*/
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
...@@ -77,7 +77,7 @@ export const columns: BasicColumn[] = [ ...@@ -77,7 +77,7 @@ export const columns: BasicColumn[] = [
}, },
{ {
title: '描述', title: '描述',
dataIndex: 'describe', dataIndex: 'description',
width: 120, width: 120,
}, },
{ {
...@@ -140,9 +140,9 @@ export const apiRouterFormSchema: any[] = [ ...@@ -140,9 +140,9 @@ export const apiRouterFormSchema: any[] = [
field: 'account', field: 'account',
label: '账号', label: '账号',
component: 'Input', component: 'Input',
defaultValue:'admin', defaultValue: 'admin',
componentProps: { componentProps: {
readOnly:true, readOnly: true,
disabled: true, disabled: true,
}, },
}, },
...@@ -150,9 +150,9 @@ export const apiRouterFormSchema: any[] = [ ...@@ -150,9 +150,9 @@ export const apiRouterFormSchema: any[] = [
field: 'name', field: 'name',
label: '用户名称', label: '用户名称',
component: 'Input', component: 'Input',
defaultValue:'admin', defaultValue: 'admin',
componentProps: { componentProps: {
readOnly:true, readOnly: true,
disabled: true, disabled: true,
}, },
}, },
...@@ -160,41 +160,40 @@ export const apiRouterFormSchema: any[] = [ ...@@ -160,41 +160,40 @@ export const apiRouterFormSchema: any[] = [
field: 'token', field: 'token',
label: '用户token', label: '用户token',
component: 'InputTextArea', component: 'InputTextArea',
defaultValue:'13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df', defaultValue: '13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
componentProps: { componentProps: {
rows: 4, rows: 4,
readOnly:true, readOnly: true,
disabled: true, disabled: true,
}, },
}, },
{ {
field: 'tokenTime', field: 'tokenTime',
label: 'token自动刷新频率', label: 'token自动刷新频率',
slot: 'tokenTime', slot: 'tokenTime',
component: 'InputNumber', component: 'InputNumber',
defaultValue: 1, defaultValue: 1,
labelWidth: 160, labelWidth: 160,
componentProps: { componentProps: {
min: 1, min: 1,
max: 9999, max: 9999,
// disabled: true, // disabled: true,
},
}, },
},
{ {
//用户密钥 //用户密钥
field: 'userKey', field: 'userKey',
label: '用户密钥', label: '用户密钥',
slot: 'userKey', slot: 'userKey',
component: 'Input', component: 'Input',
defaultValue:'transwarp12345', defaultValue: 'transwarp12345',
componentProps: { componentProps: {
readOnly:true, readOnly: true,
disabled: true, disabled: true,
style: { width: '27%' }, style: { width: '27%' },
}, },
}, },
];
]
/**新建文件夹 表单*/ /**新建文件夹 表单*/
export const createDocumentFormSchema: FormSchema[] = [ export const createDocumentFormSchema: FormSchema[] = [
{ {
...@@ -216,14 +215,13 @@ export const createDocumentFormSchema: FormSchema[] = [ ...@@ -216,14 +215,13 @@ export const createDocumentFormSchema: FormSchema[] = [
field: 'description', field: 'description',
label: '描述', label: '描述',
component: 'Input', component: 'Input',
defaultValue: '公司域名',
colProps: { lg: 24, md: 24 }, colProps: { lg: 24, md: 24 },
}, },
]; ];
// const [registerTable] = useTable({ // const [registerTable] = useTable({
// title: '可编辑单元格示例', // title: '可编辑单元格示例',
// api: demoListApi, // api: demoListApi,
// columns: columns, // columns: columns,
// showIndexColumn: false, // showIndexColumn: false,
// bordered: true, // bordered: true,
// }); // });
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <PageWrapper dense>
<BasicTable @register="registerTable" :rowSelection="rowSelection"> <PageWrapper dense class="sensitiveRecognition_executionRecord">
<template #toolbar> <div class="title">
<a-button type="primary" @click="handleNew">新建</a-button> <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>
<template #toolbar> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
// label: '编辑', // label: '修改',
icon: 'clarity:note-edit-line', icon: 'clarity:note-edit-line',
tooltip: '修改',
onClick: handleEdit.bind(null, record), onClick: handleEdit.bind(null, record),
}, },
{ {
// label: '删除', // label: '删除',
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
color: 'error', color: 'error',
tooltip: '删除',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
placement: 'left', placement: 'left',
...@@ -38,91 +54,113 @@ ...@@ -38,91 +54,113 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { reactive, onMounted,ref } from 'vue'; import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './domainName.data'; import { columns, searchFormSchema } from './domainName.data';
import {tableList} from "./mock"; import { tableList } from './mock';
import ApiRouter from './apiRouter.vue'//关联api路由 import ApiRouter from './apiRouter.vue'; //关联api路由
import CreateDocument from './createDocument.vue';//新建组件 import CreateDocument from './createDocument.vue'; //新建组件
import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router'; import { useRoute, onBeforeRouteLeave, useRouter } from 'vue-router';
import { is } from '@/utils/is';
import Icon from '@/components/Icon/Icon.vue';
const router = useRouter(); const router = useRouter();
defineOptions({ name: 'safetyLevelManage' }); defineOptions({ name: 'SafetyLevelManage' });
const { createMessage,createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const route = useRoute(); const route = useRoute();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({ const [
title: '域名管理', registerTable,
api: async (params) => { { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
const response = { ] = useTable({
pageNu: "1", title: '域名管理',
pageSize: "10", api: async (params) => {
pages: "1", const response = {
total: tableList.length, pageNu: '1',
code:'', pageSize: '10',
message:'', pages: '1',
data: tableList, total: tableList.length,
}; code: '',
message: '',
data: tableList,
};
return { ...response}; return { ...response };
}, },
rowKey: 'businessId', rowKey: 'businessId',
rowSelection: true, rowSelection: true,
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
showIndexColumn: false,//列表序号取消 showIndexColumn: false, //列表序号取消
useSearchForm: true, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
bordered: true, bordered: true,
handleSearchInfoFn(info) { handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info); console.log('handleSearchInfoFn', info);
return info; return info;
}, },
actionColumn: { actionColumn: {
width: 120, width: 120,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
// slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });
/**新建按钮 */ /**新建按钮 */
const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal(); const [registerCreateDocumentModal, { openModal: openCreateDocumentModal }] = useModal();
function handleNew(){ function handleNew() {
openCreateDocumentModal(true, { openCreateDocumentModal(true, {
isUpdate: false,
}); });
} }
/**关联api路由弹窗 */ /**关联api路由弹窗 */
const [registerApiRouterModal, { openModal: openApiRouterModal }] = useModal(); const [registerApiRouterModal, { openModal: openApiRouterModal }] = useModal();
function editApi() { function editApi() {
openApiRouterModal(true, { }); openApiRouterModal(true, {});
} }
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认删除选中数据吗?',
});
}
// 编辑按钮
function handleEdit() {
console.log('点击触发handleEdit')
}
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>
export const tableList: any[] = [ export const tableList: any[] = [
{ {
businessId: 1, businessId: 1,
domainName:'www.asdf.sdf', domainName: 'www.asdf.sdf',
describe:'公司域名地址', description: '公司域名地址',
createdBy:'泰罗', createdBy: '泰罗',
creationTime:'2023-12-05 13:05:06', creationTime: '2023-12-05 13:05:06',
apiRouter:'28', apiRouter: '28',
}, },
{ {
businessId: 2, businessId: 2,
domainName:'www.asdf.sdf', domainName: 'www.asdf.sdf',
describe:'公司域名地址', description: '公司域名地址',
createdBy:'泰罗', createdBy: '泰罗',
creationTime:'2023-12-05 13:05:06', creationTime: '2023-12-05 13:05:06',
apiRouter:'28', apiRouter: '28',
}, },
{ {
businessId: 3, businessId: 3,
domainName:'www.asdf.sdf', domainName: 'www.asdf.sdf',
describe:'公司域名地址', description: '公司域名地址',
createdBy:'泰罗', createdBy: '泰罗',
creationTime:'2023-12-05 13:05:06', creationTime: '2023-12-05 13:05:06',
apiRouter:'28', apiRouter: '28',
}, },
];
]
/** 关联api路由弹窗 */ /** 关联api路由弹窗 */
export const tableList0: any[] = [ export const tableList0: any[] = [
{ {
businessId: 1, businessId: 1,
apiColumnName:'中电费回收率', apiColumnName: '中电费回收率',
}, },
{ {
businessId: 2, businessId: 2,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
{ {
businessId: 3, businessId: 3,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
{ {
businessId: 4, businessId: 4,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
{ {
businessId: 5, businessId: 5,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
{ {
businessId: 6, businessId: 6,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
{ {
businessId: 7, businessId: 7,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
{ {
businessId: 8, businessId: 8,
apiColumnName:'电费回收率', apiColumnName: '电费回收率',
}, },
];
]
export const tableList2: any[] = [ export const tableList2: any[] = [
{ {
businessId: 1, businessId: 1,
routerName:'天涯海角路由', routerName: '天涯海角路由',
grouping:'默认分组', grouping: '默认分组',
requestManner:'Get', requestManner: 'Get',
protocolType:'HTTP', protocolType: 'HTTP',
dynamicRouter:'www.asdf.sdf', dynamicRouter: 'www.asdf.sdf',
}, },
{ {
businessId: 2, businessId: 2,
routerName:'天涯海角路由', routerName: '天涯海角路由',
grouping:'默认分组', grouping: '默认分组',
requestManner:'Post', requestManner: 'Post',
protocolType:'HTTP', protocolType: 'HTTP',
dynamicRouter:'www.asdf.sdf', dynamicRouter: 'www.asdf.sdf',
}, },
{ {
businessId: 3, businessId: 3,
routerName:'天涯海角路由', routerName: '天涯海角路由',
grouping:'默认分组', grouping: '默认分组',
requestManner:'Get', requestManner: 'Get',
protocolType:'HTTPS', protocolType: 'HTTPS',
dynamicRouter:'www.asdf.sdf', dynamicRouter: 'www.asdf.sdf',
}, },
];
]
export const tableListDetails: any[] = [ export const tableListDetails: any[] = [
{ {
businessId: 1, businessId: 1,
name:'test1', name: 'test1',
callNum:'0', callNum: '0',
callSuccessNum:'0', callSuccessNum: '0',
callFailNum:'0', callFailNum: '0',
flag:'调用中', flag: '调用中',
startTime:'2023-12-05', startTime: '2023-12-05',
endTime:'2023-12-05', endTime: '2023-12-05',
}, },
{ {
businessId: 1, businessId: 1,
name:'test1', name: 'test1',
callNum:'0', callNum: '0',
callSuccessNum:'0', callSuccessNum: '0',
callFailNum:'0', callFailNum: '0',
flag:'调用中', flag: '调用中',
startTime:'2023-12-05', startTime: '2023-12-05',
endTime:'2023-12-05', endTime: '2023-12-05',
}, },
{ {
businessId: 1, businessId: 1,
name:'test1', name: 'test1',
callNum:'0', callNum: '0',
callSuccessNum:'0', callSuccessNum: '0',
callFailNum:'0', callFailNum: '0',
flag:'调用中', flag: '调用中',
startTime:'2023-12-05', startTime: '2023-12-05',
endTime:'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