Skip to content

B
bigDataSystem
Commit e04f025e authored by chenjiahao's avatar chenjiahao
Browse files
Options

數據服務-API數據安全-分類分級bug修改&敏感識別列表頁修正&詳細/編輯頁&添加敏感規則

parent ff545333
Show whitespace changes
Inline Side-by-side
Showing with 914 additions and 92 deletions
src/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue
View file @ e04f025e
......@@ -17,7 +17,7 @@
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './classificationAndGrading.data';
......
src/views/dataService/APIDataSecurity/classificationAndGrading/classificationAndGrading.data.ts
View file @ e04f025e
......@@ -208,6 +208,7 @@ export const formSchema: any[] = [
label: '标记时间',
component: 'Input',
componentProps: {
allowClear: false,
style: {
border: 'none',
backgroundColor: 'transparent',
......
src/views/dataService/APIDataSecurity/sensitiveRecognition/GroupTree.vue
View file @ e04f025e
......@@ -12,7 +12,7 @@
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, onMounted, ref, unref } from 'vue';
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { Nullable } from '@vben/types';
import { TreeData } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts';
......
src/views/dataService/APIDataSecurity/sensitiveRecognition/addSensitiveRulersModal.vue 0 → 100644
View file @ e04f025e
<template>
<BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicTable @register="registerTable1">
<template #form-slot>
<a-button
type="primary"
@click="addReview"
:disabled="getRowSelection().selectedRowKeys <= 0"
>添加至预览</a-button
>
</template>
</BasicTable>
<Divider style="margin: 0 0 0 0" />
<BasicTable @register="registerTable2" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Divider } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { rulerFormSchema1, rulerFormSchema2 } from './sensitiveRecognition.data';
import { useMessage } from '@/hooks/web/useMessage';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { columnsTable3 } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognition.data';
import { ruleTtableList } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const title = ref('添加敏感规则');
let rulerTableData1 = ref(ruleTtableList);
let rulerTableData2 = ref();
const [registerTable1, { reload: reload1, getRowSelection }] = useTable({
api: async () => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: rulerTableData1.value.length,
code: '',
message: '',
data: rulerTableData1.value,
};
return { ...response };
},
rowKey: 'businessId',
columns: columnsTable3,
formConfig: {
labelWidth: 10,
showActionButtonGroup: false,
schemas: rulerFormSchema1,
autoSubmitOnEnter: true,
},
rowSelection: true,
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 300 },
handleSearchInfoFn(info) {
console.log('rulerTableData1', rulerTableData1.value);
rulerTableData1.value = ruleTtableList.filter(
(item) => info.name === undefined || item.name.includes(info.name),
);
console.log('rulerTableData1', rulerTableData1.value);
return info;
},
});
const [registerTable2, { reload: reload2 }] = useTable({
api: async () => {
console.log('111111------');
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: rulerTableData2.value.length,
code: '',
message: '',
data: rulerTableData2.value,
};
return { ...response };
},
rowKey: 'id',
columns: columnsTable3,
formConfig: {
labelWidth: 10,
showActionButtonGroup: false,
schemas: rulerFormSchema2,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 300 },
handleSearchInfoFn(info) {
console.log('rulerTableData2', rulerTableData2.value);
rulerTableData2.value = ruleTtableList.filter(
(item) => info.name === undefined || item.name.includes(info.name),
);
console.log('rulerTableData2', rulerTableData2.value);
return info;
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
setModalProps({ confirmLoading: false });
});
function addReview() {
const idList = getRowSelection().selectedRowKeys;
console.log('idList', idList);
// 过滤 rulerTableData1 中与 idList 中 businessId 相同的项，并将其添加到 rulerTableData2
rulerTableData2.value = rulerTableData1.value.filter((item) =>
idList.includes(item.businessId),
);
// 更新 rulerTableData1，移除已添加到 rulerTableData2 的项
rulerTableData1.value = rulerTableData1.value.filter(
(item) => !idList.includes(item.businessId),
);
console.log('rulerTableData1 after:', rulerTableData1.value);
console.log('rulerTableData2 after:', rulerTableData2.value);
reload1();
reload2();
}
async function handleSubmit() {
try {
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
if (isUpdate.value) {
createMessage.success('添加成功');
}
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modal_top {
padding: 0 0 20px 20px;
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: 500;
}
}
</style>
src/views/dataService/APIDataSecurity/sensitiveRecognition/index.vue
View file @ e04f025e
......@@ -37,11 +37,11 @@
import { useModal } from '@/components/Modal';
import { columns, searchFormSchema } from './sensitiveRecognition.data';
import { tableList } from './mock';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useRoute } from 'vue-router';
import SensitiveRecognitionModal from '@/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognitionEdit.vue';
import GroupTree from '@/views/dataService/APIDataSecurity/sensitiveRecognition/GroupTree.vue';
import { TreeData } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts';
import {router} from "@/router";
import { router } from '@/router';
const { createMessage } = useMessage();
const route = useRoute();
......
src/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts
View file @ e04f025e
......@@ -146,7 +146,7 @@ export const tableList: any[] = [
path: '敏感识别/共享工作区/test/托管系统',
APIModel: '托管模式',
sensitiveState: '非敏感',
policyState: '非敏感',
policyState: '关',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
......@@ -163,7 +163,7 @@ export const tableList: any[] = [
path: '敏感识别/admin-个人工作区/独收/向导API',
APIModel: '向导模式',
sensitiveState: '非敏感',
policyState: '非敏感',
policyState: '开',
level: 'G5',
sensitiveType: 'AccessKey ID',
source: '人工标记',
......@@ -180,7 +180,7 @@ export const tableList: any[] = [
path: '敏感识别/高级工作区/sql_api',
APIModel: 'SQL 模式',
sensitiveState: '敏感',
policyState: '敏感',
policyState: '开',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
......@@ -197,7 +197,7 @@ export const tableList: any[] = [
path: '敏感识别/高级工作区/sql_api',
APIModel: 'SQL 模式',
sensitiveState: '非敏感',
policyState: '非敏感',
policyState: '关',
level: '-',
sensitiveType: '',
source: '数据库血缘',
......@@ -205,3 +205,171 @@ export const tableList: any[] = [
recentRecognitionTime: '',
},
];
export const tableList1: any[] = [
{
businessId: '301',
name: '.data.idCard',
},
{
businessId: '120',
name: 'uuid',
},
{
businessId: '210',
name: 'maxRows',
},
{
businessId: '300',
name: 'valueSize',
},
];
export const tableList2: any[] = [
{
businessId: '301',
name: '.data.idCard',
},
{
businessId: '120',
name: 'uuid',
},
{
businessId: '210',
name: 'maxRows',
},
{
businessId: '300',
name: 'valueSize',
},
];
export const tableList3: any[] = [
{
businessId: '301',
fieldName: '.data.idCard',
name: '.data.idCard',
fieldType: '返回出参',
fieldCode: '.data.idCard',
APIName: '托管数据服务',
path: '敏感识别/共享工作区/test/托管系统',
APIModel: '托管模式',
sensitiveState: '非敏感',
policyState: '关',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
markTime: '2023-12-08 15:27:07',
recentRecognitionTime: '2023-12-08 15:27:07',
},
{
businessId: '120',
fieldName: 'uuid',
name: 'uuid',
fieldType: '请求入参',
fieldCode: 'uuid',
APIName: '向导API',
path: '敏感识别/admin-个人工作区/独收/向导API',
APIModel: '向导模式',
sensitiveState: '非敏感',
policyState: '开',
level: 'G5',
sensitiveType: 'AccessKey ID',
source: '人工标记',
markTime: '2023-12-08 15:06:44',
recentRecognitionTime: '2023-12-08 15:06:44',
},
{
businessId: '210',
fieldName: 'maxRows',
name: 'maxRows',
fieldType: '请求入参',
fieldCode: 'maxRows',
APIName: 'sql_api',
path: '敏感识别/高级工作区/sql_api',
APIModel: 'SQL 模式',
sensitiveState: '敏感',
policyState: '开',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
markTime: '2023-12-08 15:48:56',
recentRecognitionTime: '2023-12-08 15:48:56',
},
{
businessId: '300',
fieldName: 'valueSize',
name: 'valueSize',
fieldType: '返回出参',
fieldCode: 'valueSize',
APIName: 'sql_api',
path: '敏感识别/高级工作区/sql_api',
APIModel: 'SQL 模式',
sensitiveState: '非敏感',
policyState: '关',
level: '-',
sensitiveType: '',
source: '数据库血缘',
markTime: '',
recentRecognitionTime: '',
},
];
export const ruleTtableList: any[] = [
{
businessId: 1,
name: 'ip地址',
describe: '-------',
sensitiveType: 'ip地址',
level: 'G2',
owner: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
businessId: 2,
name: '军官证',
describe: '-------',
sensitiveType: '军官证',
level: 'G2',
owner: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
businessId: 3,
name: '手机号码（美国）',
describe: '-------',
sensitiveType: '固定电话',
level: 'G3',
owner: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
businessId: 4,
name: '身份证（中国香港）',
describe: '-------',
sensitiveType: '身份证',
level: 'G5',
owner: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
businessId: 5,
name: '身份证（马来西亚）',
describe: '-------',
sensitiveType: '身份证',
level: 'G5',
owner: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
businessId: 6,
name: '中国内地护照',
describe: '-------',
sensitiveType: '护照号',
level: 'G2',
owner: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
];
src/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognition.data.ts
View file @ e04f025e
import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { changeFlagApi } from '@/api/system/user/user';
// 引入开关组件
type CheckedType = boolean | string | number;
/** 列表筛选项*/
export const searchFormSchema: FormSchema[] = [
......@@ -33,8 +26,8 @@ export const searchFormSchema: FormSchema[] = [
componentProps: {
placeholder: '策略状态',
options: [
{ label: '敏感', value: '敏感' },
{ label: '非敏感', value: '非敏感' },
{ label: '开', value: '开' },
{ label: '关', value: '关' },
],
},
},
......@@ -76,75 +69,189 @@ export const columns: BasicColumn[] = [
width: 180,
},
];
export const columnsTable1: BasicColumn[] = [
{
title: '名称',
dataIndex: 'name',
edit: true,
editable: true,
},
];
export const columnsTable2: BasicColumn[] = [
{
title: '名称',
dataIndex: 'name',
edit: true,
editable: true,
},
];
export const columnsTable3: BasicColumn[] = [
{
title: '规则名称',
dataIndex: 'name',
width: 120,
},
{
title: '敏感类型',
dataIndex: 'sensitiveType',
width: 180,
},
{
title: '安全分级',
dataIndex: 'level',
width: 180,
},
];
/** 新增编辑表单字段*/
export const formSchema: any[] = [
{
field: 'sensitiveState',
label: '敏感状态',
component: 'Select',
field: 'policyState',
label: '策略状态',
component: 'RadioGroup',
colProps: { span: 3 },
componentProps: {
placeholder: '敏感状态',
placeholder: '策略状态',
defaultValue: '关',
options: [
{ label: '敏感', value: '敏感' },
{ label: '非敏感', value: '非敏感' },
{ label: '开', value: '开' },
{ label: '关', value: '关' },
],
},
rules: [
},
{
required: true,
message: '请选择敏感状态',
field: 'fieldRange',
label: '字段范围',
component: 'BasicTitle',
// colProps: { offset: 1 },
componentProps: {
style: {
fontsize: 16,
fontWeight: 'bold',
marginLeft: '25px',
},
},
],
},
{
field: 'sensitiveType',
label: '敏感类型',
component: 'Select',
colProps: { span: 3 },
field: 'requestParametersTitle',
label: '请求参数',
component: 'Input',
colProps: { lg: 2, md: 2 },
componentProps: {
placeholder: '敏感类型',
options: [
{ label: '钱包类型', value: '钱包类型' },
{ label: 'AccessKey ID', value: 'AccessKey ID' },
{ label: '担保方式', value: '担保方式' },
],
readonly: true,
allowClear: false,
placeholder: ' ',
style: {
cursor: 'default',
border: 'none',
backgroundColor: 'transparent',
},
dynamicRules: ({ values }) => {
return values.flag === '敏感' ? [{ required: true, message: '说明必填' }] : [];
},
},
{
field: 'level',
label: '安全分级',
field: 'requestParametersScannerRange',
label: '扫描状态',
component: 'Select',
colProps: { span: 3 },
colProps: { lg: 4, md: 4 },
componentProps: {
placeholder: '安全分级',
placeholder: '扫描状态',
defaultValue: '全部不扫描',
options: [
{ label: 'G1', value: 'G1' },
{ label: 'G2', value: 'G2' },
{ label: 'G3', value: 'G3' },
{ label: 'G4', value: 'G4' },
{ label: 'G5', value: 'G5' },
{ label: '全部扫描', value: '全部扫描' },
{ label: '全部不扫描', value: '全部不扫描' },
],
},
dynamicRules: ({ values }) => {
return values.flag === '敏感' ? [{ required: true, message: '说明必填' }] : [];
},
{
field: 'requestParameters',
component: 'Slot',
label: ' ',
labelWidth: 20,
slot: 'requestParameters',
},
{
field: 'markTime',
label: '标记时间',
field: 'returnParameterTitle',
label: '返回参数',
component: 'Input',
colProps: { lg: 2, md: 2 },
componentProps: {
readonly: true,
allowClear: false,
placeholder: ' ',
style: {
cursor: 'default',
border: 'none',
backgroundColor: 'transparent',
},
readOnly: true,
},
},
{
field: 'returnParameterScannerRange',
label: '扫描状态',
component: 'Select',
colProps: { lg: 4, md: 4 },
componentProps: {
placeholder: '扫描状态',
defaultValue: '全部扫描',
options: [
{ label: '全部扫描', value: '全部扫描' },
{ label: '全部不扫描', value: '全部不扫描' },
],
},
},
{
field: 'returnParameter',
label: ' ',
labelWidth: 20,
component: 'Slot',
slot: 'returnParameter',
},
{
field: 'sensitiveRulesTitle',
label: '敏感规则',
component: 'BasicTitle',
// colProps: { offset: 1 },
componentProps: {
style: {
fontsize: 16,
fontWeight: 'bold',
marginLeft: '25px',
},
},
},
{
field: 'sensitiveRules',
component: 'Slot',
label: ' ',
labelWidth: 16,
slot: 'sensitiveRules',
},
];
export const rulerFormSchema1: any[] = [
{
field: 'name',
label: '',
component: 'Input',
colProps: { span: 9 },
componentProps: {
placeholder: '输入规则',
},
},
{
field: 'slot',
label: '',
slot: 'slot',
},
];
export const rulerFormSchema2: any[] = [
{
field: 'name',
label: '',
component: 'Input',
colProps: { span: 9 },
componentProps: {
placeholder: '输入规则',
},
},
];
src/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognitionEdit.vue
View file @ e04f025e
<template>
<PageWrapper :title="title" class="content-padding" contentBackground @back="goBack">
<template #headerContent>
<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>
<a-button type="primary" class="save-button" @click="handleSave">保存</a-button>
</div>
<BasicForm @register="registerForm" />
</template>
<div>
<BasicForm @register="registerForm" style="margin-top: 20px">
<template #requestParameters>
<BasicTable @register="registerTable1" title="例外参数">
<template #toolbar>
<a-button type="primary" @click="handleAddTable1">添加</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
{
label: '移动',
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<template #returnParameter>
<BasicTable @register="registerTable2" title="例外参数">
<template #toolbar>
<a-button type="primary" @click="handleAddTable2">添加</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
{
label: '移动',
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<template #sensitiveRules>
<BasicTable @register="registerTable3">
<template #toolbar>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
"
>
<div style="display: flex; flex-grow: 1; align-items: center">
<Select
v-model:value="sensitiveTypeValue"
show-search
placeholder="敏感类型"
style="width: 200px; margin-right: 10px; margin-bottom: 10px"
:default-active-first-option="false"
:filter-option="false"
:not-found-content="null"
:options="sensitiveTypeOptions"
@search="handleSearch"
/>
<Select
v-model:value="levelValue"
show-search
placeholder="安全分级"
style="width: 200px; margin-right: 10px; margin-bottom: 10px"
:default-active-first-option="false"
:filter-option="false"
:not-found-content="null"
:options="levelOptions"
@search="handleSearch"
/>
</div>
<a-button type="primary" :disabled="isUpdate === 'false'" @click="handleNewRules"
>添加敏感规则</a-button
>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
{
label: '移动',
},
]"
/>
</template>
</template>
</BasicTable>
</template>
</BasicForm>
</div>
<AddSensitiveRulersModal @register="registerModal"/>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { ref, onMounted, reactive } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './sensitiveRecognition.data';
import {
columnsTable1,
columnsTable2,
columnsTable3,
formSchema,
} from './sensitiveRecognition.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '@/components/Page';
import { useRoute } from 'vue-router';
import {
tableList,
tableList1,
tableList2,
tableList3,
} from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock';
import { router } from '@/router';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { Select } from 'ant-design-vue';
import AddSensitiveRulersModal from '@/views/dataService/APIDataSecurity/sensitiveRecognition/addSensitiveRulersModal.vue';
import { useModal } from '@/components/Modal';
const route = useRoute();
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const { createMessage, createConfirm } = useMessage();
const [registerModal, { openModal }] = useModal();
const isUpdate = ref(true);
const rowId = ref('');
const formParams = ref('');
const formParams = reactive({ fieldName: '', path: '' });
const title = ref();
let tableData1 = ref(tableList1);
let tableData2 = ref(tableList2);
let tableData3 = ref(tableList3);
// 定义敏感类型选择器
const sensitiveTypeOptions = [
{ label: 'IP地址', value: 'IP地址' },
{ label: '姓名', value: '姓名' },
{ label: '金额（账号）', value: '金额（账号）' },
{ label: '存储卡', value: '存储卡' },
{ label: '信用卡', value: '信用卡' },
];
// 定义安全分级选择器
const levelOptions = [
{ label: 'G1', value: 'G1' },
{ label: 'G2', value: 'G2' },
{ label: 'G3', value: 'G3' },
{ label: 'G4', value: 'G4' },
{ label: 'G5', value: 'G5' },
];
const sensitiveTypeValue = ref();
const levelValue = ref();
const [registerTable1, { reload1, setColumns1 }] = useTable({
api: async () => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData1.value.length,
code: '',
message: '',
data: tableData1.value,
};
return { ...response };
},
rowKey: 'id',
customRow: customRow,
columns: columnsTable1,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 300 },
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
const [registerTable2, { reload2, setColumns2 }] = useTable({
api: async () => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData2.value.length,
code: '',
message: '',
data: tableData2.value,
};
return { ...response };
},
rowKey: 'id',
customRow: customRow,
columns: columnsTable2,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 300 },
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
const [registerTable3, { reload }] = useTable({
api: async () => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData3.value.length,
code: '',
message: '',
data: tableData3.value,
};
return { ...response };
},
rowKey: 'id',
columns: columnsTable3,
// formConfig: {
// // labelWidth: 10,
// showActionButtonGroup: false,
// schemas: sensitiveRulersSearchFormSchema,
// autoSubmitOnEnter: true,
// },
// // customRow: customRow,
// useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 300 },
handleSearchInfoFn(info) {
// console.log('handleSearchInfoFn', info);
// tableData3.value = tableList.filter(
// (item) =>
// (info.name === undefined || item.name.includes(info.name))
// );
// console.log('tableData', tableData.value);
return info;
},
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
const [registerForm, { setFieldsValue, updateSchema, resetFields }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
......@@ -36,35 +309,138 @@
span: 23,
},
});
onMounted(() => {
// route.query.id
// resetFields();
// isUpdate.value = data.isUpdate;
// if (data.isUpdate === false) {
// title.value = '查看分类分级';
// updateSchema([
// { field: 'sensitiveState', required: false, componentProps: { disabled: true } },
// { field: 'sensitiveType', required: false, componentProps: { disabled: true } },
// { field: 'level', required: false, componentProps: { disabled: true } },
// ]);
// } else {
// title.value = '编辑分类分级';
// updateSchema([
// { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
// { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
// { field: 'level', required: true, componentProps: { disabled: false } },
// ]);
// }
// formParams.value = data.record;
// setFieldsValue({
// ...data.record,
// });
const data = tableList.filter((item) => item.businessId === route.query.id);
// formParams.value = data[0];
Object.assign(formParams, data[0]); // 使用 Object.assign 赋值
resetFields();
isUpdate.value = route.query.isUpdate;
if (isUpdate.value === 'false') {
title.value = '查看分类分级';
updateSchema([
{ field: 'policyState', required: false, componentProps: { disabled: true } },
{
field: 'returnParameterScannerRange',
required: false,
componentProps: { disabled: true },
},
{
field: 'requestParametersScannerRange',
required: false,
componentProps: { disabled: true },
},
]);
} else {
title.value = '编辑分类分级';
updateSchema([
{ field: 'policyState', required: true, componentProps: { disabled: false } },
{
field: 'returnParameterScannerRange',
required: true,
componentProps: { disabled: false },
},
{
field: 'requestParametersScannerRange',
required: true,
componentProps: { disabled: false },
},
]);
}
setFieldsValue({
...data[0],
});
});
function handleDelete(record) {
// console.log('record', record);
createMessage.success('删除成功!');
}
function handleAddTable1() {
const data = {
name: '',
};
tableData1.value.push(data);
reload();
}
function handleAddTable2() {
const data = {
name: '',
};
tableData2.value.push(data);
reload();
}
let source = 0; // 源目标数据序号
let target = 0; // 目标数据序号
function customRow(record, index) {
// console.log(record, index); // 这里输出是表格全部的数据
return {
props: {
// draggable: 'true'
},
style: {
cursor: 'pointer',
},
// 鼠标移入
onMouseenter: (event) => {
// 兼容IE
let ev = event || window.event;
ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
},
// 开始拖拽
onDragstart: (event) => {
// 兼容IE
let ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到源目标数据序号
source = index;
// console.log(record, index, 'source');
},
// 拖动元素经过的元素
onDragover: (event) => {
// 兼容 IE
let ev = event || window.event;
// 阻止默认行为
ev.preventDefault();
},
// 鼠标松开
onDrop: (event) => {
// 兼容IE
let ev = event || window.event;
// 阻止冒泡
ev.stopPropagation();
// 得到目标数据序号
target = index;
// 这里就是让数据位置互换，让视图更新
[tableData.value[source], tableData.value[target]] = [
tableData.value[target],
tableData.value[source],
];
// console.log(record, index, 'target', source, target);
},
};
}
function goBack() {
router.back();
}
function handleSave() {
createMessage.success('保存成功'), router.back();
}
function handleNewRules() {
openModal(true, {
// isUpdate: false,
});
}
</script>
<style lang="scss" scoped>
.modal_top {
padding: 0 0 20px 20px;
padding: 20px 0 20px 20px;
display: flex;
align-items: center;
.title {
......@@ -72,4 +448,10 @@
font-weight: 500;
}
}
.save-button {
position: absolute; /* 绝对定位 */
top: 15px; /* 顶部对齐 */
right: 10px; /* 右侧对齐 */
margin: 10px; /* 可选：增加一些边缘间距 */
}
</style>
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