141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
<template>
|
|
<view class="fabric-out-summary">
|
|
<scroll-view scroll-x class="fabric-out-summaryScroll">
|
|
<view class="fabric-out-summaryInner" :style="{ width: tableWidth }">
|
|
<t-table border="1" border-color="#e1e1e1">
|
|
<t-tr font-size="18" color="#3e3e3e" align="center">
|
|
<t-th
|
|
v-for="col in headers"
|
|
:key="col.key"
|
|
align="center"
|
|
>
|
|
<view class="fabric-out-th" :style="cellStyle(col)">{{ col.label }}</view>
|
|
</t-th>
|
|
</t-tr>
|
|
<t-tr
|
|
v-for="(row, rowIndex) in contents"
|
|
:key="row.group_key || rowIndex"
|
|
font-size="18"
|
|
color="#333"
|
|
align="center"
|
|
>
|
|
<t-td
|
|
v-for="col in headers"
|
|
:key="col.key"
|
|
align="center"
|
|
>
|
|
<view
|
|
class="fabric-out-td"
|
|
:style="cellStyle(col)"
|
|
@click="onCellClick(col.key, row)"
|
|
>{{ formatCell(row, col.key) }}</view>
|
|
</t-td>
|
|
</t-tr>
|
|
</t-table>
|
|
</view>
|
|
</scroll-view>
|
|
<view v-if="!contents.length" class="fabric-out-summaryEmpty">暂无数据~~</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tTable from '@/components/t-table/t-table.vue';
|
|
import tTr from '@/components/t-table/t-tr.vue';
|
|
import tTh from '@/components/t-table/t-th.vue';
|
|
import tTd from '@/components/t-table/t-td.vue';
|
|
import { SUMMARY_TABLE_COLUMNS } from '@/common/storeFabricBusinessOut';
|
|
|
|
export default {
|
|
components: { tTable, tTr, tTh, tTd },
|
|
props: {
|
|
rows: { type: Array, default: () => [] },
|
|
},
|
|
computed: {
|
|
headers() {
|
|
return SUMMARY_TABLE_COLUMNS;
|
|
},
|
|
tableWidth() {
|
|
const total = this.headers.reduce((sum, col) => sum + (col.width || 160), 0);
|
|
return `${total}rpx`;
|
|
},
|
|
contents() {
|
|
return (this.rows || []).map((row) => ({
|
|
...row,
|
|
grey_fabric_code: row.grey_fabric_code || '',
|
|
grey_fabric_name: row.grey_fabric_name || '',
|
|
yarn_batch: row.yarn_batch || '',
|
|
machine_number: row.machine_number || '',
|
|
roll: row.roll != null && row.roll !== '' ? String(row.roll) : '0',
|
|
weight: row.weight != null && row.weight !== '' ? String(row.weight) : '0',
|
|
}));
|
|
},
|
|
},
|
|
methods: {
|
|
cellStyle(col) {
|
|
const width = `${col.width || 160}rpx`;
|
|
return {
|
|
width,
|
|
minWidth: width,
|
|
maxWidth: width,
|
|
};
|
|
},
|
|
formatCell(row, key) {
|
|
const val = row[key];
|
|
if (val === 0) return '0';
|
|
return val != null && val !== '' ? val : '-';
|
|
},
|
|
onCellClick(key, row) {
|
|
this.$emit('cell-click', { key, lineData: row });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/common/pda-typography.scss';
|
|
|
|
.fabric-out-summary {
|
|
background: #fff;
|
|
margin-top: 16rpx;
|
|
}
|
|
.fabric-out-summaryScroll {
|
|
width: 100%;
|
|
}
|
|
.fabric-out-summaryInner {
|
|
min-width: 100%;
|
|
}
|
|
.fabric-out-summary ::v-deep .t-table {
|
|
width: 100%;
|
|
}
|
|
.fabric-out-summary ::v-deep .t-th,
|
|
.fabric-out-summary ::v-deep .t-td {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
padding: 0;
|
|
min-height: $pda-row-min-height;
|
|
box-sizing: border-box;
|
|
}
|
|
.fabric-out-th,
|
|
.fabric-out-td {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: $pda-row-min-height;
|
|
padding: 16rpx 12rpx;
|
|
font-size: $pda-font-body;
|
|
word-break: break-all;
|
|
text-align: center;
|
|
}
|
|
.fabric-out-th {
|
|
font-weight: bold;
|
|
}
|
|
.fabric-out-summaryEmpty {
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: $pda-font-body;
|
|
line-height: $pda-row-min-height;
|
|
background: #fff;
|
|
}
|
|
</style>
|