feat(frontend): 添加用户服务和数据导出功能
- 添加 user.ts 用户管理服务 - 添加 useDataExport.ts 数据导出composable - 增强审计日志页面筛选功能
This commit is contained in:
Your Name
166
frontend/admin/src/composables/useDataExport.ts
Normal file
166
frontend/admin/src/composables/useDataExport.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* 数据导出 composable
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
|
||||
export interface ExportColumn {
|
||||
key: string
|
||||
label: string
|
||||
width?: number
|
||||
}
|
||||
|
||||
export interface ExportOptions {
|
||||
filename: string
|
||||
columns: ExportColumn[]
|
||||
data: Record<string, any>[]
|
||||
}
|
||||
|
||||
export function useDataExport() {
|
||||
const exporting = ref(false)
|
||||
|
||||
/**
|
||||
* 导出为CSV
|
||||
*/
|
||||
const exportToCsv = async (options: ExportOptions) => {
|
||||
exporting.value = true
|
||||
try {
|
||||
const { filename, columns, data } = options
|
||||
|
||||
// 构建CSV内容
|
||||
const header = columns.map(col => `"${col.label}"`).join(',')
|
||||
const rows = data.map(item =>
|
||||
columns.map(col => {
|
||||
const value = item[col.key]
|
||||
if (value === null || value === undefined) return ''
|
||||
return `"${String(value).replace(/"/g, '""')}"`
|
||||
}).join(',')
|
||||
)
|
||||
|
||||
const csv = [header, ...rows].join('\n')
|
||||
|
||||
// 添加BOM以支持中文
|
||||
const BOM = '\uFEFF'
|
||||
const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' })
|
||||
|
||||
// 下载
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${filename}_${formatDate(new Date())}.csv`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出为JSON
|
||||
*/
|
||||
const exportToJson = async (options: ExportOptions) => {
|
||||
exporting.value = true
|
||||
try {
|
||||
const { filename, data } = options
|
||||
|
||||
const json = JSON.stringify(data, null, 2)
|
||||
const blob = new Blob([json], { type: 'application/json' })
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${filename}_${formatDate(new Date())}.json`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出为Excel (使用HTML table方式)
|
||||
*/
|
||||
const exportToExcel = async (options: ExportOptions) => {
|
||||
exporting.value = true
|
||||
try {
|
||||
const { filename, columns, data } = options
|
||||
|
||||
const tableHtml = `
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
${columns.map(col => `<th>${col.label}</th>`).join('')}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${data.map(item =>
|
||||
`<tr>${columns.map(col => `<td>${item[col.key] ?? ''}</td>`).join('')}</tr>`
|
||||
).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`
|
||||
|
||||
const blob = new Blob([tableHtml], { type: 'application/vnd.ms-excel' })
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${filename}_${formatDate(new Date())}.xls`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印数据
|
||||
*/
|
||||
const printData = (options: ExportOptions) => {
|
||||
const { columns, data } = options
|
||||
|
||||
const tableHtml = `
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table { border-collapse: collapse; width: 100%; }
|
||||
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
||||
th { background-color: #f2f2f2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
${columns.map(col => `<th>${col.label}</th>`).join('')}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${data.map(item =>
|
||||
`<tr>${columns.map(col => `<td>${item[col.key] ?? ''}</td>`).join('')}</tr>`
|
||||
).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
const printWindow = window.open('', '_blank')
|
||||
if (printWindow) {
|
||||
printWindow.document.write(tableHtml)
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
exporting,
|
||||
exportToCsv,
|
||||
exportToJson,
|
||||
exportToExcel,
|
||||
printData
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}${month}${day}`
|
||||
}
|
||||
127
frontend/admin/src/services/user.ts
Normal file
127
frontend/admin/src/services/user.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* 用户管理服务
|
||||
*/
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
username: string
|
||||
email?: string
|
||||
phone?: string
|
||||
status: number
|
||||
roles?: string[]
|
||||
departmentId?: number
|
||||
createdAt?: string
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
code: number
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
class UserService {
|
||||
private baseUrl = '/api'
|
||||
|
||||
async getUsers(params?: { page?: number; size?: number; keyword?: string }): Promise<User[]> {
|
||||
const searchParams = new URLSearchParams()
|
||||
if (params?.page) searchParams.set('page', String(params.page))
|
||||
if (params?.size) searchParams.set('size', String(params.size))
|
||||
if (params?.keyword) searchParams.set('keyword', params.keyword)
|
||||
|
||||
const response = await fetch(`${this.baseUrl}/users?${searchParams}`, {
|
||||
credentials: 'include'
|
||||
})
|
||||
const result = await response.json() as ApiResponse<User[]>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '获取用户列表失败')
|
||||
}
|
||||
return result.data
|
||||
}
|
||||
|
||||
async getUserById(id: number): Promise<User | null> {
|
||||
const response = await fetch(`${this.baseUrl}/users/${id}`, {
|
||||
credentials: 'include'
|
||||
})
|
||||
const result = await response.json() as ApiResponse<User>
|
||||
if (result.code !== 200) {
|
||||
return null
|
||||
}
|
||||
return result.data
|
||||
}
|
||||
|
||||
async createUser(data: Partial<User>): Promise<number> {
|
||||
const response = await fetch(`${this.baseUrl}/users`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
const result = await response.json() as ApiResponse<number>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '创建用户失败')
|
||||
}
|
||||
return result.data
|
||||
}
|
||||
|
||||
async updateUser(id: number, data: Partial<User>): Promise<void> {
|
||||
const response = await fetch(`${this.baseUrl}/users/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
const result = await response.json() as ApiResponse<void>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '更新用户失败')
|
||||
}
|
||||
}
|
||||
|
||||
async deleteUser(id: number): Promise<void> {
|
||||
const response = await fetch(`${this.baseUrl}/users/${id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
})
|
||||
const result = await response.json() as ApiResponse<void>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '删除用户失败')
|
||||
}
|
||||
}
|
||||
|
||||
async freezeUser(id: number): Promise<void> {
|
||||
const response = await fetch(`${this.baseUrl}/users/${id}/freeze`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
})
|
||||
const result = await response.json() as ApiResponse<void>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '冻结用户失败')
|
||||
}
|
||||
}
|
||||
|
||||
async unfreezeUser(id: number): Promise<void> {
|
||||
const response = await fetch(`${this.baseUrl}/users/${id}/unfreeze`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
})
|
||||
const result = await response.json() as ApiResponse<void>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '解冻用户失败')
|
||||
}
|
||||
}
|
||||
|
||||
async assignRoles(userId: number, roleIds: number[]): Promise<void> {
|
||||
const response = await fetch(`${this.baseUrl}/users/${userId}/roles`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ roleIds })
|
||||
})
|
||||
const result = await response.json() as ApiResponse<void>
|
||||
if (result.code !== 200) {
|
||||
throw new Error(result.message || '分配角色失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const userService = new UserService()
|
||||
export default userService
|
||||
Reference in New Issue
Block a user