From c49a9d727dd7620c3a9cb67c512b29bab842b1eb Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 04 十一月 2025 10:41:17 +0800
Subject: [PATCH] 仓储物流-查询条件加一个日期

---
 src/views/inventoryManagement/dispatchLog/index.vue | 1035 ++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 808 insertions(+), 227 deletions(-)

diff --git a/src/views/inventoryManagement/dispatchLog/index.vue b/src/views/inventoryManagement/dispatchLog/index.vue
index 807b56f..3eb5758 100644
--- a/src/views/inventoryManagement/dispatchLog/index.vue
+++ b/src/views/inventoryManagement/dispatchLog/index.vue
@@ -1,134 +1,259 @@
 <template>
-  <div class="app-container">
-    <div class="search_form">
-      <div>
-        <span class="search_title">渚涘簲鍟嗗悕绉帮細</span>
-        <el-input
-          v-model="searchForm.supplierName"
-          style="width: 240px"
-          placeholder="璇疯緭鍏�"
-          @change="handleQuery"
-          clearable
-          prefix-icon="Search"
-        />
-        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
-          >鎼滅储</el-button
-        >
-      </div>
-      <div>
-        <!-- <el-button type="primary" @click="openForm('add')">鏂板</el-button> -->
-        <el-button @click="handleOut">瀵煎嚭</el-button>
-        <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
-      </div>
-    </div>
-    <div class="table_list">
-      <el-table
-        :data="tableData"
-        border
-        v-loading="tableLoading"
-        @selection-change="handleSelectionChange"
-        :expand-row-keys="expandedRowKeys"
-        :row-key="(row) => row.id"
-        show-summary
-        style="width: 100%"
-        :summary-method="summarizeMainTable"
-        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="createTime"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="渚涘簲鍟嗗悕绉�"
-          prop="supplierName"
-          width="160"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="浜у搧澶х被"
-          prop="productCategory"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="瑙勬牸鍨嬪彿"
-          prop="specificationModel"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="鍗曚綅"
-          prop="unit"
-          width="80"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="鍑哄簱鏁伴噺"
-          prop="inboundNum"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="鍚◣鍗曚环(鍏�)"
-          prop="taxInclusiveUnitPrice"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="鍚◣鎬讳环(鍏�)"
-          prop="taxInclusiveTotalPrice"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="绋庣巼(%)"
-          prop="taxRate"
-          width="100"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="涓嶅惈绋庢�讳环(鍏�)"
-          prop="taxExclusiveTotalPrice"
-          width="180"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="鍑哄簱浜�"
-          prop="createBy"
-          width="80"
-          show-overflow-tooltip
-        />
-        <!-- <el-table-column
-          fixed="right"
-          label="鎿嶄綔"
-          min-width="60"
-          align="center"
-        >
-          <template #default="scope">
-            <el-button
-              link
-              type="primary"
-              size="small"
-              @click="openForm('edit', scope.row)"
-              >缂栬緫</el-button
-            >
-          </template>
-        </el-table-column> -->
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        :page="page.current"
-        :limit="page.size"
-        @pagination="paginationChange"
-      />
-    </div>
-  </div>
+	<div class="app-container">
+		<div class="search_form">
+			<div>
+				<span class="search_title">渚涘簲鍟嗗悕绉帮細</span>
+				<el-input
+					v-model="searchForm.supplierName"
+					style="width: 240px"
+					placeholder="璇疯緭鍏�"
+					@change="handleQuery"
+					clearable
+					prefix-icon="Search"
+				/>
+				<span class="search_title ml10">鍑哄簱鏃ユ湡锛�</span>
+				<el-date-picker
+					v-model="searchForm.timeStr"
+					type="date"
+					placeholder="璇烽�夋嫨鏃ユ湡"
+					value-format="YYYY-MM-DD"
+					format="YYYY-MM-DD"
+					clearable
+					@change="handleQuery"
+				/>
+				<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+				>鎼滅储</el-button
+				>
+			</div>
+			<div>
+				<!-- <el-button type="primary" @click="openForm('add')">鏂板</el-button> -->
+				<el-button @click="handleOut">瀵煎嚭</el-button>
+				<el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+				<el-button type="primary" plain @click="handlePrint">鎵撳嵃</el-button>
+			</div>
+		</div>
+		<div class="table_list">
+			<el-table
+				:data="tableData"
+				border
+				v-loading="tableLoading"
+				@selection-change="handleSelectionChange"
+				:expand-row-keys="expandedRowKeys"
+				:row-key="(row) => row.id"
+				show-summary
+				style="width: 100%"
+				:summary-method="summarizeMainTable"
+				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="createTime"
+					min-width="250"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="渚涘簲鍟嗗悕绉�"
+					prop="supplierName"
+					width="250"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="浜у搧澶х被"
+					prop="productCategory"
+					width="100"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="瑙勬牸鍨嬪彿"
+					prop="specificationModel"
+					width="100"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="鍗曚綅"
+					prop="unit"
+					width="80"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="鍑哄簱鏁伴噺"
+					prop="inboundNum"
+					width="100"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="鍚◣鍗曚环(鍏�)"
+					prop="taxInclusiveUnitPrice"
+					width="100"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="鍚◣鎬讳环(鍏�)"
+					prop="taxInclusiveTotalPrice"
+					width="100"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="绋庣巼(%)"
+					prop="taxRate"
+					width="100"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="涓嶅惈绋庢�讳环(鍏�)"
+					prop="taxExclusiveTotalPrice"
+					width="180"
+					show-overflow-tooltip
+				/>
+				<el-table-column
+					label="鍑哄簱浜�"
+					prop="createBy"
+					width="80"
+					show-overflow-tooltip
+				/>
+				<!-- <el-table-column
+					fixed="right"
+					label="鎿嶄綔"
+					min-width="60"
+					align="center"
+				>
+					<template #default="scope">
+						<el-button
+							link
+							type="primary"
+							size="small"
+							@click="openForm('edit', scope.row)"
+							>缂栬緫</el-button
+						>
+					</template>
+				</el-table-column> -->
+			</el-table>
+			<pagination
+				v-show="total > 0"
+				:total="total"
+				layout="total, sizes, prev, pager, next, jumper"
+				:page="page.current"
+				:limit="page.size"
+				@pagination="paginationChange"
+			/>
+		</div>
+		
+		<!-- 鎵撳嵃棰勮寮圭獥 -->
+		<el-dialog
+			v-model="printPreviewVisible"
+			title="鎵撳嵃棰勮"
+			width="90%"
+			:close-on-click-modal="false"
+			class="print-preview-dialog"
+		>
+			<div class="print-preview-container">
+				<div class="print-preview-header">
+					<el-button type="primary" @click="executePrint">鎵ц鎵撳嵃</el-button>
+					<el-button @click="printPreviewVisible = false">鍏抽棴棰勮</el-button>
+				</div>
+				<div class="print-preview-content">
+					<div v-if="printData.length === 0" style="text-align: center; padding: 50px; color: #999;">
+						鏆傛棤鎵撳嵃鏁版嵁
+					</div>
+					<div v-else style="text-align: center; padding: 10px; color: #666; font-size: 14px; background: #e8f4fd; margin-bottom: 10px;">
+						鍏� {{ printData.length }} 鏉℃暟鎹緟鎵撳嵃
+					</div>
+					<div v-for="(item, index) in printData" :key="index" class="print-page">
+						<div class="delivery-note">
+							<div class="header">
+								<div class="company-name">榧庤瘹鐟炲疄涓氭湁闄愯矗浠诲叕鍙�</div>
+								<div class="document-title">闆跺敭鍙戣揣鍗�</div>
+							</div>
+							
+							<div class="info-section">
+								<div class="info-row">
+									<div>
+										<span class="label">鍙戣揣鏃ユ湡锛�</span>
+										<span class="value">{{ formatDate(item.createTime) }}</span>
+									</div>
+									<div>
+										
+										<span class="label">瀹㈡埛鍚嶇О锛�</span>
+										<span class="value">{{ item.supplierName || '寮犵埍鏈�' }}</span>
+									</div>
+								</div>
+								<div class="info-row">
+									<span class="label">鍗曞彿锛�</span>
+									<span class="value">{{ item.code }}</span>
+								</div>
+							</div>
+							
+							<div class="table-section">
+								<table class="product-table">
+									<thead>
+									<tr>
+										<th>浜у搧鍚嶇О</th>
+										<th>瑙勬牸鍨嬪彿</th>
+										<th>鍗曚綅</th>
+										<th>鍗曚环</th>
+										<th>闆跺敭鏁伴噺</th>
+										<th>闆跺敭閲戦</th>
+									</tr>
+									</thead>
+									<tbody>
+									<tr>
+										<td>{{ item.productCategory || '鐮傜伆鐮�' }}</td>
+										<td>{{ item.specificationModel || '鏍囧噯' }}</td>
+										<td>{{ item.unit || '鍧�' }}</td>
+										<td>{{ item.taxInclusiveUnitPrice || '0' }}</td>
+										<td>{{ item.inboundNum || '2000' }}</td>
+										<td>{{ item.taxInclusiveTotalPrice || '0' }}</td>
+									</tr>
+									</tbody>
+									<tfoot>
+									<tr>
+										<td class="label">鍚堣</td>
+										<td class="total-value"></td>
+										<td class="total-value"></td>
+										<td class="total-value"></td>
+										<td class="total-value">{{ item.inboundNum || '2000' }}</td>
+										<td class="total-value">{{ item.taxInclusiveTotalPrice || '0' }}</td>
+									</tr>
+									</tfoot>
+								</table>
+							</div>
+							
+							<div class="footer-section">
+								<div class="footer-row">
+									<div class="footer-item">
+										<span class="label">鏀惰揣鐢佃瘽锛�</span>
+										<span class="value"></span>
+									</div>
+									<div class="footer-item">
+										<span class="label">鏀惰揣浜猴細</span>
+										<span class="value"></span>
+									</div>
+									<div class="footer-item address-item">
+										<span class="label">鏀惰揣鍦板潃锛�</span>
+										<span class="value address-value"></span>
+									</div>
+								</div>
+								<div class="footer-row">
+									<div class="footer-item">
+										<span class="label">鎿嶄綔鍛橈細</span>
+										<span class="value">{{ userStore.nickName || '鎾曞紑鍓�' }}</span>
+									</div>
+									<div class="footer-item">
+										<span class="label">鎵撳嵃鏃ユ湡锛�</span>
+										<span class="value">{{ formatDateTime(new Date()) }}</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
+	
+	
+	</div>
 </template>
 
 <script setup>
