|
|
<template>
|
|
|
<view class="page-container">
|
|
|
<NavBar :title="pageTitle" />
|
|
|
|
|
|
<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">调拨信息</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-field">
|
|
|
<text class="form-label">调拨时间<text class="required-star">*</text></text>
|
|
|
<picker mode="date" :value="moveDate" @change="handleDateChange">
|
|
|
<view class="select-field">
|
|
|
<text :class="['select-text', moveDate ? '' : 'placeholder']">{{ moveDate || '请选择调拨时间' }}</text>
|
|
|
<uni-icons type="calendar" size="18" color="#9ca3af"></uni-icons>
|
|
|
</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<view class="form-field">
|
|
|
<text class="form-label">备注</text>
|
|
|
<textarea v-model="remark" class="form-textarea" placeholder="请输入备注信息" placeholder-class="placeholder-text" maxlength="500" />
|
|
|
</view>
|
|
|
</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">调拨清单（{{ itemList.length }}）</text>
|
|
|
</view>
|
|
|
<view class="add-product-btn" @click="handleAddItem">
|
|
|
<uni-icons type="plusempty" size="16" color="#1f7cff"></uni-icons>
|
|
|
<text>添加{{ itemLabel }}</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">{{ itemLabel }}</text>
|
|
|
</view>
|
|
|
<view class="summary-item">
|
|
|
<text class="summary-value">{{ totalCount }}</text>
|
|
|
<text class="summary-label">总数量</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="itemList.length" class="item-list">
|
|
|
<view v-for="(item, index) in itemList" :key="item._key || index" class="item-card" @click="editItem(index)">
|
|
|
<view class="item-info">
|
|
|
<view class="item-header">
|
|
|
<view class="item-title-wrap">
|
|
|
<text class="item-name">{{ textValue(item.productName) }}</text>
|
|
|
<text class="item-code">{{ textValue(item.productBarCode) }}</text>
|
|
|
</view>
|
|
|
<view class="delete-btn" @click.stop="removeItem(index)">
|
|
|
<uni-icons type="trash" size="18" color="#ef4444"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-grid">
|
|
|
<view class="info-cell info-cell-wide">
|
|
|
<text class="info-label">调出</text>
|
|
|
<text class="info-value">{{ textValue(item.fromWarehouseName) }} / {{ textValue(item.fromAreaName) }}</text>
|
|
|
</view>
|
|
|
<view class="info-cell info-cell-wide">
|
|
|
<text class="info-label">调入</text>
|
|
|
<text class="info-value">{{ textValue(item.toWarehouseName) }} / {{ textValue(item.toAreaName) }}</text>
|
|
|
</view>
|
|
|
<view class="info-cell">
|
|
|
<text class="info-label">数量</text>
|
|
|
<text class="info-value highlight">{{ textValue(item.count) }}{{ textUnit(item.productUnitName) }}</text>
|
|
|
</view>
|
|
|
<view class="info-cell">
|
|
|
<text class="info-label">库存</text>
|
|
|
<text class="info-value">{{ textValue(item.stockCount) }}{{ textUnit(item.productUnitName) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-else class="empty-card" @click="handleAddItem">
|
|
|
<uni-icons type="plusempty" size="30" color="#94a3b8"></uni-icons>
|
|
|
<text>请添加调拨{{ itemLabel }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<view class="action-bar">
|
|
|
<view class="action-btn back-btn" @click="handleCancel">取消</view>
|
|
|
<view class="action-btn submit-btn" @click="handleSubmit">确认调拨</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, ref } from 'vue'
|
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
|
import NavBar from '@/components/common/NavBar.vue'
|
|
|
import { createMaterialMove } from '@/api/mes/materialMove'
|
|
|
|
|
|
const itemList = ref([])
|
|
|
const moveDate = ref(formatDate(new Date()))
|
|
|
const categoryType = ref(2)
|
|
|
const remark = ref('')
|
|
|
|
|
|
const categoryNameMap = {
|
|
|
1: '产品',
|
|
|
2: '物料',
|
|
|
3: '备件'
|
|
|
}
|
|
|
const itemLabel = computed(() => categoryNameMap[Number(categoryType.value)] || '物料')
|
|
|
const pageTitle = computed(() => '新增' + itemLabel.value + '库存调拨')
|
|
|
const totalCount = computed(() => itemList.value.reduce((sum, item) => sum + (Number(item.count) || 0), 0))
|
|
|
|
|
|
function formatDate(date) {
|
|
|
const y = date.getFullYear()
|
|
|
const m = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
const d = String(date.getDate()).padStart(2, '0')
|
|
|
return `${y}-${m}-${d}`
|
|
|
}
|
|
|
function textValue(value) {
|
|
|
if (value === 0) return '0'
|
|
|
if (value === null || value === undefined) return '-'
|
|
|
const text = String(value).trim()
|
|
|
return text || '-'
|
|
|
}
|
|
|
function textUnit(value) {
|
|
|
if (value === null || value === undefined) return ''
|
|
|
return String(value).trim()
|
|
|
}
|
|
|
function handleDateChange(event) {
|
|
|
moveDate.value = event.detail.value
|
|
|
}
|
|
|
function handleAddItem() {
|
|
|
const gd = getApp().globalData
|
|
|
gd._materialMoveItems = [...itemList.value]
|
|
|
gd._materialMoveEditIndex = null
|
|
|
gd._materialMoveEditItem = null
|
|
|
gd._materialMoveCategoryType = categoryType.value
|
|
|
uni.navigateTo({ url: `/pages_function/pages/materialMove/productConfirm?categoryType=${categoryType.value}` })
|
|
|
}
|
|
|
function editItem(index) {
|
|
|
const item = itemList.value[index]
|
|
|
if (!item) return
|
|
|
const gd = getApp().globalData
|
|
|
gd._materialMoveItems = [...itemList.value]
|
|
|
gd._materialMoveEditIndex = index
|
|
|
gd._materialMoveEditItem = JSON.parse(JSON.stringify(item))
|
|
|
gd._materialMoveCategoryType = categoryType.value
|
|
|
uni.navigateTo({ url: `/pages_function/pages/materialMove/productConfirm?mode=edit&categoryType=${categoryType.value}` })
|
|
|
}
|
|
|
function removeItem(index) {
|
|
|
itemList.value.splice(index, 1)
|
|
|
getApp().globalData._materialMoveItems = [...itemList.value]
|
|
|
}
|
|
|
function handleCancel() {
|
|
|
const gd = getApp().globalData
|
|
|
gd._materialMoveItems = []
|
|
|
gd._materialMoveEditIndex = null
|
|
|
gd._materialMoveEditItem = null
|
|
|
uni.navigateBack()
|
|
|
}
|
|
|
function validateForm() {
|
|
|
if (!moveDate.value) return '请选择调拨时间'
|
|
|
if (!itemList.value.length) return '请先添加' + itemLabel.value
|
|
|
const invalid = itemList.value.find((item) => !item.productId || !item.fromWarehouseId || !item.fromAreaId || !item.toWarehouseId || !item.toAreaId || !Number(item.count))
|
|
|
if (invalid) return '请完善调拨明细'
|
|
|
const sameArea = itemList.value.find((item) => String(item.fromAreaId) === String(item.toAreaId))
|
|
|
if (sameArea) return '调出库区和调入库区不能相同'
|
|
|
const overStock = itemList.value.find((item) => Number(item.count) > Number(item.stockCount))
|
|
|
if (overStock) return '调拨数量不能大于库存'
|
|
|
return ''
|
|
|
}
|
|
|
function buildMoveTime() {
|
|
|
const now = new Date()
|
|
|
const [y, m, d] = moveDate.value.split('-').map(Number)
|
|
|
return new Date(y, m - 1, d, now.getHours(), now.getMinutes(), now.getSeconds()).getTime()
|
|
|
}
|
|
|
async function handleSubmit() {
|
|
|
const error = validateForm()
|
|
|
if (error) {
|
|
|
uni.showToast({ title: error, icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
const data = {
|
|
|
moveTime: buildMoveTime(),
|
|
|
categoryType: categoryType.value,
|
|
|
status: 0,
|
|
|
totalCount: totalCount.value,
|
|
|
totalPrice: 0,
|
|
|
remark: remark.value || '',
|
|
|
items: itemList.value.map((item) => ({
|
|
|
productId: item.productId,
|
|
|
productName: item.productName,
|
|
|
productBarCode: item.productBarCode,
|
|
|
productUnitName: item.productUnitName,
|
|
|
fromWarehouseId: item.fromWarehouseId,
|
|
|
fromAreaId: item.fromAreaId,
|
|
|
toWarehouseId: item.toWarehouseId,
|
|
|
toAreaId: item.toAreaId,
|
|
|
stockCount: item.stockCount,
|
|
|
count: Number(item.count),
|
|
|
remark: item.remark || ''
|
|
|
}))
|
|
|
}
|
|
|
uni.showLoading({ title: '提交中...', mask: true })
|
|
|
try {
|
|
|
await createMaterialMove(data)
|
|
|
uni.hideLoading()
|
|
|
getApp().globalData._materialMoveItems = []
|
|
|
uni.showToast({ title: '调拨单已创建', icon: 'success' })
|
|
|
setTimeout(() => uni.navigateBack(), 1000)
|
|
|
} catch (e) {
|
|
|
uni.hideLoading()
|
|
|
const msg = e?.message || e?.data?.msg || '保存失败'
|
|
|
uni.showToast({ title: String(msg).slice(0, 50), icon: 'none' })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onLoad((options) => {
|
|
|
const gd = getApp().globalData || {}
|
|
|
categoryType.value = Number(options?.categoryType || gd._materialMoveCategoryType || 2)
|
|
|
gd._materialMoveCategoryType = categoryType.value
|
|
|
})
|
|
|
onShow(() => {
|
|
|
const gd = getApp().globalData || {}
|
|
|
const items = gd._materialMoveItems
|
|
|
if (Array.isArray(items)) itemList.value = [...items]
|
|
|
if (gd._materialMoveCategoryType) categoryType.value = Number(gd._materialMoveCategoryType)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-container { min-height: 100vh; background: #f5f7fb; }
|
|
|
.detail-scroll { height: calc(100vh - 116rpx); }
|
|
|
.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; }
|
|
|
.form-field { display: flex; flex-direction: column; gap: 12rpx; }
|
|
|
.form-field + .form-field { margin-top: 24rpx; }
|
|
|
.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
|
|
|
.required-star { color: #ef4444; font-size: 28rpx; margin-left: 4rpx; }
|
|
|
.select-field { display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; height: 76rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
|
|
|
.select-text { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
.placeholder, .placeholder-text { color: #9ca3af; }
|
|
|
.form-textarea { width: 100%; min-height: 120rpx; background: #f8fafc; border-radius: 14rpx; padding: 18rpx 24rpx; font-size: 28rpx; color: #374151; box-sizing: border-box; }
|
|
|
.add-product-btn { height: 60rpx; padding: 0 18rpx; border-radius: 999rpx; border: 1rpx solid #bfdbfe; background: #eff6ff; color: #1f7cff; font-size: 24rpx; font-weight: 600; display: flex; align-items: center; gap: 8rpx; flex-shrink: 0; }
|
|
|
.summary-strip { display: grid; grid-template-columns: 1fr 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-info { min-width: 0; }
|
|
|
.item-header { display: flex; align-items: flex-start; gap: 12rpx; margin-bottom: 14rpx; }
|
|
|
.item-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6rpx; }
|
|
|
.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 { font-size: 24rpx; color: #94a3b8; }
|
|
|
.delete-btn { width: 48rpx; height: 48rpx; border-radius: 24rpx; background: #fef2f2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
|
|
|
.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
|
|
.info-cell-wide { grid-column: 1 / -1; }
|
|
|
.info-label { font-size: 22rpx; color: #9ca3af; }
|
|
|
.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
.info-value.highlight { color: #1f4b79; font-weight: 700; }
|
|
|
.empty-card { min-height: 220rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14rpx; color: #94a3b8; font-size: 27rpx; }
|
|
|
.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: #eef2f7; color: #475569; }
|
|
|
.submit-btn { background: #1f4b79; color: #ffffff; }
|
|
|
</style>
|