结算和工地直转
This commit is contained in:
parent
4f90ac4083
commit
e1020db09b
|
|
@ -25,6 +25,18 @@ export function getUnitList(data) {
|
|||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 往来单位下拉选,过滤掉班组
|
||||
// 往来单位下拉选
|
||||
export function getUnitListFilterTeam(data) {
|
||||
return request({
|
||||
url: '/material/select/getUnitListFilterTeam',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 协议
|
||||
export function getAgreementInfoById(data) {
|
||||
return request({
|
||||
|
|
@ -105,4 +117,4 @@ export function updatePrintStatus(id) {
|
|||
method: 'post',
|
||||
data: {id: id},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,14 +248,40 @@
|
|||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 数据状态提示 -->
|
||||
<div class="data-status-info" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<!-- 分页状态 -->
|
||||
<div style="padding: 8px 12px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; color: #475569; font-size: 14px;">
|
||||
<i class="el-icon-info"></i>
|
||||
总共 <strong>{{ total }}</strong> 条数据，当前显示第 <strong>{{ queryParams.pageNum }}</strong> 页，每页 <strong>{{ queryParams.pageSize }}</strong> 条
|
||||
</div>
|
||||
|
||||
<!-- 选中数量提示 -->
|
||||
<div v-if="multipleSelection.length > 0" style="padding: 8px 12px; background-color: #f0f9ff; border: 1px solid #bfdbfe; border-radius: 4px; color: #1e40af;">
|
||||
<i class="el-icon-info"></i>
|
||||
已选中 <strong>{{ multipleSelection.length }}</strong> 条数据
|
||||
<span style="margin-left: 10px; font-size: 12px; color: #64748b;">
|
||||
<!-- (当前页: {{ equipmentList.filter(row => row.isActive).length }} 条, 全部: {{ selectedDataArray.length }} 条)-->
|
||||
</span>
|
||||
<el-button type="text" size="mini" style="margin-left: 10px; color: #ef4444;" @click="clearCrossPageSelection">
|
||||
清空选择
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="equipmentList"
|
||||
:data="equipmentList"
|
||||
:row-key="getRowKey"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column align="center" label="序号" type="index" width="55" />
|
||||
<el-table-column align="center" label="序号" width="55">
|
||||
<template slot-scope="scope">
|
||||
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="column.prop"
|
||||
|
|
@ -287,12 +313,21 @@
|
|||
</el-table-column> -->
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 图片查看弹窗 -->
|
||||
<el-dialog :visible.sync="dialogVisible" width="600px" height="600px">
|
||||
<img width="100%" height="500px" :src="dialogImageUrl" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -303,11 +338,12 @@ import { getUseringData, receiveSubmit, receiveEdit, receiveDetail, getEquipment
|
|||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import Pagination from '@/components/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'DirectApply',
|
||||
dicts: ['purchase_task_status'],
|
||||
components: { Treeselect },
|
||||
components: { Treeselect, Pagination },
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
|
|
@ -367,10 +403,18 @@ export default {
|
|||
projectId: null,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1, // 当前页码
|
||||
pageSize: 20, // 每页显示数量
|
||||
maId: undefined, // 物资类型
|
||||
typeId: '', // 类型规格
|
||||
keyWord: ''
|
||||
},
|
||||
// 前端分页数据
|
||||
allData: [], // 存储所有数据
|
||||
// 跨页勾选数据专用数组
|
||||
selectedDataArray: [], // 专门存储所有选中的完整数据
|
||||
// 防止事件循环的标志位
|
||||
isRestoringSelection: false, // 正在恢复选中状态时为true
|
||||
maForm: {
|
||||
backUnitId: undefined,
|
||||
backProId: undefined,
|
||||
|
|
@ -477,6 +521,9 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化标志位
|
||||
this.isRestoringSelection = false
|
||||
|
||||
if (this.$route.query.type == 'edit') {
|
||||
this.isEdit = true
|
||||
this.isDetail = false
|
||||
|
|
@ -508,7 +555,13 @@ export default {
|
|||
// this.maForm.backAgreementId 变化时执行
|
||||
'maForm.backAgreementId': {
|
||||
handler: function (val, oldVal) {
|
||||
this.getMaTypeOpt()
|
||||
if (val && val !== oldVal) {
|
||||
this.getMaTypeOpt()
|
||||
// 协议变化时清空数据
|
||||
this.allData = []
|
||||
this.clearCrossPageSelection()
|
||||
this.queryParams.pageNum = 1
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
|
|
@ -516,42 +569,126 @@ export default {
|
|||
methods: {
|
||||
// 查询
|
||||
handleQuery() {
|
||||
// 重置分页到第一页
|
||||
this.queryParams.pageNum = 1
|
||||
// 清空缓存数据，强制重新获取
|
||||
this.allData = []
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
// 重置分页
|
||||
this.queryParams.pageNum = 1
|
||||
// 清空缓存数据，强制重新获取
|
||||
this.allData = []
|
||||
// 清空跨页选中状态
|
||||
this.clearCrossPageSelection()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空跨页选中状态
|
||||
clearCrossPageSelection() {
|
||||
console.log('=== 清空所有选中状态 ===')
|
||||
|
||||
// 清空数据
|
||||
this.selectedDataArray = []
|
||||
this.multipleSelection = []
|
||||
|
||||
// 清空当前页表格的选中样式
|
||||
if (this.$refs.equipmentList) {
|
||||
// 设置标志位防止触发selection-change事件
|
||||
this.isRestoringSelection = true
|
||||
this.$refs.equipmentList.clearSelection()
|
||||
|
||||
// 清空当前页数据的isActive状态
|
||||
this.equipmentList.forEach(item => {
|
||||
item.isActive = false
|
||||
if (!this.isEdit && !this.isDetail) {
|
||||
item.directNum = undefined
|
||||
}
|
||||
})
|
||||
|
||||
// 重置标志位
|
||||
this.$nextTick(() => {
|
||||
this.isRestoringSelection = false
|
||||
console.log('清空选中状态完成')
|
||||
})
|
||||
} else {
|
||||
this.isRestoringSelection = false // 重置标志位
|
||||
}
|
||||
},
|
||||
|
||||
// 清空所有状态
|
||||
clearAllStates() {
|
||||
this.allData = []
|
||||
this.equipmentList = []
|
||||
this.total = 0
|
||||
this.clearCrossPageSelection()
|
||||
this.queryParams.pageNum = 1
|
||||
},
|
||||
// 获取列表
|
||||
async getList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
agreementId: this.maForm.backAgreementId,
|
||||
...this.queryParams
|
||||
// 只在第一次查询或者查询条件变化时重新获取数据
|
||||
const needRefreshData = this.queryParams.pageNum === 1 || this.allData.length === 0
|
||||
|
||||
if (needRefreshData) {
|
||||
const params = {
|
||||
agreementId: this.maForm.backAgreementId,
|
||||
maId: this.queryParams.maId,
|
||||
typeId: this.queryParams.typeId,
|
||||
keyWord: this.queryParams.keyWord
|
||||
// 不传递分页参数，获取全量数据
|
||||
}
|
||||
const res = await getUseringData(params)
|
||||
console.log('🚀 ~ 获取列表 ~ res:', res)
|
||||
|
||||
// 存储全量数据
|
||||
if (res.data && res.data.records) {
|
||||
this.allData = res.data.records
|
||||
} else if (Array.isArray(res.data)) {
|
||||
this.allData = res.data
|
||||
} else {
|
||||
this.allData = []
|
||||
}
|
||||
}
|
||||
const res = await getUseringData(params)
|
||||
console.log('🚀 ~ 获取列表 ~ res:', res)
|
||||
this.equipmentList = res.data
|
||||
if (this.isEdit || this.isDetail) {
|
||||
this.$nextTick(() => {
|
||||
this.multipleSelection = this.multipleSelectionTemp
|
||||
console.log('🚀 ~ 获取列表 ~ this.equipmentList:', this.multipleSelection)
|
||||
this.multipleSelection.forEach(row => {
|
||||
const foundRow = this.equipmentList.find(item => item.typeId === row.typeId)
|
||||
console.log('🚀 ~ getList ~ foundRow:', foundRow)
|
||||
if (foundRow) {
|
||||
// 将 directNum 赋值给 foundRow
|
||||
foundRow.directNum = row.directNum
|
||||
// 调用 toggleRowSelection 方法选中行
|
||||
this.$refs.equipmentList.toggleRowSelection(foundRow)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 前端分页处理
|
||||
this.total = this.allData.length
|
||||
const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
||||
const endIndex = startIndex + this.queryParams.pageSize
|
||||
|
||||
// 设置标志位，防止更新equipmentList时触发selection-change事件
|
||||
this.isRestoringSelection = true
|
||||
this.equipmentList = this.allData.slice(startIndex, endIndex)
|
||||
|
||||
console.log(`🚀 ~ 分页信息 ~ 总数据:${this.total}, 当前页:${this.queryParams.pageNum}, 每页:${this.queryParams.pageSize}, 当前页数据:${this.equipmentList.length}`)
|
||||
|
||||
// 编辑模式下的回显数据处理（只在第一次加载时执行）
|
||||
if ((this.isEdit || this.isDetail) && this.multipleSelectionTemp.length > 0 && needRefreshData) {
|
||||
console.log('编辑模式初始化选中数据:', this.multipleSelectionTemp.length)
|
||||
// 将编辑数据添加到选中数据数组中
|
||||
this.selectedDataArray = [...this.multipleSelectionTemp.map(row => ({
|
||||
...row,
|
||||
isActive: true
|
||||
}))]
|
||||
this.updateCrossPageSelection()
|
||||
console.log('编辑模式回显选中数据已添加到selectedDataArray:', this.selectedDataArray.length)
|
||||
}
|
||||
|
||||
// 恢复当前页的勾选状态
|
||||
this.$nextTick(() => {
|
||||
this.restoreCurrentPageSelection()
|
||||
})
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ 获取列表 ~ error:', error)
|
||||
this.tableList = []
|
||||
this.allData = []
|
||||
this.equipmentList = []
|
||||
this.total = 0
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// 获取物资类型
|
||||
|
|
@ -592,6 +729,10 @@ export default {
|
|||
console.log('🚀 ~ getAgreementId ~ res:', res)
|
||||
this.maForm.backAgreementId = res.data.agreementId
|
||||
this.maForm.backAgreementCode = res.data.agreementCode
|
||||
// 协议变化时清空缓存数据和选中状态
|
||||
this.allData = []
|
||||
this.clearCrossPageSelection()
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getAgreementId ~ error:', error)
|
||||
|
|
@ -715,22 +856,62 @@ export default {
|
|||
}
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(row) {
|
||||
console.log('选中了~', row)
|
||||
this.multipleSelection = row
|
||||
handleSelectionChange(currentPageSelectedRows) {
|
||||
// 如果正在恢复选中状态，忽略此事件
|
||||
if (this.isRestoringSelection) {
|
||||
console.log('正在恢复选中状态，忽略selection-change事件')
|
||||
console.trace('忽略selection-change的调用栈:')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('=== handleSelectionChange 开始 ===')
|
||||
console.trace('handleSelectionChange调用栈:')
|
||||
console.log('当前页选中数据:', currentPageSelectedRows)
|
||||
console.log('选中前全局数据数量:', this.selectedDataArray.length)
|
||||
console.log('当前页码:', this.queryParams.pageNum)
|
||||
|
||||
// 获取当前页所有数据的rowKey
|
||||
const currentPageRowKeys = this.equipmentList.map(item => this.getRowKey(item))
|
||||
|
||||
// 从selectedDataArray中移除属于当前页的数据（不影响其他页面的数据）
|
||||
const beforeCount = this.selectedDataArray.length
|
||||
this.selectedDataArray = this.selectedDataArray.filter(item =>
|
||||
!currentPageRowKeys.includes(this.getRowKey(item))
|
||||
)
|
||||
const afterCount = this.selectedDataArray.length
|
||||
console.log(`移除当前页数据：${beforeCount} -> ${afterCount}，移除了 ${beforeCount - afterCount} 条`)
|
||||
|
||||
// 添加当前页新选中的数据到数组中
|
||||
currentPageSelectedRows.forEach(row => {
|
||||
const completeRow = {
|
||||
...row,
|
||||
directNum: row.directNum || row.useNum,
|
||||
isActive: true
|
||||
}
|
||||
this.selectedDataArray.push(completeRow)
|
||||
})
|
||||
console.log(`添加当前页选中数据：${currentPageSelectedRows.length} 条`)
|
||||
|
||||
// 更新当前页的isActive状态
|
||||
this.equipmentList.forEach(item => {
|
||||
if (item.id && this.multipleSelection.some(val => val.id === item.id)) {
|
||||
item.isActive = true
|
||||
// 检查 useNum 是否存在，避免赋值 undefined
|
||||
if (item.useNum !== undefined) {
|
||||
item.directNum = item.useNum
|
||||
}
|
||||
} else {
|
||||
item.isActive = false
|
||||
const isSelected = currentPageSelectedRows.some(selectedRow => this.getRowKey(selectedRow) === this.getRowKey(item))
|
||||
item.isActive = isSelected
|
||||
if (isSelected && !item.directNum && item.useNum) {
|
||||
item.directNum = item.useNum
|
||||
} else if (!isSelected && !this.isEdit && !this.isDetail) {
|
||||
item.directNum = undefined
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 更新multipleSelection
|
||||
this.multipleSelection = [...this.selectedDataArray]
|
||||
|
||||
console.log('选中后全局数据数量:', this.selectedDataArray.length)
|
||||
console.log('当前页选中rowKey列表:', currentPageSelectedRows.map(row => this.getRowKey(row)))
|
||||
console.log('全局选中rowKey列表:', this.selectedDataArray.map(row => this.getRowKey(row)))
|
||||
console.log('=== handleSelectionChange 结束 ===')
|
||||
console.log('')
|
||||
},
|
||||
|
||||
// 数量变更
|
||||
directNumChange(row) {
|
||||
|
|
@ -740,12 +921,130 @@ export default {
|
|||
row.directNum = row.useNum
|
||||
})
|
||||
}
|
||||
|
||||
// 如果行被选中，同步更新跨页选中数据数组
|
||||
const rowKey = this.getRowKey(row)
|
||||
const selectedIndex = this.selectedDataArray.findIndex(item => this.getRowKey(item) === rowKey)
|
||||
|
||||
if (selectedIndex !== -1) {
|
||||
// 更新数组中对应的数据
|
||||
this.selectedDataArray[selectedIndex] = {
|
||||
...this.selectedDataArray[selectedIndex],
|
||||
...row,
|
||||
directNum: row.directNum,
|
||||
isActive: true
|
||||
}
|
||||
// 同步更新multipleSelection
|
||||
this.multipleSelection = [...this.selectedDataArray]
|
||||
console.log('数量变更后跨页选中总数:', this.selectedDataArray.length)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取行的唯一标识
|
||||
getRowKey(row) {
|
||||
// 使用最核心的字段确保唯一性，避免编辑数据和实际数据的字段差异
|
||||
const key = `${row.typeId || row.id || 'unknown'}_${row.maCode || ''}_${row.typeModelName || ''}`
|
||||
// 在调试模式下记录 rowKey 生成
|
||||
// console.log('生成rowKey:', key, 'for:', row.typeModelName)
|
||||
return key
|
||||
},
|
||||
|
||||
// 恢复当前页的勾选状态
|
||||
restoreCurrentPageSelection() {
|
||||
// 如果标志位未设置，则设置它
|
||||
if (!this.isRestoringSelection) {
|
||||
this.isRestoringSelection = true
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (!this.$refs.equipmentList) {
|
||||
this.isRestoringSelection = false // 确保标志位重置
|
||||
return
|
||||
}
|
||||
|
||||
console.log('=== 开始恢复选中状态 ===')
|
||||
console.log('标志位状态:', this.isRestoringSelection)
|
||||
console.log('全局选中数量:', this.selectedDataArray.length)
|
||||
console.log('当前页数据数量:', this.equipmentList.length)
|
||||
console.log('当前页码:', this.queryParams.pageNum)
|
||||
console.log('是否编辑模式:', this.isEdit || this.isDetail)
|
||||
if (this.selectedDataArray.length > 0) {
|
||||
console.log('全局选中数据的前3个rowKey:', this.selectedDataArray.slice(0, 3).map(item => this.getRowKey(item)))
|
||||
console.log('当前页数据的前3个rowKey:', this.equipmentList.slice(0, 3).map(item => this.getRowKey(item)))
|
||||
}
|
||||
|
||||
try {
|
||||
// 先清除所有选中状态（此时标志位已设置）
|
||||
this.$refs.equipmentList.clearSelection()
|
||||
|
||||
// 遍历当前页数据，检查是否在选中数组中
|
||||
let matchedCount = 0
|
||||
this.equipmentList.forEach(row => {
|
||||
const rowKey = this.getRowKey(row)
|
||||
// 在选中数组中查找对应的数据
|
||||
const selectedData = this.selectedDataArray.find(item => this.getRowKey(item) === rowKey)
|
||||
|
||||
if (selectedData) {
|
||||
matchedCount++
|
||||
// 恢复保存的数据
|
||||
row.directNum = selectedData.directNum
|
||||
row.isActive = true
|
||||
// 恢复表格选中状态
|
||||
this.$refs.equipmentList.toggleRowSelection(row, true)
|
||||
console.log(`恢复选中: ${rowKey}`)
|
||||
} else {
|
||||
row.isActive = false
|
||||
if (!this.isEdit && !this.isDetail) {
|
||||
row.directNum = undefined
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(`当前页匹配到 ${matchedCount} 条选中数据`)
|
||||
|
||||
// 如果是编辑模式且匹配数量为0，显示详细的调试信息
|
||||
if ((this.isEdit || this.isDetail) && matchedCount === 0 && this.selectedDataArray.length > 0) {
|
||||
console.warn('编辑模式下当前页没有匹配到任何选中数据，检查rowKey匹配:')
|
||||
console.log('当前页所有rowKey:', this.equipmentList.map(item => this.getRowKey(item)))
|
||||
console.log('全局选中所有rowKey:', this.selectedDataArray.map(item => this.getRowKey(item)))
|
||||
}
|
||||
|
||||
const restoredCount = this.equipmentList.filter(row => row.isActive).length
|
||||
console.log('恢复选中状态完成，当前页选中数量:', this.$refs.equipmentList.selection?.length || 0)
|
||||
console.log('恢复选中状态完成，当前页isActive数量:', restoredCount)
|
||||
console.log('全局选中数量:', this.selectedDataArray.length)
|
||||
console.log('当前页应该恢复的rowKey:', this.equipmentList.filter(row => {
|
||||
const rowKey = this.getRowKey(row)
|
||||
return this.selectedDataArray.some(item => this.getRowKey(item) === rowKey)
|
||||
}).map(row => this.getRowKey(row)))
|
||||
console.log('=== 恢复选中状态结束 ===')
|
||||
console.log('')
|
||||
} catch (error) {
|
||||
console.error('恢复选中状态时出错:', error)
|
||||
} finally {
|
||||
// 无论如何都要清除标志位
|
||||
this.isRestoringSelection = false
|
||||
console.log('标志位已重置为:', this.isRestoringSelection)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 更新跨页选中状态
|
||||
updateCrossPageSelection() {
|
||||
// 直接使用选中数据数组
|
||||
this.multipleSelection = [...this.selectedDataArray]
|
||||
},
|
||||
/** 保存按钮操作 */
|
||||
handleSave() {
|
||||
// 确保使用最新的跨页选中数据
|
||||
this.updateCrossPageSelection()
|
||||
console.log('=== 保存操作开始 ===')
|
||||
console.log('maForm', this.maForm)
|
||||
console.log('选中数据', this.multipleSelection)
|
||||
if (this.multipleSelection.length > 0) {
|
||||
console.log('selectedDataArray:', this.selectedDataArray)
|
||||
console.log('multipleSelection:', this.multipleSelection)
|
||||
console.log('选中数据总数:', this.selectedDataArray.length)
|
||||
console.log('=====================')
|
||||
|
||||
if (this.selectedDataArray.length > 0) {
|
||||
this.$refs['maForm'].validate(valid => {
|
||||
if (valid) {
|
||||
this.$modal.confirm('是否确认申请').then(async () => {
|
||||
|
|
@ -774,11 +1073,11 @@ export default {
|
|||
type: e.response.data.url.substring(
|
||||
e.response.data.url.lastIndexOf('.') + 1
|
||||
)
|
||||
}
|
||||
}
|
||||
}else{
|
||||
return {
|
||||
name: null,
|
||||
url: e.url,
|
||||
url: e.url,
|
||||
}
|
||||
}
|
||||
// console.log("11111111111",e.response)
|
||||
|
|
@ -808,8 +1107,8 @@ export default {
|
|||
}
|
||||
this.$message.success('操作成功')
|
||||
this.$refs['maForm'].resetFields()
|
||||
this.equipmentList = []
|
||||
this.multipleSelection = []
|
||||
// 清空所有状态
|
||||
this.clearAllStates()
|
||||
this.delBusinessFileIdList = []
|
||||
loading.close()
|
||||
} catch (error) {
|
||||
|
|
@ -1127,4 +1426,33 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 数据状态提示样式
|
||||
.data-status-info {
|
||||
font-size: 14px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-button--text {
|
||||
padding: 0;
|
||||
margin-left: 15px;
|
||||
|
||||
&:hover {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-info {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@
|
|||
import { getSltInfo, submitFee,submitCosts } from '@/api/cost/cost'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
name: 'ApplyDetail',
|
||||
dicts: [],
|
||||
props: {
|
||||
row: {
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@ import Treeselect from "@riophae/vue-treeselect";
|
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import printJS from 'print-js'
|
||||
export default {
|
||||
name: 'CostApplyList',
|
||||
name: 'ApplyHome',
|
||||
dicts: ['cost_status'],
|
||||
components: { Treeselect, vueEasyPrint },
|
||||
data() {
|
||||
|
|
@ -307,6 +307,15 @@ export default {
|
|||
// this.GetProData()
|
||||
this.getList()
|
||||
},
|
||||
activated() {
|
||||
// 组件被 keep-alive 缓存后重新激活时，不重新加载数据
|
||||
// 如果需要刷新数据，可以在这里添加逻辑
|
||||
console.log('ApplyHome activated - 页面缓存激活')
|
||||
},
|
||||
deactivated() {
|
||||
// 组件被 keep-alive 缓存时
|
||||
console.log('ApplyHome deactivated - 页面缓存')
|
||||
},
|
||||
methods: {
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
|
|
@ -387,6 +396,7 @@ export default {
|
|||
pageSize: this.queryParams.pageSize,
|
||||
projectId: this.queryParams.projectId,
|
||||
sltStatus: this.queryParams.sltStatus,
|
||||
agreementCode: this.queryParams.agreementCode,
|
||||
// ...this.queryParams,
|
||||
unitIds: this.unitIds,
|
||||
|
||||
|
|
|
|||
|
|
@ -246,7 +246,7 @@ import vueEasyPrint from "vue-easy-print";
|
|||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
export default {
|
||||
name: 'CostApplyList',
|
||||
name: 'ExamHome',
|
||||
dicts: ['cost_status'],
|
||||
components: { Treeselect, vueEasyPrint },
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -138,12 +138,14 @@
|
|||
:visible.sync="costDetailVisible"
|
||||
width="80%"
|
||||
top="5vh"
|
||||
:close-on-click-modal="false">
|
||||
:close-on-click-modal="false"
|
||||
@closed="handleCostDetailDialogClosed">
|
||||
<!-- 租赁费用详情表格 -->
|
||||
<el-table
|
||||
v-if="costDetailType === 'lease'"
|
||||
v-loading="costDetailLoading"
|
||||
:data="costDetailList"
|
||||
:key="'lease-table-' + costDetailType"
|
||||
border
|
||||
stripe
|
||||
height="500">
|
||||
|
|
@ -155,7 +157,7 @@
|
|||
<el-table-column label="数量" align="center" prop="quantity" width="80" />
|
||||
<el-table-column label="归还数量" align="center" prop="returnQuantity" width="100" />
|
||||
<el-table-column label="租赁日期" align="center" prop="leaseDate" width="120" />
|
||||
<el-table-column label="退换日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="退还日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="天数" align="center" prop="days" width="80" />
|
||||
<el-table-column label="费用（元）" align="center" prop="cost" width="100">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -169,6 +171,7 @@
|
|||
v-if="costDetailType === 'repair'"
|
||||
v-loading="costDetailLoading"
|
||||
:data="costDetailList"
|
||||
:key="'repair-table-' + costDetailType"
|
||||
border
|
||||
stripe
|
||||
height="500">
|
||||
|
|
@ -189,6 +192,7 @@
|
|||
v-if="costDetailType === 'lose'"
|
||||
v-loading="costDetailLoading"
|
||||
:data="costDetailList"
|
||||
:key="'lose-table-' + costDetailType"
|
||||
border
|
||||
stripe
|
||||
height="500">
|
||||
|
|
@ -209,6 +213,7 @@
|
|||
v-if="costDetailType === 'scrap'"
|
||||
v-loading="costDetailLoading"
|
||||
:data="costDetailList"
|
||||
:key="'scrap-table-' + costDetailType"
|
||||
border
|
||||
stripe
|
||||
height="500">
|
||||
|
|
@ -229,6 +234,7 @@
|
|||
v-if="costDetailType === 'total'"
|
||||
v-loading="costDetailLoading"
|
||||
:data="costDetailList"
|
||||
:key="'total-table-' + costDetailType"
|
||||
border
|
||||
stripe
|
||||
height="500">
|
||||
|
|
@ -236,12 +242,40 @@
|
|||
<el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="型号" align="center" prop="model" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="单位" align="center" prop="unit" width="80" />
|
||||
<el-table-column label="单价（元）" align="center" prop="unitPrice" width="100" />
|
||||
<el-table-column label="数量" align="center" prop="quantity" width="80" />
|
||||
<el-table-column label="归还数量" align="center" prop="returnQuantity" width="100" />
|
||||
<el-table-column label="租赁日期" align="center" prop="leaseDate" width="120" />
|
||||
<el-table-column label="退换日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="天数" align="center" prop="days" width="80" />
|
||||
<el-table-column label="单价（元）" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.costType === 'lease' ? (scope.row.unitPrice || 0) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.costType === 'lease'">{{ scope.row.quantity || 0 }}</span>
|
||||
<span v-else-if="scope.row.costType === 'repair'">{{ scope.row.repairQuantity || 0 }}</span>
|
||||
<span v-else-if="scope.row.costType === 'lose'">{{ scope.row.loseQuantity || 0 }}</span>
|
||||
<span v-else-if="scope.row.costType === 'scrap'">{{ scope.row.scrapQuantity || 0 }}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="归还数量" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.costType === 'lease' ? (scope.row.returnQuantity || 0) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="租赁日期" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.costType === 'lease' ? (scope.row.leaseDate || '-') : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="退还日期" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.costType === 'lease' ? (scope.row.returnDate || '-') : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="天数" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.costType === 'lease' ? (scope.row.days || 0) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="费用（元）" align="center" prop="cost" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.cost ? scope.row.cost.toFixed(2) : '0.00' }}
|
||||
|
|
@ -278,7 +312,7 @@ import Treeselect from "@riophae/vue-treeselect";
|
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import * as XLSX from 'xlsx';
|
||||
export default {
|
||||
name: 'CostApplyList',
|
||||
name: 'ReportHome',
|
||||
dicts: ['cost_status'],
|
||||
components: { Treeselect, vueEasyPrint },
|
||||
data() {
|
||||
|
|
@ -575,6 +609,7 @@ export default {
|
|||
this.costDetailType = costType;
|
||||
this.costDetailVisible = true;
|
||||
this.costDetailLoading = true;
|
||||
// 确保完全清空之前的数据，避免数据污染
|
||||
this.costDetailList = [];
|
||||
|
||||
try {
|
||||
|
|
@ -614,46 +649,68 @@ export default {
|
|||
sourceList = [];
|
||||
}
|
||||
|
||||
// 根据不同费用类型处理数据
|
||||
this.costDetailList = sourceList.map(item => {
|
||||
// 根据不同费用类型处理数据，创建完全独立的数据对象避免引用污染
|
||||
const newDetailList = sourceList.map(item => {
|
||||
// 创建深度拷贝的基础数据对象
|
||||
const baseData = {
|
||||
name: item.typeName || '',
|
||||
model: item.modelName || '',
|
||||
unit: item.mtUnitName || '',
|
||||
cost: item.costs || 0,
|
||||
costType: item.costType || costType
|
||||
name: (item.typeName || '').toString(),
|
||||
model: (item.modelName || '').toString(),
|
||||
unit: (item.mtUnitName || '').toString(),
|
||||
cost: Number(item.costs || 0),
|
||||
costType: (item.costType || costType).toString()
|
||||
};
|
||||
|
||||
// 根据费用类型添加特定字段
|
||||
// 根据费用类型添加特定字段，确保每个对象都是独立的
|
||||
if (costType === 'lease' || (costType === 'total' && item.costType === 'lease')) {
|
||||
return {
|
||||
...baseData,
|
||||
unitPrice: item.leasePrice || 0,
|
||||
quantity: item.num || 0,
|
||||
returnQuantity: item.backNum || 0,
|
||||
leaseDate: item.startTime || '',
|
||||
returnDate: item.endTime || '',
|
||||
days: item.leaseDays || 0
|
||||
name: baseData.name,
|
||||
model: baseData.model,
|
||||
unit: baseData.unit,
|
||||
cost: baseData.cost,
|
||||
costType: baseData.costType,
|
||||
unitPrice: Number(item.leasePrice || 0),
|
||||
quantity: Number(item.num || 0),
|
||||
returnQuantity: Number(item.backNum || 0),
|
||||
leaseDate: (item.startTime || '').toString(),
|
||||
returnDate: (item.endTime || '').toString(),
|
||||
days: Number(item.leaseDays || 0)
|
||||
};
|
||||
} else if (costType === 'repair' || (costType === 'total' && item.costType === 'repair')) {
|
||||
return {
|
||||
...baseData,
|
||||
repairQuantity: item.num || 0
|
||||
name: baseData.name,
|
||||
model: baseData.model,
|
||||
unit: baseData.unit,
|
||||
cost: baseData.cost,
|
||||
costType: baseData.costType,
|
||||
repairQuantity: Number(item.num || 0)
|
||||
};
|
||||
} else if (costType === 'lose' || (costType === 'total' && item.costType === 'lose')) {
|
||||
return {
|
||||
...baseData,
|
||||
loseQuantity: item.num || 0
|
||||
name: baseData.name,
|
||||
model: baseData.model,
|
||||
unit: baseData.unit,
|
||||
cost: baseData.cost,
|
||||
costType: baseData.costType,
|
||||
loseQuantity: Number(item.num || 0)
|
||||
};
|
||||
} else if (costType === 'scrap' || (costType === 'total' && item.costType === 'scrap')) {
|
||||
return {
|
||||
...baseData,
|
||||
scrapQuantity: item.num || 0
|
||||
name: baseData.name,
|
||||
model: baseData.model,
|
||||
unit: baseData.unit,
|
||||
cost: baseData.cost,
|
||||
costType: baseData.costType,
|
||||
scrapQuantity: Number(item.num || 0)
|
||||
};
|
||||
}
|
||||
|
||||
return baseData;
|
||||
});
|
||||
|
||||
// 使用$nextTick确保DOM完全更新后再赋值数据
|
||||
this.$nextTick(() => {
|
||||
this.costDetailList = newDetailList;
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError(response.msg || '获取费用详情失败');
|
||||
}
|
||||
|
|
@ -665,6 +722,15 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 费用详情弹窗关闭时的数据清理
|
||||
handleCostDetailDialogClosed() {
|
||||
// 完全清理数据，确保下次打开时是全新状态
|
||||
this.costDetailList = [];
|
||||
this.costDetailType = '';
|
||||
this.costDetailTitle = '';
|
||||
this.costDetailLoading = false;
|
||||
},
|
||||
|
||||
// 导出费用详情为Excel
|
||||
exportCostDetail() {
|
||||
if (!this.costDetailList || this.costDetailList.length === 0) {
|
||||
|
|
@ -688,7 +754,7 @@ export default {
|
|||
{ key: 'quantity', title: '数量' },
|
||||
{ key: 'returnQuantity', title: '归还数量' },
|
||||
{ key: 'leaseDate', title: '租赁日期' },
|
||||
{ key: 'returnDate', title: '退换日期' },
|
||||
{ key: 'returnDate', title: '退还日期' },
|
||||
{ key: 'days', title: '天数' },
|
||||
{ key: 'cost', title: '费用（元）' }
|
||||
];
|
||||
|
|
@ -737,7 +803,7 @@ export default {
|
|||
{ key: 'quantity', title: '数量' },
|
||||
{ key: 'returnQuantity', title: '归还数量' },
|
||||
{ key: 'leaseDate', title: '租赁日期' },
|
||||
{ key: 'returnDate', title: '退换日期' },
|
||||
{ key: 'returnDate', title: '退还日期' },
|
||||
{ key: 'days', title: '天数' },
|
||||
{ key: 'cost', title: '费用（元）' },
|
||||
{ key: 'costType', title: '费用类型' }
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
<el-table-column label="数量" align="center" prop="quantity" width="80" />
|
||||
<el-table-column label="归还数量" align="center" prop="returnQuantity" width="100" />
|
||||
<el-table-column label="租赁日期" align="center" prop="leaseDate" width="120" />
|
||||
<el-table-column label="退换日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="退还日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="天数" align="center" prop="days" width="80" />
|
||||
<el-table-column label="费用（元）" align="center" prop="cost" width="100">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
<el-table-column label="数量" align="center" prop="quantity" width="80" />
|
||||
<el-table-column label="归还数量" align="center" prop="returnQuantity" width="100" />
|
||||
<el-table-column label="租赁日期" align="center" prop="leaseDate" width="120" />
|
||||
<el-table-column label="退换日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="退还日期" align="center" prop="returnDate" width="120" />
|
||||
<el-table-column label="天数" align="center" prop="days" width="80" />
|
||||
<el-table-column label="费用（元）" align="center" prop="cost" width="100">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -264,7 +264,7 @@ import Treeselect from "@riophae/vue-treeselect";
|
|||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import * as XLSX from 'xlsx';
|
||||
export default {
|
||||
name: 'CostApplyList',
|
||||
name: 'UnreportHome',
|
||||
dicts: ['cost_status'],
|
||||
components: { Treeselect, vueEasyPrint },
|
||||
data() {
|
||||
|
|
@ -720,7 +720,7 @@ export default {
|
|||
{ key: 'quantity', title: '数量' },
|
||||
{ key: 'returnQuantity', title: '归还数量' },
|
||||
{ key: 'leaseDate', title: '租赁日期' },
|
||||
{ key: 'returnDate', title: '退换日期' },
|
||||
{ key: 'returnDate', title: '退还日期' },
|
||||
{ key: 'days', title: '天数' },
|
||||
{ key: 'cost', title: '费用（元）' }
|
||||
];
|
||||
|
|
@ -769,7 +769,7 @@ export default {
|
|||
{ key: 'quantity', title: '数量' },
|
||||
{ key: 'returnQuantity', title: '归还数量' },
|
||||
{ key: 'leaseDate', title: '租赁日期' },
|
||||
{ key: 'returnDate', title: '退换日期' },
|
||||
{ key: 'returnDate', title: '退还日期' },
|
||||
{ key: 'days', title: '天数' },
|
||||
{ key: 'cost', title: '费用（元）' },
|
||||
{ key: 'costType', title: '费用类型' }
|
||||
|
|
|
|||
|
|
@ -6,19 +6,21 @@
|
|||
:pageContent="pageContent"
|
||||
@goBack="goBack"
|
||||
/>
|
||||
<component
|
||||
:is="isShowComponent"
|
||||
:row="rowData"
|
||||
@goDetail="goDetail"
|
||||
@goBackPage="goBack"
|
||||
/>
|
||||
<keep-alive>
|
||||
<component
|
||||
:is="isShowComponent"
|
||||
:row="rowData"
|
||||
@goDetail="goDetail"
|
||||
@goBackPage="goBack"
|
||||
/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '@/components/pageHeader'
|
||||
import ApplyHome from './component/applyHome.vue'
|
||||
import ApplyDetail from './component/applyDetail.vue'
|
||||
import PageHeader from '@/components/pageHeader'
|
||||
import ApplyHome from './component/applyHome.vue'
|
||||
import ApplyDetail from './component/applyDetail.vue'
|
||||
export default {
|
||||
name: 'CostApplyList',
|
||||
components: {
|
||||
|
|
@ -29,18 +31,18 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isShowComponent: 'ApplyHome',
|
||||
pageContent: '',
|
||||
pageContent: '',
|
||||
rowData: null,
|
||||
isView: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
methods: {
|
||||
// 退料编辑
|
||||
goDetail(rowData) {
|
||||
this.rowData = rowData;
|
||||
this.pageContent = '结算详情';
|
||||
this.isShowComponent = 'ApplyDetail';
|
||||
},
|
||||
},
|
||||
goBack() {
|
||||
this.isShowComponent = 'ApplyHome'
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue