<template>
|
<ElDialog
|
:model-value="visible"
|
:title="t('pages.orders.transfer.materialDialog.title')"
|
width="88%"
|
top="5vh"
|
destroy-on-close
|
@update:model-value="handleVisibleChange"
|
>
|
<div class="flex flex-col gap-4">
|
<ArtSearchBar
|
v-model="searchForm"
|
:items="searchItems"
|
:showExpand="false"
|
@search="handleSearch"
|
@reset="handleReset"
|
/>
|
|
<ArtTable
|
:loading="loading"
|
:data="data"
|
:columns="columns"
|
:pagination="pagination"
|
@selection-change="handleSelectionChange"
|
@pagination:size-change="handleSizeChange"
|
@pagination:current-change="handleCurrentChange"
|
/>
|
</div>
|
|
<template #footer>
|
<ElSpace>
|
<ElButton @click="handleVisibleChange(false)">{{ t('common.cancel') }}</ElButton>
|
<ElButton type="primary" @click="handleConfirm">{{ t('common.confirm') }}</ElButton>
|
</ElSpace>
|
</template>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
import { computed, h, ref, watch } from 'vue'
|
import { ElTag } from 'element-plus'
|
import { useI18n } from 'vue-i18n'
|
import { useTable } from '@/hooks/core/useTable'
|
import { fetchTransferLocsItemsPage } from '@/api/transfer'
|
import {
|
createTransferEditableItemFromMaterial,
|
createTransferMaterialSearchState
|
} from '../transferPage.helpers'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
orgAreaId: { type: [Number, String], default: undefined },
|
fieldDefinitions: { type: Array, default: () => [] },
|
selectedMatnrIds: { type: Array, default: () => [] }
|
})
|
|
const emit = defineEmits(['update:visible', 'confirm'])
|
const { t } = useI18n()
|
|
const searchForm = ref(createTransferMaterialSearchState())
|
const selectedRows = ref([])
|
|
const searchItems = computed(() => [
|
{
|
label: t('table.materialName'),
|
key: 'maktx',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.transfer.materialDialog.placeholder.maktx')
|
}
|
},
|
{
|
label: t('table.materialCode'),
|
key: 'matnrCode',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.transfer.materialDialog.placeholder.matnrCode')
|
}
|
}
|
])
|
|
const createColumns = () => {
|
const baseColumns = [
|
{ type: 'selection', width: 48, align: 'center' },
|
{ type: 'globalIndex', label: t('table.index'), width: 72, align: 'center' },
|
{
|
prop: 'matnrCode',
|
label: t('table.materialCode'),
|
minWidth: 150,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'maktx',
|
label: t('table.materialName'),
|
minWidth: 220,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'spec',
|
label: t('pages.orders.transferItem.table.spec'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'model',
|
label: t('pages.orders.transferItem.table.model'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'batch',
|
label: t('table.batch'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'unit',
|
label: t('table.unit'),
|
width: 100,
|
align: 'center'
|
},
|
{
|
prop: 'anfme',
|
label: t('table.quantity'),
|
width: 110,
|
align: 'right'
|
},
|
{
|
prop: 'selected',
|
label: t('pages.orders.transfer.materialDialog.table.status'),
|
width: 110,
|
formatter: (row) =>
|
h(
|
ElTag,
|
{
|
type: props.selectedMatnrIds.includes(row.matnrId) ? 'warning' : 'info',
|
effect: 'light'
|
},
|
() =>
|
props.selectedMatnrIds.includes(row.matnrId)
|
? t('pages.orders.transfer.materialDialog.selected')
|
: t('pages.orders.transfer.materialDialog.unselected')
|
)
|
}
|
]
|
|
return [
|
...baseColumns,
|
...props.fieldDefinitions.map((item) => ({
|
prop: item.fields,
|
label: item.fieldsAlise || item.fields,
|
minWidth: 140,
|
showOverflowTooltip: true,
|
visible: false
|
}))
|
]
|
}
|
|
const {
|
data,
|
loading,
|
pagination,
|
columns,
|
replaceSearchParams,
|
handleSizeChange,
|
handleCurrentChange,
|
getData,
|
resetColumns
|
} = useTable({
|
core: {
|
apiFn: fetchTransferLocsItemsPage,
|
apiParams: {
|
...createTransferMaterialSearchState(),
|
orgAreaId: props.orgAreaId
|
},
|
immediate: false,
|
columnsFactory: createColumns
|
},
|
transform: {
|
dataTransformer: (records) =>
|
Array.isArray(records)
|
? records.map((item) => {
|
const editable = createTransferEditableItemFromMaterial(item, props.fieldDefinitions)
|
return {
|
...item,
|
...editable
|
}
|
})
|
: []
|
}
|
})
|
|
function buildParams() {
|
return {
|
...searchForm.value,
|
orgAreaId: props.orgAreaId
|
}
|
}
|
|
function handleSelectionChange(rows) {
|
selectedRows.value = Array.isArray(rows) ? rows : []
|
}
|
|
function handleSearch(params) {
|
searchForm.value = { ...searchForm.value, ...params }
|
replaceSearchParams(buildParams())
|
getData()
|
}
|
|
function handleReset() {
|
searchForm.value = createTransferMaterialSearchState()
|
replaceSearchParams(buildParams())
|
getData()
|
}
|
|
function handleConfirm() {
|
emit(
|
'confirm',
|
selectedRows.value.map((item) => ({ ...item }))
|
)
|
handleVisibleChange(false)
|
}
|
|
function handleVisibleChange(visible) {
|
emit('update:visible', visible)
|
}
|
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (!visible) {
|
searchForm.value = createTransferMaterialSearchState()
|
selectedRows.value = []
|
return
|
}
|
|
searchForm.value = createTransferMaterialSearchState()
|
replaceSearchParams(buildParams())
|
getData()
|
}
|
)
|
|
watch(
|
() => props.fieldDefinitions,
|
() => {
|
resetColumns?.()
|
},
|
{ deep: true }
|
)
|
</script>
|
