|
|
|
|
@ -0,0 +1,392 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="page-container">
|
|
|
|
|
<NavBar :title="'确认物料出库'" />
|
|
|
|
|
|
|
|
|
|
<view class="material-section">
|
|
|
|
|
<view class="section-title-bar">
|
|
|
|
|
<view class="section-bar-line"></view>
|
|
|
|
|
<text class="section-title">已选物料</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="material-card">
|
|
|
|
|
<view class="card-top">
|
|
|
|
|
<view class="card-image-wrap">
|
|
|
|
|
<image v-if="materialImage" :src="materialImage" 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(material.name) }}</text></view>
|
|
|
|
|
<view class="info-item"><text class="info-label">规格：</text><text class="info-value">{{ textValue(material.standard || material.deviceSpec) }}</text></view>
|
|
|
|
|
<view class="info-item"><text class="info-label">当前总库存：</text><text class="info-value stock-highlight">{{ material.count != null ? material.count : 0 }}{{ textUnit(material.unitName || material.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(material.purchaseUnitName) }}</text></view>
|
|
|
|
|
<view class="detail-col"><text class="detail-label">库存单位：</text><text class="detail-value">{{ textValue(material.unitName || material.minStockUnitName || '个') }}</text></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="detail-row"><text class="detail-label">换算关系：</text><text class="detail-value">1{{ textValue(material.purchaseUnitName) }}={{ textValue(material.purchaseUnitConvertQuantity) }}{{ stockUnitLabel(material) }}</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">
|
|
|
|
|
<view class="dropdown-input">
|
|
|
|
|
<text :class="['dropdown-value', { placeholder: !selectedWarehouse }]">{{ selectedWarehouse ? selectedWarehouse.label : '未找到原料仓' }}</text>
|
|
|
|
|
</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>
|
|
|
|
|
</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="outboundQty" class="form-input" placeholder="请输入" confirm-type="done" />
|
|
|
|
|
<text class="form-suffix-text">单位：{{ textValue(material.purchaseUnitName) }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="!hasWarehouseArea" class="warehouse-hint">请先选择仓库与库区，选择后可查看当前库存</view>
|
|
|
|
|
<view v-if="hasWarehouseArea" class="convert-row">
|
|
|
|
|
<text class="convert-label-inline">出库后当前仓库/库区的剩余库存：</text>
|
|
|
|
|
<text :class="['convert-value-inline', { 'text-danger': stockExceeded }]">{{ remainingStock }}</text>
|
|
|
|
|
<text class="convert-unit-inline">{{ stockUnitLabel(material) }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="hasWarehouseArea" class="convert-helper">{{ currentStockText }}</view>
|
|
|
|
|
<view class="convert-formula-inline">{{ outboundQty || 0 }}{{ textValue(material.purchaseUnitName) }} × {{ textValue(material.purchaseUnitConvertQuantity) }}{{ stockUnitLabel(material) }} = {{ calculatedStock }}{{ stockUnitLabel(material) }}</view>
|
|
|
|
|
<view v-if="stockExceeded" class="stock-warning">
|
|
|
|
|
<text class="warning-icon">⚠</text>
|
|
|
|
|
<view class="warning-text">
|
|
|
|
|
<text class="warning-line">当前仓库/库区的库存不足，不能出库</text>
|
|
|
|
|
<text class="warning-line">当前仓库/库区的库存：{{ stockCount }}{{ stockUnitLabel(material) }}（{{ stockPackText }}）</text>
|
|
|
|
|
<text class="warning-line">本次出库：{{ calculatedStock }}{{ stockUnitLabel(material) }}（{{ outboundPackText }}）</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">
|
|
|
|
|
<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 { getProductDetail, getSparepartStock, getSparepartStockCount } from '@/api/mes/sparepart'
|
|
|
|
|
|
|
|
|
|
const material = ref({})
|
|
|
|
|
const outboundQty = ref(null)
|
|
|
|
|
|
|
|
|
|
const hasWarehouseArea = computed(() => selectedWarehouse.value && selectedArea.value)
|
|
|
|
|
|
|
|
|
|
const warehouseOptions = ref([])
|
|
|
|
|
const selectedWarehouse = ref(null)
|
|
|
|
|
const areaOptions = ref([])
|
|
|
|
|
const selectedArea = ref(null)
|
|
|
|
|
const showAreaDropdown = ref(false)
|
|
|
|
|
const loadingAreas = ref(false)
|
|
|
|
|
|
|
|
|
|
const materialImage = computed(() => {
|
|
|
|
|
const images = material.value.images
|
|
|
|
|
if (!images) return ''
|
|
|
|
|
if (Array.isArray(images)) return String(images[0] || '')
|
|
|
|
|
return String(images).split(',')[0]?.trim() || ''
|
|
|
|
|
})
|
|
|
|
|
// 选中仓库/库区的库存量，未选则为 0
|
|
|
|
|
const warehouseAreaStockCount = ref(0)
|
|
|
|
|
const stockCount = computed(() => warehouseAreaStockCount.value)
|
|
|
|
|
const calculatedStock = computed(() => {
|
|
|
|
|
const qty = Number(outboundQty.value) || 0
|
|
|
|
|
const ratio = Number(material.value.purchaseUnitConvertQuantity) || 1
|
|
|
|
|
const result = qty * ratio
|
|
|
|
|
return Number.isFinite(result) ? result : 0
|
|
|
|
|
})
|
|
|
|
|
const remainingStock = computed(() => {
|
|
|
|
|
const sc = Number.isFinite(stockCount.value) ? stockCount.value : 0
|
|
|
|
|
const cs = Number.isFinite(calculatedStock.value) ? calculatedStock.value : 0
|
|
|
|
|
return Math.max(sc - cs, 0)
|
|
|
|
|
})
|
|
|
|
|
const stockExceeded = computed(() => {
|
|
|
|
|
const sc = Number.isFinite(stockCount.value) ? stockCount.value : 0
|
|
|
|
|
const cs = Number.isFinite(calculatedStock.value) ? calculatedStock.value : 0
|
|
|
|
|
return outboundQty.value > 0 && cs > sc
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function formatStockPack(count) {
|
|
|
|
|
const ratio = Number(material.value.purchaseUnitConvertQuantity) || 1
|
|
|
|
|
if (ratio === 1) return ''
|
|
|
|
|
const packs = Math.floor(count / ratio)
|
|
|
|
|
const remain = count % ratio
|
|
|
|
|
const parts = []
|
|
|
|
|
if (packs > 0) parts.push(`${packs}${textValue(material.value.purchaseUnitName)}`)
|
|
|
|
|
if (remain > 0) parts.push(`${remain}${stockUnitLabel(material)}`)
|
|
|
|
|
return parts.join('') || ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const currentStockText = computed(() => {
|
|
|
|
|
const text = formatStockPack(stockCount.value)
|
|
|
|
|
return text ? `当前仓库/库区的库存：${text}` : ''
|
|
|
|
|
})
|
|
|
|
|
const stockPackText = computed(() => {
|
|
|
|
|
return formatStockPack(stockCount.value) || `${stockCount.value}${stockUnitLabel(material)}`
|
|
|
|
|
})
|
|
|
|
|
const outboundPackText = computed(() => {
|
|
|
|
|
return formatStockPack(calculatedStock.value) || `${calculatedStock.value}${stockUnitLabel(material)}`
|
|
|
|
|
})
|
|
|
|
|
const defaultSupplierName = computed(() => {
|
|
|
|
|
const suppliers = material.value.suppliers
|
|
|
|
|
if (!suppliers || !suppliers.length) return ''
|
|
|
|
|
const defaultId = material.value.defaultSupplierId
|
|
|
|
|
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) {
|
|
|
|
|
const target = item?.value || item || {}
|
|
|
|
|
return target.unitName || target.minStockUnitName || '个'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleCancel() { uni.navigateBack() }
|
|
|
|
|
|
|
|
|
|
function handleConfirm() {
|
|
|
|
|
if (!outboundQty.value || Number(outboundQty.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
|
|
|
|
|
}
|
|
|
|
|
if (stockExceeded.value) {
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: '库存不足',
|
|
|
|
|
content: `当前仓库/库区的库存：${stockCount.value}${stockUnitLabel(material)}（${stockPackText.value}）\n本次出库：${calculatedStock.value}${stockUnitLabel(material)}（${outboundPackText.value}）`,
|
|
|
|
|
showCancel: false,
|
|
|
|
|
confirmText: '知道了'
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const item = {
|
|
|
|
|
productId: material.value.id,
|
|
|
|
|
productName: material.value.name || '',
|
|
|
|
|
productBarCode: material.value.barCode || '',
|
|
|
|
|
productUnitName: material.value.unitName || material.value.minStockUnitName || '',
|
|
|
|
|
purchaseUnitName: material.value.purchaseUnitName || '',
|
|
|
|
|
purchaseUnitConvertQuantity: Number(material.value.purchaseUnitConvertQuantity) || 1,
|
|
|
|
|
inputCount: Number(outboundQty.value),
|
|
|
|
|
count: Number(outboundQty.value) * (Number(material.value.purchaseUnitConvertQuantity) || 1),
|
|
|
|
|
supplierId: material.value.defaultSupplierId,
|
|
|
|
|
supplierName: defaultSupplierName.value,
|
|
|
|
|
warehouseId: selectedWarehouse.value?.value,
|
|
|
|
|
warehouseName: selectedWarehouse.value?.label || '',
|
|
|
|
|
areaId: selectedArea.value?.value,
|
|
|
|
|
areaName: selectedArea.value?.label || '',
|
|
|
|
|
_material: { ...material.value }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!getApp().globalData._materialOutboundItems) {
|
|
|
|
|
getApp().globalData._materialOutboundItems = []
|
|
|
|
|
}
|
|
|
|
|
getApp().globalData._materialOutboundItems.push(item)
|
|
|
|
|
|
|
|
|
|
uni.showToast({ title: '已添加: ' + (material.value.name || ''), icon: 'success', duration: 1200 })
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const fromScan = getApp().globalData._materialFromScan
|
|
|
|
|
getApp().globalData._materialFromScan = false
|
|
|
|
|
uni.navigateBack({ delta: fromScan ? 1 : 2 })
|
|
|
|
|
}, 800)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 || '') }))
|
|
|
|
|
// 物料出库固定使用原料仓。
|
|
|
|
|
if (warehouseOptions.value.length && !selectedWarehouse.value) {
|
|
|
|
|
selectedWarehouse.value = warehouseOptions.value.find(w => w.label === '原料仓') || null
|
|
|
|
|
if (selectedWarehouse.value) {
|
|
|
|
|
loadAreas(selectedWarehouse.value.value)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (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; loadStockCount() }
|
|
|
|
|
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) {} finally { loadingAreas.value = false }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onShow(async () => {
|
|
|
|
|
const selectResult = getApp().globalData?._materialBeforeConfirm
|
|
|
|
|
if (selectResult) {
|
|
|
|
|
material.value = selectResult
|
|
|
|
|
outboundQty.value = null
|
|
|
|
|
getApp().globalData._materialBeforeConfirm = null
|
|
|
|
|
if (selectResult.id) {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getProductDetail(selectResult.id)
|
|
|
|
|
const detail = res?.data || res
|
|
|
|
|
if (detail) { material.value = { ...material.value, ...detail }; loadTotalStockCount() }
|
|
|
|
|
} catch (e) { console.error('获取物料详情失败:', e) }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
loadWarehouses()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 加载总库存（已选物料卡片显示，get-count 返回纯数字）
|
|
|
|
|
async function loadTotalStockCount() {
|
|
|
|
|
const id = material.value.id
|
|
|
|
|
if (!id) return
|
|
|
|
|
try {
|
|
|
|
|
const res = await getSparepartStockCount(id)
|
|
|
|
|
material.value.count = (res?.data ?? res) != null ? Number(res?.data ?? res) : 0
|
|
|
|
|
} catch (e) { material.value.count = 0 }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 加载选中仓库库区的库存（出库数量区块用）
|
|
|
|
|
async function loadStockCount() {
|
|
|
|
|
const id = material.value.id
|
|
|
|
|
if (!id) return
|
|
|
|
|
const whId = selectedWarehouse.value?.value
|
|
|
|
|
const arId = selectedArea.value?.value
|
|
|
|
|
if (!whId || !arId) {
|
|
|
|
|
warehouseAreaStockCount.value = 0
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
const res = await getSparepartStock(id, whId, arId)
|
|
|
|
|
const detail = res?.data || res
|
|
|
|
|
const count = (detail != null && typeof detail === 'object') ? Number(detail.count || 0) : Number(detail || 0)
|
|
|
|
|
warehouseAreaStockCount.value = Number.isFinite(count) ? count : 0
|
|
|
|
|
} catch (e) { warehouseAreaStockCount.value = 0 }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onHide(() => { showAreaDropdown.value = false })
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page-container { min-height: 100vh; background: #f5f6f8; padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); }
|
|
|
|
|
.material-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; }
|
|
|
|
|
.material-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; }
|
|
|
|
|
.warehouse-hint { margin-top: 16rpx; padding: 16rpx 20rpx; background: #fefce8; border: 1rpx solid #fef08a; border-radius: 10rpx; font-size: 24rpx; color: #a16207; }
|
|
|
|
|
.convert-formula-inline { margin-top: 10rpx; font-size: 22rpx; color: #9ca3af; }
|
|
|
|
|
.convert-helper { margin-top: 8rpx; font-size: 24rpx; color: #9ca3af; }
|
|
|
|
|
.text-danger { color: #dc2626 !important; }
|
|
|
|
|
|
|
|
|
|
.stock-warning { display: flex; gap: 12rpx; margin-top: 20rpx; padding: 20rpx; background: #fef2f2; border: 1rpx solid #fecaca; border-radius: 12rpx; }
|
|
|
|
|
.warning-icon { font-size: 32rpx; flex-shrink: 0; }
|
|
|
|
|
.warning-text { flex: 1; display: flex; flex-direction: column; gap: 6rpx; }
|
|
|
|
|
.warning-line { font-size: 24rpx; color: #991b1b; line-height: 1.6; display: block; }
|
|
|
|
|
|
|
|
|
|
.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); }
|
|
|
|
|
.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: 120rpx; 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: 200; margin-top: 4rpx; background: #fff; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.15); 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: #fff; 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>
|
zhongwenkai
4 days ago