mes-vue/src/views/biz/orderProcessPlan/components/OrderReportDetail.vue

<script setup lang="ts">
import {SubmitLog, submitLogApi} from '@/api/submitLog'
import {h, onMounted, reactive, ref} from "vue";
import {NButton, NDataTable, NIcon, NSpace, NTag} from "naive-ui";
import { dictDataApi } from "@/api/org";
import {ArrowDown, ArrowUp, RefreshOutline, SearchOutline} from "@vicons/ionicons5";
const props = defineProps<{
  orderItemId: number
}>()

const searchForm = ref({
  submitStatus: undefined
})

const submitList = ref<SubmitLog[]>([])
//根据工序Id加载汇报详情
async function loadReportDetail() {
  try {

    console.log(props.orderItemId)
    const res = await submitLogApi.getOrderItemReportDetail({
      page: pagination.page,
      pageSize: pagination.pageSize,
      submitStatus: searchForm.value.submitStatus,
      orderItemId:props.orderItemId
    })
    submitList.value = res.list
    pagination.itemCount = res.total
  } catch (error) {
    console.error('加载汇报详情失败', error)
  }
}

const columns = [
  {
    title: '提交数量',
    key: 'quantity',
    width: 120
  },
  {
    title: '提交人',
    key: 'userName',
    width: 120
  },
  {
    title: '提交时间',
    key: 'createTime',
    width: 120
  },
  {
    title: '汇报状态',
    key: 'submitStatus',
    width: 120,
    render(row) {
      const option = submitStatusOptions.value.find(o => o.value === row.submitStatus)
      return h(NTag, { type: option.class, size: 'small' }, { default: () => option.label })
    }
  }
]

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

// 加载字典选项
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 {}
}

const doShowInner = () => {
  if (showSearchInput.value) {
    showSearchInput.value = false
  }else {
    showSearchInput.value = true
  }
}


const showSearchInput = ref<Boolean>(false)


const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  showSizePicker: true,
  pageSizes: [10, 20, 50]
})


const handleSearch =  () => {
  loadReportDetail()
}


const handleReset = () => {
  searchForm.value.submitStatus = null
  pagination.page = 1
  pagination.pageSize = 10
  loadReportDetail()
}


// 分页
function handlePageChange(page: number) {
  pagination.page = page
  loadReportDetail()
}

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

onMounted(async () => {
  loadReportDetail()
  loadDictOptions()
})
</script>

<template>
  <div>
    <n-button @click="doShowInner" v-if="showSearchInput">
      <n-icon size="20" :depth="3">
        <ArrowDown/>
      </n-icon>
      展开
    </n-button>
    <n-card v-if="!showSearchInput">
      <n-form inline :model="searchForm" label-placement="left">
        <n-grid :x-gap="8" :cols="4">
          <n-gi>
            <n-form-item label="汇报状态">
              <n-select
                  v-model:value="searchForm.submitStatus"
                  :options="submitStatusOptions"
                  placeholder="请选择异常类型"
                  clearable
                  style="width: 200px"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item>
              <n-space>
                <n-button type="primary" @click="handleSearch">
                  <template #icon>
                    <n-icon>
                      <SearchOutline/>
                    </n-icon>
                  </template>
                  搜索
                </n-button>
                <n-button @click="handleReset">
                  <template #icon>
                    <n-icon>
                      <RefreshOutline/>
                    </n-icon>
                  </template>
                  重置
                </n-button>
              </n-space>
            </n-form-item>
          </n-gi>
        </n-grid>


      </n-form>
      <n-button @click="doShowInner" v-if="!showSearchInput" style="float: right;margin: 10px">
        <n-icon size="20" :depth="3">
          <ArrowUp/>
        </n-icon>
        闭合
      </n-button>
    </n-card>

    <n-card style="margin: 10px 0">
      <n-scrollbar x-scrollable>
        <n-data-table
            :columns="columns"
            :data="submitList"
            :bordered="false"
        />

        <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
          <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>
      </n-scrollbar>

    </n-card>
  </div>
</template>

<style scoped>

</style>