From 561c92dc678434f0173dee71f3ea68bbc8b9bb6f Mon Sep 17 00:00:00 2001
From: A0010407 <KHD@202305>
Date: Thu, 29 Aug 2024 15:10:26 +0800
Subject: [PATCH] =?UTF-8?q?2024-08-29=20MES-=E9=A6=96=E6=A3=80=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/firstInspection/index.vue | 576 ++++++++++++++++++++++++
 1 file changed, 576 insertions(+)
 create mode 100644 src/views/mes/firstInspection/index.vue

diff --git a/src/views/mes/firstInspection/index.vue b/src/views/mes/firstInspection/index.vue
new file mode 100644
index 0000000..4527895
--- /dev/null
+++ b/src/views/mes/firstInspection/index.vue
@@ -0,0 +1,576 @@
+<template>
+  <div class="app-container">
+    <div id="table" v-show="showTable">
+      <el-form class="print-selfMutualInspection">
+        <el-row>
+          <el-col :span="5">
+            <img src="@/assets/logo/lanjv.png" class="lanju-logo" />
+          </el-col>
+          <el-col class="tittle-text" :span="14">
+            <span>中山榄菊日化实业有限公司</span>
+          </el-col>
+          <el-col :span="5"> </el-col>
+        </el-row>
+        <el-row>
+          <el-col class="tittle-text">
+            <span>产品首检记录表</span>
+          </el-col>
+        </el-row>
+        <br>
+        <el-row>
+          <el-col :span="9">
+            <div>生产车间:黑蚊香车间</div>
+            <br />
+          </el-col>
+          <el-col :span="8">
+            <div>产品名称: {{ headerParameters.productName }}</div>
+            <br />
+          </el-col>
+          <el-col :span="7">
+            <div>检查人: {{ headerParameters.checkPeople }}</div>
+            <br />
+          </el-col>
+          <el-col :span="9">
+            <div>
+              生产产线:
+              <el-select
+                v-model="headerParameters.lineCode"
+                filterable
+                placeholder="请选择产线"
+                style="width: 160px"
+              >
+                <el-option
+                  v-for="item in lineCodeOption"
+                  :key="item.equipmentCode"
+                  :label="item.equipmentName"
+                  :value="item.equipmentCode"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <br />
+          </el-col>
+          <el-col :span="8">
+            <div>
+              检查日期:
+              <el-date-picker
+                clearable
+                v-model="headerParameters.checkDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="请选择检查日期"
+              >
+              </el-date-picker>
+            </div>
+          </el-col>
+          <el-col :span="7">
+            <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-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handlePrintPre"
+              >打印
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <el-row>
+        <el-col :span="12">
+          <table class="bordered-table">
+            <tr>
+            <th v-for="item in leftTableTittle0" style="width:200px" :key="item.key">
+              {{ item.label }}
+            </th>
+            <!-- 动态渲染列名 -->
+            <th v-for="item in leftTableTittle" :key="item.key" :width = leftTableTittleWidth >
+              {{ item.label }}
+            </th>
+          </tr>
+
+            <tr>
+              <!-- 动态渲染列名 -->
+              <th v-for="(index, key) in leftTableData[0]" :key="key">
+                {{ key }}
+              </th>
+            </tr>
+            <tr v-for="item in leftTableData" :key="item.id">
+              <!-- 动态渲染列值 -->
+              <td v-for="(value, key) in item" :key="key">{{ value }}</td>
+            </tr>
+            <tr>
+              <td colspan = "1">异常处理</td>
+              <td :colspan = leftPropertyNum>{{ headerParameters.bz }}</td>
+            </tr>
+          </table>
+          <div>
+            备注:{{ headerParameters.remark }}
+          </div>
+        </el-col>
+
+        <el-col :span="12">
+          <table class="bordered-table">
+            <tr>
+            <th v-for="item in rightTableTittle0" style="width:200px" :key="item.key">
+              {{ item.label }}
+            </th>
+            <!-- 动态渲染列名 -->
+            <th v-for="item in rightTableTittle" :key="item.key" :width = rightTableTittleWidth >
+              {{ item.label }}
+            </th>
+          </tr>
+
+            <tr>
+              <!-- 动态渲染列名 -->
+              <th v-for="(index, key) in rightTableData[0]" :key="key">
+                {{ key }}
+              </th>
+            </tr>
+            <tr v-for="item in rightTableData" :key="item.id">
+              <!-- 动态渲染列值 -->
+              <td v-for="(value, key) in item" :key="key">{{ value }}</td>
+            </tr>
+            <tr>
+              <td colspan = "1">异常处理</td>
+              <td :colspan = rightPropertyNum>{{ headerParameters.bz }}</td>
+            </tr>
+          </table>
+          <div>
+            备注:{{ headerParameters.remark }}
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div id="printPage" v-show="showPrintPage">
+      <br />
+      <br />
+      <br />
+      <el-row>
+        <el-col :span="5">
+          <img src="@/assets/logo/lanjv.png" class="lanju-logo-print" />
+        </el-col>
+        <el-col class="tittle-text-print" :span="14">
+          <span>中山榄菊日化实业有限公司</span>
+        </el-col>
+        <el-col :span="5"> </el-col>
+      </el-row>
+      <el-row>
+        <el-col class="tittle-text-print">
+          <span>产品首检记录表</span>
+        </el-col>
+      </el-row>
+      <br>
+      <br>
+      <br>
+      <el-row>
+        <el-col :span="11">
+          <div class="text-print">生产车间:黑蚊香车间</div>
+          <br />
+        </el-col>
+        <el-col :span="8">
+          <div class="text-print" >生产产线: {{ headerParameters.lineCode }}</div>
+          <br />
+        </el-col>
+        <el-col :span="5">
+          <div class="text-print">检查人: {{ headerParameters.checkPeople }}</div>
+          <br />
+        </el-col>
+        <el-col :span="19">
+          <div class="text-print">产品名称: {{ headerParameters.productName }}</div>
+          <br />
+        </el-col>
+        <el-col :span="5">
+          <div class="text-print">检查日期: {{ headerParameters.checkDate }}</div>
+          <br />
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <table class="bordered-table-print" border="1">
+            <tr>
+            <th v-for="item in leftTableTittle0" style="width:200px" :key="item.key">
+              {{ item.label }}
+            </th>
+            <!-- 动态渲染列名 -->
+            <th v-for="item in leftTableTittle" :key="item.key" :width = leftPrintTittleWidth >
+              {{ item.label }}
+            </th>
+          </tr>
+
+            <tr>
+              <th v-for="(index, key) in leftTableData[0]" :key="key">
+                {{ key }}
+              </th>
+            </tr>
+            <tr v-for="item in leftTableData" :key="item.id">
+              <td v-for="(value, key) in item" :key="key">{{ value }}</td>
+            </tr>
+            <tr>
+              <td colspan = "1">异常处理</td>
+              <td :colspan = leftPropertyNum>{{ headerParameters.bz }}</td>
+            </tr>
+          </table>
+          <div>
+            备注:{{ headerParameters.remark }}
+          </div>
+        </el-col>
+
+        <el-col :span="12">
+          <table class="bordered-table-print" border="1">
+            <tr>
+            <th v-for="item in rightTableTittle0" style="width:200px" :key="item.key">
+              {{ item.label }}
+            </th>
+            <!-- 动态渲染列名 -->
+            <th v-for="item in rightTableTittle" :key="item.key" :width = rightPrintTittleWidth >
+              {{ item.label }}
+            </th>
+          </tr>
+
+            <tr>
+              <th v-for="(index, key) in rightTableData[0]" :key="key">
+                {{ key }}
+              </th>
+            </tr>
+            <tr v-for="item in rightTableData" :key="item.id">
+              <td v-for="(value, key) in item" :key="key">{{ value }}</td>
+            </tr>
+            <tr>
+              <td colspan = "1">异常处理</td>
+              <td :colspan = rightPropertyNum>{{ headerParameters.bz }}</td>
+            </tr>
+          </table>
+          <div>
+            备注:{{ headerParameters.remark }}
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+
+    <!-- <el-table :data="tableData">
+      <el-table-column
+        v-for="(value, key) in tableData"
+        :key="key"
+        :prop="value"
+        :label="value"
+      >
+      </el-table-column>
+    </el-table>
+  --></div>
+</template>
+
+<script>
+import {
+  listFirstInspectionLeft,
+  listFirstInspectionRight,
+  getSelfMutualInspectionData,
+  getLineCodeList,
+} from "@/api/mes/selfMutualInspection";
+
+export default {
+  name: "Item",
+  dicts: ["device_item_type", "device_loop_type"],
+  data() {
+    return {
+      printData: {
+        printable: "printPage",
+        ignore: ["no-print"],
+      },
+      lineCodeOption: [],
+      leftPropertyNum: null,
+      leftTableData: [],
+      leftTableTittle0: [],
+      leftTableTittle: [],
+      rightPropertyNum: null,
+      rightTableData: [],
+      rightTableTittle: [],
+      rightTableTittle0: [],
+      leftTableTittleWidth: null,
+      rightTableTittleWidth: null,
+      leftPrintTittleWidth: null,
+      rightPrintTittleWidth: null,
+      showPrintPage: false,
+      showTable: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {},
+      //表头参数
+      headerParameters: {
+        productionWorkshop: null, //生产车间
+        reportName: 'ConversionReportRight', //表类型
+        lineCode: null, //生产产线编码
+        checkPeople: null, //检查人
+        productName: null, //产品名称
+        checkDate: null, //检查日期
+        bz: null, //异常处理
+        remark: null, //备注
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+    };
+  },
+  created() {
+    // this.getDate();
+    this.getLineCode();
+    this.getList();
+  },
+  methods: {
+    //预处理
+    handlePrintPre() {
+      this.showTable = false;//页面上的表格不显示
+      this.showPrintPage = true;//打印的表格显示
+      this.$nextTick(() => {
+        this.handlePrint()
+      })
+    },
+
+    //真正打印
+    handlePrint() {
+      printJS({
+        printable: this.printData.printable, // 'printPage', // 标签元素id
+        type: this.printData.type || "html",
+        maxWidth: 1500, // 最大宽度
+        font_size: "", // 设置字体大小
+        header: this.printData.header, // '表单',
+        targetStyles: ["*"],
+        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
+        ignoreElements: this.printData.ignore || [], // ['no-print']
+        properties: this.printData.properties || null,
+      });
+      this.showTable = true;//页面上的表格显示
+      this.showPrintPage = false;//打印的表格不显示
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      if (this.headerParameters.lineCode == null) {
+        this.$modal.msg("您没有选择生产产线，请选择！");
+      } else if (this.headerParameters.checkDate == null) {
+        this.$modal.msg("您没有选择检查时间，请选择！");
+      } else {
+        this.getList();
+      }
+    },
+
+    getLineCode() {
+      getLineCodeList().then((response) => {
+        this.lineCodeOption = response;
+      });
+    },
+
+    /**获取默认查询时间段**/
+    // getDate() {
+    // 	let start = this.Fungetdate (0)
+    // 	this.headerParameters.checkDate = start;
+    // },
+    // 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;
+    // },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      (this.headerParameters.productionWorkshop = null), //生产车间
+        (this.headerParameters.lineCode = null), //生产产线
+        (this.headerParameters.checkPeople = null), //检查人
+        (this.headerParameters.productName = null), //产品名称
+        (this.headerParameters.checkDate = null), //检查日期
+        (this.headerParameters.bz = null), //异常处理
+        (this.headerParameters.remark = null), //备注
+        // this.getDate();
+        this.getList();
+    },
+
+    /** 查询检查项维护列表 */
+    getList() {
+      this.showTable = true;//页面上的表格显示
+      this.showPrintPage = false;//打印的表格不显示
+      this.leftTableData = [];
+      this.leftTableTittle = [];
+      this.leftTableTittle0 = [];
+      getSelfMutualInspectionData(this.headerParameters).then((response) => {
+        this.headerParameters.checkPeople = response.createBy; //检查人
+        this.headerParameters.productName = response.productName; //产品名称
+        this.headerParameters.remark = response.remark; //备注
+        this.headerParameters.bz = response.bz; //异常处理
+        //this.headerParameters.checkDate = response.checkDate 检查日期
+        //生产产线
+      });
+
+      listFirstInspectionLeft(this.headerParameters).then((response) => {
+        this.leftTableData = response;
+        this.leftPropertyNum = Object.keys(this.leftTableData[0]).length - 1; //属性个数
+        console.log('leftPropertyNum',this.leftPropertyNum);
+        this.leftTableTittleWidth = (440 / (this.leftPropertyNum)) + 'px';
+        this.leftPrintTittleWidth = (400 / (this.leftPropertyNum)) + 'px';
+
+        this.leftTableTittle0.push({
+          label: "项目",
+          key: 0,
+        });
+
+        for (let i = 0; i < this.leftPropertyNum; i++) {
+          this.leftTableTittle.push({
+            label: "检查时间",
+            key: i + 1,
+          });
+        }
+      });
+
+      this.rightTableData = [];
+      this.rightTableTittle = [];
+      this.rightTableTittle0 = [];
+
+      listFirstInspectionRight(this.headerParameters).then((response) => {
+        this.rightTableData = response;
+        this.rightPropertyNum = Object.keys(this.rightTableData[0]).length - 1; //属性个数
+        this.rightTableTittleWidth = (440 / (this.rightPropertyNum)) + 'px';
+        this.rightPrintTittleWidth = (400 / (this.leftPropertyNum)) + 'px';
+
+        this.rightTableTittle0.push({
+          label: "项目",
+          key: 0,
+        });
+
+        for (let i = 0; i < this.rightPropertyNum; i++) {
+          this.rightTableTittle.push({
+            label: "检查时间",
+            key: i + 1,
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tittle-text {
+  text-align: center;
+  font-size: 30px;
+  font-weight: 800;
+  color: black;
+}
+.lanju-logo {
+  margin-top: 15px;
+  margin-left: 15px;
+  height: 50px;
+}
+
+.bordered-table {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 640px; /* 表格宽度 */
+}
+.bordered-table th,
+.bordered-table td {
+  border: 1px solid #ddd; /* 边框样式 */
+  padding: 8px; /* 单元格内边距 */
+  text-align: center; /* 文本对齐 */
+}
+.bordered-table-bottom {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 640px; /* 表格宽度 */
+}
+.bordered-table-bottom td {
+  border: 1px solid #ddd; /* 边框样式 */
+  text-align: left; /* 文本对齐 */
+  width: 640px; /* 表格宽度 */
+  height: 35px; /* 表格高度 */
+}
+
+.bordered-table tr {
+  word-break:break-all;
+  word-wrap:break-word;
+  font-size: 12px;
+  border-collapse:collapse 
+}
+
+/* 下面是和打印有关系的 */
+.tittle-text-print {
+  text-align: center;
+  font-size: 50px;
+  font-weight: 800;
+  color: black;
+}
+.lanju-logo-print {
+  margin-top: 15px;
+  margin-left: 15px;
+  height: 75px;
+}
+
+.text-print {
+  text-align: left;
+  font-size: 20px;
+  color: black;
+}
+
+.bordered-table-print {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 600px; /* 表格宽度 */
+}
+.bordered-table-print td {
+  text-align: center; /* 文本对齐 */
+}
+
+.bordered-table-bottom-print {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 600px; /* 表格宽度 */
+}
+.bordered-table-bottom-print td{
+  text-align: left; /* 文本对齐 */
+  height: 35px; /* 表格宽度 */
+  width: 600px; /* 表格高度 */
+}
+
+.bordered-table-print tr {
+  word-break:break-all;
+  word-wrap:break-word;
+  font-size: 12px;
+  height: 35px; /* 表格高度 */
+  border-collapse:collapse
+}
+</style>