You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
besure_app/src/pages_function/pages/sparepartInbound/sparepartConfirm.vue

493 lines
19 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="page-container">
<NavBar :title="'确认备件入库'" />
<!-- 已选备件 -->
<view class="sparepart-section">
<view class="section-title-bar">
<view class="section-bar-line"></view>
<text class="section-title">已选备件</text>
</view>
<view class="sparepart-card">
<view class="card-top">
<view class="card-image-wrap">
<image
v-if="sparepartImage"
:src="sparepartImage"
class="card-image"
mode="aspectFill"
/>
<view v-else class="card-image-empty">
<text class="empty-img-icon">📦</text>
</view>
</view>
<view class="card-info-right">
<view class="info-item">
<text class="info-label">备件名称:</text>
<text class="info-name">{{ textValue(sparepart.name) }}</text>
</view>
<view class="info-item">
<text class="info-label">规格:</text>
<text class="info-value">{{ textValue(sparepart.standard || sparepart.deviceSpec) }}</text>
</view>
<view class="info-item">
<text class="info-label">当前总库存:</text>
<text class="info-value stock-highlight">{{ sparepart.count != null ? sparepart.count : 0 }}{{ textUnit(sparepart.unitName || sparepart.minStockUnitName || '个') }}</text>
</view>
</view>
</view>
<view class="card-bottom">
<view class="detail-row two-col">
<view class="detail-col">
<text class="detail-label">采购单位:</text>
<text class="detail-value">{{ textValue(sparepart.purchaseUnitName) }}</text>
</view>
<view class="detail-col">
<text class="detail-label">库存单位:</text>
<text class="detail-value">{{ textValue(sparepart.unitName || sparepart.minStockUnitName || '个') }}</text>
</view>
</view>
<view class="detail-row">
<text class="detail-label">换算关系:</text>
<text class="detail-value">1{{ textValue(sparepart.purchaseUnitName) }}={{ textValue(sparepart.purchaseUnitConvertQuantity) }}{{ stockUnitLabel(sparepart) }}</text>
</view>
</view>
</view>
<!-- 仓库/库区 -->
<view class="section-title-bar" style="padding-top: 24rpx;">
<view class="section-bar-line"></view>
<text class="section-title">仓库/库区</text>
</view>
<view class="select-row-card warehouse-area-card">
<view class="warehouse-area-rows">
<view class="warehouse-area-row">
<text class="warehouse-area-label">仓库</text>
<view class="warehouse-area-dropdown" @click="toggleWarehouseDropdown">
<view class="dropdown-input">
<text :class="['dropdown-value', { placeholder: !selectedWarehouse }]">
{{ selectedWarehouse ? selectedWarehouse.label : '请选择' }}
</text>
<text class="dropdown-arrow">▼</text>
</view>
<view v-if="showWarehouseDropdown" class="dropdown-panel">
<view class="dropdown-scroll">
<view
v-for="item in warehouseOptions"
:key="item.value"
class="dropdown-item"
:class="{ active: selectedWarehouse?.value === item.value }"
@click.stop="handleSelectWarehouse(item)"
>
<text class="dropdown-item-text">{{ item.label }}</text>
<text v-if="selectedWarehouse?.value === item.value" class="dropdown-check">✓</text>
</view>
<view v-if="!warehouseOptions.length" class="dropdown-empty">暂无数据</view>
</view>
</view>
</view>
</view>
<view class="warehouse-area-row">
<text class="warehouse-area-label">库区</text>
<view class="warehouse-area-dropdown" @click="toggleAreaDropdown">
<view class="dropdown-input">
<text :class="['dropdown-value', { placeholder: !selectedArea }]">
{{ selectedArea ? selectedArea.label : (loadingAreas ? '加载中...' : '请选择') }}
</text>
<text class="dropdown-arrow">▼</text>
</view>
<view v-if="showAreaDropdown" class="dropdown-panel">
<view class="dropdown-scroll">
<view
v-for="item in areaOptions"
:key="item.value"
class="dropdown-item"
:class="{ active: selectedArea?.value === item.value }"
@click.stop="handleSelectArea(item)"
>
<text class="dropdown-item-text">{{ item.label }}</text>
<text v-if="selectedArea?.value === item.value" class="dropdown-check">✓</text>
</view>
<view v-if="!areaOptions.length" class="dropdown-empty">暂无数据</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 入库数量 -->
<view class="section-title-bar" style="padding-top: 24rpx;">
<view class="section-bar-line"></view>
<text class="section-title">入库数量</text>
</view>
<view class="qty-input-card">
<view class="form-field">
<text class="form-label">入库数量</text>
<input
v-model="inboundQty"
class="form-input"
placeholder="请输入"
confirm-type="done"
/>
<text class="form-suffix-text">单位:{{ textValue(sparepart.purchaseUnitName) }}</text>
</view>
<view class="convert-row">
<text class="convert-label-inline">折算后库存数量:</text>
<text class="convert-value-inline">{{ calculatedStock }}</text>
<text class="convert-unit-inline">{{ stockUnitLabel(sparepart) }}</text>
</view>
<view class="convert-formula-inline">
{{ inboundQty || 0 }}{{ textValue(sparepart.purchaseUnitName) }} × {{ textValue(sparepart.purchaseUnitConvertQuantity) }}{{ stockUnitLabel(sparepart) }} = {{ calculatedStock }}{{ stockUnitLabel(sparepart) }}
</view>
</view>
<!-- 供应商 -->
<view class="section-title-bar" style="padding-top: 24rpx;">
<view class="section-bar-line"></view>
<text class="section-title">供应商</text>
</view>
<view class="select-row-card">
<view class="full-dropdown">
<text :class="{ placeholder: !defaultSupplierName }">
{{ defaultSupplierName || '未配置默认供应商' }}
</text>
</view>
</view>
</view>
<!-- 底部确认按钮 -->
<view class="bottom-actions">
<view class="bottom-btn cancel-btn" @click="handleCancel">取消</view>
<view class="bottom-btn confirm-btn" @click="handleConfirm"></view>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import NavBar from '@/components/common/NavBar.vue'
import { getWarehouseSimpleList, getWarehouseAreaSimpleList } from '@/api/mes/moldget'
import { getSparepartDetail, getSparepartStockCount } from '@/api/mes/sparepart'
const sparepart = ref({})
const inboundQty = ref(null)
const supplierId = ref(undefined)
const supplierName = ref('')
// 仓库下拉
const warehouseOptions = ref([])
const selectedWarehouse = ref(null)
const showWarehouseDropdown = ref(false)
// 库区下拉
const areaOptions = ref([])
const selectedArea = ref(null)
const showAreaDropdown = ref(false)
const loadingAreas = ref(false)
const sparepartImage = computed(() => {
const images = sparepart.value.images
if (!images) return ''
if (Array.isArray(images)) return String(images[0] || '')
return String(images).split(',')[0]?.trim() || ''
})
const calculatedStock = computed(() => {
const qty = Number(inboundQty.value) || 0
const ratio = Number(sparepart.value.purchaseUnitConvertQuantity) || 0
return qty * ratio
})
const defaultSupplierName = computed(() => {
const suppliers = sparepart.value.suppliers
const defaultId = sparepart.value.defaultSupplierId
if (!suppliers || !suppliers.length) return ''
if (defaultId) {
const found = suppliers.find(s => s.supplierId === defaultId || s.id === defaultId)
if (found) return found.supplierName || ''
}
const firstDefault = suppliers.find(s => s.defaultStatus === 1)
return firstDefault?.supplierName || ''
})
function textValue(v) {
if (v === 0) return '0'
if (v == null) return '-'
const s = String(v).trim()
return s || '-'
}
function textUnit(v) {
if (v === 0) return '0'
if (v == null) return ''
return String(v).trim()
}
function stockUnitLabel(item) {
return item.unitName || item.minStockUnitName || '个'
}
function handleCancel() {
uni.navigateBack()
}
function handleConfirm() {
if (!inboundQty.value || Number(inboundQty.value) <= 0) {
uni.showToast({ title: '请输入入库数量', icon: 'none' })
return
}
if (!selectedWarehouse.value) {
uni.showToast({ title: '请选择仓库', icon: 'none' })
return
}
if (!selectedArea.value) {
uni.showToast({ title: '请选择库区', icon: 'none' })
return
}
// 构建入库项,存入 globalData 列表
const item = {
// 备件信息
productId: sparepart.value.id,
productName: sparepart.value.name || '',
productBarCode: sparepart.value.barCode || '',
productUnitName: sparepart.value.unitName || sparepart.value.minStockUnitName || '',
purchaseUnitName: sparepart.value.purchaseUnitName || '',
purchaseUnitConvertQuantity: Number(sparepart.value.purchaseUnitConvertQuantity) || 1,
// 入库信息
inputCount: Number(inboundQty.value),
count: Number(inboundQty.value) * (Number(sparepart.value.purchaseUnitConvertQuantity) || 1),
// 供应商
supplierId: sparepart.value.defaultSupplierId,
supplierName: defaultSupplierName.value,
// 仓库库区
warehouseId: selectedWarehouse.value.value,
warehouseName: selectedWarehouse.value.label,
areaId: selectedArea.value.value,
areaName: selectedArea.value.label,
// 原始 sparepart 引用(供展示用)
_sparepart: { ...sparepart.value }
}
// 存入 globalData 列表
if (!getApp().globalData._sparepartInboundItems) {
getApp().globalData._sparepartInboundItems = []
}
getApp().globalData._sparepartInboundItems.push(item)
uni.showToast({ title: '已添加: ' + (sparepart.value.name || ''), icon: 'success', duration: 1200 })
setTimeout(() => {
// 扫码进入(delta=1) vs 选择进入(delta=2需跳过select页)
const fromScan = getApp().globalData._sparepartFromScan
getApp().globalData._sparepartFromScan = false
uni.navigateBack({ delta: fromScan ? 1 : 2 })
}, 800)
}
// 仓库
function toggleWarehouseDropdown() {
showWarehouseDropdown.value = !showWarehouseDropdown.value
}
function handleSelectWarehouse(item) {
selectedWarehouse.value = item
showWarehouseDropdown.value = false
selectedArea.value = null
areaOptions.value = []
loadAreas(item.value)
}
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) {
console.error('loadWarehouses error', e)
}
}
// 库区
function toggleAreaDropdown() {
if (!selectedWarehouse.value) {
uni.showToast({ title: '请先选择仓库', icon: 'none' })
return
}
showAreaDropdown.value = !showAreaDropdown.value
}
function handleSelectArea(item) {
selectedArea.value = item
showAreaDropdown.value = false
}
async function loadAreas(warehouseId) {
if (!warehouseId) return
loadingAreas.value = true
areaOptions.value = []
try {
const res = await getWarehouseAreaSimpleList(warehouseId)
const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : [])
areaOptions.value = data.map((a) => ({
value: a.id,
label: a.name || a.areaName || String(a.id || '')
}))
} catch (e) {
console.error('loadAreas error', e)
} finally {
loadingAreas.value = false
}
}
onShow(async () => {
// 从 globalData 读取选择的备件
const selectResult = getApp().globalData?._sparepartBeforeConfirm
if (selectResult) {
sparepart.value = selectResult
inboundQty.value = null
getApp().globalData._sparepartBeforeConfirm = null
// 获取详情补充库存等信息
if (selectResult.id) {
try {
const res = await getSparepartDetail(selectResult.id)
const detail = res?.data || res
if (detail) {
sparepart.value = { ...sparepart.value, ...detail }
loadStockCount()
}
} catch (e) {
console.error('获取备件详情失败:', e)
}
}
}
loadWarehouses()
})
async function loadStockCount() {
const id = sparepart.value.id
if (!id) return
try {
const res = await getSparepartStockCount(id)
sparepart.value.count = (res?.data ?? res) != null ? Number(res?.data ?? res) : 0
} catch (e) {
console.error('获取库存失败:', e)
sparepart.value.count = 0
}
}
onHide(() => {
showWarehouseDropdown.value = false
showAreaDropdown.value = false
})
</script>
<style lang="scss" scoped>
.page-container {
min-height: 100vh;
background: #f5f6f8;
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
.sparepart-section { padding: 0; }
.section-title-bar { display: flex; align-items: center; gap: 10rpx; padding: 24rpx 24rpx 18rpx; }
.section-bar-line { width: 6rpx; height: 32rpx; border-radius: 3rpx; background: #2563eb; flex-shrink: 0; }
.section-title { font-size: 30rpx; font-weight: 700; color: #1a1a1a; }
.sparepart-card {
background: #fff; border-radius: 16rpx; padding: 24rpx; margin: 0 24rpx 20rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
}
.card-top { display: flex; position: relative; }
.card-image-wrap {
width: 160rpx; height: 160rpx; border-radius: 12rpx; overflow: hidden;
background: #f8fafc; border: 1rpx solid #f0f0f0; flex-shrink: 0; margin-right: 20rpx;
}
.card-image { width: 100%; height: 100%; }
.card-image-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f8fafc; }
.empty-img-icon { font-size: 56rpx; opacity: 0.3; }
.card-info-right { flex: 1; min-width: 0; }
.info-item { display: flex; align-items: center; margin-bottom: 8rpx; }
.info-label { font-size: 26rpx; color: #6b7280; flex-shrink: 0; }
.info-name { font-size: 30rpx; font-weight: 700; color: #0f172a; }
.info-value { font-size: 26rpx; color: #374151; }
.stock-highlight { font-size: 30rpx; font-weight: 700; color: #1f2937; }
.card-bottom { margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; }
.detail-row { display: flex; align-items: center; margin-bottom: 14rpx;
&:last-child { margin-bottom: 0; }
&.two-col { justify-content: space-between; }
}
.detail-col { display: flex; align-items: center; flex: 1; }
.detail-label { font-size: 24rpx; color: #9ca3af; flex-shrink: 0; }
.detail-value { font-size: 24rpx; color: #4b5563; }
.qty-input-card {
background: #fff; border-radius: 16rpx; padding: 24rpx; margin: 0 24rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
}
.form-field { display: flex; flex-direction: column; gap: 12rpx; }
.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
.form-input { width: 100%; height: 88rpx; padding: 0 24rpx; font-size: 28rpx; color: #374151; background: #f8fafc; border-radius: 14rpx; box-sizing: border-box; }
.form-suffix-text { display: block; margin-top: 10rpx; font-size: 24rpx; color: #9ca3af; }
.convert-row { margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; display: flex; align-items: center; }
.convert-label-inline { font-size: 26rpx; color: #6b7280; }
.convert-value-inline { font-size: 36rpx; font-weight: 700; color: #1f2937; margin-left: auto; }
.convert-unit-inline { font-size: 24rpx; color: #64748b; margin-left: 8rpx; }
.convert-formula-inline { margin-top: 10rpx; font-size: 22rpx; color: #9ca3af; }
.select-row-card {
position: relative; display: flex; align-items: center; justify-content: space-between;
background: #fff; border-radius: 16rpx; padding: 24rpx; margin: 0 24rpx 20rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
.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;
}
}
.full-dropdown { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 28rpx; color: #374151;
.placeholder { color: #9ca3af; }
}
.warehouse-area-card { align-items: flex-start; }
.warehouse-area-rows { width: 100%; display: flex; flex-direction: column; gap: 16rpx; }
.warehouse-area-row { display: flex; align-items: center; }
.warehouse-area-label { width: 80rpx; font-size: 26rpx; color: #6b7280; flex-shrink: 0; }
.warehouse-area-dropdown { flex: 1; min-width: 0; position: relative;
.dropdown-panel {
position: absolute; top: 100%; left: 0; right: 0; z-index: 100; 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-input { display: flex; align-items: center; height: 64rpx; padding: 0 20rpx; border: 1rpx solid #e0e0e0; border-radius: 10rpx; background: #f9fafb; }
.dropdown-value { flex: 1; font-size: 27rpx; color: #333; &.placeholder { color: #bbb; } }
.dropdown-arrow { font-size: 20rpx; color: #999; flex-shrink: 0; }
.dropdown-panel { position: absolute; top: 68rpx; left: 0; right: 0; z-index: 200; background: #fff; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1); overflow: hidden; }
.dropdown-scroll { max-height: 360rpx; overflow-y: auto; }
.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; border-bottom: 1rpx solid #f0f0f0;
&:last-child { border-bottom: 0; }
&.active { background: #f0f5ff; }
}
.dropdown-item-text { font-size: 27rpx; color: #333; }
.dropdown-check { font-size: 28rpx; color: #2563eb; font-weight: 700; }
.dropdown-empty { padding: 32rpx; text-align: center; color: #999; font-size: 26rpx; }
.bottom-actions {
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;
}
.bottom-btn { flex: 1; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 16rpx; font-size: 30rpx; font-weight: 600;
&:active { opacity: 0.85; }
}
.cancel-btn { background: #eef2f7; color: #475569; }
.confirm-btn { background: #1f4b79; color: #ffffff; }
</style>