<template>
  <div class="app-container">
    <el-card>
      <span>零件号：</span>
      <el-input v-model="PrNum" size="small" placeholder="零件号" clearable style="width: 200px"/>
      <el-button type="success" size="small" style="margin-left: 10px" icon="el-icon-search" @click="pageCurrent=1;pageSize=10;total=0;searchData()">查询</el-button>
      <el-button type="primary" size="small" style="margin-left: 10px" icon="el-icon-download" @click="downLoaddek('dek')">导出工艺定额卡</el-button>
      <el-button type="primary" size="small" style="margin-left: 10px" icon="el-icon-download" @click="downLoadlxd('lxd')">导出加工路线单</el-button>

    </el-card>
    <el-card>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="max-height: 300px"
        height="300px"
        border
        highlight-current-row
        @row-click="click">
        <el-table-column label="零件图号" align="center">
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column label="零件名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column label="零件投产数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.批次数量 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-card>
      <table id="dek" style="width: 975px;" border="2px" cellspacing="0px" align="center">
        <thead>
          <tr height="25px">
            <td colspan="4" rowspan="2" style="text-align:center;font-size: 30px;font-weight: bold">GAOJING</td>
            <td rowspan="4" style="font-size: 30px;font-weight: bold;width: 210px">工艺、定额卡</td>
            <td>零件图号</td>
            <td colspan="3">{{ 零件图号 }}</td>
          </tr>
          <tr>
            <td>零件名称</td>
            <td>{{ 零件名称 }}</td>
            <td>数量</td>
            <td>{{ 投产数量 }}</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:center;">江苏高精机电装备有限公司</td>
            <td colspan="2">材料</td>
            <td colspan="2">原材料规格</td>
          </tr>
          <tr>
            <td>机床号</td>
            <td>{{ 机床号 }}</td>
            <td>组号</td>
            <td>{{ 组号 }}</td>
            <td colspan="2">{{ 材料 }}</td>
            <td colspan="2">{{ 原材料规格 }}</td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align:center;">序次</td>
            <td rowspan="2" colspan="2" style="text-align:center;">工艺名称</td>
            <td rowspan="2" colspan="4" style="text-align:center;width: 550px">工艺要求</td>
            <td colspan="2" style="text-align:center;">定额工时</td>
          </tr>
          <tr>
            <td style="text-align:center;">单件</td>
            <td style="text-align:center;">准结</td>
          </tr>
        </thead>
        <tbody>
          <tr id="1">
            <td>1</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="2">
            <td>2</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="3">
            <td>3</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="4">
            <td>4</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="5">
            <td>5</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="6">
            <td>6</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="7">
            <td>7</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="8">
            <td>8</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="9">
            <td>9</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="10">
            <td>10</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="11">
            <td>11</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="12">
            <td>12</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="13">
            <td>13</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="14">
            <td>14</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="15">
            <td>15</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="16">
            <td>16</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="17">
            <td>17</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="18">
            <td>18</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="19">
            <td>19</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
          <tr id="20">
            <td>20</td>
            <td colspan="2"/>
            <td colspan="4" style="text-align:left;"/>
            <td/>
            <td/>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>工艺员:</td>
            <td colspan="2">{{ 工艺员 }}</td>
            <td>定额员:</td>
            <td>{{ 定额员 }}</td>
            <td>日期:</td>
            <td colspan="3">{{ 日期 }}</td>
          </tr>
        </tfoot>
      </table>
    </el-card>
    <el-card>
      <table id="lxd" style="width: 800px;" border="2px" cellspacing="0px" align="center">
        <thead>
          <tr height="60px">
            <td colspan="6" style="text-align:center;width: 33%">江苏高精机电<br>装备有限公司</td>
            <td colspan="6" style="font-size: 30px;font-weight: bold;text-align:center;width: 34%">零件加工路线单</td>
            <td colspan="6" style="text-align:center;width: 33%">毛 坯 别 <br> 铸 锻 铆 锯 材</td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:center">材料</td>
            <td colspan="4" style="text-align:center">{{ 材料 }}</td>
            <td colspan="3" style="text-align:center;width: 17%">材料规格</td>
            <td colspan="9" style="text-align:center">{{ 原材料规格 }}</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:center">机床号</td>
            <td colspan="4" style="text-align:center">组号</td>
            <td colspan="6" style="text-align:center">零件图号</td>
            <td colspan="3" style="text-align:center">零件名称</td>
            <td style="text-align:center">数量</td>
          </tr>
          <tr height="80px">
            <td colspan="4" style="text-align:center">{{ 机床号 }}</td>
            <td colspan="4" style="text-align:center">{{ 组号 }}</td>
            <td colspan="6" style="text-align:center">{{ 零件图号 }}</td>
            <td colspan="3" style="text-align:center">{{ 零件名称 }}</td>
            <td style="text-align:center">{{ 投产数量 }}</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:center">工序</td>
            <td colspan="2" style="text-align:center">工时定额</td>
            <td colspan="3" rowspan="3" style="text-align:center">工作者<br>(设备)</td>
            <td colspan="4" style="text-align:center">检查结果</td>
            <td colspan="2" rowspan="3" style="text-align:center">检章</td>
            <td colspan="2" rowspan="3" style="text-align:center">计划完成日期</td>
            <td rowspan="3" style="text-align:center">月/日</td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align:center">次序</td>
            <td colspan="3" rowspan="2" style="text-align:center;width: 15%">名称</td>
            <td rowspan="2" style="text-align:center">单件</td>
            <td rowspan="2" style="text-align:center">准结</td>
            <td rowspan="2" style="text-align:center">合格</td>
            <td rowspan="2" style="text-align:center">回用</td>
            <td colspan="2" style="text-align:center">废品</td>
          </tr>
          <tr>
            <td style="text-align:center;width: 5%">工</td>
            <td style="text-align:center;width: 5%">料</td>
          </tr>
        </thead>
        <tbody>
          <tr id="21">
            <td style="text-align:center">1</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="22">
            <td style="text-align:center">2</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="23">
            <td style="text-align:center">3</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="24">
            <td style="text-align:center">4</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="25">
            <td style="text-align:center">5</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="26">
            <td style="text-align:center">6</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="27">
            <td style="text-align:center">7</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="28">
            <td style="text-align:center">8</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="29">
            <td style="text-align:center">9</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="30">
            <td style="text-align:center">10</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="31">
            <td style="text-align:center">11</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="32">
            <td style="text-align:center">12</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="33">
            <td style="text-align:center">13</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="34">
            <td style="text-align:center">14</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="35">
            <td style="text-align:center">15</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="36">
            <td style="text-align:center">16</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="37">
            <td style="text-align:center">17</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="38">
            <td style="text-align:center">18</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="39">
            <td style="text-align:center">19</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
          <tr id="40">
            <td style="text-align:center">20</td>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="3" style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td colspan="2" style="text-align:center"/>
            <td style="text-align:center"/>
          </tr>
        </tbody>
      </table>
    </el-card>
  </div>
