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

refactor(volumeCatalog): 优化卷册目录页面布局和功能

Browse Source 
- 调整表格列布局，增加文件数量徽章
- 优化导入按钮位置和样式
- 改进查看文件列表对话框，统一操作按钮样式
- 调整上传图纸和意见的组件样式
- 优化表格样式，增加对齐方式
This commit is contained in:
tcy
2025-09-06 15:09:47 +08:00
parent 8a3f338e27
commit d37243af6b
2 changed files with 71 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/views/design/volumeCatalog/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="p-2 volumeCatalog">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
@ -11,7 +12,8 @@
<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 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>
@ -23,23 +25,16 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['design:volumeCatalog:add']">新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd"
v-hasPermi="['design:volumeCatalog:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<file-upload
v-model="form.file"
isImportInfo
:isShowTip="false"
uploadUrl="/design/volumeCatalog/importData"
:limit="1"
:fileType="['xlsx', 'xls']"
:data="{
<file-upload v-model="form.file" isImportInfo :isShowTip="false"
uploadUrl="/design/volumeCatalog/importData" :limit="1" :fileType="['xlsx', 'xls']" :data="{
projectId: currentProject?.id
}"
:file-size="50"
:onUploadSuccess="handleUploadSuccess"
>
<el-button v-hasPermi="['design:volumeCatalog:importData']" type="warning" plain icon="Upload">导入</el-button>
}" :file-size="50" :onUploadSuccess="handleUploadSuccess">
<el-button v-hasPermi="['design:volumeCatalog:importData']" type="warning" plain
icon="Upload">导入</el-button>
</file-upload>
</el-col>
<el-col :span="1.5">
@ -65,9 +60,10 @@
<el-table-column label="计划出图时间" align="center" prop="plannedCompletion" width="200" />
<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:volumeCatalog:listFile']"
>查看文件</el-button
>
<el-button link type="primary" icon="View" @click="handleView(scope.row)"
v-hasPermi="['design:volumeCatalog:listFile']">查看文件</el-button>
<el-badge v-if="scope.row.fileCount" :value="scope.row.fileCount" class="item" type="danger">
</el-badge>
</template>
</el-table-column>
<el-table-column label="外部意见" align="center">
@ -79,23 +75,18 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" fixed="right" width="200">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['design:volumeFile:edit']">修改</el-button>
<el-button
link
type="primary"
icon="Upload"
@click="handleUpload(scope.row)"
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['design:volumeFile:edit']">修改</el-button>
<el-button link type="primary" icon="Upload" @click="handleUpload(scope.row)"
v-if="scope.row.auditStatus == 'draft' || scope.row.auditStatus == 'back'"
v-hasPermi="['design:volumeFile:add']"
>上传图纸</el-button
>
<el-button link type="primary" v-hasPermi="['design:volumeFile:edit']" icon="Upload" @click="handleOpinion(scope.row)"
>外部意见</el-button
>
v-hasPermi="['design:volumeFile:add']">上传图纸</el-button>
<el-button link type="primary" v-hasPermi="['design:volumeFile:edit']" icon="Upload"
@click="handleOpinion(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" />
<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="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@ -105,17 +96,15 @@
</el-form-item>
<el-form-item label="专业" prop="specialty">
<el-select v-model="form.specialty" placeholder="请选择专业" @change="changeSpecialty">
<el-option :value="item.userMajor" v-for="item in des_user_major" :key="item.userMajor" :label="item.userMajorName" />
<el-option :value="item.userMajor" v-for="item in des_user_major" :key="item.userMajor"
:label="item.userMajorName" />
</el-select>
</el-form-item>
<el-form-item label="设计人员" prop="principal">
<el-select
:disabled="!form.specialty"
v-model="form.principal"
placeholder="请选择设计人员"
class="transition-all duration-300 border-gray-300"
>
<el-option v-for="item in userAppList" :key="item.userId" :label="item.userName" :value="item.userId.toString()" />
<el-select :disabled="!form.specialty" v-model="form.principal" placeholder="请选择设计人员"
class="transition-all duration-300 border-gray-300">
<el-option v-for="item in userAppList" :key="item.userId" :label="item.userName"
:value="item.userId.toString()" />
</el-select>
</el-form-item>
<!-- <el-form-item label="设计状态" prop="designState">
@ -124,7 +113,8 @@
</el-select>
</el-form-item> -->
<el-form-item label="计划出图时间" prop="plannedCompletion">
<el-date-picker v-model="form.plannedCompletion" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划出图时间" />
<el-date-picker v-model="form.plannedCompletion" type="date" value-format="YYYY-MM-DD"
placeholder="请选择计划出图时间" />
</el-form-item>
<el-form-item label="卷册号" prop="volumeNumber">
<el-input v-model="form.volumeNumber" placeholder="请输入卷册号" />
@ -146,15 +136,16 @@
<el-dialog draggable title="上传图纸文件" v-model="uploadVisible" width="500px" append-to-body>
<el-form :model="uploadForm" label-width="80px" :inline="false">
<el-form-item label="图纸类型" prop="type">
<el-select v-model="uploadForm.type" placeholder="请选择图纸类型"
><el-option label="过程图纸" value="1" /><el-option label="蓝图" value="3"
/></el-select>
<el-select v-model="uploadForm.type" placeholder="请选择图纸类型"><el-option label="过程图纸" value="1" /><el-option
label="蓝图" value="3" /></el-select>
</el-form-item>
<el-form-item v-if="uploadForm.type == '3'" label="蓝图" prop="fileIds">
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.fileIds"></file-upload>
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100"
v-model="uploadForm.fileIds"></file-upload>
</el-form-item>
<el-form-item v-if="uploadForm.type == '1'" label="过程图纸" prop="cancellationIds">
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.cancellationIds"></file-upload>
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100"
v-model="uploadForm.cancellationIds"></file-upload>
</el-form-item>
</el-form>
<span style="font-size: 12px; color: #999999">注意:请上传pdf格式文件</span>
@ -166,60 +157,41 @@
<!-- 查看文件列表 -->
<el-dialog draggable title="图纸列表" v-model="viewVisible" width="1000px">
<el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="蓝图" name="3"
><TableContent :data="fileList" :wf-business-status="wf_business_status">
<el-tab-pane label="蓝图" name="3">
<TableContent :data="fileList" :wf-business-status="wf_business_status">
<template #operation="{ row }">
<el-button
link
type="primary"
icon="edit"
@click="handleAuditLantu(row)"
v-if="(row.status != '2' && row.auditStatus == 'draft') || row.auditStatus == 'back'"
>审核</el-button
>
<el-button link type="primary" icon="View" v-if="row.status != '2' && row.auditStatus != 'draft'" @click="handleAuditViewLantu(row)"
>查看流程</el-button
>
<el-button link type="primary" icon="edit" @click="handleAuditLantu(row)"
v-if="(row.status != '2' && row.auditStatus == 'draft') || row.auditStatus == 'back'">审核</el-button>
<el-button link type="primary" icon="View" v-if="row.status != '2' && row.auditStatus != 'draft'"
@click="handleAuditViewLantu(row)">查看流程</el-button>
<el-button type="danger" link icon="Download" @click="handleDownload(row)"> 下载 </el-button>
<el-button
type="warning"
link
icon="View"
<el-button type="warning" link icon="View"
v-if="(row.status != '2' && row.auditStatus == 'back') || row.auditStatus == 'termination' || row.auditStatus == 'finish'"
@click="handleViewHistory(row)"
>查看单据</el-button
>
@click="handleViewHistory(row)">查看单据</el-button>
</template>
</TableContent></el-tab-pane
>
<el-tab-pane label="过程图纸 " name="1"
><TableContent :data="fileList" :wf-business-status="wf_business_status">
</TableContent>
</el-tab-pane>
<el-tab-pane label="过程图纸 " name="1">
<TableContent :data="fileList" :wf-business-status="wf_business_status">
<template #operation="{ row }">
<el-button link type="primary" icon="edit" @click="handleAudit(row)" v-if="row.auditStatus == 'draft' || row.auditStatus == 'back'"
>审核</el-button
>
<el-button link type="primary" icon="View" v-if="row.status != '2' && row.auditStatus != 'draft'" @click="handleAuditView(row)"
>查看流程</el-button
>
<el-button link type="primary" icon="edit" @click="handleAudit(row)"
v-if="row.auditStatus == 'draft' || row.auditStatus == 'back'">审核</el-button>
<el-button link type="primary" icon="View" v-if="row.status != '2' && row.auditStatus != 'draft'"
@click="handleAuditView(row)">查看流程</el-button>
<el-button type="danger" link icon="Download" @click="handleDownload(row)"> 下载 </el-button>
<el-button
type="warning"
link
icon="View"
<el-button type="warning" link icon="View"
v-if="row.auditStatus == 'back' || row.auditStatus == 'termination' || row.auditStatus == 'finish'"
@click="handleViewHistory(row)"
>查看单据</el-button
>
@click="handleViewHistory(row)">查看单据</el-button>
</template>
</TableContent></el-tab-pane
>
<el-tab-pane label="作废 " name="4"
><TableContent :data="fileList" :wf-business-status="wf_business_status">
</TableContent>
</el-tab-pane>
<el-tab-pane label="作废 " name="4">
<TableContent :data="fileList" :wf-business-status="wf_business_status">
<template #operation="{ row }">
<el-button type="danger" link icon="Download" @click="handleDownload(row)"> 下载 </el-button>
</template>
</TableContent></el-tab-pane
>
</TableContent>
</el-tab-pane>
</el-tabs>
<template #footer>
<span>
@ -233,7 +205,8 @@
<el-dialog draggable title="上传外部意见" v-model="uploadOpinionVisible" width="500px" append-to-body>
<el-form :model="updateRow" label-width="80px" :inline="false">
<el-form-item label="外部意见">
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" :onUploadSuccess="onUploadSuccess" v-model="opinion"></file-upload>
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" :onUploadSuccess="onUploadSuccess"
v-model="opinion"></file-upload>
</el-form-item>
</el-form>
<span style="font-size: 12px; color: #999999">注意:请上传pdf格式文件</span>
@ -677,6 +650,7 @@ onUnmounted(() => {
</script>
<style lang="scss">
.volumeCatalog_box {
/* .upload-demo {
width: 100% !important;
} */
@ -684,6 +658,7 @@ onUnmounted(() => {
border-collapse: collapse; //合并为一个单一的边框
border-color: rgba(199, 199, 199, 1); //边框颜色按实际自定义即可
}
thead {
tr {
th {
@ -693,16 +668,19 @@ onUnmounted(() => {
letter-spacing: 5px;
padding: 15px;
}
td {
text-align: left;
height: 35px; //设置单元格最小高度
padding: 15px;
}
.th-bg {
background-color: rgba(247, 247, 247, 1);
}
}
}
tbody {
tr {
td {
@ -710,6 +688,7 @@ onUnmounted(() => {
height: 40px; //设置单元格最小高度
padding: 15px;
}
th {
height: 35px; //设置单元格最小高度
text-align: center;
@ -718,6 +697,7 @@ onUnmounted(() => {
}
}
}
.table-content {
box-shadow: 0px 0px 10px #ddd;
padding: 20px;