taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设计管理

Browse Source
This commit is contained in:
taoge1020
2025-08-19 20:01:29 +08:00
parent 53309746f5
commit 271f99fb16
12 changed files with 599 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/views/design/drawing/index.vue
View File

@ -1,77 +1,78 @@
<template>
<div class="p-2 volumeCatalog">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="卷册号" prop="volumeNumber">
<el-input v-model="queryParams.volumeNumber" placeholder="请输入卷册号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="资料名称" prop="documentName">
<el-input v-model="queryParams.documentName" placeholder="请输入资料名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:volumeCatalog:query']">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['design:volumeCatalog:query']">重置</el-button>
</el-form-item>
</el-form>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="volumeCatalogList">
<el-table-column label="序号" type="index" width="60" align="center" />
<el-table-column label="子项名称" align="center" prop="designSubitem" />
<el-table-column label="专业" align="center" prop="specialtyName"> </el-table-column>
<el-table-column label="设计人员" align="center" prop="principalName" />
<el-table-column label="卷册号" align="center" prop="volumeNumber" />
<el-table-column label="资料名称" align="center" prop="documentName" />
<el-table-column label="图纸文件" align="center" prop="remark" width="150">
<template #default="scope">
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['design:volumeFile:query']">查看文件</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 查看文件列表 -->
<el-dialog draggable title="文件列表" v-model="viewVisible" width="800px">
<el-table :data="fileList" style="width: 100%" border>
<el-table-column prop="fileName" label="文件" align="center">
<template #default="scope">
<el-link
:key="scope.row.fileId"
:href="scope.row.fileUrl"
target="_blank"
:type="scope.row.status == '1' ? 'primary' : 'info'"
:underline="false"
@click="handleBookFile(scope.row)"
>
{{ scope.row.fileName }}
</el-link>
</template>
</el-table-column>
<el-table-column prop="size" label="状态" width="120" align="center">
<template #default="scope">
<el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{ scope.row.status == 1 ? '使用中' : '已作废' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="240" align="center">
<template #default="scope">
<el-button link type="primary" icon="view" @click="handleViewHis(scope.row)">查阅记录</el-button>
<el-button type="danger" link icon="Download" @click="handleDownload(scope.row)"> 下载 </el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<span>
<el-button type="primary" @click="viewVisible = false">关闭</el-button>
<div class="p-2 volumeCatalog drawing">
<div class="file-category">
<span style="color: #757575; display: inline-block; margin-bottom: 15px">文件分类</span>
<!-- 优化了图标与文字的对齐和间距 -->
<div v-for="(item, i) of FolderList" :key="i" :class="{ active: currentActive === i }" @click="handleClick(item, i)" class="category-item">
<el-icon :size="20" class="folder-icon">
<Folder />
</el-icon>
<span class="folder-name">
{{ item.catalogueName }}
</span>
</template>
</el-dialog>
<el-dialog draggable title="文件列表" v-model="viewVisible1" width="500px">
</div>
</div>
<div class="boxs">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="卷册号" prop="volumeNumber">
<el-input v-model="queryParams.volumeNumber" placeholder="请输入卷册号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="资料名称" prop="documentName">
<el-input v-model="queryParams.documentName" placeholder="请输入资料名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:volumeCatalog:query']">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['design:volumeCatalog:query']">重置</el-button>
</el-form-item>
</el-form>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="volumeCatalogList">
<el-table-column label="序号" type="index" width="60" align="center" />
<el-table-column label="卷册号" align="center" prop="volumeNumber" />
<el-table-column label="资料名称" align="center" prop="documentName" />
<el-table-column label="子项名称" align="center" prop="designSubitem" />
<el-table-column label="专业" align="center" prop="specialtyName"> </el-table-column>
<el-table-column label="设计人员" align="center" prop="principalName" />
<el-table-column label="版本号" align="center" prop="version" />
<el-table-column label="图纸文件" align="center" prop="remark" width="300">
<template #default="scope">
<el-link
:key="scope.row.fileId"
:href="scope.row.fileUrl"
target="_blank"
type="primary"
:underline="false"
@click="handleBookFile(scope.row)"
>
{{ scope.row.fileName }}
</el-link>
</template>
</el-table-column>
<el-table-column label="操作" align="center" prop="remark" width="300">
<template #default="scope">
<el-button link type="primary" icon="view" @click="handleViewHis(scope.row)">查阅记录</el-button>
<el-button type="danger" link icon="Download" @click="handleDownload(scope.row)"> 下载 </el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
<el-dialog draggable title="查阅记录" v-model="viewVisible1" width="500px">
<el-table :data="histroyList" style="width: 100%" border>
<el-table-column type="index" label="序号" align="center" width="80"> </el-table-column>
<el-table-column prop="userName" label="用户名称" align="center"> </el-table-column>
<el-table-column label="下载或查看" align="center">
<template #default="scope">
<el-tag type="primary" v-if="scope.row.status == 2">下载</el-tag>
<el-tag type="success" v-else>查看</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="查阅时间" align="center"> </el-table-column>
</el-table>
<template #footer>
@ -87,7 +88,7 @@
import { listVolumeCatalog, addVolumeCatalog, updateVolumeCatalog } from '@/api/design/volumeCatalog';
import { VolumeCatalogVO } from '@/api/design/volumeCatalog/types';
import { useUserStoreHook } from '@/store/modules/user';
import { volumeFileViewer, volumeFileViewerList } from '@/api/design/drawing';
import { volumeFileViewer, volumeFileViewerList, joinList } from '@/api/design/drawing';
const fileList = ref([]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const volumeCatalogList = ref<VolumeCatalogVO[]>([]);
@ -101,12 +102,17 @@ const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const queryFormRef = ref<ElFormInstance>();
const volumeCatalogFormRef = ref<ElFormInstance>();
const catalogueId = ref(3);
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const FolderList = [
{ id: 3, catalogueName: '蓝图' },
{ id: 1, catalogueName: '过程图纸' },
{ id: 4, catalogueName: '废弃图纸' }
];
const uploadForm = reactive({
userIds: [],
volumeCatalogId: undefined,
@ -150,7 +156,7 @@ const histroyList = ref([]);
const getList = async () => {
loading.value = true;
try {
const res = await listVolumeCatalog(queryParams.value);
const res = await joinList({ type: catalogueId.value, ...queryParams.value });
volumeCatalogList.value = res.rows;
total.value = res.total;
} finally {
@ -203,25 +209,34 @@ const submitForm = () => {
}
});
};
const handleDownload = (row: any) => {
getCheck(row);
getCheck(row, 2);
proxy?.$download.oss(row.fileId);
};
const handleBookFile = (row: any) => {
getCheck(row);
getCheck(row, 1);
};
// 调用查阅接口
const getCheck = async (row) => {
volumeFileViewer({ volumeFileId: row.fileId });
const getCheck = async (row, status) => {
volumeFileViewer({ volumeFileId: row.id, status });
};
const handleViewHis = async (row) => {
viewVisible1.value = true;
let res = await volumeFileViewerList(row.fileId);
let res = await volumeFileViewerList(row.id);
if (res.code == 200) {
histroyList.value = res.rows;
}
};
const currentActive = ref(0);
// 点击事件处理函数
const handleClick = (item, index) => {
console.log(item.id);
currentActive.value = index;
catalogueId.value = item.id;
// 重新获取数据
getList();
};
onMounted(() => {
getList();
});
@ -240,3 +255,99 @@ onUnmounted(() => {
listeningProject();
});
</script>
<style lang="scss">
.drawing {
display: flex;
.el-tabs__header {
height: 90vh !important;
}
.file-category {
width: 200px;
display: flex;
flex-direction: column;
/* 移除固定宽度，让容器根据内容自适应 */
background-color: #ffffff;
padding: 10px;
border-radius: 6px;
/* 限制最大宽度，防止内容过长 */
/* max-width: 200px; */
margin-right: 10px;
}
.file-category > div {
cursor: pointer;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 4px;
display: flex;
/* 文本不换行，确保宽度由内容决定 */
white-space: nowrap;
transition: all 0.2s ease;
> span {
margin-left: 6px;
/* color: #676767;
font-size: 18px; */
}
}
.file-category {
width: 200px;
display: flex;
flex-direction: column;
background-color: #ffffff;
padding: 10px;
border-radius: 8px;
margin-right: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
// 分类项样式优化
.category-item {
cursor: pointer;
padding: 10px 12px;
margin-bottom: 4px;
border-radius: 6px;
display: inline-flex;
align-items: center; /* 垂直居中对齐 */
white-space: nowrap;
transition: all 0.25s ease;
font-size: 14px;
color: #334155;
line-height: 1; /* 确保行高一致 */
&:hover {
background-color: #f1f5f9;
transform: translateX(2px);
}
}
// 图标样式
.folder-icon {
color: #94a3b8;
transition: color 0.25s ease;
}
// 文件夹名称样式
.folder-name {
margin-left: 8px; /* 增加图标与文字间距 */
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 30px); /* 限制最大宽度，防止溢出 */
}
// 活跃状态样式
.category-item.active {
background-color: #eff6ff;
color: #2563eb;
font-weight: 500;
.folder-icon {
color: #2563eb;
}
}
.boxs {
width: calc(100% - 220px);
}
}
</style>