</template>

<script>
import { search, searchtable1, searchtable2 } from '@/api/ManufacturingCenter/PartWorkCraftSelect_rdlc'
import { getExplorer, method5, Cleanup } from '@/vendor/exportExcel'

export default {
  data() {
    return {
      cell: [],
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      loading: false,
      PrNum: '',
      tableData2: [],
      tableData3: [],
      机床号: '',
      组号: '',
      零件图号: '',
      零件名称: '',
      投产数量: '',
      材料: '',
      原材料规格: '',
      工艺员: '',
      定额员: '',
      日期: ''
    }
  },
  created() {
    this.fetchData()
    this.searchData()
  },
  methods: {
    fetchData() {
      for (let i = 0; i < 9; i++) {
        for (let j = 1; j < 28; j++) {
          this.cell.push(String.fromCharCode(65 + i) + j)
        }
      }
    },
    searchData() {
      this.loading = true
      search(this.pageCurrent, this.pageSize, this.PrNum).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },
    click(row) {
      searchtable1(row.工艺计划流水号).then(response => {
        this.tableData2 = response.data
        this.tableData2[0].工艺实际完成时间 = response.data[0].工艺实际完成时间.substr(0, 10) // 只处理了要显示的时间格式
        this.机床号 = response.data[0].机床图号
        this.组号 = response.data[0].组号
        this.零件图号 = response.data[0].零件图号
        this.零件名称 = response.data[0].零件名称
        this.投产数量 = response.data[0].投产数量
        this.材料 = response.data[0].材料
        this.原材料规格 = response.data[0].原材料规格
        this.工艺员 = response.data[0].工艺员
        this.定额员 = response.data[0].定额员
        this.日期 = response.data[0].工艺实际完成时间.substr(0, 10)
      }).then(() => {
        for (let j = 0; j < 20; j++) {
          document.getElementById(String(j + 1)).children[1].innerHTML = ''
          document.getElementById(String(j + 1)).children[2].innerHTML = ''
          document.getElementById(String(j + 1)).children[3].innerHTML = ''
          document.getElementById(String(j + 1)).children[4].innerHTML = ''
        }
        for (let j = 0; j < this.tableData2.length; j++) {
          document.getElementById(String(j + 1)).children[1].innerHTML = this.tableData2[j].工艺名称
          document.getElementById(String(j + 1)).children[2].innerHTML = this.tableData2[j].工艺要求
          document.getElementById(String(j + 1)).children[3].innerHTML = this.tableData2[j].单件定额工时
          document.getElementById(String(j + 1)).children[4].innerHTML = this.tableData2[j].准结定额工时
        }
      })
      searchtable2(row.工艺计划流水号).then(response => {
        this.tableData3 = response.data
      }).then(() => {
        for (let j = 0; j < 20; j++) {
          document.getElementById(String(j + 21)).children[1].innerHTML = ''
          document.getElementById(String(j + 21)).children[2].innerHTML = ''
          document.getElementById(String(j + 21)).children[3].innerHTML = ''
          document.getElementById(String(j + 21)).children[10].innerHTML = ''
        }
        for (let j = 0; j < this.tableData3.length; j++) {
          document.getElementById(String(j + 21)).children[1].innerHTML = this.tableData3[j].工艺名称
          document.getElementById(String(j + 21)).children[2].innerHTML = this.tableData3[j].单件定额工时
          document.getElementById(String(j + 21)).children[3].innerHTML = this.tableData3[j].准结定额工时
          document.getElementById(String(j + 21)).children[10].innerHTML = this.tableData3[j].计划日期.substr(5, 5)
        }
      })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData()
    },
    handleDownload() {
      if (this.tableData2.length === 0) {
        this.$message.error('请选择一个零件')
      } else {
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel1')
          const list = this.tableData2
          export_json_to_excel(list, '工艺定额卡', this.cell)
        })
      }
    },
    downLoaddek(tableid) { // 下载工艺定额卡
      getExplorer()
      method5(tableid)
      Cleanup()
    },
    downLoadlxd(tableid) { // 下载零件加工路线单
      getExplorer()
      method5(tableid)
      Cleanup()
    }
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0 10px 10px;
  }
  .el-card{
    margin-bottom: 15px;
  }
  .el-table {
    max-height: 250px;
    overflow: auto;
  }
  td{
    width: 100px;
    height: 30px;
    text-align:center;
  }
</style>
