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

2
.env.development
View File

@ -6,7 +6,7 @@ VITE_APP_ENV = 'development'
# 开发环境 # 开发环境
# 李陈杰 209 # 李陈杰 209
VITE_APP_BASE_API = 'http://192.168.110.188:8899' VITE_APP_BASE_API = 'http://192.168.110.210:8899'
# 曾涛 # 曾涛
# VITE_APP_BASE_API = 'http://192.168.110.180:8899' # VITE_APP_BASE_API = 'http://192.168.110.180:8899'
# 罗成 # 罗成

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

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