mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-21 04:46:26 +00:00
refactor(module): 重构模块结构和代码生成模板
- 删除废弃的ticket和version模块相关代码 - 将resource模块从system迁移到monitor - 移除前端资源管理相关配置 - 重构代码生成模板路径和配置 - 修复CRUD基类初始化参数问题 - 优化模板工具类路径处理 - 更新基础模型字段和配置
This commit is contained in:
zhangtao
@@ -7,7 +7,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
getResourceList(query: ResourceListQuery) {
|
||||
return request<ApiResponse<ResourceListResponse>>({
|
||||
url: `/resource/resource/list`,
|
||||
url: `/monitor/resource/list`,
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
@@ -19,7 +19,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
searchResource(body: ResourceSearchQuery) {
|
||||
return request<ApiResponse<ResourceListResponse>>({
|
||||
url: `/resource/resource/search`,
|
||||
url: `/monitor/resource/search`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
@@ -31,7 +31,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
uploadFile(formData: FormData) {
|
||||
return request<ApiResponse<UploadFilePath>>({
|
||||
url: `/resource/resource/upload`,
|
||||
url: `/monitor/resource/upload`,
|
||||
method: "post",
|
||||
data: formData,
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
@@ -44,7 +44,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
downloadFile(path: string) {
|
||||
return request<Blob>({
|
||||
url: `/resource/resource/download`,
|
||||
url: `/monitor/resource/download`,
|
||||
method: "get",
|
||||
params: { path },
|
||||
responseType: "blob",
|
||||
@@ -57,7 +57,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
deleteResource(body: string[]) {
|
||||
return request<ApiResponse>({
|
||||
url: `/resource/resource/delete`,
|
||||
url: `/monitor/resource/delete`,
|
||||
method: "delete",
|
||||
data: body,
|
||||
});
|
||||
@@ -69,7 +69,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
moveResource(body: ResourceMoveQuery) {
|
||||
return request<ApiResponse>({
|
||||
url: `/resource/resource/move`,
|
||||
url: `/monitor/resource/move`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
@@ -81,7 +81,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
copyResource(body: ResourceCopyQuery) {
|
||||
return request<ApiResponse>({
|
||||
url: `/resource/resource/copy`,
|
||||
url: `/monitor/resource/copy`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
@@ -93,7 +93,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
renameResource(body: ResourceRenameQuery) {
|
||||
return request<ApiResponse>({
|
||||
url: `/resource/resource/rename`,
|
||||
url: `/monitor/resource/rename`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
@@ -105,7 +105,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
createDirectory(body: ResourceCreateDirQuery) {
|
||||
return request<ApiResponse>({
|
||||
url: `/resource/resource/create-dir`,
|
||||
url: `/monitor/resource/create-dir`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
@@ -116,7 +116,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
getResourceStats() {
|
||||
return request<ApiResponse<ResourceStats>>({
|
||||
url: `/resource/resource/stats`,
|
||||
url: `/monitor/resource/stats`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
@@ -127,7 +127,7 @@ export const ResourceAPI = {
|
||||
*/
|
||||
exportResource(body: ResourceSearchQuery) {
|
||||
return request<Blob>({
|
||||
url: `/resource/resource/export`,
|
||||
url: `/monitor/resource/export`,
|
||||
method: "post",
|
||||
data: body,
|
||||
responseType: "blob",
|
||||
@@ -1,83 +0,0 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const TicketAPI = {
|
||||
getTicketList(query: TicketPageQuery) {
|
||||
return request<ApiResponse<PageResult<TicketTable[]>>>({
|
||||
url: `/system/ticket/list`,
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
},
|
||||
|
||||
getTicketDetail(query: number) {
|
||||
return request<ApiResponse<TicketTable>>({
|
||||
url: `/system/ticket/detail/${query}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
|
||||
createTicket(body: TicketForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `/system/ticket/create`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
updateTicket(id: number, body: TicketForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `/system/ticket/update/${id}`,
|
||||
method: "put",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
deleteTicket(body: number[]) {
|
||||
return request<ApiResponse>({
|
||||
url: `/system/ticket/delete`,
|
||||
method: "delete",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default TicketAPI;
|
||||
|
||||
export interface TicketPageQuery extends PageQuery {
|
||||
title?: string;
|
||||
status?: string;
|
||||
priority?: string;
|
||||
start_time?: string;
|
||||
end_time?: string;
|
||||
}
|
||||
|
||||
export interface TicketTable {
|
||||
index?: number;
|
||||
id?: number;
|
||||
title?: string;
|
||||
priority?: string;
|
||||
type?: string;
|
||||
status?: string;
|
||||
description?: string;
|
||||
assignee?: creatorType;
|
||||
reporter?: creatorType;
|
||||
project?: string;
|
||||
version?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
creator?: creatorType;
|
||||
}
|
||||
|
||||
export interface TicketForm {
|
||||
id?: number;
|
||||
title: string;
|
||||
priority?: string;
|
||||
type?: string;
|
||||
status?: string;
|
||||
description?: string;
|
||||
assignee_id?: number;
|
||||
reporter_id: number;
|
||||
project?: string;
|
||||
version?: string;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const VersionAPI = {
|
||||
getVersionList(query: VersionPageQuery) {
|
||||
return request<ApiResponse<PageResult<VersionTable[]>>>({
|
||||
url: `/system/version/list`,
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
},
|
||||
|
||||
getVersionDetail(query: number) {
|
||||
return request<ApiResponse<VersionTable>>({
|
||||
url: `/system/version/detail/${query}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
|
||||
createVersion(body: VersionForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `/system/version/create`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
updateVersion(id: number, body: VersionForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `/system/version/update/${id}`,
|
||||
method: "put",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
deleteVersion(body: number[]) {
|
||||
return request<ApiResponse>({
|
||||
url: `/system/version/delete`,
|
||||
method: "delete",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default VersionAPI;
|
||||
|
||||
export interface VersionPageQuery extends PageQuery {
|
||||
title?: string;
|
||||
status?: string;
|
||||
start_time?: string;
|
||||
end_time?: string;
|
||||
}
|
||||
|
||||
export interface VersionTable {
|
||||
index?: number;
|
||||
id?: number;
|
||||
version_number?: string;
|
||||
title?: string;
|
||||
release_notes?: string;
|
||||
project?: string;
|
||||
status?: string;
|
||||
released_at?: string;
|
||||
description?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
creator?: creatorType;
|
||||
}
|
||||
|
||||
export interface VersionForm {
|
||||
id?: number;
|
||||
version_number: string;
|
||||
title: string;
|
||||
release_notes?: string;
|
||||
project?: string;
|
||||
status?: string;
|
||||
released_at?: string;
|
||||
description?: string;
|
||||
}
|
||||
@@ -1,7 +1,4 @@
|
||||
export const ROLE_ROOT = "admin";
|
||||
|
||||
// 资源管理根路径
|
||||
export const RESOURCE_ROOT_PATH = import.meta.env.VITE_RESOURCE_ROOT_PATH || "/home/static";
|
||||
|
||||
// 🔗 导出所有存储键常量
|
||||
export * from "./storage-keys";
|
||||
|
||||
Vendored
-3
@@ -20,9 +20,6 @@ interface ImportMetaEnv {
|
||||
/** 超时时间 */
|
||||
VITE_TIMEOUT: number;
|
||||
|
||||
/** 资源管理根路径 */
|
||||
VITE_RESOURCE_ROOT_PATH: string;
|
||||
|
||||
/** ws 端点 */
|
||||
VITE_APP_WS_ENDPOINT: string;
|
||||
}
|
||||
|
||||
+134
-82
@@ -96,8 +96,8 @@
|
||||
<el-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbList"
|
||||
:key="index"
|
||||
@click="handleBreadcrumbClick(item, index)"
|
||||
:class="{ 'is-link': index < breadcrumbList.length - 1 }"
|
||||
@click="handleBreadcrumbClick(item, index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-breadcrumb-item>
|
||||
@@ -131,7 +131,7 @@
|
||||
<Document v-else />
|
||||
</el-icon>
|
||||
<span
|
||||
:class="{ 'file-name-clickable': !row.is_dir }"
|
||||
:class="{ 'file-name-clickable': true }"
|
||||
@click="handleFileNameClick(row)"
|
||||
>
|
||||
{{ row.name }}
|
||||
@@ -189,7 +189,7 @@
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="item-name">{{ item.name }}</div>
|
||||
<div class="item-size" v-if="!item.is_dir">
|
||||
<div v-if="!item.is_dir" class="item-size">
|
||||
{{ formatFileSize(item.size) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,7 +197,7 @@
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination
|
||||
<Pagination
|
||||
v-model:total="total"
|
||||
v-model:page="pagination.page_no"
|
||||
v-model:limit="pagination.page_size"
|
||||
@@ -218,10 +218,10 @@
|
||||
:auto-upload="false"
|
||||
:multiple="true"
|
||||
:file-list="uploadFileList"
|
||||
@change="handleUploadChange"
|
||||
drag
|
||||
@change="handleUploadChange"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em>点击上传</em>
|
||||
</div>
|
||||
@@ -233,7 +233,7 @@
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleUploadConfirm" :loading="uploading">
|
||||
<el-button type="primary" :loading="uploading" @click="handleUploadConfirm">
|
||||
确定上传
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -287,11 +287,6 @@
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
Upload,
|
||||
FolderAdd,
|
||||
Refresh,
|
||||
Search,
|
||||
RefreshLeft,
|
||||
List,
|
||||
Grid,
|
||||
Folder,
|
||||
@@ -299,20 +294,20 @@ import {
|
||||
UploadFilled,
|
||||
QuestionFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import Pagination from '@/components/Pagination/index.vue'
|
||||
import { ResourceAPI, type ResourceItem, type ResourceListQuery, type ResourceSearchQuery, type ResourceListResponse } from '@/api/resource/resource'
|
||||
import { RESOURCE_ROOT_PATH } from '@/constants'
|
||||
import { ResourceAPI, type ResourceItem, type ResourceSearchQuery } from '@/api/monitor/resource'
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const fileList = ref<ResourceItem[]>([])
|
||||
const selectedItems = ref<ResourceItem[]>([])
|
||||
const currentPath = ref(RESOURCE_ROOT_PATH)
|
||||
const breadcrumbList = ref([{ name: '资源根目录', path: RESOURCE_ROOT_PATH }])
|
||||
const breadcrumbList = ref([{ name: '资源根目录', path: '/' }])
|
||||
const showHiddenFiles = ref(false)
|
||||
const viewMode = ref<'list' | 'grid'>('list')
|
||||
const total = ref(0)
|
||||
|
||||
// 路径相关数据
|
||||
const currentPath = ref('/') // 添加当前路径的响应式变量
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
page_no: 1,
|
||||
@@ -347,25 +342,21 @@ const renameForm = reactive({
|
||||
old_path: ''
|
||||
})
|
||||
|
||||
// 工具函数：处理路径转换
|
||||
const ensureRootPath = (path: string) => {
|
||||
// 如果是HTTP URL，提取相对路径部分
|
||||
if (path.startsWith('http')) {
|
||||
const url = new URL(path)
|
||||
return url.pathname.replace('/api/v1/static', '/home/static')
|
||||
// 计算属性
|
||||
const currentQuery = computed(() => {
|
||||
// 构建查询参数
|
||||
const query: any = {
|
||||
include_hidden: showHiddenFiles.value
|
||||
}
|
||||
|
||||
if (path.startsWith(RESOURCE_ROOT_PATH)) {
|
||||
return path
|
||||
// 如果当前路径不是根路径，则添加路径参数
|
||||
if (currentPath.value && currentPath.value !== '/') {
|
||||
// 对于文件夹导航，直接传递文件夹名称
|
||||
query.path = currentPath.value
|
||||
}
|
||||
return RESOURCE_ROOT_PATH + '/' + path.replace(/^\/+/, '')
|
||||
}
|
||||
|
||||
// 计算属性
|
||||
const currentQuery = computed(() => ({
|
||||
path: currentPath.value,
|
||||
include_hidden: showHiddenFiles.value
|
||||
}))
|
||||
|
||||
return query
|
||||
})
|
||||
|
||||
// 方法
|
||||
const loadFileList = async () => {
|
||||
@@ -397,54 +388,62 @@ const loadFileList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleBreadcrumbClick = (item: any, index: number) => {
|
||||
if (index < breadcrumbList.value.length - 1) {
|
||||
currentPath.value = ensureRootPath(item.path)
|
||||
updateBreadcrumb()
|
||||
loadFileList()
|
||||
}
|
||||
const handleBreadcrumbClick = (item: any) => {
|
||||
// 更新当前路径为点击的面包屑项路径
|
||||
currentPath.value = item.path
|
||||
updateBreadcrumb()
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
const updateBreadcrumb = () => {
|
||||
const rootPath = RESOURCE_ROOT_PATH
|
||||
let relativePath = currentPath.value
|
||||
|
||||
// 处理HTTP URL格式的路径
|
||||
if (currentPath.value.startsWith('http')) {
|
||||
const url = new URL(currentPath.value)
|
||||
relativePath = url.pathname.replace('/api/v1/static', '/home/static')
|
||||
// 对于根路径，直接显示根目录
|
||||
if (currentPath.value === '/') {
|
||||
breadcrumbList.value = [{ name: '资源根目录', path: '/' }]
|
||||
return
|
||||
}
|
||||
|
||||
relativePath = relativePath.replace(rootPath, '').replace(/^\/+/, '')
|
||||
const pathParts = relativePath ? relativePath.split('/').filter(Boolean) : []
|
||||
// 对于嵌套路径，需要分解并构建面包屑
|
||||
const parts = currentPath.value.split('/').filter(part => part !== '')
|
||||
|
||||
breadcrumbList.value = [
|
||||
{ name: '资源根目录', path: rootPath },
|
||||
...pathParts.map((part, index) => ({
|
||||
{ name: '资源根目录', path: '/' },
|
||||
...parts.map((part, index) => ({
|
||||
name: part,
|
||||
path: rootPath + '/' + pathParts.slice(0, index + 1).join('/')
|
||||
path: parts.slice(0, index + 1).join('/')
|
||||
}))
|
||||
]
|
||||
}
|
||||
|
||||
const handleFileNameClick = (row: ResourceItem) => {
|
||||
if (row.is_dir) {
|
||||
currentPath.value = ensureRootPath(row.path)
|
||||
// 如果当前在根路径，则直接使用文件夹名称
|
||||
// 如果当前已在某个文件夹中，则拼接路径
|
||||
if (currentPath.value === '/') {
|
||||
currentPath.value = row.name
|
||||
} else {
|
||||
currentPath.value = currentPath.value + '/' + row.name
|
||||
}
|
||||
updateBreadcrumb()
|
||||
loadFileList()
|
||||
} else {
|
||||
// 文件预览
|
||||
// 文件预览，使用后端返回的完整URL
|
||||
handleFilePreview(row)
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemClick = (item: ResourceItem) => {
|
||||
if (item.is_dir) {
|
||||
currentPath.value = ensureRootPath(item.path)
|
||||
// 如果当前在根路径，则直接使用文件夹名称
|
||||
// 如果当前已在某个文件夹中，则拼接路径
|
||||
if (currentPath.value === '/') {
|
||||
currentPath.value = item.name
|
||||
} else {
|
||||
currentPath.value = currentPath.value + '/' + item.name
|
||||
}
|
||||
updateBreadcrumb()
|
||||
loadFileList()
|
||||
} else {
|
||||
// 文件预览
|
||||
// 文件预览，使用后端返回的完整URL
|
||||
handleFilePreview(item)
|
||||
}
|
||||
}
|
||||
@@ -452,7 +451,13 @@ const handleItemClick = (item: ResourceItem) => {
|
||||
// 文件预览
|
||||
const handleFilePreview = (file: ResourceItem) => {
|
||||
// 使用后端返回的完整URL路径进行预览
|
||||
const previewUrl = file.path
|
||||
let previewUrl = file.path
|
||||
|
||||
// 如果是完整URL，直接使用
|
||||
if (!previewUrl.startsWith('http')) {
|
||||
// 对于相对路径，需要构建完整URL
|
||||
previewUrl = `${window.location.origin}${previewUrl}`
|
||||
}
|
||||
|
||||
// 根据文件类型决定预览方式
|
||||
const fileExtension = file.file_extension?.toLowerCase() || ''
|
||||
@@ -497,7 +502,19 @@ const handleUploadConfirm = async () => {
|
||||
uploadFileList.value.forEach((file: any) => {
|
||||
formData.append('file', file.raw)
|
||||
})
|
||||
formData.append('target_path', ensureRootPath(currentPath.value))
|
||||
|
||||
// 处理目标路径
|
||||
let targetPath = currentPath.value
|
||||
if (targetPath.startsWith('http')) {
|
||||
try {
|
||||
const url = new URL(targetPath)
|
||||
targetPath = url.pathname.replace('/api/v1/static', '') || '/'
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse URL:', targetPath, error)
|
||||
}
|
||||
}
|
||||
|
||||
formData.append('target_path', targetPath)
|
||||
|
||||
await ResourceAPI.uploadFile(formData)
|
||||
ElMessage.success('上传成功')
|
||||
@@ -528,8 +545,19 @@ const handleCreateDirConfirm = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
// 处理父路径
|
||||
let parentPath = currentPath.value
|
||||
if (parentPath.startsWith('http')) {
|
||||
try {
|
||||
const url = new URL(parentPath)
|
||||
parentPath = url.pathname.replace('/api/v1/static', '') || '/'
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse URL:', parentPath, error)
|
||||
}
|
||||
}
|
||||
|
||||
await ResourceAPI.createDirectory({
|
||||
parent_path: ensureRootPath(currentPath.value),
|
||||
parent_path: parentPath,
|
||||
dir_name: createDirForm.dir_name.trim()
|
||||
})
|
||||
ElMessage.success('创建成功')
|
||||
@@ -590,7 +618,17 @@ const handleShowHiddenChange = () => {
|
||||
|
||||
const handleDownload = async (item: ResourceItem) => {
|
||||
try {
|
||||
const filePath = ensureRootPath(item.path)
|
||||
// 处理完整URL路径
|
||||
let filePath = item.path
|
||||
if (filePath.startsWith('http')) {
|
||||
try {
|
||||
const url = new URL(filePath)
|
||||
filePath = url.pathname.replace('/api/v1/static', '') || '/'
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse URL:', filePath, error)
|
||||
}
|
||||
}
|
||||
|
||||
const response = await ResourceAPI.downloadFile(filePath)
|
||||
const blob = response.data
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
@@ -608,7 +646,18 @@ const handleDownload = async (item: ResourceItem) => {
|
||||
}
|
||||
|
||||
const handleRename = (item: ResourceItem) => {
|
||||
renameForm.old_path = ensureRootPath(item.path)
|
||||
// 处理完整URL路径
|
||||
let oldPath = item.path
|
||||
if (oldPath.startsWith('http')) {
|
||||
try {
|
||||
const url = new URL(oldPath)
|
||||
oldPath = url.pathname.replace('/api/v1/static', '') || '/'
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse URL:', oldPath, error)
|
||||
}
|
||||
}
|
||||
|
||||
renameForm.old_path = oldPath
|
||||
renameForm.new_name = item.name
|
||||
renameDialogVisible.value = true
|
||||
}
|
||||
@@ -633,12 +682,6 @@ const handleRenameConfirm = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleMove = (item: ResourceItem) => {
|
||||
// TODO: 实现移动功能
|
||||
ElMessage.info('移动功能待实现')
|
||||
}
|
||||
|
||||
|
||||
const handleDelete = async (item: ResourceItem) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
@@ -651,7 +694,17 @@ const handleDelete = async (item: ResourceItem) => {
|
||||
}
|
||||
)
|
||||
|
||||
const filePath = ensureRootPath(item.path)
|
||||
// 处理完整URL路径
|
||||
let filePath = item.path
|
||||
if (filePath.startsWith('http')) {
|
||||
try {
|
||||
const url = new URL(filePath)
|
||||
filePath = url.pathname.replace('/api/v1/static', '') || '/'
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse URL:', filePath, error)
|
||||
}
|
||||
}
|
||||
|
||||
await ResourceAPI.deleteResource([filePath])
|
||||
ElMessage.success('删除成功')
|
||||
loadFileList()
|
||||
@@ -663,16 +716,6 @@ const handleDelete = async (item: ResourceItem) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.page_size = size
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.page_no = page
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
const handlePagination = (params: { page: number; limit: number }) => {
|
||||
pagination.page_no = params.page
|
||||
pagination.page_size = params.limit
|
||||
@@ -696,7 +739,20 @@ const handleBatchDelete = async () => {
|
||||
}
|
||||
)
|
||||
|
||||
const paths = selectedItems.value.map(item => ensureRootPath(item.path))
|
||||
const paths = selectedItems.value.map(item => {
|
||||
// 处理完整URL路径
|
||||
let path = item.path
|
||||
if (path.startsWith('http')) {
|
||||
try {
|
||||
const url = new URL(path)
|
||||
path = url.pathname.replace('/api/v1/static', '') || '/'
|
||||
} catch (error) {
|
||||
console.warn('Failed to parse URL:', path, error)
|
||||
}
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
await ResourceAPI.deleteResource(paths)
|
||||
ElMessage.success('删除成功')
|
||||
loadFileList()
|
||||
@@ -723,10 +779,6 @@ const formatFileSize = (size?: number | null) => {
|
||||
return `${fileSize.toFixed(1)} ${units[unitIndex]}`
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString()
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
loadFileList()
|
||||
+1
-1
@@ -120,7 +120,7 @@ import {
|
||||
Monitor,
|
||||
QuestionFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ResourceAPI, type ResourceStats } from '@/api/resource/resource'
|
||||
import { ResourceAPI, type ResourceStats } from '@/api/monitor/resource'
|
||||
|
||||
// 响应式数据
|
||||
const stats = ref<ResourceStats | null>(null)
|
||||
@@ -1,578 +0,0 @@
|
||||
<!-- 工单管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryFormData" :inline="true" label-suffix=":">
|
||||
<el-form-item prop="title" label="工单标题">
|
||||
<el-input v-model="queryFormData.title" placeholder="请输入工单标题" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="priority" label="优先级">
|
||||
<el-select v-model="queryFormData.priority" placeholder="请选择优先级" style="width: 167.5px" clearable>
|
||||
<el-option value="low" label="低" />
|
||||
<el-option value="medium" label="中" />
|
||||
<el-option value="high" label="高" />
|
||||
<el-option value="urgent" label="紧急" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="状态">
|
||||
<el-select v-model="queryFormData.status" placeholder="请选择状态" style="width: 167.5px" clearable>
|
||||
<el-option value="pending" label="待处理" />
|
||||
<el-option value="progress" label="处理中" />
|
||||
<el-option value="resolved" label="已解决" />
|
||||
<el-option value="closed" label="已关闭" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 时间范围，收起状态下隐藏 -->
|
||||
<el-form-item v-if="isExpand" prop="start_time" label="创建时间">
|
||||
<DatePicker
|
||||
v-model="dateRange"
|
||||
@update:model-value="handleDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="search" @click="handleQuery">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="refresh" @click="handleResetQuery">
|
||||
重置
|
||||
</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<template v-if="isExpandable">
|
||||
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
<el-tooltip content="工单管理维护系统。">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
工单列表
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
|
||||
<el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
|
||||
</div>
|
||||
<div class="data-table__toolbar--tools">
|
||||
<el-tooltip content="刷新">
|
||||
<el-button type="primary" icon="refresh" circle @click="handleRefresh" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="列表筛选">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="default" icon="operation" circle />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
|
||||
<el-checkbox v-model="column.show">
|
||||
{{ column.label }}
|
||||
</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：工单列表 -->
|
||||
<el-table ref="dataTableRef" v-loading="loading" :data="pageTableData" highlight-current-row class="data-table__content" height="450" border stripe @selection-change="handleSelectionChange">
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" fixed label="序号" min-width="60" >
|
||||
<template #default="scope">
|
||||
{{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'title')?.show" label="工单标题" prop="title" min-width="140" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" label="状态" prop="status" min-width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)">
|
||||
{{ getStatusLabel(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'priority')?.show" label="优先级" prop="priority" min-width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getPriorityTagType(scope.row.priority)">
|
||||
{{ getPriorityLabel(scope.row.priority) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'type')?.show" label="类型" prop="type" min-width="80">
|
||||
<template #default="scope">
|
||||
{{ getTypeLabel(scope.row.type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'project')?.show" label="项目" prop="project" min-width="100" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'version')?.show" label="版本" prop="version" min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'assignee')?.show" label="指派给" prop="assignee" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ scope.row.assignee?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'reporter')?.show" label="报告人" prop="reporter" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ scope.row.reporter?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" label="创建时间" prop="created_at" min-width="180" sortable />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" label="更新时间" prop="updated_at" min-width="180" sortable />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'creator')?.show" key="creator" label="创建人" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ scope.row.creator?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
|
||||
<el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
|
||||
<el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
|
||||
<!-- 详情 -->
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="工单标题" :span="2">
|
||||
{{ detailFormData.title }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag :type="getStatusTagType(detailFormData.status)">
|
||||
{{ getStatusLabel(detailFormData.status) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="优先级" :span="2">
|
||||
<el-tag :type="getPriorityTagType(detailFormData.priority)">
|
||||
{{ getPriorityLabel(detailFormData.priority) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="类型" :span="2">
|
||||
{{ getTypeLabel(detailFormData.type) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="项目" :span="2">
|
||||
{{ detailFormData.project }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="版本" :span="2">
|
||||
{{ detailFormData.version }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="指派给" :span="2">
|
||||
{{ detailFormData.assignee?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="报告人" :span="2">
|
||||
{{ detailFormData.reporter?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="4">
|
||||
{{ detailFormData.description }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人" :span="2">
|
||||
{{ detailFormData.creator?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
{{ detailFormData.created_at }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">
|
||||
{{ detailFormData.updated_at }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<!-- 新增、编辑表单 -->
|
||||
<template v-else>
|
||||
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="auto" label-position="right">
|
||||
<el-form-item label="工单标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入工单标题" :maxlength="255" />
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级" prop="priority">
|
||||
<el-select v-model="formData.priority" placeholder="请选择优先级" clearable>
|
||||
<el-option value="low" label="低" />
|
||||
<el-option value="medium" label="中" />
|
||||
<el-option value="high" label="高" />
|
||||
<el-option value="urgent" label="紧急" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择类型" clearable>
|
||||
<el-option value="bug" label="缺陷" />
|
||||
<el-option value="feature" label="功能" />
|
||||
<el-option value="task" label="任务" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="formData.status" placeholder="请选择状态">
|
||||
<el-option value="pending" label="待处理" />
|
||||
<el-option value="progress" label="处理中" />
|
||||
<el-option value="resolved" label="已解决" />
|
||||
<el-option value="closed" label="已关闭" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目" prop="project">
|
||||
<el-input v-model="formData.project" placeholder="请输入项目名称" :maxlength="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="版本" prop="version">
|
||||
<el-input v-model="formData.version" placeholder="请输入版本号" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="指派给" prop="assignee_id">
|
||||
<!-- 这里应该是一个用户选择器，暂时用输入框代替 -->
|
||||
<el-input v-model.number="formData.assignee_id" placeholder="请输入指派用户ID" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="formData.description" :rows="4" :maxlength="500" show-word-limit type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">确定</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Ticket",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import TicketAPI, { TicketTable, TicketForm, TicketPageQuery } from "@/api/system/ticket";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const loading = ref(false);
|
||||
const isExpand = ref(false);
|
||||
const isExpandable = ref(true);
|
||||
|
||||
// 分页表单
|
||||
const pageTableData = ref<TicketTable[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ prop: 'selection', label: '选择框', show: true },
|
||||
{ prop: 'index', label: '序号', show: true },
|
||||
{ prop: 'title', label: '工单标题', show: true },
|
||||
{ prop: 'status', label: '状态', show: true },
|
||||
{ prop: 'priority', label: '优先级', show: true },
|
||||
{ prop: 'type', label: '类型', show: true },
|
||||
{ prop: 'project', label: '项目', show: true },
|
||||
{ prop: 'version', label: '版本', show: true },
|
||||
{ prop: 'assignee', label: '指派给', show: true },
|
||||
{ prop: 'reporter', label: '报告人', show: true },
|
||||
{ prop: 'created_at', label: '创建时间', show: true },
|
||||
{ prop: 'updated_at', label: '更新时间', show: true },
|
||||
{ prop: 'creator', label: '创建人', show: true },
|
||||
{ prop: 'operation', label: '操作', show: true }
|
||||
])
|
||||
|
||||
// 详情表单
|
||||
const detailFormData = ref<TicketTable>({});
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<TicketPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
title: undefined,
|
||||
priority: undefined,
|
||||
status: undefined,
|
||||
start_time: undefined,
|
||||
end_time: undefined,
|
||||
});
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<TicketForm>({
|
||||
id: undefined,
|
||||
title: '',
|
||||
priority: 'medium',
|
||||
type: 'bug',
|
||||
status: 'pending',
|
||||
description: undefined,
|
||||
assignee_id: undefined,
|
||||
reporter_id: 1, // 默认当前用户ID，实际应该从认证信息中获取
|
||||
project: undefined,
|
||||
version: undefined
|
||||
})
|
||||
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
|
||||
priority: [{ required: false, message: "请选择优先级", trigger: "blur" }],
|
||||
type: [{ required: false, message: "请选择类型", trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||||
project: [{ required: false, message: "请输入项目名称", trigger: "blur" }],
|
||||
version: [{ required: false, message: "请输入版本号", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 日期范围临时变量
|
||||
const dateRange = ref<[Date, Date] | []>([]);
|
||||
|
||||
// 处理日期范围变化
|
||||
function handleDateRangeChange(range: [Date, Date]) {
|
||||
dateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.start_time = range[0].toISOString();
|
||||
queryFormData.end_time = range[1].toISOString();
|
||||
} else {
|
||||
queryFormData.start_time = undefined;
|
||||
queryFormData.end_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
function getStatusTagType(status: string) {
|
||||
switch (status) {
|
||||
case 'pending': return 'info';
|
||||
case 'progress': return 'warning';
|
||||
case 'resolved': return 'success';
|
||||
case 'closed': return 'danger';
|
||||
default: return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态标签文本
|
||||
function getStatusLabel(status: string) {
|
||||
switch (status) {
|
||||
case 'pending': return '待处理';
|
||||
case 'progress': return '处理中';
|
||||
case 'resolved': return '已解决';
|
||||
case 'closed': return '已关闭';
|
||||
default: return status;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优先级标签类型
|
||||
function getPriorityTagType(priority: string) {
|
||||
switch (priority) {
|
||||
case 'low': return '';
|
||||
case 'medium': return 'warning';
|
||||
case 'high': return 'danger';
|
||||
case 'urgent': return 'danger';
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优先级标签文本
|
||||
function getPriorityLabel(priority: string) {
|
||||
switch (priority) {
|
||||
case 'low': return '低';
|
||||
case 'medium': return '中';
|
||||
case 'high': return '高';
|
||||
case 'urgent': return '紧急';
|
||||
default: return priority;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取类型标签文本
|
||||
function getTypeLabel(type: string) {
|
||||
switch (type) {
|
||||
case 'bug': return '缺陷';
|
||||
case 'feature': return '功能';
|
||||
case 'task': return '任务';
|
||||
default: return type;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表刷新
|
||||
async function handleRefresh () {
|
||||
await loadingData();
|
||||
};
|
||||
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await TicketAPI.getTicketList(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
dateRange.value = [];
|
||||
queryFormData.start_time = undefined;
|
||||
queryFormData.end_time = undefined;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 定义初始表单数据常量
|
||||
const initialFormData: TicketForm = {
|
||||
id: undefined,
|
||||
title: '',
|
||||
priority: 'medium',
|
||||
type: 'bug',
|
||||
status: 'pending',
|
||||
description: undefined,
|
||||
assignee_id: undefined,
|
||||
reporter_id: 1, // 默认当前用户ID，实际应该从认证信息中获取
|
||||
project: undefined,
|
||||
version: undefined
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
// 完全重置 formData 为初始状态
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await TicketAPI.getTicketDetail(id);
|
||||
if (type === 'detail') {
|
||||
dialogVisible.title = "工单详情";
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === 'update') {
|
||||
dialogVisible.title = "修改工单";
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = "新增工单";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
// 提交表单（防抖）
|
||||
async function handleSubmit() {
|
||||
// 表单校验
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await TicketAPI.updateTicket(id, { id, ...formData })
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await TicketAPI.createTicket(formData)
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除、批量删除
|
||||
async function handleDelete(ids: number[]) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await TicketAPI.deleteTicket(ids);
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 加载表格数据
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,480 +0,0 @@
|
||||
<!-- 版本管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryFormData" :inline="true" label-suffix=":">
|
||||
<el-form-item prop="title" label="版本标题">
|
||||
<el-input v-model="queryFormData.title" placeholder="请输入版本标题" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="状态">
|
||||
<el-select v-model="queryFormData.status" placeholder="请选择状态" style="width: 167.5px" clearable>
|
||||
<el-option value="draft" label="草稿" />
|
||||
<el-option value="released" label="已发布" />
|
||||
<el-option value="archived" label="已归档" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 时间范围，收起状态下隐藏 -->
|
||||
<el-form-item v-if="isExpand" prop="start_time" label="创建时间">
|
||||
<DatePicker v-model="dateRange" @update:model-value="handleDateRangeChange" />
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="search" @click="handleQuery">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="refresh" @click="handleResetQuery">
|
||||
重置
|
||||
</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<template v-if="isExpandable">
|
||||
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
<el-tooltip content="版本管理维护系统的版本信息。">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
版本列表
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
|
||||
<el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
|
||||
</div>
|
||||
<div class="data-table__toolbar--tools">
|
||||
<el-tooltip content="刷新">
|
||||
<el-button type="primary" icon="refresh" circle @click="handleRefresh" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="列表筛选">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="default" icon="operation" circle />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
|
||||
<el-checkbox v-model="column.show">
|
||||
{{ column.label }}
|
||||
</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：版本列表 -->
|
||||
<el-table ref="dataTableRef" v-loading="loading" :data="pageTableData" highlight-current-row class="data-table__content" height="450" border stripe @selection-change="handleSelectionChange">
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" fixed label="序号" min-width="60">
|
||||
<template #default="scope">
|
||||
{{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'version_number')?.show" label="版本号" prop="version_number" min-width="100" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'title')?.show" label="版本标题" prop="title" min-width="140" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" label="状态" prop="status" min-width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)">
|
||||
{{ getStatusLabel(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'project')?.show" label="所属项目" prop="project" min-width="120" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'release_notes')?.show" label="发布说明" prop="release_notes" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'released_at')?.show" label="发布时间" prop="released_at" min-width="180" sortable />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" label="创建时间" prop="created_at" min-width="180" sortable />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" label="更新时间" prop="updated_at" min-width="180" sortable />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'creator')?.show" key="creator" label="创建人" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ scope.row.creator?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
|
||||
<el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
|
||||
<el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
|
||||
<!-- 详情 -->
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="版本号" :span="2">
|
||||
{{ detailFormData.version_number }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="版本标题" :span="2">
|
||||
{{ detailFormData.title }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag :type="getStatusTagType(detailFormData.status)">
|
||||
{{ getStatusLabel(detailFormData.status) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所属项目" :span="2">
|
||||
{{ detailFormData.project }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="发布说明" :span="4">
|
||||
{{ detailFormData.release_notes }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="发布时间" :span="2">
|
||||
{{ detailFormData.released_at }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="2">
|
||||
{{ detailFormData.description }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人" :span="2">
|
||||
{{ detailFormData.creator?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
{{ detailFormData.created_at }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">
|
||||
{{ detailFormData.updated_at }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<!-- 新增、编辑表单 -->
|
||||
<template v-else>
|
||||
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="auto" label-position="right">
|
||||
<el-form-item label="版本号" prop="version_number">
|
||||
<el-input v-model="formData.version_number" placeholder="请输入版本号" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="版本标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入版本标题" :maxlength="255" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="formData.status" placeholder="请选择状态">
|
||||
<el-option value="draft" label="草稿" />
|
||||
<el-option value="released" label="已发布" />
|
||||
<el-option value="archived" label="已归档" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属项目" prop="project">
|
||||
<el-input v-model="formData.project" placeholder="请输入所属项目" :maxlength="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发布说明" prop="release_notes">
|
||||
<el-input v-model="formData.release_notes" :rows="4" type="textarea" placeholder="请输入发布说明" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发布时间" prop="released_at">
|
||||
<el-date-picker v-model="formData.released_at" type="datetime" placeholder="请选择发布时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="formData.description" :rows="4" :maxlength="500" show-word-limit type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">确定</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Version",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import VersionAPI, { VersionTable, VersionForm, VersionPageQuery } from "@/api/system/version";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const loading = ref(false);
|
||||
const isExpand = ref(false);
|
||||
const isExpandable = ref(true);
|
||||
|
||||
// 分页表单
|
||||
const pageTableData = ref<VersionTable[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ prop: 'selection', label: '选择框', show: true },
|
||||
{ prop: 'index', label: '序号', show: true },
|
||||
{ prop: 'version_number', label: '版本号', show: true },
|
||||
{ prop: 'title', label: '版本标题', show: true },
|
||||
{ prop: 'status', label: '状态', show: true },
|
||||
{ prop: 'project', label: '所属项目', show: true },
|
||||
{ prop: 'release_notes', label: '发布说明', show: true },
|
||||
{ prop: 'released_at', label: '发布时间', show: true },
|
||||
{ prop: 'created_at', label: '创建时间', show: true },
|
||||
{ prop: 'updated_at', label: '更新时间', show: true },
|
||||
{ prop: 'creator', label: '创建人', show: true },
|
||||
{ prop: 'operation', label: '操作', show: true }
|
||||
])
|
||||
|
||||
// 详情表单
|
||||
const detailFormData = ref<VersionTable>({});
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<VersionPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
title: undefined,
|
||||
status: undefined,
|
||||
start_time: undefined,
|
||||
end_time: undefined,
|
||||
});
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<VersionForm>({
|
||||
id: undefined,
|
||||
version_number: '',
|
||||
title: '',
|
||||
release_notes: undefined,
|
||||
project: undefined,
|
||||
status: 'draft',
|
||||
released_at: undefined,
|
||||
description: undefined,
|
||||
})
|
||||
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
version_number: [{ required: true, message: "请输入版本号", trigger: "blur" }],
|
||||
title: [{ required: true, message: "请输入版本标题", trigger: "blur" }],
|
||||
// status字段在后端有默认值'draft'，因此不是必填项
|
||||
});
|
||||
|
||||
// 日期范围临时变量
|
||||
const dateRange = ref<[Date, Date] | []>([]);
|
||||
|
||||
// 处理日期范围变化
|
||||
function handleDateRangeChange(range: [Date, Date]) {
|
||||
dateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.start_time = range[0]?.toISOString();
|
||||
queryFormData.end_time = range[1]?.toISOString();
|
||||
} else {
|
||||
queryFormData.start_time = undefined;
|
||||
queryFormData.end_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
function getStatusTagType(status: string | undefined) {
|
||||
switch (status) {
|
||||
case 'draft': return 'info';
|
||||
case 'released': return 'success';
|
||||
case 'archived': return 'warning';
|
||||
default: return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态标签文本
|
||||
function getStatusLabel(status: string | undefined) {
|
||||
switch (status) {
|
||||
case 'draft': return '草稿';
|
||||
case 'released': return '已发布';
|
||||
case 'archived': return '已归档';
|
||||
default: return status || '';
|
||||
}
|
||||
}
|
||||
|
||||
// 列表刷新
|
||||
async function handleRefresh() {
|
||||
await loadingData();
|
||||
};
|
||||
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await VersionAPI.getVersionList(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
dateRange.value = [];
|
||||
queryFormData.start_time = undefined;
|
||||
queryFormData.end_time = undefined;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 定义初始表单数据常量
|
||||
const initialFormData: VersionForm = {
|
||||
id: undefined,
|
||||
version_number: '',
|
||||
title: '',
|
||||
release_notes: undefined,
|
||||
project: undefined,
|
||||
status: 'draft',
|
||||
released_at: undefined,
|
||||
description: undefined,
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
// 完全重置 formData 为初始状态
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await VersionAPI.getVersionDetail(id);
|
||||
if (type === 'detail') {
|
||||
dialogVisible.title = "版本详情";
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === 'update') {
|
||||
dialogVisible.title = "修改版本";
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = "新增版本";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
// 提交表单（防抖）
|
||||
async function handleSubmit() {
|
||||
// 表单校验
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(detail\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await VersionAPI.updateVersion(id, { id, ...formData })
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await VersionAPI.createVersion(formData)
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除、批量删除
|
||||
async function handleDelete(ids: number[]) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await VersionAPI.deleteVersion(ids);
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 加载表格数据
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user