feat：产品盘点执行模块
parent
fc9730dfdc
commit
7865eae79d
@ -0,0 +1,9 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getConfigPage(params = {}) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/infra/config/page',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function createProductCheck(data) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/create',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateProductCheckItemsByProduct(data) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/generate-items/by-product',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function generateProductCheckItemsByLocation(data) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/generate-items/by-location',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProductCheckPage(params = {}) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/page',
|
||||||
|
method: 'get',
|
||||||
|
params: { ...params, categoryType: 1 }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProductCheckDetail(id) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/get',
|
||||||
|
method: 'get',
|
||||||
|
params: { id }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateProductCheck(data) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/update',
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function submitProductCheck(data) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/submit',
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function auditProductCheck(data) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/audit',
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteProductCheck(id) {
|
||||||
|
return request({
|
||||||
|
url: '/admin-api/erp/stock-check/delete',
|
||||||
|
method: 'delete',
|
||||||
|
params: { ids: String(id) }
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.selectAreaTitle')" />
|
||||||
|
|
||||||
|
<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('productCheck.searchAreaPlaceholder')"
|
||||||
|
placeholder-class="search-placeholder"
|
||||||
|
confirm-type="search"
|
||||||
|
/>
|
||||||
|
<view v-if="searchText" class="search-clear" @click="clearSearch">
|
||||||
|
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="area-list" v-if="filteredList.length">
|
||||||
|
<view
|
||||||
|
v-for="item in filteredList"
|
||||||
|
:key="item.id"
|
||||||
|
:class="['area-card', isSelected(item) ? 'active' : '']"
|
||||||
|
@click="selectedId = item.id"
|
||||||
|
>
|
||||||
|
<view class="area-header">
|
||||||
|
<view class="area-title-wrap">
|
||||||
|
<text class="area-name">{{ textValue(item.name || item.areaName) }}</text>
|
||||||
|
<text class="area-code">{{ textValue(item.code || item.areaCode) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="check-badge">
|
||||||
|
<uni-icons v-if="isSelected(item)" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view v-else class="empty-wrap">
|
||||||
|
<uni-icons type="info" size="30" color="#cbd5e1"></uni-icons>
|
||||||
|
<text>{{ loading ? t('productCheck.loading') : t('productCheck.emptyArea') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-bar">
|
||||||
|
<view :class="['action-btn', selectedId ? '' : 'action-btn-disabled']" @click="handleConfirm">{{ t('productCheck.confirm') }}</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 { getWarehouseAreaSimpleList } from '@/api/mes/moldget'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const warehouseId = ref(null)
|
||||||
|
const areaList = ref([])
|
||||||
|
const selectedId = ref(null)
|
||||||
|
const searchText = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const filteredList = computed(() => {
|
||||||
|
const keyword = searchText.value.trim().toLowerCase()
|
||||||
|
if (!keyword) return areaList.value
|
||||||
|
return areaList.value.filter((item) =>
|
||||||
|
String(item.name || item.areaName || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.code || item.areaCode || '').toLowerCase().includes(keyword)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
warehouseId.value = options?.warehouseId || null
|
||||||
|
selectedId.value = options?.selectedId ? String(options.selectedId) : null
|
||||||
|
})
|
||||||
|
|
||||||
|
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 : []
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSelected(item) {
|
||||||
|
return String(selectedId.value) === String(item.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSearch() {
|
||||||
|
searchText.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadAreas() {
|
||||||
|
if (!warehouseId.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectWarehouseFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getWarehouseAreaSimpleList(warehouseId.value)
|
||||||
|
areaList.value = normalizeList(res)
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.loadFailed'), icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleConfirm() {
|
||||||
|
if (!selectedId.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectArea'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const area = areaList.value.find((item) => String(item.id) === String(selectedId.value))
|
||||||
|
if (!area) return
|
||||||
|
getApp().globalData._productCheckAreaSelectResult = {
|
||||||
|
value: area.id,
|
||||||
|
label: area.name || area.areaName || String(area.id),
|
||||||
|
raw: area
|
||||||
|
}
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
onShow(loadAreas)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(120rpx + 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: 76rpx; 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; }
|
||||||
|
.area-list { height: calc(100vh - 294rpx); }
|
||||||
|
.area-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); }
|
||||||
|
.area-card.active { border-color: #bfdbfe; background: #f9fbff; box-shadow: 0 8rpx 22rpx rgba(31, 124, 255, 0.08); }
|
||||||
|
.area-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18rpx; }
|
||||||
|
.area-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||||
|
.area-name { font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.area-code { 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; }
|
||||||
|
.area-card.active .check-badge { border-color: #1f7cff; background: #1f7cff; }
|
||||||
|
.empty-wrap { height: calc(100vh - 294rpx); 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; 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 { 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>
|
||||||
@ -0,0 +1,444 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.createTitle')" />
|
||||||
|
|
||||||
|
<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('productCheck.checkInfo') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-field">
|
||||||
|
<text class="form-label">{{ t('productCheck.checkTime') }}<text class="required-star">*</text></text>
|
||||||
|
<picker mode="date" :value="checkDate" @change="handleDateChange">
|
||||||
|
<view class="select-field">
|
||||||
|
<text :class="['select-text', checkDate ? '' : 'placeholder']">{{ checkDate || t('productCheck.selectCheckTime') }}</text>
|
||||||
|
<uni-icons type="calendar" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-field">
|
||||||
|
<text class="form-label">{{ t('productCheck.sourceType') }}<text class="required-star">*</text></text>
|
||||||
|
<view class="segment-control">
|
||||||
|
<view :class="['segment-item', sourceType === 1 ? 'active' : '']" @click="switchSourceType(1)">{{ t('productCheck.sourceTypeStock') }}</view>
|
||||||
|
<view :class="['segment-item', sourceType === 2 ? 'active' : '']" @click="switchSourceType(2)">{{ t('productCheck.sourceTypeProduct') }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-field">
|
||||||
|
<text class="form-label">{{ t('productCheck.remark') }}</text>
|
||||||
|
<textarea v-model="remark" class="form-textarea" :placeholder="t('productCheck.remarkPlaceholder')" 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">{{ t('productCheck.productAndItems') }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<template v-if="sourceType === 1">
|
||||||
|
<view class="form-field">
|
||||||
|
<text class="form-label">{{ t('productCheck.warehouse') }}<text class="required-star">*</text></text>
|
||||||
|
<view :class="['select-field', selectedWarehouse ? 'selected' : '']" @click="goSelectWarehouse">
|
||||||
|
<text :class="['select-text', selectedWarehouse ? '' : 'placeholder']">{{ selectedWarehouse ? selectedWarehouse.label : t('productCheck.selectWarehouse') }}</text>
|
||||||
|
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-field" v-if="selectedWarehouse">
|
||||||
|
<text class="form-label">{{ t('productCheck.area') }}<text class="required-star">*</text></text>
|
||||||
|
<view :class="['select-field', selectedArea ? 'selected' : '']" @click="goSelectArea">
|
||||||
|
<text :class="['select-text', selectedArea ? '' : 'placeholder']">{{ selectedArea ? selectedArea.label : t('productCheck.selectArea') }}</text>
|
||||||
|
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="selectedWarehouse && selectedArea" class="select-items-card" @click="goSelectItems">
|
||||||
|
<view class="select-items-main">
|
||||||
|
<text class="select-items-title">{{ t('productCheck.checkItems') }}</text>
|
||||||
|
<text class="select-items-desc">{{ itemList.length ? t('productCheck.selectedItemCount', { count: itemList.length }) : t('productCheck.selectCheckItems') }}</text>
|
||||||
|
</view>
|
||||||
|
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<view class="add-product-btn block-btn" @click="goSelectProduct">
|
||||||
|
<uni-icons type="plusempty" size="16" color="#1f7cff"></uni-icons>
|
||||||
|
<text>{{ t('productCheck.selectProduct') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="selectedProducts.length" class="selected-products">
|
||||||
|
<view v-for="product in selectedProducts" :key="product.id" class="product-chip">
|
||||||
|
<text class="product-chip-text">{{ textValue(product.name) }}</text>
|
||||||
|
<uni-icons type="closeempty" size="16" color="#64748b" @click="removeProduct(product)"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="selectedProducts.length" class="select-items-card" @click="goSelectItems">
|
||||||
|
<view class="select-items-main">
|
||||||
|
<text class="select-items-title">{{ t('productCheck.checkItems') }}</text>
|
||||||
|
<text class="select-items-desc">{{ itemList.length ? t('productCheck.selectedItemCount', { count: itemList.length }) : t('productCheck.selectCheckItems') }}</text>
|
||||||
|
</view>
|
||||||
|
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view v-if="itemList.length" class="summary-strip">
|
||||||
|
<view class="summary-item" v-if="sourceType === 2">
|
||||||
|
<text class="summary-value">{{ selectedProducts.length }}</text>
|
||||||
|
<text class="summary-label">{{ t('productCheck.product') }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="summary-item">
|
||||||
|
<text class="summary-value">{{ itemList.length }}</text>
|
||||||
|
<text class="summary-label">{{ t('productCheck.checkItems') }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="summary-item">
|
||||||
|
<text class="summary-value">{{ totalStockCount }}</text>
|
||||||
|
<text class="summary-label">{{ t('productCheck.stockCount') }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="itemList.length" class="item-list">
|
||||||
|
<view v-for="(item, idx) in itemList" :key="itemKey(item, idx)" class="item-card">
|
||||||
|
<view class="item-info">
|
||||||
|
<view class="item-header">
|
||||||
|
<text class="item-name">{{ textValue(item.productName) }}</text>
|
||||||
|
<view class="delete-btn" @click="removeItem(idx)">
|
||||||
|
<uni-icons type="trash" size="18" color="#ef4444"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.code') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.productBarCode) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.warehouse') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.warehouseName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.area') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.areaName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.stockCount') }}</text>
|
||||||
|
<text class="info-value highlight">{{ textValue(item.stockCount) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="empty-card" @click="sourceType === 1 ? goSelectItems() : goSelectProduct()">
|
||||||
|
<uni-icons type="plusempty" size="30" color="#94a3b8"></uni-icons>
|
||||||
|
<text>{{ sourceType === 1 ? t('productCheck.selectCheckItems') : t('productCheck.emptyAddProduct') }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-btn back-btn" @click="handleCancel">{{ t('productCheck.cancel') }}</view>
|
||||||
|
<view class="action-btn submit-btn" @click="handleSubmit">{{ t('productCheck.save') }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { onShow } from '@dcloudio/uni-app'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import NavBar from '@/components/common/NavBar.vue'
|
||||||
|
import { createProductCheck } from '@/api/mes/productCheck'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const sourceType = ref(1)
|
||||||
|
const selectedWarehouse = ref(null)
|
||||||
|
const selectedArea = ref(null)
|
||||||
|
const selectedProducts = ref([])
|
||||||
|
const itemList = ref([])
|
||||||
|
const checkDate = ref(formatDate(new Date()))
|
||||||
|
const remark = ref('')
|
||||||
|
|
||||||
|
const totalStockCount = computed(() => itemList.value.reduce((sum, item) => sum + (Number(item.stockCount) || 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(v) {
|
||||||
|
if (v === 0) return '0'
|
||||||
|
if (v == null) return '-'
|
||||||
|
const s = String(v).trim()
|
||||||
|
return s || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
function itemKey(item, idx) {
|
||||||
|
return `${item.productId || item.id || idx}_${item.warehouseId || ''}_${item.areaId || ''}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDateChange(e) {
|
||||||
|
checkDate.value = e.detail.value
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchSourceType(type) {
|
||||||
|
if (sourceType.value === type) return
|
||||||
|
sourceType.value = type
|
||||||
|
selectedWarehouse.value = null
|
||||||
|
selectedArea.value = null
|
||||||
|
selectedProducts.value = []
|
||||||
|
itemList.value = []
|
||||||
|
syncGlobalState()
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncGlobalState() {
|
||||||
|
getApp().globalData._productCheckProducts = [...selectedProducts.value]
|
||||||
|
getApp().globalData._productCheckItems = [...itemList.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
function goSelectProduct() {
|
||||||
|
getApp().globalData._productCheckProductSelected = selectedProducts.value.length
|
||||||
|
? JSON.parse(JSON.stringify(selectedProducts.value))
|
||||||
|
: []
|
||||||
|
uni.navigateTo({ url: '/pages_function/pages/productCheck/productSelect' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goSelectWarehouse() {
|
||||||
|
const selectedId = selectedWarehouse.value?.value ? `?selectedId=${encodeURIComponent(String(selectedWarehouse.value.value))}` : ''
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/productCheck/warehouseSelect${selectedId}` })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goSelectArea() {
|
||||||
|
if (!selectedWarehouse.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectWarehouseFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const query = [
|
||||||
|
`warehouseId=${encodeURIComponent(String(selectedWarehouse.value.value))}`,
|
||||||
|
selectedArea.value?.value ? `selectedId=${encodeURIComponent(String(selectedArea.value.value))}` : ''
|
||||||
|
].filter(Boolean).join('&')
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/productCheck/areaSelect?${query}` })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goSelectItems() {
|
||||||
|
getApp().globalData._productCheckItemSelected = itemList.value.length
|
||||||
|
? JSON.parse(JSON.stringify(itemList.value))
|
||||||
|
: []
|
||||||
|
if (sourceType.value === 1) {
|
||||||
|
if (!selectedWarehouse.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectWarehouseFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!selectedArea.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectArea'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/productCheck/itemSelect?warehouseId=${encodeURIComponent(String(selectedWarehouse.value.value))}&areaId=${encodeURIComponent(String(selectedArea.value.value))}` })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!selectedProducts.value.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectProductFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const ids = selectedProducts.value.map((item) => item.id).join(',')
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/productCheck/itemSelectByProduct?productIds=${encodeURIComponent(ids)}` })
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeProduct(product) {
|
||||||
|
selectedProducts.value = selectedProducts.value.filter((item) => String(item.id) !== String(product.id))
|
||||||
|
const productIds = new Set(selectedProducts.value.map((item) => String(item.id)))
|
||||||
|
itemList.value = itemList.value.filter((item) => productIds.has(String(item.productId)))
|
||||||
|
syncGlobalState()
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeItem(idx) {
|
||||||
|
itemList.value.splice(idx, 1)
|
||||||
|
syncGlobalState()
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildCheckTime() {
|
||||||
|
const now = new Date()
|
||||||
|
const [y, m, d] = checkDate.value.split('-').map(Number)
|
||||||
|
const target = new Date(y, m - 1, d, now.getHours(), now.getMinutes(), now.getSeconds())
|
||||||
|
const pad = (n) => String(n).padStart(2, '0')
|
||||||
|
return `${target.getFullYear()}-${pad(target.getMonth() + 1)}-${pad(target.getDate())} ${pad(target.getHours())}:${pad(target.getMinutes())}:${pad(target.getSeconds())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeItemsForSubmit() {
|
||||||
|
return itemList.value.map((item) => ({
|
||||||
|
warehouseId: Number(item.warehouseId),
|
||||||
|
areaId: item.areaId ? Number(item.areaId) : undefined,
|
||||||
|
productId: Number(item.productId),
|
||||||
|
productPrice: item.productPrice != null ? Number(item.productPrice) : 0,
|
||||||
|
stockCount: item.stockCount != null ? Number(item.stockCount) : 0,
|
||||||
|
count: item.count != null ? Number(item.count) : 0,
|
||||||
|
remark: item.remark || ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
if (!checkDate.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectCheckTime'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (sourceType.value === 1 && !selectedWarehouse.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectWarehouseFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (sourceType.value === 1 && !selectedArea.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectArea'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (sourceType.value === 2 && !selectedProducts.value.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectProductFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!itemList.value.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectCheckItems'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const invalid = itemList.value.find((item) => !item.warehouseId || !item.productId)
|
||||||
|
if (invalid) {
|
||||||
|
uni.showToast({ title: t('productCheck.completeCheckItems'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
uni.showLoading({ title: t('productCheck.submitting'), mask: true })
|
||||||
|
await createProductCheck({
|
||||||
|
checkTime: buildCheckTime(),
|
||||||
|
sourceType: sourceType.value,
|
||||||
|
categoryType: 1,
|
||||||
|
checkStatus: 0,
|
||||||
|
remark: remark.value || '',
|
||||||
|
items: normalizeItemsForSubmit()
|
||||||
|
})
|
||||||
|
uni.hideLoading()
|
||||||
|
getApp().globalData._productCheckProducts = []
|
||||||
|
getApp().globalData._productCheckItems = []
|
||||||
|
uni.showToast({ title: t('productCheck.createSuccess'), icon: 'success' })
|
||||||
|
setTimeout(() => uni.navigateBack(), 1200)
|
||||||
|
} catch (e) {
|
||||||
|
uni.hideLoading()
|
||||||
|
const msg = e?.message || e?.data?.msg || e?.response?.data?.msg || t('productCheck.saveFailed')
|
||||||
|
uni.showToast({ title: String(msg).substring(0, 50), icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
getApp().globalData._productCheckProducts = []
|
||||||
|
getApp().globalData._productCheckItems = []
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
const warehouseResult = getApp().globalData?._productCheckWarehouseSelectResult
|
||||||
|
if (warehouseResult) {
|
||||||
|
const oldId = selectedWarehouse.value?.value
|
||||||
|
selectedWarehouse.value = { ...warehouseResult }
|
||||||
|
if (String(oldId || '') !== String(selectedWarehouse.value.value || '')) {
|
||||||
|
selectedArea.value = null
|
||||||
|
itemList.value = []
|
||||||
|
}
|
||||||
|
syncGlobalState()
|
||||||
|
getApp().globalData._productCheckWarehouseSelectResult = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const areaResult = getApp().globalData?._productCheckAreaSelectResult
|
||||||
|
if (areaResult) {
|
||||||
|
selectedArea.value = { ...areaResult }
|
||||||
|
itemList.value = []
|
||||||
|
syncGlobalState()
|
||||||
|
getApp().globalData._productCheckAreaSelectResult = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const productResult = getApp().globalData?._productCheckProductSelectResult
|
||||||
|
if (Array.isArray(productResult)) {
|
||||||
|
const oldIds = selectedProducts.value.map((item) => String(item.id)).join(',')
|
||||||
|
selectedProducts.value = [...productResult]
|
||||||
|
const newIds = selectedProducts.value.map((item) => String(item.id)).join(',')
|
||||||
|
if (oldIds !== newIds) itemList.value = []
|
||||||
|
getApp().globalData._productCheckProducts = [...selectedProducts.value]
|
||||||
|
getApp().globalData._productCheckProductSelectResult = null
|
||||||
|
} else {
|
||||||
|
const products = getApp().globalData?._productCheckProducts
|
||||||
|
if (Array.isArray(products)) selectedProducts.value = [...products]
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemResult = getApp().globalData?._productCheckItemSelectResult
|
||||||
|
if (Array.isArray(itemResult)) {
|
||||||
|
itemList.value = [...itemResult]
|
||||||
|
syncGlobalState()
|
||||||
|
getApp().globalData._productCheckItemSelectResult = null
|
||||||
|
} else {
|
||||||
|
const items = getApp().globalData?._productCheckItems
|
||||||
|
if (Array.isArray(items)) itemList.value = [...items]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</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; }
|
||||||
|
.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; min-height: 76rpx; padding: 0 24rpx; 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; }
|
||||||
|
.segment-control { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; padding: 6rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 16rpx; }
|
||||||
|
.segment-item { height: 68rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; font-size: 27rpx; color: #64748b; }
|
||||||
|
.segment-item.active { background: #1f4b79; color: #ffffff; font-weight: 600; box-shadow: 0 6rpx 16rpx rgba(31, 75, 121, 0.18); }
|
||||||
|
.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; justify-content: center; gap: 8rpx; flex-shrink: 0; }
|
||||||
|
.block-btn { height: 76rpx; border-radius: 14rpx; margin-bottom: 18rpx; }
|
||||||
|
.selected-products { display: flex; flex-wrap: wrap; gap: 12rpx; margin-bottom: 18rpx; }
|
||||||
|
.product-chip { max-width: 100%; display: flex; align-items: center; gap: 8rpx; padding: 10rpx 16rpx; border-radius: 999rpx; background: #eff6ff; color: #1f4b79; border: 1rpx solid #bfdbfe; }
|
||||||
|
.product-chip-text { max-width: 500rpx; font-size: 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.select-items-card { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 20rpx 22rpx; margin: 18rpx 0; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 16rpx; }
|
||||||
|
.select-items-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6rpx; }
|
||||||
|
.select-items-title { font-size: 28rpx; font-weight: 600; color: #1f2937; }
|
||||||
|
.select-items-desc { font-size: 24rpx; color: #64748b; }
|
||||||
|
.summary-strip { display: grid; grid-template-columns: repeat(2, 1fr); background: #f8fafc; border: 1rpx solid #e8eef6; border-radius: 16rpx; overflow: hidden; margin-bottom: 18rpx; }
|
||||||
|
.summary-strip .summary-item:first-child:nth-last-child(3), .summary-strip .summary-item:first-child:nth-last-child(3) ~ .summary-item { width: auto; }
|
||||||
|
.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: 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; }
|
||||||
|
.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-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: 600; }
|
||||||
|
.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;margin-top:20rpx }
|
||||||
|
.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>
|
||||||
@ -0,0 +1,340 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="pageTitle" />
|
||||||
|
|
||||||
|
<scroll-view scroll-y :class="['detail-scroll', { 'readonly-scroll': isReadonly }]">
|
||||||
|
<view class="content-section">
|
||||||
|
<view v-if="detail" class="section-card">
|
||||||
|
<view class="section-header">
|
||||||
|
<view class="section-icon">
|
||||||
|
<uni-icons type="info" size="24" color="#1f7cff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="section-title">{{ t('productCheck.checkInfo') }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-list">
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">{{ t('productCheck.documentNo') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(detail.no) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">{{ t('productCheck.checkTime') }}</text>
|
||||||
|
<text class="info-value">{{ formatDateTime(detail.checkTime) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">{{ t('productCheck.warehouse') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(getWarehouseNames()) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="info-label">{{ t('productCheck.creator') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(detail.creatorName || detail.creator) }}</text>
|
||||||
|
</view>
|
||||||
|
</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">{{ t('productCheck.checkItems') }}</text>
|
||||||
|
</view>
|
||||||
|
<text v-if="items.length" class="item-count">{{ t('productCheck.selectedItemCount', { count: items.length }) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="loading" class="hint">{{ t('productCheck.loading') }}</view>
|
||||||
|
<view v-else-if="items.length" class="item-list">
|
||||||
|
<view v-for="(item, idx) in items" :key="itemKey(item, idx)" class="item-card">
|
||||||
|
<view class="item-header">
|
||||||
|
<view class="item-index">{{ idx + 1 }}</view>
|
||||||
|
<view class="item-title-wrap">
|
||||||
|
<text class="item-name">{{ textValue(item.productName) }}</text>
|
||||||
|
<text class="item-code">{{ textValue(item.productBarCode) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="cell-label">{{ t('productCheck.warehouse') }}</text>
|
||||||
|
<text class="cell-value">{{ textValue(item.warehouseName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="cell-label">{{ t('productCheck.area') }}</text>
|
||||||
|
<text class="cell-value">{{ textValue(item.areaName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="cell-label">{{ t('productCheck.stockCount') }}</text>
|
||||||
|
<text class="cell-value highlight">{{ formatNumber(item.stockCount) }} {{ textValue(item.productUnitName || item.unitName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="cell-label">{{ t('productCheck.difference') }}</text>
|
||||||
|
<text :class="['cell-value', 'diff-value', diffClass(item)]">{{ getDiffText(item) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="input-block">
|
||||||
|
<text class="form-label">{{ t('productCheck.actualCount') }}<text v-if="!isReadonly" class="required-star">*</text></text>
|
||||||
|
<view v-if="isReadonly" class="readonly-field">{{ textValue(item._actualCount) }}</view>
|
||||||
|
<view v-else class="input-control">
|
||||||
|
<view class="input-btn" @click="handleMinus(idx)">-</view>
|
||||||
|
<input v-model="item._actualCount" class="input-field" type="digit" placeholder="0" />
|
||||||
|
<view class="input-btn" @click="handlePlus(idx)">+</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="input-block">
|
||||||
|
<text class="form-label">{{ t('productCheck.remark') }}</text>
|
||||||
|
<view v-if="isReadonly" class="readonly-field">{{ textValue(item._remark) }}</view>
|
||||||
|
<input v-else v-model="item._remark" class="remark-input" :placeholder="t('productCheck.remarkPlaceholder')" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="hint">{{ t('productCheck.emptyItemList') }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<view v-if="items.length && !isReadonly" class="action-bar">
|
||||||
|
<view class="action-btn back-btn" @click="handleSubmit(0)">{{ t('productCheck.saveDraft') }}</view>
|
||||||
|
<view class="action-btn submit-btn" @click="handleSubmit(1)">{{ t('productCheck.finishCheck') }}</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 { getProductCheckDetail, updateProductCheck } from '@/api/mes/productCheck'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const detail = ref(null)
|
||||||
|
const items = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const pageMode = ref('execute')
|
||||||
|
const isReadonly = computed(() => pageMode.value === 'detail')
|
||||||
|
const pageTitle = computed(() => isReadonly.value ? t('productCheck.detailTitle') : t('productCheck.executeTitle'))
|
||||||
|
|
||||||
|
function textValue(v) {
|
||||||
|
if (v === 0) return '0'
|
||||||
|
if (v == null) return '-'
|
||||||
|
const s = String(v).trim()
|
||||||
|
return s || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatNumber(v) {
|
||||||
|
if (v == null || v === '') return '0'
|
||||||
|
return String(v)
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDateTime(value) {
|
||||||
|
if (!value) return '-'
|
||||||
|
if (Array.isArray(value) && value.length >= 3) {
|
||||||
|
const [year, month, day, hour = 0, minute = 0, second = 0] = value
|
||||||
|
const pad = (n) => String(n).padStart(2, '0')
|
||||||
|
return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`
|
||||||
|
}
|
||||||
|
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())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSubmitTime(value) {
|
||||||
|
const formatted = formatDateTime(value)
|
||||||
|
if (formatted !== '-') return formatted
|
||||||
|
const now = new Date()
|
||||||
|
const pad = (n) => String(n).padStart(2, '0')
|
||||||
|
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function itemKey(item, idx) {
|
||||||
|
return `${item.id || idx}_${item.productId || ''}_${item.warehouseId || ''}_${item.areaId || ''}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWarehouseNames() {
|
||||||
|
return [...new Set(items.value.map((item) => item.warehouseName).filter(Boolean))].join('、')
|
||||||
|
}
|
||||||
|
|
||||||
|
function getActual(item) {
|
||||||
|
if (item._actualCount === '' || item._actualCount == null) return null
|
||||||
|
const value = Number(item._actualCount)
|
||||||
|
return Number.isFinite(value) ? value : null
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDiff(item) {
|
||||||
|
const actual = getActual(item)
|
||||||
|
if (actual == null) return null
|
||||||
|
return actual - (Number(item.stockCount) || 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDiffText(item) {
|
||||||
|
const diff = getDiff(item)
|
||||||
|
if (diff == null) return '-'
|
||||||
|
const unit = item.productUnitName || item.unitName || ''
|
||||||
|
return `${diff > 0 ? '+' : ''}${diff} ${unit}`.trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
function diffClass(item) {
|
||||||
|
const diff = getDiff(item)
|
||||||
|
if (diff > 0) return 'positive'
|
||||||
|
if (diff < 0) return 'negative'
|
||||||
|
return 'zero'
|
||||||
|
}
|
||||||
|
function confirmZeroActualCount(itemNames) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: t('productCheck.tip'),
|
||||||
|
content: t('productCheck.confirmActualCountZero', { items: itemNames }),
|
||||||
|
confirmColor: '#f59e0b',
|
||||||
|
success: (res) => resolve(Boolean(res.confirm)),
|
||||||
|
fail: () => resolve(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMinus(idx) {
|
||||||
|
if (isReadonly.value) return
|
||||||
|
const val = Number(items.value[idx]._actualCount) || 0
|
||||||
|
if (val > 0) items.value[idx]._actualCount = String(val - 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePlus(idx) {
|
||||||
|
if (isReadonly.value) return
|
||||||
|
const val = Number(items.value[idx]._actualCount) || 0
|
||||||
|
items.value[idx]._actualCount = String(val + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeItems(checkStatus) {
|
||||||
|
return items.value.map((item) => {
|
||||||
|
const actual = getActual(item)
|
||||||
|
const stock = item.stockCount != null ? Number(item.stockCount) : 0
|
||||||
|
return {
|
||||||
|
id: item.id ? Number(item.id) : undefined,
|
||||||
|
warehouseId: Number(item.warehouseId),
|
||||||
|
areaId: item.areaId ? Number(item.areaId) : undefined,
|
||||||
|
productId: Number(item.productId),
|
||||||
|
productPrice: item.productPrice != null ? Number(item.productPrice) : 0,
|
||||||
|
stockCount: stock,
|
||||||
|
actualCount: actual,
|
||||||
|
count: actual == null ? 0 : actual - stock,
|
||||||
|
remark: item._remark || item.remark || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadDetail(id) {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getProductCheckDetail(id)
|
||||||
|
const data = res?.data || res
|
||||||
|
detail.value = data
|
||||||
|
items.value = (Array.isArray(data?.items) ? data.items : []).map((item) => ({
|
||||||
|
...item,
|
||||||
|
_actualCount: item.actualCount != null ? String(item.actualCount) : '',
|
||||||
|
_remark: item.remark || ''
|
||||||
|
}))
|
||||||
|
} catch (e) {
|
||||||
|
const msg = e?.message || e?.data?.msg || t('productCheck.detailLoadFailed')
|
||||||
|
uni.showToast({ title: String(msg).substring(0, 50), icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(checkStatus) {
|
||||||
|
if (isReadonly.value) return
|
||||||
|
if (!detail.value?.id) return
|
||||||
|
if (checkStatus === 1) {
|
||||||
|
const invalid = items.value.find((item) => item._actualCount === '' || item._actualCount == null || Number.isNaN(Number(item._actualCount)))
|
||||||
|
if (invalid) {
|
||||||
|
uni.showToast({ title: t('productCheck.enterActualCount'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const zeroItems = items.value.filter((item) => Number(item._actualCount) === 0)
|
||||||
|
if (zeroItems.length) {
|
||||||
|
const itemNames = zeroItems.map((item) => item.productBarCode || item.productName || item.id).join('、')
|
||||||
|
const confirmed = await confirmZeroActualCount(itemNames)
|
||||||
|
if (!confirmed) return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
uni.showLoading({ title: t('productCheck.submitting'), mask: true })
|
||||||
|
await updateProductCheck({
|
||||||
|
id: Number(detail.value.id),
|
||||||
|
checkTime: formatSubmitTime(detail.value.checkTime),
|
||||||
|
sourceType: detail.value.sourceType || 2,
|
||||||
|
categoryType: detail.value.categoryType || 1,
|
||||||
|
checkStatus,
|
||||||
|
remark: detail.value.remark || '',
|
||||||
|
fileUrl: detail.value.fileUrl || '',
|
||||||
|
items: normalizeItems(checkStatus)
|
||||||
|
})
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: checkStatus === 1 ? t('productCheck.checkSuccess') : t('productCheck.saveSuccess'), icon: 'success' })
|
||||||
|
setTimeout(() => uni.navigateBack(), 1200)
|
||||||
|
} catch (e) {
|
||||||
|
uni.hideLoading()
|
||||||
|
const msg = e?.message || e?.data?.msg || e?.response?.data?.msg || t('productCheck.submitFailed')
|
||||||
|
uni.showToast({ title: String(msg).substring(0, 50), icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
pageMode.value = options?.mode === 'detail' || options?.type === 'detail' ? 'detail' : 'execute'
|
||||||
|
const id = options?.id
|
||||||
|
if (!id) {
|
||||||
|
uni.showToast({ title: t('productCheck.noDetailId'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
loadDetail(id)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container { min-height: 100vh; background: #f5f7fb; }
|
||||||
|
.detail-scroll { height: calc(100vh - 172rpx); }
|
||||||
|
.detail-scroll.readonly-scroll { height: calc(100vh - 120rpx); }
|
||||||
|
.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; }
|
||||||
|
.item-count { font-size: 24rpx; color: #1f4b79; font-weight: 600; }
|
||||||
|
.info-list { display: flex; flex-direction: column; gap: 14rpx; }
|
||||||
|
.info-row { display: flex; justify-content: space-between; gap: 20rpx; }
|
||||||
|
.info-label { width: 150rpx; font-size: 25rpx; color: #94a3b8; flex-shrink: 0; }
|
||||||
|
.info-value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; }
|
||||||
|
.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: 16rpx; margin-bottom: 18rpx; }
|
||||||
|
.item-index { width: 48rpx; height: 48rpx; border-radius: 24rpx; background: #1f4b79; color: #fff; font-size: 26rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||||
|
.item-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6rpx; }
|
||||||
|
.item-name { font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.item-code { font-size: 24rpx; color: #8a94a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; padding: 18rpx; background: #f8fafc; border: 1rpx solid #eef2f7; border-radius: 16rpx; margin-bottom: 20rpx; }
|
||||||
|
.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
||||||
|
.cell-label { font-size: 22rpx; color: #9ca3af; }
|
||||||
|
.cell-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.cell-value.highlight { color: #1f4b79; font-weight: 600; }
|
||||||
|
.diff-value.positive { color: #16a34a; font-weight: 700; }
|
||||||
|
.diff-value.negative { color: #dc2626; font-weight: 700; }
|
||||||
|
.diff-value.zero { color: #64748b; font-weight: 700; }
|
||||||
|
.input-block { display: flex; flex-direction: column; gap: 12rpx; }
|
||||||
|
.input-block + .input-block { margin-top: 18rpx; }
|
||||||
|
.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
|
||||||
|
.required-star { color: #ef4444; font-size: 28rpx; margin-left: 4rpx; }
|
||||||
|
.input-control { display: flex; align-items: center; gap: 12rpx; }
|
||||||
|
.input-btn { width: 70rpx; height: 70rpx; border-radius: 14rpx; background: #eef2f7; color: #374151; display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; }
|
||||||
|
.input-field { flex: 1; height: 70rpx; text-align: center; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; font-size: 30rpx; color: #1f2937; font-weight: 600; box-sizing: border-box; }
|
||||||
|
.remark-input { height: 76rpx; padding: 0 22rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; font-size: 28rpx; color: #374151; box-sizing: border-box; }
|
||||||
|
.readonly-field { min-height: 76rpx; padding: 18rpx 22rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; font-size: 28rpx; color: #374151; line-height: 1.45; box-sizing: border-box; }
|
||||||
|
.hint { padding: 60rpx 0; text-align: center; color: #94a3b8; font-size: 26rpx; }
|
||||||
|
.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>
|
||||||
@ -0,0 +1,595 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.moduleName')" />
|
||||||
|
|
||||||
|
<view class="filter-bar">
|
||||||
|
<view class="keyword-box">
|
||||||
|
<input
|
||||||
|
id="product-check-keyword-input"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
class="keyword-input"
|
||||||
|
type="text"
|
||||||
|
:placeholder="t('productCheck.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('productCheck.all') }}</text>
|
||||||
|
<uni-icons type="bottom" size="14" color="#9ca3af" />
|
||||||
|
</view>
|
||||||
|
<view class="reset-filter-btn" @click="resetFilters">{{ t('productCheck.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" hover-class="task-card-hover" @click="goDetail(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('productCheck.productInfo') }}</text>
|
||||||
|
<text class="value">{{ textValue(item.productNames || getProductNames(item)) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<text class="label">{{ t('productCheck.checkTime') }}</text>
|
||||||
|
<text class="value">{{ formatDateTime(item.checkTime || item.createTime) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<text class="label">{{ t('productCheck.warehouse') }}</text>
|
||||||
|
<text class="value">{{ textValue(getWarehouseNames(item)) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<text class="label">{{ t('productCheck.checkStatus') }}</text>
|
||||||
|
<text :class="['value', isChecked(item) ? 'success' : 'warning']">{{ checkStatusText(item.checkStatus) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<text class="label">{{ t('productCheck.creator') }}</text>
|
||||||
|
<text class="value">{{ textValue(item.creatorName || item.creator) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<text class="label">{{ t('productCheck.reviewer') }}</text>
|
||||||
|
<text class="value">{{ textValue(item.auditUserName) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="hasActions(item)" class="card-actions">
|
||||||
|
<view v-if="canExecute(item)" class="action-btn execute-btn" @click.stop="goExecute(item)">{{ t('productCheck.execute') }}</view>
|
||||||
|
<view v-if="canSubmitAudit(item)" class="action-btn submit-btn" @click.stop="openSubmitAudit(item)">{{ t('productCheck.submitAudit') }}</view>
|
||||||
|
<view v-if="Number(item.status) === 10" class="action-btn approve-btn" @click.stop="handleApprove(item)">{{ t('productCheck.auditPass') }}</view>
|
||||||
|
<view v-if="Number(item.status) === 10" class="action-btn reject-btn" @click.stop="handleReject(item)">{{ t('productCheck.auditReject') }}</view>
|
||||||
|
<view v-if="Number(item.status) !== 20" class="action-btn delete-btn" @click.stop="handleDelete(item)">{{ t('productCheck.delete') }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="loading && pageNo === 1" class="hint">{{ t('productCheck.loading') }}</view>
|
||||||
|
<view v-else-if="!list.length" class="hint">{{ t('productCheck.emptyList') }}</view>
|
||||||
|
<view v-else-if="loadingMore" class="hint">{{ t('productCheck.loadingMore') }}</view>
|
||||||
|
<view v-else-if="finished" class="hint">{{ t('productCheck.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('productCheck.submitAudit') }}</text>
|
||||||
|
<text class="modal-close" @click="closeAuditModal">x</text>
|
||||||
|
</view>
|
||||||
|
<view class="modal-body">
|
||||||
|
<view v-if="!isAuditDisabled" class="modal-field">
|
||||||
|
<text class="modal-label"><text class="required">*</text>{{ t('productCheck.auditor') }}</text>
|
||||||
|
<view class="modal-select-field" @click="goSelectAuditor">
|
||||||
|
<text :class="['modal-select-text', selectedAuditor ? '' : 'placeholder']">{{ selectedAuditor ? selectedAuditor.label : t('productCheck.choose') }}</text>
|
||||||
|
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-field">
|
||||||
|
<text class="modal-label">{{ t('productCheck.remark') }}</text>
|
||||||
|
<textarea v-model="auditRemark" class="modal-textarea" :placeholder="t('productCheck.remarkPlaceholder')" placeholder-class="textarea-placeholder" :maxlength="200" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-footer">
|
||||||
|
<view class="modal-btn cancel-btn" @click="closeAuditModal">{{ t('productCheck.cancel') }}</view>
|
||||||
|
<view class="modal-btn confirm-btn" @click="confirmSubmitAudit">{{ t('productCheck.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('productCheck.selectStatus') }}</text>
|
||||||
|
<view class="picker-clear" @click="resetStatus">
|
||||||
|
<text class="picker-clear-text">{{ t('productCheck.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 { auditProductCheck, deleteProductCheck, getProductCheckPage, submitProductCheck } from '@/api/mes/productCheck'
|
||||||
|
import { getConfigPage } from '@/api/infra/config'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const selectedStatus = ref('')
|
||||||
|
const searchKeyword = ref('')
|
||||||
|
const statusPickerRef = ref(null)
|
||||||
|
const statusOptions = computed(() => [
|
||||||
|
{ label: t('productCheck.all'), value: '' },
|
||||||
|
{ label: t('productCheck.statusDraft'), value: '0' },
|
||||||
|
{ label: t('productCheck.statusAuditing'), value: '10' },
|
||||||
|
{ label: t('productCheck.statusApproved'), value: '20' },
|
||||||
|
{ label: t('productCheck.statusRejected'), value: '1' }
|
||||||
|
])
|
||||||
|
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-check-keyword-input input, input#product-check-keyword-input'
|
||||||
|
let searchTimer = null
|
||||||
|
|
||||||
|
const showAuditModal = ref(false)
|
||||||
|
const currentAuditItem = ref(null)
|
||||||
|
const selectedAuditor = ref(null)
|
||||||
|
const auditRemark = ref('')
|
||||||
|
const isAuditDisabled = ref(false)
|
||||||
|
|
||||||
|
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, hour = 0, minute = 0, second = 0] = value
|
||||||
|
const pad = (n) => String(n).padStart(2, '0')
|
||||||
|
return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`
|
||||||
|
}
|
||||||
|
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())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusText(s) {
|
||||||
|
const map = {
|
||||||
|
0: t('productCheck.statusDraft'),
|
||||||
|
1: t('productCheck.statusRejected'),
|
||||||
|
10: t('productCheck.statusAuditing'),
|
||||||
|
20: t('productCheck.statusApproved')
|
||||||
|
}
|
||||||
|
return map[Number(s)] || 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 isChecked(item) {
|
||||||
|
return Number(item?.checkStatus) === 1
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkStatusText(s) {
|
||||||
|
return Number(s) === 1 ? t('productCheck.checked') : t('productCheck.unchecked')
|
||||||
|
}
|
||||||
|
|
||||||
|
function getProductNames(item) {
|
||||||
|
const items = Array.isArray(item?.items) ? item.items : []
|
||||||
|
return [...new Set(items.map((row) => row.productName).filter(Boolean))].join('、')
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWarehouseNames(item) {
|
||||||
|
const items = Array.isArray(item?.items) ? item.items : []
|
||||||
|
return [...new Set(items.map((row) => row.warehouseName).filter(Boolean))].join('、')
|
||||||
|
}
|
||||||
|
|
||||||
|
function canExecute(item) {
|
||||||
|
return Number(item?.status) !== 20 && !isChecked(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
function canSubmitAudit(item) {
|
||||||
|
const status = Number(item?.status)
|
||||||
|
return (status === 0 || status === 1) && isChecked(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasActions(item) {
|
||||||
|
return canExecute(item) || canSubmitAudit(item) || Number(item?.status) === 10 || Number(item?.status) !== 20
|
||||||
|
}
|
||||||
|
function hasIncompleteActualCount(item) {
|
||||||
|
const rows = Array.isArray(item?.items) ? item.items : []
|
||||||
|
return rows.some((row) => row.actualCount === undefined || row.actualCount === null || row.actualCount === '')
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadAuditConfig() {
|
||||||
|
try {
|
||||||
|
const res = await getConfigPage({ pageNo: 1, pageSize: 10, key: 'inventoryAudit' })
|
||||||
|
const root = res && res.data !== undefined ? res.data : res
|
||||||
|
const rows = root?.list || root?.rows || root?.records || []
|
||||||
|
const config = Array.isArray(rows) ? rows.find((item) => item?.key === 'inventoryAudit') : null
|
||||||
|
isAuditDisabled.value = config?.value === '0'
|
||||||
|
} catch (e) {
|
||||||
|
isAuditDisabled.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 keyword = searchKeyword.value.trim()
|
||||||
|
const res = await getProductCheckPage({
|
||||||
|
pageNo: pageNo.value,
|
||||||
|
pageSize: pageSize.value,
|
||||||
|
no: keyword || 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('productCheck.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)
|
||||||
|
}
|
||||||
|
|
||||||
|
function goAdd() {
|
||||||
|
uni.navigateTo({ url: '/pages_function/pages/productCheck/create' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goExecute(item) {
|
||||||
|
if (!item?.id) return
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/productCheck/execute?id=${encodeURIComponent(String(item.id))}` })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goDetail(item) {
|
||||||
|
if (!item?.id) return
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/productCheck/execute?id=${encodeURIComponent(String(item.id))}&mode=detail` })
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSubmitAudit(item) {
|
||||||
|
if (hasIncompleteActualCount(item)) {
|
||||||
|
uni.showToast({ title: t('productCheck.enterActualCount'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
currentAuditItem.value = item
|
||||||
|
selectedAuditor.value = item?.auditUserId ? { value: item.auditUserId, label: item.auditUserName || String(item.auditUserId) } : null
|
||||||
|
auditRemark.value = ''
|
||||||
|
showAuditModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAuditModal() {
|
||||||
|
showAuditModal.value = false
|
||||||
|
currentAuditItem.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
function goSelectAuditor() {
|
||||||
|
const suffix = selectedAuditor.value?.value ? `&selectedId=${encodeURIComponent(String(selectedAuditor.value.value))}` : ''
|
||||||
|
uni.navigateTo({ url: `/pages_function/pages/moldRepair/userSelect?field=auditUser&from=productCheck${suffix}` })
|
||||||
|
}
|
||||||
|
|
||||||
|
function consumeSelectedAuditor() {
|
||||||
|
const result = getApp().globalData?._productCheckUserSelectResult
|
||||||
|
if (!result?.user) return
|
||||||
|
const user = result.user
|
||||||
|
selectedAuditor.value = {
|
||||||
|
value: user.id || user.userId,
|
||||||
|
label: user.nickname || user.userName || user.name || String(user.id || '')
|
||||||
|
}
|
||||||
|
getApp().globalData._productCheckUserSelectResult = null
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmSubmitAudit() {
|
||||||
|
if (!currentAuditItem.value?.id) return
|
||||||
|
if (!isAuditDisabled.value && !selectedAuditor.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectAuditor'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
uni.showLoading({ title: t('productCheck.submitting'), mask: true })
|
||||||
|
if (isAuditDisabled.value) {
|
||||||
|
await auditProductCheck({
|
||||||
|
id: currentAuditItem.value.id,
|
||||||
|
status: 20,
|
||||||
|
remark: auditRemark.value || undefined
|
||||||
|
})
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: t('productCheck.auditPassSuccess'), icon: 'success' })
|
||||||
|
closeAuditModal()
|
||||||
|
fetchList(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await submitProductCheck({
|
||||||
|
id: currentAuditItem.value.id,
|
||||||
|
auditUserId: selectedAuditor.value.value,
|
||||||
|
remark: auditRemark.value || undefined
|
||||||
|
})
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: t('productCheck.submitAuditSuccess'), icon: 'success' })
|
||||||
|
closeAuditModal()
|
||||||
|
fetchList(true)
|
||||||
|
} catch (e) {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: t('productCheck.submitFailed'), icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleApprove(item) {
|
||||||
|
if (!item?.id) return
|
||||||
|
uni.showModal({
|
||||||
|
title: t('productCheck.tip'),
|
||||||
|
content: t('productCheck.confirmAuditPass'),
|
||||||
|
confirmColor: '#16a34a',
|
||||||
|
success: async (res) => {
|
||||||
|
if (!res.confirm) return
|
||||||
|
try {
|
||||||
|
await auditProductCheck({ id: item.id, status: 20 })
|
||||||
|
uni.showToast({ title: t('productCheck.auditPassSuccess'), icon: 'success' })
|
||||||
|
fetchList(true)
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.operationFailed'), icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleReject(item) {
|
||||||
|
if (!item?.id) return
|
||||||
|
uni.showModal({
|
||||||
|
title: t('productCheck.tip'),
|
||||||
|
content: t('productCheck.confirmAuditReject'),
|
||||||
|
confirmColor: '#dc2626',
|
||||||
|
success: async (res) => {
|
||||||
|
if (!res.confirm) return
|
||||||
|
try {
|
||||||
|
await auditProductCheck({ id: item.id, status: 1 })
|
||||||
|
uni.showToast({ title: t('productCheck.auditRejectSuccess'), icon: 'success' })
|
||||||
|
fetchList(true)
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.operationFailed'), icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(item) {
|
||||||
|
if (!item?.id) return
|
||||||
|
uni.showModal({
|
||||||
|
title: t('productCheck.tip'),
|
||||||
|
content: t('productCheck.confirmDelete'),
|
||||||
|
confirmColor: '#dc2626',
|
||||||
|
success: async (res) => {
|
||||||
|
if (!res.confirm) return
|
||||||
|
try {
|
||||||
|
await deleteProductCheck(item.id)
|
||||||
|
uni.showToast({ title: t('productCheck.deleteSuccess'), icon: 'success' })
|
||||||
|
fetchList(true)
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.operationFailed'), icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onScroll(event) {
|
||||||
|
showGoTop.value = (event?.detail?.scrollTop || 0) > 600
|
||||||
|
}
|
||||||
|
|
||||||
|
function goTop() {
|
||||||
|
scrollTop.value = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSearchTimer() {
|
||||||
|
if (searchTimer) {
|
||||||
|
clearTimeout(searchTimer)
|
||||||
|
searchTimer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onReady(() => {
|
||||||
|
focusKeywordNoKeyboard()
|
||||||
|
})
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
consumeSelectedAuditor()
|
||||||
|
loadAuditConfig()
|
||||||
|
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); }
|
||||||
|
.task-card-hover { opacity: 0.86; }
|
||||||
|
.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: 150rpx; font-size: 25rpx; color: #94a3b8; flex-shrink: 0; }
|
||||||
|
.value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; }
|
||||||
|
.value.success { color: #15803d; font-weight: 600; }
|
||||||
|
.value.warning { color: #d97706; font-weight: 600; }
|
||||||
|
.card-actions { display: flex; flex-wrap: wrap; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; }
|
||||||
|
.action-btn { flex: 1 0 180rpx; height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 10rpx; font-size: 26rpx; font-weight: 500; }
|
||||||
|
.execute-btn { background: #e0f2fe; color: #0369a1; }
|
||||||
|
.approve-btn { background: #dcfce7; color: #16a34a; }
|
||||||
|
.reject-btn,
|
||||||
|
.delete-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: flex-end; justify-content: center; }
|
||||||
|
.modal-card { width: 100%; background: #fff; border-radius: 28rpx 28rpx 0 0; box-shadow: 0 -12rpx 42rpx rgba(0, 0, 0, 0.14); padding-bottom: env(safe-area-inset-bottom); }
|
||||||
|
.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-select-field { display: flex; align-items: center; justify-content: space-between; height: 80rpx; padding: 0 24rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-sizing: border-box; }
|
||||||
|
.modal-select-text { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.placeholder { color: #bbb; }
|
||||||
|
.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; }
|
||||||
|
.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,221 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.selectItemTitle')" />
|
||||||
|
|
||||||
|
<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('productCheck.searchItemPlaceholder')"
|
||||||
|
placeholder-class="search-placeholder"
|
||||||
|
confirm-type="search"
|
||||||
|
/>
|
||||||
|
<view v-if="searchText" class="search-clear" @click="clearSearch">
|
||||||
|
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="select-all-bar">
|
||||||
|
<view class="select-all-left" @click="toggleSelectAll">
|
||||||
|
<view :class="['check-badge', isAllSelected ? 'active' : '']">
|
||||||
|
<uni-icons v-if="isAllSelected" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="select-all-text">{{ t('productCheck.selectAll') }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="select-count">{{ t('productCheck.selectedItemCount', { count: selectedItems.length }) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="item-list" v-if="filteredList.length">
|
||||||
|
<view
|
||||||
|
v-for="item in filteredList"
|
||||||
|
:key="itemKey(item)"
|
||||||
|
:class="['item-card', isSelected(item) ? 'active' : '']"
|
||||||
|
@click="toggleSelect(item)"
|
||||||
|
>
|
||||||
|
<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="['check-badge', isSelected(item) ? 'active' : '']">
|
||||||
|
<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('productCheck.warehouse') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.warehouseName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.area') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.areaName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.stockCount') }}</text>
|
||||||
|
<text class="info-value highlight">{{ textValue(item.stockCount) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.unit') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.productUnitName || item.unitName) }}</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('productCheck.loading') : t('productCheck.emptyItemList') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-btn back-btn" @click="handleCancel">{{ t('productCheck.cancel') }}</view>
|
||||||
|
<view :class="['action-btn', 'submit-btn', selectedItems.length ? '' : 'action-btn-disabled']" @click="handleConfirm">{{ t('productCheck.confirm') }}</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 { generateProductCheckItemsByLocation } from '@/api/mes/productCheck'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const routeWarehouseId = ref('')
|
||||||
|
const routeAreaId = ref('')
|
||||||
|
const itemList = ref([])
|
||||||
|
const selectedItems = ref([])
|
||||||
|
const searchText = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const filteredList = computed(() => {
|
||||||
|
const keyword = searchText.value.trim().toLowerCase()
|
||||||
|
if (!keyword) return itemList.value
|
||||||
|
return itemList.value.filter((item) =>
|
||||||
|
String(item.productName || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.productBarCode || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.warehouseName || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.areaName || '').toLowerCase().includes(keyword)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const isAllSelected = computed(() => filteredList.value.length > 0 && filteredList.value.every((item) => isSelected(item)))
|
||||||
|
|
||||||
|
function textValue(v) {
|
||||||
|
if (v === 0) return '0'
|
||||||
|
if (v == null) return '-'
|
||||||
|
const s = String(v).trim()
|
||||||
|
return s || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
function itemKey(item) {
|
||||||
|
return `${item.productId || item.id || ''}_${item.warehouseId || ''}_${item.areaId || ''}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSearch() {
|
||||||
|
searchText.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSelected(item) {
|
||||||
|
const key = itemKey(item)
|
||||||
|
return selectedItems.value.some((selected) => itemKey(selected) === key)
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelect(item) {
|
||||||
|
const key = itemKey(item)
|
||||||
|
const idx = selectedItems.value.findIndex((selected) => itemKey(selected) === key)
|
||||||
|
if (idx >= 0) selectedItems.value.splice(idx, 1)
|
||||||
|
else selectedItems.value.push({ ...item })
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelectAll() {
|
||||||
|
if (isAllSelected.value) {
|
||||||
|
const keys = new Set(filteredList.value.map(itemKey))
|
||||||
|
selectedItems.value = selectedItems.value.filter((item) => !keys.has(itemKey(item)))
|
||||||
|
} else {
|
||||||
|
const existingKeys = new Set(selectedItems.value.map(itemKey))
|
||||||
|
const additions = filteredList.value.filter((item) => !existingKeys.has(itemKey(item))).map((item) => ({ ...item }))
|
||||||
|
selectedItems.value = [...selectedItems.value, ...additions]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeList(res) {
|
||||||
|
const root = res && res.data !== undefined ? res.data : res
|
||||||
|
return Array.isArray(root) ? root : (root?.list || root?.rows || root?.records || [])
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await generateProductCheckItemsByLocation({
|
||||||
|
warehouseIds: routeWarehouseId.value ? [Number(routeWarehouseId.value)] : undefined,
|
||||||
|
areaIds: routeAreaId.value ? [Number(routeAreaId.value)] : undefined,
|
||||||
|
categoryType: 1,
|
||||||
|
allowEmpty: true
|
||||||
|
})
|
||||||
|
itemList.value = normalizeList(res)
|
||||||
|
const prevSelected = getApp().globalData?._productCheckItemSelected
|
||||||
|
selectedItems.value = Array.isArray(prevSelected) ? [...prevSelected] : []
|
||||||
|
getApp().globalData._productCheckItemSelected = null
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.loadFailed'), icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleConfirm() {
|
||||||
|
if (!selectedItems.value.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectCheckItems'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
getApp().globalData._productCheckItemSelectResult = [...selectedItems.value]
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
routeWarehouseId.value = options?.warehouseId || ''
|
||||||
|
routeAreaId.value = options?.areaId || ''
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(120rpx + 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: 76rpx; 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; }
|
||||||
|
.select-all-bar { display: flex; align-items: center; justify-content: space-between; gap: 18rpx; padding: 18rpx 24rpx; background: #ffffff; border-top: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9; }
|
||||||
|
.select-all-left { display: flex; align-items: center; gap: 12rpx; }
|
||||||
|
.select-all-text { font-size: 28rpx; color: #374151; }
|
||||||
|
.select-count { font-size: 26rpx; color: #1f4b79; font-weight: 600; }
|
||||||
|
.item-list { height: calc(100vh - 380rpx); }
|
||||||
|
.item-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); }
|
||||||
|
.item-card.active { border-color: #bfdbfe; background: #f9fbff; box-shadow: 0 8rpx 22rpx rgba(31, 124, 255, 0.08); }
|
||||||
|
.item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18rpx; }
|
||||||
|
.item-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||||
|
.item-name { 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: #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; box-sizing: border-box; }
|
||||||
|
.check-badge.active { 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; }
|
||||||
|
.info-value.highlight { color: #1f4b79; font-weight: 600; }
|
||||||
|
.empty-wrap { height: calc(100vh - 380rpx); 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; }
|
||||||
|
.action-btn-disabled { background: #94a3b8; }
|
||||||
|
</style>
|
||||||
@ -0,0 +1,227 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.selectItemTitle')" />
|
||||||
|
|
||||||
|
<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('productCheck.searchItemPlaceholder')"
|
||||||
|
placeholder-class="search-placeholder"
|
||||||
|
confirm-type="search"
|
||||||
|
/>
|
||||||
|
<view v-if="searchText" class="search-clear" @click="clearSearch">
|
||||||
|
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="select-all-bar">
|
||||||
|
<view class="select-all-left" @click="toggleSelectAll">
|
||||||
|
<view :class="['check-badge', isAllSelected ? 'active' : '']">
|
||||||
|
<uni-icons v-if="isAllSelected" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="select-all-text">{{ t('productCheck.selectAll') }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="select-count">{{ t('productCheck.selectedItemCount', { count: selectedItems.length }) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="item-list" v-if="filteredList.length">
|
||||||
|
<view
|
||||||
|
v-for="item in filteredList"
|
||||||
|
:key="itemKey(item)"
|
||||||
|
:class="['item-card', isSelected(item) ? 'active' : '']"
|
||||||
|
@click="toggleSelect(item)"
|
||||||
|
>
|
||||||
|
<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="['check-badge', isSelected(item) ? 'active' : '']">
|
||||||
|
<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('productCheck.warehouse') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.warehouseName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.area') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.areaName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.stockCount') }}</text>
|
||||||
|
<text class="info-value highlight">{{ textValue(item.stockCount) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.unit') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.productUnitName || item.unitName) }}</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('productCheck.loading') : t('productCheck.emptyItemList') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-btn back-btn" @click="handleCancel">{{ t('productCheck.cancel') }}</view>
|
||||||
|
<view :class="['action-btn', 'submit-btn', selectedItems.length ? '' : 'action-btn-disabled']" @click="handleConfirm">{{ t('productCheck.confirm') }}</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 { generateProductCheckItemsByProduct } from '@/api/mes/productCheck'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const routeProductIds = ref('')
|
||||||
|
const itemList = ref([])
|
||||||
|
const selectedItems = ref([])
|
||||||
|
const searchText = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const filteredList = computed(() => {
|
||||||
|
const keyword = searchText.value.trim().toLowerCase()
|
||||||
|
if (!keyword) return itemList.value
|
||||||
|
return itemList.value.filter((item) =>
|
||||||
|
String(item.productName || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.productBarCode || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.warehouseName || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.areaName || '').toLowerCase().includes(keyword)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const isAllSelected = computed(() => filteredList.value.length > 0 && filteredList.value.every((item) => isSelected(item)))
|
||||||
|
|
||||||
|
function textValue(v) {
|
||||||
|
if (v === 0) return '0'
|
||||||
|
if (v == null) return '-'
|
||||||
|
const s = String(v).trim()
|
||||||
|
return s || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
function itemKey(item) {
|
||||||
|
return `${item.productId || item.id || ''}_${item.warehouseId || ''}_${item.areaId || ''}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSearch() {
|
||||||
|
searchText.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSelected(item) {
|
||||||
|
const key = itemKey(item)
|
||||||
|
return selectedItems.value.some((selected) => itemKey(selected) === key)
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelect(item) {
|
||||||
|
const key = itemKey(item)
|
||||||
|
const idx = selectedItems.value.findIndex((selected) => itemKey(selected) === key)
|
||||||
|
if (idx >= 0) {
|
||||||
|
selectedItems.value.splice(idx, 1)
|
||||||
|
} else {
|
||||||
|
selectedItems.value.push({ ...item })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelectAll() {
|
||||||
|
if (isAllSelected.value) {
|
||||||
|
const keys = new Set(filteredList.value.map(itemKey))
|
||||||
|
selectedItems.value = selectedItems.value.filter((item) => !keys.has(itemKey(item)))
|
||||||
|
} else {
|
||||||
|
const existingKeys = new Set(selectedItems.value.map(itemKey))
|
||||||
|
const additions = filteredList.value.filter((item) => !existingKeys.has(itemKey(item))).map((item) => ({ ...item }))
|
||||||
|
selectedItems.value = [...selectedItems.value, ...additions]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeList(res) {
|
||||||
|
const root = res && res.data !== undefined ? res.data : res
|
||||||
|
return Array.isArray(root) ? root : (root?.list || root?.rows || root?.records || [])
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
const ids = routeProductIds.value.split(',').map((id) => Number(id.trim())).filter(Boolean)
|
||||||
|
if (!ids.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectProductFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await generateProductCheckItemsByProduct({
|
||||||
|
productIds: ids,
|
||||||
|
categoryType: 1,
|
||||||
|
allowEmpty: true
|
||||||
|
})
|
||||||
|
const data = normalizeList(res)
|
||||||
|
itemList.value = data
|
||||||
|
const prevSelected = getApp().globalData?._productCheckItemSelected
|
||||||
|
selectedItems.value = Array.isArray(prevSelected) ? [...prevSelected] : []
|
||||||
|
getApp().globalData._productCheckItemSelected = null
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.loadFailed'), icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleConfirm() {
|
||||||
|
if (!selectedItems.value.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectCheckItems'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
getApp().globalData._productCheckItemSelectResult = [...selectedItems.value]
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
routeProductIds.value = options?.productIds || options?.productId || ''
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(120rpx + 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: 76rpx; 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; }
|
||||||
|
.select-all-bar { display: flex; align-items: center; justify-content: space-between; gap: 18rpx; padding: 18rpx 24rpx; background: #ffffff; border-top: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9; }
|
||||||
|
.select-all-left { display: flex; align-items: center; gap: 12rpx; }
|
||||||
|
.select-all-text { font-size: 28rpx; color: #374151; }
|
||||||
|
.select-count { font-size: 26rpx; color: #1f4b79; font-weight: 600; }
|
||||||
|
.item-list { height: calc(100vh - 380rpx); }
|
||||||
|
.item-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); }
|
||||||
|
.item-card.active { border-color: #bfdbfe; background: #f9fbff; box-shadow: 0 8rpx 22rpx rgba(31, 124, 255, 0.08); }
|
||||||
|
.item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18rpx; }
|
||||||
|
.item-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||||
|
.item-name { 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: #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; box-sizing: border-box; }
|
||||||
|
.check-badge.active { 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; }
|
||||||
|
.info-value.highlight { color: #1f4b79; font-weight: 600; }
|
||||||
|
.empty-wrap { height: calc(100vh - 380rpx); 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; }
|
||||||
|
.action-btn-disabled { background: #94a3b8; }
|
||||||
|
</style>
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.selectProductTitle')" />
|
||||||
|
|
||||||
|
<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('productCheck.searchProductPlaceholder')"
|
||||||
|
placeholder-class="search-placeholder"
|
||||||
|
confirm-type="search"
|
||||||
|
/>
|
||||||
|
<view v-if="searchText" class="search-clear" @click="clearSearch">
|
||||||
|
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="select-all-bar">
|
||||||
|
<view class="select-all-left" @click="toggleSelectAll">
|
||||||
|
<view :class="['check-badge', isAllSelected ? 'active' : '']">
|
||||||
|
<uni-icons v-if="isAllSelected" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="select-all-text">{{ t('productCheck.selectAll') }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="select-count">{{ t('productCheck.selectedCount', { count: selectedItems.length }) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="product-list" v-if="filteredList.length">
|
||||||
|
<view
|
||||||
|
v-for="item in filteredList"
|
||||||
|
:key="item.id"
|
||||||
|
:class="['product-card', isSelected(item) ? 'active' : '']"
|
||||||
|
@click="toggleSelect(item)"
|
||||||
|
>
|
||||||
|
<view class="product-header">
|
||||||
|
<view class="product-title-wrap">
|
||||||
|
<view class="product-name-row">
|
||||||
|
<text class="product-name">{{ textValue(item.name) }}</text>
|
||||||
|
<text v-if="getCategoryName(item)" class="category-tag">{{ getCategoryName(item) }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="product-code">{{ textValue(item.barCode || item.code) }}</text>
|
||||||
|
</view>
|
||||||
|
<view :class="['check-badge', isSelected(item) ? 'active' : '']">
|
||||||
|
<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('productCheck.spec') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.standard || item.deviceSpec) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.unit') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.unitName || item.productUnitName) }}</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('productCheck.loading') : t('productCheck.emptyProduct') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-btn back-btn" @click="handleCancel">{{ t('productCheck.cancel') }}</view>
|
||||||
|
<view :class="['action-btn', 'submit-btn', selectedItems.length ? '' : 'action-btn-disabled']" @click="handleConfirm">{{ t('productCheck.confirm') }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { onShow } from '@dcloudio/uni-app'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import NavBar from '@/components/common/NavBar.vue'
|
||||||
|
import { getProductPage } from '@/api/erp/productInfo'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const productList = ref([])
|
||||||
|
const selectedItems = ref([])
|
||||||
|
const searchText = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const filteredList = computed(() => {
|
||||||
|
const keyword = searchText.value.trim().toLowerCase()
|
||||||
|
if (!keyword) return productList.value
|
||||||
|
return productList.value.filter((item) =>
|
||||||
|
String(item.name || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.barCode || item.code || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(item.standard || item.deviceSpec || '').toLowerCase().includes(keyword) ||
|
||||||
|
String(getCategoryName(item)).toLowerCase().includes(keyword)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const isAllSelected = computed(() => filteredList.value.length > 0 && filteredList.value.every((item) => isSelected(item)))
|
||||||
|
|
||||||
|
function textValue(v) {
|
||||||
|
if (v === 0) return '0'
|
||||||
|
if (v == null) return '-'
|
||||||
|
const s = String(v).trim()
|
||||||
|
return s || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCategoryName(item) {
|
||||||
|
return item?.subCategoryName || item?.categoryName || item?.category?.name || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSearch() {
|
||||||
|
searchText.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizePageList(res) {
|
||||||
|
const root = res && res.data !== undefined ? res.data : res
|
||||||
|
return Array.isArray(root) ? root : (root?.list || root?.rows || root?.records || [])
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeProduct(item) {
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.productName,
|
||||||
|
barCode: item.barCode || item.code || item.productBarCode,
|
||||||
|
unitName: item.unitName || item.productUnitName,
|
||||||
|
standard: item.standard || item.deviceSpec || item.productStandard,
|
||||||
|
categoryName: getCategoryName(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSelected(item) {
|
||||||
|
return selectedItems.value.some((selected) => String(selected.id) === String(item.id))
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelect(item) {
|
||||||
|
const idx = selectedItems.value.findIndex((selected) => String(selected.id) === String(item.id))
|
||||||
|
if (idx >= 0) {
|
||||||
|
selectedItems.value.splice(idx, 1)
|
||||||
|
} else {
|
||||||
|
selectedItems.value.push(normalizeProduct(item))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelectAll() {
|
||||||
|
if (isAllSelected.value) {
|
||||||
|
const ids = new Set(filteredList.value.map((item) => String(item.id)))
|
||||||
|
selectedItems.value = selectedItems.value.filter((item) => !ids.has(String(item.id)))
|
||||||
|
} else {
|
||||||
|
const existingIds = new Set(selectedItems.value.map((item) => String(item.id)))
|
||||||
|
const additions = filteredList.value.filter((item) => !existingIds.has(String(item.id))).map(normalizeProduct)
|
||||||
|
selectedItems.value = [...selectedItems.value, ...additions]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadProducts() {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const raw = []
|
||||||
|
for (let pageNo = 1; pageNo <= 5; pageNo += 1) {
|
||||||
|
const res = await getProductPage({ pageNo, pageSize: 100, categoryType: 1 })
|
||||||
|
const list = normalizePageList(res)
|
||||||
|
if (!list.length) break
|
||||||
|
raw.push(...list)
|
||||||
|
if (list.length < 100) break
|
||||||
|
}
|
||||||
|
productList.value = raw
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.loadFailed'), icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleConfirm() {
|
||||||
|
if (!selectedItems.value.length) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectProductFirst'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
getApp().globalData._productCheckProductSelectResult = [...selectedItems.value]
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
const prevSelected = getApp().globalData?._productCheckProductSelected
|
||||||
|
if (Array.isArray(prevSelected)) {
|
||||||
|
selectedItems.value = [...prevSelected]
|
||||||
|
getApp().globalData._productCheckProductSelected = null
|
||||||
|
}
|
||||||
|
loadProducts()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(120rpx + 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: 76rpx; 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; }
|
||||||
|
.select-all-bar { display: flex; align-items: center; justify-content: space-between; gap: 18rpx; padding: 18rpx 24rpx; background: #ffffff; border-top: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9; }
|
||||||
|
.select-all-left { display: flex; align-items: center; gap: 12rpx; }
|
||||||
|
.select-all-text { font-size: 28rpx; color: #374151; }
|
||||||
|
.select-count { font-size: 26rpx; color: #1f4b79; font-weight: 600; }
|
||||||
|
.product-list { height: calc(100vh - 380rpx); }
|
||||||
|
.product-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); }
|
||||||
|
.product-card.active { border-color: #bfdbfe; background: #f9fbff; box-shadow: 0 8rpx 22rpx rgba(31, 124, 255, 0.08); }
|
||||||
|
.product-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18rpx; }
|
||||||
|
.product-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||||
|
.product-name-row { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
|
||||||
|
.product-name { min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.category-tag { max-width: 180rpx; padding: 5rpx 14rpx; border-radius: 999rpx; background: #eff6ff; color: #1f7cff; font-size: 22rpx; line-height: 1.3; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.product-code { 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; box-sizing: border-box; }
|
||||||
|
.check-badge.active { 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 - 380rpx); 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; }
|
||||||
|
.action-btn-disabled { background: #94a3b8; }
|
||||||
|
</style>
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<NavBar :title="t('productCheck.selectWarehouseTitle')" />
|
||||||
|
|
||||||
|
<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('productCheck.searchWarehousePlaceholder')"
|
||||||
|
placeholder-class="search-placeholder"
|
||||||
|
confirm-type="search"
|
||||||
|
@confirm="loadWarehouses"
|
||||||
|
/>
|
||||||
|
<view v-if="searchText" class="search-clear" @click="clearSearch">
|
||||||
|
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="warehouse-list" v-if="warehouseList.length">
|
||||||
|
<view
|
||||||
|
v-for="item in warehouseList"
|
||||||
|
:key="item.id"
|
||||||
|
:class="['warehouse-card', isSelected(item) ? 'active' : '']"
|
||||||
|
@click="selectedId = item.id"
|
||||||
|
>
|
||||||
|
<view class="warehouse-header">
|
||||||
|
<view class="warehouse-title-wrap">
|
||||||
|
<text class="warehouse-name">{{ textValue(item.name || item.warehouseName) }}</text>
|
||||||
|
<text class="warehouse-code">{{ textValue(item.code || item.no) }}</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('productCheck.principal') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.principalName || item.ownerName || item.contactName) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-cell">
|
||||||
|
<text class="info-label">{{ t('productCheck.warehouseAddress') }}</text>
|
||||||
|
<text class="info-value">{{ textValue(item.address) }}</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('productCheck.loading') : t('productCheck.emptyWarehouse') }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-bar">
|
||||||
|
<view :class="['action-btn', selectedId ? '' : 'action-btn-disabled']" @click="handleConfirm">{{ t('productCheck.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 { getWarehousePage } from '@/api/mes/moldget'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const warehouseList = ref([])
|
||||||
|
const selectedId = ref(null)
|
||||||
|
const searchText = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
selectedId.value = options?.selectedId ? String(options.selectedId) : null
|
||||||
|
})
|
||||||
|
|
||||||
|
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 isSelected(item) {
|
||||||
|
return String(selectedId.value) === String(item.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSearch() {
|
||||||
|
searchText.value = ''
|
||||||
|
loadWarehouses()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadWarehouses() {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const keyword = searchText.value.trim()
|
||||||
|
const res = await getWarehousePage({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 50,
|
||||||
|
categoryType: 1,
|
||||||
|
name: keyword || undefined
|
||||||
|
})
|
||||||
|
warehouseList.value = normalizeList(res)
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: t('productCheck.loadFailed'), icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleConfirm() {
|
||||||
|
if (!selectedId.value) {
|
||||||
|
uni.showToast({ title: t('productCheck.selectWarehouse'), icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const warehouse = warehouseList.value.find((item) => String(item.id) === String(selectedId.value))
|
||||||
|
if (!warehouse) return
|
||||||
|
getApp().globalData._productCheckWarehouseSelectResult = {
|
||||||
|
value: warehouse.id,
|
||||||
|
label: warehouse.name || warehouse.warehouseName || String(warehouse.id),
|
||||||
|
raw: warehouse
|
||||||
|
}
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
onShow(loadWarehouses)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container { min-height: 100vh; background: #f5f7fb; padding-bottom: calc(120rpx + 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: 76rpx; 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; }
|
||||||
|
.warehouse-list { height: calc(100vh - 294rpx); }
|
||||||
|
.warehouse-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); }
|
||||||
|
.warehouse-card.active { border-color: #bfdbfe; background: #f9fbff; box-shadow: 0 8rpx 22rpx rgba(31, 124, 255, 0.08); }
|
||||||
|
.warehouse-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18rpx; }
|
||||||
|
.warehouse-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
|
||||||
|
.warehouse-name { font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.warehouse-code { 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; }
|
||||||
|
.warehouse-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 - 294rpx); 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; 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 { 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