@@ -136,149 +261,605 @@
 import { ref } from "vue";
 import { ElMessageBox } from "element-plus";
 import useUserStore from "@/store/modules/user";
-import { userListNoPage } from "@/api/system/user.js";
 import {
-  getStockOutPage,
-  delStockOut,
+	getStockOutPage,
+	delStockOut,
 } from "@/api/inventoryManagement/stockOut.js";
 
 const userStore = useUserStore();
 const { proxy } = getCurrentInstance();
 const tableData = ref([]);
 const selectedRows = ref([]);
-const userList = ref([]);
 const tableLoading = ref(false);
-const productList = ref([])
 const page = reactive({
-  current: 1,
-  size: 100,
+	current: 1,
+	size: 100,
 });
 const total = ref(0);
-const fileList = ref([]);
+
+// 鎵撳嵃鐩稿叧
+const printPreviewVisible = ref(false);
+const printData = ref([]);
 
 // 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
-const operationType = ref("");
-const dialogFormVisible = ref(false);
 const data = reactive({
-  searchForm: {
-    supplierName: "",
-  },
-  form: {
-    supplierId: null,
-    supplierName: '',
-    productId: null,
-    productName: '',
-    userId: userStore.userId,
-    nickname: '',
-    model: '',
-    productModelId: null,
-    unit: '',
-    productrecordId: null,
-    taxInclusiveUnitPrice: '',
-    taxInclusiveTotalPrice: '',
-    taxRate: '',
-    taxExclusiveTotalPrice: '',
-    inboundTime: '',
-    inboundBatch: '',
-    inboundQuantity: ''
-  },
+	searchForm: {
+		supplierName: "",
+		timeStr: "",
+	},
+	form: {
+		supplierId: null,
+		supplierName: '',
+		productId: null,
+		productName: '',
+		userId: userStore.userId,
+		nickName: '',
+		model: '',
+		productModelId: null,
+		unit: '',
+		productrecordId: null,
+		taxInclusiveUnitPrice: '',
+		taxInclusiveTotalPrice: '',
+		taxRate: '',
+		taxExclusiveTotalPrice: '',
+		inboundTime: '',
+		inboundBatch: '',
+		inboundQuantity: ''
+	},
 });
 const { searchForm } = toRefs(data);
 
 // 鏌ヨ鍒楄〃
 /** 鎼滅储鎸夐挳鎿嶄綔 */
 const handleQuery = () => {
-  page.current = 1;
-  getList();
+	page.current = 1;
+	getList();
 };
 const paginationChange = (obj) => {
-  page.current = obj.page;
-  page.size = obj.limit;
-  getList();
+	page.current = obj.page;
+	page.size = obj.limit;
+	getList();
 };
 const getList = () => {
-  tableLoading.value = true;
-  getStockOutPage({ ...searchForm.value, ...page })
-    .then((res) => {
-      tableLoading.value = false;
-      tableData.value = res.data.records;
-      tableData.value.map((item) => {
-        item.children = [];
-      });
-      total.value = res.total;
-    })
-    .catch(() => {
-      tableLoading.value = false;
-    });
+	tableLoading.value = true;
+	getStockOutPage({ ...searchForm.value, ...page })
+		.then((res) => {
+			tableLoading.value = false;
+			tableData.value = res.data.records;
+			tableData.value.map((item) => {
+				item.children = [];
+			});
+			total.value = res.data.total;
+		})
+		.catch(() => {
+			tableLoading.value = false;
+		});
 };
 
 // 琛ㄦ牸閫夋嫨鏁版嵁
 const handleSelectionChange = (selection) => {
-  // 杩囨护鎺夊瓙鏁版嵁
-  selectedRows.value = selection.filter((item) => item.id);
-  console.log("selection", selectedRows.value);
+	// 杩囨护鎺夊瓙鏁版嵁
+	selectedRows.value = selection.filter((item) => item.id);
+	console.log("selection", selectedRows.value);
 };
 const expandedRowKeys = ref([]);
 
 // 涓昏〃鍚堣鏂规硶
 const summarizeMainTable = (param) => {
-  return proxy.summarizeTable(param, [
-    "contractAmount",
-    "taxInclusiveTotalPrice",
-    "taxExclusiveTotalPrice",
-  ]);
+	return proxy.summarizeTable(param, [
+		"contractAmount",
+		"taxInclusiveTotalPrice",
+		"taxExclusiveTotalPrice",
+	]);
 };
 
 // 瀵煎嚭
 const handleOut = () => {
-  ElMessageBox.confirm("鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
-    confirmButtonText: "纭",
-    cancelButtonText: "鍙栨秷",
-    type: "warning",
-  })
-    .then(() => {
-      proxy.download("/stockmanagement/export", {}, "鍑哄簱鍙拌处.xlsx");
-    })
-    .catch(() => {
-      proxy.$modal.msg("宸插彇娑�");
-    });
+	ElMessageBox.confirm("鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+		confirmButtonText: "纭",
+		cancelButtonText: "鍙栨秷",
+		type: "warning",
+	})
+		.then(() => {
+			proxy.download("/stockmanagement/export", {}, "鍑哄簱鍙拌处.xlsx");
+		})
+		.catch(() => {
+			proxy.$modal.msg("宸插彇娑�");
+		});
 };
 
 // 鍒犻櫎
 const handleDelete = () => {
-  let ids = [];
-  if (selectedRows.value.length > 0) {
-    ids = selectedRows.value.map((item) => item.id);
-  } else {
-    proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
-    return;
-  }
-  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
-    confirmButtonText: "纭",
-    cancelButtonText: "鍙栨秷",
-    type: "warning",
-  })
-    .then(() => {
-      delStockOut({ids:ids}).then((res) => {
-        proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-        getList();
-      });
-    })
-    .catch(() => {
-      proxy.$modal.msg("宸插彇娑�");
-    });
+	let ids = [];
+	if (selectedRows.value.length > 0) {
+		ids = selectedRows.value.map((item) => item.id);
+	} else {
+		proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+		return;
+	}
+	ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
+		confirmButtonText: "纭",
+		cancelButtonText: "鍙栨秷",
+		type: "warning",
+	})
+		.then(() => {
+			delStockOut({ids:ids}).then((res) => {
+				proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+				getList();
+			});
+		})
+		.catch(() => {
+			proxy.$modal.msg("宸插彇娑�");
+		});
+};
+
+// 鎵撳嵃鍔熻兘
+const handlePrint = () => {
+	if (selectedRows.value.length === 0) {
+		proxy.$modal.msgWarning("璇烽�夋嫨瑕佹墦鍗扮殑鏁版嵁");
+		return;
+	}
+	printData.value = [...selectedRows.value];
+	console.log('鎵撳嵃鏁版嵁:', printData.value);
+	printPreviewVisible.value = true;
+};
+
+// 鎵ц鎵撳嵃
+const executePrint = () => {
+	console.log('寮�濮嬫墽琛屾墦鍗帮紝鏁版嵁鏉℃暟:', printData.value.length);
+	console.log('鎵撳嵃鏁版嵁:', printData.value);
+	
+	// 鍒涘缓涓�涓柊鐨勬墦鍗扮獥鍙�
+	const printWindow = window.open('', '_blank', 'width=800,height=600');
+	
+	// 鏋勫缓鎵撳嵃鍐呭
+	let printContent = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="UTF-8">
+      <title>鎵撳嵃棰勮</title>
+      <style>
+        body {
+          margin: 0;
+          padding: 0;
+          font-family: "SimSun", serif;
+          background: white;
+        }
+                                                     .print-page {
+            width: 200mm;
+            height: 75mm;
+            padding: 10mm;
+            padding-left: 20mm;
+            background: white;
+            box-sizing: border-box;
+            page-break-after: always;
+            page-break-inside: avoid;
+          }
+         .print-page:last-child {
+           page-break-after: avoid;
+         }
+        .delivery-note {
+          width: 100%;
+          height: 100%;
+          font-size: 12px;
+          line-height: 1.2;
+          display: flex;
+          flex-direction: column;
+          color: #000;
+        }
+        .header {
+          text-align: center;
+          margin-bottom: 8px;
+        }
+        .company-name {
+          font-size: 18px;
+          font-weight: bold;
+          margin-bottom: 4px;
+        }
+        .document-title {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        .info-section {
+          margin-bottom: 8px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .info-row {
+          line-height: 20px;
+        }
+        .label {
+          font-weight: bold;
+          width: 60px;
+          font-size: 12px;
+        }
+        .value {
+          margin-right: 20px;
+          min-width: 80px;
+          font-size: 12px;
+        }
+                 .table-section {
+                 margin-bottom: 40px;
+          //  flex: 0.6;
+         }
+        .product-table {
+          width: 100%;
+          border-collapse: collapse;
+          border: 1px solid #000;
+        }
+                 .product-table th, .product-table td {
+           border: 1px solid #000;
+           padding: 6px;
+           text-align: center;
+           font-size: 12px;
+           line-height: 1.4;
+         }
+        .product-table th {
+          font-weight: bold;
+        }
+        .total-value {
+          font-weight: bold;
+        }
+        .footer-section {
+          margin-top: auto;
+        }
+        .footer-row {
+          display: flex;
+          margin-bottom: 3px;
+          line-height: 22px;
+          justify-content: space-between;
+        }
+        .footer-item {
+          display: flex;
+          margin-right: 20px;
+        }
+        .footer-item .label {
+          font-weight: bold;
+          width: 80px;
+          font-size: 12px;
+        }
+        .footer-item .value {
+          min-width: 80px;
+          font-size: 12px;
+        }
+        .address-item .address-value {
+          min-width: 200px;
+        }
+        @media print {
+          body {
+            margin: 0;
+            padding: 0;
+          }
+                     .print-page {
+             margin: 0;
+             padding: 10mm;
+             /* padding-left: 20mm; */
+             page-break-inside: avoid;
+             page-break-after: always;
+           }
+           .print-page:last-child {
+             page-break-after: avoid;
+           }
+        }
+      </style>
+    </head>
+    <body>
+  `;
+	
+	// 涓烘瘡鏉℃暟鎹敓鎴愭墦鍗伴〉闈�
+	printData.value.forEach((item, index) => {
+		printContent += `
+      <div class="print-page">
+        <div class="delivery-note">
+          <div class="header">
+            <div class="company-name">榧庤瘹鐟炲疄涓氭湁闄愯矗浠诲叕鍙�</div>
+            <div class="document-title">闆跺敭鍙戣揣鍗�</div>
+          </div>
+          
+          <div class="info-section">
+            <div class="info-row">
+              <div>
+                <span class="label">鍙戣揣鏃ユ湡锛�</span>
+                <span class="value">${formatDate(item.createTime)}</span>
+              </div>
+              <div>
+                <span class="label">瀹㈡埛鍚嶇О锛�</span>
+                <span class="value">${item.supplierName || '寮犵埍鏈�'}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <span class="label">鍗曞彿锛�</span>
+              <span class="value">${item.code || ''}</span>
+            </div>
+          </div>
+
+          <div class="table-section">
+            <table class="product-table">
+              <thead>
+                <tr>
+                  <th>浜у搧鍚嶇О</th>
+                  <th>瑙勬牸鍨嬪彿</th>
+                  <th>鍗曚綅</th>
+                  <th>鍗曚环</th>
+                  <th>闆跺敭鏁伴噺</th>
+                  <th>闆跺敭閲戦</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>${item.productCategory || '鐮傜伆鐮�'}</td>
+                  <td>${item.specificationModel || '鏍囧噯'}</td>
+                  <td>${item.unit || '鍧�'}</td>
+                  <td>${item.taxInclusiveUnitPrice || '0'}</td>
+                  <td>${item.inboundNum || '2000'}</td>
+                  <td>${item.taxInclusiveTotalPrice || '0'}</td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td class="label">鍚堣</td>
+                  <td class="total-value"></td>
+                  <td class="total-value"></td>
+                  <td class="total-value"></td>
+                  <td class="total-value">${item.inboundNum || '2000'}</td>
+                  <td class="total-value">${item.taxInclusiveTotalPrice || '0'}</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+
+          <div class="footer-section">
+            <div class="footer-row">
+              <div class="footer-item">
+                <span class="label">鏀惰揣鐢佃瘽锛�</span>
+                <span class="value"></span>
+              </div>
+              <div class="footer-item">
+                <span class="label">鏀惰揣浜猴細</span>
+                <span class="value"></span>
+              </div>
+              <div class="footer-item address-item">
+                <span class="label">鏀惰揣鍦板潃锛�</span>
+                <span class="value address-value"></span>
+              </div>
+            </div>
+            <div class="footer-row">
+              <div class="footer-item">
+                <span class="label">鎿嶄綔鍛橈細</span>
+                <span class="value">${userStore.nickName || '鎾曞紑鍓�'}</span>
+              </div>
+              <div class="footer-item">
+                <span class="label">鎵撳嵃鏃ユ湡锛�</span>
+                <span class="value">${formatDateTime(new Date())}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	});
+	
+	printContent += `
+    </body>
+    </html>
+  `;
+	
+	// 鍐欏叆鍐呭鍒版柊绐楀彛
+	printWindow.document.write(printContent);
+	printWindow.document.close();
+	
+	// 绛夊緟鍐呭鍔犺浇瀹屾垚鍚庢墦鍗�
+	printWindow.onload = () => {
+		setTimeout(() => {
+			printWindow.print();
+			printWindow.close();
+			printPreviewVisible.value = false;
+		}, 500);
+	};
+};
+
+
+
+// 鏍煎紡鍖栨棩鏈�
+const formatDate = (dateString) => {
+	if (!dateString) return getCurrentDate();
+	const date = new Date(dateString);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+	return `${year}/${month}/${day}`;
+};
+
+// 鏍煎紡鍖栨棩鏈熸椂闂�
+const formatDateTime = (date) => {
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+	const hours = String(date.getHours()).padStart(2, "0");
+	const minutes = String(date.getMinutes()).padStart(2, "0");
+	const seconds = String(date.getSeconds()).padStart(2, "0");
+	return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
 };
 // 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� YYYY-MM-DD
 function getCurrentDate() {
-  const today = new Date();
-  const year = today.getFullYear();
-  const month = String(today.getMonth() + 1).padStart(2, "0"); // 鏈堜唤浠�0寮�濮�
-  const day = String(today.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+	const today = new Date();
+	const year = today.getFullYear();
+	const month = String(today.getMonth() + 1).padStart(2, "0"); // 鏈堜唤浠�0寮�濮�
+	const day = String(today.getDate()).padStart(2, "0");
+	return `${year}-${month}-${day}`;
 }
 onMounted(() => {
-  getList();
+	getList();
 });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.print-preview-dialog {
+	.el-dialog__body {
+		padding: 0;
+		max-height: 80vh;
+		overflow-y: auto;
+	}
+}
+
+.print-preview-container {
+	.print-preview-header {
+		padding: 15px;
+		border-bottom: 1px solid #e4e7ed;
+		text-align: center;
+		
+		.el-button {
+			margin: 0 10px;
+		}
+	}
+	
+	.print-preview-content {
+		padding: 20px;
+		background-color: #f5f5f5;
+		min-height: 400px;
+	}
+}
+
+.print-page {
+	width: 220mm;
+	height: 90mm;
+	padding: 10mm;
+	margin: 0 auto;
+	background: white;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	margin-bottom: 10px;
+	box-sizing: border-box;
+}
+
+.delivery-note {
+	width: 100%;
+	height: 100%;
+	font-family: "SimSun", serif;
+	font-size: 10px;
+	line-height: 1.2;
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	text-align: center;
+	margin-bottom: 8px;
+	
+	.company-name {
+		font-size: 18px;
+		font-weight: bold;
+		margin-bottom: 4px;
+	}
+	
+	.document-title {
+		font-size: 16px;
+		font-weight: bold;
+	}
+}
+
+.info-section {
+	margin-bottom: 8px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	
+	.info-row {
+		line-height: 20px;
+		
+		.label {
+			font-weight: bold;
+			width: 60px;
+			font-size: 14px;
+		}
+		
+		.value {
+			margin-right: 20px;
+			min-width: 80px;
+			font-size: 14px;
+		}
+	}
+}
+
+.table-section {
+	margin-bottom: 4px;
+	flex: 1;
+	
+	.product-table {
+		width: 100%;
+		border-collapse: collapse;
+		border: 1px solid #000;
+		
+		th, td {
+			border: 1px solid #000;
+			padding: 6px;
+			text-align: center;
+			font-size: 14px;
+			line-height: 1.4;
+		}
+		
+		th {
+			font-weight: bold;
+		}
+		
+		.total-label {
+			text-align: right;
+			font-weight: bold;
+		}
+		
+		.total-value {
+			font-weight: bold;
+		}
+	}
+}
+
+.footer-section {
+	.footer-row {
+		display: flex;
+		margin-bottom: 3px;
+		line-height: 20px;
+		justify-content: space-between;
+		
+		.footer-item {
+			display: flex;
+			margin-right: 20px;
+			
+			.label {
+				font-weight: bold;
+				width: 80px;
+				font-size: 14px;
+			}
+			
+			.value {
+				min-width: 80px;
+				font-size: 14px;
+			}
+			
+			&.address-item {
+				.address-value {
+					min-width: 200px;
+				}
+			}
+		}
+	}
+}
+
+@media print {
+	.app-container {
+		display: none;
+	}
+	
+	.print-page {
+		box-shadow: none;
+		margin: 0;
+		padding: 10mm;
+		padding-left: 20mm;
+		page-break-inside: avoid;
+		page-break-after: always;
+	}
+	.print-page:last-child {
+		page-break-after: avoid;
+	}
+}
+</style>

--
Gitblit v1.9.3