mes-vue/src/views/production/componets/SubmitLogInfoPage.vue

<template>
  <div class="info-panel">
    <n-descriptions
      :column="2"
      bordered
      size="small"
      label-placement="left"
      class="info-header"
    >
      <n-descriptions-item label="物料编码">{{ dash(props.baseInfo?.materialCode) }}</n-descriptions-item>
      <n-descriptions-item label="物料名称">{{ dash(props.baseInfo?.materialName) }}</n-descriptions-item>
      <n-descriptions-item label="工序名称">{{ dash(props.baseInfo?.processName) }}</n-descriptions-item>
      <n-descriptions-item label="派工编号">{{ dash(props.baseInfo?.assingCode) }}</n-descriptions-item>
    </n-descriptions>

    <n-data-table
      :columns="reportRecordsColums"
      :data="submitLogList"
      :loading="loading"
      size="small"
      striped
      :single-line="true"
      :scroll-x="1080"
      :row-key="(row: SubmitLog) => row.id ?? row.createTime ?? ''"
    />

    <div class="pagination-container">
      <n-pagination
        v-model:page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :item-count="pagination.itemCount"
        :page-sizes="[10, 20, 50, 100]"
        show-size-picker
        show-quick-jumper
        @update:page="handlePageChange"
        @update:page-size="handlePageSizeChange"
      >
        <template #prefix>
          共 {{ pagination.itemCount }} 条
        </template>
      </n-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NDataTable, NTag, NDescriptions, NDescriptionsItem, NPagination, type DataTableColumns } from 'naive-ui'
import { onMounted, ref, h, reactive } from 'vue'
import { dictDataApi } from '@/api/org'
import { SubmitLog, submitLogApi } from '@/api/submitLog'
import { formatWorkSeconds } from '@/utils/tool'

const props = defineProps<{
  assingId?: number
  baseInfo?: Record<string, any>
}>()

function dash(value: unknown) {
  if (value === 0) return '0'
  if (value == null || value === '') return '-'
  return String(value)
}

const submitStatusOptions = ref<{ label: string; value: any; class: any }[]>([])
const loading = ref(false)
const submitLogList = ref<SubmitLog[]>([])

const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0
})

const reportRecordsColums: DataTableColumns<SubmitLog> = [
  { title: '汇报数量', key: 'quantity', align: 'center', width: 90, render: (row) => dash(row.quantity) },
  { title: '合格数量', key: 'qualifiedQty', align: 'center', width: 90, render: (row: any) => dash(row.qualifiedQty) },
  { title: '报废数量', key: 'scrapeQty', align: 'center', width: 90, render: (row: any) => dash(row.scrapeQty) },
  {
    title: '暂停时间',
    key: 'pauseSeconds',
    align: 'center',
    width: 120,
    render: (row: any) => formatWorkSeconds(row.pauseSeconds)
  },
  {
    title: '调车时间',
    key: 'shuntSeconds',
    align: 'center',
    width: 120,
    render: (row: any) => formatWorkSeconds(row.shuntSeconds)
  },
  {
    title: '实际工时',
    key: 'actualWorkSeconds',
    align: 'center',
    width: 120,
    render: (row: any) => h('span', { class: 'hours-actual' }, formatWorkSeconds(row.actualWorkSeconds))
  },
  { title: '汇报人', key: 'userName', align: 'center', width: 100, render: (row: any) => dash(row.userName) },
  {
    title: '状态',
    key: 'submitStatus',
    align: 'center',
    width: 90,
    render: (row: any) => {
      const val = row.submitStatus
      const opt = submitStatusOptions.value.find(o => o.value === val || String(o.value) === String(val))
      if (!opt) return dash(val)
      return h(NTag, { type: opt.class, size: 'small', bordered: false }, { default: () => opt.label })
    }
  },
  { title: '汇报时间', key: 'createTime', align: 'center', width: 160, render: (row) => dash(row.createTime) }
]

async function loadDictOptions() {
  try {
    const data = await dictDataApi.listByType('submit_status')
    submitStatusOptions.value = data.map(d => ({
      label: d.dictLabel,
      value: Number(d.dictValue) || d.dictValue,
      class: d.listClass
    }))
  } catch {}
}

async function load() {
  loading.value = true
  try {
    const res = await submitLogApi.loadSumbitLog({
      assingId: props.assingId ?? 0,
      page: pagination.page,
      pageSize: pagination.pageSize
    })
    submitLogList.value = res.list ?? []
    pagination.itemCount = res.total ?? 0
  } finally {
    loading.value = false
  }
}

function handlePageChange(page: number) {
  pagination.page = page
  load()
}

function handlePageSizeChange(pageSize: number) {
  pagination.pageSize = pageSize
  pagination.page = 1
  load()
}

onMounted(() => {
  loadDictOptions()
  load()
})
</script>

<style scoped>
.info-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-header {
  margin-bottom: 0;
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
}
:deep(.hours-actual) {
  color: #1f6feb;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
</style>