86 lines
2.6 KiB
Vue
86 lines
2.6 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>
|
||
|
|
<!-- 默认渲染 -->
|
||
|
|
<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"
|
||
|
|
@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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|