From f2485e01843a569549bef74aa65ac44df3cfaa3b Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期二, 03 二月 2026 17:58:21 +0800
Subject: [PATCH] 库存管理-合格库存 增加条形码和二维码
---
src/views/inventoryManagement/stockManagement/Qualified.vue | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 345 insertions(+), 14 deletions(-)
diff --git a/src/views/inventoryManagement/stockManagement/Qualified.vue b/src/views/inventoryManagement/stockManagement/Qualified.vue
index 0e78990..64ae3d6 100644
--- a/src/views/inventoryManagement/stockManagement/Qualified.vue
+++ b/src/views/inventoryManagement/stockManagement/Qualified.vue
@@ -2,16 +2,22 @@
<div class="app-container">
<div class="search_form">
<div>
- <span class="search_title ml10">浜у搧澶х被锛�</span>
+ <span class="search_title ml10">浜у搧鍚嶇О锛�</span>
<el-input v-model="searchForm.productName"
style="width: 240px"
placeholder="璇疯緭鍏�"
clearable/>
+ <span class="search_title ml10">浜у搧澶х被锛�</span>
+ <el-select v-model="searchForm.parentId"
+ style="width: 240px"
+ placeholder="璇疯緭鍏�"
+ clearable>
+ <el-option v-for="item of selectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+ </el-select>
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
</div>
<div>
<el-button type="primary" @click="isShowNewModal = true">鏂板搴撳瓨</el-button>
- <el-button @click="importTemplate">涓嬭浇瀵煎叆妯℃澘</el-button>
<el-button type="info" plain icon="Upload" @click="isShowImportModal = true">
瀵煎叆搴撳瓨
</el-button>
@@ -24,16 +30,30 @@
:row-class-name="tableRowClassName" height="calc(100vh - 18.5em)">
<el-table-column align="center" type="selection" width="55" />
<el-table-column align="center" label="搴忓彿" type="index" width="60" />
- <el-table-column label="浜у搧澶х被" prop="productName" show-overflow-tooltip />
+ <el-table-column label="浜у搧鍚嶇О" prop="productName" show-overflow-tooltip />
<el-table-column label="瑙勬牸鍨嬪彿" prop="model" show-overflow-tooltip />
<el-table-column label="鍗曚綅" prop="unit" show-overflow-tooltip />
+ <el-table-column label="浜у搧鍥剧墖" prop="url" show-overflow-tooltip>
+ <template #default="scope">
+ <img :src="scope.row.url" alt="浜у搧鍥剧墖" style="width: 50px; height: 50px;">
+ </template>
+ </el-table-column>
+ <el-table-column label="楂樺害" prop="height" show-overflow-tooltip />
+ <el-table-column label="姣忎欢鏁伴噺(鏀�)" prop="boxNum" show-overflow-tooltip />
+ <el-table-column label="鍗曚环(缇庡厓/浠�)" prop="dollarPrice" show-overflow-tooltip />
+ <el-table-column label="鍗曚环(鍏�/浠�)" prop="taxInclusiveUnitPrice" show-overflow-tooltip />
<el-table-column label="搴撳瓨鏁伴噺" prop="qualitity" show-overflow-tooltip />
+ <el-table-column label="鍐荤粨鏁伴噺" prop="lockedQuantity" show-overflow-tooltip />
<el-table-column label="搴撳瓨棰勮鏁伴噺" prop="warnNum" show-overflow-tooltip />
<el-table-column label="澶囨敞" prop="remark" show-overflow-tooltip />
<el-table-column label="鏈�杩戞洿鏂版椂闂�" prop="updateTime" show-overflow-tooltip />
- <el-table-column fixed="right" label="鎿嶄綔" min-width="60" align="center">
+ <el-table-column fixed="right" label="鎿嶄綔" width="160" align="center">
<template #default="scope">
- <el-button link type="primary" size="small" @click="showSubtractModal(scope.row)" :disabled="scope.row.qualitity === 0">棰嗙敤</el-button>
+ <el-button link type="primary" size="small" @click="showSubtractModal(scope.row)" :disabled="scope.row.unLockedQuantity === 0">棰嗙敤</el-button>
+ <el-button link type="primary" size="small" v-if="scope.row.unLockedQuantity > 0" @click="showFrozenModal(scope.row)">鍐荤粨</el-button>
+ <el-button link type="primary" size="small" v-if="scope.row.lockedQuantity > 0" @click="showThawModal(scope.row)">瑙ｅ喕</el-button>
+ <el-button link type="success" size="small" @click="showQRCode(scope.row,2)">鐢熸垚鏉″舰鐮�</el-button>
+ <el-button link type="success" size="small" @click="showERCode(scope.row,2)">鐢熸垚浜岀淮鐮�</el-button>
</template>
</el-table-column>
</el-table>
@@ -48,12 +68,123 @@
<subtract-stock-inventory v-if="isShowSubtractModal"
v-model:visible="isShowSubtractModal"
:record="record"
+ type="qualified"
@completed="handleQuery" />
<!-- 瀵煎叆搴撳瓨-->
<import-stock-inventory v-if="isShowImportModal"
v-model:visible="isShowImportModal"
type="qualified"
@uploadSuccess="handleQuery" />
+ <!-- 鍐荤粨/瑙ｅ喕搴撳瓨-->
+ <frozen-and-thaw-stock-inventory v-if="isShowFrozenAndThawModal"
+ v-model:visible="isShowFrozenAndThawModal"
+ :record="record"
+ :operation-type="operationType"
+ type="qualified"
+ @completed="handleQuery" />
+
+ <el-dialog
+ v-model="qrCodeDialogVisible"
+ title="鍟嗗搧鏉″舰鐮�"
+ width="400px"
+ center
+ >
+ <div style="text-align: center;">
+ <img id="barcode" style="width:200px;height: 50px;"/>
+ <!-- <img :src="qrCodeUrl" alt="浜岀淮鐮�" style="width:200px;height:200px;" /> -->
+ <div style="margin: 20px;">
+ <el-button type="primary" @click="downloadQRCode">涓嬭浇鏉″舰鐮�</el-button>
+ </div>
+ </div>
+ </el-dialog>
+ <!-- 浜岀淮鐮佹樉绀哄璇濇 -->
+ <el-dialog
+ v-model="erCodeDialogVisible"
+ title="鍟嗗搧浜岀淮鐮�"
+ width="400px"
+ center
+ >
+ <div style="text-align: center;">
+ <img :src="erCodeUrl" alt="浜岀淮鐮�" style="width:200px;height:200px;" />
+ <div style="margin: 20px;">
+ <el-button type="primary" @click="downloadERCode">涓嬭浇浜岀淮鐮佸浘鐗�</el-button>
+ </div>
+ </div>
+ </el-dialog>
+ <el-dialog v-model="barcodeDia" title="浜у搧淇℃伅" width="40%" @close="closeBarcodeDia">
+ <div>
+ <el-row v-if="barcodeDetail.url" :gutter="30">
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">鍥剧墖</div>
+ <img class="barcode-img" :src="javaApiUrl+barcodeDetail.url"></img>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">鍚嶇О</div>
+ <div class="barcode-value">{{barcodeDetail.productCategory}}</div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">浜у搧楂樺害</div>
+ <div class="barcode-value">{{barcodeDetail.height}}</div>
+ </div>
+ </el-col>
+
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">鍗曚环(缇庡厓)/浠�</div>
+ <div class="barcode-value">{{barcodeDetail.dollarPrice}}</div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">鍗曚环(鍏�)/浠�</div>
+ <div class="barcode-value">{{barcodeDetail.taxInclusiveUnitPrice}}</div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">鏁伴噺/浠�</div>
+ <div class="barcode-value">{{barcodeDetail.qualitity}}</div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">姣忎欢鏁伴噺/鏀�</div>
+ <div class="barcode-value">{{barcodeDetail.boxNum}}</div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">瑙勬牸</div>
+ <div class="barcode-value">{{barcodeDetail.model}}</div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="barcode-item">
+ <div class="barcode-label">鍗曚綅</div>
+ <div class="barcode-value">{{barcodeDetail.unit}}</div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeBarcodeDia">鍏抽棴</el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
@@ -61,10 +192,18 @@
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
-import { getStockInventoryListPage } from "@/api/inventoryManagement/stockInventory.js";
+import {
+ getStockInventoryListPage,
+ getProductList,
+ getStockInventoryById
+} from "@/api/inventoryManagement/stockInventory.js";
+import QRCode from "qrcode";
+import JsBarcode from "jsbarcode";
+
const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue"));
const SubtractStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Subtract.vue"));
const ImportStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Import.vue"));
+const FrozenAndThawStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/FrozenAndThaw.vue"));
const { proxy } = getCurrentInstance()
const tableData = ref([])
const selectedRows = ref([])
@@ -79,14 +218,30 @@
const isShowNewModal = ref(false)
// 鏄惁鏄剧ず棰嗙敤寮规
const isShowSubtractModal = ref(false)
+// 鏄惁鏄剧ず鍐荤粨/瑙ｅ喕寮规
+const isShowFrozenAndThawModal = ref(false)
+// 鎿嶄綔绫诲瀷
+const operationType = ref('frozen')
// 鏄惁鏄剧ず瀵煎叆寮规
const isShowImportModal = ref(false)
const data = reactive({
searchForm: {
productName: '',
- }
+ },
+ selectList:[
+ {
+ id:1,
+ label:1
+ },{
+ id:2,
+ label:2
+ },{
+ id:3,
+ label:3
+ }
+ ]
})
-const { searchForm } = toRefs(data)
+const { searchForm, selectList } = toRefs(data)
// 鏌ヨ鍒楄〃
/** 鎼滅储鎸夐挳鎿嶄綔 */
@@ -129,6 +284,20 @@
isShowSubtractModal.value = true
}
+// 鐐瑰嚮鍐荤粨
+const showFrozenModal = (row) => {
+ record.value = row
+ isShowFrozenAndThawModal.value = true
+ operationType.value = 'frozen'
+}
+
+// 鐐瑰嚮瑙ｅ喕
+const showThawModal = (row) => {
+ record.value = row
+ isShowFrozenAndThawModal.value = true
+ operationType.value = 'thaw'
+}
+
// 琛ㄦ牸閫夋嫨鏁版嵁
const handleSelectionChange = (selection) => {
// 杩囨护鎺夊瓙鏁版嵁
@@ -139,7 +308,7 @@
// 琛ㄦ牸琛岀被鍚�
const tableRowClassName = ({ row }) => {
- const stock = Number(row?.inboundNum0 ?? 0);
+ const stock = Number(row?.unLockedQuantity ?? 0);
const warn = Number(row?.warnNum ?? 0);
if (!Number.isFinite(stock) || !Number.isFinite(warn)) {
return '';
@@ -162,13 +331,161 @@
proxy.$modal.msg("宸插彇娑�")
})
}
-
-const importTemplate =() =>{
- proxy.download("/stockInventory/downloadStockInventory", {}, "搴撳瓨瀵煎叆妯℃澘.xlsx");
+// 鑾峰彇浜у搧澶х被涓嬫媺
+const productCategorySelectList =async ()=>{
+ let res =await getProductList()
+ console.log(res)
+ if(res?.code === 200 && res?.data) {
+ selectList.value = res.data
+ }
}
-onMounted(() => {
- getList()
+
+// 浜岀淮鐮佺浉鍏冲彉閲�
+const qrCodeDialogVisible = ref(false);
+const qrCodeUrl = ref("");
+const showQRCode = async (row,type) => {
+ if(barcodeDia.value)return
+ try {
+ // 鏋勫缓浜岀淮鐮佸唴瀹癸紝鍙寘鍚噰璐悎鍚屽彿锛堢函鏂囨湰锛�
+ let qrContent = row.id || '';
+ // 妫�鏌ュ唴瀹规槸鍚︿负绌�
+ if (!qrContent) {
+ proxy.$modal.msgWarning("璇ヨ鍟嗗搧id锛屾棤娉曠敓鎴愭潯褰㈢爜");
+ return;
+ }
+ qrContent+=`,${type}`
+ qrCodeDialogVisible.value = true;
+ await nextTick();
+ JsBarcode("#barcode", qrContent+'', {
+ width:10,
+ height:100,
+ displayValue: false
+ });
+ } catch (error) {
+ console.error('鐢熸垚鏉″舰鐮佸け璐�:', error);
+ proxy.$modal.msgError("鐢熸垚鏉″舰鐮佸け璐ワ細" + error.message);
+ }
+};
+
+const erCodeDialogVisible = ref(false);
+const erCodeUrl = ref("");
+const showERCode = async (row,type) => {
+ if(barcodeDia.value)return
+ let qrContent = row.id || '';
+ // 妫�鏌ュ唴瀹规槸鍚︿负绌�
+ if (!qrContent) {
+ proxy.$modal.msgWarning("璇ヨ鍟嗗搧id锛屾棤娉曠敓鎴愪簩缁寸爜");
+ return;
+ }
+ qrContent+=`,${type}`
+ try {
+ erCodeUrl.value = await QRCode.toDataURL(qrContent+'', {
+ width: 200,
+ margin: 2,
+ color: {
+ dark: '#000000',
+ light: '#FFFFFF'
+ }
+ });
+ erCodeDialogVisible.value = true;
+ } catch (error) {
+ console.error('鐢熸垚浜岀淮鐮佸け璐�:', error);
+ proxy.$modal.msgError("鐢熸垚浜岀淮鐮佸け璐ワ細" + error.message);
+ }
+};
+const downloadQRCode = () => {
+ const imgSrc = document.getElementById('barcode').src
+ const a = document.createElement('a');
+ if(!imgSrc){
+ proxy.$modal.msgWarning('鏆傛棤鏉″舰鐮�')
+ return
+ }
+ a.href = imgSrc;
+ a.download = `鍟嗗搧鏉″舰鐮乢${new Date().getTime()}.png`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ proxy.$modal.msgSuccess("涓嬭浇鎴愬姛");
+};
+
+// 涓嬭浇浜岀淮鐮�
+const downloadERCode = () => {
+ if (!erCodeUrl.value) {
+ proxy.$modal.msgWarning("浜岀淮鐮佹湭鐢熸垚");
+ return;
+ }
+
+ const a = document.createElement('a');
+ a.href = erCodeUrl.value;
+ a.download = `鍟嗗搧浜岀淮鐮乢${new Date().getTime()}.png`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ proxy.$modal.msgSuccess("涓嬭浇鎴愬姛");
+};
+
+//鎵爜鐩稿叧鍙傛暟
+const barcodeDia = ref(false);
+const scanBarcodeInput = ref('');
+const barcodeDetail = ref({})
+// 鎵爜鍑芥暟
+function scanBarcode (e){
+ if(!e||!e.target||!e.target.tagName){
+ return;
+ }
+ if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+ return
+ }
+ if (e.key === 'Enter') {
+ let _value = scanBarcodeInput.value
+ getDetail(_value)
+ scanBarcodeInput.value = ""
+ } else {
+ scanBarcodeInput.value += e.key
+ }
+}
+const getDetail = (barcode)=>{
+ if(barcode.indexOf(",")==-1){
+ proxy.$modal.msgWarning("璇锋壂鎻忔纭殑鏉″舰鐮�")
+ return
+ }
+ let barcodeList = barcode.split(",")
+ let barcodeId = barcodeList[0]
+ let detailApi = getStockInventoryById
+
+ if(!detailApi){
+ proxy.$modal.msgWarning("璇锋壂鎻忔纭殑鏉″舰鐮�")
+ return
+ }
+ detailApi({id:barcodeId}).then((resp) => {
+ if(!resp.data){
+ proxy.$modal.msgError("鍟嗗搧涓嶅瓨鍦�")
+ return
+ }
+ if(resp.code!=200){
+ proxy.$modal.msgError(res.msg)
+ return
+ }
+ barcodeDetail.value = resp.data
+ barcodeDia.value = true
+ }).catch(() => {
+ proxy.$modal.msgError("鏌ョ湅璇︽儏澶辫触")
+ })
+
+}
+
+
+const closeBarcodeDia = () => {
+ barcodeDia.value = false
+}
+
+onMounted(async() => {
+ // 娣诲姞鎵爜鏋洃鍚簨浠�
+ document.removeEventListener('keypress',scanBarcode)
+ document.addEventListener('keypress', scanBarcode)
+ await productCategorySelectList()
+ await getList()
})
</script>
@@ -181,4 +498,18 @@
:deep(.row-low-stock:hover > td) {
background-color: #fcd4d4;
}
+
+.barcode-item{
+ display: flex;
+ justify-content: space-between;
+ padding: 5px 0;
+
+}
+
+.barcode-img{
+ width: 80px;
+ height: 80px;
+ border-radius: 5px;
+ background-color: #F5F5F5;
+}
</style>
--
Gitblit v1.9.3