Commit d8983442 authored by 张伯涛's avatar 张伯涛

代码恢复

parent 5e12d40d
<template> <template>
<div> <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
保护规则 <BasicTable @register="registerTable" :searchInfo="searchInfo">
</div> <template #toolbar>
</template> <a-button type="primary" @click="handleCreate">新增</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),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
<sensitiveRulesModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup> <script lang="ts" setup>
</script> import { 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 sensitiveRulesModal from './protectionRulesModal.vue';
import { columns, searchFormSchema } from './protectionRules.data';
import {tableList} from "./mock";
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { router } from '@/router';
defineOptions({ name: 'sensitiveRules' });
const { createMessage } = useMessage();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerResetPassword, { openModal: openResetPasswordModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: '保护规则',
api: async (params) => {
console.log('tableList',tableList)
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableList.length,
code:'',
message:'',
data: tableList,
};
return { ...response};
},
rowKey: 'id',
columns,
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
<style scoped> },
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
/** 新增按钮*/
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
</style> /** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
console.log(record);
createMessage.success('删除成功!');
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
onMounted(() => {
});
</script>
export const tableList: any[] = [
{
"object" : "全部",
"sensitiveType" : "员工号(对外员工)",
"safetyLevel" : "G5",
"priority" : "中",
"protectiveAction" : "放行",
},
{
"object" : "全部",
"sensitiveType" : "钱包类型",
"safetyLevel" : "G1",
"priority" : "低",
"protectiveAction" : "放行",
},
{
"object" : "全部",
"sensitiveType" : "办公电话(对外员工)",
"safetyLevel" : "G4",
"priority" : "低",
"protectiveAction" : "脱敏",
},
{
"object" : "全部",
"sensitiveType" : "员工号(对外员工)",
"safetyLevel" : "G5",
"priority" : "中",
"protectiveAction" : "放行",
},
{
"object" : "全部",
"sensitiveType" : "钱包类型",
"safetyLevel" : "G1",
"priority" : "低",
"protectiveAction" : "放行",
},
{
"object" : "全部",
"sensitiveType" : "办公电话(对外员工)",
"safetyLevel" : "G4",
"priority" : "低",
"protectiveAction" : "脱敏",
},
{
"object" : "全部",
"sensitiveType" : "员工号(对外员工)",
"safetyLevel" : "G5",
"priority" : "中",
"protectiveAction" : "放行",
},
{
"object" : "全部",
"sensitiveType" : "钱包类型",
"safetyLevel" : "G1",
"priority" : "低",
"protectiveAction" : "放行",
},
{
"object" : "全部",
"sensitiveType" : "办公电话(对外员工)",
"safetyLevel" : "G4",
"priority" : "低",
"protectiveAction" : "脱敏",
},
]
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[] = [
{
field: 'name',
label: '',
component: 'Input',
colProps: { span: 4 },
componentProps: {
placeholder: '搜索对象',
},
},
{
field: 'flag',
label: ' ',
component: 'Select',
colProps: { span: 4 },
componentProps: {
placeholder: '对象属性',
options: [
{ label: '系统管理员', value: '系统管理员' },
{ label: '一般人员', value: '一般人员' },
],
},
},
{
field: 'level',
label: ' ',
component: 'Select',
colProps: { span: 4 },
componentProps: {
placeholder: '安全分级',
options: [
{ label: 'G1', value: 'G1' },
{ label: 'G2', value: 'G2' },
{ label: 'G3', value: 'G3' },
{ label: 'G4', value: 'G4' },
],
},
},
{
field: 'type',
label: ' ',
component: 'Select',
colProps: { span: 4 },
componentProps: {
placeholder: '敏感类型',
options: [
{ label: '血缘关系', value: '血缘关系' },
{ label: '钱包类型', value: '钱包类型' },
{ label: '员工号(对外员工)', value: '员工号(对外员工)' },
],
},
},
{
field: 'protectiveAction',
label: ' ',
component: 'Select',
colProps: { span: 4 },
componentProps: {
placeholder: '保护动作',
options: [
{ label: '放行', value: '放行' },
{ label: '脱敏', value: '脱敏' },
{ label: '拒绝', value: '拒绝' },
],
},
},
];
/** 列表展示字段*/
export const columns: BasicColumn[] = [
{
title: '对象',
dataIndex: 'object',
width: 120,
},
{
title: '敏感类型',
dataIndex: 'sensitiveType',
width: 120,
},
{
title: '安全分级',
dataIndex: 'safetyLevel',
width: 120,
},
{
title: '优先级',
dataIndex: 'priority',
width: 140,
},
{
title: '保护动作',
dataIndex: 'protectiveAction',
width: 140,
},
];
/** 新增编辑表单字段*/
export const formSchema: any[] = [
{
field: 'name',
label: '名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入名称',
},
],
},
{
field: 'functionName',
label: '函数名',
component: 'Input',
rules: [
{
required: true,
message: '请输入函数名',
},
],
},
{
field: 'algorithmDes',
label: '算法描述',
component: 'Input',
rules: [
{
required: true,
message: '请输入算法描述',
},
],
},
{
field: 'params',
label: '参数',
component: 'Select',
componentProps: {
options: [
{ label: 'STRING', value: 'STRING' },
{ label: 'INT', value: 'INT' },
],
},
rules: [
{
required: true,
message: '请选择敏感类型',
},
],
},
{
field: 'describe',
component: 'InputTextArea',
label: '参数描述',
componentProps: {
placeholder: '请输入参数描述',
rows: 1,
},
},
{
field: 'achieveMethod',
component: 'Checkbox',
label: '实现方式',
colProps: {
span: 8,
},
renderComponentContent: 'API',
},
]
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<!-- <BasicForm @register="registerForm" />-->
<Tabs default-active-key="1">
<Tabs.TabPane key="1" tab="用户">
aaa
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="角色">
bbb
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="机构">
bbb
</Tabs.TabPane>
</Tabs>
</BasicModal>
</template>
<script lang="ts" setup>
import { Card, Col, Row, Space, message,Tabs,Badge } from 'ant-design-vue';
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './protectionRules.data';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = 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();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建保护规则' : '编辑保护规则'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</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),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
<sensitiveRulesModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { 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 sensitiveRulesModal from './nameStandardModal.vue';
import { columns, searchFormSchema } from './nameStandard.data';
import {tableList} from "@/views/nameStandard/mock";
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { router } from '@/router';
defineOptions({ name: 'sensitiveRules' });
const { createMessage } = useMessage();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerResetPassword, { openModal: openResetPasswordModal }] = 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: tableList.length,
code:'',
message:'',
data: tableList,
};
return { ...response};
},
rowKey: 'id',
columns,
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
/** 新增按钮*/
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
console.log(record);
createMessage.success('删除成功!');
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
onMounted(() => {
});
</script>
export const tableList: any[] = [
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
{
"name" : "aqlbook_founction_buidin_rule",
"des" : "自定义函数内置",
"module" : "自定义函数",
},
]
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[] = [
{
field: 'name',
label: '',
component: 'Input',
colProps: { span: 4 },
componentProps: {
placeholder: '输入关键字搜索',
},
},
{
field: 'flag',
label: ' ',
component: 'Select',
colProps: { span: 4 },
componentProps: {
placeholder: '模块筛选',
options: [
{ label: 'SQL文件', value: 'SQL文件' },
{ label: '数据加载', value: '数据加载' },
{ label: '数据同步', value: '数据同步' },
{ label: '自定义函数', value: '自定义函数' },
],
},
},
];
/** 列表展示字段*/
export const columns: BasicColumn[] = [
{
title: '规范名称',
dataIndex: 'name',
width: 120,
},
{
title: '描述',
dataIndex: 'des',
width: 120,
},
{
title: '所属模块',
dataIndex: 'module',
width: 120,
},
];
/** 新增编辑表单字段*/
export const formSchema: any[] = [
{
field: 'name',
label: '规范名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入规范名称',
},
],
},
{
field: 'regular',
component: 'InputTextArea',
label: '正则表达式',
componentProps: {
placeholder: '请输入正则表达式',
rows: 4,
},
rules: [
{
required: true,
message: '请输入正则表达式',
},
],
},
{
field: 'des',
component: 'InputTextArea',
label: '描述',
componentProps: {
placeholder: '请输入描述',
rows: 4,
},
},
{
field: 'module',
label: '所属模块',
component: 'Select',
componentProps: {
mode: 'multiple',
options: [
{ label: 'SQL文件', value: 'SQL文件' },
{ label: '数据加载', value: '数据加载' },
{ label: '数据同步', value: '数据同步' },
{ label: '自定义函数', value: '自定义函数' },
],
},
},
]
<template>
<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 { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './nameStandard.data';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = 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();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建脱敏算法' : '编辑脱敏算法'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</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