mula
/
unis_sip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(order):优化订单详情合同文件展示逻辑- 调整下载模板按钮样式与交互逻辑- 重构合同文件标签页展示方式 

- 新增当前合同文件与备份文件计算属性
- 完善版本号处理逻辑，确保版本号始终为字符串类型
- 增加canUpdate、uploadFinalFile、updateFile状态控制字段
- 优化文件上传删除权限判断逻辑
- 兼容处理版本号为空的情况，默认设置为1-修复文件列表数据绑定问题，确保响应式更新
dev_1.0.0
chenhao 2025-11-14 10:25:50 +08:00
parent 582f03bff3
commit ec0523cbea
1 changed files with 124 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
oms_web/oms_vue/src/views/project/order/OrderDetail.vue
View File

@ -260,7 +260,9 @@
<div class="col-sm-12">
<div class="tabs-container">
<div class="col-xs-12" style="display: flex; justify-content: flex-end; padding: 5px 20px;" v-if="showFileFlag">
<el-button type="text" icon="el-icon-download" @click="downloadTem" style="margin-bottom: 5px;" :disabled="isOrderApprovedOrInReview">下载模板</el-button>
<el-button type="text" icon="el-icon-download" @click="downloadTem" :disabled="false" style="margin-bottom: 5px;">
下载模板
</el-button>
</div>
<el-tabs v-model="activeContractVersionTab" type="card" v-if="uniqueContractVersions.length > 0">
<el-tab-pane
@ -268,68 +270,75 @@
:key="version"
:label="'版本号Rev.' + version"
:name="version">
<div v-if="groupedContractFiles[version] && groupedContractFiles[version].bakFile" style="display: flex; justify-content: space-between; padding: 5px 20px;">
<h3>历史订单记录</h3>
<span class="file-view" @click="previewFile(groupedContractFiles[version].bakFile.filePath, groupedContractFiles[version].bakFile.fileName)">
{{ form.projectName + 'Rev.' + version }}
</span>
</div>
<div class="panel-body" v-if="showFileFlag">
<h3 style="margin-bottom: 5px">附件信息</h3>
<el-table :data="groupedContractFiles[version] ? groupedContractFiles[version].files : []" style="width: 100%;
def-border-radius: 8px;
overflow: hidden;
margin-top: 10px;">
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="类型" width="150">
<template slot-scope="scope">
{{ scope.$index + 1 == 1 ? '商务折扣审批' : scope.$index + 1 == 2 ? '合同' : '补充附件' }}
</template>
</el-table-column>
<el-table-column label="附件名称">
<template slot-scope="scope">
<span v-if="scope.row.id !== -1">{{ scope.row.fileName }}</span>
<span v-else>{{ file_log_arr[scope.$index] }}</span>
</template>
</el-table-column>
<el-table-column label="上传人" prop="uploadUserName" width="120"></el-table-column>
<el-table-column label="上传时间" prop="uploadTime" width="180"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
v-if="scope.row.id === -1 && ((form.canUpdate && scope.row.fileSort !== '3') || (form.uploadFinalFile && scope.row.fileSort === '3'))"
type="text"
icon="el-icon-upload"
@click="importList(scope.$index)"
:disabled="isOrderApprovedOrInReview"
>上传</el-button>
<el-button
v-if="scope.row.id !== -1"
type="text"
icon="el-icon-view"
@click="previewFile(scope.row.filePath, scope.row.fileName)"
>预览</el-button>
<el-button
v-if="scope.row.id !== -1"
type="text"
icon="el-icon-download"
@click="downFile(scope.row.filePath, scope.row.fileName)"
>下载</el-button>
<el-button
v-if="scope.row.id !== -1 && version == form.versionCode && ((form.canUpdate && scope.row.fileSort !== '3') || (form.uploadFinalFile && scope.row.fileSort === '3'))"
type="text"
icon="el-icon-delete"
@click="delUploadRow(scope.$index, scope.row.id)"
:disabled="isOrderApprovedOrInReview"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
<div v-if="uniqueContractVersions.length > 0">
<div v-if="currentContractBakFile"
style="display: flex; justify-content: space-between; padding: 5px 20px;">
<h3>历史订单记录</h3>
<span class="file-view"
@click="previewFile(currentContractBakFile.filePath, currentContractBakFile.fileName)">
{{ form.projectName + 'Rev.' + activeContractVersionTab }}
</span>
</div>
<div class="panel-body" v-if="showFileFlag">
<h3 style="margin-bottom: 5px">附件信息</h3>
<el-table :data="currentContractFiles" style="width: 100%;def-border-radius: 8px;overflow: hidden;margin-top: 10px;">
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="类型" width="150">
<template slot-scope="scope">
{{ scope.$index + 1 == 1 ? '商务折扣审批' : scope.$index + 1 == 2 ? '合同' : '补充附件' }}
</template>
</el-table-column>
<el-table-column label="附件名称">
<template slot-scope="scope">
<span v-if="scope.row.id !== -1">{{ scope.row.fileName }}</span>
<span v-else>{{ file_log_arr[scope.$index] }}</span>
</template>
</el-table-column>
<el-table-column label="上传人" prop="uploadUserName" width="120"></el-table-column>
<el-table-column label="上传时间" prop="uploadTime" width="180"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
v-if="scope.row.id === -1 && ((canUpdate && scope.row.fileSort !== '3') || (uploadFinalFile && scope.row.fileSort === '3'))"
type="text"
icon="el-icon-upload"
@click="importList(scope.$index)"
:disabled="isOrderApprovedOrInReview"
>上传
</el-button>
<el-button
v-if="scope.row.id !== -1"
type="text"
icon="el-icon-view"
:disabled="false"
@click="previewFile(scope.row.filePath, scope.row.fileName)"
>预览
</el-button>
<el-button
v-if="scope.row.id !== -1"
type="text"
icon="el-icon-download"
:disabled="false"
@click="downFile(scope.row.filePath, scope.row.fileName)"
>下载
</el-button>
<el-button
v-if="scope.row.id !== -1 && activeContractVersionTab == form.versionCode && ((canUpdate && scope.row.fileSort !== '3') || (uploadFinalFile && scope.row.fileSort === '3'))"
type="text"
icon="el-icon-delete"
@click="delUploadRow(scope.$index, scope.row.id)"
:disabled="isOrderApprovedOrInReview"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div v-else>暂无合同信息数据。</div>
</div>
</div>
@ -411,6 +420,9 @@ export default {
selectCustomerVisible: false,
selectPartnerVisible: false,
selectUserVisible: false,
canUpdate: false, // 新增 canUpdate 属性
uploadFinalFile: false, // 新增 uploadFinalFile 属性
updateFile: false, // 新增 updateFile 属性
// 当前激活的Tab
activeTab: 'basic',
// 字典数据
@ -477,12 +489,20 @@ export default {
uniqueContractVersions() {
const versions = new Set();
if (this.form.contractTableData) {
Object.keys(this.form.contractTableData).forEach(version => versions.add(version));
Object.keys(this.form.contractTableData).forEach(version => {
if (version) versions.add(String(version));
});
}
if (this.orderBakFile) {
Object.keys(this.orderBakFile).forEach(version => versions.add(version));
Object.keys(this.orderBakFile).forEach(version => {
if (version) versions.add(String(version));
});
}
return Array.from(versions).sort((a, b) => b - a); // 降序排列版本号
// 确保当前版本号始终存在
if (this.form.versionCode) {
versions.add(String(this.form.versionCode));
}
return Array.from(versions).sort((a, b) => Number(b) - Number(a)); // 降序排列版本号
},
groupedContractFiles() {
const grouped = {};
@ -503,6 +523,18 @@ export default {
}
}
return grouped;
},
currentContractFiles() {
if (!this.activeContractVersionTab || !this.groupedContractFiles[this.activeContractVersionTab]) {
return [];
}
return this.groupedContractFiles[this.activeContractVersionTab].files;
},
currentContractBakFile() {
if (!this.activeContractVersionTab || !this.groupedContractFiles[this.activeContractVersionTab]) {
return null;
}
return this.groupedContractFiles[this.activeContractVersionTab].bakFile;
}
},
watch: {
@ -563,15 +595,37 @@ export default {
if (this.isEdit) {
getOrder(this.orderId).then(response => {
this.form = response.data.projectOrderInfo;
// 兼容版本号为空的情况
if (!this.form.versionCode) {
this.form.versionCode = 1;
}
this.approveLogList=response.data.approveLog;
this.orderBakFile = response.data.orderBakFile || {};
this.showFileFlag = response.data.showFileFlag || false;
this.canUpdate = response.data.canUpdate || false; // 从 response.data 获取
this.uploadFinalFile = response.data.uploadFinalFile || false; // 从 response.data 获取
this.updateFile = response.data.updateFile || false; // 从 response.data 获取
// 如果合同信息为空，则手动构造一个空的结构
if (!this.form.contractTableData) {
this.form.contractTableData = {
[this.form.versionCode]: []
};
const files = this.form.contractTableData[this.form.versionCode];
const placeholders = ['商务折扣审批', '合同', '补充附件'];
if (this.form.uploadFinalFile) {
placeholders.push('已盖章合同');
}
placeholders.forEach((_, index) => {
files.push({id: -1, fileSort: index});
});
}
if (this.uniqueVersions.length > 0) {
this.activeVersionTab = this.uniqueVersions[0]; // 默认显示最新版本
this.activeVersionTab = String(this.uniqueVersions[0]); // 默认显示最新版本
}
if (this.uniqueContractVersions.length > 0) {
this.activeContractVersionTab = this.uniqueContractVersions[0]; // 默认显示最新合同版本
this.activeContractVersionTab = String(this.uniqueContractVersions[0]); // 默认显示最新合同版本
}
// 手动触发联动
this.handleBgChange(this.form.bgProperty);
@ -807,10 +861,10 @@ export default {
},
addFile(data) {
const sortNum = data.fileSort;
if (!this.groupedContractFiles[this.form.versionCode]) {
this.$set(this.groupedContractFiles, this.form.versionCode, { files: [], bakFile: null });
if (!this.groupedContractFiles[String(this.form.versionCode)]) {
this.$set(this.groupedContractFiles, String(this.form.versionCode), {files: [], bakFile: null});
}
const currentVersionFiles = this.groupedContractFiles[this.form.versionCode].files;
const currentVersionFiles = this.groupedContractFiles[String(this.form.versionCode)].files;
const fileIndex = currentVersionFiles.findIndex(file => file.fileSort === sortNum);
if (fileIndex !== -1) {
@ -824,7 +878,7 @@ export default {
delContractFile(id).then(() => {
this.$modal.msgSuccess("删除成功");
// 找到当前版本的文件列表并更新
const currentVersionFiles = this.groupedContractFiles[this.activeContractVersionTab].files;
const currentVersionFiles = this.groupedContractFiles[String(this.activeContractVersionTab)].files;
const fileIndex = currentVersionFiles.findIndex(file => file.id === id);
if (fileIndex !== -1) {
this.$set(currentVersionFiles, fileIndex, {