feat：产品入库模块
parent
9e6807292c
commit
c94787285f
@ -0,0 +1,73 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function createProductInbound(data) {
|
||||
return request({
|
||||
url: '/admin-api/erp/stock-in/create',
|
||||
method: 'post',
|
||||
data: { ...data, inType: '产品入库' }
|
||||
})
|
||||
}
|
||||
|
||||
export function getProductInboundPage(params = {}) {
|
||||
return request({
|
||||
url: '/admin-api/erp/stock-in/page',
|
||||
method: 'get',
|
||||
params: { ...params, inType: '产品入库' }
|
||||
})
|
||||
}
|
||||
|
||||
export function getProductInboundDetail(id) {
|
||||
return request({
|
||||
url: '/admin-api/erp/stock-in/get',
|
||||
method: 'get',
|
||||
params: { id }
|
||||
})
|
||||
}
|
||||
|
||||
export function submitProductInbound(data) {
|
||||
return request({
|
||||
url: '/admin-api/erp/stock-in/submit',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function auditProductInbound(data) {
|
||||
return request({
|
||||
url: '/admin-api/erp/stock-in/audit',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskPage(params = {}) {
|
||||
return request({
|
||||
url: '/admin-api/mes/task/page',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskDefaultPackagingSchemes(taskId) {
|
||||
return request({
|
||||
url: '/admin-api/mes/task/task-detail/default-packaging-schemes',
|
||||
method: 'get',
|
||||
params: { taskId }
|
||||
})
|
||||
}
|
||||
|
||||
export function getPalletPage(params = {}) {
|
||||
return request({
|
||||
url: '/admin-api/erp/pallet/page',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function createPallet(data) {
|
||||
return request({
|
||||
url: '/admin-api/erp/pallet/create',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<NavBar :title="t('productInbound.detailTitle')" />
|
||||
|
||||
<scroll-view scroll-y class="detail-scroll">
|
||||
<view class="content-section">
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<view class="section-icon">
|
||||
<uni-icons type="compose" size="24" color="#1f7cff"></uni-icons>
|
||||
</view>
|
||||
<text class="section-title">{{ t('productInbound.inboundInfo') }}</text>
|
||||
<text :class="['status-tag', statusClass(detail.status)]">{{ statusText(detail.status) }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-card">{{ t('productInbound.loading') }}</view>
|
||||
<template v-else>
|
||||
<view class="readonly-grid">
|
||||
<view class="readonly-item">
|
||||
<text class="readonly-label">{{ t('productInbound.documentNo') }}</text>
|
||||
<text class="readonly-value">{{ textValue(detail.no) }}</text>
|
||||
</view>
|
||||
<view class="readonly-item">
|
||||
<text class="readonly-label">{{ t('productInbound.inboundType') }}</text>
|
||||
<text class="readonly-value">{{ textValue(detail.inType) }}</text>
|
||||
</view>
|
||||
<view class="readonly-item">
|
||||
<text class="readonly-label">{{ t('productInbound.inboundTime') }}</text>
|
||||
<text class="readonly-value">{{ formatDateTime(detail.inTime || detail.createTime) }}</text>
|
||||
</view>
|
||||
<view class="readonly-item">
|
||||
<text class="readonly-label">{{ t('productInbound.operator') }}</text>
|
||||
<text class="readonly-value">{{ textValue(getStockUserName(detail)) }}</text>
|
||||
</view>
|
||||
<view class="readonly-item">
|
||||
<text class="readonly-label">{{ t('productInbound.inboundQuantity') }}</text>
|
||||
<text class="readonly-value highlight">{{ textValue(detail.totalCount) }}</text>
|
||||
</view>
|
||||
<view class="readonly-item">
|
||||
<text class="readonly-label">{{ t('productInbound.reviewer') }}</text>
|
||||
<text class="readonly-value">{{ textValue(detail.auditUserName) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-field">
|
||||
<text class="form-label">{{ t('productInbound.remark') }}</text>
|
||||
<view class="readonly-box">{{ textValue(detail.remark) }}</view>
|
||||
</view>
|
||||
|
||||
<view v-if="attachmentList.length" class="form-field">
|
||||
<text class="form-label">{{ t('productInbound.attachment') }}</text>
|
||||
<view class="attachment-list">
|
||||
<view v-for="(file, idx) in attachmentList" :key="idx" class="attachment-item">
|
||||
<uni-icons type="paperclip" size="16" color="#64748b"></uni-icons>
|
||||
<text class="attachment-name">{{ textValue(getAttachmentName(file, idx)) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<view class="section-header list-header">
|
||||
<view class="section-title-wrap">
|
||||
<view class="section-icon">
|
||||
<uni-icons type="list" size="24" color="#1f7cff"></uni-icons>
|
||||
</view>
|
||||
<text class="section-title">{{ t('productInbound.itemList') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="itemList.length" class="summary-strip">
|
||||
<view class="summary-item">
|
||||
<text class="summary-value">{{ itemList.length }}</text>
|
||||
<text class="summary-label">{{ t('productInbound.product') }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-value">{{ totalPalletCount }}</text>
|
||||
<text class="summary-label">{{ t('productInbound.pallet') }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-value">{{ totalInputCount }}</text>
|
||||
<text class="summary-label">{{ t('productInbound.packageCount') }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-value">{{ totalPieceCount }}</text>
|
||||
<text class="summary-label">{{ t('productInbound.pieceCount') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="itemList.length" class="item-list">
|
||||
<view v-for="(item, idx) in itemList" :key="item.id || idx" class="item-card">
|
||||
<view class="item-header">
|
||||
<text class="item-name">{{ textValue(item.productName) }}</text>
|
||||
<text class="item-code">{{ textValue(item.productBarCode || item.productCode) }}</text>
|
||||
</view>
|
||||
<view class="info-grid">
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.inboundPackageCount') }}</text>
|
||||
<text class="info-value">{{ textValue(getItemInputCount(item)) }}</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.inboundPieceCount') }}</text>
|
||||
<text class="info-value">{{ textValue(getItemPieceCount(item)) }}</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.taskOrder') }}</text>
|
||||
<text class="info-value">{{ isRelatedTask(item) ? textValue(item.taskCode || item.taskName) : t('productInbound.no') }}</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.packagingScheme') }}</text>
|
||||
<text class="info-value">{{ textValue(item.packagingSchemeName) }}</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.palletPackageQuantity') }}</text>
|
||||
<text class="info-value">{{ textValue(item.palletPackageQuantity) }}</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.packageQuantity') }}</text>
|
||||
<text class="info-value">{{ textValue(item.packageQuantity) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="getPallets(item).length" class="pallet-list">
|
||||
<view v-for="(pallet, pIndex) in getPallets(item)" :key="pallet.palletId || pallet.id || pIndex" class="pallet-card">
|
||||
<view class="pallet-top">
|
||||
<text class="pallet-code">{{ textValue(getPalletCode(pallet)) }}</text>
|
||||
<text class="pallet-count">{{ t('productInbound.packageUnit', { count: textValue(pallet.packageCount) }) }}</text>
|
||||
</view>
|
||||
<view class="pallet-grid">
|
||||
<view class="pallet-cell">
|
||||
<text class="pallet-label">{{ t('productInbound.warehouse') }}</text>
|
||||
<text class="pallet-value">{{ textValue(getWarehouseDisplay(pallet, item)) }}</text>
|
||||
</view>
|
||||
<view class="pallet-cell">
|
||||
<text class="pallet-label">{{ t('productInbound.location') }}</text>
|
||||
<text class="pallet-value">{{ textValue(getAreaDisplay(pallet, item)) }}</text>
|
||||
</view>
|
||||
<view class="pallet-cell">
|
||||
<text class="pallet-label">{{ t('productInbound.pieceCount') }}</text>
|
||||
<text class="pallet-value">{{ textValue(getPalletPieceCount(pallet, item)) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-card">{{ loading ? t('productInbound.loading') : t('productInbound.emptyItemList') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="action-bar">
|
||||
<view class="action-btn back-btn" @click="handleBack">{{ t('productInbound.back') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import NavBar from '@/components/common/NavBar.vue'
|
||||
import { getProductInboundDetail } from '@/api/mes/productInbound'
|
||||
import { getWarehouseAreaSimpleList, getWarehouseSimpleList, getSimpleUserList } from '@/api/mes/moldget'
|
||||
|
||||
const { t } = useI18n()
|
||||
const detailId = ref(null)
|
||||
const detail = ref({})
|
||||
const loading = ref(false)
|
||||
const userOptions = ref([])
|
||||
const warehouseOptions = ref([])
|
||||
const warehouseAreaMap = ref({})
|
||||
|
||||
const itemList = computed(() => normalizeItems(detail.value))
|
||||
const attachmentList = computed(() => normalizeAttachments(detail.value))
|
||||
const totalPalletCount = computed(() => itemList.value.reduce((sum, item) => sum + getPallets(item).length, 0))
|
||||
const totalInputCount = computed(() => itemList.value.reduce((sum, item) => sum + (Number(getItemInputCount(item)) || 0), 0))
|
||||
const totalPieceCount = computed(() => itemList.value.reduce((sum, item) => sum + (Number(getItemPieceCount(item)) || 0), 0))
|
||||
|
||||
function normalizeResponse(res) {
|
||||
return res && res.data !== undefined ? res.data : res
|
||||
}
|
||||
function normalizeItems(row) {
|
||||
const list = row?.items || row?.itemList || row?.stockInItems || row?.stockInItemList || []
|
||||
return Array.isArray(list) ? list : []
|
||||
}
|
||||
function normalizeAttachments(row) {
|
||||
const raw = row?.fileUrl || row?.attachments || row?.attachmentList || row?.files
|
||||
if (!raw) return []
|
||||
if (Array.isArray(raw)) return raw
|
||||
return String(raw).split(',').map((item) => item.trim()).filter(Boolean)
|
||||
}
|
||||
function textValue(v) {
|
||||
if (v === 0) return '0'
|
||||
if (v == null) return '-'
|
||||
const s = String(v).trim()
|
||||
return s || '-'
|
||||
}
|
||||
function formatDateTime(value) {
|
||||
if (!value) return '-'
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
const [year, month, day] = value
|
||||
return `${year}-${pad(month)}-${pad(day)}`
|
||||
}
|
||||
const raw = typeof value === 'string' && /^\d+$/.test(value) ? Number(value) : value
|
||||
const date = new Date(raw)
|
||||
if (Number.isNaN(date.getTime())) return String(value)
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
|
||||
}
|
||||
function pad(n) {
|
||||
return String(n).padStart(2, '0')
|
||||
}
|
||||
function statusText(s) {
|
||||
const map = {
|
||||
0: t('productInbound.statusPending'),
|
||||
10: t('productInbound.statusAuditing'),
|
||||
20: t('productInbound.statusStored'),
|
||||
1: t('productInbound.statusRejected')
|
||||
}
|
||||
const num = Number(s)
|
||||
return map[num] || textValue(s)
|
||||
}
|
||||
function statusClass(s) {
|
||||
const num = Number(s)
|
||||
if (num === 0) return 'text-primary'
|
||||
if (num === 10) return 'text-warning'
|
||||
if (num === 20) return 'text-success'
|
||||
if (num === 1) return 'text-danger'
|
||||
return ''
|
||||
}
|
||||
function getStockUserName(row) {
|
||||
if (row?.stockUserName) return row.stockUserName
|
||||
const userId = row?.stockUserId
|
||||
return userOptions.value.find((item) => String(item.value) === String(userId))?.label || userId
|
||||
}
|
||||
function getAttachmentName(file, index) {
|
||||
if (file?.name) return file.name
|
||||
const text = String(file?.url || file?.path || file || '')
|
||||
const name = text.split('/').pop()
|
||||
return name || `${t('productInbound.attachment')}${index + 1}`
|
||||
}
|
||||
function isRelatedTask(item) {
|
||||
const v = item?.relateTask ?? item?.relatedTask
|
||||
return v === true || v === 1 || v === '1'
|
||||
}
|
||||
function getItemInputCount(item) {
|
||||
return item?.inputCount ?? item?.packageCount ?? item?.count
|
||||
}
|
||||
function getItemPieceCount(item) {
|
||||
return item?.count ?? ((Number(item?.inputCount) || 0) * (Number(item?.packageQuantity) || 1))
|
||||
}
|
||||
function getPallets(item) {
|
||||
if (Array.isArray(item?.pallets)) return item.pallets
|
||||
if (item?.palletId || item?.palletCode) {
|
||||
return [{
|
||||
palletId: item.palletId,
|
||||
palletCode: item.palletCode,
|
||||
packageCount: item.packageCount ?? item.inputCount,
|
||||
warehouseId: item.warehouseId,
|
||||
warehouseName: item.warehouseName,
|
||||
areaId: item.areaId,
|
||||
areaName: item.areaName,
|
||||
count: item.count
|
||||
}]
|
||||
}
|
||||
return []
|
||||
}
|
||||
function getPalletCode(pallet) {
|
||||
return pallet?.palletCode || pallet?.code || pallet?.pallet?.code || pallet?.palletId || ''
|
||||
}
|
||||
function getPalletPieceCount(pallet, item) {
|
||||
return pallet?.count ?? ((Number(pallet?.packageCount) || 0) * (Number(item?.packageQuantity) || 1))
|
||||
}
|
||||
function getWarehouseDisplay(pallet, item) {
|
||||
const id = pallet?.warehouseId ?? item?.warehouseId
|
||||
return pallet?.warehouseName || item?.warehouseName || warehouseOptions.value.find((w) => String(w.value) === String(id))?.label || id
|
||||
}
|
||||
function getAreaDisplay(pallet, item) {
|
||||
const warehouseId = pallet?.warehouseId ?? item?.warehouseId
|
||||
const areaId = pallet?.areaId ?? item?.areaId
|
||||
const areas = warehouseAreaMap.value[String(warehouseId)] || []
|
||||
return pallet?.areaName || item?.areaName || areas.find((a) => String(a.value) === String(areaId))?.label || areaId
|
||||
}
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const res = await getSimpleUserList()
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
userOptions.value = data.map((u) => ({
|
||||
value: u.id || u.userId,
|
||||
label: u.nickname || u.userName || u.name || String(u.id || '')
|
||||
}))
|
||||
} catch (e) {}
|
||||
}
|
||||
async function loadWarehouses() {
|
||||
try {
|
||||
const res = await getWarehouseSimpleList()
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
warehouseOptions.value = data.map((w) => ({ value: w.id, label: w.name || String(w.id || '') }))
|
||||
} catch (e) {}
|
||||
}
|
||||
async function loadAreasForWarehouse(warehouseId) {
|
||||
if (!warehouseId || warehouseAreaMap.value[String(warehouseId)]) return
|
||||
try {
|
||||
const res = await getWarehouseAreaSimpleList(warehouseId)
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
warehouseAreaMap.value = {
|
||||
...warehouseAreaMap.value,
|
||||
[String(warehouseId)]: data.map((a) => ({ value: a.id, label: a.name || a.areaName || String(a.id || '') }))
|
||||
}
|
||||
} catch (e) {
|
||||
warehouseAreaMap.value = { ...warehouseAreaMap.value, [String(warehouseId)]: [] }
|
||||
}
|
||||
}
|
||||
async function loadAreasForDetail() {
|
||||
const ids = new Set()
|
||||
itemList.value.forEach((item) => {
|
||||
if (item.warehouseId) ids.add(item.warehouseId)
|
||||
getPallets(item).forEach((pallet) => {
|
||||
const id = pallet.warehouseId ?? item.warehouseId
|
||||
if (id) ids.add(id)
|
||||
})
|
||||
})
|
||||
await Promise.all(Array.from(ids).map((id) => loadAreasForWarehouse(id)))
|
||||
}
|
||||
async function loadDetail() {
|
||||
if (!detailId.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getProductInboundDetail(detailId.value)
|
||||
detail.value = normalizeResponse(res) || {}
|
||||
await loadAreasForDetail()
|
||||
} catch (e) {
|
||||
uni.showToast({ title: t('productInbound.detailLoadFailed'), icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
detailId.value = options?.id || null
|
||||
await Promise.all([loadUsers(), loadWarehouses()])
|
||||
await loadDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container { min-height: 100vh; background: #f5f7fb; }
|
||||
.detail-scroll { height: calc(100vh - 172rpx); }
|
||||
.content-section { padding: 20rpx 24rpx 28rpx; }
|
||||
.section-card { background: #ffffff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; border: 1rpx solid #eef2f7; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
|
||||
.section-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 22rpx; padding-bottom: 18rpx; border-bottom: 1rpx solid #f1f5f9; }
|
||||
.section-icon { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.section-title { font-size: 32rpx; font-weight: 600; color: #1f2937; }
|
||||
.section-title-wrap { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
|
||||
.list-header { justify-content: space-between; gap: 16rpx; }
|
||||
.status-tag { margin-left: auto; flex-shrink: 0; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
|
||||
.status-tag.text-success { color: #15803d; background: #dcfce7; }
|
||||
.status-tag.text-danger { color: #dc2626; background: #fee2e2; }
|
||||
.status-tag.text-warning { color: #d97706; background: #fef3c7; }
|
||||
.status-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
|
||||
.loading-card, .empty-card { min-height: 180rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 27rpx; }
|
||||
.readonly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 14rpx; overflow: hidden; }
|
||||
.readonly-item { min-width: 0; display: flex; flex-direction: column; gap: 8rpx; padding: 18rpx 20rpx; border-right: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9; }
|
||||
.readonly-item:nth-child(2n) { border-right: 0; }
|
||||
.readonly-label { font-size: 23rpx; color: #8a94a6; }
|
||||
.readonly-value { font-size: 27rpx; color: #334155; line-height: 1.35; word-break: break-all; }
|
||||
.readonly-value.highlight { color: #1f4b79; font-weight: 700; }
|
||||
.form-field { display: flex; flex-direction: column; gap: 12rpx; margin-top: 24rpx; }
|
||||
.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
|
||||
.readonly-box { min-height: var(--app-form-control-height, 70rpx); padding: 18rpx 24rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; font-size: 28rpx; color: #374151; line-height: 1.45; }
|
||||
.attachment-list { display: flex; flex-direction: column; gap: 10rpx; }
|
||||
.attachment-item { display: flex; align-items: center; gap: 10rpx; padding: 16rpx 18rpx; background: #f8fafc; border-radius: 12rpx; }
|
||||
.attachment-name { flex: 1; min-width: 0; font-size: 24rpx; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #f8fafc; border: 1rpx solid #e8eef6; border-radius: 16rpx; overflow: hidden; margin-bottom: 18rpx; }
|
||||
.summary-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6rpx; padding: 16rpx 8rpx; border-right: 1rpx solid #eef2f7; }
|
||||
.summary-item:last-child { border-right: 0; }
|
||||
.summary-value { max-width: 100%; font-size: 30rpx; font-weight: 700; color: #1f4b79; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.summary-label { font-size: 22rpx; color: #8a94a6; }
|
||||
.item-list { display: flex; flex-direction: column; gap: 18rpx; }
|
||||
.item-card { padding: 20rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 18rpx; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
|
||||
.item-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
|
||||
.item-name { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.item-code { flex-shrink: 0; max-width: 240rpx; font-size: 24rpx; color: #8a94a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
|
||||
.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
||||
.info-label { font-size: 22rpx; color: #9ca3af; }
|
||||
.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.pallet-list { margin-top: 18rpx; display: flex; flex-direction: column; gap: 12rpx; }
|
||||
.pallet-card { padding: 16rpx 18rpx; background: #f8fafc; border: 1rpx solid #e8eef6; border-radius: 14rpx; }
|
||||
.pallet-top { display: flex; align-items: center; justify-content: space-between; gap: 12rpx; margin-bottom: 12rpx; }
|
||||
.pallet-code { flex: 1; min-width: 0; font-size: 27rpx; color: #1f2937; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.pallet-count { flex-shrink: 0; font-size: 24rpx; color: #1f4b79; font-weight: 600; }
|
||||
.pallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; }
|
||||
.pallet-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
||||
.pallet-label { font-size: 21rpx; color: #9ca3af; }
|
||||
.pallet-value { font-size: 24rpx; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99; }
|
||||
.action-btn { flex: 1; height: 84rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
|
||||
.back-btn { background: #1f4b79; color: #ffffff; }
|
||||
</style>
|
||||
@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<NavBar :title="t('productInbound.moduleName')" />
|
||||
|
||||
<view class="filter-bar">
|
||||
<view class="keyword-box">
|
||||
<input
|
||||
id="product-inbound-keyword-input"
|
||||
v-model="searchKeyword"
|
||||
class="keyword-input"
|
||||
type="text"
|
||||
:placeholder="t('productInbound.searchDocumentPlaceholder')"
|
||||
placeholder-class="placeholder"
|
||||
:focus="keywordFocus"
|
||||
confirm-type="search"
|
||||
@blur="keywordFocus = false"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
<view class="status-box" @click="openStatusPicker">
|
||||
<text class="status-box-text">{{ selectedStatusLabel || t('productInbound.all') }}</text>
|
||||
<uni-icons type="bottom" size="14" color="#9ca3af" />
|
||||
</view>
|
||||
<view class="reset-filter-btn" @click="resetFilters">{{ t('productInbound.reset') }}</view>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="list-scroll"
|
||||
:scroll-top="scrollTop"
|
||||
:lower-threshold="80"
|
||||
@scroll="onScroll"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<view class="list-wrap">
|
||||
<view v-for="item in list" :key="item.id" class="task-card" @click="openDetail(item)">
|
||||
<view class="card-header">
|
||||
<view class="header-main">
|
||||
<text class="task-no">{{ textValue(item.no) }}</text>
|
||||
<text :class="['record-tag', statusClass(item.status)]">{{ statusText(item.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view class="row">
|
||||
<text class="label">{{ t('productInbound.productInfo') }}</text>
|
||||
<text class="value">{{ textValue(item.productNames || item.productName) }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">{{ t('productInbound.inboundTime') }}</text>
|
||||
<text class="value">{{ formatDateTime(item.inTime || item.createTime) }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">{{ t('productInbound.operator') }}</text>
|
||||
<text class="value">{{ textValue(item.stockUserName || item.creatorName || item.creator) }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">{{ t('productInbound.inboundQuantity') }}</text>
|
||||
<text class="value highlight">{{ textValue(item.totalCount) }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">{{ t('productInbound.reviewer') }}</text>
|
||||
<text class="value">{{ textValue(item.auditUserName) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="Number(item.status) === 0" class="card-actions">
|
||||
<view class="action-btn submit-btn" @click.stop="openSubmitAudit(item)">{{ t('productInbound.submitAudit') }}</view>
|
||||
</view>
|
||||
<view v-if="Number(item.status) === 10" class="card-actions">
|
||||
<view class="action-btn approve-btn" @click.stop="handleApprove(item)">{{ t('productInbound.auditPass') }}</view>
|
||||
<view class="action-btn reject-btn" @click.stop="handleReject(item)">{{ t('productInbound.auditReject') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading && pageNo === 1" class="hint">{{ t('productInbound.loading') }}</view>
|
||||
<view v-else-if="!list.length" class="hint">{{ t('productInbound.emptyInboundList') }}</view>
|
||||
<view v-else-if="loadingMore" class="hint">{{ t('productInbound.loadingMore') }}</view>
|
||||
<view v-else-if="finished" class="hint">{{ t('productInbound.noMoreData') }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view v-if="showGoTop" class="go-top-btn" @click="goTop">
|
||||
<uni-icons type="arrow-up" size="20" color="#1f4b79" />
|
||||
</view>
|
||||
|
||||
<view class="add-btn" @click="goAdd">
|
||||
<text class="add-icon">+</text>
|
||||
</view>
|
||||
|
||||
<view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
|
||||
<view class="modal-card" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ t('productInbound.submitAudit') }}</text>
|
||||
<text class="modal-close" @click="closeAuditModal">x</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="modal-field">
|
||||
<text class="modal-label"><text class="required">*</text>{{ t('productInbound.auditor') }}</text>
|
||||
<view class="modal-dropdown" @click="toggleAuditorDropdown">
|
||||
<text :class="{ placeholder: !selectedAuditor }">{{ selectedAuditor ? selectedAuditor.label : t('productInbound.choose') }}</text>
|
||||
<text class="dropdown-arrow">v</text>
|
||||
<view v-if="showAuditorDropdown" class="dropdown-panel">
|
||||
<scroll-view scroll-y class="dropdown-scroll">
|
||||
<view
|
||||
v-for="u in auditorOptions"
|
||||
:key="u.value"
|
||||
class="dropdown-item"
|
||||
:class="{ active: selectedAuditor?.value === u.value }"
|
||||
@click.stop="selectAuditor(u)"
|
||||
>
|
||||
<text class="dropdown-item-text">{{ u.label }}</text>
|
||||
<uni-icons v-if="selectedAuditor?.value === u.value" class="dropdown-check" type="checkmarkempty" size="16" color="#2563eb"></uni-icons>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">{{ t('productInbound.remark') }}</text>
|
||||
<textarea v-model="auditRemark" class="modal-textarea" :placeholder="t('productInbound.remarkPlaceholder')" placeholder-class="textarea-placeholder" :maxlength="200" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="modal-btn cancel-btn" @click="closeAuditModal">{{ t('productInbound.cancel') }}</view>
|
||||
<view class="modal-btn confirm-btn" @click="confirmSubmitAudit">{{ t('productInbound.submit') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="statusPickerRef" type="bottom" background-color="#fff">
|
||||
<view class="picker-content">
|
||||
<view class="picker-header">
|
||||
<text class="picker-title">{{ t('productInbound.selectInboundStatus') }}</text>
|
||||
<view class="picker-clear" @click="resetStatus">
|
||||
<text class="picker-clear-text">{{ t('productInbound.clear') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="picker-list">
|
||||
<view
|
||||
v-for="option in statusOptions"
|
||||
:key="String(option.value)"
|
||||
class="picker-item"
|
||||
@click="selectStatus(option)"
|
||||
>
|
||||
<text class="picker-text">{{ option.label }}</text>
|
||||
<uni-icons v-if="selectedStatus === option.value" class="picker-check" type="checkmarkempty" size="18" color="#1f61ff"></uni-icons>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, ref } from 'vue'
|
||||
import { onReady, onShow, onUnload } from '@dcloudio/uni-app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import NavBar from '@/components/common/NavBar.vue'
|
||||
import { auditProductInbound, getProductInboundPage, submitProductInbound } from '@/api/mes/productInbound'
|
||||
import { getSimpleUserList } from '@/api/mes/moldget'
|
||||
|
||||
const { t } = useI18n()
|
||||
const selectedStatus = ref('')
|
||||
const searchKeyword = ref('')
|
||||
const statusPickerRef = ref(null)
|
||||
const statusOptions = computed(() => [
|
||||
{ label: t('productInbound.all'), value: '' },
|
||||
{ label: t('productInbound.statusPending'), value: '0' },
|
||||
{ label: t('productInbound.statusAuditing'), value: '10' },
|
||||
{ label: t('productInbound.statusStored'), value: '20' }
|
||||
])
|
||||
const selectedStatusLabel = computed(() => {
|
||||
const current = statusOptions.value.find((item) => item.value === selectedStatus.value)
|
||||
return current ? current.label : ''
|
||||
})
|
||||
const list = ref([])
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const finished = ref(false)
|
||||
const pageNo = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const scrollTop = ref(0)
|
||||
const showGoTop = ref(false)
|
||||
const keywordFocus = ref(false)
|
||||
const focusNoKeyboardRef = ref(null)
|
||||
const keywordInputSelector = '#product-inbound-keyword-input input, input#product-inbound-keyword-input'
|
||||
let searchTimer = null
|
||||
|
||||
function textValue(v) {
|
||||
if (v === 0) return '0'
|
||||
if (v == null) return '-'
|
||||
const s = String(v).trim()
|
||||
return s || '-'
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
if (!value) return '-'
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
const [year, month, day] = value
|
||||
const pad = (n) => String(n).padStart(2, '0')
|
||||
return `${year}-${pad(month)}-${pad(day)}`
|
||||
}
|
||||
const date = new Date(Number(value))
|
||||
if (Number.isNaN(date.getTime())) return String(value)
|
||||
const pad = (n) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
|
||||
}
|
||||
|
||||
function statusText(s) {
|
||||
const map = {
|
||||
0: t('productInbound.statusPending'),
|
||||
10: t('productInbound.statusAuditing'),
|
||||
20: t('productInbound.statusStored'),
|
||||
1: t('productInbound.statusRejected')
|
||||
}
|
||||
const num = Number(s)
|
||||
return map[num] || textValue(s)
|
||||
}
|
||||
function statusClass(s) {
|
||||
const num = Number(s)
|
||||
if (num === 0) return 'text-primary'
|
||||
if (num === 10) return 'text-warning'
|
||||
if (num === 20) return 'text-success'
|
||||
if (num === 1) return 'text-danger'
|
||||
return ''
|
||||
}
|
||||
|
||||
function normalizePageData(res) {
|
||||
const root = res && res.data !== undefined ? res.data : res
|
||||
const candidateList = root?.list || root?.rows || root?.records || root?.data?.list || root?.data?.rows || []
|
||||
const candidateTotal = root?.total ?? root?.data?.total ?? (Array.isArray(candidateList) ? candidateList.length : 0)
|
||||
return {
|
||||
list: Array.isArray(candidateList) ? candidateList : [],
|
||||
total: Number(candidateTotal || 0)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchList(reset) {
|
||||
if (reset) {
|
||||
pageNo.value = 1
|
||||
finished.value = false
|
||||
}
|
||||
if (pageNo.value === 1) loading.value = true
|
||||
else loadingMore.value = true
|
||||
try {
|
||||
const res = await getProductInboundPage({
|
||||
pageNo: pageNo.value,
|
||||
pageSize: pageSize.value,
|
||||
no: searchKeyword.value.trim() || undefined,
|
||||
status: selectedStatus.value || undefined
|
||||
})
|
||||
const page = normalizePageData(res)
|
||||
list.value = reset ? page.list : [...list.value, ...page.list]
|
||||
finished.value = list.value.length >= page.total || page.list.length < pageSize.value
|
||||
} catch (e) {
|
||||
if (!reset) pageNo.value = Math.max(1, pageNo.value - 1)
|
||||
uni.showToast({ title: t('productInbound.loadFailed'), icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
clearSearchTimer()
|
||||
uni.hideKeyboard()
|
||||
await fetchList(true)
|
||||
}
|
||||
function activateKeywordFocus() {
|
||||
keywordFocus.value = false
|
||||
nextTick(() => {
|
||||
keywordFocus.value = true
|
||||
})
|
||||
}
|
||||
function focusKeywordNoKeyboard() {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
focusNoKeyboardRef.value?.focus(keywordInputSelector)
|
||||
}, 80)
|
||||
})
|
||||
}
|
||||
async function resetFilters() {
|
||||
clearSearchTimer()
|
||||
searchKeyword.value = ''
|
||||
selectedStatus.value = ''
|
||||
activateKeywordFocus()
|
||||
await fetchList(true)
|
||||
}
|
||||
function openStatusPicker() {
|
||||
statusPickerRef.value?.open()
|
||||
}
|
||||
async function selectStatus(option) {
|
||||
selectedStatus.value = option.value
|
||||
statusPickerRef.value?.close()
|
||||
await fetchList(true)
|
||||
}
|
||||
async function resetStatus() {
|
||||
selectedStatus.value = ''
|
||||
statusPickerRef.value?.close()
|
||||
await fetchList(true)
|
||||
}
|
||||
async function loadMore() {
|
||||
if (loading.value || loadingMore.value || finished.value) return
|
||||
pageNo.value += 1
|
||||
await fetchList(false)
|
||||
}
|
||||
|
||||
async function handleApprove(item) {
|
||||
if (!item?.id) return
|
||||
uni.showModal({
|
||||
title: t('productInbound.tip'),
|
||||
content: t('productInbound.confirmAuditPass'),
|
||||
confirmColor: '#16a34a',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
await auditProductInbound({ id: item.id, status: 20 })
|
||||
uni.showToast({ title: t('productInbound.auditPassSuccess'), icon: 'success' })
|
||||
fetchList(true)
|
||||
} catch (e) {
|
||||
uni.showToast({ title: t('productInbound.operationFailed'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function handleReject(item) {
|
||||
if (!item?.id) return
|
||||
uni.showModal({
|
||||
title: t('productInbound.tip'),
|
||||
content: t('productInbound.confirmAuditReject'),
|
||||
confirmColor: '#dc2626',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
await auditProductInbound({ id: item.id, status: 1 })
|
||||
uni.showToast({ title: t('productInbound.auditRejectSuccess'), icon: 'success' })
|
||||
fetchList(true)
|
||||
} catch (e) {
|
||||
uni.showToast({ title: t('productInbound.operationFailed'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const showAuditModal = ref(false)
|
||||
const currentAuditItem = ref(null)
|
||||
const auditorOptions = ref([])
|
||||
const selectedAuditor = ref(null)
|
||||
const showAuditorDropdown = ref(false)
|
||||
const auditRemark = ref('')
|
||||
|
||||
function openSubmitAudit(item) {
|
||||
currentAuditItem.value = item
|
||||
selectedAuditor.value = null
|
||||
auditRemark.value = ''
|
||||
showAuditModal.value = true
|
||||
loadAuditorOptions()
|
||||
}
|
||||
function closeAuditModal() {
|
||||
showAuditModal.value = false
|
||||
currentAuditItem.value = null
|
||||
showAuditorDropdown.value = false
|
||||
}
|
||||
function toggleAuditorDropdown() {
|
||||
showAuditorDropdown.value = !showAuditorDropdown.value
|
||||
}
|
||||
function selectAuditor(u) {
|
||||
selectedAuditor.value = u
|
||||
showAuditorDropdown.value = false
|
||||
}
|
||||
async function loadAuditorOptions() {
|
||||
if (auditorOptions.value.length) return
|
||||
try {
|
||||
const res = await getSimpleUserList()
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
auditorOptions.value = data.map((u) => ({
|
||||
value: u.id || u.userId,
|
||||
label: u.nickname || u.userName || u.name || String(u.id || '')
|
||||
}))
|
||||
} catch (e) {
|
||||
console.error('loadAuditorOptions error', e)
|
||||
}
|
||||
}
|
||||
async function confirmSubmitAudit() {
|
||||
if (!selectedAuditor.value) {
|
||||
uni.showToast({ title: t('productInbound.selectAuditor'), icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!currentAuditItem.value?.id) return
|
||||
try {
|
||||
uni.showLoading({ title: t('productInbound.submitting'), mask: true })
|
||||
await submitProductInbound({
|
||||
id: currentAuditItem.value.id,
|
||||
auditUserId: selectedAuditor.value.value,
|
||||
remark: auditRemark.value || undefined
|
||||
})
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: t('productInbound.submitAuditSuccess'), icon: 'success' })
|
||||
closeAuditModal()
|
||||
fetchList(true)
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: t('productInbound.submitFailed'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function onScroll(event) {
|
||||
showGoTop.value = (event?.detail?.scrollTop || 0) > 600
|
||||
}
|
||||
function goTop() {
|
||||
scrollTop.value = 0
|
||||
}
|
||||
function goAdd() {
|
||||
uni.navigateTo({ url: '/pages_function/pages/productInbound/create' })
|
||||
}
|
||||
function openDetail(item) {
|
||||
if (!item?.id) {
|
||||
uni.showToast({ title: t('productInbound.noDetailId'), icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: `/pages_function/pages/productInbound/detail?id=${encodeURIComponent(String(item.id))}` })
|
||||
}
|
||||
function clearSearchTimer() {
|
||||
if (searchTimer) {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
focusKeywordNoKeyboard()
|
||||
})
|
||||
|
||||
onShow(() => fetchList(true))
|
||||
onUnload(() => clearSearchTimer())
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container { min-height: 100vh; background: #f4f5f7; }
|
||||
.filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) 150rpx 96rpx; align-items: center; gap: 14rpx; padding: 18rpx 28rpx 20rpx; }
|
||||
.keyword-box,
|
||||
.status-box,
|
||||
.reset-filter-btn { height: var(--app-form-control-height, 70rpx); background: #ffffff; border: 1rpx solid #d9dde5; box-sizing: border-box; display: flex; align-items: center; }
|
||||
.keyword-box { padding: 0 20rpx; }
|
||||
.keyword-input { width: 100%; font-size: 26rpx; color: #374151; }
|
||||
.status-box { justify-content: space-between; padding: 0 18rpx; }
|
||||
.status-box-text,
|
||||
.placeholder { font-size: 26rpx; }
|
||||
.status-box-text { color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.reset-filter-btn { justify-content: center; font-size: 24rpx; color: #4b5563; }
|
||||
.list-scroll { height: calc(100vh - 194rpx); }
|
||||
.list-wrap { padding: 0 24rpx 60rpx; }
|
||||
.task-card { margin-top: 20rpx; padding: 28rpx; background: #fff; border-radius: 22rpx; box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.06); }
|
||||
.card-header { margin-bottom: 18rpx; }
|
||||
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
|
||||
.task-no { flex: 1; min-width: 0; font-size: 32rpx; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.record-tag { flex-shrink: 0; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
|
||||
.card-body .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; margin-top: 12rpx; }
|
||||
.card-body .row:first-child { margin-top: 0; }
|
||||
.label { width: 140rpx; font-size: 25rpx; color: #94a3b8; flex-shrink: 0; }
|
||||
.value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; }
|
||||
.value.highlight { color: #1f4b79; font-weight: 600; }
|
||||
.card-actions { display: flex; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; }
|
||||
.action-btn { flex: 1; height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 10rpx; font-size: 26rpx; font-weight: 500; }
|
||||
.approve-btn { background: #dcfce7; color: #16a34a; }
|
||||
.reject-btn { background: #fee2e2; color: #dc2626; }
|
||||
.submit-btn { background: #dbeafe; color: #1d4ed8; }
|
||||
.record-tag.text-success { color: #15803d; background: #dcfce7; }
|
||||
.record-tag.text-danger { color: #dc2626; background: #fee2e2; }
|
||||
.record-tag.text-warning { color: #d97706; background: #fef3c7; }
|
||||
.record-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
|
||||
.hint { padding: 36rpx 0; text-align: center; color: #94a3b8; font-size: 26rpx; }
|
||||
.go-top-btn { position: fixed; right: 28rpx; bottom: calc(140rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.12); display: flex; align-items: center; justify-content: center; }
|
||||
.add-btn { position: fixed; right: 28rpx; bottom: calc(56rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: #1f4b79; box-shadow: 0 14rpx 30rpx rgba(24, 63, 108, 0.24); display: flex; align-items: center; justify-content: center; }
|
||||
.add-icon { color: #fff; font-size: 64rpx; line-height: 1; margin-top: -4rpx; }
|
||||
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; display: flex; align-items: center; justify-content: center; }
|
||||
.modal-card { width: 640rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15); }
|
||||
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 32rpx 20rpx; border-bottom: 1rpx solid #f0f0f0; }
|
||||
.modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a1a; }
|
||||
.modal-close { font-size: 36rpx; color: #999; padding: 8rpx; }
|
||||
.modal-body { padding: 28rpx 32rpx; }
|
||||
.modal-field { margin-bottom: 28rpx; }
|
||||
.modal-field:last-child { margin-bottom: 0; }
|
||||
.modal-label { font-size: 28rpx; color: #374151; font-weight: 500; margin-bottom: 14rpx; display: block; }
|
||||
.required { color: #ef4444; }
|
||||
.modal-dropdown { position: relative; display: flex; align-items: center; justify-content: space-between; height: 80rpx; padding: 0 24rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; color: #374151; }
|
||||
.placeholder { color: #bbb; }
|
||||
.dropdown-arrow { font-size: 20rpx; color: #999; }
|
||||
.modal-textarea { width: 100%; min-height: var(--app-textarea-field-height, 100rpx); padding: 20rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 27rpx; color: #374151; box-sizing: border-box; }
|
||||
.dropdown-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 4rpx; background: #fff; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1); overflow: hidden; }
|
||||
.dropdown-scroll { height: 300rpx; }
|
||||
.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; border-bottom: 1rpx solid #f0f0f0; }
|
||||
.dropdown-item.active { background: #f0f5ff; }
|
||||
.dropdown-item-text { font-size: 27rpx; color: #333; }
|
||||
.dropdown-check { font-size: 28rpx; color: #2563eb; font-weight: 700; }
|
||||
.modal-footer { display: flex; gap: 18rpx; padding: 24rpx 32rpx; border-top: 1rpx solid #f0f0f0; }
|
||||
.modal-btn { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; }
|
||||
.cancel-btn { background: #f0f0f0; color: #6b7280; }
|
||||
.confirm-btn { background: #1f4b79; color: #fff; }
|
||||
.picker-content { padding: 24rpx 24rpx 36rpx; border-radius: 28rpx 28rpx 0 0; }
|
||||
.picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }
|
||||
.picker-title { color: #1f2d3d; font-size: 30rpx; font-weight: 700; }
|
||||
.picker-clear-text { color: #1f61ff; font-size: 26rpx; }
|
||||
.picker-list { max-height: 480rpx; }
|
||||
.picker-item { display: flex; align-items: center; justify-content: space-between; padding: 26rpx 6rpx; border-bottom: 1rpx solid #edf1f6; }
|
||||
.picker-text { color: #243447; font-size: 28rpx; }
|
||||
.picker-check { color: #1f61ff; font-size: 30rpx; }
|
||||
</style>
|
||||
@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<NavBar :title="t('productInbound.createPalletTitle')" />
|
||||
|
||||
<scroll-view scroll-y class="form-scroll">
|
||||
<view class="form-card">
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.palletCode') }}<text v-if="!formData.isCode" class="required-star">*</text></text>
|
||||
<view class="code-row">
|
||||
<input
|
||||
v-model="formData.code"
|
||||
class="form-input code-input"
|
||||
:placeholder="t('productInbound.enterPalletCode')"
|
||||
:disabled="formData.isCode"
|
||||
/>
|
||||
<view :class="['code-switch', formData.isCode ? 'active' : '']" @click="toggleAutoCode">
|
||||
<text class="switch-text">{{ t('productInbound.autoCode') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.palletType') }} <text class="required-star">*</text></text>
|
||||
<picker mode="selector" :range="palletTypeOptions" range-key="label" :value="getPickerIndex(palletTypeOptions, formData.palletType)" @change="onPalletTypeChange">
|
||||
<view :class="['form-picker', isEmptyValue(formData.palletType) ? 'placeholder' : '']">
|
||||
{{ isEmptyValue(formData.palletType) ? t('productInbound.selectPalletType') : getOptionLabel(palletTypeOptions, formData.palletType) }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.palletStatus') }}<text class="required-star">*</text></text>
|
||||
<picker mode="selector" :range="palletStatusOptions" range-key="label" :value="getPickerIndex(palletStatusOptions, formData.status)" @change="onPalletStatusChange">
|
||||
<view :class="['form-picker', isEmptyValue(formData.status) ? 'placeholder' : '']">
|
||||
{{ isEmptyValue(formData.status) ? t('productInbound.selectPalletStatus') : getOptionLabel(palletStatusOptions, formData.status) }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.spec') }}</text>
|
||||
<view class="spec-row">
|
||||
<input v-model="formData.length" class="form-input spec-input" type="number" :placeholder="t('productInbound.length')" />
|
||||
<text class="spec-separator">x</text>
|
||||
<input v-model="formData.width" class="form-input spec-input" type="number" :placeholder="t('productInbound.width')" />
|
||||
<text class="spec-separator">x</text>
|
||||
<input v-model="formData.height" class="form-input spec-input" type="number" :placeholder="t('productInbound.height')" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.productCount') }}</text>
|
||||
<input v-model="formData.productCount" class="form-input" type="number" :placeholder="t('productInbound.enterPackageCount')" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.warehouse') }}</text>
|
||||
<picker mode="selector" :range="warehouseOptions" range-key="label" :value="getPickerIndex(warehouseOptions, formData.warehouseId)" @change="onWarehouseChange">
|
||||
<view :class="['form-picker', isEmptyValue(formData.warehouseId) ? 'placeholder' : '']">
|
||||
{{ isEmptyValue(formData.warehouseId) ? t('productInbound.selectWarehouse') : getOptionLabel(warehouseOptions, formData.warehouseId) }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.area') }}</text>
|
||||
<picker mode="selector" :range="currentAreaOptions" range-key="label" :value="getPickerIndex(currentAreaOptions, formData.areaId)" @change="onAreaChange">
|
||||
<view :class="['form-picker', isEmptyValue(formData.areaId) ? 'placeholder' : '']">
|
||||
{{ getAreaPickerText() }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.ratedLoadWeight') }}</text>
|
||||
<input v-model="formData.ratedLoadWeight" class="form-input" type="digit" :placeholder="t('productInbound.enterRatedLoadWeight')" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.unit') }}</text>
|
||||
<picker mode="selector" :range="unitOptions" range-key="label" :value="getPickerIndex(unitOptions, formData.unit)" @change="onUnitChange">
|
||||
<view :class="['form-picker', isEmptyValue(formData.unit) ? 'placeholder' : '']">
|
||||
{{ isEmptyValue(formData.unit) ? t('productInbound.selectUnit') : getOptionLabel(unitOptions, formData.unit) }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ t('productInbound.remark') }}</text>
|
||||
<textarea v-model="formData.remark" class="form-textarea" :placeholder="t('productInbound.remarkPlaceholder')" :maxlength="200" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-bar">
|
||||
<view class="cancel-btn" @click="goBack">{{ t('productInbound.cancel') }}</view>
|
||||
<view :class="['submit-btn', submitting ? 'disabled' : '']" @click="submitForm">
|
||||
{{ submitting ? t('productInbound.submitting') : t('productInbound.createPalletTitle') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import NavBar from '@/components/common/NavBar.vue'
|
||||
import { createPallet } from '@/api/mes/productInbound'
|
||||
import { getProductUnitSimpleList } from '@/api/erp/productInfo'
|
||||
import { getWarehouseAreaSimpleList, getWarehouseSimpleList } from '@/api/mes/moldget'
|
||||
import { DICT_TYPE, initAllDict } from '@/utils/dict'
|
||||
import useDictStore from '@/store/modules/dict'
|
||||
|
||||
const { t } = useI18n()
|
||||
const dictStore = useDictStore()
|
||||
const productId = ref(null)
|
||||
const defaultPackageCount = ref(1)
|
||||
const submitting = ref(false)
|
||||
const warehouseOptions = ref([])
|
||||
const warehouseAreaMap = ref({})
|
||||
const palletTypeOptions = ref([])
|
||||
const palletStatusOptions = ref([])
|
||||
const unitOptions = ref([])
|
||||
const formData = ref(getDefaultForm())
|
||||
|
||||
const currentAreaOptions = computed(() => {
|
||||
if (!formData.value.warehouseId) return []
|
||||
return warehouseAreaMap.value[String(formData.value.warehouseId)] || []
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
productId.value = options?.productId || null
|
||||
defaultPackageCount.value = Number(options?.packageCount) || 1
|
||||
formData.value.productCount = defaultPackageCount.value
|
||||
})
|
||||
|
||||
function getDefaultForm() {
|
||||
return {
|
||||
code: '',
|
||||
isCode: true,
|
||||
palletType: '',
|
||||
status: '',
|
||||
length: '',
|
||||
width: '',
|
||||
height: '',
|
||||
ratedLoadWeight: '',
|
||||
unit: '',
|
||||
warehouseId: '',
|
||||
areaId: '',
|
||||
productCount: defaultPackageCount.value || 1,
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
function normalizeList(res) {
|
||||
const root = res && res.data !== undefined ? res.data : res
|
||||
return Array.isArray(root) ? root : (root?.list || root?.rows || root?.records || [])
|
||||
}
|
||||
function normalizeOptions(list) {
|
||||
return (list || []).map((item) => ({
|
||||
label: String(item.label || item.name || ''),
|
||||
value: item.value ?? item.id ?? ''
|
||||
})).filter((item) => item.label !== '')
|
||||
}
|
||||
function isEmptyValue(v) {
|
||||
return v === undefined || v === null || v === ''
|
||||
}
|
||||
function getPickerIndex(options, value) {
|
||||
const index = (options || []).findIndex((item) => String(item.value) === String(value))
|
||||
return index >= 0 ? index : 0
|
||||
}
|
||||
function getOptionLabel(options, value) {
|
||||
return (options || []).find((item) => String(item.value) === String(value))?.label || ''
|
||||
}
|
||||
function toPayloadValue(value) {
|
||||
if (isEmptyValue(value)) return undefined
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? value : num
|
||||
}
|
||||
function toPayloadNumber(value) {
|
||||
if (isEmptyValue(value)) return undefined
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? undefined : num
|
||||
}
|
||||
function syncDictOptions() {
|
||||
palletTypeOptions.value = normalizeOptions(dictStore.getDict(DICT_TYPE.STORAGE_PALLET_TYPES) || [])
|
||||
palletStatusOptions.value = normalizeOptions(dictStore.getDict(DICT_TYPE.STORAGE_PALLET_STATUS) || [])
|
||||
}
|
||||
function getAreaPickerText() {
|
||||
if (!formData.value.warehouseId) return t('productInbound.selectWarehouseFirst')
|
||||
if (!currentAreaOptions.value.length) return t('productInbound.emptyArea')
|
||||
return isEmptyValue(formData.value.areaId) ? t('productInbound.selectArea') : getOptionLabel(currentAreaOptions.value, formData.value.areaId)
|
||||
}
|
||||
function buildSpecification() {
|
||||
const length = String(formData.value.length || '').trim()
|
||||
const width = String(formData.value.width || '').trim()
|
||||
const height = String(formData.value.height || '').trim()
|
||||
if (!length && !width && !height) return undefined
|
||||
return `${length}x${width}x${height}`
|
||||
}
|
||||
function toggleAutoCode() {
|
||||
formData.value.isCode = !formData.value.isCode
|
||||
if (formData.value.isCode) {
|
||||
formData.value.code = ''
|
||||
}
|
||||
}
|
||||
function onPalletTypeChange(e) {
|
||||
const item = palletTypeOptions.value[Number(e.detail.value)]
|
||||
formData.value.palletType = item?.value ?? ''
|
||||
}
|
||||
function onPalletStatusChange(e) {
|
||||
const item = palletStatusOptions.value[Number(e.detail.value)]
|
||||
formData.value.status = item?.value ?? ''
|
||||
}
|
||||
async function onWarehouseChange(e) {
|
||||
const item = warehouseOptions.value[Number(e.detail.value)]
|
||||
formData.value.warehouseId = item?.value ?? ''
|
||||
formData.value.areaId = ''
|
||||
if (formData.value.warehouseId) {
|
||||
await loadAreasForWarehouse(formData.value.warehouseId)
|
||||
}
|
||||
}
|
||||
function onAreaChange(e) {
|
||||
const item = currentAreaOptions.value[Number(e.detail.value)]
|
||||
formData.value.areaId = item?.value ?? ''
|
||||
}
|
||||
function onUnitChange(e) {
|
||||
const item = unitOptions.value[Number(e.detail.value)]
|
||||
formData.value.unit = item?.value ?? ''
|
||||
}
|
||||
function validateForm() {
|
||||
if (!formData.value.isCode && !String(formData.value.code || '').trim()) {
|
||||
uni.showToast({ title: t('productInbound.enterPalletCode'), icon: 'none' })
|
||||
return false
|
||||
}
|
||||
if (isEmptyValue(formData.value.palletType)) {
|
||||
uni.showToast({ title: t('productInbound.selectPalletType'), icon: 'none' })
|
||||
return false
|
||||
}
|
||||
if (isEmptyValue(formData.value.status)) {
|
||||
uni.showToast({ title: t('productInbound.selectPalletStatus'), icon: 'none' })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
async function loadWarehouses() {
|
||||
try {
|
||||
const res = await getWarehouseSimpleList()
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
warehouseOptions.value = data.map((w) => ({ value: w.id, label: w.name || String(w.id || '') }))
|
||||
} catch (e) {}
|
||||
}
|
||||
async function loadAreasForWarehouse(warehouseId) {
|
||||
if (!warehouseId || warehouseAreaMap.value[String(warehouseId)]) return
|
||||
try {
|
||||
const res = await getWarehouseAreaSimpleList(warehouseId)
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
warehouseAreaMap.value = {
|
||||
...warehouseAreaMap.value,
|
||||
[String(warehouseId)]: data.map((a) => ({ value: a.id, label: a.name || a.areaName || String(a.id || '') }))
|
||||
}
|
||||
} catch (e) {
|
||||
warehouseAreaMap.value = { ...warehouseAreaMap.value, [String(warehouseId)]: [] }
|
||||
}
|
||||
}
|
||||
async function loadUnitOptions() {
|
||||
try {
|
||||
const res = await getProductUnitSimpleList()
|
||||
const data = normalizeList(res)
|
||||
unitOptions.value = data.map((item) => ({ value: item.name, label: item.name || String(item.id || '') })).filter((item) => item.value)
|
||||
} catch (e) {
|
||||
unitOptions.value = []
|
||||
}
|
||||
}
|
||||
async function submitForm() {
|
||||
if (submitting.value || !validateForm()) return
|
||||
submitting.value = true
|
||||
try {
|
||||
await createPallet({
|
||||
code: formData.value.isCode ? undefined : String(formData.value.code || '').trim(),
|
||||
isCode: formData.value.isCode,
|
||||
palletType: toPayloadValue(formData.value.palletType),
|
||||
specification: buildSpecification(),
|
||||
ratedLoadWeight: toPayloadNumber(formData.value.ratedLoadWeight),
|
||||
unit: formData.value.unit || undefined,
|
||||
status: toPayloadValue(formData.value.status),
|
||||
warehouseId: toPayloadValue(formData.value.warehouseId),
|
||||
areaId: toPayloadValue(formData.value.areaId),
|
||||
productId: toPayloadValue(productId.value),
|
||||
productCount: toPayloadNumber(formData.value.productCount),
|
||||
remark: String(formData.value.remark || '').trim() || undefined
|
||||
})
|
||||
uni.showToast({ title: t('productInbound.createSuccess'), icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 450)
|
||||
} catch (e) {
|
||||
uni.showToast({ title: t('productInbound.createPalletFailed'), icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
function goBack() {
|
||||
if (submitting.value) return
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
onShow(async () => {
|
||||
await initAllDict()
|
||||
syncDictOptions()
|
||||
await Promise.all([loadWarehouses(), loadUnitOptions()])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(122rpx + env(safe-area-inset-bottom)); }
|
||||
.form-scroll { height: calc(100vh - 122rpx); }
|
||||
.form-card { margin: 18rpx 24rpx; padding: 24rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 20rpx; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
|
||||
.form-item { margin-bottom: 22rpx; }
|
||||
.form-label { display: block; font-size: 25rpx; color: #5f6b7a; margin-bottom: 10rpx; }
|
||||
.required-star { color: #e34d59; }
|
||||
.form-input { height: var(--app-form-control-height, 70rpx); min-height: var(--app-form-control-height, 70rpx); padding: 0 20rpx; border-radius: 12rpx; background: #f5f7fa; font-size: 28rpx; color: #30363d; box-sizing: border-box; }
|
||||
.form-textarea { width: 100%; min-height: var(--app-textarea-field-height, 100rpx); padding: 18rpx 20rpx; border-radius: 12rpx; background: #f5f7fa; font-size: 28rpx; color: #30363d; box-sizing: border-box; }
|
||||
.form-picker { height: var(--app-form-control-height, 70rpx); min-height: var(--app-form-control-height, 70rpx); padding: 0 20rpx; border-radius: 12rpx; background: #f5f7fa; font-size: 28rpx; color: #30363d; display: flex; align-items: center; box-sizing: border-box; }
|
||||
.form-picker.placeholder { color: #999; }
|
||||
.code-row { display: flex; align-items: center; gap: 12rpx; }
|
||||
.code-input { flex: 1; min-width: 0; }
|
||||
.code-switch { height: var(--app-form-control-height, 70rpx); padding: 0 16rpx; background: #f5f7fa; border-radius: 12rpx; border: 1rpx solid transparent; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
|
||||
.code-switch.active { background: #eef6ff; border-color: #c9ddf6; }
|
||||
.switch-text { font-size: 23rpx; color: #1a3a5c; white-space: nowrap; }
|
||||
.spec-row { display: flex; align-items: center; gap: 10rpx; }
|
||||
.spec-input { flex: 1; min-width: 0; text-align: center; padding: 0 8rpx; }
|
||||
.spec-separator { color: #9ca3af; font-size: 24rpx; }
|
||||
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 180rpx 1fr; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99; }
|
||||
.cancel-btn { height: 84rpx; border-radius: 16rpx; background: #eef2f7; color: #475569; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; }
|
||||
.submit-btn { height: 84rpx; border-radius: 16rpx; background: #1f4b79; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
|
||||
.submit-btn.disabled { opacity: 0.72; }
|
||||
</style>
|
||||
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<NavBar :title="t('productInbound.selectPalletTitle')" />
|
||||
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<uni-icons type="search" size="18" color="#9ca3af"></uni-icons>
|
||||
<input
|
||||
v-model="searchText"
|
||||
class="search-input"
|
||||
:placeholder="t('productInbound.searchPalletPlaceholder')"
|
||||
placeholder-class="search-placeholder"
|
||||
confirm-type="search"
|
||||
@confirm="loadPallets"
|
||||
/>
|
||||
<view v-if="searchText" class="search-clear" @click="clearSearch">
|
||||
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view v-if="palletList.length" scroll-y class="pallet-list">
|
||||
<view
|
||||
v-for="item in palletList"
|
||||
:key="item.id"
|
||||
:class="['pallet-card', isSelected(item) ? 'active' : '']"
|
||||
@click="togglePallet(item)"
|
||||
>
|
||||
<view class="pallet-header">
|
||||
<view class="pallet-title-wrap">
|
||||
<view class="pallet-name-row">
|
||||
<text class="pallet-code">{{ textValue(getPalletCode(item)) }}</text>
|
||||
<text class="type-tag">{{ getPalletTypeLabel(item) }}</text>
|
||||
<text class="status-tag">{{ getPalletStatusLabel(item) }}</text>
|
||||
</view>
|
||||
<text class="pallet-product">{{ textValue(item.productName) }}</text>
|
||||
</view>
|
||||
<view class="check-badge">
|
||||
<uni-icons v-if="isSelected(item)" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-grid">
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.warehouse') }}</text>
|
||||
<text class="info-value">{{ textValue(getWarehouseName(item.warehouseId)) }}</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="info-label">{{ t('productInbound.area') }}</text>
|
||||
<text class="info-value">{{ textValue(getAreaName(item.warehouseId, item.areaId)) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else class="empty-wrap">
|
||||
<uni-icons type="info" size="30" color="#cbd5e1"></uni-icons>
|
||||
<text>{{ loading ? t('productInbound.loading') : t('productInbound.emptyPallet') }}</text>
|
||||
</view>
|
||||
|
||||
<view class="add-btn" @click="openCreatePallet">
|
||||
<text class="add-icon">+</text>
|
||||
</view>
|
||||
|
||||
<view class="action-bar">
|
||||
<view class="selected-count">{{ t('productInbound.selectedCount', { count: selectedPallets.length }) }}</view>
|
||||
<view :class="['action-btn', selectedPallets.length ? '' : 'action-btn-disabled']" @click="handleConfirm">{{ t('productInbound.confirm') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import NavBar from '@/components/common/NavBar.vue'
|
||||
import { getPalletPage } from '@/api/mes/productInbound'
|
||||
import { getWarehouseAreaSimpleList, getWarehouseSimpleList } from '@/api/mes/moldget'
|
||||
import { DICT_TYPE, getDictLabel, initAllDict } from '@/utils/dict'
|
||||
|
||||
const { t } = useI18n()
|
||||
const productId = ref(null)
|
||||
const defaultPackageCount = ref(1)
|
||||
const palletList = ref([])
|
||||
const selectedPallets = ref([])
|
||||
const searchText = ref('')
|
||||
const loading = ref(false)
|
||||
const warehouseOptions = ref([])
|
||||
const warehouseAreaMap = ref({})
|
||||
|
||||
onLoad((options) => {
|
||||
productId.value = options?.productId || null
|
||||
defaultPackageCount.value = Number(options?.packageCount) || 1
|
||||
const selected = getApp().globalData?._productInboundSelectedPallets
|
||||
selectedPallets.value = Array.isArray(selected) ? selected.map((item) => ({ ...item })) : []
|
||||
})
|
||||
|
||||
function textValue(v) {
|
||||
if (v === 0) return '0'
|
||||
if (v == null) return '-'
|
||||
const s = String(v).trim()
|
||||
return s || '-'
|
||||
}
|
||||
function normalizeList(res) {
|
||||
const root = res && res.data !== undefined ? res.data : res
|
||||
return Array.isArray(root) ? root : (root?.list || root?.rows || root?.records || [])
|
||||
}
|
||||
function getPalletCode(pallet) {
|
||||
return pallet?.code || pallet?.palletCode || ''
|
||||
}
|
||||
function getPalletTypeLabel(pallet) {
|
||||
const fallback = textValue(pallet?.palletTypeName || pallet?.typeName || pallet?.palletType)
|
||||
return getDictLabel(DICT_TYPE.STORAGE_PALLET_TYPES, pallet?.palletType, fallback)
|
||||
}
|
||||
function getPalletStatusLabel(pallet) {
|
||||
const fallback = textValue(pallet?.statusName || pallet?.statusLabel || pallet?.status)
|
||||
return getDictLabel(DICT_TYPE.STORAGE_PALLET_STATUS, pallet?.status, fallback)
|
||||
}
|
||||
function isSelected(pallet) {
|
||||
return selectedPallets.value.some((item) => String(item.id) === String(pallet.id))
|
||||
}
|
||||
function togglePallet(pallet) {
|
||||
if (isSelected(pallet)) {
|
||||
selectedPallets.value = selectedPallets.value.filter((item) => String(item.id) !== String(pallet.id))
|
||||
return
|
||||
}
|
||||
selectedPallets.value.push({
|
||||
...pallet,
|
||||
packageCount: pallet.productCount || pallet.packageCount || defaultPackageCount.value
|
||||
})
|
||||
}
|
||||
function clearSearch() {
|
||||
searchText.value = ''
|
||||
loadPallets()
|
||||
}
|
||||
function openCreatePallet() {
|
||||
const query = [
|
||||
`productId=${encodeURIComponent(productId.value || '')}`,
|
||||
`packageCount=${encodeURIComponent(defaultPackageCount.value || 1)}`
|
||||
].join('&')
|
||||
uni.navigateTo({ url: `/pages_function/pages/productInbound/palletCreate?${query}` })
|
||||
}
|
||||
function getWarehouseName(id) {
|
||||
return warehouseOptions.value.find((item) => String(item.value) === String(id))?.label || ''
|
||||
}
|
||||
function getAreaName(warehouseId, areaId) {
|
||||
const areas = warehouseAreaMap.value[String(warehouseId)] || []
|
||||
return areas.find((item) => String(item.value) === String(areaId))?.label || ''
|
||||
}
|
||||
async function loadWarehouses() {
|
||||
try {
|
||||
const res = await getWarehouseSimpleList()
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
warehouseOptions.value = data.map((w) => ({ value: w.id, label: w.name || String(w.id || '') }))
|
||||
} catch (e) {}
|
||||
}
|
||||
async function loadAreasForWarehouse(warehouseId) {
|
||||
if (!warehouseId || warehouseAreaMap.value[String(warehouseId)]) return
|
||||
try {
|
||||
const res = await getWarehouseAreaSimpleList(warehouseId)
|
||||
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
|
||||
warehouseAreaMap.value = {
|
||||
...warehouseAreaMap.value,
|
||||
[String(warehouseId)]: data.map((a) => ({ value: a.id, label: a.name || a.areaName || String(a.id || '') }))
|
||||
}
|
||||
} catch (e) {
|
||||
warehouseAreaMap.value = { ...warehouseAreaMap.value, [String(warehouseId)]: [] }
|
||||
}
|
||||
}
|
||||
async function loadAreasForPallets(pallets) {
|
||||
const ids = Array.from(new Set((pallets || []).map((p) => p.warehouseId).filter(Boolean)))
|
||||
await Promise.all(ids.map((id) => loadAreasForWarehouse(id)))
|
||||
}
|
||||
async function loadPallets() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getPalletPage({
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
code: searchText.value.trim() || undefined,
|
||||
productId: productId.value || undefined
|
||||
})
|
||||
palletList.value = normalizeList(res)
|
||||
await loadAreasForPallets([...palletList.value, ...selectedPallets.value])
|
||||
} catch (e) {
|
||||
uni.showToast({ title: t('productInbound.loadFailed'), icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
function handleConfirm() {
|
||||
if (!selectedPallets.value.length) {
|
||||
uni.showToast({ title: t('productInbound.selectPallet'), icon: 'none' })
|
||||
return
|
||||
}
|
||||
getApp().globalData._productInboundPalletSelectResult = selectedPallets.value
|
||||
getApp().globalData._productInboundSelectedPallets = []
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
onShow(async () => {
|
||||
await initAllDict()
|
||||
await loadWarehouses()
|
||||
await loadPallets()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(138rpx + env(safe-area-inset-bottom)); }
|
||||
.search-bar { padding: 18rpx 24rpx; background: #ffffff; box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.03); }
|
||||
.search-input-wrap { display: flex; align-items: center; gap: 12rpx; height: var(--app-form-control-height, 70rpx); padding: 0 22rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
|
||||
.search-input { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; }
|
||||
.search-placeholder { color: #9ca3af; }
|
||||
.search-clear { width: 44rpx; height: 44rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pallet-list { height: calc(100vh - 312rpx); }
|
||||
.pallet-card { margin: 18rpx 24rpx 0; padding: 24rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 20rpx; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
|
||||
.pallet-card.active { border-color: #bfdbfe; background: #f9fbff; box-shadow: 0 8rpx 22rpx rgba(31, 124, 255, 0.08); }
|
||||
.pallet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18rpx; }
|
||||
.pallet-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||
.pallet-name-row { display: flex; align-items: center; gap: 10rpx; min-width: 0; }
|
||||
.pallet-code { min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.type-tag, .status-tag { max-width: 140rpx; padding: 5rpx 12rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1.3; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.type-tag { background: #eef2ff; color: #4f46e5; }
|
||||
.status-tag { background: #ecfdf5; color: #059669; }
|
||||
.pallet-product { font-size: 24rpx; color: #8a94a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.check-badge { width: 36rpx; height: 36rpx; border-radius: 18rpx; border: 1rpx solid #d1d5db; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pallet-card.active .check-badge { border-color: #1f7cff; background: #1f7cff; }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14rpx; margin-top: 20rpx; padding-top: 18rpx; border-top: 1rpx solid #f1f5f9; }
|
||||
.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 6rpx; }
|
||||
.info-label { font-size: 23rpx; color: #9ca3af; }
|
||||
.info-value { font-size: 27rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.empty-wrap { height: calc(100vh - 312rpx); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14rpx; color: #94a3b8; font-size: 27rpx; }
|
||||
.add-btn { position: fixed; right: 28rpx; bottom: calc(154rpx + env(safe-area-inset-bottom)); width: 96rpx; height: 96rpx; border-radius: 48rpx; background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.32); z-index: 98; }
|
||||
.add-icon { color: #ffffff; font-size: 56rpx; line-height: 1; }
|
||||
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 180rpx 1fr; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99; }
|
||||
.selected-count { height: 84rpx; border-radius: 16rpx; background: #eef2f7; color: #475569; display: flex; align-items: center; justify-content: center; font-size: 27rpx; font-weight: 600; }
|
||||
.action-btn { height: 84rpx; border-radius: 16rpx; background: #1f4b79; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
|
||||
.action-btn-disabled { background: #94a3b8; }
|
||||
</style>
|
||||
Loading…
Reference in New Issue