工单管理打印功能 （ npm install print-js --save ）

package.json

@@ -47,6 +47,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
+    "print-js": "^1.6.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/api/plan/workorder.js

@@ -1,5 +1,12 @@
 import request from '@/utils/request'
 
+export function getWorkOrders(workorderCode) {
+  return request({
+    url:'/plan/pro/workorder/getWorkOrders/'+workorderCode,
+    method:'get'
+  })
+}
+
 // 校验工单是否可以修改
 export function checkWorkOrder(workorderId){
   return request({

src/main.js

@@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// 打印插件
+import Print from 'print-js'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

src/views/plan/workorder/index.vue

@@ -138,7 +138,18 @@
 					v-hasPermi="['mes:pro:workorder:export']"
 				>导出</el-button>
 			</el-col>
-			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          :disabled="single"
+          icon="el-icon-download"
+          size="mini"
+          @click="showPrint"
+          v-hasPermi="['mes:pro:workorder:export']"
+        >打印预览</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 		</el-row>
 
 		<el-table v-loading="loading" :data="workorderList" @selection-change="handleSelectionChange">
@@ -182,6 +193,101 @@
       </el-table-column>
 		</el-table>
 
+    <!-- 打印预览弹出层 -->
+    <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="workorderCode"
+              label="工单号"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="productName"
+              label="物料名称"
+              width="180">
+            </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="quantityProduced"
+              label="已生产数量">
+            </el-table-column>
+            <el-table-column
+              prop="quantitySplit"
+              label="拆分数量">
+            </el-table-column>
+            <el-table-column
+              prop="routeCode"
+              label="工艺编码">
+            </el-table-column>
+            <el-table-column
+              prop="prodLineCode"
+              label="产线设备">
+            </el-table-column>
+            <el-table-column label="班次" align="center" prop="shiftId">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.shift_type" :value="scope.row.shiftId"/>
+              </template>
+            </el-table-column>
+            <el-table-column label="工单状态" align="center" prop="status" >
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.workorder_type" :value="scope.row.status"/>
+              </template>
+            </el-table-column>
+            <el-table-column label="产品类型" align="center" prop="prodType" >
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.product_type" :value="scope.row.prodType"/>
+              </template>
+            </el-table-column>
+          </el-table>
+
+        </el-form>
+
+
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
+      </span>
+    </el-dialog>
+
 		<pagination
 			v-show="total>0"
 			:total="total"
@@ -324,6 +430,7 @@
 
 <script>
 import {
+  getWorkOrders,
   listWorkorder,
   getWorkorder,
   delWorkorder,
@@ -342,14 +449,28 @@ export default {
 	dicts: ['product_type','workorder_type','shift_type'],
 	data() {
 		return {
+      formRef: 'form',
+      validateRules: [],
+      printData: {
+        printable: 'printFrom',
+        ignore: ['no-print'],
+        workCenter: "暂无数据",
+        printDate: null,
+        factory: null,
+        productDate: null,
+        workTable: [],
+      },
+      printDialogVisible: false,
       // 工单修改form
       workForm: {},
       // 首页-多选选中-用于工单变更
       selectWork: null,
       //工单遮罩层
       workerLoading: false,
+      newWorkerLoading: false,
       //工单重新渲染表格
       refreshWorkerTable: true,
+      refreshNewWorkerTable: true,
       // 拆分后工单list
       splitData: [],
       // 批次
@@ -458,6 +579,40 @@ 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.printData.printDate = moment(new Date()).format('YYYY.MM.DD');
+      this.newWorkerLoading = true // 设置加载状态为true，表示正在加载
+      this.refreshNewWorkerTable = false // 先将refreshProTable设置为false，隐藏表格
+      getWorkOrders(this.selectWork.workorderCode).then(response => {
+        this.printData.workTable = response.data;
+        this.printData.factory = response.data[0].factoryCode;
+        this.printData.productDate = response.data[0].productDate;
+        this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true，显示表格
+        this.newWorkerLoading = false // 设置加载状态为false，表示加载完成
+      })
+    },
     /** 动态添加表单 */
     addField() {
       //如果批次数量大于等于拆分数量则不允许拆分
@@ -927,5 +1082,16 @@ export default {
 .my-margin {
   margin-top: 40px;
   margin-bottom: 10px;
+}
+.my-print-head {
+  margin-top: 20px;
+  font-weight: bold;
+}
+.my-print-nav {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.my-print-table {
+
 }
 </style>