<template>
  <div class="app-container">
    <el-card>
      <div>
        <span style="line-height: 25px">设备对应点检类型维护</span>
        <div style="float: right;margin: 5px">
          <el-select v-model="OPnameValue" filterable size="small" placeholder="工位号" style="width: 110px">
            <el-option
              v-for="item in OPname"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span>选择月份：</span>
          <el-date-picker v-model="monthssss" size="small" type="month" value-format="yyyy-MM" format="yyyy-MM" style="width: 120px" placeholder="选择月"/>
          <el-button size="small" type="warning" style="margin-right: 50px" plain @click="exportOut()">导出日点检表</el-button>
        </div>
      </div>
      <el-table v-loading="loading1" :data="tableData1" stripe height="200" border>
        <el-table-column align="center" label="序号" type="index" width="50"/>
        <el-table-column align="center" label="工位号" width="110">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备名称" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.设备名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备编号" show-overflow-tooltip min-width="200">
          <template slot-scope="scope">
            {{ scope.row.设备编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="点检表类型" min-width="150">
          <template slot-scope="scope">
            <el-select v-model="tableData1[scope.$index].点检表类型流水号" filterable size="small" placeholder="点检表类型" style="margin:3px 10px;width: 150px" @change="editType(scope.row)">
              <el-option
                v-for="item in 点检表类型"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <el-col :span="6">
        <span>点检类型维护</span>
        <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin: 10px 0 3px 10px" @click="handleAdd1('form1')" >新增</el-button>
        <el-table v-loading="loading2" :data="tableData2" height="300" highlight-current-row border @row-click="getTableData3">
          <el-table-column align="center" label="序号" type="index" width="50"/>
          <el-table-column align="center" label="点检类型名称" min-width="150">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.点检表类型名称" style="width:120px;margin-right:3px" clearable size="mini" width="120"/>
              </template>
              <span v-else>{{ scope.row.点检表类型名称 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit1(scope.row)">确定</el-button>
              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit1(scope.$index, scope.row)">取消</el-button>
              <el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
              <el-button v-if="!scope.row.edit" type="text" size="mini" plain icon="el-icon-delete" @click="openDelete1(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="18">
        <span>点检内容维护</span>
        <el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin: 10px 0 3px 10px" @click="handleAdd2('form2')" >新增</el-button>
        <el-table v-loading="loading3" :data="tableData3" height="300" highlight-current-row border>
          <el-table-column align="center" label="序号" type="index" width="50"/>
          <el-table-column align="center" label="保养周期" min-width="110">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="tableData3[scope.$index].保养周期" filterable size="small" placeholder="点检表类型" style="margin:3px 10px;width: 150px" @change="editType(scope.row)">
                  <el-option
                    v-for="item in 保养周期"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </template>
              <template v-else slot-scope="scope">
                <span v-if="scope.row.保养周期 === 1">日</span>
                <span v-if="scope.row.保养周期 === 7">周</span>
                <span v-if="scope.row.保养周期 === 30">月</span>
                <span v-if="scope.row.保养周期 === 90">季</span>
                <span v-if="scope.row.保养周期 === 365">年</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="保养项目" min-width="250">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.保养项目" style="width: 90%;margin-right:3px" clearable size="mini" width="120"/>
              </template>
              <span v-else>{{ scope.row.保养项目 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit2(scope.row)">确定</el-button>
              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit2(scope.$index, scope.row)">取消</el-button>
              <el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
              <el-button v-if="!scope.row.edit" type="text" size="mini" plain icon="el-icon-delete" @click="openDelete2(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-card>
    <el-card v-show="false" style="width: 1565px">
      <div id="dianjianbiao">
        <div style="width: 1541px;font-size: 28px;font-weight: bold;text-align: center;">设备保养点检记录表</div>
        <div>
          <span style="font-size: 20px;margin-left: 50px">设备名称：</span>
          <span style="font-size: 20px">{{ 设备名称 }}</span>
          <span style="font-size: 20px;margin-left: 50px">设备编号：</span>
          <span style="font-size: 20px">{{ 设备编号 }}</span>
        </div>
        <el-table :data="tableData" :resizable="false" style="margin: 5px 0 0 0;width: 1541px" border>
          <el-table-column :resizable="false" align="center" label="项次" type="index" width="50"/>
          <el-table-column :resizable="false" align="center" label="日保养项目" width="250">
            <template slot-scope="scope">
              {{ scope.row.保养项目 }}
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="1" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F1===1">V</span>
              <span v-if="scope.row.F1===2">R</span>
              <span v-if="scope.row.F1===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="2" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F2===1">V</span>
              <span v-if="scope.row.F2===2">R</span>
              <span v-if="scope.row.F2===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="3" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F3===1">V</span>
              <span v-if="scope.row.F3===2">R</span>
              <span v-if="scope.row.F3===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="4" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F4===1">V</span>
              <span v-if="scope.row.F4===2">R</span>
              <span v-if="scope.row.F4===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="5" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F5===1">V</span>
              <span v-if="scope.row.F5===2">R</span>
              <span v-if="scope.row.F5===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="6" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F6===1">V</span>
              <span v-if="scope.row.F6===2">R</span>
              <span v-if="scope.row.F6===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="7" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F7===1">V</span>
              <span v-if="scope.row.F7===2">R</span>
              <span v-if="scope.row.F7===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="8" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F8===1">V</span>
              <span v-if="scope.row.F8===2">R</span>
              <span v-if="scope.row.F8===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="9" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F9===1">V</span>
              <span v-if="scope.row.F9===2">R</span>
              <span v-if="scope.row.F9===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="10" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F10===1">V</span>
              <span v-if="scope.row.F10===2">R</span>
              <span v-if="scope.row.F10===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="11" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F11===1">V</span>
              <span v-if="scope.row.F11===2">R</span>
              <span v-if="scope.row.F11===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="12" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F12===1">V</span>
              <span v-if="scope.row.F12===2">R</span>
              <span v-if="scope.row.F12===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="13" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F13===1">V</span>
              <span v-if="scope.row.F13===2">R</span>
              <span v-if="scope.row.F13===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="14" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F14===1">V</span>
              <span v-if="scope.row.F14===2">R</span>
              <span v-if="scope.row.F14===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="15" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F15===1">V</span>
              <span v-if="scope.row.F15===2">R</span>
              <span v-if="scope.row.F15===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="16" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F16===1">V</span>
              <span v-if="scope.row.F16===2">R</span>
              <span v-if="scope.row.F16===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="17" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F17===1">V</span>
              <span v-if="scope.row.F17===2">R</span>
              <span v-if="scope.row.F17===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="18" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F18===1">V</span>
              <span v-if="scope.row.F18===2">R</span>
              <span v-if="scope.row.F18===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="19" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F19===1">V</span>
              <span v-if="scope.row.F19===2">R</span>
              <span v-if="scope.row.F19===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="20" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F20===1">V</span>
              <span v-if="scope.row.F20===2">R</span>
              <span v-if="scope.row.F20===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="21" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F21===1">V</span>
              <span v-if="scope.row.F21===2">R</span>
              <span v-if="scope.row.F21===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="21" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F21===1">V</span>
              <span v-if="scope.row.F21===2">R</span>
              <span v-if="scope.row.F21===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="23" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F23===1">V</span>
              <span v-if="scope.row.F23===2">R</span>
              <span v-if="scope.row.F23===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="24" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F24===1">V</span>
              <span v-if="scope.row.F24===2">R</span>
              <span v-if="scope.row.F24===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="25" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F25===1">V</span>
              <span v-if="scope.row.F25===2">R</span>
              <span v-if="scope.row.F25===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="26" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F26===1">V</span>
              <span v-if="scope.row.F26===2">R</span>
              <span v-if="scope.row.F26===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="27" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F27===1">V</span>
              <span v-if="scope.row.F27===2">R</span>
              <span v-if="scope.row.F27===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="28" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F28===1">V</span>
              <span v-if="scope.row.F28===2">R</span>
              <span v-if="scope.row.F28===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="29" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F29===1">V</span>
              <span v-if="scope.row.F29===2">R</span>
              <span v-if="scope.row.F29===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="30" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F30===1">V</span>
              <span v-if="scope.row.F30===2">R</span>
              <span v-if="scope.row.F30===3">X</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" align="center" label="31" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.F31===1">V</span>
              <span v-if="scope.row.F31===2">R</span>
              <span v-if="scope.row.F31===3">X</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 300px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 80px;">点 检 人（操作工）</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名1 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名2 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名3 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名4 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名5 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名6 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名7 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名8 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名9 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名10 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名11 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名12 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名13 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名14 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名15 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名16 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名17 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名18 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名19 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名20 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名21 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名22 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名23 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名24 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名25 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名26 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名27 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名28 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名29 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名30 : '' }}</div>
        <div style="width: 40px;height: 80px;border: 1px solid rgb(235,238,245);float: left;text-align: center;line-height: 40px;-webkit-writing-mode: vertical-rl;">{{ tableData[0] ? tableData[0].姓名31 : '' }}</div>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible1" title="新增" center width="500px">
      <el-form ref="form1" :model="form1" :rules="rules" label-position="right" label-width="160px">
        <el-form-item label="点检类型名称" prop="点检类型名称">
          <el-input v-model="form1.点检类型名称" placeholder="点检类型名称" clearable size="small" style="width:180px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff1('form1')">取消</el-button>
        <el-button type="primary" @click="submit1('form1')" >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible2" title="新增" center width="500px">
      <el-form ref="form2" :model="form2" :rules="rules" label-position="right" label-width="160px">
        <el-form-item label="保养项目" prop="保养项目">
          <el-input v-model="form2.保养项目" placeholder="保养项目" clearable size="small" style="width:180px;"/>
        </el-form-item>
        <el-form-item label="保养周期" prop="保养周期">
          <el-select v-model="form2.保养周期" filterable size="small" placeholder="保养周期" style="width: 180px">
            <el-option
              v-for="item in 保养周期"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff2('form2')">取消</el-button>
        <el-button type="primary" @click="submit2('form2')" >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData1, getTableData2, getTableData3, editType, confirmEdit1, confirmEdit2, selectCount, openDelete1, openDelete2, submit1, submit2, exportOut } from '@/api/ManufacturingCenter/maintainInformation'
import $ from 'jquery'

export default {
  data() {
    return {
      点检表类型: [],
      tableData1: [],
      loading1: false,
      tableData2: [],
      loading2: false,
      点检表类型流水号: '',
      保养周期: [{
        value: 1,
        label: '日'
      }, {
        value: 7,
        label: '周'
      }, {
        value: 30,
        label: '月'
      }, {
        value: 90,
        label: '季'
      }, {
        value: 365,
        label: '年'
      }],
      tableData3: [],
      loading3: false,
      form1: {
        点检类型名称: ''
      },
      dialogFormVisible1: false,
      form2: {
        保养项目: '',
        保养周期: ''
      },
      dialogFormVisible2: false,
      rules: { // 表单验证规则
        点检类型名称: [{ required: true, message: '请输入点检类型名称', trigger: 'blur' }],
        保养项目: [{ required: true, message: '请输入保养项目', trigger: 'blur' }],
        保养周期: [{ required: true, message: '请选择保养周期', trigger: 'change' }]
      },
      OPnameValue: '',
      OPname: [],
      monthssss: '',
      tableData: [],
      设备名称: '',
      设备编号: ''
    }
  },
  created() {
    this.getTableData1()
    this.getTableData2()
  },
  methods: {
    getTableData1() {
      this.OPname = []
      this.tableData1 = []
      this.loading1 = true
      getTableData1().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.OPname.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
        this.tableData1 = response.data
        this.loading1 = false
      })
    },
    // 编辑  表1
    editType(row) {
      editType(row.点检表类型流水号, row.ID)
    },
    getTableData2() {
      this.点检表类型 = []
      this.tableData2 = []
      this.loading2 = true
      getTableData2().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.点检表类型.push({
            label: response.data[i].点检表类型名称,
            value: response.data[i].点检表类型流水号
          })
        }
        if (response.data.length !== 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.tableData2.push({
              点检表类型流水号: response.data[i].点检表类型流水号,
              点检表类型名称: response.data[i].点检表类型名称,
              点检表类型流水号_原: response.data[i].点检表类型流水号,
              点检表类型名称_原: response.data[i].点检表类型名称,
              edit: false
            })
          }
        }
        this.loading2 = false
      })
    },
    // 取消编辑
    cancelEdit1(index, row) {
      row.edit = false
      row.点检表类型名称 = this.tableData2[index].点检表类型名称_原
      this.$message('取消修改')
    },
    // 编辑  表2
    confirmEdit1(row) {
      confirmEdit1(row.点检表类型名称, row.点检表类型流水号).then(response => {
        row.edit = false
      })
    },
    // 删除  表2
    openDelete1(row) {
      this.$confirm('此操作将永久删除该行信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        selectCount(row.点检表类型流水号).then(response => {
          if (response.data.length === 0) {
            openDelete1(row.点检表类型流水号).then(() => {
              this.tableData3 = []
              this.getTableData2()
            })
          } else {
            var message
            message = '工位：'
            for (let i = 0; i < response.data.length; i++) {
              if (i === response.data.length - 1) {
                message = message + response.data[i].工位号
              } else {
                message = message + response.data[i].工位号 + '、'
              }
            }
            message = message + '占用，请先将以上工位改为其他点检类型'
            this.$message.error(message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增  表2
    handleAdd1(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.form1.点检类型名称 = ''
      this.dialogFormVisible1 = true
    },
    callOff1() {
      this.dialogFormVisible1 = false
    },
    submit1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          submit1(this.form1.点检类型名称).then(response => {
            this.getTableData2()
            this.dialogFormVisible1 = false
          })
        } else {
          return false
        }
      })
    },
    getTableData3(row) {
      this.点检表类型流水号 = row.点检表类型流水号
      this.tableData3 = []
      this.loading3 = true
      getTableData3(row.点检表类型流水号).then(response => {
        if (response.data.length !== 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.tableData3.push({
              ID: response.data[i].ID,
              保养周期: response.data[i].保养周期,
              保养项目: response.data[i].保养项目,
              保养周期_原: response.data[i].保养周期,
              保养项目_原: response.data[i].保养项目,
              edit: false
            })
          }
        }
        this.loading3 = false
      })
    },
    // 取消编辑
    cancelEdit2(index, row) {
      row.edit = false
      row.保养周期 = this.tableData3[index].保养周期_原
      row.保养项目 = this.tableData3[index].保养项目_原
      this.$message('取消修改')
    },
    // 编辑  表3
    confirmEdit2(row) {
      confirmEdit2(row.保养周期, row.保养项目, row.ID).then(response => {
        row.edit = false
      })
    },
    // 删除  表3
    openDelete2(row) {
      this.$confirm('此操作将永久删除该行信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        openDelete2(row.ID).then(() => {
          this.tableData3 = []
          this.loading3 = true
          getTableData3(this.点检表类型流水号).then(response => {
            if (response.data.length !== 0) {
              for (let i = 0; i < response.data.length; i++) {
                this.tableData3.push({
                  ID: response.data[i].ID,
                  保养周期: response.data[i].保养周期,
                  保养项目: response.data[i].保养项目,
                  保养周期_原: response.data[i].保养周期,
                  保养项目_原: response.data[i].保养项目,
                  edit: false
                })
              }
            }
            this.loading3 = false
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增  表3
    handleAdd2(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.form2.保养项目 = ''
      this.form2.保养周期 = ''
      if (this.点检表类型流水号) {
        this.dialogFormVisible2 = true
      } else {
        this.$message.error('请先选择一个点检类型')
      }
    },
    callOff2() {
      this.dialogFormVisible2 = false
    },
    submit2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.点检表类型流水号) {
            submit2(this.点检表类型流水号, this.form2.保养项目, this.form2.保养周期).then(response => {
              this.tableData3 = []
              this.loading3 = true
              getTableData3(this.点检表类型流水号).then(response => {
                if (response.data.length !== 0) {
                  for (let i = 0; i < response.data.length; i++) {
                    this.tableData3.push({
                      ID: response.data[i].ID,
                      保养周期: response.data[i].保养周期,
                      保养项目: response.data[i].保养项目,
                      保养周期_原: response.data[i].保养周期,
                      保养项目_原: response.data[i].保养项目,
                      edit: false
                    })
                  }
                }
                this.loading3 = false
              })
            })
          }
          this.dialogFormVisible2 = false
        } else {
          return false
        }
      })
    },
    exportOut() {
      this.tableData = []
      if (this.OPnameValue) {
        if (this.monthssss) {
          var year = this.monthssss.split('-')[0]
          var month = this.monthssss.split('-')[1]
          exportOut(this.OPnameValue, year, month).then(response => {
            if (response.data.length !== 0) {
              this.设备名称 = response.data[0].设备名称
              this.设备编号 = response.data[0].设备编号
              this.tableData = response.data
            }
          }).then(() => {
            if (this.tableData.length !== 0) {
              this.Out()
            } else {
              this.$message.error('暂无该月数据')
            }
          })
        } else {
          this.$message.error('请选择月份')
        }
      } else {
        this.$message.error('请选择工位')
      }
    },
    Out() {
      const htmlNode = $('#dianjianbiao').html()
      const body = $('body')
      body.children().hide()
      const printNode = $(htmlNode)
      body.append(printNode)
      window.print()
      body.children().not('script').show()
      body.children().not('#app').hide()
      printNode.remove()
    }
  }
}
</script>

<style lang="scss">
  .NewlyAdded{
    background:rgb(253,246,236);
    border-color: #ff9759;
    color: #ff9759;
    &:hover{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
    &:focus{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
  }
  #dianjianbiao {
    /*.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{*/
      /*border-color: black !important;*/
    /*}*/
    /*.el-table--border::after, .el-table--group::after, .el-table::before{*/
      /*background-color: black !important;*/
    /*}*/
    /*th {*/
      /*background: white !important;*/
      /*color: black !important;*/
    /*}*/
  }
</style>
