<script setup lang="tsx">
|
import { computed, ref } from 'vue';
|
import { NDataTable } from 'naive-ui';
|
import { $t } from '@/locales';
|
|
defineOptions({
|
name: 'StoreSilkDetail'
|
});
|
|
interface StoreSilkDetailVo {
|
fsNum: string;
|
siloNum: string;
|
pipeNum: string;
|
equNo: string;
|
shiftCode: string;
|
shiftStartTime: string;
|
shiftEndTime: string;
|
output: number | null;
|
}
|
|
interface Props {
|
rollerDetailList?: StoreSilkDetailVo[];
|
packerDetailList?: StoreSilkDetailVo[];
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
rollerDetailList: () => [],
|
packerDetailList: () => []
|
});
|
|
function calcRollerBox(val: unknown) {
|
if (val === null || val === undefined) return null;
|
const v = Number(val) / 50;
|
if (!Number.isFinite(v)) return null;
|
return v;
|
}
|
|
function calcPackerBox(val: unknown) {
|
if (val === null || val === undefined) return null;
|
const v = Number(val) / 10 / 250;
|
if (!Number.isFinite(v)) return null;
|
return v;
|
}
|
|
type DetailType = 'roller' | 'packer';
|
|
const detailType = ref<DetailType>('roller');
|
|
const detailList = computed(() => {
|
return detailType.value === 'roller' ? props.rollerDetailList : props.packerDetailList;
|
});
|
|
const columns: NaiveUI.TableColumn<StoreSilkDetailVo>[] = [
|
{
|
key: 'index',
|
title: $t('common.index'),
|
align: 'center',
|
width: 56,
|
render: (_: any, index: number) => index + 1
|
},
|
{
|
key: 'fsNum',
|
title: '喂丝机号',
|
align: 'center',
|
width: 84
|
},
|
{
|
key: 'siloNum',
|
title: '储丝柜号',
|
align: 'center',
|
width: 84
|
},
|
{
|
key: 'pipeNum',
|
title: '管道号',
|
align: 'center',
|
width: 84
|
},
|
{
|
key: 'equNo',
|
title: '机台号',
|
align: 'center',
|
width: 72
|
},
|
{
|
key: 'shiftCode',
|
title: '班次代码',
|
align: 'center',
|
width: 88,
|
render: (row: StoreSilkDetailVo) => {
|
const map: Record<string, string> = {
|
'1': '早班',
|
'2': '中班',
|
'3': '晚班'
|
};
|
return map[row.shiftCode] || row.shiftCode;
|
}
|
},
|
{
|
key: 'shiftStartTime',
|
title: '班次开始时间',
|
align: 'center',
|
width: 148
|
},
|
{
|
key: 'shiftEndTime',
|
title: '班次结束时间',
|
align: 'center',
|
width: 148
|
},
|
{
|
key: 'output',
|
title: '产量(千支)',
|
align: 'center',
|
width: 96,
|
render: (row: StoreSilkDetailVo) => {
|
if (row.output === null || row.output === undefined) return '-';
|
const v = Number(row.output);
|
if (!Number.isFinite(v)) return '-';
|
return v;
|
}
|
},
|
{
|
key: 'outputBox',
|
title: '产量(箱)',
|
align: 'center',
|
width: 84,
|
render: (row: StoreSilkDetailVo) => {
|
const v = detailType.value === 'roller' ? calcRollerBox(row.output) : calcPackerBox(row.output);
|
if (v === null) return '-';
|
return v.toFixed(1);
|
}
|
}
|
];
|
</script>
|
|
<template>
|
<NCard
|
title="产量明细"
|
:bordered="false"
|
size="small"
|
class="flex-col-stretch card-wrapper"
|
:content-style="{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }"
|
>
|
<template #header-extra>
|
<NSpace :size="8">
|
<NButton
|
size="small"
|
ghost
|
:type="detailType === 'roller' ? 'primary' : 'default'"
|
@click="detailType = 'roller'"
|
>
|
卷接
|
</NButton>
|
<NButton
|
size="small"
|
ghost
|
:type="detailType === 'packer' ? 'primary' : 'default'"
|
@click="detailType = 'packer'"
|
>
|
包装
|
</NButton>
|
</NSpace>
|
</template>
|
|
<div v-if="!detailList || detailList.length === 0" class="h-full flex-center text-gray-400">
|
请点击上方表格行查看详情
|
</div>
|
<NDataTable v-else :columns="columns as any" :data="detailList" flex-height class="flex-1-hidden" />
|
</NCard>
|
</template>
|
|
<style scoped>
|
:deep(.n-card__content) {
|
padding: 8px 12px;
|
}
|
|
:deep(.n-data-table-th),
|
:deep(.n-data-table-td) {
|
padding: 4px 6px;
|
}
|
</style>
|
