sparkles: 条形码打印

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

@@ -33,10 +33,10 @@
 				:loading="loading"
 				row-key="key"
 			>
-			<!-- 操作按钮列 -->
+				<!-- 操作按钮列 -->
 				<template #bodyCell="{ column, record }">
 					<template v-if="column.dataIndex === 'assignRule'">
-							{{ record.assignRule === 'HIGH_VALUE' ? '高价值工具类' : '低值易耗品' }}
+						{{ record.assignRule === 'HIGH_VALUE' ? '高价值工具类' : '低值易耗品' }}
 					</template>
 					<template v-if="column.dataIndex === 'operation'">
 						<a-button type="link" :style="{ color: token.colorPrimary }" @click="addOrEdit(record)">
@@ -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">
@@ -81,14 +92,17 @@
 	import api from '@/api'
 	import { IPage } from '@/api/api'
 	import { notification, theme } from 'ant-design-vue'
-	import {config, formItems} from './form'
+	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',
@@ -118,7 +138,7 @@
 			title: '物料类型',
 			dataIndex: 'type',
 		},
-        {
+		{
 			title: '物料型号',
 			dataIndex: 'spec',
 		},
@@ -126,7 +146,7 @@
 			title: '赋码规则',
 			dataIndex: 'assignRule',
 		},
-        {
+		{
 			title: '备注',
 			dataIndex: 'description',
 		},
@@ -167,24 +187,23 @@
 		return material.value.id ? '编辑物料' : '添加物料'
 	})
 
-
 	//新增或编辑,只是打开弹窗
 	const addOrEdit = (u?: Record<string, unknown>) => {
 		/*
-		1. const addOrEdit = (u?: Record<string, unknown>) => { - 这里定义了一个名为 addOrEdit 的箭头函数，
-		它接受一个可选参数 u。这个参数被定义为 Record<string, unknown> 类型，
-		这意味着它是一个对象，其键是字符串，值可以是任何类型的数据。? 表示这个参数是可选的。
-		2. material.value = { ...(u ?? { channels: 3 }) } - 这一行的作用是更新 material 变量的值。
-		这里使用了 ES6 的解构赋值和空值合并运算符（??）。如果传入的参数 u 存在且不是 null 或 undefined，
-		则将 u 的所有属性复制到一个新的对象中；如果 u 是 null 或 undefined，则使用 { channels: 3 } 作为默认值。
-		然后，这个新对象被赋值给 material.value。这里的 material 很可能是一个响应式变量，通常在 Vue.js 框架中使用，用来表示数据模型的一部分，
-		value 属性则用来访问或修改这个响应式变量的实际值。
-		3. formDrawer.value?.show() - 这一行代码尝试调用 formDrawer 对象的 show 方法来显示表单抽屉。
-		这里使用了可选链操作符（?.），这表示只有当 formDrawer 和 formDrawer.value 都存在（即不是 null 或 undefined）时，才会调用 show 方法。
-		这是为了避免因访问不存在的对象属性而引发错误。
-		*/
+  1. const addOrEdit = (u?: Record<string, unknown>) => { - 这里定义了一个名为 addOrEdit 的箭头函数，
+  它接受一个可选参数 u。这个参数被定义为 Record<string, unknown> 类型，
+  这意味着它是一个对象，其键是字符串，值可以是任何类型的数据。? 表示这个参数是可选的。
+  2. material.value = { ...(u ?? { channels: 3 }) } - 这一行的作用是更新 material 变量的值。
+  这里使用了 ES6 的解构赋值和空值合并运算符（??）。如果传入的参数 u 存在且不是 null 或 undefined，
+  则将 u 的所有属性复制到一个新的对象中；如果 u 是 null 或 undefined，则使用 { channels: 3 } 作为默认值。
+  然后，这个新对象被赋值给 material.value。这里的 material 很可能是一个响应式变量，通常在 Vue.js 框架中使用，用来表示数据模型的一部分，
+  value 属性则用来访问或修改这个响应式变量的实际值。
+  3. formDrawer.value?.show() - 这一行代码尝试调用 formDrawer 对象的 show 方法来显示表单抽屉。
+  这里使用了可选链操作符（?.），这表示只有当 formDrawer 和 formDrawer.value 都存在（即不是 null 或 undefined）时，才会调用 show 方法。
+  这是为了避免因访问不存在的对象属性而引发错误。
+  */
 		// 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>