| | |
| | | import ButtonIcon from '@/components/custom/button-icon.vue'; |
| | | import StoreSilkOperateDrawer from './modules/store-silk-operate-drawer.vue'; |
| | | import StoreSilkSearch from './modules/store-silk-search.vue'; |
| | | import StoreSilkDetail from './modules/store-silk-detail.vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'StoreSilkList' |
| | |
| | | const appStore = useAppStore(); |
| | | const { download } = useDownload(); |
| | | const { hasAuth } = useAuth(); |
| | | |
| | | const selectedRollerDetailList = ref<any[]>([]); |
| | | const selectedPackerDetailList = ref<any[]>([]); |
| | | |
| | | const searchParams = ref<Api.Analy.StoreSilkSearchParams>({ |
| | | pageNum: 1, |
| | |
| | | distimebegin: null, |
| | | distimeend: null, |
| | | siloid: null, |
| | | params: {} |
| | | params: { |
| | | beginTime: `${new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).getFullYear()}-${String(new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).getMonth() + 1).padStart(2, '0')}-${String(new Date(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).getDate()).padStart(2, '0')} 00:00:00`, |
| | | endTime: `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')} 23:59:59` |
| | | } |
| | | }); |
| | | |
| | | const tableSize = ref<'tiny' | 'small' | 'medium' | 'large'>('small'); |
| | | const tableSize = ref<'small' | 'medium' | 'large'>('small'); |
| | | |
| | | function handleTableSizeChange(size: 'tiny' | 'small' | 'medium' | 'large') { |
| | | function handleTableSizeChange(size: 'small' | 'medium' | 'large') { |
| | | tableSize.value = size; |
| | | } |
| | | |
| | |
| | | searchParams.value.pageSize = params.pageSize; |
| | | }, |
| | | columns: () => [ |
| | | { |
| | | type: 'selection', |
| | | align: 'center', |
| | | width: 48 |
| | | }, |
| | | { |
| | | key: 'index', |
| | | title: $t('common.index'), |
| | |
| | | minWidth: 130 |
| | | }, |
| | | { |
| | | key: 'roller', |
| | | title: '卷接产量', |
| | | key: 'rollerOutput', |
| | | title: '卷接产量(箱)', |
| | | align: 'center', |
| | | minWidth: 100 |
| | | minWidth: 120, |
| | | render: row => { |
| | | const v = calcRollerBox((row as any).rollerOutput); |
| | | if (v === null) return '-'; |
| | | return v.toFixed(1); |
| | | } |
| | | }, |
| | | { |
| | | key: 'packer', |
| | | title: '包装产量', |
| | | key: 'packerOutput', |
| | | title: '包装产量(箱)', |
| | | align: 'center', |
| | | minWidth: 100 |
| | | minWidth: 120, |
| | | render: row => { |
| | | const v = calcPackerBox((row as any).packerOutput); |
| | | if (v === null) return '-'; |
| | | return v.toFixed(1); |
| | | } |
| | | }, |
| | | { |
| | | key: 'actualstarttime', |
| | |
| | | title: '柜子号(末位)', |
| | | align: 'center', |
| | | width: 160 |
| | | }, |
| | | { |
| | | key: 'operate', |
| | | title: $t('common.operate'), |
| | | align: 'center', |
| | | fixed: 'right', |
| | | width: 130, |
| | | render: row => { |
| | | const divider = () => { |
| | | if (!hasAuth('analy:storeSilk:edit') || !hasAuth('analy:storeSilk:remove')) { |
| | | return null; |
| | | } |
| | | return <NDivider vertical />; |
| | | }; |
| | | |
| | | const editBtn = () => { |
| | | if (!hasAuth('analy:storeSilk:edit')) { |
| | | return null; |
| | | } |
| | | return ( |
| | | <ButtonIcon |
| | | text |
| | | type="primary" |
| | | icon="material-symbols:drive-file-rename-outline-outline" |
| | | tooltipContent={$t('common.edit')} |
| | | onClick={() => edit(row.id)} |
| | | /> |
| | | ); |
| | | }; |
| | | |
| | | const deleteBtn = () => { |
| | | if (!hasAuth('analy:storeSilk:remove')) { |
| | | return null; |
| | | } |
| | | return ( |
| | | <ButtonIcon |
| | | text |
| | | type="error" |
| | | icon="material-symbols:delete-outline" |
| | | tooltipContent={$t('common.delete')} |
| | | popconfirmContent={$t('common.confirmDelete')} |
| | | onPositiveClick={() => handleDelete(row.id)} |
| | | /> |
| | | ); |
| | | }; |
| | | |
| | | return ( |
| | | <div class="flex-center gap-8px"> |
| | | {editBtn()} |
| | | {divider()} |
| | | {deleteBtn()} |
| | | </div> |
| | | ); |
| | | } |
| | | } |
| | | ] |
| | | }); |
| | |
| | | function handleExport() { |
| | | download('/analy/storeSilk/export', searchParams.value, `储丝柜产量_${new Date().getTime()}.xlsx`); |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | |
| | | function handleRowClick(row: any) { |
| | | return { |
| | | onClick: () => { |
| | | selectedRollerDetailList.value = row.rollerDetailList || []; |
| | | selectedPackerDetailList.value = row.packerDetailList || []; |
| | | }, |
| | | style: 'cursor: pointer;' |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | v-model:columns="columnChecks" |
| | | :disabled-delete="checkedRowKeys.length === 0" |
| | | :loading="loading" |
| | | :show-add="hasAuth('analy:storeSilk:add')" |
| | | :show-delete="hasAuth('analy:storeSilk:remove')" |
| | | :show-add="false" |
| | | :show-delete="false" |
| | | :show-export="hasAuth('analy:storeSilk:export')" |
| | | @add="handleAdd" |
| | | @delete="handleBatchDelete" |
| | |
| | | </template> |
| | | <NRadioGroup :value="tableSize" @update:value="handleTableSizeChange"> |
| | | <NSpace vertical> |
| | | <NRadio value="tiny">mini</NRadio> |
| | | <NRadio value="small">小</NRadio> |
| | | <NRadio value="medium">中</NRadio> |
| | | <NRadio value="large">大</NRadio> |
| | |
| | | </TableHeaderOperation> |
| | | </template> |
| | | <NDataTable |
| | | v-model:checked-row-keys="checkedRowKeys" |
| | | :columns="columns" |
| | | :data="data" |
| | | :size="tableSize" |
| | |
| | | remote |
| | | :row-key="row => row.id" |
| | | :pagination="mobilePagination" |
| | | :row-props="handleRowClick" |
| | | class="sm:h-full" |
| | | :class="[tableSize === 'tiny' ? 'table-size-mini' : '']" |
| | | /> |
| | | <StoreSilkOperateDrawer |
| | | v-model:visible="drawerVisible" |
| | |
| | | @submitted="getDataByPage" |
| | | /> |
| | | </NCard> |
| | | <StoreSilkDetail |
| | | :roller-detail-list="selectedRollerDetailList" |
| | | :packer-detail-list="selectedPackerDetailList" |
| | | class="h-[192px] overflow-hidden" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | :deep(.table-size-mini .n-data-table-th), |
| | | :deep(.table-size-mini .n-data-table-td) { |
| | | :deep(.n-data-table-th), |
| | | :deep(.n-data-table-td) { |
| | | padding-top: 4px; |
| | | padding-bottom: 4px; |
| | | } |