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

- 调整附件信息和流转过程标签页的位置
- 将审批页脚信息移入布局组件内
- 合并导入语句并调整API调用路径
- 更新订单详情弹窗标题生成逻辑
- 添加合同备份文件数据字段
-修复订单标题显示问题
dev_1.0.0
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' }
})
}
// 查询订单管理详细信息
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) {
return request({
url: '/project/order/h5/approve/' + id,
url: '/project/order/vue/' + id,
method: 'get'
})
}

View File

@ -24,76 +24,74 @@
@tax-rate-change="handleTaxRateChange"
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 #footer>
<p>{{ order.projectCode }}-{{ order.orderCode }}-Rev.{{ order.versionCode }}</p>
</template>
</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
:title="dialogTitle"
@ -123,8 +121,7 @@
</template>
<script>
import { getOrder } from "@/api/project/order";
import { approveOrder } from "@/api/approve/order";
import { approveOrder,getOrder } from "@/api/approve/order";
import ConfigInfo from './ConfigInfo.vue';
import ApproveLayout from '@/views/approve/ApproveLayout.vue';

View File

@ -1,7 +1,7 @@
<template>
<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-tabs v-model="activeTab">
<el-tab-pane label="基础信息" name="basic">
@ -205,6 +205,7 @@ export default {
//
form: {},
approveLogList: [],
orderBakFile: {}, //
activeVersionTab: null,
activeContractVersionTab: null, // Tab
showFileFlag: false, //
@ -251,6 +252,14 @@ export default {
};
},
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() {
return this.orderId != null;
},
@ -345,7 +354,6 @@ export default {
if (this.isEdit) {
getOrder(this.orderId).then(response => {
this.form = {...response.data.projectOrderInfo};
this.title = this.form.projectName + "Rev." + this.form.versionCode;
this.isProjectSelected = true;
if (!this.form.versionCode) this.form.versionCode = 1;
this.approveLogList = response.data.approveLog;
@ -432,7 +440,6 @@ export default {
if (this.isEdit) {
this.form.id = response.data.id;
this.isEdit = true;
this.title = "修改订单";
this.activeTab = 'contract';
this.$emit('success');
} else {