diff --git a/src/views/contract/detail/AEprocurementContract.vue b/src/views/contract/detail/AEprocurementContract.vue index cc0a3cd..b36da6e 100644 --- a/src/views/contract/detail/AEprocurementContract.vue +++ b/src/views/contract/detail/AEprocurementContract.vue @@ -43,140 +43,249 @@ - + - - - - - - -
@@ -190,7 +299,6 @@ import { getAction, postAction, putAction } from "@/api/manage"; import { cityDataCache } from "@/utils/cityDataCache"; import ElCustomForm from "@/components/ElForm/ElCustomForm.vue"; -import ElEditTable from "@/components/ElForm/ElEditTable.vue"; import { formGroup, mediaListColumns, @@ -207,7 +315,6 @@ export default { name: 'ProcurementContract', components: { ElCustomForm, - ElEditTable, ElGroupForm, ElCustomSelect, ElFileUpload, @@ -215,58 +322,40 @@ export default { }, data() { return { - // 当前编辑的ID - currentEditId: null, formGroup, AEform: { formModel: { - // 只保留基础字段，表格数据分离 + // 基础表单字段 }, rules: {}, }, - mediaListColumns, - contranctPayListColumns, + mediaListColumns: this.processColumns(mediaListColumns), + contranctPayListColumns: this.processColumns(contranctPayListColumns), mediaTypeList: [], flag: 'detail', cityList: [], - // 表格数据完全分离 - mediaTableData: Object.freeze([]), - paymentTableData: Object.freeze([]), + // 表格数据 - 使用普通数组 + mediaTableData: [], + paymentTableData: [], + + // 分页相关 + pageSize: 50, // 每页显示50条 + mediaCurrentPage: 1, + paymentCurrentPage: 1, + + // 表格key，用于强制重新渲染 + tableKey: 0, _periodTimer: null, _overdueTimer: null, _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: { contractMoney() { - // 使用非响应式方式计算 const list = this.mediaTableData; if (!list || list.length === 0) return 0; @@ -277,26 +366,155 @@ export default { } 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: { + // 处理列配置，添加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() { this.AEform.formModel = {}; this.mediaTableData = []; this.paymentTableData = []; - - // 更新key强制重新渲染组件 - this.mediaTableKey = Date.now(); - this.paymentTableKey = Date.now(); - this.formKey = Date.now(); - - // 重置文件上传组件 + this.mediaCurrentPage = 1; + this.paymentCurrentPage = 1; + this.tableKey = Date.now(); + this.$nextTick(() => { const resetFileUpload = (ref) => { - if (ref && ref.setFileList) { - ref.setFileList([]); + if (ref && typeof ref.setFileList === 'function') { + try { + ref.setFileList([]); + } catch (error) { + console.warn('重置文件上传失败:', error); + } } }; - + resetFileUpload(this.$refs.contractAccess); resetFileUpload(this.$refs.detectPicAttr); resetFileUpload(this.$refs.upPrint); @@ -305,70 +523,53 @@ export default { 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 }; - - // 分离表格数据，使用 Object.freeze 防止响应式 - if (formModel.purchaseMediaVoList) { - const mediaData = formModel.purchaseMediaVoList.map(item => ({ - ...item, - cityIds: item.cityIds ? item.cityIds.split(',').map(id => Number(id)) : [] - })); - this.mediaTableData = Object.freeze(mediaData); - delete formModel.purchaseMediaVoList; - } else { - 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); - } + // 媒体表格操作方法 + addMediaRow() { + this.mediaTableData.push({ + tempId: Date.now(), + cityIds: [], + mediaId: '', + mediaName: '', + upTime: '', + downTime: '', + discount: 0, + mediaFee: 0, + productFee: 0 + }); }, - updateItemsPurchaseMediaBoList(newItems) { - // 使用浅拷贝和冻结 - this.mediaTableData = Object.freeze([...newItems]); + removeMediaRow(index) { + const actualIndex = (this.mediaCurrentPage - 1) * this.pageSize + index; + this.mediaTableData.splice(actualIndex, 1); }, - updateItemsPurchasePaymentBoList(newItems) { - this.paymentTableData = Object.freeze([...newItems]); + handleMediaPageChange(page) { + 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() { const { code, data } = await getAction(`/contract/mediaDept/listAll`); if (code == 200) { @@ -443,36 +644,6 @@ export default { 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) { if (val < 0) { this.$message.warning(`该数值不能小于系统设置的最小值0`); @@ -595,7 +766,7 @@ export default { try { this.annexFunc(); - // 准备提交数据 - 不使用扩展运算符避免内存问题 + // 准备提交数据 const submitData = { ...this.AEform.formModel, purchaseMediaBoList: this.mediaTableData.map(item => ({ @@ -634,6 +805,7 @@ export default { } catch (error) { console.error('保存失败:', error); + this.$message.error('保存失败'); } }, @@ -646,17 +818,6 @@ export default { this._isDestroyed = true; if (this._periodTimer) clearTimeout(this._periodTimer); if (this._overdueTimer) clearTimeout(this._overdueTimer); - - // 彻底清理数据 - this.mediaTableData = []; - this.paymentTableData = []; - this.AEform.formModel = {}; - this.mediaTypeList = []; - }, - - beforeRouteLeave(to, _, next) { - to.meta.flag = this.flag; - next(); } }; @@ -667,6 +828,18 @@ export default { overflow: auto; 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 { ::v-deep { >.el-card { diff --git a/src/views/contract/detail/config/index.js b/src/views/contract/detail/config/index.js index cdfef57..ead6275 100644 --- a/src/views/contract/detail/config/index.js +++ b/src/views/contract/detail/config/index.js @@ -69,7 +69,7 @@ export const mediaListColumns = [ { title: "媒体位置", dataIndex: "mediaPosition", - minWidth: 300, + width: 180, type: "text", align: "center", required: true,