From ec8dae6ae946cf63f80b2f375ce5caf2a134c53e Mon Sep 17 00:00:00 2001
From: A0010407 <KHD@202305>
Date: Thu, 29 Aug 2024 14:35:49 +0800
Subject: [PATCH] =?UTF-8?q?2024-08-29=20MES-=E8=87=AA=E6=A3=80=E4=BA=92?=
 =?UTF-8?q?=E6=A3=80=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mes/selfMutualInspection.js          |  47 ++
 src/views/mes/selfMutualInspection/index.vue | 517 +++++++++++++++++++
 2 files changed, 564 insertions(+)
 create mode 100644 src/api/mes/selfMutualInspection.js
 create mode 100644 src/views/mes/selfMutualInspection/index.vue

diff --git a/src/api/mes/selfMutualInspection.js b/src/api/mes/selfMutualInspection.js
new file mode 100644
index 00000000..dde9852f
--- /dev/null
+++ b/src/api/mes/selfMutualInspection.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 查询自检互检列表
+export function listSelfMutualInspection(query) {
+  return request({
+    url: '/mes/inspectionReport/selfMutualInspectionList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询自检互检上方和下方数据
+export function getSelfMutualInspectionData(query) {
+  return request({
+    url: '/mes/inspectionReport/selfMutualInspectionData',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询组线列表
+export function getLineCodeList(query) {
+  return request({
+    url: '/mes/inspectionReport/getLineCodeList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询首检左侧
+export function listFirstInspectionLeft(query) {
+  return request({
+    url: '/mes/inspectionReport/listFirstInspectionLeft',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询首检右侧
+export function listFirstInspectionRight(query) {
+  return request({
+    url: '/mes/inspectionReport/listFirstInspectionRight',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/views/mes/selfMutualInspection/index.vue b/src/views/mes/selfMutualInspection/index.vue
new file mode 100644
index 00000000..b6dcf7eb
--- /dev/null
+++ b/src/views/mes/selfMutualInspection/index.vue
@@ -0,0 +1,517 @@
+<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="10">
+            <div>生产车间:黑蚊香车间</div>
+            <br />
+          </el-col>
+          <el-col :span="9">
+            <div>产品名称: {{ headerParameters.productName }}</div>
+            <br />
+          </el-col>
+          <el-col :span="5">
+            <div>检查人: {{ headerParameters.checkPeople }}</div>
+            <br />
+          </el-col>
+          <el-col :span="10">
+            <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="9">
+            <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="5">
+            <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>
+
+      <div>
+        <table class="bordered-table">
+          <tr>
+            <th v-for="item in tableTittle0" style="width:300px" :key="item.key">
+              {{ item.label }}
+            </th>
+            <!-- 动态渲染列名 -->
+            <th v-for="item in tableTittle" :key="item.key" :width = tableTittleWidth >
+              {{ item.label }}
+            </th>
+          </tr>
+
+          <tr>
+            <!-- 动态渲染列名 -->
+            <th v-for="(index, key) in tableData[0]" :key="key">{{ key }}</th>
+          </tr>
+
+          <tr v-for="item in tableData" :key="item.id">
+            <!-- 动态渲染列值 -->
+            <td columnspan="1" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+
+          <tr>
+            <td colspan = "1">异常处理</td>
+            <td :colspan = propertyNum>{{ headerParameters.bz }}</td>
+          </tr>
+            <!-- <tr>
+              <td colspan = "1">备注</td>
+              <td :colspan = propertyNum>{{ headerParameters.remark }}</td>
+            </tr> -->
+        </table>
+      </div>
+      <br />
+      <div>
+        备注:{{ headerParameters.remark }}
+      </div>
+    </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="9">
+          <div class="text-print">
+            生产产线: {{ headerParameters.lineCode }}
+          </div>
+          <br />
+        </el-col>
+        <el-col :span="4">
+          <div class="text-print">
+            检查人: {{ headerParameters.checkPeople }}
+          </div>
+          <br />
+        </el-col>
+        <el-col :span="20">
+          <div class="text-print">
+            产品名称: {{ headerParameters.productName }}
+          </div>
+          <br />
+        </el-col>
+        <el-col :span="4">
+          <div class="text-print">
+            检查日期: {{ headerParameters.checkDate }}
+          </div>
+          <br />
+        </el-col>
+      </el-row>
+      <row>
+        <el-col :span="24">
+          <table class="bordered-table-print" border="1">
+            <tr>
+            <th v-for="item in tableTittle0" style="width:300px" :key="item.key">
+              {{ item.label }}
+            </th>
+            <!-- 动态渲染列名 -->
+            <th v-for="item in tableTittle" :key="item.key" :width = tableTittleWidth >
+              {{ item.label }}
+            </th>
+          </tr>
+
+            <tr>
+              <th v-for="(index, key) in tableData[0]" :key="key">
+                {{ key }}
+              </th>
+            </tr>
+
+            <tr v-for="item in tableData" :key="item.id">
+              <td v-for="(value, key) in item" :key="key">{{ value }}</td>
+            </tr>
+
+            <tr>
+              <td colspan = "1">异常处理</td>
+              <td :colspan = propertyNum>{{ headerParameters.bz }}</td>
+            </tr>
+            <!-- <tr>
+              <td colspan = "1">备注</td>
+              <td :colspan = propertyNum>{{ headerParameters.remark }}</td>
+            </tr> -->
+          </table>
+        </el-col>
+      </row>
+      <div class="bottom-remark">
+        备注:{{ headerParameters.remark }}
+      </div>
+    </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 {
+  listSelfMutualInspection,
+  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"],
+      },
+      showPrintPage: false,
+      showTable: false,
+      lineCodeOption: [],
+      propertyNum: null,
+      tableTittle0: [],
+      tableTittle: [],
+      tableTittleWidth: null,
+      tableData: [],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {},
+      //表头参数
+      headerParameters: {
+        reportName: "ConversionReport", //表类型
+        productionWorkshop: null, //生产车间
+        lineCode: null, //生产产线编码
+        checkPeople: null, //检查人
+        productName: null, //产品名称
+        checkDate: null, //检查日期
+        bz: null, //异常处理
+        remark: null, //备注
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+    };
+  },
+  created() {
+    // this.getDate();
+    this.getLineCode();
+    this.getList();
+  },
+  methods: {
+    dynamicWidthStyle(){
+      return { width: `${1000 / this.propertyNum }px`}
+    },
+
+    //预处理
+    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.tableData = [];
+      this.tableTittle = [];
+      this.tableTittle0 = [];
+      this.propertyNum = null;
+      this.loading = true;
+      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 检查日期
+        //生产产线
+      });
+      listSelfMutualInspection(this.headerParameters).then((response) => {
+        this.tableData = response;
+        console.log("this.tableData", this.tableData);
+        this.propertyNum = Object.keys(this.tableData[0]).length - 1; //属性个数
+        this.tableTittle0.push({
+          label: "项目",
+          key: 0,
+        });
+        for (let i = 0; i < this.propertyNum; i++) {
+          this.tableTittle.push({
+            label: "检查时间",
+            key: i + 1,
+          });
+        }
+
+        this.tableTittleWidth = (1000 / (this.propertyNum)) + 'px';
+        console.log(this.tableTittleWidth);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tittle-text {
+  text-align: center;
+  font-size: 25px;
+  font-weight: 800;
+  color: black;
+}
+
+.lanju-logo {
+  margin-top: 15px;
+  margin-left: 15px;
+  height: 50px;
+}
+
+.bordered-table {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 1300px; /* 表格宽度 */
+}
+
+.bordered-table th,
+
+.bordered-table td {
+  border: 1px solid #ddd; /* 边框样式 */
+  padding: 8px; /* 单元格内边距 */
+  text-align: center; /* 文本对齐 */
+}
+
+.bordered-table tr {
+  word-break:break-all;
+  word-wrap:break-word;
+  border-collapse:collapse
+}
+
+.bordered-table-bottom {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 1300px; /* 表格宽度 */
+}
+
+.bordered-table-bottom td {
+  border: 1px solid #ddd; /* 边框样式 */
+  text-align: left; /* 文本对齐 */
+  width: 1300px; /* 表格宽度 */
+}
+
+.bordered-table-tittle0 {
+  width: 300px; /* 表格高度 */
+}
+
+/* 下面是和打印有关系的 */
+.tittle-text-print {
+  text-align: center;
+  font-size: 40px;
+  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: 1300px; /* 表格宽度 */
+}
+
+.bordered-table-print td {
+  text-align: center; /* 文本对齐 */
+  height: 30px; /* 表格高度 */
+}
+
+.bordered-table-bottom-print {
+  border-collapse: collapse; /* 确保边框合并为单一边框 */
+  width: 1300px; /* 表格宽度 */
+}
+
+.bordered-table-bottom-print td {
+  text-align: left; /* 文本对齐 */
+  height: 35px; /* 表格宽度 */
+  width: 1300px; /* 表格高度 */
+}
+
+.bottom-remark {
+  margin-top: 15px;
+}
+
+.bordered-table-print tr {
+  word-break:break-all;
+  word-wrap:break-word;
+  border-collapse:collapse
+}
+</style>
\ No newline at end of file