feat(approve):优化审批页面结构和数据获取逻辑

- 调整附件信息和流转过程标签页的位置
- 将审批页脚信息移入布局组件内
- 合并导入语句并调整API调用路径
- 更新订单详情弹窗标题生成逻辑
- 添加合同备份文件数据字段
-修复订单标题显示问题
master
chenhao 2025-11-20 16:41:03 +08:00
parent 6633a09861
commit 7a07fae8f9
4 changed files with 81 additions and 70 deletions

View File

@ -18,3 +18,10 @@ export function approveOrder(data) {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
}) })
} }
// 查询订单管理详细信息
export function getOrder(id) {
return request({
url: '/project/order/h5/approve/' + id,
method: 'get'
})
}

View File

@ -12,7 +12,7 @@ export function listOrder(query) {
// 查询订单管理详细信息 // 查询订单管理详细信息
export function getOrder(id) { export function getOrder(id) {
return request({ return request({
url: '/project/order/h5/approve/' + id, url: '/project/order/vue/' + id,
method: 'get' method: 'get'
}) })
} }

View File

@ -24,76 +24,74 @@
@tax-rate-change="handleTaxRateChange" @tax-rate-change="handleTaxRateChange"
class="mb20" class="mb20"
/> />
<!-- Tab页附件信息和流转过程 -->
<el-tabs v-model="activeTab" class="approve-tabs">
<el-tab-pane v-if="order.processTemplate !== '1'" label="附件信息" name="attachment">
<el-table :data="attachmentList" border>
<el-table-column label="附件类型" align="center" width="150">
<template slot-scope="scope">
{{ getAttachmentType(scope.$index) }}
</template>
</el-table-column>
<el-table-column label="附件名称" align="center" prop="fileName" />
<el-table-column label="上传人" align="center" prop="uploadUserName" width="120" />
<el-table-column label="上传时间" align="center" width="180">
<template slot-scope="scope">
{{ formatDate(scope.row.uploadTime) }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150">
<template slot-scope="scope">
<el-button
v-if="scope.row.id && scope.row.id !== -1"
size="mini"
type="text"
@click="previewFile(scope.row)"
>预览</el-button>
<el-button
v-if="scope.row.id && scope.row.id !== -1"
size="mini"
type="text"
@click="downloadFile(scope.row)"
>下载</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="流转过程" name="process">
<div class="process-container">
<el-tabs v-model="activeVersionTab" type="card" v-if="uniqueVersions.length > 0">
<el-tab-pane
v-for="version in uniqueVersions"
:key="version"
:label="'版本号Rev.' + version"
:name="version">
<el-timeline>
<el-timeline-item
v-for="log in groupedApproveLogs[version]"
:key="log.id"
:timestamp="log.approveTime"
placement="top">
<el-card>
<h4>{{ log.approveOpinion }}</h4>
<p><b>操作人:</b> {{ log.approveUserName }} ({{ log.roleName }})</p>
<p><b>接收人:</b> {{ getReceiverName(log) }}</p>
<p><b>审批状态:</b> <el-tag :type="getStatusTagType(log.approveStatus)" size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
</el-card>
</el-timeline-item>
</el-timeline>
</el-tab-pane>
</el-tabs>
<div v-else></div>
</div>
</el-tab-pane>
</el-tabs>
</template> </template>
<template #footer> <template #footer>
<p>{{ order.projectCode }}-{{ order.orderCode }}-Rev.{{ order.versionCode }}</p> <p>{{ order.projectCode }}-{{ order.orderCode }}-Rev.{{ order.versionCode }}</p>
</template> </template>
</ApproveLayout> </ApproveLayout>
<!-- Tab页附件信息和流转过程 -->
<el-tabs v-model="activeTab" class="approve-tabs">
<el-tab-pane v-if="order.processTemplate !== '1'" label="附件信息" name="attachment">
<el-table :data="attachmentList" border>
<el-table-column label="附件类型" align="center" width="150">
<template slot-scope="scope">
{{ getAttachmentType(scope.$index) }}
</template>
</el-table-column>
<el-table-column label="附件名称" align="center" prop="fileName" />
<el-table-column label="上传人" align="center" prop="uploadUserName" width="120" />
<el-table-column label="上传时间" align="center" width="180">
<template slot-scope="scope">
{{ formatDate(scope.row.uploadTime) }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150">
<template slot-scope="scope">
<el-button
v-if="scope.row.id && scope.row.id !== -1"
size="mini"
type="text"
@click="previewFile(scope.row)"
>预览</el-button>
<el-button
v-if="scope.row.id && scope.row.id !== -1"
size="mini"
type="text"
@click="downloadFile(scope.row)"
>下载</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="流转过程" name="process">
<div class="process-container">
<el-tabs v-model="activeVersionTab" type="card" v-if="uniqueVersions.length > 0">
<el-tab-pane
v-for="version in uniqueVersions"
:key="version"
:label="'版本号Rev.' + version"
:name="version">
<el-timeline>
<el-timeline-item
v-for="log in groupedApproveLogs[version]"
:key="log.id"
:timestamp="log.approveTime"
placement="top">
<el-card>
<h4>{{ log.approveOpinion }}</h4>
<p><b>操作人:</b> {{ log.approveUserName }} ({{ log.roleName }})</p>
<p><b>接收人:</b> {{ getReceiverName(log) }}</p>
<p><b>审批状态:</b> <el-tag :type="getStatusTagType(log.approveStatus)" size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
</el-card>
</el-timeline-item>
</el-timeline>
</el-tab-pane>
</el-tabs>
<div v-else></div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 审批意见弹窗 --> <!-- 审批意见弹窗 -->
<el-dialog <el-dialog
:title="dialogTitle" :title="dialogTitle"
@ -123,8 +121,7 @@
</template> </template>
<script> <script>
import { getOrder } from "@/api/project/order"; import { approveOrder,getOrder } from "@/api/approve/order";
import { approveOrder } from "@/api/approve/order";
import ConfigInfo from './ConfigInfo.vue'; import ConfigInfo from './ConfigInfo.vue';
import ApproveLayout from '@/views/approve/ApproveLayout.vue'; import ApproveLayout from '@/views/approve/ApproveLayout.vue';

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<!-- 添加或修改订单管理对话框 --> <!-- 添加或修改订单管理对话框 -->
<el-dialog :title="title" :visible.sync="internalVisible" width="1400px" append-to-body @close="handleClose"> <el-dialog :title="dialogTitle" :visible.sync="internalVisible" width="1400px" append-to-body @close="handleClose">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isOrderApprovedOrInReview"> <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isOrderApprovedOrInReview">
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
<el-tab-pane label="基础信息" name="basic"> <el-tab-pane label="基础信息" name="basic">
@ -205,6 +205,7 @@ export default {
// //
form: {}, form: {},
approveLogList: [], approveLogList: [],
orderBakFile: {}, //
activeVersionTab: null, activeVersionTab: null,
activeContractVersionTab: null, // Tab activeContractVersionTab: null, // Tab
showFileFlag: false, // showFileFlag: false, //
@ -251,6 +252,14 @@ export default {
}; };
}, },
computed: { computed: {
dialogTitle() {
// If form has data, generate title from form data
if (this.form.projectName && this.form.versionCode) {
return this.form.projectName + "Rev." + this.form.versionCode;
}
// Otherwise use the prop value
return this.title;
},
isEdit() { isEdit() {
return this.orderId != null; return this.orderId != null;
}, },
@ -345,7 +354,6 @@ export default {
if (this.isEdit) { if (this.isEdit) {
getOrder(this.orderId).then(response => { getOrder(this.orderId).then(response => {
this.form = {...response.data.projectOrderInfo}; this.form = {...response.data.projectOrderInfo};
this.title = this.form.projectName + "Rev." + this.form.versionCode;
this.isProjectSelected = true; this.isProjectSelected = true;
if (!this.form.versionCode) this.form.versionCode = 1; if (!this.form.versionCode) this.form.versionCode = 1;
this.approveLogList = response.data.approveLog; this.approveLogList = response.data.approveLog;
@ -432,7 +440,6 @@ export default {
if (this.isEdit) { if (this.isEdit) {
this.form.id = response.data.id; this.form.id = response.data.id;
this.isEdit = true; this.isEdit = true;
this.title = "修改订单";
this.activeTab = 'contract'; this.activeTab = 'contract';
this.$emit('success'); this.$emit('success');
} else { } else {