<template>
|
<view class="add-stock-page">
|
<PageHeader title="新增库存" @back="goBack" />
|
|
<scroll-view scroll-y class="content-scroll">
|
<view class="form-section">
|
<view class="form-row">
|
<text class="form-label required">产品名称</text>
|
<view class="selector-trigger" @click="openProductSelector">
|
<text class="selector-text" :class="{ placeholder: !form.productName }">
|
{{ form.productName || "请选择产品" }}
|
</text>
|
<up-icon name="arrow-right" size="16" color="#999"></up-icon>
|
</view>
|
</view>
|
<view class="form-row">
|
<text class="form-label">规格</text>
|
<up-input v-model="form.productModelName" disabled placeholder="请选择产品后自动带出" />
|
</view>
|
<view class="form-row">
|
<text class="form-label">单位</text>
|
<up-input v-model="form.unit" disabled placeholder="请选择产品后自动带出" />
|
</view>
|
</view>
|
|
<view class="form-section">
|
<view class="section-title">入库信息</view>
|
<view class="form-row">
|
<text class="form-label required">数量</text>
|
<up-input v-model="form.qualitity" type="number" placeholder="请输入数量" />
|
</view>
|
<view class="form-row">
|
<text class="form-label required">采购员</text>
|
<up-input v-model="form.purchaser" placeholder="请输入采购员" />
|
</view>
|
</view>
|
|
<view class="form-section">
|
<view class="form-row">
|
<text class="form-label">备注</text>
|
<up-input v-model="form.remark" type="textarea" placeholder="选填" />
|
</view>
|
</view>
|
</scroll-view>
|
|
<view class="bottom-bar">
|
<view class="btn-submit" @click="handleSubmit">提交</view>
|
</view>
|
|
<up-popup :show="showProductPopup" mode="bottom" @close="showProductPopup = false">
|
<view class="product-popup">
|
<view class="popup-header">
|
<text class="popup-title">选择产品</text>
|
</view>
|
<view class="popup-search">
|
<up-input v-model="productQuery.productName" placeholder="产品大类" disabled />
|
<up-input v-model="productQuery.model" placeholder="型号名称" clearable />
|
<view class="popup-search-btn" @click="loadProductList">搜索</view>
|
</view>
|
<scroll-view scroll-y class="product-list">
|
<view
|
v-for="item in productList"
|
:key="item.id"
|
class="product-item"
|
@click="selectProduct(item)"
|
>
|
<view class="product-name-row">
|
<text class="product-name">{{ item.productName }}</text>
|
<text class="product-unit">{{ item.unit }}</text>
|
</view>
|
<view class="product-model">型号：{{ item.model }}</view>
|
</view>
|
<view v-if="!productLoading && productList.length === 0" class="no-data">暂无数据</view>
|
</scroll-view>
|
</view>
|
</up-popup>
|
|
</view>
|
</template>
|
|
<script setup>
|
import { computed, reactive, ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import { createConsumablesIn } from "@/api/consumablesLogistics/consumablesIn.js";
|
import { productModelList } from "@/api/basicData/productModel.js";
|
|
const form = reactive({
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
unit: "",
|
productType: undefined,
|
qualitity: "",
|
purchaser: "",
|
remark: "",
|
});
|
|
const type = ref("0"); // 固定合格库存
|
const isQualified = computed(() => true);
|
|
const showProductPopup = ref(false);
|
const productQuery = reactive({
|
productName: "耗材",
|
model: "",
|
});
|
const productList = ref([]);
|
const productLoading = ref(false);
|
|
onLoad((options) => {
|
type.value = "0";
|
});
|
|
const openProductSelector = () => {
|
showProductPopup.value = true;
|
if (productList.value.length === 0) {
|
loadProductList();
|
}
|
};
|
|
const loadProductList = () => {
|
productLoading.value = true;
|
productModelList({
|
productName: productQuery.productName || "",
|
model: productQuery.model || "",
|
current: 1,
|
size: 20,
|
})
|
.then((res) => {
|
const data = res?.records || res?.data?.records || [];
|
productList.value = Array.isArray(data) ? data : [];
|
})
|
.finally(() => {
|
productLoading.value = false;
|
});
|
};
|
|
const selectProduct = (item) => {
|
form.productId = item.productId || item.id;
|
form.productModelId = item.id;
|
form.productName = item.productName;
|
form.productModelName = item.model;
|
form.unit = item.unit;
|
form.productType = item.productType;
|
showProductPopup.value = false;
|
};
|
|
const handleSubmit = () => {
|
if (!form.productName || !form.productModelId) {
|
uni.showToast({ title: "请选择产品", icon: "none" });
|
return;
|
}
|
if (!form.qualitity || Number(form.qualitity) <= 0) {
|
uni.showToast({ title: "请输入数量", icon: "none" });
|
return;
|
}
|
if (!form.purchaser) {
|
uni.showToast({ title: "请输入采购员", icon: "none" });
|
return;
|
}
|
const payload = {
|
productId: form.productId,
|
productModelId: form.productModelId,
|
productName: form.productName,
|
productModelName: form.productModelName,
|
unit: form.unit,
|
productType: form.productType,
|
qualitity: Number(form.qualitity),
|
purchaser: form.purchaser,
|
remark: form.remark,
|
};
|
createConsumablesIn(payload)
|
.then(() => {
|
uni.showToast({ title: "新增成功", icon: "success" });
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 400);
|
})
|
.catch(() => {
|
uni.showToast({ title: "新增失败", icon: "none" });
|
});
|
};
|
|
const goBack = () => uni.navigateBack();
|
</script>
|
|
<style lang="scss" scoped>
|
.add-stock-page { min-height: 100vh; background: #f5f5f5; padding-bottom: 100rpx; }
|
.content-scroll { height: calc(100vh - 100rpx); }
|
.form-section { background: #fff; margin: 24rpx; padding: 24rpx; border-radius: 16rpx; }
|
.section-title { font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; }
|
.form-row { margin-bottom: 24rpx; }
|
.form-label { display: block; font-size: 26rpx; color: #666; margin-bottom: 12rpx; }
|
.form-label.required:before { content: "*"; color: #f56c6c; margin-right: 6rpx; }
|
.selector-trigger { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; background: #f5f5f5; border-radius: 12rpx; }
|
.selector-text { font-size: 28rpx; color: #333; }
|
.selector-text.placeholder { color: #999; }
|
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04); }
|
.btn-submit { height: 88rpx; border-radius: 999rpx; background: #2979ff; color: #fff; font-size: 30rpx; display: flex; align-items: center; justify-content: center; }
|
.product-popup { background: #fff; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; padding: 24rpx; }
|
.popup-header { text-align: center; margin-bottom: 20rpx; }
|
.popup-title { font-size: 30rpx; font-weight: 500; color: #333; }
|
.popup-search { display: grid; grid-template-columns: 1fr 1fr 140rpx; gap: 16rpx; align-items: center; margin-bottom: 16rpx; }
|
.popup-search-btn { height: 72rpx; border-radius: 12rpx; background: #2979ff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
|
.product-list { max-height: 60vh; }
|
.product-item { padding: 20rpx 12rpx; border-bottom: 1rpx solid #eee; }
|
.product-name-row { display: flex; justify-content: space-between; align-items: center; }
|
.product-name { font-size: 28rpx; color: #333; font-weight: 500; }
|
.product-unit { font-size: 24rpx; color: #999; }
|
.product-model { font-size: 24rpx; color: #666; margin-top: 8rpx; }
|
.no-data { text-align: center; padding: 40rpx 0; color: #999; }
|
</style>
|
