pda-cli/src/components/storefabric/FabricOutScanDetail.vue

<template>
	<view class="fabric-out-scanDetail">
		<view class="fabric-out-scanDetailRow fabric-out-scanDetailRow--2col">
			<text class="fabric-out-scanDetailCell">已扫条数：{{ formatCount(detail.scanned_roll) }}条</text>
			<text class="fabric-out-scanDetailCell">机台库存：{{ formatRoll(detail.machine_stock) }}条</text>
		</view>
		<view class="fabric-out-scanDetailRow fabric-out-scanDetailRow--2col">
			<text class="fabric-out-scanDetailCell">合计条数：{{ formatRoll(detail.total_roll) }}条</text>
			<text class="fabric-out-scanDetailCell">合计重量：{{ formatWeight(detail.total_weight) }}KG</text>
		</view>
		<view class="fabric-out-scanDetailRow">
			<text class="fabric-out-scanDetailLabel">客户：</text>
			<text class="fabric-out-scanDetailValue">{{ detail.customer_name || '' }}</text>
		</view>
		<view class="fabric-out-scanDetailRow fabric-out-scanDetailRow--2col">
			<view class="fabric-out-scanDetailCheck" @click="toggleGroup('produce_order_no')">
				<checkbox :checked="isGroupChecked('produce_order_no')" />
				<text class="fabric-out-scanDetailLabel">生产通知单：</text>
				<text class="fabric-out-scanDetailValue">{{ detail.produce_order_no || '' }}</text>
			</view>
			<view class="fabric-out-scanDetailCheck" @click="toggleGroup('grey_fabric_code')">
				<checkbox :checked="isGroupChecked('grey_fabric_code')" />
				<text class="fabric-out-scanDetailLabel">布编：</text>
				<text class="fabric-out-scanDetailValue">{{ detail.grey_fabric_code || '' }}</text>
			</view>
		</view>
		<view class="fabric-out-scanDetailRow">
			<text class="fabric-out-scanDetailLabel">布名：</text>
			<text class="fabric-out-scanDetailValue">{{ detail.grey_fabric_name || '' }}</text>
		</view>
		<view class="fabric-out-scanDetailRow">
			<view class="fabric-out-scanDetailCheck" @click="toggleGroup('yarn_batch')">
				<checkbox :checked="isGroupChecked('yarn_batch')" />
				<text class="fabric-out-scanDetailLabel">纱批：</text>
				<text class="fabric-out-scanDetailValue">{{ detail.yarn_batch || '' }}</text>
			</view>
		</view>
		<view class="fabric-out-scanDetailRow fabric-out-scanDetailRow--2col">
			<view class="fabric-out-scanDetailCheck" @click="toggleGroup('machine_number')">
				<checkbox :checked="isGroupChecked('machine_number')" />
				<text class="fabric-out-scanDetailLabel">机号：</text>
				<text class="fabric-out-scanDetailValue">{{ detail.machine_number || '' }}</text>
			</view>
			<view class="fabric-out-scanDetailCell">
				<text class="fabric-out-scanDetailLabel">布号：</text>
				<text class="fabric-out-scanDetailValue">{{ detail.volume_number || '' }}</text>
			</view>
		</view>
		<view class="fabric-out-scanDetailRow">
			<text class="fabric-out-scanDetailLabel">外部卷号：</text>
			<text class="fabric-out-scanDetailValue">{{ detail.extern_volume_number || '-' }}</text>
		</view>
		<view class="fabric-out-scanDetailRow fabric-out-scanDetailRow--2col">
			<view class="fabric-out-scanDetailCheck" @click="toggleGroup('grey_fabric_level_name')">
				<checkbox :checked="isGroupChecked('grey_fabric_level_name')" />
				<text class="fabric-out-scanDetailLabel">等级：</text>
				<text class="fabric-out-scanDetailValue">{{ detail.grey_fabric_level_name || '' }}</text>
			</view>
			<view class="fabric-out-scanDetailCell">
				<text class="fabric-out-scanDetailLabel">重量：</text>
				<text class="fabric-out-scanDetailValue">{{ formatWeight(detail.weight) }}Kg</text>
			</view>
		</view>

		<scroll-view scroll-x class="fabric-out-scanDetailTableScroll">
			<view class="fabric-out-scanDetailTable" :style="{ width: tableWidth }">
				<view class="fabric-out-scanDetailTableRow fabric-out-scanDetailTableHead">
					<view
						v-for="col in columns"
						:key="col.key"
						class="fabric-out-scanDetailTableCell"
						:style="cellStyle(col)"
					>{{ col.label }}</view>
				</view>
				<view v-if="!tableRows.length" class="fabric-out-scanDetailEmpty">暂无数据~~</view>
				<view
					v-for="(row, rowIndex) in tableRows"
					:key="rowIndex"
					class="fabric-out-scanDetailTableRow"
				>
					<view
						v-for="col in columns"
						:key="col.key"
						class="fabric-out-scanDetailTableCell"
						:style="cellStyle(col)"
					>{{ formatCell(row, col.key) }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	SCAN_DETAIL_TABLE_COLUMNS,
	SCAN_GROUP_OPTIONS,
	getScanDetailTableWidth,
	buildScanDetailTableRows,
} from '@/common/storeFabricBusinessOut';

const LOCKABLE_GROUP_KEYS = SCAN_GROUP_OPTIONS.map((item) => item.key);

export default {
	props: {
		detail: { type: Object, default: () => ({}) },
		itemData: { type: Array, default: () => [] },
		groupKeys: { type: Array, default: () => [] },
	},
	computed: {
		columns() {
			return SCAN_DETAIL_TABLE_COLUMNS;
		},
		tableWidth() {
			return getScanDetailTableWidth(this.columns);
		},
		tableRows() {
			return buildScanDetailTableRows(this.itemData, this.groupKeys);
		},
	},
	methods: {
		cellStyle(col) {
			return {
				width: `${col.width}rpx`,
				minWidth: `${col.width}rpx`,
				maxWidth: `${col.width}rpx`,
			};
		},
		isGroupChecked(key) {
			return (this.groupKeys || []).includes(key);
		},
		toggleGroup(key) {
			if (!LOCKABLE_GROUP_KEYS.includes(key)) return;
			const next = [...(this.groupKeys || [])];
			const index = next.indexOf(key);
			if (index >= 0) next.splice(index, 1);
			else next.push(key);
			this.$emit('group-change', next);
		},
		formatRoll(value) {
			const n = Number(value || 0);
			return Number.isInteger(n) ? n : Number(n.toFixed(2));
		},
		formatCount(value) {
			return Number(value || 0);
		},
		formatWeight(value) {
			const n = Number(value || 0);
			return Number(n.toFixed(2));
		},
		formatCell(row, key) {
			if (key === 'roll') return this.formatRoll(row.roll);
			if (key === 'weight') return this.formatWeight(row.weight);
			return row[key] || '';
		},
	},
};
</script>

<style scoped lang="scss">
@import '@/pages/storefabric/storeFabricBusinessOutPage.scss';
</style>