#

zhou zhou

14 小时以前 4d6b02dada557b4186cdcef843cd3859aeeaac01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
  <div class="check-order-item-page art-full-height">
    <ArtSearchBar
      v-model="searchForm"
      :items="searchItems"
      :showExpand="true"
      @search="handleSearch"
      @reset="handleReset"
    />
 
    <ElCard class="art-table-card">
      <ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData" />
 
      <ArtTable
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @selection-change="handleSelectionChange"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      />
    </ElCard>
 
    <CheckOrderItemDetailDrawer v-model:visible="detailDrawerVisible" :detail="detailData" />
  </div>
</template>
 
<script setup>
  import { computed, ref } from 'vue'
  import { useTable } from '@/hooks/core/useTable'
  import { fetchCheckOrderItemPage, fetchGetCheckOrderItemDetail } from '@/api/check-order'
  import { buildCheckOrderItemPageQueryParams, buildCheckOrderItemSearchParams, createCheckOrderItemSearchState, normalizeCheckOrderItemRow } from './checkOrderItemPage.helpers'
  import { createCheckOrderItemTableColumns } from './checkOrderItemTable.columns'
  import CheckOrderItemDetailDrawer from './modules/check-order-item-detail-drawer.vue'
 
  defineOptions({ name: 'CheckOrderItem' })
 
  const searchForm = ref(createCheckOrderItemSearchState())
  const detailDrawerVisible = ref(false)
  const detailData = ref({})
 
  const searchItems = computed(() => [
    { label: '关键字', key: 'condition', type: 'input', props: { clearable: true, placeholder: '请输入盘点单号/物料编码' } },
    { label: '盘点单号', key: 'orderCode', type: 'input', props: { clearable: true, placeholder: '请输入盘点单号' } },
    { label: '物料编码', key: 'matnrCode', type: 'input', props: { clearable: true, placeholder: '请输入物料编码' } },
    { label: '物料名称', key: 'maktx', type: 'input', props: { clearable: true, placeholder: '请输入物料名称' } },
    { label: '托盘码', key: 'barcode', type: 'input', props: { clearable: true, placeholder: '请输入托盘码' } }
  ])
 
  async function openDetail(row) {
    detailDrawerVisible.value = true
    const detail = await fetchGetCheckOrderItemDetail(row.id)
    detailData.value = normalizeCheckOrderItemRow({ ...row, ...detail })
  }
 
  const {
    columns,
    columnChecks,
    data,
    loading,
    pagination,
    replaceSearchParams,
    resetSearchParams,
    handleSizeChange,
    handleCurrentChange,
    refreshData,
    getData
  } = useTable({
    core: {
      apiFn: fetchCheckOrderItemPage,
      apiParams: buildCheckOrderItemPageQueryParams(searchForm.value),
      columnsFactory: () => createCheckOrderItemTableColumns({ handleView: openDetail })
    },
    transform: {
      dataTransformer: (records) => (Array.isArray(records) ? records.map((item) => normalizeCheckOrderItemRow(item)) : [])
    }
  })
 
  function handleSelectionChange() {}
 
  function handleSearch(params) {
    searchForm.value = { ...searchForm.value, ...params }
    replaceSearchParams(buildCheckOrderItemSearchParams(searchForm.value))
    getData()
  }
 
  function handleReset() {
    searchForm.value = createCheckOrderItemSearchState()
    resetSearchParams()
  }
</script>