Merge remote-tracking branch 'origin/main'
liutao
16 hours ago
commit
c462ed07d9
@ -0,0 +1,40 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface PalletVO {
|
||||
id?: number
|
||||
code?: string
|
||||
isCode?: boolean
|
||||
palletType?: number | string
|
||||
specification?: string
|
||||
ratedLoadWeight?: number | string
|
||||
unit?: string
|
||||
status?: number | string
|
||||
warehouseId?: number | string
|
||||
areaId?: number | string
|
||||
planCode?: string
|
||||
productId?: number | string
|
||||
productCount?: number | string
|
||||
qrcode?: string
|
||||
purchaseDate?: string
|
||||
useDate?: string
|
||||
remark?: string
|
||||
createTime?: string
|
||||
}
|
||||
|
||||
export const PalletApi = {
|
||||
getPalletPage: async (params: any) => {
|
||||
return await request.get({ url: `/erp/pallet/page`, params })
|
||||
},
|
||||
|
||||
createPallet: async (data: PalletVO) => {
|
||||
return await request.post({ url: `/erp/pallet/create`, data })
|
||||
},
|
||||
|
||||
updatePallet: async (params: PalletVO) => {
|
||||
return await request.put({ url: `/erp/pallet/update`, params })
|
||||
},
|
||||
|
||||
deletePallet: async (id: number) => {
|
||||
return await request.delete({ url: `/erp/pallet/delete?id=` + id })
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,577 @@
|
||||
<template>
|
||||
<div class="stock-overview">
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px stock-overview__query"
|
||||
label-width="auto">
|
||||
<el-form-item :label="t('ErpStock.Overview.materialCategory')" prop="categoryType">
|
||||
<el-select
|
||||
v-model="queryParams.categoryType" clearable :placeholder="t('common.selectText')"
|
||||
class="!w-220px">
|
||||
<el-option v-for="item in categoryTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Stock.warehouse')" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId" clearable filterable
|
||||
:placeholder="t('ErpStock.Stock.placeholderWarehouse')" class="!w-220px">
|
||||
<el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Overview.location')" prop="areaId">
|
||||
<el-select
|
||||
v-model="queryParams.areaId" clearable filterable :placeholder="t('common.selectText')"
|
||||
class="!w-220px">
|
||||
<el-option v-for="item in areaOptions" :key="item.id" :label="item.areaName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Overview.dateRange')" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="queryParams.dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
:start-placeholder="t('ErpStock.Record.placeholderCreateTimeStart')"
|
||||
:end-placeholder="t('ErpStock.Record.placeholderCreateTimeEnd')"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-280px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<div class="stock-overview__cards">
|
||||
<ContentWrap
|
||||
v-for="item in summaryCards" :key="item.title" class="stock-overview__card-wrap"
|
||||
:body-style="{ padding: '22px 24px' }">
|
||||
<div class="stock-overview__card">
|
||||
<div class="stock-overview__card-main">
|
||||
<div class="stock-overview__card-title">{{ item.title }}</div>
|
||||
<div v-for="line in item.lines" :key="line" class="stock-overview__card-line">
|
||||
{{ line }}
|
||||
</div>
|
||||
</div>
|
||||
<Icon :icon="item.icon" :class="['stock-overview__card-icon', `is-${item.color}`]" :size="34" />
|
||||
</div>
|
||||
<div v-if="item.tip" class="stock-overview__card-tip">{{ item.tip }}</div>
|
||||
</ContentWrap>
|
||||
</div>
|
||||
|
||||
<div class="stock-overview__tables">
|
||||
<ContentWrap :title="t('ErpStock.Overview.stockDetail')" class="stock-overview__stock">
|
||||
<el-table
|
||||
v-loading="stockLoading" :data="stockList" :stripe="true" :show-overflow-tooltip="true" row-key="id"
|
||||
height="520">
|
||||
<el-table-column :label="t('ErpStock.Stock.code')" align="center" sortable prop="barCode" min-width="130" />
|
||||
<el-table-column :label="t('ErpStock.Stock.name')" align="center" sortable prop="name" min-width="150">
|
||||
<template #default="{ row }">
|
||||
{{ row.name || row.productName || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="t('ErpStock.Overview.materialCategory')" align="center" prop="categoryType"
|
||||
min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getCategoryTagType(row.categoryType)">
|
||||
{{ getCategoryLabel(row.categoryType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="t('ErpStock.Stock.subCategory')" align="center" prop="categoryName"
|
||||
min-width="110" />
|
||||
<el-table-column :label="t('ErpStock.Stock.warehouse')" align="center" prop="warehouseName" min-width="110" />
|
||||
<el-table-column :label="t('ErpStock.Overview.location')" align="center" prop="areaName" min-width="110" />
|
||||
<el-table-column :label="t('ErpStock.Stock.stockDisplay')" align="center" prop="stockDisplay" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.stockDisplay" class="stock-overview__display">{{ row.stockDisplay }}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Stock.count')" align="center" sortable prop="count" min-width="110">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.count) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Stock.unit')" align="center" prop="unitName" min-width="80" />
|
||||
<el-table-column :label="t('ErpStock.Overview.latestChangeTime')" align="center" min-width="170">
|
||||
<template #default="{ row }">
|
||||
{{ formatStockTime(getLatestChangeTime(row)) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="stockTotal" v-model:page="stockQuery.pageNo" v-model:limit="stockQuery.pageSize"
|
||||
@pagination="getStockList" />
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap
|
||||
:title="t('ErpStock.Overview.recentRecord')" class="stock-overview__record"
|
||||
:body-style="{ padding: '10px 14px 16px' }">
|
||||
<template #header>
|
||||
<el-button link type="primary" class="stock-overview__more" @click="goRecordPage">
|
||||
{{ t('ErpStock.Overview.more') }}
|
||||
<Icon icon="ep:arrow-right" class="ml-2px" />
|
||||
</el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-table
|
||||
v-loading="recordLoading" :data="recordList" :stripe="true" :show-overflow-tooltip="true"
|
||||
row-key="id" height="562">
|
||||
<el-table-column :label="t('ErpStock.Overview.time')" align="center" min-width="160">
|
||||
<template #default="{ row }">
|
||||
{{ formatStockTime(row.recordTime || row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Record.bizType')" align="center" prop="bizDirection" min-width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.bizDirection" :type="getDirectionTagType(row.bizDirection)">
|
||||
{{ formatDirection(row.bizDirection) }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Overview.material')" align="center" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<div class="stock-overview__material">
|
||||
<span>{{ row.productName || '-' }}</span>
|
||||
<span v-if="row.bizNo">{{ row.bizNo }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Record.count')" align="center" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span :class="getDirectionClass(row.bizDirection)">
|
||||
{{ formatRecordCount(row) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="t('ErpStock.Record.creatorName')" align="center" prop="creatorName"
|
||||
min-width="90" />
|
||||
</el-table>
|
||||
</template>
|
||||
</ContentWrap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { StockApi, StockVO } from '@/api/erp/stock/stock'
|
||||
import { StockRecordApi, StockRecordVO } from '@/api/erp/stock/record'
|
||||
import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
|
||||
import { useDictStoreWithOut } from '@/store/modules/dict'
|
||||
|
||||
defineOptions({ name: 'ErpStockOverview' })
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const dictStore = useDictStoreWithOut()
|
||||
|
||||
const queryFormRef = ref()
|
||||
const warehouseList = ref<WarehouseVO[]>([])
|
||||
const categoryTypeOptions = computed(() => getIntDictOptions(DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE))
|
||||
const queryParams = reactive<{
|
||||
categoryType?: number
|
||||
warehouseId?: number
|
||||
areaId?: number
|
||||
dateRange: string[]
|
||||
}>({
|
||||
categoryType: undefined,
|
||||
warehouseId: undefined,
|
||||
areaId: undefined,
|
||||
dateRange: []
|
||||
})
|
||||
|
||||
const stockLoading = ref(false)
|
||||
const recordLoading = ref(false)
|
||||
const stockList = ref<StockVO[]>([])
|
||||
const recordList = ref<StockRecordVO[]>([])
|
||||
const stockTotal = ref(0)
|
||||
const stockQuery = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
const recordQuery = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 9
|
||||
})
|
||||
|
||||
const summaryCards = computed(() => [
|
||||
{
|
||||
title: t('ErpStock.Overview.cards.finishedGoods.title'),
|
||||
icon: 'ep:box',
|
||||
color: 'blue',
|
||||
lines: [
|
||||
t('ErpStock.Overview.cards.finishedGoods.line1'),
|
||||
t('ErpStock.Overview.cards.finishedGoods.line2'),
|
||||
t('ErpStock.Overview.cards.finishedGoods.line3')
|
||||
],
|
||||
tip: t('ErpStock.Overview.cards.finishedGoods.tip')
|
||||
},
|
||||
{
|
||||
title: t('ErpStock.Overview.cards.rawMaterial.title'),
|
||||
icon: 'ep:collection',
|
||||
color: 'green',
|
||||
lines: [
|
||||
t('ErpStock.Overview.cards.rawMaterial.line1'),
|
||||
t('ErpStock.Overview.cards.rawMaterial.line2'),
|
||||
t('ErpStock.Overview.cards.rawMaterial.line3'),
|
||||
t('ErpStock.Overview.cards.rawMaterial.line4')
|
||||
],
|
||||
tip: t('ErpStock.Overview.cards.rawMaterial.tip')
|
||||
},
|
||||
{
|
||||
title: t('ErpStock.Overview.cards.sparePart.title'),
|
||||
icon: 'ep:setting',
|
||||
color: 'orange',
|
||||
lines: [
|
||||
t('ErpStock.Overview.cards.sparePart.line1'),
|
||||
t('ErpStock.Overview.cards.sparePart.line2'),
|
||||
t('ErpStock.Overview.cards.sparePart.line3'),
|
||||
t('ErpStock.Overview.cards.sparePart.line4')
|
||||
],
|
||||
tip: t('ErpStock.Overview.cards.sparePart.tip')
|
||||
},
|
||||
{
|
||||
title: t('ErpStock.Overview.cards.todayIn.title'),
|
||||
icon: 'ep:download',
|
||||
color: 'blue',
|
||||
lines: [
|
||||
t('ErpStock.Overview.cards.todayIn.line1'),
|
||||
t('ErpStock.Overview.cards.todayIn.line2'),
|
||||
t('ErpStock.Overview.cards.todayIn.line3'),
|
||||
t('ErpStock.Overview.cards.todayIn.line4'),
|
||||
t('ErpStock.Overview.cards.todayIn.line5')
|
||||
]
|
||||
},
|
||||
{
|
||||
title: t('ErpStock.Overview.cards.todayOut.title'),
|
||||
icon: 'ep:upload',
|
||||
color: 'green',
|
||||
lines: [
|
||||
t('ErpStock.Overview.cards.todayOut.line1'),
|
||||
t('ErpStock.Overview.cards.todayOut.line2'),
|
||||
t('ErpStock.Overview.cards.todayOut.line3'),
|
||||
t('ErpStock.Overview.cards.todayOut.line4'),
|
||||
t('ErpStock.Overview.cards.todayOut.line5')
|
||||
]
|
||||
},
|
||||
{
|
||||
title: t('ErpStock.Overview.cards.warning.title'),
|
||||
icon: 'ep:warning-filled',
|
||||
color: 'red',
|
||||
lines: [
|
||||
t('ErpStock.Overview.cards.warning.line1'),
|
||||
t('ErpStock.Overview.cards.warning.line2'),
|
||||
t('ErpStock.Overview.cards.warning.line3'),
|
||||
t('ErpStock.Overview.cards.warning.line4')
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const areaOptions = computed(() => {
|
||||
const areaMap = new Map<number, { id: number; areaName: string }>()
|
||||
warehouseList.value.forEach((warehouse) => {
|
||||
warehouse.areaList?.forEach((area) => {
|
||||
areaMap.set(area.id, {
|
||||
id: area.id,
|
||||
areaName: `${warehouse.name || ''}${warehouse.name ? ' / ' : ''}${area.areaName}`
|
||||
})
|
||||
})
|
||||
})
|
||||
return Array.from(areaMap.values())
|
||||
})
|
||||
|
||||
const filterEmptyParams = (params: Record<string, any>) => {
|
||||
return Object.fromEntries(
|
||||
Object.entries(params).filter(([, value]) => {
|
||||
if (Array.isArray(value)) return value.length > 0
|
||||
return value !== undefined && value !== null && value !== ''
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const buildBaseQueryParams = () => {
|
||||
const [beginTime, endTime] = queryParams.dateRange || []
|
||||
return filterEmptyParams({
|
||||
categoryType: queryParams.categoryType,
|
||||
warehouseId: queryParams.warehouseId,
|
||||
areaId: queryParams.areaId,
|
||||
createTime: beginTime && endTime ? [beginTime, endTime] : undefined
|
||||
})
|
||||
}
|
||||
|
||||
const getStockList = async () => {
|
||||
stockLoading.value = true
|
||||
try {
|
||||
const data = await StockApi.getStockPage(
|
||||
filterEmptyParams({
|
||||
...buildBaseQueryParams(),
|
||||
pageNo: stockQuery.pageNo,
|
||||
pageSize: stockQuery.pageSize
|
||||
})
|
||||
)
|
||||
stockList.value = data.list || []
|
||||
stockTotal.value = data.total || 0
|
||||
} finally {
|
||||
stockLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getRecordList = async () => {
|
||||
recordLoading.value = true
|
||||
try {
|
||||
const data = await StockRecordApi.getStockRecordPage(
|
||||
filterEmptyParams({
|
||||
...buildBaseQueryParams(),
|
||||
pageNo: recordQuery.pageNo,
|
||||
pageSize: recordQuery.pageSize
|
||||
})
|
||||
)
|
||||
recordList.value = data.list || []
|
||||
} finally {
|
||||
recordLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
await Promise.all([getStockList(), getRecordList()])
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
stockQuery.pageNo = 1
|
||||
recordQuery.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const goRecordPage = () => {
|
||||
router.push({ path: '/warehouse/record' })
|
||||
}
|
||||
|
||||
const getCategoryLabel = (value?: number | string) => {
|
||||
return getDictObj(DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE, value)?.label || '-'
|
||||
}
|
||||
|
||||
const getCategoryTagType = (value?: number | string) => {
|
||||
const dict = getDictObj(DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE, value)
|
||||
const colorType = String(dict?.colorType || '')
|
||||
return ['success', 'info', 'warning', 'danger'].includes(colorType) ? colorType : 'primary'
|
||||
}
|
||||
|
||||
const formatNumber = (value: number | string | undefined) => {
|
||||
if (value === undefined || value === null || value === '') return '-'
|
||||
const num = Number(value)
|
||||
return Number.isFinite(num) ? num.toLocaleString() : String(value)
|
||||
}
|
||||
|
||||
const formatStockTime = (value: any) => {
|
||||
return value ? formatDate(value, 'YYYY-MM-DD HH:mm:ss') : '-'
|
||||
}
|
||||
|
||||
const getLatestChangeTime = (row: any) => {
|
||||
return (
|
||||
row.latestChangeTime ??
|
||||
row.latestInTime ??
|
||||
row.lastInTime ??
|
||||
row.recentInTime ??
|
||||
row.latestStockInTime ??
|
||||
row.lastStockInTime ??
|
||||
row.latestOutTime ??
|
||||
row.lastOutTime ??
|
||||
row.recentOutTime ??
|
||||
row.latestStockOutTime ??
|
||||
row.lastStockOutTime
|
||||
)
|
||||
}
|
||||
|
||||
const isStockIn = (direction?: string) => ['入库', 'Inbound'].includes(String(direction || ''))
|
||||
const isStockOut = (direction?: string) => ['出库', 'Outbound'].includes(String(direction || ''))
|
||||
|
||||
const formatDirection = (direction?: string) => {
|
||||
if (isStockIn(direction)) return t('ErpStock.Overview.stockIn')
|
||||
if (isStockOut(direction)) return t('ErpStock.Overview.stockOut')
|
||||
return direction || '-'
|
||||
}
|
||||
|
||||
const getDirectionClass = (direction?: string) => {
|
||||
if (isStockIn(direction)) return 'stock-overview__count-in'
|
||||
if (isStockOut(direction)) return 'stock-overview__count-out'
|
||||
return ''
|
||||
}
|
||||
|
||||
const getDirectionTagType = (direction?: string) => {
|
||||
if (isStockIn(direction)) return 'success'
|
||||
if (isStockOut(direction)) return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
const formatRecordCount = (row: StockRecordVO) => {
|
||||
const unit = row.unitName ? ` ${row.unitName}` : ''
|
||||
const num = Number(row.count)
|
||||
if (!Number.isFinite(num)) return `${row.count ?? '-'}${unit}`
|
||||
const value = Math.abs(num).toLocaleString()
|
||||
if (isStockIn(row.bizDirection)) return `+${value}${unit}`
|
||||
if (isStockOut(row.bizDirection)) return `-${value}${unit}`
|
||||
return `${num.toLocaleString()}${unit}`
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await dictStore.setDictMap()
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stock-overview {
|
||||
.stock-overview__query {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.stock-overview__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.stock-overview__card-wrap {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.stock-overview__card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: 174px;
|
||||
}
|
||||
|
||||
.stock-overview__card-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stock-overview__card-title {
|
||||
margin-bottom: 16px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stock-overview__card-line {
|
||||
margin-bottom: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.stock-overview__card-tip {
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stock-overview__card-icon {
|
||||
flex: none;
|
||||
|
||||
&.is-blue {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-green {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
&.is-orange {
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
|
||||
&.is-red {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.stock-overview__tables {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.7fr) minmax(460px, 1fr);
|
||||
gap: 15px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.stock-overview__stock,
|
||||
.stock-overview__record {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.stock-overview__more {
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stock-overview__display {
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stock-overview__material {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
line-height: 1.25;
|
||||
|
||||
span:last-child {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.stock-overview__count-in {
|
||||
color: var(--el-color-success);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stock-overview__count-out {
|
||||
color: var(--el-color-danger);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.stock-overview {
|
||||
.stock-overview__cards {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.stock-overview {
|
||||
.stock-overview__tables {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stock-overview {
|
||||
.stock-overview__query {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stock-overview__cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
|
||||
<el-form-item :label="t('ErpStock.Pallet.code')" prop="code">
|
||||
<el-input v-model="queryParams.code" :placeholder="t('ErpStock.Pallet.placeholderCode')" clearable
|
||||
@keyup.enter="handleQuery" class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Pallet.palletType')" prop="palletType">
|
||||
<el-select v-model="queryParams.palletType" :placeholder="t('ErpStock.Pallet.placeholderPalletType')" clearable
|
||||
class="!w-240px">
|
||||
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.STORAGE_PALLET_TYPES)" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Pallet.status')" prop="status">
|
||||
<el-select v-model="queryParams.status" :placeholder="t('ErpStock.Pallet.placeholderStatus')" clearable
|
||||
class="!w-240px">
|
||||
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.STORAGE_PALLET_STATUS)" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Pallet.warehouseId')" prop="warehouseId" v-show="showAllFilters">
|
||||
<el-select v-model="queryParams.warehouseId" :placeholder="t('ErpStock.Pallet.placeholderWarehouseId')"
|
||||
clearable class="!w-240px" @change="handleWarehouseChange">
|
||||
<el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Pallet.areaId')" prop="areaId" v-show="showAllFilters">
|
||||
<el-select v-model="queryParams.areaId" :placeholder="t('ErpStock.Pallet.placeholderAreaId')" clearable
|
||||
class="!w-240px">
|
||||
<el-option v-for="item in filteredAreaList" :key="item.id" :label="item.areaName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.Pallet.planCode')" prop="planCode" v-show="showAllFilters">
|
||||
<el-input v-model="queryParams.planCode" :placeholder="t('ErpStock.Pallet.placeholderPlanCode')" clearable
|
||||
@keyup.enter="handleQuery" class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="filterCount > 3">
|
||||
<el-button type="text" class="text-primary" @click="toggleFilters">
|
||||
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
|
||||
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
|
||||
t('FactoryModeling.FactoryStructure.expandText') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:pallet:create']">
|
||||
<Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id">
|
||||
<el-table-column :label="t('ErpStock.Pallet.code')" align="center" prop="code" min-width="150" sortable />
|
||||
<el-table-column :label="t('ErpStock.Pallet.palletType')" align="center" prop="palletType" min-width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.STORAGE_PALLET_TYPES" :value="scope.row.palletType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Pallet.specification')" align="center" prop="specification"
|
||||
min-width="140" />
|
||||
<el-table-column :label="t('ErpStock.Pallet.ratedLoadWeight')" align="center" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ formatWeight(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Pallet.status')" align="center" prop="status" min-width="100" sortable>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.STORAGE_PALLET_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Pallet.warehouseId')" align="center" prop="warehouseId" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ getWarehouseName(scope.row.warehouseId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Pallet.areaId')" align="center" prop="areaId" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ getAreaName(scope.row.areaId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.Pallet.planCode')" align="center" prop="planCode" min-width="160" />
|
||||
<el-table-column :label="t('ErpStock.Pallet.productId')" align="center" prop="productId" min-width="100" />
|
||||
<el-table-column :label="t('ErpStock.Pallet.productCount')" align="center" prop="productCount" min-width="100" />
|
||||
|
||||
<el-table-column :label="t('ErpStock.Pallet.purchaseDate')" align="center" prop="purchaseDate" min-width="120" />
|
||||
<el-table-column :label="t('ErpStock.Pallet.useDate')" align="center" prop="useDate" min-width="120" />
|
||||
<el-table-column :label="t('ErpStock.Pallet.remark')" align="center" prop="remark" min-width="160" />
|
||||
<el-table-column :label="t('ErpStock.Pallet.createTime')" align="center" prop="createTime"
|
||||
:formatter="dateFormatter" width="180px" sortable />
|
||||
<el-table-column :label="t('common.operate')" align="center" width="150px">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="openForm('update', scope.row)" v-hasPermi="['erp:pallet:update']">
|
||||
{{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:pallet:delete']">
|
||||
{{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</ContentWrap>
|
||||
|
||||
<PalletForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { PalletApi, PalletVO } from '@/api/erp/stock/pallet'
|
||||
import { WarehouseApi } from '@/api/erp/stock/warehouse'
|
||||
import { WarehouseAreaApi } from '@/api/erp/stock/warehousearea'
|
||||
import PalletForm from './PalletForm.vue'
|
||||
|
||||
defineOptions({ name: 'ErpPallet' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<PalletVO[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
code: undefined,
|
||||
palletType: undefined,
|
||||
status: undefined,
|
||||
warehouseId: undefined,
|
||||
areaId: undefined,
|
||||
planCode: undefined
|
||||
})
|
||||
const queryFormRef = ref()
|
||||
const showAllFilters = ref(false)
|
||||
const filterCount = 6
|
||||
const warehouseList = ref<any[]>([])
|
||||
const areaList = ref<any[]>([])
|
||||
|
||||
const filteredAreaList = computed(() => {
|
||||
if (!queryParams.warehouseId) return areaList.value
|
||||
return areaList.value.filter((item) => item.warehouseId === queryParams.warehouseId)
|
||||
})
|
||||
|
||||
const toggleFilters = () => {
|
||||
showAllFilters.value = !showAllFilters.value
|
||||
}
|
||||
|
||||
const getWarehouseName = (warehouseId: number) => {
|
||||
return warehouseList.value.find((item) => item.id === warehouseId)?.name ?? '-'
|
||||
}
|
||||
|
||||
const getAreaName = (areaId: number) => {
|
||||
return areaList.value.find((item) => item.id === areaId)?.areaName ?? '-'
|
||||
}
|
||||
|
||||
const formatWeight = (row: PalletVO) => {
|
||||
if (row.ratedLoadWeight == null) return '-'
|
||||
return row.unit ? `${row.ratedLoadWeight}${row.unit}` : row.ratedLoadWeight
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await PalletApi.getPalletPage(queryParams)
|
||||
list.value = data.list ?? []
|
||||
total.value = data.total ?? 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getWarehouseList = async () => {
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
}
|
||||
|
||||
const getAreaList = async () => {
|
||||
const data = await WarehouseAreaApi.getWarehouseAreaPage({ pageNo: 1, pageSize: 100 })
|
||||
areaList.value = data.list ?? []
|
||||
}
|
||||
|
||||
const handleWarehouseChange = () => {
|
||||
queryParams.areaId = undefined
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, row?: PalletVO) => {
|
||||
formRef.value.open(type, row)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await message.delConfirm()
|
||||
await PalletApi.deletePallet(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
await getList()
|
||||
} catch { }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList()
|
||||
getAreaList()
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue