Commit 49471aac authored by baiyinhao's avatar baiyinhao

修改api接入安全页面

parent e4ec2448
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<!-- <div class="modal_top">
<div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
<div>
<div class="title">{{ formParams.fieldName }}</div>
<div class="path">{{ formParams.path }}</div>
</div>
</div> -->
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './classificationAndGrading.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const formParams = ref('');
const title = ref();
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
isUpdate.value = data.isUpdate;
if (data.isUpdate === false) {
title.value = '新增分类分级';
updateSchema([
{ field: 'sensitiveState', required: true, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: true, componentProps: { disabled: false } },
{ field: 'level', required: true, componentProps: { disabled: false } },
]);
} else {
title.value = '编辑分类分级';
updateSchema([
{ field: 'sensitiveState', required: false, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: false } },
{ field: 'level', required: false, componentProps: { disabled: false } },
]);
}
setModalProps({ confirmLoading: false });
formParams.value = data.record;
setFieldsValue({
...data.record,
});
});
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
if (isUpdate.value) {
createMessage.success('编辑成功');
}
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modal_top {
display: flex;
align-items: center;
padding: 0 0 20px 20px;
.title {
font-size: 16px;
font-weight: 500;
}
}
</style>
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<!-- <div class="modal_top">
<div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
<div>
<div class="title">{{ formParams.fieldName }}</div>
<div class="path">{{ formParams.path }}</div>
</div>
</div> -->
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './classificationAndGrading.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const formParams = ref('');
const title = ref();
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
isUpdate.value = data.isUpdate;
if (data.isUpdate === false) {
title.value = '新增分类分级';
updateSchema([
{ field: 'sensitiveState', required: true, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: true, componentProps: { disabled: false } },
{ field: 'level', required: true, componentProps: { disabled: false } },
]);
} else {
title.value = '编辑分类分级';
updateSchema([
{ field: 'sensitiveState', required: false, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: false } },
{ field: 'level', required: false, componentProps: { disabled: false } },
]);
}
setModalProps({ confirmLoading: false });
formParams.value = data.record;
setFieldsValue({
...data.record,
});
});
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
if (isUpdate.value) {
createMessage.success('编辑成功');
}
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modal_top {
display: flex;
align-items: center;
padding: 0 0 20px 20px;
.title {
font-size: 16px;
font-weight: 500;
}
}
</style>
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<!-- <div class="modal_top">
<div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
<div>
<div class="title">{{ formParams.fieldName }}</div>
<div class="path">{{ formParams.path }}</div>
</div>
</div> -->
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './classificationAndGrading.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const formParams = ref('');
const title = ref();
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
isUpdate.value = data.isUpdate;
if (data.isUpdate === false) {
title.value = '新增分类分级';
updateSchema([
{ field: 'sensitiveState', required: true, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: true, componentProps: { disabled: false } },
{ field: 'level', required: true, componentProps: { disabled: false } },
]);
} else {
title.value = '编辑分类分级';
updateSchema([
{ field: 'sensitiveState', required: false, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: false } },
{ field: 'level', required: false, componentProps: { disabled: false } },
]);
}
setModalProps({ confirmLoading: false });
formParams.value = data.record;
setFieldsValue({
...data.record,
});
});
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
if (isUpdate.value) {
createMessage.success('编辑成功');
}
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modal_top {
display: flex;
align-items: center;
padding: 0 0 20px 20px;
.title {
font-size: 16px;
font-weight: 500;
}
}
</style>
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<!-- <div class="modal_top">
<div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
<div>
<div class="title">{{ formParams.fieldName }}</div>
<div class="path">{{ formParams.path }}</div>
</div>
</div> -->
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './classificationAndGrading.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const formParams = ref('');
const title = ref();
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
isUpdate.value = data.isUpdate;
if (data.isUpdate === false) {
title.value = '新增分类分级';
updateSchema([
{ field: 'sensitiveState', required: true, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: true, componentProps: { disabled: false } },
{ field: 'level', required: true, componentProps: { disabled: false } },
]);
} else {
title.value = '编辑分类分级';
updateSchema([
{ field: 'sensitiveState', required: false, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: false } },
{ field: 'level', required: false, componentProps: { disabled: false } },
]);
}
setModalProps({ confirmLoading: false });
formParams.value = data.record;
setFieldsValue({
...data.record,
});
});
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
if (isUpdate.value) {
createMessage.success('编辑成功');
}
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modal_top {
display: flex;
align-items: center;
padding: 0 0 20px 20px;
.title {
font-size: 16px;
font-weight: 500;
}
}
</style>
...@@ -7,6 +7,10 @@ export const tableList: any[] = [ ...@@ -7,6 +7,10 @@ export const tableList: any[] = [
ip: '127.0.0.1', ip: '127.0.0.1',
protectAction: '阻断', protectAction: '阻断',
markTime: '2023-12-08 15:27:07', markTime: '2023-12-08 15:27:07',
fieldName: 'user',
featureTraffic: '1000',
api: 'login',
url: 'https://www.badu.com',
}, },
{ {
id: '2', id: '2',
...@@ -14,6 +18,10 @@ export const tableList: any[] = [ ...@@ -14,6 +18,10 @@ export const tableList: any[] = [
ip: '127.0.0.1', ip: '127.0.0.1',
protectAction: '阻断', protectAction: '阻断',
markTime: '2023-12-08 15:06:44', markTime: '2023-12-08 15:06:44',
fieldName: 'user',
featureTraffic: '1000',
api: 'login',
url: 'https://www.badu.com',
}, },
{ {
id: '3', id: '3',
...@@ -21,6 +29,10 @@ export const tableList: any[] = [ ...@@ -21,6 +29,10 @@ export const tableList: any[] = [
ip: '127.0.0.1', ip: '127.0.0.1',
protectAction: '阻断', protectAction: '阻断',
markTime: '2023-12-08 15:48:56', markTime: '2023-12-08 15:48:56',
fieldName: 'user',
featureTraffic: '1000',
api: 'login',
url: 'https://www.badu.com',
}, },
{ {
id: '4', id: '4',
...@@ -28,5 +40,9 @@ export const tableList: any[] = [ ...@@ -28,5 +40,9 @@ export const tableList: any[] = [
ip: '127.0.0.1', ip: '127.0.0.1',
protectAction: '阻断', protectAction: '阻断',
markTime: '2023-12-08 15:27:07', markTime: '2023-12-08 15:27:07',
fieldName: 'user',
featureTraffic: '1000',
api: 'login',
url: 'https://www.badu.com',
}, },
]; ];
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