4478921d9b
- 新增镀锌1预填接口和报表字段 - 优化标签材质显示逻辑，移除content前缀 - 增加报表分页大小选项和耗时格式化 - 扩展报表可选列和默认列配置 - 改进报表统计计算逻辑，考虑质量状态 - 调整报表页面大小限制为99999
122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
<template>
|
||
<div class="coil-table">
|
||
<!-- 其他props -->
|
||
<el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border>
|
||
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.title" :width="column.width" :align="column.align">
|
||
<template slot-scope="scope">
|
||
<!-- 特殊 prop 渲染逻辑 -->
|
||
<template v-if="column.prop === 'enterCoilNo'">
|
||
<coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
|
||
</template>
|
||
<template v-else-if="column.prop === 'currentCoilNo'">
|
||
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
|
||
</template>
|
||
<template v-else-if="column.prop === 'itemId'">
|
||
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
|
||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
|
||
</template>
|
||
<template v-else-if="column.prop === 'status'">
|
||
{{ scope.row.status === 0 ? '在库' : '已出库' }}
|
||
</template>
|
||
<!-- 生产耗时，单位分钟，渲染为xx天xx小时xx分钟 -->
|
||
<template v-else-if="column.prop === 'productionDuration'">
|
||
{{ formatProductionDuration(scope.row.productionDuration) }}
|
||
</template>
|
||
<!-- 默认渲染 -->
|
||
<template v-else>
|
||
{{ scope.row[column.prop] }}
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
v-if="showPagination"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
:page-size.sync="pageSize"
|
||
:page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
|
||
|
||
export default {
|
||
name: 'CoilTable',
|
||
components: {
|
||
ProductInfo,
|
||
RawMaterialInfo,
|
||
CoilNo,
|
||
},
|
||
props: {
|
||
columns: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
data: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
pageNum: 1,
|
||
pageSize: 1000,
|
||
}
|
||
},
|
||
computed: {
|
||
// 内部实现前端分页逻辑
|
||
tableData() {
|
||
return this.data.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
|
||
},
|
||
// 计算总页数
|
||
totalPage() {
|
||
return Math.ceil(this.data.length / this.pageSize)
|
||
},
|
||
// 计算总条数
|
||
total() {
|
||
return this.data.length
|
||
},
|
||
// 是否展示分页组件
|
||
showPagination() {
|
||
return this.totalPage > 1
|
||
}
|
||
},
|
||
methods: {
|
||
// 分页大小改变时触发
|
||
handleSizeChange(val) {
|
||
this.pageSize = val
|
||
this.pageNum = 1
|
||
},
|
||
// 分页当前页改变时触发
|
||
handleCurrentChange(val) {
|
||
this.pageNum = val
|
||
},
|
||
// 生产耗时，单位分钟，渲染为xx天xx小时xx分钟
|
||
formatProductionDuration(duration) {
|
||
if (!duration || isNaN(duration)) {
|
||
return '0分钟'
|
||
}
|
||
const days = Math.floor(duration / 1440)
|
||
const hours = Math.floor((duration - days * 1440) / 60)
|
||
const minutes = duration - days * 1440 - hours * 60
|
||
let result = ''
|
||
if (days > 0) {
|
||
result += `${days}天`
|
||
}
|
||
if (hours > 0) {
|
||
result += `${hours}小时`
|
||
}
|
||
if (minutes > 0 || (days === 0 && hours === 0)) {
|
||
result += `${minutes}分钟`
|
||
}
|
||
return result
|
||
}
|
||
}
|
||
}
|
||
</script> |