<template>
|
<vol-box v-model="show" title="胶线台账汇总" :width="1200" :height="750">
|
<template #content>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form-container">
|
<div style="display: flex;flex-wrap:wrap;align-items: center;gap: 10px;margin-bottom:10px;">
|
<el-form-item label="供应商编码:" prop="supplyCode" style="margin-bottom: 0;flex:1;">
|
<el-input
|
v-model="form.supplyCode"
|
placeholder="请输入供应商编码"
|
clearable
|
@keyup.enter="getSummary"
|
ref="supplyInput"
|
:disabled="loading"
|
/>
|
</el-form-item>
|
|
<!-- 🔥 修复后的日期选择，和你截图样式完全一致 -->
|
<el-form-item label="借出日期:" style="margin-bottom: 0;">
|
<div style="display: flex; align-items: center; gap: 4px;">
|
<el-date-picker
|
v-model="form.startDate"
|
type="date"
|
placeholder="yyyy-MM-dd"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
style="width: 140px;"
|
:disabled="loading"
|
/>
|
<span>至</span>
|
<el-date-picker
|
v-model="form.endDate"
|
type="date"
|
placeholder="yyyy-MM-dd"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
style="width: 140px;"
|
:disabled="loading"
|
/>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="状态:" style="margin-bottom: 0;width:180px;">
|
<el-select v-model="form.status" placeholder="全部" clearable :disabled="loading">
|
<el-option label="全部" value="" />
|
<el-option label="全部归还" value="全部归还" />
|
<el-option label="部分归还" value="部分归还" />
|
<el-option label="未归还" value="未归还" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item style="margin-bottom: 0;">
|
<el-button type="primary" @click="getSummary" :loading="loading">
|
查询汇总
|
</el-button>
|
<el-button @click="resetForm">重置</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
|
<div class="table-container">
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
border
|
stripe
|
style="width:100%;"
|
show-summary
|
:summary-method="getSummaries"
|
>
|
<el-table-column label="供应商编码" prop="supplyCode" width="160" align="center" />
|
<el-table-column label="借出日期" prop="borrowTime" width="180" align="center" />
|
<el-table-column label="借出数量" prop="unreturnedQuantity" width="130" align="center" />
|
<el-table-column label="已归还数量" prop="returnedQty" width="130" align="center" />
|
<el-table-column label="待归还数量" prop="pendingReturnQty" width="130" align="center" />
|
<el-table-column label="状态" prop="status" min-width="120"/>
|
</el-table>
|
|
<div v-if="!loading && tableData.length === 0" class="text-center py-10">
|
暂无数据
|
</div>
|
</div>
|
</template>
|
|
<template #footer>
|
<div class="dialog-footer text-right">
|
<el-button type="success" icon="el-icon-download" @click="exportExcel">
|
导出Excel
|
</el-button>
|
<el-button @click="show = false">关闭</el-button>
|
</div>
|
</template>
|
</vol-box>
|
</template>
|
|
<script>
|
import VolBox from '@/components/basic/VolBox.vue'
|
|
export default {
|
components: { VolBox },
|
props: {
|
value: { type: Boolean, default: false }
|
},
|
data() {
|
const validateSupply = (rule, value, callback) => {
|
if (!value) return callback(new Error('请输入供应商编码'))
|
callback()
|
}
|
return {
|
show: false,
|
loading: false,
|
form: {
|
supplyCode: '',
|
startDate: '',
|
endDate: '',
|
status: ''
|
},
|
tableData: [],
|
rules: {
|
supplyCode: [{ validator: validateSupply, trigger: 'blur' }]
|
}
|
}
|
},
|
methods: {
|
open() {
|
this.show = true
|
this.$nextTick(() => this.$refs.supplyInput.focus())
|
},
|
|
setRowStatus(row) {
|
const pending = Number(row.pendingReturnQty || 0)
|
if (pending === 0) {
|
row.status = '全部归还'
|
} else if (row.returnedQty > 0) {
|
row.status = '部分归还'
|
} else {
|
row.status = '未归还'
|
}
|
},
|
|
getSummaries(param) {
|
const sums = ['合计', '', 0, 0, 0, '']
|
this.tableData.forEach(item => {
|
sums[2] += Number(item.unreturnedQuantity || 0)
|
sums[3] += Number(item.returnedQty || 0)
|
sums[4] += Number(item.pendingReturnQty || 0)
|
})
|
return sums
|
},
|
|
exportExcel() {
|
if (this.tableData.length === 0) {
|
this.$message.warning('暂无数据可导出')
|
return
|
}
|
|
// 计算合计
|
let totalUnreturn = 0
|
let totalReturn = 0
|
let totalPending = 0
|
|
this.tableData.forEach(item => {
|
totalUnreturn += Number(item.unreturnedQuantity || 0)
|
totalReturn += Number(item.returnedQty || 0)
|
totalPending += Number(item.pendingReturnQty || 0)
|
})
|
|
// 表头
|
const headers = '供应商编码,借出日期,借出数量,已归还数量,待归还数量,状态\n'
|
let csv = headers
|
|
// 拼接数据
|
this.tableData.forEach(item => {
|
csv += `${item.supplyCode},${item.borrowTime},${item.unreturnedQuantity},${item.returnedQty},${item.pendingReturnQty},${item.status}\n`
|
})
|
|
// 拼接合计行
|
csv += `合计,,${totalUnreturn},${totalReturn},${totalPending},\n`
|
|
// 下载
|
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
|
const link = document.createElement('a')
|
link.href = URL.createObjectURL(blob)
|
link.download = '胶线台账汇总.csv'
|
link.click()
|
this.$message.success('导出成功')
|
},
|
|
async getSummary() {
|
await this.$refs.form.validate()
|
let supplyCode = this.form.supplyCode.trim()
|
this.loading = true
|
try {
|
const res = await this.http.post(
|
"/api/PlasticContainerLedger/GlueLineLedgerSummary?supplyCode=" + supplyCode
|
)
|
if (res.status && res.code === 0) {
|
let list = res.data || []
|
list.forEach(item => this.setRowStatus(item))
|
|
// 日期筛选
|
if (this.form.startDate && this.form.endDate) {
|
list = list.filter(item => {
|
return item.borrowTime >= this.form.startDate && item.borrowTime <= this.form.endDate
|
})
|
} else if (this.form.startDate) {
|
list = list.filter(item => item.borrowTime >= this.form.startDate)
|
} else if (this.form.endDate) {
|
list = list.filter(item => item.borrowTime <= this.form.endDate)
|
}
|
|
if (this.form.status) {
|
list = list.filter(item => item.status === this.form.status)
|
}
|
|
this.tableData = list
|
this.$message.success("查询成功")
|
}
|
} catch (error) {
|
this.$message.error("请求失败")
|
} finally {
|
this.loading = false
|
}
|
},
|
|
resetForm() {
|
this.form = {
|
supplyCode: '',
|
startDate: '',
|
endDate: '',
|
status: ''
|
}
|
this.tableData = []
|
this.$refs.form.clearValidate()
|
}
|
},
|
watch: {
|
value(val) { this.show = val },
|
show(val) { if (!val) setTimeout(() => this.resetForm(), 200) }
|
}
|
}
|
</script>
|
|
<style scoped>
|
.table-container { height: 450px; }
|
.py-10 { text-align: center; padding: 30px 0; color: #999; }
|
.dialog-footer { text-align: right; padding: 10px 0; }
|
</style>
|
