<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="left">
        <div class="topButton">
          <div class="topDiv">
            <el-date-picker
              v-model="searchDate"
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="margin-right: 15px;margin-top: 10px;width: 140px;"
              @change="getProductType()" />
          </div>
          <el-button
            type="info"
            size="small"
            icon="el-icon-download"
            style="height: 35px;margin-top:8px;padding-left:8px;padding-right:8px"
            @click="exportExcel()">导出</el-button>
          <el-button
            type="info"
            size="small"
            icon="el-icon-download"
            style="height: 35px;margin-top:8px;padding-left:8px;padding-right:8px"
            @click="exportExcelAll()">全部导出</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :cell-class-name="tableRowClassName"
          class="main"
          tooltip-effect="dark"
          style="width: 100%"
          height="770px"
          border
          size="mini"
          highlight-current-row
          @row-click="cutTableData">
          <el-table-column type="index" width="40" label="序号" align="center" />
          <el-table-column align="center" label="订单号">
            <template slot-scope="scope">
              {{ scope.row.订单号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品型号">
            <template slot-scope="scope">
              {{ scope.row.产品型号 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="完成时间">
            <template slot-scope="scope">
              {{ scope.row.下线时间 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="tabData">
        <table
          class="table"
          cellpadding="20"
          cellspacing="0"
          width="100%"
          align="center"
          style="border-collapse:collapse;">
          <!-- 1 -->
          <tr class="thickTr">
            <td rowspan="2" colspan="2"> <img :src="require('@/assets/img/SiyuanLOGO.png')"> </td>
            <!-- <td /> -->
            <td rowspan="2" colspan="7">制程-分装检验报告</td>
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <td>保密：内部</td>
          </tr>
          <!-- 2 -->
          <tr class="thickTr">
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <!-- <td /> -->
            <td />

          </tr>
          <!-- 3  定大小行-->
          <tr>
            <td style="width: 100px;" />
            <td style="width: 220px;" />
            <td style="width: 360px;" />
            <td style="width: 120px;" />
            <td style="width: 120px;" />
            <td style="width: 120px;" />
            <td style="width: 120px;" />
            <td style="width: 120px;" />
            <td style="width: 120px;" />
            <td style="width: 300px;" />
          </tr>
          <!-- 4 -->
          <tr class="leftTr">
            <td colspan="2">SN号:{{ clickData.订单号 }}
              <!-- <el-input v-if="isEdit1" v-model="clickData.订单号" placeholder="请输入内容" clearable /> -->
            </td>
            <!-- <td /> -->
            <!--<td colspan="3">检验单号： {{ isEdit1 ? "" : clickData.检验单号 }}-->
            <!--  <el-input v-if="isEdit1" v-model="clickData.检验单号" placeholder="请输入内容" clearable />-->
            <!--</td>-->
            <!-- <td /> -->
            <!-- <td /> -->
            <td colspan="4" />
            <td />
            <td />
            <td />
            <td />
          </tr>
          <!-- 5 -->
          <tr class="leftTr">
            <td colspan="2">产品描述：{{ isEdit1 ? "" : clickData.产品描述 }}
              <el-input v-if="isEdit1" v-model="clickData.产品描述" placeholder="请输入内容" clearable />
            </td>
            <!-- <td /> -->
            <!--<td colspan="3">产品图号:{{ isEdit1 ? "" : clickData.产品图号 }}-->
            <!--  <el-input v-if="isEdit1" v-model="clickData.产品图号" placeholder="请输入内容" clearable />-->
            <!--</td>-->
            <!-- <td /> -->
            <!-- <td /> -->
            <td colspan="3">
              <!--              工序名称：{{ isEdit1 ? "" : clickData.工序名称 }}-->
              <!--              <el-input v-if="isEdit1" v-model="clickData.工序名称" placeholder="请输入内容" clearable />-->
              间隔号：{{ isEdit1 ? "" : clickData.间隔号 }}
            </td>
            <!-- <td /> -->
            <!-- <td /> -->
            <td colspan="2">电压等级：{{ isEdit1 ? "" : clickData.电压等级 }}
              <el-input v-if="isEdit1" v-model="clickData.电压等级" placeholder="请输入内容" clearable />
            </td>
            <td />
            <td />
            <td />
          </tr>
          <!-- 6 -->
          <tr class="leftTr">
            <td colspan="2">工程编号：{{ isEdit1 ? "" : clickData.工程编号 }}
              <el-input v-if="isEdit1" v-model="clickData.工程编号" placeholder="请输入内容" clearable />
            </td>
            <!-- <td /> -->
            <td colspan="4">工程名称: {{ isEdit1 ? "" : clickData.工程名称 }}
              <el-input v-if="isEdit1" v-model="clickData.工程名称" placeholder="请输入内容" clearable />
            </td>
            <!-- <td /> -->
            <!-- <td /> -->
            <td colspan="3">
              <!-- 设备编号：{{ isEdit1 ? "" : clickData.设备编号 }} -->
              <!-- <el-input v-if="isEdit1" v-model="clickData.设备编号" placeholder="请输入内容" clearable /> -->
            </td>
            <!-- <td /> -->
            <!-- <td /> -->
            <td colspan="1">
              <!-- 设备型号：{{ isEdit1 ? "" : clickData.设备型号 }} -->
              <!-- <el-input v-if="isEdit1" v-model="clickData.设备型号" placeholder="请输入内容" clearable /> -->
            </td>
            <!-- <td /> -->
          </tr>
          <!-- 7 -->
          <tr class="leftTr">
            <td colspan="2">检验日期：{{ isEdit1 ? "" : clickData.检验日期 ? clickData.检验日期.replace('00:00:00', '') : '' }}
              <!-- <el-input v-if="isEdit1" v-model="clickData.检验日期" placeholder="请输入内容" clearable /> -->
              <el-date-picker
                v-if="isEdit1"
                v-model="clickData.检验日期"
                size="small"
                type="date"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="选择检验日期" />
            </td>
            <!-- <td /> -->
            <!--<td>使用环境：{{ isEdit1 ? "" : clickData.使用环境 }}-->
            <!--  <el-input v-if="isEdit1" v-model="clickData.使用环境" placeholder="请输入内容" clearable />-->
            <!--</td>-->
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr>
          <!-- 8 -->
          <tr class="">
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />

          </tr>
          <!-- 检验列表 -->
          <tr>
            <td colspan="10">
              <!-- 限高零件记录 -->
              <div class="overDataBox">
                <!-- 9 -->
                <tr class="thickTr">
                  <td>序号</td>
                  <td>检验项目组</td>
                  <td>检验项目描述</td>
                  <td>检验类型</td>
                  <td>员工姓名</td>
                  <td>标准值</td>
                  <td>单位</td>
                  <td>实测值</td>
                  <td>上限值</td>
                  <td>下限值</td>
                  <td>检验结果</td>
                  <td>说明</td>
                </tr>
                <!-- 测量值 -->
                <tr v-for="(item, index) in selectMassData" class="thickTr">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.检验项目组 }}</td>
                  <td>{{ item.检验项目描述 }}</td>
                  <td>{{ item.检验类型 }}</td>
                  <td>{{ item.员工姓名 }}</td>
                  <td>{{ item.标准值 }}</td>
                  <td>{{ item.单位 }}</td>
                  <td>{{ item.实测值 }}</td>
                  <td>{{ item.上限值 }}</td>
                  <td>{{ item.下限值 }}</td>
                  <td>{{ item.检验结果 }}</td>
                  <td>{{ item.说明 }}</td>
                </tr>
                <!-- 3  定大小行-->
                <tr>
                  <td style="width: 100px;" />
                  <td style="width: 220px;" />
                  <td style="width: 360px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 300px;" />
                </tr>
              </div>
            </td>
          </tr>

          <!-- 空行 -->
          <tr v-for="index in 3">
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr>
          <!-- 10 -->
          <tr class="">
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr>
          <!-- 11 -->
          <tr class="thickTr">
            <td colspan="10">关键零部件记录页</td>
            <!-- <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td /> -->
          </tr>
          <!-- 限高零件记录 -->
          <tr>
            <td colspan="10">
              <!-- 限高零件记录 -->
              <div class="overDataBox">
                <!-- 12 -->
                <tr class="thickTr">
                  <td>序号</td>
                  <td>类别</td>
                  <td>零部件名称</td>
                  <td colspan="2">零部件图号</td>
                  <td colspan="3">零部件编号</td>
                  <td colspan="2">说明</td>
                </tr>
                <!-- 零件数据 -->
                <tr v-for="(item, index) in selectPartsData" style="height:30px" class="thickTr">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.类别 }}</td>
                  <td>{{ item.零部件名称 }}</td>
                  <td colspan="2">{{ item.零部件图号 }}</td>
                  <td colspan="3">{{ item.零部件编号 }}</td>
                  <td colspan="2">{{ item.说明 }}</td>
                </tr>
                <!-- 3  定大小行-->
                <tr>
                  <td style="width: 100px;" />
                  <td style="width: 220px;" />
                  <td style="width: 360px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 120px;" />
                  <td style="width: 300px;" />
                </tr>
              </div>
            </td>
          </tr>

          <!-- 空行 -->
          <!-- <tr v-for="index in 3">
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr> -->
          <!-- 13 -->
          <tr class="thickTr">
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr>
          <!-- 14 -->
          <tr class="leftTr thickTr">
            <td colspan="3">制单人：{{ isEdit2 ? "" : clickData.制单人 }}
              <el-input v-if="isEdit2" v-model="clickData.制单人" placeholder="请输入内容" clearable />
            </td>
            <td colspan="4">版本号：{{ isEdit2 ? "" : clickData.版本号 }}
              <el-input v-if="isEdit2" v-model="clickData.版本号" placeholder="请输入内容" clearable />
            </td>
            <td colspan="3">保存期限：{{ isEdit2 ? "" : clickData.保存期限 }}
              <el-input v-if="isEdit2" v-model="clickData.保存期限" placeholder="请输入内容" clearable />
            </td>
            <!-- <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td /> -->
          </tr>
          <!-- 15 -->
          <tr class="leftTr thickTr">
            <td colspan="3">制单日期：{{ isEdit2 ? "" : clickData.制单日期 ? clickData.制单日期.replace('00:00:00', '') : "" }}
              <!-- <el-input v-if="isEdit2" v-model="clickData.制单日期" placeholder="请输入内容" clearable /> -->
              <el-date-picker
                v-if="isEdit2"
                v-model="clickData.制单日期"
                size="small"
                type="date"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="选择制单日期" />
            </td>
            <!--<td colspan="4">表单编号：{{ isEdit2 ? "" : clickData.表单编号 }}-->
            <!--  <el-input v-if="isEdit2" v-model="clickData.表单编号" placeholder="请输入内容" clearable />-->
            <!--</td>-->
            <!--<td colspan="3">页码：{{ isEdit2 ? "" : clickData.页码 }}-->
            <!--  <el-input v-if="isEdit2" v-model="clickData.页码" placeholder="请输入内容" clearable />-->
            <!--</td>-->
            <!-- <td />
            <td />
            <td />
            <td />
            <td /> -->
            <td colspan="4" />
            <td colspan="3"/>
          </tr>
          <!-- 空行 -->
          <tr v-for="index in 2">
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr>
        </table>
      </div>
      <div class="right">
        <div class="editTop">
          <el-button
            v-if="!isEdit1"
            :disabled="clickData.MID == ''"
            style="top:100px"
            type="distribution"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="edit1()">修改</el-button>
          <el-button
            v-if="isEdit1"
            :disabled="clickData.MID == ''"
            style="top:100px"
            type="distribution"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="cancel1()">取消</el-button>
          <el-button
            v-if="isEdit1"
            style="top:150px"
            type="primary"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="save1()">保存</el-button>
        </div>
        <div class="editBottom">
          <el-button
            v-if="!isEdit2"
            :disabled="clickData.MID == ''"
            style="bottom:150px"
            type="distribution"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="edit2()">修改</el-button>
          <el-button
            v-if="isEdit2"
            :disabled="clickData.MID == ''"
            style="bottom:150px"
            type="distribution"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="cancel2()">取消</el-button>
          <el-button
            v-if="isEdit2"
            style="bottom:100px"
            type="primary"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="save2()">保存</el-button>
        </div>
      </div>

    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" title="表头信息新增" center style="min-height: 200px;" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="110px">
        <!-- <el-form-item label="机型:" prop="engineTypeValue" style="display: inline-block">
          <el-select v-model="form.engineTypeValue" placeholder="请选择产品型号" clearable size="small">
            <el-option v-for="item in engineType1" :key="item.label" :label="item.label" :value="item.value"
              size="mini" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="SN号:" prop="sn" style="display: inline-block">
          <el-input v-model="form.sn" clearable size="small" placeholder="请输入SN号" />
        </el-form-item>
        <el-form-item label="检验单号:" prop="singleNumber" style="display: inline-block">
          <el-input v-model="form.singleNumber" clearable size="small" placeholder="请输入检验单号" />
        </el-form-item>
        <el-form-item label="产品描述:" prop="describe" style="display: inline-block">
          <el-input v-model="form.describe" clearable size="small" placeholder="请输入产品描述" />
        </el-form-item>
        <el-form-item label="产品图号:" prop="mapNumber" style="display: inline-block">
          <el-input v-model="form.mapNumber" clearable size="small" placeholder="请输入产品图号" />
        </el-form-item>
        <el-form-item label="工序名称:" prop="processName" style="display: inline-block">
          <el-input v-model="form.processName" clearable size="small" placeholder="请输入工序名称" />
        </el-form-item>
        <el-form-item label="电压等级:" prop="voltageRating" style="display: inline-block">
          <el-input v-model="form.voltageRating" clearable size="small" placeholder="请输入电压等级" />
        </el-form-item>
        <el-form-item label="工程编号:" prop="projectNumber" style="display: inline-block">
          <el-input v-model="form.projectNumber" clearable size="small" placeholder="请输入工程编号" />
        </el-form-item>
        <el-form-item label="工程名称:" prop="projectName" style="display: inline-block">
          <el-input v-model="form.projectName" clearable size="small" placeholder="请输入工程名称" />
        </el-form-item>
        <el-form-item label="设备编号:" prop="unitNumber" style="display: inline-block">
          <el-input v-model="form.unitNumber" clearable size="small" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备型号:" prop="unitType" style="display: inline-block">
          <el-input v-model="form.unitType" clearable size="small" placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="检验日期:" prop="testDate" style="display: inline-block">
          <!-- <el-input v-model="form.testDate" clearable size="small" placeholder="请输入检验日期" /> -->
          <el-date-picker v-model="form.testDate" size="small" type="date" value-format="yyyy-MM-dd" placeholder="选择检验日期" />
        </el-form-item>
        <el-form-item label="使用环境:" prop="environment" style="display: inline-block">
          <el-select v-model="form.environment" placeholder="请选择使用环境" clearable size="small">
            <el-option v-for="item in environment1" :key="item.label" :label="item.label" :value="item.value" size="mini" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button type="primary" size="small" @click="addRhythm('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible1" title="表头信息编辑" center style="min-height: 200px;" width="400px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-position="right" label-width="110px">
        <el-form-item label="SN号:" prop="sn" style="display: inline-block">
          <el-input v-model="editForm.sn" clearable size="small" placeholder="请输入SN号" />
        </el-form-item>
        <el-form-item label="检验单号:" prop="singleNumber" style="display: inline-block">
          <el-input v-model="editForm.singleNumber" clearable size="small" placeholder="请输入检验单号" />
        </el-form-item>
        <el-form-item label="产品描述:" prop="describe" style="display: inline-block">
          <el-input v-model="editForm.describe" clearable size="small" placeholder="请输入产品描述" />
        </el-form-item>
        <el-form-item label="产品图号:" prop="mapNumber" style="display: inline-block">
          <el-input v-model="editForm.mapNumber" clearable size="small" placeholder="请输入产品图号" />
        </el-form-item>
        <el-form-item label="工序名称:" prop="processName" style="display: inline-block">
          <el-input v-model="editForm.processName" clearable size="small" placeholder="请输入工序名称" />
        </el-form-item>
        <el-form-item label="电压等级:" prop="voltageRating" style="display: inline-block">
          <el-input v-model="editForm.voltageRating" clearable size="small" placeholder="请输入电压等级" />
        </el-form-item>
        <el-form-item label="工程编号:" prop="projectNumber" style="display: inline-block">
          <el-input v-model="editForm.projectNumber" clearable size="small" placeholder="请输入工程编号" />
        </el-form-item>
        <el-form-item label="工程名称:" prop="projectName" style="display: inline-block">
          <el-input v-model="editForm.projectName" clearable size="small" placeholder="请输入工程名称" />
        </el-form-item>
        <el-form-item label="设备编号:" prop="unitNumber" style="display: inline-block">
          <el-input v-model="editForm.unitNumber" clearable size="small" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备型号:" prop="unitType" style="display: inline-block">
          <el-input v-model="editForm.unitType" clearable size="small" placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="检验日期:" prop="testDate" style="display: inline-block">
          <!-- <el-input v-model="form.testDate" clearable size="small" placeholder="请输入检验日期" /> -->
          <el-date-picker
            v-model="editForm.testDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择检验日期" />
        </el-form-item>
        <el-form-item label="使用环境:" prop="environment" style="display: inline-block">
          <el-select v-model="editForm.environment" placeholder="请选择使用环境" clearable size="small">
            <el-option v-for="item in environment1" :key="item.label" :label="item.label" :value="item.value" size="mini" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button type="primary" size="small" @click="submitEdit('editForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rhythm: '',
      engineTypeValue1: '',
      engineType1: [],
      tableData: [], // 总数据数组
      stationNumber: [],
      stationNumberValue: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      searchDate: '',
      isEdit1: false,
      isEdit2: false,
      // 质量数据列表
      selectMassData: [],
      // 零件数据列表
      selectPartsData: [],
      form: {
        sn: '',
        singleNumber: '',
        describe: '',
        mapNumber: '',
        processName: '',
        voltageRating: '',
        projectNumber: '',
        projectName: '',
        unitNumber: '',
        unitType: '',
        testDate: '',
        environment: ''
      },
      editForm: {
        id: '',
        sn: '',
        singleNumber: '',
        describe: '',
        mapNumber: '',
        processName: '',
        voltageRating: '',
        projectNumber: '',
        projectName: '',
        unitNumber: '',
        unitType: '',
        testDate: '',
        environment: ''
      },
      // 渲染在表格上的数据
      clickData: {
        'MID': '',
        '工厂': '',
        '工作中心': '',
        '订单号': '',
        '客户代码': '',
        '机型代码': '',
        '产品型号': '',
        '计划数量': '',
        '完成数量': '',
        '合格数量': '',
        '报废数量': '',
        '计划开始时间': '',
        '计划完成时间': '',
        '部装开始时间': '',
        '总装开始时间': '',
        '订单状态': '',
        '启动状态': '',
        '排序': '',
        '是否全部匹配': '',
        'PFEP是否全部存在': '',
        '操作时间': '',
        '是否禁用': '',
        '下发时间': '',
        '总订单号': '',
        '壳体码': '',
        '验证顺序': '',
        '是否匹配': '',
        '是否上线': '',
        '是否合格': '',
        '下线时间': '',
        '加工方式': '',
        '接地方式': '',
        'SN号': '',
        '检验单号': '',
        '产品描述': '',
        '产品图号': '',
        '工序名称': '',
        '电压等级': '',
        '工程编号': '',
        '工程名称': '',
        '设备编号': '',
        '设备型号': '',
        '检验日期': '',
        '使用环境': '',
        '制单人': '',
        '版本号': '',
        '保存期限': '',
        '制单日期': '',
        '表单编号': '',
        '页码': '',
        '间隔号': ''
      },
      environment1: [{
        label: '室内',
        value: '室内'
      }, {
        label: '室外',
        value: '室外'
      }
      ],
      rules: {
        sn: [{ required: true, message: '请输入SN号', trigger: 'blur' }],
        singleNumber: [{ required: true, message: '请输入检验单号', trigger: 'blur' }],
        describe: [{ required: true, message: '请输入产品描述', trigger: 'blur' }],
        mapNumber: [{ required: true, message: '请输入产品图号', trigger: 'blur' }],
        processName: [{ required: true, message: '请输入工序名称', trigger: 'blur' }],
        voltageRating: [{ required: true, message: '请输入电压等级', trigger: 'blur' }],
        projectNumber: [{ required: true, message: '请输入工程编号', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
        unitNumber: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        unitType: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
        testDate: [{ required: true, message: '请选择检验日期', trigger: 'blur' }],
        environment: [{ required: true, message: '请选择使用环境', trigger: 'blur' }]
      },
      editRules: {
        rhythm: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        stationNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请选择机型', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getProductType()
  },
  methods: {
    // 初始化获取产品型号
    getProductType() {
      this.engineType1 = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.engineTypeValue1 = response.data[0].发动机机型标志
        this.searchTable()
        for (let i = 0; i < response.data.length; i++) {
          this.engineType1.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机机型标志
          })
        }
      })
    },
    // 表格颜色变化
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'black'
      } else {
        return 'red'
      }
    },
    // 查询信息
    searchTable() {
      const date = new Date() // 获取时间
      const year = date.getFullYear() // 获取年
      const month = date.getMonth() + 1 // 获取月
      const strDate = date.getDate() // 获取日

      this.tableData = []
      var param = []
      param[0] = ['下线时间', this.searchDate ? this.searchDate : this.searchDate = `${year}-${month}-${strDate}`]
      param[1] = ['下线时间_ischecked', 1]
      var Data = this.CreateData('11', '生产计划_派工订单_查询_表头信息', param)
      this.ExecDatabase(Data).then(response => {
        console.log('生产计划_派工订单_查询_表头信息', response)
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
      })
    },
    add() {
      this.dialogFormVisible = true
    },
    // 点击左侧列表事件，切换表格数据
    cutTableData(row) {
      console.log('leftClick', row)
      if (this.isEdit1 || this.isEdit2) {
        this.$message.error('请先保存修改后进行选择')
        // 将选中样式维持
        this.$refs['multipleTable'].setCurrentRow(this.clickData)
      } else {
        this.clickData = JSON.parse(JSON.stringify(row))
        this.clickData.SN号 = row.订单号
        // 若存在订单号则根据订单号查询数据
        if (row.订单号 != null) {
          var param = []
          param[0] = ['订单号', row.订单号]
          var Data = this.CreateData('11', '质量数据_发动机质量数据_各个工位_报表_质量数据查询', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data.length !== 0) {
              this.selectMassData = response.data
            } else {
              this.selectMassData = []
            }
          })

          var Data2 = this.CreateData('11', '物料数据查询_报表_物料查询', param)
          this.ExecDatabase(Data2).then(response => {
            if (response.data.length !== 0) {
              this.selectPartsData = response.data
            } else {
              this.selectPartsData = []
            }
          })
        } else {
          this.selectMassData = []
          this.selectPartsData = []
        }
      }
    },
    edit1() {
      this.isEdit1 = true
    },
    edit2() {
      this.isEdit2 = true
    },
    cancel1() {
      this.isEdit1 = false
      this.isEdit2 = false
      this.fromTableDataGetClickData()
    },
    cancel2() {
      this.isEdit1 = false
      this.isEdit2 = false
      this.fromTableDataGetClickData()
    },
    save1() {
      this.isEdit1 = false
      this.submitEdit1()
    },
    save2() {
      this.isEdit2 = false
      this.submitEdit2()
    },
    callOff() {
      this.dialogFormVisible = false
      this.dialogFormVisible1 = false
      this.$refs['form'].resetFields()
      this.$refs['editForm'].resetFields()
    },
    // 新增表头
    addRhythm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['SN号', this.form.sn]
          param[1] = ['检验单号', this.form.singleNumber]
          param[2] = ['产品描述', this.form.describe]
          param[3] = ['产品图号', this.form.mapNumber]
          param[4] = ['工序名称', this.form.processName]
          param[5] = ['电压等级', this.form.voltageRating]
          param[6] = ['工程编号', this.form.projectNumber]
          param[7] = ['工程名称', this.form.projectName]
          param[8] = ['设备编号', this.form.unitNumber]
          param[9] = ['设备型号', this.form.unitType]
          param[10] = ['检验日期', this.form.testDate]
          param[11] = ['使用环境', this.form.environment]
          var Data = this.CreateData('12', '表头信息栏_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.searchTable()
            } else {
              this.$message.error('新增失败！')
            }
          })
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 编辑
    edit(row) {
      console.log(row, 'row')
      this.dialogFormVisible1 = true
      this.editForm.id = row.ID
      this.editForm.sn = row.SN号
      this.editForm.singleNumber = row.检验单号
      this.editForm.describe = row.产品描述
      this.editForm.mapNumber = row.产品图号
      this.editForm.processName = row.工序名称
      this.editForm.voltageRating = row.电压等级
      this.editForm.projectNumber = row.工程编号
      this.editForm.projectName = row.工程名称
      this.editForm.unitNumber = row.设备编号
      this.editForm.unitType = row.设备型号
      this.editForm.testDate = row.检验日期
      this.editForm.environment = row.使用环境
    },
    //  提交编辑
    submitEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['id', this.editForm.id]
          param[1] = ['SN号', this.editForm.sn]
          param[2] = ['检验单号', this.editForm.singleNumber]
          param[3] = ['产品描述', this.editForm.describe]
          param[4] = ['产品图号', this.editForm.mapNumber]
          param[5] = ['工序名称', this.editForm.processName]
          param[6] = ['电压等级', this.editForm.voltageRating]
          param[7] = ['工程编号', this.editForm.projectNumber]
          param[8] = ['工程名称', this.editForm.projectName]
          param[9] = ['设备编号', this.editForm.unitNumber]
          param[10] = ['设备型号', this.editForm.unitType]
          param[11] = ['检验日期', this.editForm.testDate]
          param[12] = ['使用环境', this.editForm.environment]
          var Data = this.CreateData('12', '表头信息栏_修改', param)
          this.ExecDatabase(Data).then(response => {
            console.log(response, '修改结果')
            if (response.data[0].result === '1') {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.searchTable()
            } else {
              this.$message.error('编辑失败！')
            }
          })
          this.dialogFormVisible1 = false
        } else {
          return false
        }
      })
    },
    // 提交修改顶部
    submitEdit1() {
      var param = []
      param[0] = ['MID', this.clickData.MID]
      param[1] = ['SN号', this.clickData.SN号]
      param[2] = ['检验单号', this.clickData.检验单号]
      param[3] = ['产品描述', this.clickData.产品描述]
      param[4] = ['产品图号', this.clickData.产品图号]
      param[5] = ['工序名称', this.clickData.工序名称]
      param[6] = ['电压等级', this.clickData.电压等级]
      param[7] = ['工程编号', this.clickData.工程编号]
      param[8] = ['工程名称', this.clickData.工程名称]
      param[9] = ['设备编号', this.clickData.设备编号]
      param[10] = ['设备型号', this.clickData.设备型号]
      param[11] = ['检验日期', this.clickData.检验日期]
      param[12] = ['使用环境', this.clickData.使用环境]
      var Data = this.CreateData('12', '生产计划_派工订单_修改_表头信息_顶部', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, '修改结果')
        if (response.data[0].result === '1') {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.searchTable()
          this.fromTableDataGetClickData()
        } else {
          this.$message.error('编辑失败！')
        }
      })
      // this.dialogFormVisible1 = false
    },
    // 提交修改底部
    submitEdit2() {
      var param = []
      param[0] = ['MID', this.clickData.MID]
      param[1] = ['制单人', this.clickData.制单人]
      param[2] = ['版本号', this.clickData.版本号]
      param[3] = ['保存期限', this.clickData.保存期限]
      param[4] = ['制单日期', this.clickData.制单日期]
      param[5] = ['表单编号', this.clickData.表单编号]
      param[6] = ['页码', this.clickData.页码]
      var Data = this.CreateData('12', '生产计划_派工订单_修改_表头信息_底部', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, '修改结果')
        if (response.data[0].result === '1') {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.searchTable()
          this.fromTableDataGetClickData()
        } else {
          this.$message.error('编辑失败！')
        }
      })
      // this.dialogFormVisible1 = false
    },
    // 从数据表中获取选中的数据
    fromTableDataGetClickData() {
      if (this.clickData.订单号 != '') {
        for (const item of this.tableData) {
          if (item.订单号 == this.clickData.订单号) {
            this.clickData = JSON.parse(JSON.stringify(item))
            if (this.clickData.SN号 == '') {
              this.clickData.SN号 = item.订单号
            }
          }
        }
      }
    },
    // excel导出方法
    exportExcel() {
      if (this.clickData.订单号 !== '') {
        var param = []
        var Data = this.CreateData('2201', this.clickData.订单号, param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('请先选择数据后进行导出')
      }
    },
    // excel导出全部方法
    exportExcelAll() {
      if (this.tableData.length > 0) {
        for (const item of this.tableData) {
          var param = []
          var Data = this.CreateData('2201', item.订单号, param)
          this.exportExcel_NPOI(Data)
        }
      } else {
        this.$message.warning('今日无数据导出')
      }
    }
  }

}
</script>

