From 95fce9ecb77e9615df925eee143ce34647c694ce Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 16 四月 2026 17:20:22 +0800
Subject: [PATCH] 扫码出库和扫码入库功能开发
---
src/pages/inventoryManagement/receiptManagement/index.vue | 593 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 305 insertions(+), 288 deletions(-)
diff --git a/src/pages/inventoryManagement/receiptManagement/index.vue b/src/pages/inventoryManagement/receiptManagement/index.vue
index 257ea3e..da08367 100644
--- a/src/pages/inventoryManagement/receiptManagement/index.vue
+++ b/src/pages/inventoryManagement/receiptManagement/index.vue
@@ -1,34 +1,42 @@
<template>
<view class="stock-in-page">
- <PageHeader title="鑷畾涔夊叆搴�" @back="goBack" />
-
+ <PageHeader title="鑷畾涔夊叆搴�"
+ @back="goBack" />
<!-- 鎼滅储鍖哄煙 -->
<view class="search-section">
<view class="search-bar">
<view class="search-input">
- <up-input
- v-model="searchForm.supplierName"
- placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О"
- clearable
- />
+ <up-input v-model="searchForm.supplierName"
+ placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О"
+ clearable />
</view>
- <view class="search-button" @click="handleQuery">
- <up-icon name="search" size="24" color="#999"></up-icon>
+ <view class="search-button"
+ @click="handleQuery">
+ <up-icon name="search"
+ size="24"
+ color="#999"></up-icon>
</view>
</view>
- <view class="date-filter" @click="openDatePickerHandler">
+ <view class="date-filter"
+ @click="openDatePickerHandler">
<text class="date-text">{{ searchForm.timeStr || '閫夋嫨鏃ユ湡' }}</text>
- <up-icon name="calendar" size="18" color="#999"></up-icon>
+ <up-icon name="calendar"
+ size="18"
+ color="#999"></up-icon>
</view>
</view>
-
<!-- 鍒楄〃 -->
- <view class="stock-list" v-if="tableData.length > 0">
- <view v-for="(item, index) in tableData" :key="index" class="stock-item">
+ <view class="stock-list"
+ v-if="tableData.length > 0">
+ <view v-for="(item, index) in tableData"
+ :key="index"
+ class="stock-item">
<view class="item-header">
<view class="item-left">
<view class="batch-icon">
- <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
+ <up-icon name="file-text"
+ size="16"
+ color="#ffffff"></up-icon>
</view>
<text class="batch-text">{{ item.inboundBatches }}</text>
</view>
@@ -37,7 +45,6 @@
</view>
</view>
<up-divider></up-divider>
-
<view class="item-details">
<view class="detail-row">
<text class="detail-label">渚涘簲鍟嗗悕绉�</text>
@@ -76,331 +83,341 @@
<text class="detail-value">{{ item.createBy }}</text>
</view>
</view>
-
<view class="item-actions">
- <u-button type="primary" size="small" @click="handleEdit(item)">缂栬緫</u-button>
- <u-button type="error" size="small" plain @click="handleDeleteSingle(item)">鍒犻櫎</u-button>
+ <u-button type="primary"
+ size="small"
+ @click="handleEdit(item)">缂栬緫</u-button>
+ <u-button type="error"
+ size="small"
+ plain
+ @click="handleDeleteSingle(item)">鍒犻櫎</u-button>
</view>
</view>
</view>
-
- <view v-else class="no-data">
+ <view v-else
+ class="no-data">
<text>鏆傛棤鏁版嵁</text>
</view>
-
<!-- 娴姩鎿嶄綔鎸夐挳 -->
- <view class="fab-button" @click="handleAdd">
- <up-icon name="plus" size="24" color="#ffffff"></up-icon>
+ <view class="fab-button"
+ @click="handleAdd">
+ <up-icon name="plus"
+ size="24"
+ color="#ffffff"></up-icon>
</view>
-
<!-- 鏃ユ湡閫夋嫨鍣� -->
- <up-popup :show="showDatePicker" mode="bottom" @close="showDatePicker = false">
- <up-datetime-picker
- :show="true"
- v-model="dateValue"
- @confirm="onDateConfirm"
- @cancel="showDatePicker = false"
- mode="date"
- />
+ <up-popup :show="showDatePicker"
+ mode="bottom"
+ @close="showDatePicker = false">
+ <up-datetime-picker :show="true"
+ v-model="dateValue"
+ @confirm="onDateConfirm"
+ @cancel="showDatePicker = false"
+ mode="date" />
</up-popup>
-
<!-- 琛ㄥ崟寮圭獥 -->
- <form-dia-manual ref="formDiaManual" @close="getList" @success="getList" />
+ <form-dia-manual ref="formDiaManual"
+ @close="getList"
+ @success="getList" />
</view>
</template>
<script setup>
-import { ref, reactive, toRefs, onMounted } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
-import dayjs from 'dayjs'
-import PageHeader from '@/components/PageHeader.vue'
-import FormDiaManual from './components/formDiaManual.vue'
-import useUserStore from '@/store/modules/user'
-import { formatDateToYMD } from '@/utils/ruoyi'
-import {
- getInPageByCustom,
- delStockInCustom
-} from "@/api/inventoryManagement/stockIn.js"
+ import { ref, reactive, toRefs, onMounted } from "vue";
+ import { onShow } from "@dcloudio/uni-app";
+ import dayjs from "dayjs";
+ import PageHeader from "@/components/PageHeader.vue";
+ import FormDiaManual from "./components/formDiaManual.vue";
+ import useUserStore from "@/store/modules/user";
+ import { formatDateToYMD } from "@/utils/ruoyi";
+ import {
+ getInPageByCustom,
+ delStockInCustom,
+ } from "@/api/inventoryManagement/stockIn.js";
-const userStore = useUserStore()
+ const userStore = useUserStore();
-const tableData = ref([])
-const showDatePicker = ref(false)
-const dateValue = ref(new Date().getTime())
-const formDiaManual = ref(null)
+ const tableData = ref([]);
+ const showDatePicker = ref(false);
+ const dateValue = ref(new Date().getTime());
+ const formDiaManual = ref(null);
-const page = reactive({
- current: 1,
- size: 20,
-})
-const total = ref(0)
+ const page = reactive({
+ current: 1,
+ size: 20,
+ });
+ const total = ref(0);
-const data = reactive({
- searchForm: {
- supplierName: '',
- timeStr: '',
- },
-})
-const { searchForm } = toRefs(data)
+ const data = reactive({
+ searchForm: {
+ supplierName: "",
+ timeStr: "",
+ },
+ });
+ const { searchForm } = toRefs(data);
-// 缁熶竴鐢� dayjs 杈撳嚭 YYYY-MM-DD
-const formatYMDLocal = (ts) => dayjs(Number(ts)).format('YYYY-MM-DD')
+ // 缁熶竴鐢� dayjs 杈撳嚭 YYYY-MM-DD
+ const formatYMDLocal = ts => dayjs(Number(ts)).format("YYYY-MM-DD");
-// 杩斿洖涓婁竴椤�
-const goBack = () => {
- uni.navigateBack()
-}
+ // 杩斿洖涓婁竴椤�
+ const goBack = () => {
+ uni.navigateBack();
+ };
-// 鏌ヨ鍒楄〃
-const handleQuery = () => {
- page.current = 1
- getList()
-}
+ // 鏌ヨ鍒楄〃
+ const handleQuery = () => {
+ page.current = 1;
+ getList();
+ };
-const getList = () => {
- uni.showLoading({
- title: '鍔犺浇涓�...',
- mask: true
- })
-
- const params = {
- ...page,
- supplierName: searchForm.value.supplierName,
- timeStr: searchForm.value.timeStr
- }
-
- getInPageByCustom(params).then(res => {
- uni.hideLoading()
- tableData.value = res.data.records || []
- total.value = res.data.total || 0
- }).catch(() => {
- uni.hideLoading()
- uni.showToast({
- title: '鍔犺浇澶辫触',
- icon: 'none'
- })
- })
-}
+ const getList = () => {
+ uni.showLoading({
+ title: "鍔犺浇涓�...",
+ mask: true,
+ });
-// 鎵撳紑鏃ユ湡閫夋嫨鍣紙绠�鍗曞彲闈狅級
-const openDatePickerHandler = () => {
- // 鑻ュ凡鏈夐�変腑鏃ユ湡锛岀敤瀹冨垵濮嬪寲锛涘惁鍒欑敤浠婂ぉ
- dateValue.value = searchForm.value.timeStr
- ? dayjs(searchForm.value.timeStr, 'YYYY-MM-DD').valueOf()
- : Date.now()
- showDatePicker.value = true
-}
+ const params = {
+ ...page,
+ supplierName: searchForm.value.supplierName,
+ timeStr: searchForm.value.timeStr,
+ };
-// 鏃ユ湡閫夋嫨纭锛堜笌鍏朵粬椤典竴鑷达細鎷挎椂闂存埑 -> YYYY-MM-DD锛�
-const onDateConfirm = (e) => {
- searchForm.value.timeStr = formatDateToYMD(e.value)
- showDatePicker.value = false
- handleQuery()
-}
+ getInPageByCustom(params)
+ .then(res => {
+ uni.hideLoading();
+ tableData.value = res.data.records || [];
+ total.value = res.data.total || 0;
+ })
+ .catch(() => {
+ uni.hideLoading();
+ uni.showToast({
+ title: "鍔犺浇澶辫触",
+ icon: "none",
+ });
+ });
+ };
-// 鏂板鍏ュ簱
-const handleAdd = () => {
- formDiaManual.value?.openDialog('add')
-}
+ // 鎵撳紑鏃ユ湡閫夋嫨鍣紙绠�鍗曞彲闈狅級
+ const openDatePickerHandler = () => {
+ // 鑻ュ凡鏈夐�変腑鏃ユ湡锛岀敤瀹冨垵濮嬪寲锛涘惁鍒欑敤浠婂ぉ
+ dateValue.value = searchForm.value.timeStr
+ ? dayjs(searchForm.value.timeStr, "YYYY-MM-DD").valueOf()
+ : Date.now();
+ showDatePicker.value = true;
+ };
-// 缂栬緫
-const handleEdit = (item) => {
- formDiaManual.value?.openDialog('edit', item)
-}
+ // 鏃ユ湡閫夋嫨纭锛堜笌鍏朵粬椤典竴鑷达細鎷挎椂闂存埑 -> YYYY-MM-DD锛�
+ const onDateConfirm = e => {
+ searchForm.value.timeStr = formatDateToYMD(e.value);
+ showDatePicker.value = false;
+ handleQuery();
+ };
-// 鍒犻櫎鍗曟潯
-const handleDeleteSingle = (item) => {
- // 妫�鏌ユ槸鍚︽槸鏈汉鍒涘缓
- if (item.createBy !== userStore.nickName) {
- uni.showToast({
- title: '涓嶅彲鍒犻櫎浠栦汉缁存姢鐨勬暟鎹�',
- icon: 'none'
- })
- return
- }
-
- uni.showModal({
- title: '鍒犻櫎',
- content: '纭鍒犻櫎璇ュ叆搴撹褰曞悧锛�',
- success: (res) => {
- if (res.confirm) {
- delStockInCustom({ ids: [item.id] }).then(() => {
- uni.showToast({
- title: '鍒犻櫎鎴愬姛',
- icon: 'success'
- })
- getList()
- }).catch(() => {
- uni.showToast({
- title: '鍒犻櫎澶辫触',
- icon: 'none'
- })
- })
- }
+ // 鏂板鍏ュ簱
+ const handleAdd = () => {
+ formDiaManual.value?.openDialog("add");
+ };
+
+ // 缂栬緫
+ const handleEdit = item => {
+ formDiaManual.value?.openDialog("edit", item);
+ };
+
+ // 鍒犻櫎鍗曟潯
+ const handleDeleteSingle = item => {
+ // 妫�鏌ユ槸鍚︽槸鏈汉鍒涘缓
+ if (item.createBy !== userStore.nickName) {
+ uni.showToast({
+ title: "涓嶅彲鍒犻櫎浠栦汉缁存姢鐨勬暟鎹�",
+ icon: "none",
+ });
+ return;
}
- })
-}
-onShow(() => {
- getList()
-})
+ uni.showModal({
+ title: "鍒犻櫎",
+ content: "纭鍒犻櫎璇ュ叆搴撹褰曞悧锛�",
+ success: res => {
+ if (res.confirm) {
+ delStockInCustom({ ids: [item.id] })
+ .then(() => {
+ uni.showToast({
+ title: "鍒犻櫎鎴愬姛",
+ icon: "success",
+ });
+ getList();
+ })
+ .catch(() => {
+ uni.showToast({
+ title: "鍒犻櫎澶辫触",
+ icon: "none",
+ });
+ });
+ }
+ },
+ });
+ };
+
+ onShow(() => {
+ getList();
+ });
</script>
<style scoped lang="scss">
-.stock-in-page {
- min-height: 100vh;
- background: #f5f5f5;
- padding-bottom: 80px;
-}
+ .stock-in-page {
+ min-height: 100vh;
+ background: #f5f5f5;
+ padding-bottom: 80px;
+ }
-.search-section {
- background: #fff;
- padding: 16px;
- margin-bottom: 12px;
-}
+ .search-section {
+ background: #fff;
+ padding: 16px;
+ margin-bottom: 12px;
+ }
-.search-bar {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 12px;
-}
+ .search-bar {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 12px;
+ }
-.search-input {
- flex: 1;
-}
+ .search-input {
+ flex: 1;
+ }
-.search-button {
- width: 44px;
- height: 44px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #f5f5f5;
- border-radius: 8px;
-}
+ .search-button {
+ width: 44px;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f5f5f5;
+ border-radius: 8px;
+ }
-.date-filter {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 16px;
- background: #f5f5f5;
- border-radius: 8px;
-}
+ .date-filter {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ background: #f5f5f5;
+ border-radius: 8px;
+ }
-.date-text {
- font-size: 14px;
- color: #666;
-}
+ .date-text {
+ font-size: 14px;
+ color: #666;
+ }
-.stock-list {
- padding: 0 16px;
-}
+ .stock-list {
+ padding: 0 16px;
+ }
-.stock-item {
- background: #fff;
- border-radius: 12px;
- padding: 16px;
- margin-bottom: 12px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
+ .stock-item {
+ background: #fff;
+ border-radius: 12px;
+ padding: 16px;
+ margin-bottom: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+ }
-.item-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 12px;
-}
+ .item-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+ }
-.item-left {
- display: flex;
- align-items: center;
- gap: 8px;
-}
+ .item-left {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
-.batch-icon {
- width: 32px;
- height: 32px;
- background: #2979ff;
- border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
+ .batch-icon {
+ width: 32px;
+ height: 32px;
+ background: #2979ff;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
-.batch-text {
- font-size: 14px;
- font-weight: 500;
- color: #333;
-}
+ .batch-text {
+ font-size: 14px;
+ font-weight: 500;
+ color: #333;
+ }
-.time-text {
- font-size: 12px;
- color: #999;
-}
+ .time-text {
+ font-size: 12px;
+ color: #999;
+ }
-.item-details {
- margin: 12px 0;
-}
+ .item-details {
+ margin: 12px 0;
+ }
-.detail-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 0;
-}
+ .detail-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 0;
+ }
-.detail-label {
- font-size: 14px;
- color: #666;
-}
+ .detail-label {
+ font-size: 14px;
+ color: #666;
+ }
-.detail-value {
- font-size: 14px;
- color: #333;
- text-align: right;
- flex: 1;
- margin-left: 12px;
-}
+ .detail-value {
+ font-size: 14px;
+ color: #333;
+ text-align: right;
+ flex: 1;
+ margin-left: 12px;
+ }
-.detail-value.highlight {
- color: #2979ff;
- font-weight: 500;
-}
+ .detail-value.highlight {
+ color: #2979ff;
+ font-weight: 500;
+ }
-.detail-value.price {
- color: #ff6b00;
- font-weight: 500;
-}
+ .detail-value.price {
+ color: #ff6b00;
+ font-weight: 500;
+ }
-.item-actions {
- display: flex;
- gap: 12px;
- margin-top: 12px;
- padding-top: 12px;
- border-top: 1px solid #f5f5f5;
-}
+ .item-actions {
+ display: flex;
+ gap: 12px;
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid #f5f5f5;
+ }
-.no-data {
- text-align: center;
- padding: 60px 0;
- color: #999;
- font-size: 14px;
-}
+ .no-data {
+ text-align: center;
+ padding: 60px 0;
+ color: #999;
+ font-size: 14px;
+ }
-.fab-button {
- position: fixed;
- right: 20px;
- bottom: 80px;
- width: 56px;
- height: 56px;
- background: #2979ff;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 4px 12px rgba(41, 121, 255, 0.4);
- z-index: 999;
-}
+ .fab-button {
+ position: fixed;
+ right: 20px;
+ bottom: 80px;
+ width: 56px;
+ height: 56px;
+ background: #2979ff;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 12px rgba(41, 121, 255, 0.4);
+ z-index: 999;
+ }
</style>
--
Gitblit v1.9.3