Skip to content

N
nse-ui
Commit 1303b3e5 by ningjihai
Options

脱敏日志

parent 14c7602a
正在显示 包含 337 行增加 和 266 行删除
src/views/logSet/desensitizationLog/QueryForm.vue
<script setup lang="ts" name="QueryForm"> <script setup lang="ts" name="QueryForm">
import { computed,ref,watch } from 'vue' import { computed,ref,watch,onMounted} from 'vue'
import type { FormInstance } from 'element-plus' import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue' import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
import { import {
Plus Download
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { color } from 'echarts' import { color } from 'echarts'
// import { useDict } from '@/utils/dict' import timeRangeOptions from '@/constants/timeRangeOptions.js'
// import { listDept } from '@/api/system/dept'// 部门 import { queryMenuTreeAndUserlist } from '@/api/logSet/operationLog.js'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
// const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status') // const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status')
const emit = defineEmits(['update:modelValue', 'query', 'reset','handleAdd']) const emit = defineEmits(['update:modelValue', 'query', 'reset','handleAdd'])
const invoice_status_filter = ref([]) const invoice_status_filter = ref([])
...@@ -19,6 +18,17 @@ const props = defineProps<{ ...@@ -19,6 +18,17 @@ const props = defineProps<{
modelValue: any modelValue: any
}>() }>()
const userOptions:any = ref([
// { id: 'admin', realname: 'admin' },
// { id: 'system', realname: 'system' },
// { id: 'test', realname: 'test' }
])
const projectLevelOptions:any = ref([
// { id: '1', project: '一级' },
// { id: '2', project: '二级' },
// { id: '3', project: '三级' }
])
const queryForm = computed({ const queryForm = computed({
...@@ -38,16 +48,49 @@ function onSearch() { ...@@ -38,16 +48,49 @@ function onSearch() {
// 重置 // 重置
function onReset(formRef: FormInstance) { function onReset(formRef: FormInstance) {
queryForm.value.useridentifier = '' queryForm.value.user = undefined
queryForm.value.username = '' queryForm.value.range = '0'
queryForm.value.note = '' queryForm.value.projectId = undefined
emit('reset', formRef) emit('reset', formRef)
} }
function handleAdd() { function handleAdd() {
emit('handleAdd') emit('handleAdd')
} }
onMounted(async () => {
try {
const response = await queryMenuTreeAndUserlist({ type: 'global' })
console.log('queryMenuTreeAndUserlist', response)
userOptions.value = response.data.userlist.map(user => ({
id: user.id,
user: user.realname
}))
} catch (error) {
console.error('Failed to fetch user and module data:', error)
}
try {
const params = {
loginUser: {
tsysUser: {
id: appStore.userInfo.user.id,
username: appStore.userInfo.user.username
}
},
proName: '',
note: ''
}
const projectResponse = await allProject(params)
projectLevelOptions.value = projectResponse.data.map(project => ({
id: project.id,
project: project.project
}))
} catch (error) {
console.error('Failed to fetch project level data:', error)
}
})
</script> </script>
<template> <template>
...@@ -56,8 +99,8 @@ function handleAdd() { ...@@ -56,8 +99,8 @@ function handleAdd() {
:model="queryForm" :model="queryForm"
:extraButtons="[ :extraButtons="[
{ {
text: '新增', text: '导出',
icon: Plus, icon: Download,
color: 'rgba(0, 189, 207, 1)', color: 'rgba(0, 189, 207, 1)',
type: 'success', type: 'success',
class: 'btn-fff', class: 'btn-fff',
...@@ -66,14 +109,49 @@ function handleAdd() { ...@@ -66,14 +109,49 @@ function handleAdd() {
]" ]"
@search="onSearch" @search="onSearch"
@reset="onReset"> @reset="onReset">
<el-form-item label="唯一标识:"> <el-form-item label="用户" prop="user">
<el-input v-model="queryForm.useridentifier" clearable placeholder="请输入唯一标识"></el-input> <el-select
v-model="queryForm.user"
placeholder="请选择"
clearable
style="width: 200px"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.user"
:value="item.id"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="用户名:"> <el-form-item label="时间" prop="range">
<el-input v-model="queryForm.username" clearable placeholder="请输入用户名"></el-input> <el-select
v-model="queryForm.range"
placeholder="请选择时间"
style="width: 200px"
>
<el-option
v-for="item in timeRangeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="备注:"> <el-form-item label="项目级" prop="projectId">
<el-input v-model="queryForm.note" clearable placeholder="请输入备注"></el-input> <el-select
v-model="queryForm.projectId"
placeholder="请选择项目级"
clearable
style="width: 200px"
>
<el-option
v-for="item in projectLevelOptions"
:key="item.id"
:label="item.project"
:value="item.id"
/>
</el-select>
</el-form-item> </el-form-item>
</page-wrapper-search> </page-wrapper-search>
......
src/views/logSet/desensitizationLog/index.vue
<template> <script setup lang="ts" name="projectManageIndex">
<div class="app-container"> import { ref } from 'vue'
<div class="page-title"> import list from './list.vue'
<el-icon class="title-icon"><Coin /></el-icon>
<span>脱敏日志</span>
</div>
<div class="search-box">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="用户" prop="user">
<el-select
v-model="queryParams.user"
placeholder="请选择"
clearable
style="width: 200px"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.user"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="时间" prop="range">
<el-select
v-model="queryParams.range"
placeholder="请选择时间"
style="width: 200px"
>
<el-option
v-for="item in timeRangeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="项目级" prop="projectId">
<el-select
v-model="queryParams.projectId"
placeholder="请选择项目级"
clearable
style="width: 200px"
>
<el-option
v-for="item in projectLevelOptions"
:key="item.id"
:label="item.project"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
<!-- <el-button type="primary" @click="handleCheck">数据完整性校验</el-button> -->
</el-form-item>
</el-form>
</div>
<el-table
v-loading="loading"
:data="logList"
border
style="width: 100%"
>
<el-table-column prop="createuser" label="用户" width="200" align="left" />
<el-table-column prop="createtime" label="时间" align="left" width="180" />
<el-table-column prop="code" label="模块编号" align="left" width="120" />
<el-table-column prop="operModule" label="操作模块" align="left" width="150" />
<el-table-column prop="operationMassage" label="操作信息" align="left" show-overflow-tooltip />
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.rows"
@pagination="getList"
/>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Coin } from '@element-plus/icons-vue'
import { queryMenuTreeAndUserlist } from '@/api/logSet/operationLog.js'
import { queryDesensitizationStrategyLog, getDesensitizationLogExcel } from '@/api/logSet/desensitizationLog.js'
import { allProject } from '@/api/logSet/encryptedLog.js'
import useAppStore from '@/store/modules/app'
import timeRangeOptions from '@/constants/timeRangeOptions.js'
const appStore = useAppStore()
console.log('当前用户信息',appStore.userInfo)
const loading = ref(true)
const total = ref(0)
const logList = ref([])
const queryParams = reactive({
page: 1,
rows: 10,
user: undefined,
range: '0',
module: undefined,
projectId: undefined
})
const userOptions = ref([
// { id: 'admin', realname: 'admin' },
// { id: 'system', realname: 'system' },
// { id: 'test', realname: 'test' }
])
const projectLevelOptions = ref([
// { id: '1', project: '一级' },
// { id: '2', project: '二级' },
// { id: '3', project: '三级' }
])
const getList = async () => { const widget = {
loading.value = true list: list
try {
const response = await queryDesensitizationStrategyLog(queryParams)
logList.value = response.data.list || []
total.value = response.data.total || 0
} catch (error) {
console.error('Failed to fetch desensitization log list:', error)
} finally {
loading.value = false
}
} }
const handleQuery = () => { const page = ref('list')
queryParams.page = 1 const params = ref({})
getList()
}
const handleExport = async () => {
ElMessageBox.confirm('是否确认导出日志数据？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const response = await getDesensitizationLogExcel(queryParams)
const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = '脱敏日志.xls'
link.click()
URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
console.error('Failed to export operation logs:', error)
ElMessage.error('导出出错')
}
})
.catch(() => {
ElMessage.info('导出已取消')
})
}
const handleCheck = () => { function onChangePage(val: string, param?: any) {
window.$modal.msgSuccess('数据完整性校验完成') page.value = val
params.value = param ?? {}
} }
onMounted(async () => {
try {
const response = await queryMenuTreeAndUserlist({ type: 'global' })
console.log('queryMenuTreeAndUserlist', response)
userOptions.value = response.data.userlist.map(user => ({
id: user.id,
user: user.realname
}))
} catch (error) {
console.error('Failed to fetch user and module data:', error)
}
try {
const params = {
loginUser: {
tsysUser: {
id: appStore.userInfo.user.id,
username: appStore.userInfo.user.username
}
},
proName: '',
note: ''
}
const projectResponse = await allProject(params)
projectLevelOptions.value = projectResponse.data.map(project => ({
id: project.id,
project: project.project
}))
} catch (error) {
console.error('Failed to fetch project level data:', error)
}
getList()
})
</script> </script>
<style lang="scss" scoped> <template>
.app-container { <component :is="widget[page]" v-bind="params" @page="onChangePage" />
padding: 20px; </template>
.page-title {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
font-weight: bold;
.title-icon {
margin-right: 8px;
font-size: 20px;
color: #409EFF;
}
}
.search-box {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
border-radius: 4px;
text-align: left;
:deep(.el-form) {
justify-content: flex-start;
}
:deep(.el-form--inline .el-form-item) {
margin-right: 20px;
}
}
.el-table {
margin-top: 20px;
}
:deep(.el-table) {
text-align: left;
}
:deep(.el-cascader) {
width: 100%;
}
}
</style>
src/views/logSet/desensitizationLog/list.vue 0 → 100644
<template>
<div class="app-container scroller">
<PageTitle>
<template #title>
<div style="display: flex;align-items: center;">
<el-icon class="title-icon"><Coin /></el-icon>
<span style="margin-left: 8px;">脱敏日志</span>
</div>
</template>
</PageTitle>
<div class="app-container__body">
<query-form
ref="QueryFormRef"
v-model="queryParams"
@query="handleQuery"
@reset="onReset"
@handleAdd="handleExport"
/>
<div style="flex: 1;">
<el-table
v-loading="loading"
:data="logList"
stripe
height="100%"
style="width: 100%"
>
<el-table-column prop="createuser" label="用户" width="200" align="left" />
<el-table-column prop="createtime" label="时间" align="left" width="180" />
<el-table-column prop="code" label="模块编号" align="left" width="120" />
<el-table-column prop="operModule" label="操作模块" align="left" width="150" />
<el-table-column prop="operationMassage" label="操作信息" align="left" show-overflow-tooltip />
</el-table>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.rows"
@pagination="getList"
/>
</div>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Coin } from '@element-plus/icons-vue'
import { queryMenuTreeAndUserlist } from '@/api/logSet/operationLog.js'
import { queryDesensitizationStrategyLog, getDesensitizationLogExcel } from '@/api/logSet/desensitizationLog.js'
import { allProject } from '@/api/logSet/encryptedLog.js'
import useAppStore from '@/store/modules/app'
import timeRangeOptions from '@/constants/timeRangeOptions.js'
import QueryForm from '../operationLog/QueryForm.vue'
const appStore = useAppStore()
console.log('当前用户信息',appStore.userInfo)
const loading = ref(true)
const total = ref(0)
const logList = ref([])
const queryParams = reactive({
page: 1,
rows: 10,
user: undefined,
range: '0',
module: undefined,
projectId: undefined
})
const userOptions = ref([
// { id: 'admin', realname: 'admin' },
// { id: 'system', realname: 'system' },
// { id: 'test', realname: 'test' }
])
const projectLevelOptions = ref([
// { id: '1', project: '一级' },
// { id: '2', project: '二级' },
// { id: '3', project: '三级' }
])
const getList = async () => {
loading.value = true
try {
const response = await queryDesensitizationStrategyLog(queryParams)
logList.value = response.data.list || []
total.value = response.data.total || 0
} catch (error) {
console.error('Failed to fetch desensitization log list:', error)
} finally {
loading.value = false
}
}
const handleQuery = () => {
queryParams.page = 1
getList()
}
const onReset = (formQuery) =>{
console.log('onReset')
formQuery.resetFields()
handleQuery()
}
const handleExport = async () => {
ElMessageBox.confirm('是否确认导出日志数据？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const response = await getDesensitizationLogExcel(queryParams)
const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = '脱敏日志.xls'
link.click()
URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
console.error('Failed to export operation logs:', error)
ElMessage.error('导出出错')
}
})
.catch(() => {
ElMessage.info('导出已取消')
})
}
const handleCheck = () => {
window.$modal.msgSuccess('数据完整性校验完成')
}
onMounted(async () => {
try {
const response = await queryMenuTreeAndUserlist({ type: 'global' })
console.log('queryMenuTreeAndUserlist', response)
userOptions.value = response.data.userlist.map(user => ({
id: user.id,
user: user.realname
}))
} catch (error) {
console.error('Failed to fetch user and module data:', error)
}
try {
const params = {
loginUser: {
tsysUser: {
id: appStore.userInfo.user.id,
username: appStore.userInfo.user.username
}
},
proName: '',
note: ''
}
const projectResponse = await allProject(params)
projectLevelOptions.value = projectResponse.data.map(project => ({
id: project.id,
project: project.project
}))
} catch (error) {
console.error('Failed to fetch project level data:', error)
}
getList()
})
</script>
<style lang="scss" scoped>
// .app-container {
// padding: 20px;
// .page-title {
// display: flex;
// align-items: center;
// margin-bottom: 20px;
// font-size: 16px;
// font-weight: bold;
// .title-icon {
// margin-right: 8px;
// font-size: 20px;
// color: #409EFF;
// }
// }
// .search-box {
// margin-bottom: 20px;
// background-color: #fff;
// padding: 20px;
// border-radius: 4px;
// text-align: left;
// :deep(.el-form) {
// justify-content: flex-start;
// }
// :deep(.el-form--inline .el-form-item) {
// margin-right: 20px;
// }
// }
// .el-table {
// margin-top: 20px;
// }
// :deep(.el-table) {
// text-align: left;
// }
// :deep(.el-cascader) {
// width: 100%;
// }
// }
</style>
src/views/logSet/encryptedLog/QueryForm.vue
<script setup lang="ts" name="QueryForm"> <script setup lang="ts" name="QueryForm">
import { computed,ref,watch } from 'vue' import { computed,ref,watch,onMounted } from 'vue'
import type { FormInstance } from 'element-plus' import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue' import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
import { import {
Plus Download
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { color } from 'echarts' import { color } from 'echarts'
...@@ -103,8 +103,8 @@ onMounted(async () => { ...@@ -103,8 +103,8 @@ onMounted(async () => {
:model="queryForm" :model="queryForm"
:extraButtons="[ :extraButtons="[
{ {
text: '新增', text: '导出',
icon: Plus, icon: Download,
color: 'rgba(0, 189, 207, 1)', color: 'rgba(0, 189, 207, 1)',
type: 'success', type: 'success',
class: 'btn-fff', class: 'btn-fff',
......
src/views/logSet/encryptedLog/list.vue
...@@ -103,7 +103,11 @@ const getList = async () => { ...@@ -103,7 +103,11 @@ const getList = async () => {
loading.value = false loading.value = false
} }
} }
const onReset = (formQuery) =>{
console.log('onReset')
formQuery.resetFields()
handleQuery()
}
const handleQuery = () => { const handleQuery = () => {
queryParams.value.page = 1 queryParams.value.page = 1
getList() getList()
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论