<style scoped>
.topCard {
  margin: 5px;
  display: flex;
}

/deep/ .topCard .el-card__body {
  display: flex;
}

.topCard .left {
  width: 20%;
}

.topCard .tabData {
  width: 75%;
  height: 830px;
  overflow: auto;
}

/*
.topCard .left .topButton .topCard .tabData .table {
  height: 830px;
  overflow: auto;
} */

.topCard .tabData .table tr td {
  border: 1px solid rgba(0, 0, 0, .3);
  width: 30px;
  height: 20px;
  line-height: 20px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 10px;
  /* display: flex; */
}

.topCard .tabData .table .overDataBox {
  width: 100%;
  height: 210px;
  overflow: auto;
}

/deep/ .topCard .tabData .table tr td .el-input {
  /* height: 30px; */
  margin: 0;
  width: 70%;
}

/deep/ .topCard .tabData .table tr td .el-input__inner {
  height: 30px;
  margin: 0;
  /* width: 70%; */
}

.topCard .tabData .table .thickTr>td {
  border: 1px solid rgba(0, 0, 0, 1);
}

.topCard .tabData .table .leftTr>td {
  text-align: left !important;
}

.left .topButton {
  display: flex;
}

.topCard .right {
  width: 5%;
}

.topCard .right .el-button {
  position: absolute;
  right: 5px;
}

.topDiv {
  margin-bottom: 10px;
}

.el-select {
  width: 200px
}

.el-input {
  width: 200px
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  position: absolute;
  right: 6px;
  top: 80px;
  width: 300px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

