249 lines
6.2 KiB
Vue
249 lines
6.2 KiB
Vue
<template>
|
||
<view>
|
||
<view class="fabric-out-sectionTitle">{{ title }}</view>
|
||
<slot name="before-list" />
|
||
<view class="fabric-out-detailList">
|
||
<dataNull
|
||
v-if="!groups.length"
|
||
src="/src/static/img/chahua/gjNull.png"
|
||
title="暂无出仓明细"
|
||
title1="扫码后将在此展示"
|
||
/>
|
||
<view
|
||
v-for="product in groups"
|
||
:key="product.group_key"
|
||
class="fabric-out-detailCard process-in-productCard"
|
||
>
|
||
<view class="process-in-productHead">
|
||
<text class="process-in-productTitle">
|
||
{{ product.product_code || '-' }}<text v-if="product.product_name" class="process-in-subText">{{ ' ' + product.product_name }}</text>
|
||
</text>
|
||
<text class="process-in-productSum">
|
||
匹数 {{ product.out_roll }} / 数量 {{ product.out_weight }}
|
||
</text>
|
||
</view>
|
||
|
||
<view
|
||
v-for="color in product.colors"
|
||
:key="color.group_key"
|
||
class="process-in-colorBlock"
|
||
>
|
||
<view class="process-in-colorHead">
|
||
<text class="process-in-colorTitle">
|
||
色号 {{ color.product_color_code || '-' }}<text v-if="color.product_color_name" class="process-in-subText">{{ ' ' + color.product_color_name }}</text>
|
||
</text>
|
||
<text class="process-in-colorSum">
|
||
匹数 {{ color.out_roll }} / 数量 {{ color.out_weight }}
|
||
</text>
|
||
</view>
|
||
<view class="process-in-colorMeta">
|
||
<text>染整单：{{ color.quote_order_no || '-' }}</text>
|
||
<text>缸号：{{ color.dye_factory_dyelot_number || '-' }}</text>
|
||
</view>
|
||
|
||
<view class="process-in-fcTitle">细码（{{ color.fine_codes.length }}）</view>
|
||
<view v-if="!color.fine_codes.length" class="process-in-fcEmpty">暂无细码</view>
|
||
<scroll-view v-else scroll-x class="process-in-fcScroll">
|
||
<view class="process-in-fcTable" :style="{ width: fineTableWidth }">
|
||
<view class="process-in-fcRow process-in-fcHead">
|
||
<view
|
||
v-for="col in fineColumns"
|
||
:key="col.key"
|
||
class="process-in-fcCell"
|
||
:style="cellStyle(col)"
|
||
>{{ col.label }}</view>
|
||
</view>
|
||
<view
|
||
v-for="(fc, fcIndex) in color.fine_codes"
|
||
:key="fc.id || fcIndex"
|
||
class="process-in-fcRow"
|
||
>
|
||
<view
|
||
v-for="col in fineColumns"
|
||
:key="col.key"
|
||
class="process-in-fcCell"
|
||
:class="{ 'process-in-fcAction': col.key === 'action' }"
|
||
:style="cellStyle(col)"
|
||
@click="onCellTap(col.key, fc)"
|
||
>{{ formatFineCell(fc, col.key) }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-if="deletable && color.fine_codes.length" class="process-in-fcTip">
|
||
勾选上方「删除」后扫码，或点击「删除」列移除细码
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { buildItemGroups } from '@/common/storeGoodsProcessOut';
|
||
|
||
const FINE_COLUMNS = [
|
||
{ label: '卷号', key: 'volume_number', width: 110 },
|
||
{ label: '外部卷号', key: 'extern_volume_number', width: 140 },
|
||
{ label: '匹数', key: 'roll', width: 100 },
|
||
{ label: '数量', key: 'weight', width: 130 },
|
||
{ label: '条码', key: 'bar_code', width: 260 },
|
||
{ label: '仓位', key: 'warehouse_bin_name', width: 140 },
|
||
{ label: '缸号', key: 'dye_factory_dyelot_number', width: 160 },
|
||
];
|
||
|
||
export default {
|
||
props: {
|
||
list: { type: Array, default: () => [] },
|
||
title: { type: String, default: '出仓明细' },
|
||
deletable: { type: Boolean, default: false },
|
||
},
|
||
computed: {
|
||
groups() {
|
||
return buildItemGroups(this.list);
|
||
},
|
||
fineColumns() {
|
||
if (!this.deletable) return FINE_COLUMNS;
|
||
return [...FINE_COLUMNS, { label: '操作', key: 'action', width: 100 }];
|
||
},
|
||
fineTableWidth() {
|
||
const total = this.fineColumns.reduce((sum, col) => sum + (col.width || 100), 0);
|
||
return `${total}rpx`;
|
||
},
|
||
},
|
||
methods: {
|
||
cellStyle(col) {
|
||
return {
|
||
width: `${col.width}rpx`,
|
||
minWidth: `${col.width}rpx`,
|
||
maxWidth: `${col.width}rpx`,
|
||
};
|
||
},
|
||
formatFineCell(fc, key) {
|
||
if (key === 'action') return '删除';
|
||
const val = fc[key];
|
||
if (val === 0) return '0';
|
||
return val != null && val !== '' ? val : '-';
|
||
},
|
||
onCellTap(key, fc) {
|
||
if (!this.deletable || key !== 'action') return;
|
||
this.$emit('delete', fc);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/pages/storefabric/storeFabricBusinessOutPage.scss';
|
||
|
||
.process-in-productCard {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.process-in-productHead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background: #f0f7ff;
|
||
border-bottom: 1rpx solid #e6f0ff;
|
||
}
|
||
.process-in-productTitle {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
flex: 1;
|
||
padding-right: 16rpx;
|
||
}
|
||
.process-in-productSum,
|
||
.process-in-colorSum {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
flex-shrink: 0;
|
||
}
|
||
.process-in-subText {
|
||
font-weight: normal;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
.process-in-colorBlock {
|
||
padding: 16rpx 20rpx 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.process-in-colorBlock:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.process-in-colorHead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.process-in-colorTitle {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
flex: 1;
|
||
padding-right: 12rpx;
|
||
}
|
||
.process-in-colorMeta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx 24rpx;
|
||
font-size: 28rpx;
|
||
color: #888;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.process-in-fcTitle {
|
||
font-size: 28rpx;
|
||
color: #2979ff;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.process-in-fcEmpty {
|
||
font-size: 28rpx;
|
||
color: #bbb;
|
||
padding: 8rpx 0;
|
||
}
|
||
.process-in-fcScroll {
|
||
width: 100%;
|
||
}
|
||
.process-in-fcTable {
|
||
border: 1rpx solid #eee;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
.process-in-fcRow {
|
||
display: flex;
|
||
align-items: stretch;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.process-in-fcRow:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.process-in-fcHead {
|
||
background: #fafafa;
|
||
}
|
||
.process-in-fcCell {
|
||
box-sizing: border-box;
|
||
padding: 14rpx 10rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border-right: 1rpx solid #f0f0f0;
|
||
word-break: break-all;
|
||
}
|
||
.process-in-fcHead .process-in-fcCell {
|
||
font-weight: bold;
|
||
color: #666;
|
||
}
|
||
.process-in-fcCell:last-child {
|
||
border-right: none;
|
||
}
|
||
.process-in-fcAction {
|
||
color: #f5222d;
|
||
}
|
||
.process-in-fcTip {
|
||
margin-top: 8rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|