Skip to content

B
bigDataSystem
Commit 138ba3bb authored by 冷玲鹏's avatar 冷玲鹏
Browse files
Options

API数据安全-分类分级-列表bug

parent 33ab308c
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 154 deletions
src/views/dataService/APIDataSecurity/classificationAndGrading/classificationAndGrading.data.ts
View file @ 138ba3bb
......@@ -31,7 +31,7 @@ export const searchFormSchema: FormSchema[] = [
field: 'APIModel',
label: ' ',
component: 'Select',
colProps: { span: 2 },
colProps: { span:3 },
componentProps: {
placeholder: 'API模式',
options: [
......@@ -45,7 +45,7 @@ export const searchFormSchema: FormSchema[] = [
field: 'sensitiveState',
label: ' ',
component: 'Select',
colProps: { span: 2 },
colProps: { span: 3},
componentProps: {
placeholder: '敏感状态',
options: [
......@@ -58,7 +58,7 @@ export const searchFormSchema: FormSchema[] = [
field: 'level',
label: ' ',
component: 'Select',
colProps: { span: 2 },
colProps: { span: 3 },
componentProps: {
placeholder: '安全分级',
options: [
......
src/views/dataService/APIDataSecurity/classificationAndGrading/index.vue
View file @ 138ba3bb
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<template #title>
<div style="display: flex;align-items: center">
<Icon icon="ant-design:switcher-outlined" :size="24" style="color:#0960BD;"/>
<span style="margin-left: 10px">分类分级</span>
</div>
</template>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleImport">批量导入</a-button>
......@@ -23,168 +29,177 @@
</template>
</template>
</BasicTable>
<ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
<ClassificationAndGradingModal @register="registerModal" @success="handleSuccess"/>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from '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 {ref, reactive, onMounted} from '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 Icon from "@/components/Icon/Icon.vue";
import {columns, searchFormSchema} from './classificationAndGrading.data';
import {tableList} from './mock';
import { columns, searchFormSchema } from './classificationAndGrading.data';
import { tableList } from './mock';
import {useRoute, onBeforeRouteLeave} from 'vue-router';
import {router} from '@/router';
import ClassificationAndGradingModal
from '@/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue';
import {metadataData} from '@/views/metadata/metadataData';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { router } from '@/router';
import ClassificationAndGradingModal from '@/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue';
import { metadataData } from '@/views/metadata/metadataData';
const { createMessage } = useMessage();
const route = useRoute();
let tableData = ref(tableList);
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: '分类分级结果',
api: async (params) => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: tableData.value,
};
const {createMessage} = useMessage();
const route = useRoute();
let tableData = ref(tableList);
const [registerModal, {openModal}] = useModal();
const [registerImport, {openModal: openImportModal}] = useModal();
const searchInfo = reactive<Recordable>({});
const [registerTable, {reload, updateTableDataRecord, getSearchInfo, getForm}] = useTable({
title: '分类分级结果',
api: async (params) => {
// console.log(params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: tableData.value,
};
return { ...response };
},
rowKey: 'id',
columns,
formConfig: {
// labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
handleSearchInfoFn(info) {
// console.log('handleSearchInfoFn', info);
tableData.value = tableList.filter(
(item) =>
(info.fieldCode === undefined || item.fieldCode.includes(info.fieldCode)) &&
(info.APIName === undefined || item.APIName.includes(info.APIName)) &&
(info.APIModel === undefined || item.APIModel === info.APIModel) &&
(info.sensitiveState === undefined || item.sensitiveState === info.sensitiveState) &&
(info.sensitiveType === undefined || item.sensitiveType === info.sensitiveType) &&
(info.level === undefined || item.level === info.level),
);
// console.log('tableData', tableData.value);
return info;
},
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
return {...response};
},
rowKey: 'id',
columns,
formConfig: {
// labelWidth: 10,
actionColOptions: {
span: 3,
},
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
customRow: customRow,
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
handleSearchInfoFn(info) {
// console.log('handleSearchInfoFn', info);
tableData.value = tableList.filter(
(item) =>
(info.fieldCode === undefined || item.fieldCode.includes(info.fieldCode)) &&
(info.APIName === undefined || item.APIName.includes(info.APIName)) &&
(info.APIModel === undefined || item.APIModel === info.APIModel) &&
(info.sensitiveState === undefined || item.sensitiveState === info.sensitiveState) &&
(info.sensitiveType === undefined || item.sensitiveType === info.sensitiveType) &&
(info.level === undefined || item.level === info.level),
);
// console.log('tableData', tableData.value);
return info;
},
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
/** 新增按钮*/
function handleCreate() {
openModal(true, {
isUpdate: false,
});
/** 新增按钮*/
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
/** 编辑按钮*/
function handleEdit(record: Recordable, isUpdate) {
console.log(isUpdate);
openModal(true, {
record,
isUpdate: isUpdate,
});
}
}
/** 编辑按钮*/
function handleEdit(record: Recordable, isUpdate) {
console.log(isUpdate);
openModal(true, {
record,
isUpdate: isUpdate,
});
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
console.log(record);
createMessage.success('删除成功!');
reload();
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
console.log(record);
createMessage.success('删除成功!');
/** 新增/编辑成功*/
function handleSuccess({isUpdate, values}) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
let source = 0; // 源目标数据序号
let target = 0; // 目标数据序号
// Table拖拽
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;
// 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
console.log(tableData);
// [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
const temp = ref();
temp.value = tableData.value[source];
tableData.value[source] = tableData.value[target];
tableData.value[target] = temp.value;
console.log(record, index, 'target', source, target);
},
};
}
let source = 0; // 源目标数据序号
let target = 0; // 目标数据序号
// Table拖拽
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;
// 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
console.log(tableData);
// [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
const temp = ref();
temp.value = tableData.value[source];
tableData.value[source] = tableData.value[target];
tableData.value[target] = temp.value;
console.log(record, index, 'target', source, target);
},
};
}
onMounted(() => {});
onMounted(() => {
});
</script>
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