From ed7e2bd3782f3b867a8806b11d2f2314f3b8966a Mon Sep 17 00:00:00 2001
From: zhaoxiaolin <khd@123>
Date: Tue, 2 Jan 2024 09:46:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BD=E5=9D=AF=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/quality/qcProCheck.js          |   4 +-
 src/views/quality/qcProCheck/index.vue | 385 +++++++++-------
 src/views/quality/qcTableXJ/index.vue  | 590 +++++++++++++++++++++++++
 3 files changed, 817 insertions(+), 162 deletions(-)
 create mode 100644 src/views/quality/qcTableXJ/index.vue

diff --git a/src/api/quality/qcProCheck.js b/src/api/quality/qcProCheck.js
index 5b5556c..64f37df 100644
--- a/src/api/quality/qcProCheck.js
+++ b/src/api/quality/qcProCheck.js
@@ -1,8 +1,8 @@
 import request from '@/utils/request'
 
-export function listCheck(query) {
+export function getHfChartData(query) {
   return request({
-    url: '/quality/qcProCheck/list',
+    url: '/quality/qcProCheck/getHfChartData',
     method: 'get',
     params: query
   });
diff --git a/src/views/quality/qcProCheck/index.vue b/src/views/quality/qcProCheck/index.vue
index d68a724..133d399 100644
--- a/src/views/quality/qcProCheck/index.vue
+++ b/src/views/quality/qcProCheck/index.vue
@@ -1,14 +1,17 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="工单编码" prop="workorderCode">
-        <el-input
-          v-model="queryParams.workorderCode"
-          placeholder="请输入工单编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+    <div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" style="margin-bottom: 0px;">
+		    <el-form-item label="生产时间段" prop="productDateArray">
+          <el-date-picker
+          v-model="queryParams.productDateArray"
+          format="yyyy-MM-dd HH:mm:00"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+				</el-date-picker>
+			</el-form-item>
+
       <el-form-item label="产品编码" prop="productCode">
         <el-input
           v-model="queryParams.productCode"
@@ -25,164 +28,226 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label-width="100px" label="循环范围开始" prop="planLoopStart">
-        <el-date-picker
-          v-model="queryParams.createTimeArray"
-          type="datetimerange"
-          :picker-options="pickerOptions"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          align="right">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['quality:qcProCheck:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="checkList" border :span-method="objectSpanMethod">
-      <el-table-column label="烘房编码" align="center" prop="machineCode"/>
-      <el-table-column label="烘房名称" align="center" prop="machineName"/>
-      <el-table-column label="合格数量" align="center" prop="acceptanceNumber"/>
-      <el-table-column label="不合格数量" align="center" prop="unqualifiedNumber"/>
-      <el-table-column label="合格率" align="center" prop="passRate"/>
-    </el-table>
-
+			<el-form-item label="班次" prop="shiftId">
+				<el-select v-model="queryParams.shiftId" placeholder="请选择班次" clearable>
+					<el-option v-for="item in workShift" :key="item.shiftId" :label="item.shiftDesc"
+								:value="item.shiftId"
+						></el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item label="图表类型">
+				 <el-select v-model="queryParams.chartType" filterable placeholder="请选择图表类型">
+					<el-option
+					v-for="item in typeOptions"
+					:key="item.value"
+					:label="item.label"
+					:value="item.value">
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+			</el-form-item>
+		</el-form>
+		<el-row :gutter="20">
+			<el-col :sm="24" :lg="24">
+				<span style="font-size: 20px;margin: 40%;color: cadetblue;">{{title}}</span>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+				<div style="border: 1px solid #cfdee4;">
+				    <div id="orderline" style="width:100%;height:500px"></div>
+				</div>
+		</el-row>
   </div>
 </template>
 
 <script>
-import { listCheck} from "@/api/quality/qcProCheck";
-
+import * as echarts from 'echarts'
+require('echarts/theme/macarons')
+import {getHfChartData} from "@/api/quality/qcProCheck";
+import {getProShifts} from "@/api/mes/reportWork";
+import moment from 'moment';
 export default {
-  name: "qcProCheck",
+  name: "produceLineChart",
+  components: {},
   data() {
     return {
-      // 日期范围选择快捷
-      pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
+        title:"烘房白坯质量统计",
+        // 查询参数
+        queryParams: {
+          productDateArray: [],
+          pageNum: 1,
+          pageSize: 10,
+          workorderCode: null,
+          workorderName: null,
+          parentOrder: null,
+          orderId: null,
+          orderCode: null,
+          productId: null,
+          productCode: null,
+          prodType: null,
+          productName: null,
+          productSpc: null,
+          productDate: null,
+          createTimeStart:null,
+          createTimeEnd:null,
+          chartType:'hf'
+        },
+        typeOptions:[
+          {
+            label:"烘房",
+            value:"hf"
+          },
+          {
+            label:"产品",
+            value:"cp"
           }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
-      },
-      rowNum : 1,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 【请填写功能名称】表格数据
-      checkList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        createTimeArray: [],
-        workorderCode:null,
-        productCode:null,
-        machineCode:null,
-        createTimeStart:null,
-        createTimeEnd:null,
-      },
-      // 表单参数
-      form: {},
-    };
-  },
-  created() {
-    this.getList();
+        ],
+        options:null,
+        // 产品选中listtag
+        selectMaterielListtag:[],
+        // 班次list
+         workShift: []
+      }
   },
-  methods: {
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-    },
-    /** 查询【请填写功能名称】列表 */
-    getList() {
-      this.loading = true;
-      listCheck(this.queryParams).then(response => {
-        this.checkList = response;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        createTimeArray: [],
-        workorderCode:null,
-        productCode:null,
-        machineCode:null,
-        createTimeStart:null,
-        createTimeEnd:null,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.queryParams.createTimeArray = [];
-      this.handleQuery();
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('quality/qcProCheck/export', {
-        ...this.queryParams
-      }, `qcProCheck_${new Date().getTime()}.xlsx`)
-    }
-  }
+	mounted(){
+		this.getDate();
+		this.getList();
+    // 获取班次信息
+		getProShifts().then(response => {
+			this.workShift = response.data
+		})
+	},
+
+	methods: {
+    /**获取默认查询时间段**/
+		getDate() {
+			let start = this.Fungetdate (0)
+			let end = this.Fungetdate (1)
+			this.queryParams.productDateArray.push(start,end)
+		},
+		Fungetdate (num) {
+			var dd = new Date();
+			dd.setDate(dd.getDate() + num);
+			var y = dd.getFullYear();
+			var m = dd.getMonth() + 1;//获取当前月份的日期
+			var d = dd.getDate();
+			return y + "-" + m + "-" + d+" 00:00:00";
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.getList();
+		},
+
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm("queryForm");
+			this.getDate();
+			this.handleQuery();
+		},
+		getList() {
+
+			if(this.queryParams.productDateArray!=null){
+				this.queryParams.createTimeStart = moment(this.queryParams.productDateArray[0]).format('YYYY-MM-DD HH:mm:00');
+				this.queryParams.createTimeEnd = moment(this.queryParams.productDateArray[1]).format('YYYY-MM-DD HH:mm:00');
+			}
+
+			let myChart = this.$echarts.init(document.getElementById('orderline'))
+			getHfChartData(this.queryParams).then(data => {
+
+        let seriesResult =  data.series;
+        seriesResult.forEach(se => {
+            se.type = 'bar';
+            se.stack = 'total',
+            se.label = {show: true},
+            se.emphasis = {focus: 'series'}
+        });
+
+				myChart.setOption({
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow'
+                }
+              },
+              legend: {},
+              grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+              },
+              xAxis: {
+                type: 'value'
+              },
+              yAxis: {
+                type: 'category',
+                data: data.yAxisData//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+              },
+              series: seriesResult,
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                },
+                formatter: function (params) {
+                  debugger
+                    let result="合格率："+Number(params[0].data)*100.00/(Number(params[1].data)+Number(params[0].data))+"%<br/>";
+                    for (let i = 0; i < params.length; i++) {
+                        result+=params[i].marker + params[i].seriesName + '：' + params[i].data + '<br>'
+                    }
+                    return params[0].name + '<br/>'
+                        + result
+                }
+              }
+          },
+          true
+			  )
+			})
+		}
+	}
 };
 </script>
