sparkles: 条形码打印

src/views/stock/material/material-page.vue

@@ -46,7 +46,7 @@
 							编辑
 						</a-button>
 
-						<a-button type="link" :style="{ color: token.colorPrimary }">
+						<a-button type="link" :style="{ color: token.colorPrimary }" @click="showPrintModal(record.id)">
 							<template #icon>
 								<icon-font type="icon-print" />
 							</template>
@@ -74,6 +74,17 @@
 		:title="modalTitle"
 		@ok="doSave"
 	/>
+	<!-- 打印条码弹窗 -->
+	<a-modal
+		v-model:open="openPrint"
+		title="条形码打印"
+		width="100%"
+		wrap-class-name="full-modal"
+		@ok="openPrint = false"
+		@cancel="openPrint = false"
+	>
+		<printCode :material-id="materialIdRef"></printCode>
+	</a-modal>
 </template>
 
 <script setup lang="ts">
@@ -83,12 +94,15 @@
 	import { notification, theme } from 'ant-design-vue'
 	import { config, formItems } from './form'
 	import { FormDataType } from '@/components/form-render/form-render-types'
+	import printCode from './print-code.vue'
+
 	const { useToken } = theme
 	const { token } = useToken()
 	const searchKey = ref('')
-
+	const openPrint = ref(false)
 	const materialPage = ref<IPage<material.Material>>()
 	const loading = ref(false)
+	const materialIdRef = ref<number>()
 
 	// 加载数据的方法
 	const loadData = async (page = 1, size = 10) => {
@@ -110,6 +124,12 @@
 			title: '物料编码',
 			dataIndex: 'code',
 		},
+
+		{
+			title: '物料ID',
+			dataIndex: 'id',
+		},
+
 		{
 			title: '物料名称',
 			dataIndex: 'name',
@@ -167,7 +187,6 @@
 		return material.value.id ? '编辑物料' : '添加物料'
 	})
 
-
 	//新增或编辑,只是打开弹窗
 	const addOrEdit = (u?: Record<string, unknown>) => {
 		/*
@@ -184,7 +203,7 @@
   这是为了避免因访问不存在的对象属性而引发错误。
   */
 		// material.value = { ...(u ?? { channels: 3 }) }
-		material.value = { ...u}; // 如果 u 存在，则使用 u 的值；否则使用空对象 {}
+		material.value = { ...u } // 如果 u 存在，则使用 u 的值；否则使用空对象 {}
 		formDrawer.value?.show()
 	}
 
@@ -199,8 +218,7 @@
 					loadData(1)
 				},
 			})
-		});
-
+		})
 	}
 
 	//删除
@@ -215,4 +233,9 @@
 			})
 		})
 	}
+
+	const showPrintModal = (applyId: number) => {
+		openPrint.value = true
+		materialIdRef.value = applyId
+	}
 </script>