收回单打印

src/api/business/returnReceipt.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { download,downloadPdf } from '@/utils/request'
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 
@@ -19,6 +20,19 @@ export function getReceipt(id) {
 	})
 }
 
+//打印
+export function printReturnReceipt(data) {
+  downloadPdf(
+    baseUrl+"/business/returnReceipt/printDetailPdf",
+    {
+      ...data,
+    },
+    `外协收回单_${new Date().getTime()}.pdf`
+  )
+}
+
+
+
 // 新增收回单
 export function addReceipt(data) {
 	return request({

src/utils/request.js

@@ -169,4 +169,33 @@ export function download(url, params, filename, config) {
     })
 }
 
+// 通用pdf打印方法
+export function downloadPdf(url, params, filename, config) {
+  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
+  return service.post(url, params, {
+    transformRequest: [(params) => { return tansParams(params) }],
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    responseType: 'blob',
+    ...config
+  }).then(async (data) => {
+    const isLogin = await blobValidate(data);
+    if (isLogin) {
+      const blob = new Blob([data], { type: 'application/pdf' })
+      var url = URL.createObjectURL(blob);
+      window.open(url, 'filename');
+    } else {
+      const resText = await data.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+      ElMessage.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r) => {
+    console.error(r)
+    ElMessage.error('下载文件出现错误，请联系管理员！')
+    downloadLoadingInstance.close();
+  })
+}
+
+
 export default service

src/views/business/returnReceipt/index.vue

@@ -1,168 +1,240 @@
 <template>
-	<div class="page-container column-container">
-		<!-- 搜索区 -->
-		<el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true" style="margin-right: 0px">
-			<el-form-item label="单据号：" prop="formCode">
-				<el-input
-					v-model="queryParams.formCode"
-					placeholder="请输入单据号"
-					style="width: 144px"
-					clearable
-					@keyup.enter="handleQuery"
-				/>
-			</el-form-item>
-			<el-form-item label="表单日期：" >
-				<el-date-picker
-					v-model="queryParams.startTime"
-					type="date"
-					style="width: 144px"
-					value-format="YYYY-MM-DD"
-					placeholder="选择起始日期"
-					clearable
-				/>
-				<span style="margin: 0 4px">~</span>
-				<el-date-picker
-					v-model="queryParams.endTime"
-					type="date"
-					style="width: 144px"
-					value-format="YYYY-MM-DD"
-					placeholder="选择结束日期"
-					clearable
-				/>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-			</el-form-item>
-		</el-form>
+  <div class="page-container column-container">
+    <!-- 搜索区 -->
+    <el-form
+      class="list-search-container"
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      style="margin-right: 0px"
+    >
+      <el-form-item label="单据号：" prop="formCode">
+        <el-input
+          v-model="queryParams.formCode"
+          placeholder="请输入单据号"
+          style="width: 144px"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表单日期：">
+        <el-date-picker
+          v-model="queryParams.startTime"
+          type="date"
+          style="width: 144px"
+          value-format="YYYY-MM-DD"
+          placeholder="选择起始日期"
+          clearable
+        />
+        <span style="margin: 0 4px">~</span>
+        <el-date-picker
+          v-model="queryParams.endTime"
+          type="date"
+          style="width: 144px"
+          value-format="YYYY-MM-DD"
+          placeholder="选择结束日期"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
 
-		<!-- 功能按钮区 -->
-		<div class="list-btns-container">
-			<el-button type="primary" icon="Plus" @click="handleShowFormDialog(null)"> 新增 </el-button>
-			<el-button type="danger" icon="Delete" :disabled="ids.length == 0" @click="handleDelete"> 删除 </el-button>
-		</div>
-		<!-- 渲染数据区 -->
-		<div class="el-table-container">
-			<div class="el-table-inner-container">
-				<el-table v-loading="loading" :data="dataList" size="small" border height="100%"  @selection-change="handleSelectionChange">
-					<el-table-column type="selection" width="48" align="center" />
-					<el-table-column label="收回单号" align="center" prop="formCode" width="120" />
-					<el-table-column label="收回日期" align="center" prop="formDate" width="120">
-						<template #default="scope">
-							{{ parseTime(scope.row.formDate, '{y}-{m}-{d}') }}
-						</template>
-					</el-table-column>
-					<el-table-column label="备注" align="center" prop="remark" />
-					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="64">
-						<template #default="scope">
-							<el-button v-if="scope.row" link type="primary" icon="View" @click="handleShowFormDialog(scope.row)"> 查看 </el-button>
-							<el-button v-else link type="warning" icon="Edit" @click="handleShowFormDialog(scope.row)"> 编辑 </el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-			</div>
-		</div>
+    <!-- 功能按钮区 -->
+    <div class="list-btns-container">
+      <el-button type="primary" icon="Plus" @click="handleShowFormDialog(null)">
+        新增
+      </el-button>
+      <el-button
+        type="danger"
+        icon="Delete"
+        :disabled="ids.length == 0"
+        @click="handleDelete"
+      >
+        删除
+      </el-button>
+      <el-button
+        type="warning"
+        icon="Download"
+        :disabled="ids.length != 1"
+        @click="handlePrint"
+      >
+        打印
+      </el-button>
+    </div>
+    <!-- 渲染数据区 -->
+    <div class="el-table-container">
+      <div class="el-table-inner-container">
+        <el-table
+          v-loading="loading"
+          :data="dataList"
+          size="small"
+          border
+          height="100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="48" align="center" />
+          <el-table-column
+            label="收回单号"
+            align="center"
+            prop="formCode"
+            width="120"
+          />
+          <el-table-column
+            label="收回日期"
+            align="center"
+            prop="formDate"
+            width="120"
+          >
+            <template #default="scope">
+              {{ parseTime(scope.row.formDate, "{y}-{m}-{d}") }}
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+            width="64"
+          >
+            <template #default="scope">
+              <el-button
+                v-if="scope.row"
+                link
+                type="primary"
+                icon="View"
+                @click="handleShowFormDialog(scope.row)"
+              >
+                查看
+              </el-button>
+              <el-button
+                v-else
+                link
+                type="warning"
+                icon="Edit"
+                @click="handleShowFormDialog(scope.row)"
+              >
+                编辑
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
 
-		<!-- 分页 -->
-		<pagination
-			v-show="total > 0"
-			:total="total"
-			v-model:page="queryParams.pageNum"
-			v-model:limit="queryParams.pageSize"
-			@pagination="getList"
-		/>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
 
-		<!-- 表单 -->
-		<receipt-form ref="receiptRef" @handleSaveSuccess="getList" />
-	</div>
+    <!-- 表单 -->
+    <receipt-form ref="receiptRef" @handleSaveSuccess="getList" />
+  </div>
 </template>
 
 <script setup name="Receipt">
-import { listReceipt,delReceipt } from '@/api/business/returnReceipt'
-import receiptForm from './form'
-const { proxy } = getCurrentInstance()
+import {
+  listReceipt,
+  delReceipt,
+  printReturnReceipt,
+} from "@/api/business/returnReceipt";
+import receiptForm from "./form";
+const { proxy } = getCurrentInstance();
 
-const dataList = ref([])
-const loading = ref(true)
-const multiple = ref(false)
-const ids = ref([])
-const total = ref(0)
+const dataList = ref([]);
+const loading = ref(true);
+const multiple = ref(false);
+const ids = ref([]);
+const total = ref(0);
 /** 查询对象 */
 const queryParams = ref({
-	pageNum: 1,
-	pageSize: 10,
-	formCode: null,
-	formDate: null,
-	startTime:null,
-	endTime:null
-})
+  pageNum: 1,
+  pageSize: 10,
+  formCode: null,
+  formDate: null,
+  startTime: null,
+  endTime: null,
+});
 
 /***********************  方法区  ****************************/
 
 /** 查询外协单主
 带箱方式，是整单的。如果换新箱子，明细中，都需要更换箱子列表 */
 function getList() {
-	loading.value = true
-	listReceipt(queryParams.value).then((response) => {
-		dataList.value = response.rows
-		total.value = response.total
-		loading.value = false
-	})
+  loading.value = true;
+  listReceipt(queryParams.value).then((response) => {
+    dataList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-	queryParams.value.pageNum = 1
-	getList()
+  queryParams.value.pageNum = 1;
+  getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-	queryParams.value= ref({
-	pageNum: 1,
-	pageSize: 10,
-	formCode: null,
-	formDate: null,
-	startTime:null,
-	endTime:null
-})
-	handleQuery()
+  queryParams.value = ref({
+    pageNum: 1,
+    pageSize: 10,
+    formCode: null,
+    formDate: null,
+    startTime: null,
+    endTime: null,
+  });
+  handleQuery();
 }
 /**复选框选中数据 */
 function handleSelectionChange(selection) {
-	ids.value = selection.map((item) => item.id)
+  ids.value = selection.map((item) => item.id);
 }
 /** 修改按钮操作 */
 function handleShowFormDialog(row) {
-	if(row && row.status == 1) {
-		row.editStatus = false
-	}
-	proxy.$refs.receiptRef.open(row?row:null)
+  if (row && row.status == 1) {
+    row.editStatus = false;
+  }
+  proxy.$refs.receiptRef.open(row ? row : null);
 }
 /** 删除按钮操作 */
 function handleDelete() {
-	const _ids =ids.value
-	proxy.$modal
-		.confirm('是否确认删除选中的数据项？')
-		.then(function () {
-			return delReceipt(_ids)
-		})
-		.then(() => {
-			getList()
-			proxy.$modal.msgSuccess('删除成功！')
-		})
-		.catch(() => {})
+  const _ids = ids.value;
+  proxy.$modal
+    .confirm("是否确认删除选中的数据项？")
+    .then(function () {
+      return delReceipt(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功！");
+    })
+    .catch(() => {});
+}
+
+/** 打印按钮操作 */
+function handlePrint() {
+  printReturnReceipt({ id: ids.value[0] });
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-	proxy.download(
-		'business/returnReceipt/export',
-		{
-			...queryParams.value
-		},
-		`order_${new Date().getTime()}.xlsx`
-	)
+  proxy.download(
+    "business/returnReceipt/export",
+    {
+      ...queryParams.value,
+    },
+    `order_${new Date().getTime()}.xlsx`
+  );
 }
 getList();
 </script>