打印备料单

src/api/mes/prepareDetail.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+// 打印
+export function printPrepareByCode(workorderCode) {
+  return request({
+    url: '/mes/prepareDetail/printPrepareByCode/' + workorderCode,
+    method: 'get'
+  });
+}
+
 // 查询mes备料单明细列表
 export function listPrepareDetail(query) {
 	return request({

src/views/mes/prepare/index.vue

@@ -106,6 +106,17 @@
 					v-hasPermi="['mes:prepare:export']"
 				>导出</el-button>
 			</el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          :disabled="single"
+          icon="el-icon-download"
+          size="mini"
+          @click="showPrint"
+          v-hasPermi="['mes:prepare:export']"
+        >打印预览</el-button>
+      </el-col>
 			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 		</el-row>
 
@@ -205,11 +216,104 @@
 				<el-button @click="cancel">取 消</el-button>
 			</div>
 		</el-dialog>
+
+    <!-- 打印预览弹出层 -->
+    <el-dialog
+      title="备料信息"
+      :visible.sync="printDialogVisible"
+      width="1450px"
+    >
+      <div id="printFrom" class="my-print-box">
+
+        <el-form :ref="formRef" :model="form" :rules="validateRules">
+
+          <!-- 表头-工单信息 -->
+          <el-row class="my-print-head">
+            <el-col :offset="10" :span="4">生产订单备料单(订单物料)</el-col>
+          </el-row>
+          <!-- 导航栏 -->
+          <el-row class="my-print-nav">
+            <el-col :span="4">工厂:{{printData.factory}}</el-col>
+            <el-col :span="4">工作中心:{{printData.workCenter}}</el-col>
+            <el-col :span="4">生产日期:{{printData.productDate}}</el-col>
+            <el-col :span="4">打印日期:{{printData.printDate}}</el-col>
+            <el-col :span="4">页次:  1/  1</el-col>
+          </el-row>
+          <!-- 主数据 -->
+          <el-table
+            v-if="refreshNewWorkerTable"
+            v-loading="newWorkerLoading"
+            class="my-print-table"
+            :data="printData.workTable"
+            border
+            style="width: 100%">
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50">
+            </el-table-column>
+            <el-table-column
+              prop="materialCode"
+              label="料号"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="materailName"
+              label="物料描述"
+              width="300">
+            </el-table-column>
+            <el-table-column
+              prop="unit"
+              label="单位">
+            </el-table-column>
+            <el-table-column
+              prop="orderCode"
+              label="生产订单">
+            </el-table-column>
+            <el-table-column
+              prop="quantity"
+              label="请领数量">
+            </el-table-column>
+            <el-table-column
+              prop="fundQuanlity"
+              label="欠领数量">
+            </el-table-column>
+            <el-table-column
+              prop="routeCode"
+              label="实发数量">
+            </el-table-column>
+          </el-table>
+
+          <br/>
+          <!-- 底部 -->
+          <el-row class="my-print-foot">
+            <el-col :offset="1" :span="3">发料人:</el-col>
+            <el-col :offset="2" :span="3">收料人:</el-col>
+            <el-col :offset="2" :span="3">白色:车间联</el-col>
+            <el-col :offset="1" :span="3">蓝色:仓库联</el-col>
+            <el-col :offset="1" :span="3">红色:财务联</el-col>
+          </el-row>
+          <el-row class="my-print-foot">
+            <el-col :offset="1" :span="3">SAP-No:{{printData.SAPNo}}</el-col>
+            <el-col :offset="1" :span="3">Z-PM-F-030-A.2</el-col>
+          </el-row>
+
+        </el-form>
+
+
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
+      </span>
+    </el-dialog>
+
 	</div>
 </template>
 
 <script>
 import { listPrepare, getPrepare, delPrepare, addPrepare, updatePrepare } from "@/api/mes/prepare";
+import {printPrepareByCode} from "@/api/mes/prepareDetail";
+import moment from "moment/moment";
 // import { listPrepareDetail, getPrepareDetail, delPrepareDetail, addPrepareDetail, updatePrepareDetail } from "@/api/mes/prepareDetail";
 // import Detail  from "./prepareDetail.vue";
 export default {
@@ -217,6 +321,26 @@ export default {
 	// components: {Detail},
 	data() {
 		return {
+      newWorkerLoading: false,
+      refreshNewWorkerTable:true,
+      // 选择领料单
+      selectPrepare:[],
+      // 打印
+      formRef: 'form',
+      validateRules: [],
+      printData: {
+        printable: 'printFrom',
+        ignore: ['no-print'],
+        workCenter: "暂无数据",
+        SAPNo: null,
+        manufacture: null,
+        auditor: null,
+        printDate: null,
+        factory: null,
+        productDate: null,
+        workTable: [],
+      },
+      printDialogVisible: false,
 			// 遮罩层
 			loading: true,
 			// 选中数组
@@ -286,6 +410,42 @@ export default {
 		this.getList();
 	},
 	methods: {
+    // 打印
+    handlePrint(params) {
+      printJS({
+        printable: params.printable, // 'printFrom', // 标签元素id
+        type: params.type || 'html',
+        maxWidth: 1500, // 最大宽度
+        font_size: "",// 设置字体大小
+        header: params.header, // '表单',
+        targetStyles: ['*'],
+        style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
+        ignoreElements: params.ignore || [], // ['no-print']
+        properties: params.properties || null
+      })
+    },
+    // 打印预览
+    showPrint() {
+      // 清楚缓存
+      this.printData.workCenter = "暂无数据";
+      this.printData.printDate = null;
+      this.printData.workTable = [];
+      this.printData.factory = null;
+      this.printData.productDate = null;
+      // 打开工单信息对话框
+      this.printDialogVisible = true;
+      this.newWorkerLoading = true // 设置加载状态为true，表示正在加载
+      this.refreshNewWorkerTable = false // 先将refreshProTable设置为false，隐藏表格
+      printPrepareByCode(this.selectPrepare[0].workorderCode).then(response => {
+        console.log(response.data)
+        this.printData.factory = response.data.mesPrepareDetailList[0].factoryCode
+        this.printData.productDate = response.data.mesPrepare.productDate
+        this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
+        this.printData.workTable = response.data.mesPrepareDetailList
+        this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true，显示表格
+        this.newWorkerLoading = false // 设置加载状态为false，表示加载完成
+      })
+    },
 	//新增 设备选择弹出框
     // handlePrepareDetail(){
     //   this.$refs.detail.showFlag = true;
@@ -355,6 +515,7 @@ export default {
 			this.ids = selection.map(item => item.prepareId)
 			this.single = selection.length!==1
 			this.multiple = !selection.length
+      this.selectPrepare = selection
 		},
 		/** 新增按钮操作 */
 		handleAdd() {
@@ -411,3 +572,19 @@ export default {
 	}
 };
 </script>
+<style>
+.my-print-head {
+  margin-top: 20px;
+  font-weight: bold;
+}
+.my-print-nav {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.my-print-table {
+
+}
+.my-print-foot {
+  margin-top: 20px;
+}
+</style>