+<style lang="scss" scoped>
+.tagbox {
+  display: flex;
+  /* overflow: scroll; */
+  position: relative;
+  width: 80%;
+  padding-left: 26px;
+  margin-bottom: 15px;
+  .tagboxlabel{
+    width: 100px;
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: black;
+    line-height: 40px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-right: 12px;
+  }
+  .tag {
+    width: 720px;
+    border: 1px #DCDFE6 solid;
+    height: 60px;
+    padding: 5px 15px;
+    overflow-y: scroll;
+    .tagitem{
+      margin-left: 5px;
+    }
+  }
+  .button1{
+    width: 37px;
+    height: 37px;
+    position: absolute;
+        right: -39px;
+    top: 2px;
+
+  }
+}
+</style>
+
+
diff --git a/src/views/quality/qcTableXJ/index.vue b/src/views/quality/qcTableXJ/index.vue
new file mode 100644
index 0000000..f126c60
--- /dev/null
+++ b/src/views/quality/qcTableXJ/index.vue
@@ -0,0 +1,590 @@
+<template>
+	<div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="edit-el-form">
+			<el-form-item label="订单编码" prop="workorderCodeSap">
+				<el-input
+					v-model="queryParams.workorderCodeSap"
+					placeholder="请输入订单编码"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+			<el-form-item label="产品编号" prop="productCode">
+				<el-input
+					v-model="queryParams.productCode"
+					placeholder="请输入产品编号"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+			<el-form-item label="产品名称" prop="productName">
+				<el-input
+					v-model="queryParams.productName"
+					placeholder="请输入产品名称"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item>
+			<!-- <el-form-item label="规格型号" prop="productSpc">
+				<el-input
+					v-model="queryParams.productSpc"
+					placeholder="请输入规格型号"
+					clearable
+					@keyup.enter.native="handleQuery"
+				/>
+			</el-form-item> -->
+			<el-form-item label="工单生产日期" prop="productDate">
+				<el-date-picker clearable
+					v-model="queryParams.productDate"
+					type="date"
+					value-format="yyyy-MM-dd"
+					placeholder="请选择工单生产日期"
+					style="width:205px"
+					>
+				</el-date-picker>
+			</el-form-item>
+			<!--
+			<el-form-item label="单据状态" prop="status">
+				<el-select
+				v-model="queryParams.status"
+				placeholder="请选择单据状态"
+				@change="$forceUpdate()"
+				clearable
+				style="width:205px"
+				@keyup.enter.native="handleQuery">
+				<el-option v-for="item in options" :key="item.status" :label="item.label" :value="item.status"></el-option>
+				</el-select>
+			</el-form-item>-->
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
+				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+			</el-form-item>
+		</el-form>
+
+		<el-row :gutter="10" class="mb8">
+			<!-- <el-col :span="1.5">
+				<el-button
+					type="primary"
+					plain
+					icon="el-icon-plus"
+					size="mini"
+					@click="handleAdd"
+					v-hasPermi="['mes:prepare:add']"
+				>新增</el-button>
+			</el-col>
+			<el-col :span="1.5">
+				<el-button
+					type="success"
+					plain
+					icon="el-icon-edit"
+					size="mini"
+					:disabled="single"
+					@click="handleUpdate"
+					v-hasPermi="['mes:prepare:edit']"
+				>修改</el-button>
+			</el-col>
+			<el-col :span="1.5">
+				<el-button
+					type="danger"
+					plain
+					icon="el-icon-delete"
+					size="mini"
+					:disabled="multiple"
+					@click="handleDelete"
+					v-hasPermi="['mes:prepare:remove']"
+				>删除</el-button>
+			</el-col> -->
+			<el-col :span="1.5">
+				<el-button
+					type="warning"
+					plain
+					icon="el-icon-download"
+					size="mini"
+					@click="handleExport"
+					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>
+
+		<el-table v-loading="loading" :data="prepareList" @selection-change="handleSelectionChange">
+			<el-table-column type="selection" width="55" align="center" />
+			<el-table-column prop="date" label="生产日期" width="100" align="center"/>
+			<el-table-column prop="date" label="产品名称" width="150" align="center"/>
+			<el-table-column prop="date" label="产品编码" width="150" align="center"/>
+			<el-table-column prop="date" label="订单编码" width="150" align="center"/>
+			<el-table-column prop="date" label="订单批次" width="150" align="center"/>
+            <el-table-column label="上午" align="center" >
+            	<el-table-column prop="name" label="8:00-9:00" width="120" align="center"/>
+				<el-table-column prop="name" label="9:00-10:00" width="120" align="center"/>
+				<el-table-column prop="name" label="10:00-11:00" width="120" align="center"/>
+				<el-table-column prop="name" label="11:00-12:00" width="120" align="center"/>
+            </el-table-column>
+            <el-table-column label="下午" align="center" >
+            	<el-table-column prop="name" label="13:30-14:30" width="120" align="center"/>
+				<el-table-column prop="name" label="14:30-15:30" width="120" align="center"/>
+				<el-table-column prop="name" label="15:30-16:30" width="120" align="center"/>
+				<el-table-column prop="name" label="16:30-17:30" width="120" align="center"/>
+            </el-table-column>
+			<el-table-column label="加班" align="center" >
+            	<el-table-column prop="name" label="12:30-13:30" width="120" align="center"/>
+				<el-table-column prop="name" label="18:00-19:00" width="120" align="center"/>
+				<el-table-column prop="name" label="19:00-20:00" width="120" align="center"/>
+				<el-table-column prop="name" label="20:00-21:00" width="120" align="center"/>
+            </el-table-column>
+		</el-table>
+
+		<pagination
+			v-show="total>0"
+			:total="total"
+			:page.sync="queryParams.pageNum"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList"
+		/>
+
+		<!-- 添加或修改备料单对话框 -->
+		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
+				<el-form-item label="工单编码" prop="workorderCode">
+					<el-input v-model="form.workorderCode" placeholder="请输入工单编码" />
+				</el-form-item>
+				<el-form-item label="工单名称" prop="workorderName">
+					<el-input v-model="form.workorderName" placeholder="请输入工单名称" />
+				</el-form-item>
+				<el-form-item label="父工单" prop="parentOrder">
+					<el-input v-model="form.parentOrder" placeholder="请输入父工单" />
+				</el-form-item>
+				<el-form-item label="订单编码" prop="orderCode">
+					<el-input v-model="form.orderCode" placeholder="请输入订单编码" />
+				</el-form-item>
+				<el-form-item label="产品编号" prop="productCode">
+					<el-input v-model="form.productCode" placeholder="请输入产品编号" />
+				</el-form-item>
+				<el-form-item label="产品名称" prop="productName">
+					<el-input v-model="form.productName" placeholder="请输入产品名称" />
+				</el-form-item>
+				<el-form-item label="规格型号" prop="productSpc">
+					<el-input v-model="form.productSpc" placeholder="请输入规格型号" />
+				</el-form-item>
+				<el-form-item label="配料计划明细id" prop="wetDetailPlanId">
+					<el-input v-model="form.wetDetailPlanId" placeholder="请输入配料计划明细id" />
+				</el-form-item>
+				<el-form-item label="工单生产日期" prop="productDate" >
+					<el-date-picker clearable
+						v-model="form.productDate"
+						type="date"
+						value-format="yyyy-MM-dd"
+						placeholder="请选择工单生产日期"
+						style="width:350px">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item label="班次" prop="shiftId">
+					<el-input v-model="form.shiftId" placeholder="请输入班次" />
+				</el-form-item>
+				<el-form-item label="备注" prop="remark">
+					<el-input v-model="form.remark" placeholder="请输入备注" />
+				</el-form-item>
+				<el-form-item label="工厂编码" prop="factoryCode">
+					<el-input v-model="form.factoryCode" placeholder="请输入工厂编码" />
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="submitForm">确 定</el-button>
+				<el-button @click="cancel">取 消</el-button>
+			</div>
+		</el-dialog>
+
+    <!-- 打印预览弹出层 -->
+    <el-dialog
+      title="备料信息"
+      :visible.sync="printDialogVisible"
+      width="1000px"
+    >
+      <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="5">生产订单备料单(订单物料)</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="170">
+            </el-table-column>
+            <el-table-column
+              prop="materialName"
+              label="物料描述"
+              width="240">
+            </el-table-column>
+            <el-table-column
+              prop="unit"
+			  width="50"
+              label="单位">
+            </el-table-column>
+            <el-table-column
+              prop="workorderCode"
+			  width="120"
+              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"
+			  width="80"
+              label="实发数量">
+            </el-table-column>
+			<el-table-column
+              prop="recoil"
+              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";
+export default {
+	name: "Prepare",
+	// 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,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 备料单表格数据
+			prepareList: [],
+			// 弹出层标题
+			title: "",
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNum: 1,
+				pageSize: 10,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				wetDetailPlanId: null,
+				productDate: null,
+				shiftId: null,
+				ancestors: null,
+				status: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				factoryCode: null
+			},
+				options: [{
+          status: "L0",
+          label: '待确认'
+        }, {
+          status: "L1",
+          label: '已确认'
+        }],
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {
+				workorderCode: [
+					{ required: true, message: "工单编码不能为空", trigger: "blur" }
+				],
+				parentOrder: [
+					{ required: true, message: "父工单不能为空", trigger: "blur" }
+				],
+				orderId: [
+					{ required: true, message: "订单id不能为空", trigger: "blur" }
+				],
+				productCode: [
+					{ required: true, message: "产品编号不能为空", trigger: "blur" }
+				],
+				productName: [
+					{ required: true, message: "产品名称不能为空", trigger: "blur" }
+				],
+			}
+		};
+	},
+	created() {
+		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.mesPrepareDetailList[0].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;
+    // },
+	// 生成表头序号
+    indexMethod(index){
+      return index+1 ;
+    },
+		/** 查询备料单列表 */
+		getList() {
+			this.loading = true;
+			listPrepare(this.queryParams).then(response => {
+				this.prepareList = response.rows;
+				this.total = response.total;
+				this.loading = false;
+			});
+		},
+		// 取消按钮
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		// 表单重置
+		reset() {
+			this.form = {
+				prepareId: null,
+				workorderCode: null,
+				workorderName: null,
+				parentOrder: null,
+				orderId: null,
+				orderCode: null,
+				productId: null,
+				productCode: null,
+				prodType: null,
+				productName: null,
+				productSpc: null,
+				wetDetailPlanId: null,
+				productDate: null,
+				shiftId: null,
+				ancestors: null,
+				status: null,
+				remark: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				createBy: null,
+				createTime: null,
+				updateBy: null,
+				updateTime: null,
+				factoryCode: null
+			};
+			this.resetForm("form");
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNum = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm("queryForm");
+			this.handleQuery();
+		},
+		// 多选框选中数据
+		handleSelectionChange(selection) {
+			this.ids = selection.map(item => item.prepareId)
+			this.single = selection.length!==1
+			this.multiple = !selection.length
+      this.selectPrepare = selection
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = "添加备料单";
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const prepareId = row.prepareId || this.ids
+			getPrepare(prepareId).then(response => {
+				this.form = response.data;
+				this.open = true;
+				this.title = "修改备料单";
+			});
+		},
+		/** 提交按钮 */
+		submitForm() {
+			this.$refs["form"].validate(valid => {
+				if (valid) {
+					if (this.form.prepareId != null) {
+						updatePrepare(this.form).then(response => {
+							this.$modal.msgSuccess("修改成功");
+							this.open = false;
+							this.getList();
+						});
+					} else {
+						addPrepare(this.form).then(response => {
+							this.$modal.msgSuccess("新增成功");
+							this.open = false;
+							this.getList();
+						});
+					}
+				}
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const prepareIds = row.prepareId || this.ids;
+			this.$modal.confirm('是否确认删除备料单编号为"' + prepareIds + '"的数据项？').then(function() {
+				return delPrepare(prepareIds);
+			}).then(() => {
+				this.getList();
+				this.$modal.msgSuccess("删除成功");
+			}).catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			this.download('mes/prepare/export', {
+				...this.queryParams
+			}, `prepare_${new Date().getTime()}.xlsx`)
+		}
+	}
+};
+</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>