修复销售合同编辑崩溃问题
This commit is contained in:
wangchengming
parent
7a7d550a77
commit
48c82bbcef
|
|
@ -43,140 +43,249 @@
|
||||||
|
|
||||||
<!-- 媒体信息开始 -->
|
<!-- 媒体信息开始 -->
|
||||||
<template #purchaseMediaBoList>
|
<template #purchaseMediaBoList>
|
||||||
<el-edit-table :columns="mediaListColumns" :value="mediaTableData" show-summary
|
<div class="table-container">
|
||||||
:summary-method="mediaTypeSummary" @update-items="updateItemsPurchaseMediaBoList" :key="'media-table'">
|
<el-table
|
||||||
<!-- 城市选择开始 -->
|
:data="visibleMediaData"
|
||||||
<template #cityId="{ record, isEdit }">
|
:key="'media-table-' + tableKey"
|
||||||
<el-custom-cascader v-model="record.cityIds" :dataSource="cityList" :cascaderStyle="{ width: '100%' }"
|
style="width: 100%"
|
||||||
@change="(v, t) => { record.cityId = v; record.cityName = t; }" />
|
height="400"
|
||||||
</template>
|
show-summary
|
||||||
<!-- 城市选择结束 -->
|
:summary-method="mediaTypeSummary"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-for="column in mediaListColumns"
|
||||||
|
:key="column.dataIndex"
|
||||||
|
:prop="column.dataIndex"
|
||||||
|
:label="column.title"
|
||||||
|
:width="column.width"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<template v-if="column.slot">
|
||||||
|
<!-- 城市选择 -->
|
||||||
|
<template v-if="column.dataIndex === 'cityId'">
|
||||||
|
<el-custom-cascader
|
||||||
|
v-model="scope.row.cityIds"
|
||||||
|
:dataSource="cityList"
|
||||||
|
:cascaderStyle="{ width: '100%' }"
|
||||||
|
@change="(v, t) => { scope.row.cityId = v; scope.row.cityName = t; }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 媒体类型开始 -->
|
<!-- 媒体类型 -->
|
||||||
<template #mediaId="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'mediaId'">
|
||||||
<el-custom-select v-model="record.mediaId" :dataSource="mediaTypeList" :remoteAdd="handleAddMediaTypeParty"
|
<el-custom-select
|
||||||
@change="(v, t) => (record.mediaName = t)" />
|
v-model="scope.row.mediaId"
|
||||||
</template>
|
:dataSource="mediaTypeList"
|
||||||
<!-- 媒体类型结束 -->
|
:remoteAdd="handleAddMediaTypeParty"
|
||||||
|
@change="(v, t) => (scope.row.mediaName = t)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 上刊时间开始 -->
|
<!-- 上刊时间 -->
|
||||||
<template #upTime="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'upTime'">
|
||||||
<el-date-picker v-model="record.upTime" value-format="yyyy-MM-dd" style="width: 100%" />
|
<el-date-picker
|
||||||
</template>
|
v-model="scope.row.upTime"
|
||||||
<!-- 上刊时间结束 -->
|
value-format="yyyy-MM-dd"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 下刊时间开始 -->
|
<!-- 下刊时间 -->
|
||||||
<template #downTime="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'downTime'">
|
||||||
<el-date-picker v-model="record.downTime" value-format="yyyy-MM-dd" style="width: 100%" />
|
<el-date-picker
|
||||||
</template>
|
v-model="scope.row.downTime"
|
||||||
<!-- 下刊时间结束 -->
|
value-format="yyyy-MM-dd"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 周期开始 -->
|
<!-- 周期 -->
|
||||||
<template #period="{ record }">
|
<template v-else-if="column.dataIndex === 'period'">
|
||||||
{{ delayPeriodDate(record) }}
|
{{ delayPeriodDate(scope.row) }}
|
||||||
</template>
|
</template>
|
||||||
<!-- 周期结束 -->
|
|
||||||
|
|
||||||
<!-- 折扣开始 -->
|
<!-- 折扣 -->
|
||||||
<template #discount="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'discount'">
|
||||||
<div class="flexRowCenter">
|
<div class="flexRowCenter">
|
||||||
<el-input v-model="record.discount" @change="handleNumberChange(record.discount, $event)"></el-input>
|
<el-input
|
||||||
</div>
|
v-model="scope.row.discount"
|
||||||
</template>
|
@change="handleNumberChange(scope.row.discount, $event)"
|
||||||
<!-- 折扣结束 -->
|
></el-input>
|
||||||
</el-edit-table>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 默认显示 -->
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[column.dataIndex] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[column.dataIndex] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="操作" width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="danger" @click="removeMediaRow(scope.$index)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="table-actions">
|
||||||
|
<el-button type="primary" @click="addMediaRow">新增媒体</el-button>
|
||||||
|
<el-pagination
|
||||||
|
v-if="mediaTableData.length > pageSize"
|
||||||
|
small
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="mediaTableData.length"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:current-page="mediaCurrentPage"
|
||||||
|
@current-change="handleMediaPageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 媒体信息结束 -->
|
<!-- 媒体信息结束 -->
|
||||||
|
|
||||||
<!-- 付款管理开始 -->
|
<!-- 付款管理开始 -->
|
||||||
<template #purchasePaymentBoList>
|
<template #purchasePaymentBoList>
|
||||||
<el-edit-table :columns="contranctPayListColumns" :value="paymentTableData" show-summary
|
<div class="table-container">
|
||||||
:summary-method="paymentSummary" @update-items="updateItemsPurchasePaymentBoList" :key="'payment-table'">
|
<el-table
|
||||||
<!-- 笔数开始 -->
|
:data="visiblePaymentData"
|
||||||
<template #transactionsNumber="{ record, isEdit }">
|
:key="'payment-table-' + tableKey"
|
||||||
<el-select v-model="record.transactionsNumber" style="width: 100%;">
|
style="width: 100%"
|
||||||
<el-option value="第1笔" label="第1笔"></el-option>
|
height="400"
|
||||||
<el-option value="第2笔" label="第2笔"></el-option>
|
show-summary
|
||||||
<el-option value="第3笔" label="第3笔"></el-option>
|
:summary-method="paymentSummary"
|
||||||
<el-option value="第4笔" label="第4笔"></el-option>
|
>
|
||||||
<el-option value="第5笔" label="第5笔"></el-option>
|
<el-table-column
|
||||||
</el-select>
|
v-for="column in contranctPayListColumns"
|
||||||
</template>
|
:key="column.dataIndex"
|
||||||
<!-- 笔数结束 -->
|
:prop="column.dataIndex"
|
||||||
|
:label="column.title"
|
||||||
|
:width="column.width"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<template v-if="column.slot">
|
||||||
|
<!-- 笔数 -->
|
||||||
|
<template v-if="column.dataIndex === 'transactionsNumber'">
|
||||||
|
<el-select v-model="scope.row.transactionsNumber" style="width: 100%;">
|
||||||
|
<el-option value="第1笔" label="第1笔"></el-option>
|
||||||
|
<el-option value="第2笔" label="第2笔"></el-option>
|
||||||
|
<el-option value="第3笔" label="第3笔"></el-option>
|
||||||
|
<el-option value="第4笔" label="第4笔"></el-option>
|
||||||
|
<el-option value="第5笔" label="第5笔"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 约定付款时间开始 -->
|
<!-- 约定付款时间 -->
|
||||||
<template #payTime="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'payTime'">
|
||||||
<el-date-picker v-model="record.payTime" value-format="yyyy-MM-dd" style="width: 100%" />
|
<el-date-picker
|
||||||
</template>
|
v-model="scope.row.payTime"
|
||||||
<!-- 约定付款时间结束 -->
|
value-format="yyyy-MM-dd"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 实际付款时间开始 -->
|
<!-- 实际付款时间 -->
|
||||||
<template #arrivalTime="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'arrivalTime'">
|
||||||
<el-date-picker v-model="record.arrivalTime" value-format="yyyy-MM-dd" style="width: 100%" />
|
<el-date-picker
|
||||||
</template>
|
v-model="scope.row.arrivalTime"
|
||||||
<!-- 实际付款时间结束 -->
|
value-format="yyyy-MM-dd"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 是否逾期开始 -->
|
<!-- 是否逾期 -->
|
||||||
<template #isOverdue="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'isOverdue'">
|
||||||
<el-select v-model="record.isOverdue">
|
<el-select v-model="scope.row.isOverdue">
|
||||||
<el-option :value="0" label="否"></el-option>
|
<el-option :value="0" label="否"></el-option>
|
||||||
<el-option :value="1" label="是"></el-option>
|
<el-option :value="1" label="是"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
<!-- 是否逾期结束 -->
|
|
||||||
|
|
||||||
<!-- 逾期时间开始 -->
|
<!-- 逾期时间 -->
|
||||||
<template #overdueDay="{ record }">
|
<template v-else-if="column.dataIndex === 'overdueDay'">
|
||||||
{{ delayDate(record) }}
|
{{ delayDate(scope.row) }}
|
||||||
</template>
|
</template>
|
||||||
<!-- 逾期时间结束 -->
|
|
||||||
|
|
||||||
<!-- 附件开始 -->
|
<!-- 附件 -->
|
||||||
<template #annex="{ record, isEdit }">
|
<template v-else-if="column.dataIndex === 'annex'">
|
||||||
<el-file-upload :key="`annex_${record.id || record.tempId}`" listType="list"
|
<el-file-upload
|
||||||
:uploadStyle="{ width: '336px' }" />
|
:key="`annex_${scope.row.id || scope.row.tempId}_${tableKey}`"
|
||||||
</template>
|
listType="list"
|
||||||
<!-- 附件结束 -->
|
:uploadStyle="{ width: '336px' }"
|
||||||
</el-edit-table>
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 默认显示 -->
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[column.dataIndex] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[column.dataIndex] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="操作" width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="danger" @click="removePaymentRow(scope.$index)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="table-actions">
|
||||||
|
<el-button type="primary" @click="addPaymentRow">新增付款</el-button>
|
||||||
|
<el-pagination
|
||||||
|
v-if="paymentTableData.length > pageSize"
|
||||||
|
small
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="paymentTableData.length"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:current-page="paymentCurrentPage"
|
||||||
|
@current-change="handlePaymentPageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 付款管理结束 -->
|
<!-- 付款管理结束 -->
|
||||||
|
|
||||||
<!-- 合同附件开始 -->
|
<!-- 其他附件模板保持不变 -->
|
||||||
<template #contractAccess>
|
<template #contractAccess>
|
||||||
<el-file-upload ref="contractAccess" />
|
<el-file-upload ref="contractAccess" :key="`contractAccess_${tableKey}`" />
|
||||||
</template>
|
</template>
|
||||||
<!-- 合同附件结束 -->
|
|
||||||
|
|
||||||
<!-- 检测照片开始 -->
|
|
||||||
<template #detectPicAttr>
|
<template #detectPicAttr>
|
||||||
<el-file-upload ref="detectPicAttr" />
|
<el-file-upload ref="detectPicAttr" :key="`detectPicAttr_${tableKey}`" />
|
||||||
</template>
|
</template>
|
||||||
<!-- 检测照片结束 -->
|
|
||||||
|
|
||||||
<!-- 监测报告附件开始 -->
|
|
||||||
<template #reportAttachment>
|
<template #reportAttachment>
|
||||||
<div class="report-attachment">
|
<div class="report-attachment">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="report-attachmenttitle">· 上刊</div>
|
<div class="report-attachmenttitle">· 上刊</div>
|
||||||
<el-file-upload ref="upPrint" />
|
<el-file-upload ref="upPrint" :key="`upPrint_${tableKey}`" />
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="report-attachmenttitle">· 下刊</div>
|
<div class="report-attachmenttitle">· 下刊</div>
|
||||||
<el-file-upload ref="nextPrint" />
|
<el-file-upload ref="nextPrint" :key="`nextPrint_${tableKey}`" />
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="report-attachmenttitle">· 换刊</div>
|
<div class="report-attachmenttitle">· 换刊</div>
|
||||||
<el-file-upload ref="exchangePrint" />
|
<el-file-upload ref="exchangePrint" :key="`exchangePrint_${tableKey}`" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 监测报告附件结束 -->
|
|
||||||
|
|
||||||
<!-- 媒体链条附件开始 -->
|
|
||||||
<template #mediaLink>
|
<template #mediaLink>
|
||||||
<el-file-upload ref="mediaLink" />
|
<el-file-upload ref="mediaLink" :key="`mediaLink_${tableKey}`" />
|
||||||
</template>
|
</template>
|
||||||
<!-- 媒体链条附件结束 -->
|
|
||||||
</el-group-form>
|
</el-group-form>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
|
@ -190,7 +299,6 @@
|
||||||
import { getAction, postAction, putAction } from "@/api/manage";
|
import { getAction, postAction, putAction } from "@/api/manage";
|
||||||
import { cityDataCache } from "@/utils/cityDataCache";
|
import { cityDataCache } from "@/utils/cityDataCache";
|
||||||
import ElCustomForm from "@/components/ElForm/ElCustomForm.vue";
|
import ElCustomForm from "@/components/ElForm/ElCustomForm.vue";
|
||||||
import ElEditTable from "@/components/ElForm/ElEditTable.vue";
|
|
||||||
import {
|
import {
|
||||||
formGroup,
|
formGroup,
|
||||||
mediaListColumns,
|
mediaListColumns,
|
||||||
|
|
@ -207,7 +315,6 @@ export default {
|
||||||
name: 'ProcurementContract',
|
name: 'ProcurementContract',
|
||||||
components: {
|
components: {
|
||||||
ElCustomForm,
|
ElCustomForm,
|
||||||
ElEditTable,
|
|
||||||
ElGroupForm,
|
ElGroupForm,
|
||||||
ElCustomSelect,
|
ElCustomSelect,
|
||||||
ElFileUpload,
|
ElFileUpload,
|
||||||
|
|
@ -215,58 +322,40 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 当前编辑的ID
|
|
||||||
currentEditId: null,
|
|
||||||
formGroup,
|
formGroup,
|
||||||
AEform: {
|
AEform: {
|
||||||
formModel: {
|
formModel: {
|
||||||
// 只保留基础字段，表格数据分离
|
// 基础表单字段
|
||||||
},
|
},
|
||||||
rules: {},
|
rules: {},
|
||||||
},
|
},
|
||||||
mediaListColumns,
|
mediaListColumns: this.processColumns(mediaListColumns),
|
||||||
contranctPayListColumns,
|
contranctPayListColumns: this.processColumns(contranctPayListColumns),
|
||||||
mediaTypeList: [],
|
mediaTypeList: [],
|
||||||
flag: 'detail',
|
flag: 'detail',
|
||||||
cityList: [],
|
cityList: [],
|
||||||
|
|
||||||
// 表格数据完全分离
|
// 表格数据 - 使用普通数组
|
||||||
mediaTableData: Object.freeze([]),
|
mediaTableData: [],
|
||||||
paymentTableData: Object.freeze([]),
|
paymentTableData: [],
|
||||||
|
|
||||||
|
// 分页相关
|
||||||
|
pageSize: 50, // 每页显示50条
|
||||||
|
mediaCurrentPage: 1,
|
||||||
|
paymentCurrentPage: 1,
|
||||||
|
|
||||||
|
// 表格key，用于强制重新渲染
|
||||||
|
tableKey: 0,
|
||||||
|
|
||||||
_periodTimer: null,
|
_periodTimer: null,
|
||||||
_overdueTimer: null,
|
_overdueTimer: null,
|
||||||
_annexDebounce: false,
|
_annexDebounce: false,
|
||||||
_isDestroyed: false
|
_isDestroyed: false,
|
||||||
|
_loading: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async created() {
|
|
||||||
this.getMediaType();
|
|
||||||
const rawData = await cityDataCache.getCityData();
|
|
||||||
this.cityList = Object.freeze(rawData);
|
|
||||||
|
|
||||||
if (this.$route.query.id) {
|
|
||||||
this.getDetailData()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.$route.query.id) {
|
|
||||||
this.getDetailData()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'$route.query.id': {
|
|
||||||
immediate: true,
|
|
||||||
handler(newId) {
|
|
||||||
if (newId !== this.currentEditId) {
|
|
||||||
this.getDetailData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
contractMoney() {
|
contractMoney() {
|
||||||
// 使用非响应式方式计算
|
|
||||||
const list = this.mediaTableData;
|
const list = this.mediaTableData;
|
||||||
if (!list || list.length === 0) return 0;
|
if (!list || list.length === 0) return 0;
|
||||||
|
|
||||||
|
|
@ -277,23 +366,152 @@ export default {
|
||||||
}
|
}
|
||||||
return total;
|
return total;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 可见的媒体数据（分页）
|
||||||
|
visibleMediaData() {
|
||||||
|
const start = (this.mediaCurrentPage - 1) * this.pageSize;
|
||||||
|
const end = start + this.pageSize;
|
||||||
|
return this.mediaTableData.slice(start, end);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 可见的付款数据（分页）
|
||||||
|
visiblePaymentData() {
|
||||||
|
const start = (this.paymentCurrentPage - 1) * this.pageSize;
|
||||||
|
const end = start + this.pageSize;
|
||||||
|
return this.paymentTableData.slice(start, end);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$route.query.id': {
|
||||||
|
immediate: true,
|
||||||
|
handler(newId) {
|
||||||
|
if (newId) {
|
||||||
|
this.getDetailData(newId);
|
||||||
|
} else {
|
||||||
|
this.resetFormData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
this.getMediaType();
|
||||||
|
const rawData = await cityDataCache.getCityData();
|
||||||
|
this.cityList = rawData;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 处理列配置，添加slot标识
|
||||||
|
processColumns(columns) {
|
||||||
|
return columns.map(column => ({
|
||||||
|
...column,
|
||||||
|
slot: !!column.scopedSlots || ['cityId', 'mediaId', 'upTime', 'downTime', 'period', 'discount',
|
||||||
|
'transactionsNumber', 'payTime', 'arrivalTime', 'isOverdue', 'overdueDay', 'annex'].includes(column.dataIndex)
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
async getDetailData(id) {
|
||||||
|
if (this._loading) return;
|
||||||
|
|
||||||
|
this._loading = true;
|
||||||
|
try {
|
||||||
|
// 先重置表单
|
||||||
|
this.resetFormData();
|
||||||
|
|
||||||
|
const res = await getAction(`/system/purchase/${id}`);
|
||||||
|
if (!res.data) {
|
||||||
|
console.error('获取到的数据为空');
|
||||||
|
this.$message.error('获取数据失败');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用浅拷贝
|
||||||
|
const formModel = { ...res.data };
|
||||||
|
|
||||||
|
// 处理表格数据 - 限制数据量
|
||||||
|
let mediaData = [];
|
||||||
|
let paymentData = [];
|
||||||
|
|
||||||
|
if (formModel.purchaseMediaVoList && Array.isArray(formModel.purchaseMediaVoList)) {
|
||||||
|
// 如果数据量太大，只取前200条
|
||||||
|
const rawData = formModel.purchaseMediaVoList.slice(0, 200);
|
||||||
|
mediaData = rawData.map(item => ({
|
||||||
|
...item,
|
||||||
|
cityIds: item.cityIds ? item.cityIds.split(',').map(id => Number(id)) : []
|
||||||
|
}));
|
||||||
|
delete formModel.purchaseMediaVoList;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formModel.conPurchasePaymentVo && Array.isArray(formModel.conPurchasePaymentVo)) {
|
||||||
|
// 如果数据量太大，只取前200条
|
||||||
|
paymentData = formModel.conPurchasePaymentVo.slice(0, 200);
|
||||||
|
delete formModel.conPurchasePaymentVo;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置基础表单数据
|
||||||
|
this.AEform.formModel = formModel;
|
||||||
|
|
||||||
|
// 设置表格数据
|
||||||
|
this.mediaTableData = mediaData;
|
||||||
|
this.paymentTableData = paymentData;
|
||||||
|
|
||||||
|
// 更新表格key强制重新渲染
|
||||||
|
this.tableKey = Date.now();
|
||||||
|
|
||||||
|
// 延迟附件回显
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this._isDestroyed) return;
|
||||||
|
this.setFileUploadData({
|
||||||
|
contractAccessList: res.data.contractAccessList || [],
|
||||||
|
detectPicAttrList: res.data.detectPicAttrList || [],
|
||||||
|
upPrintList: res.data.upPrintList || [],
|
||||||
|
nextPrintList: res.data.nextPrintList || [],
|
||||||
|
exchangePrintList: res.data.exchangePrintList || [],
|
||||||
|
mediaLinkList: res.data.mediaLinkList || []
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取详情失败:', error);
|
||||||
|
this.$message.error('获取数据失败');
|
||||||
|
} finally {
|
||||||
|
this._loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setFileUploadData(fileData) {
|
||||||
|
try {
|
||||||
|
const setFileList = (ref, list) => {
|
||||||
|
if (ref && ref.setFileList && Array.isArray(list) && list.length > 0) {
|
||||||
|
ref.setFileList([...list]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
setFileList(this.$refs.contractAccess, fileData.contractAccessList);
|
||||||
|
setFileList(this.$refs.detectPicAttr, fileData.detectPicAttrList);
|
||||||
|
setFileList(this.$refs.upPrint, fileData.upPrintList);
|
||||||
|
setFileList(this.$refs.nextPrint, fileData.nextPrintList);
|
||||||
|
setFileList(this.$refs.exchangePrint, fileData.exchangePrintList);
|
||||||
|
setFileList(this.$refs.mediaLink, fileData.mediaLinkList);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('设置文件上传数据失败:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
resetFormData() {
|
resetFormData() {
|
||||||
this.AEform.formModel = {};
|
this.AEform.formModel = {};
|
||||||
this.mediaTableData = [];
|
this.mediaTableData = [];
|
||||||
this.paymentTableData = [];
|
this.paymentTableData = [];
|
||||||
|
this.mediaCurrentPage = 1;
|
||||||
|
this.paymentCurrentPage = 1;
|
||||||
|
this.tableKey = Date.now();
|
||||||
|
|
||||||
// 更新key强制重新渲染组件
|
|
||||||
this.mediaTableKey = Date.now();
|
|
||||||
this.paymentTableKey = Date.now();
|
|
||||||
this.formKey = Date.now();
|
|
||||||
|
|
||||||
// 重置文件上传组件
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const resetFileUpload = (ref) => {
|
const resetFileUpload = (ref) => {
|
||||||
if (ref && ref.setFileList) {
|
if (ref && typeof ref.setFileList === 'function') {
|
||||||
ref.setFileList([]);
|
try {
|
||||||
|
ref.setFileList([]);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('重置文件上传失败:', error);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -305,70 +523,53 @@ export default {
|
||||||
resetFileUpload(this.$refs.mediaLink);
|
resetFileUpload(this.$refs.mediaLink);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async getDetailData() {
|
|
||||||
try {
|
|
||||||
if (this.$route.query.id) {
|
|
||||||
this.resetFormData()
|
|
||||||
this.currentEditId = this.$route.query.id;
|
|
||||||
const res = await getAction(`/system/purchase/${this.$route.query.id}`);
|
|
||||||
|
|
||||||
// 使用浅拷贝避免深层响应式
|
// 媒体表格操作方法
|
||||||
const formModel = { ...res.data };
|
addMediaRow() {
|
||||||
|
this.mediaTableData.push({
|
||||||
// 分离表格数据，使用 Object.freeze 防止响应式
|
tempId: Date.now(),
|
||||||
if (formModel.purchaseMediaVoList) {
|
cityIds: [],
|
||||||
const mediaData = formModel.purchaseMediaVoList.map(item => ({
|
mediaId: '',
|
||||||
...item,
|
mediaName: '',
|
||||||
cityIds: item.cityIds ? item.cityIds.split(',').map(id => Number(id)) : []
|
upTime: '',
|
||||||
}));
|
downTime: '',
|
||||||
this.mediaTableData = Object.freeze(mediaData);
|
discount: 0,
|
||||||
delete formModel.purchaseMediaVoList;
|
mediaFee: 0,
|
||||||
} else {
|
productFee: 0
|
||||||
this.mediaTableData = Object.freeze([]);
|
});
|
||||||
}
|
|
||||||
|
|
||||||
if (formModel.conPurchasePaymentVo) {
|
|
||||||
this.paymentTableData = Object.freeze([...formModel.conPurchasePaymentVo]);
|
|
||||||
delete formModel.conPurchasePaymentVo;
|
|
||||||
} else {
|
|
||||||
this.paymentTableData = Object.freeze([]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置基础表单数据
|
|
||||||
this.AEform.formModel = formModel;
|
|
||||||
|
|
||||||
// 延迟附件回显，避免阻塞主线程
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this._isDestroyed) return;
|
|
||||||
|
|
||||||
const setFileList = (ref, list) => {
|
|
||||||
if (ref && list) {
|
|
||||||
ref.setFileList(list);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
setFileList(this.$refs.contractAccess, res.data.contractAccessList);
|
|
||||||
setFileList(this.$refs.detectPicAttr, res.data.detectPicAttrList);
|
|
||||||
setFileList(this.$refs.upPrint, res.data.upPrintList);
|
|
||||||
setFileList(this.$refs.nextPrint, res.data.nextPrintList);
|
|
||||||
setFileList(this.$refs.exchangePrint, res.data.exchangePrintList);
|
|
||||||
setFileList(this.$refs.mediaLink, res.data.mediaLinkList);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取详情失败:', error);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
updateItemsPurchaseMediaBoList(newItems) {
|
removeMediaRow(index) {
|
||||||
// 使用浅拷贝和冻结
|
const actualIndex = (this.mediaCurrentPage - 1) * this.pageSize + index;
|
||||||
this.mediaTableData = Object.freeze([...newItems]);
|
this.mediaTableData.splice(actualIndex, 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
updateItemsPurchasePaymentBoList(newItems) {
|
handleMediaPageChange(page) {
|
||||||
this.paymentTableData = Object.freeze([...newItems]);
|
this.mediaCurrentPage = page;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 付款表格操作方法
|
||||||
|
addPaymentRow() {
|
||||||
|
this.paymentTableData.push({
|
||||||
|
tempId: Date.now(),
|
||||||
|
transactionsNumber: '第1笔',
|
||||||
|
payTime: '',
|
||||||
|
arrivalTime: '',
|
||||||
|
isOverdue: 0,
|
||||||
|
payMoney: 0
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
removePaymentRow(index) {
|
||||||
|
const actualIndex = (this.paymentCurrentPage - 1) * this.pageSize + index;
|
||||||
|
this.paymentTableData.splice(actualIndex, 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
handlePaymentPageChange(page) {
|
||||||
|
this.paymentCurrentPage = page;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 其他方法保持不变...
|
||||||
async getMediaDepartment() {
|
async getMediaDepartment() {
|
||||||
const { code, data } = await getAction(`/contract/mediaDept/listAll`);
|
const { code, data } = await getAction(`/contract/mediaDept/listAll`);
|
||||||
if (code == 200) {
|
if (code == 200) {
|
||||||
|
|
@ -443,36 +644,6 @@ export default {
|
||||||
throw new Error(msg);
|
throw new Error(msg);
|
||||||
},
|
},
|
||||||
|
|
||||||
getPeriod() {
|
|
||||||
if (this._periodTimer) clearTimeout(this._periodTimer);
|
|
||||||
this._periodTimer = setTimeout(() => {
|
|
||||||
const data = [...this.mediaTableData];
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
|
||||||
const item = data[i];
|
|
||||||
if (item.upTime && item.downTime) {
|
|
||||||
const diff = dayjs(item.downTime).diff(dayjs(item.upTime), 'day');
|
|
||||||
item.period = Math.ceil(diff);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.mediaTableData = Object.freeze(data);
|
|
||||||
}, 150);
|
|
||||||
},
|
|
||||||
|
|
||||||
getOverdueDay() {
|
|
||||||
if (this._overdueTimer) clearTimeout(this._overdueTimer);
|
|
||||||
this._overdueTimer = setTimeout(() => {
|
|
||||||
const data = [...this.paymentTableData];
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
|
||||||
const item = data[i];
|
|
||||||
if (item.payTime) {
|
|
||||||
const diff = dayjs(item.arrivalTime || new Date()).diff(dayjs(item.payTime), 'day');
|
|
||||||
item.overdueDay = Math.floor(diff);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.paymentTableData = Object.freeze(data);
|
|
||||||
}, 150);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleNumberChange(val) {
|
handleNumberChange(val) {
|
||||||
if (val < 0) {
|
if (val < 0) {
|
||||||
this.$message.warning(`该数值不能小于系统设置的最小值0`);
|
this.$message.warning(`该数值不能小于系统设置的最小值0`);
|
||||||
|
|
@ -595,7 +766,7 @@ export default {
|
||||||
try {
|
try {
|
||||||
this.annexFunc();
|
this.annexFunc();
|
||||||
|
|
||||||
// 准备提交数据 - 不使用扩展运算符避免内存问题
|
// 准备提交数据
|
||||||
const submitData = {
|
const submitData = {
|
||||||
...this.AEform.formModel,
|
...this.AEform.formModel,
|
||||||
purchaseMediaBoList: this.mediaTableData.map(item => ({
|
purchaseMediaBoList: this.mediaTableData.map(item => ({
|
||||||
|
|
@ -634,6 +805,7 @@ export default {
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('保存失败:', error);
|
console.error('保存失败:', error);
|
||||||
|
this.$message.error('保存失败');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -646,17 +818,6 @@ export default {
|
||||||
this._isDestroyed = true;
|
this._isDestroyed = true;
|
||||||
if (this._periodTimer) clearTimeout(this._periodTimer);
|
if (this._periodTimer) clearTimeout(this._periodTimer);
|
||||||
if (this._overdueTimer) clearTimeout(this._overdueTimer);
|
if (this._overdueTimer) clearTimeout(this._overdueTimer);
|
||||||
|
|
||||||
// 彻底清理数据
|
|
||||||
this.mediaTableData = [];
|
|
||||||
this.paymentTableData = [];
|
|
||||||
this.AEform.formModel = {};
|
|
||||||
this.mediaTypeList = [];
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeRouteLeave(to, _, next) {
|
|
||||||
to.meta.flag = this.flag;
|
|
||||||
next();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -667,6 +828,18 @@ export default {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.table-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.el-group-form {
|
.el-group-form {
|
||||||
::v-deep {
|
::v-deep {
|
||||||
>.el-card {
|
>.el-card {
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,7 @@ export const mediaListColumns = [
|
||||||
{
|
{
|
||||||
title: "媒体位置",
|
title: "媒体位置",
|
||||||
dataIndex: "mediaPosition",
|
dataIndex: "mediaPosition",
|
||||||
minWidth: 300,
|
width: 180,
|
||||||
type: "text",
|
type: "text",
|
||||||
align: "center",
|
align: "center",
|
||||||
required: true,
|
required: true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user