<template>
  <div class="app-container">

    <el-card>
      <span>表单号:</span>
      <el-input v-model="formNumber" size="small" placeholder="表单号" clearable style="width:150px"/>
      <span>外协厂家:</span>
      <el-input v-model="manufacturers" size="small" placeholder="外协厂家" style="width:150px" clearable/>
      <span>下达任务日期:</span>
      <el-date-picker
        v-model="time"
        type="date"
        size="small"
        placeholder="选择日期"/>
      <el-button type="success" size="mini" icon="el-icon-search" style="margin-left:10px" @click="pageSize=10;pageList=1;fetchData()">查询</el-button>
      <el-tooltip :open-delay="1200" effect="dark" content="打印外协采购单" placement="top">
        <el-button type="primary" size="mini" icon="el-icon-download" style="margin-left:10px" @click="exportTable('RWD')">导出外协加工任务单</el-button>
      </el-tooltip>
    </el-card>

    <el-card>
      <el-table v-loading="loading2" :data="List" highlight-current-row stripe size="mini" height="350" border @row-click="searchProcess" >
        <el-table-column label="付款状态" prop="实际付款时间" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.实际付款时间!==''" type="success" size="small" style="margin: 0px">已付款</el-tag>
            <el-tag v-else type="info" size="small" style="margin: 0px">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="表单号" prop="表单号" align="center" min-width="200px">
          <template slot-scope="scope">
            {{ scope.row.表单号 }}
          </template>
        </el-table-column>
        <el-table-column label="外协厂家" prop="外协厂家" align="center" min-width="200px">
          <template slot-scope="scope">
            {{ scope.row.外协厂家 }}
          </template>
        </el-table-column>
        <el-table-column label="任务下达日期" prop="任务下达日期" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.任务下达日期 }}
          </template>
        </el-table-column>
        <el-table-column label="外协员" prop="外协计划员" 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
          v-show="!loading2"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <el-card>
      <el-table
        ref="multipleTable"
        :data="List3"
        border
        stripe
        size="mini"
        highlight-current-row
        height="450"
        tooltip-effect="dark"
        style="width: 100%;margin-top: 20px"
        @selection-change="handleSelectionChange">
        <el-table-column
          :selectable="selectable"
          type="selection"
          align="center"
          width="55"/>
        <el-table-column label="收货状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.到货状态===1" type="success" size="small" style="margin: 0px">已收货</el-tag>
            <el-tag v-else type="info" size="small" style="margin: 0px">未收货</el-tag>
          </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-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>
      <el-button type="info" size="mini" icon="el-icon-arrow-down" style="margin-left:10px;margin-top: 15px" @click="getSpareParts">收货</el-button>
    </el-card>

    <el-card>
      <div id="RWD">
        <table cellspacing="0px" align="center" width="100%" style="">
          <tbody id="1">
            <tr>
              <td colspan="4" style="text-align: left;font-size: 30px;font-weight: bold">GAOJING</td>
              <td colspan="24" style="text-align:center;font-size: 30px;font-weight: bold">外协加工任务单</td>
            </tr>
            <tr class="tbodyHead">
              <td colspan="2">任务单号:</td>
              <td colspan="6">{{ 任务单号 }}</td>
              <td colspan="4">任务下达日期:</td>
              <td colspan="4">{{ 任务下达日期 }}</td>
              <td colspan="3">外协厂家:</td>
              <td colspan="9">{{ 外协厂家 }}</td>
            </tr>
            <tr class="tbodyHead">
              <td colspan="2">外协员:</td>
              <td colspan="6">{{ 外协员 }}</td>
              <td colspan="2">电话:</td>
              <td colspan="6">{{ 外协员电话 }}</td>
              <td colspan="3">联系人:</td>
              <td colspan="3">{{ 联系人 }}</td>
              <td colspan="2">电话:</td>
              <td colspan="4">{{ 联系人电话 }}</td>
            </tr>
            <tr id="tableHead">
              <td style="width: 2%">序号</td>
              <td colspan="5">零件图号</td>
              <td colspan="2" style="width: 4%">零件名称</td>
              <td colspan="2" style="width: 2%">数量</td>
              <td colspan="9" width="30%">内容</td>
              <td colspan="1">零件类型</td>
              <td>外协类别</td>
              <td>加工价格</td>
              <td>材料价格</td>
              <td>其他价格</td>
              <td colspan="2">计划开始</td>
              <td colspan="2">计划结束</td>
            </tr>

          </tbody>
          <tfoot>
            <tr id="tableFoot">
              <td>费用</td>
              <td colspan="17" style="text-align: left;">加工费：￥{{ 加工价格合计 }}元；材料费：￥{{ 材料价格合计 }}元；其他费用：￥{{ 其他价格合计 }}元；运费￥{{ 运费 }}元；合计：￥{{ 总计 }}元；人民币大写：{{ 大写金额 }}</td>
              <td colspan="1">0</td>
              <td colspan="1"/>
              <td/>
              <td>{{ 加工价格合计 }}</td>
              <td>{{ 材料价格合计 }}</td>
              <td>{{ 其他价格合计 }}</td>
              <td colspan="2">{{ 最早时间 }}</td>
              <td colspan="2">{{ 最晚时间 }}</td>
            </tr>
            <tr class="foot">
              <td colspan="4">外协员:</td>
              <td colspan="4">外协科长:</td>
              <td colspan="4">采购二部长:</td>
              <td colspan="4">制品部长:</td>
              <td colspan="4">定额科统计员:</td>
              <td colspan="4">定额科长:</td>
              <td colspan="4">外协厂:</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </el-card>

  </div>
</template>

<script>
import { handlechange, shouhuo, getTable, getprocedure, spareParts, Arrival, getParts } from '@/api/Outsourcing/OutsourcingTaskQuery'
import { getExplorer, method5, Cleanup } from '@/vendor/exportExcel'
import { convertCurrency } from '@/vendor/int2Chinese'
import { mapGetters } from 'vuex'
import elInput from 'element-ui/packages/input'
import $ from 'jquery'

export default {
  components: {
    elInput
  },
  data() {
    return {
      OutsouringNumber: [],
      wancheng: '',
      gongxulsh: [],
      bianliang: [],
      card: false,
      费用: '',
      加工价格合计: 0,
      材料价格合计: 0,
      其他价格合计: 0,
      运费: 0,
      总计: 0,
      大写金额: '',
      任务单号: '',
      任务下达日期: '',
      外协厂家: '',
      外协员: '',
      外协员电话: '',
      联系人: '',
      联系人电话: '',
      最早时间: '',
      最晚时间: '',
      // 以上是新增的
      loading: false,
      loading1: false,
      loading2: false,
      num: null,
      num1: null,
      num2: null,
      name1: '',
      time: '',
      time1: '',
      time2: '',
      input: '',
      contrast: 3000000000000,
      contrast1: 0,
      param: 0,
      partNumber: '',
      processingPrice: null,
      materialPrice: null,
      formNumber: '',
      coOperationProcess: [],
      ManufactorNumber: null,
      ManufactorNumber1: null,
      manufacturers: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      data2: [],
      List: [],
      money: null,
      sum: 0,
      num10: [],
      title: '',
      result: 0,
      documentStatus: null,
      sign: null,
      Number: null,
      form: {
        表单号: '',
        下达任务日期: '',
        外协厂家: '',
        运费: null
      },
      rules: {
        外协厂家: [{ required: true, message: '请选择外协厂家', trigger: 'change' }],
        运费: [{ required: true, message: '请输入运费', trigger: 'blur' }]
      },
      code: 0,
      code1: 0,
      processNum: [],
      single: null,
      procedure: [],
      List1: [],
      List2: [],
      List3: [],
      Explain: '',
      freight: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      process: [[]],
      returns: [],
      零件图号: [],
      零件名称: [],
      批次数量: [],
      外协预算总价格: [],
      加工价格_成交: [],
      外协分类: [],
      材料费: [],
      材料价格_价格: [],
      其他价格: [],
      机加工开始时间: [],
      机加工结束时间: [],
      外协加工任务单明细流水号: [],
      total: null, // 总条数
      pageSize: 10, // 每页显示条数
      pageList: 1, // 后台获取页
      currentPage: 1 // 显示当前页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    exportTable() {
      if (this.List3.length === 0) {
        this.$message.warning('暂无数据')
      } else {
        const htmlNode = $('#RWD').html()
        const body = $('body')
        body.children().hide()
        const printNode = $(htmlNode)
        body.append(printNode)
        window.print()
        body.children().not('script').show()
        printNode.remove()
      }
    },
    shouhuo(row) {
      this.$confirm('此操作将不可更改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.wancheng === 1) {
          for (let i = 0; i < this.gongxulsh.length; i++) {
            handlechange(this.gongxulsh[i].工序流水号, '0000')
            if (i === this.gongxulsh.length - 1) {
              shouhuo(row.外协加工任务单流水号).then(response => {
                if (response.data[0].result === '1') {
                  this.fetchData()
                }
              })
            }
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    fetchData() {
      this.loading2 = true
      var day3 = new Date(this.time)
      var day4 = new Date(this.time)
      day3.setTime(day3.getTime() - 24 * 60 * 60 * 1000)
      day4.setTime(day4.getTime() + 24 * 60 * 60 * 1000)
      var month1 = day3.getMonth() + 1
      var month2 = day4.getMonth() + 1
      var day1 = day3.getDate()
      var day2 = day4.getDate()
      if (month1 >= 1 && month1 <= 9) {
        month1 = '0' + month1
      }
      if (day1 >= 1 && day1 <= 9) {
        day1 = '0' + day1
      }
      if (month2 >= 1 && month2 <= 9) {
        month2 = '0' + month2
      }
      if (day2 >= 1 && day2 <= 9) {
        day2 = '0' + day2
      }
      this.time1 = day3.getFullYear() + '/' + month1 + '/' + day1
      this.time2 = day4.getFullYear() + '/' + month2 + '/' + day2
      if (this.formNumber !== '') {
        this.num = 1
      } else {
        this.num = 0
      }
      if (this.manufacturers !== '') {
        this.num1 = 1
      } else {
        this.num1 = 0
      }
      if (this.time === '' || this.time === null) {
        this.num2 = 0
      } else {
        this.num2 = 1
      }
      if (this.time1 === 'NaN/NaN/NaN') {
        this.time1 = ''
      }
      if (this.time2 === 'NaN/NaN/NaN') {
        this.time2 = ''
      }
      this.List = []
      this.List3 = []
      getTable(this.num, this.formNumber, this.num1, this.manufacturers, this.num2, this.time1, this.time2, this.id, this.pageList, this.pageSize).then(response => {
        this.total = parseInt(response.data.total)
        for (let i = 0; i < response.data.rows.length; i++) {
          if (response.data.rows[i].任务下达日期 !== null) {
            response.data.rows[i].任务下达日期 = response.data.rows[i].任务下达日期.substr(0, 10)
          }
        }
        this.List = response.data.rows
      })
      this.loading2 = false
    },
    selectable(row, index) { // 控制某行是否可选
      return parseInt(row.到货状态) !== 1 // 已经到货
    },
    // 查询
    searchProcess(row) {
      this.wancheng = ''
      this.gongxulsh = []
      this.任务单号 = row.表单号
      this.任务下达日期 = row.任务下达日期
      this.外协厂家 = row.外协厂家
      this.外协员 = row.外协计划员
      // 以上是新增的
      this.contrast = 3000000000000
      this.contrast1 = 0
      this.loading = true
      this.List3 = []
      this.bianliang = []
      this.零件图号 = []
      this.零件名称 = []
      this.批次数量 = []
      this.外协预算总价格 = []
      this.加工价格_成交 = []
      this.外协分类 = []
      this.材料费 = []
      this.材料价格_价格 = []
      this.其他价格 = []
      this.机加工开始时间 = []
      this.机加工结束时间 = []
      this.外协加工任务单明细流水号 = []
      this.process = []
      this.freight = row.运费
      this.Number = row.外协加工任务单流水号
      getParts(this.Number).then(response => {
        const data = response.data
        for (let i = 0; i < data.length; i++) {
          data[i].差价 = data[i].外协预算总价格 * 1.15.toFixed(2) + data[i].材料费 * 1.15.toFixed(2) - data[i].加工价格_成交.toFixed(2) - data[i].材料价格_价格.toFixed(2) - data[i].其他价格.toFixed(2)
        }
        this.returns = data
        for (let j = 0; j < data.length; j++) {
          this.List3.push({
            零件图号: data[j].零件图号,
            零件名称: data[j].零件名称,
            批次数量: data[j].批次数量,
            到货状态: data[j].到货状态,
            工艺计划流水号: data[j].工艺计划流水号,
            外协加工任务单明细流水号: data[j].外协加工任务单明细流水号,
            单件是否外协: data[j].单件是否外协,
            外协工序: ''
          })
        }
        this.getProcedure(this.List3)
        this.加工价格合计 = 0
        this.材料价格合计 = 0
        this.其他价格合计 = 0
        if (response.data.length !== 0) {
          this.外协员电话 = response.data[0].联系电话
          this.联系人 = response.data[0].联系人
          this.联系人电话 = response.data[0].电话
          this.运费 = response.data[0].运费
          this.card = true
        } else {
          this.card = false
        }
        const children = document.getElementsByClassName('tableData')
        const parent = document.getElementById('1')
        if (children.length !== 0) {
          for (let i = children.length - 1; i >= 0; i--) {
            parent.removeChild(children[i])
          }
        }
        const tr = []
        for (let i = 0; i < this.returns.length; i++) {
          tr[i] = document.createElement('tr')
          tr[i].setAttribute('class', 'tableData')
          tr[i].innerHTML = '<td></td>' + '<td colspan="5"></td>' + '<td colspan="2"></td>' + '<td colspan="2"></td>' +
              '<td colspan="9" style="text-align: left;"></td>' + '<td colspan="1"></td>' + '<td></td><td></td><td></td><td></td><td colspan="2"></td><td colspan="2"></td>'
          $('#tableHead').after(tr[i])
        }
        for (let j = 0; j < this.returns.length; j++) {
          document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
          document.getElementsByClassName('tableData')[j].children[1].innerHTML = response.data[j].零件图号
          document.getElementsByClassName('tableData')[j].children[2].innerHTML = response.data[j].零件名称
          document.getElementsByClassName('tableData')[j].children[3].innerHTML = response.data[j].批次数量
          document.getElementsByClassName('tableData')[j].children[4].innerHTML = ''
          document.getElementsByClassName('tableData')[j].children[5].innerHTML = response.data[j].是否临时件1
          document.getElementsByClassName('tableData')[j].children[6].innerHTML = response.data[j].外协分类
          document.getElementsByClassName('tableData')[j].children[7].innerHTML = parseInt(response.data[j].加工价格_成交.toFixed(2))
          document.getElementsByClassName('tableData')[j].children[8].innerHTML = parseInt(response.data[j].材料价格_价格.toFixed(2))
          document.getElementsByClassName('tableData')[j].children[9].innerHTML = parseInt(response.data[j].其他价格.toFixed(2))
          if (response.data[j].机加工开始时间 !== null) {
            document.getElementsByClassName('tableData')[j].children[10].innerHTML = response.data[j].机加工开始时间.substr(0, 10)
          }
          if (response.data[j].机加工结束时间 !== null) {
            document.getElementsByClassName('tableData')[j].children[11].innerHTML = response.data[j].机加工结束时间.substr(0, 10)
          }
          this.加工价格合计 += parseInt(document.getElementsByClassName('tableData')[j].children[7].innerHTML)
          this.材料价格合计 += parseInt(document.getElementsByClassName('tableData')[j].children[8].innerHTML)
          this.其他价格合计 += parseInt(document.getElementsByClassName('tableData')[j].children[9].innerHTML)
        }
        this.总计 = this.加工价格合计 + this.材料价格合计 + this.其他价格合计 + this.运费
        this.大写金额 = convertCurrency(this.总计)
        // RWD end
        if (response.data.length === 0) {
          this.loading = false
        }
        for (let i = 0; i < response.data.length; i++) { // 声明二维数组
          this.零件图号.push(response.data[i].零件图号)
          this.零件名称.push(response.data[i].零件名称)
          this.批次数量.push(response.data[i].批次数量)
          this.外协预算总价格.push(response.data[i].外协预算总价格.toFixed(2))
          this.加工价格_成交.push(response.data[i].加工价格_成交.toFixed(2))
          this.外协分类.push(response.data[i].外协分类)
          this.材料费.push(response.data[i].材料费.toFixed(2))
          this.材料价格_价格.push(response.data[i].材料价格_价格.toFixed(2))
          this.其他价格.push(response.data[i].其他价格.toFixed(2))
          if (response.data[i].机加工开始时间 !== null) {
            this.机加工开始时间.push(response.data[i].机加工开始时间.substr(0, 10))
          } else {
            this.机加工开始时间.push(' ')
          }
          if (response.data[i].机加工结束时间 !== null) {
            this.机加工结束时间.push(response.data[i].机加工结束时间.substr(0, 10))
          } else {
            this.机加工结束时间.push(' ')
          }
          this.外协加工任务单明细流水号.push(response.data[i].外协加工任务单明细流水号)
          this.process[i] = []
        }
        for (let i = 0; i < this.returns.length; i++) {
          spareParts(this.returns[i].工艺计划流水号, this.returns[i].单件是否外协).then(response => {
            for (let k = 0; k < response.data.length; k++) {
              this.gongxulsh.push({
                工序流水号: response.data[k].工序流水号
              })
              this.process[i][k] = response.data[k].工艺名称简称
              document.getElementsByClassName('tableData')[i].children[4].innerHTML += response.data[k].工艺名称简称 + '/'
            }
          }).then(() => {
            this.wancheng = 1
          })
        }
      }).then(() => {
        // this.List3 = this.bianliang
        this.loading = false
      })
    },
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    getProcedure(row) {
      for (let i = 0; i < row.length; i++) {
        getprocedure(row[i].工艺计划流水号, row[i].单件是否外协).then(response => {
          this.procedure[i] = ''
          for (let j = 0; j < response.data.length; j++) {
            this.procedure[i] = this.procedure[i] + ' ' + response.data[j].工艺名称简称
          }
          this.List3[i].外协工序 = this.procedure[i]
        })
      }
    },
    getSummaries(param) {
      const { data } = param
      const sums = ['', '', '', 0, '', 0, '', 0, '', 0, '', 0, '', '', '', '', '', '', '', '', '', '', '', '', 0, 0, '', 0, 0, 0, '', '']
      sums[1] = '费用'
      sums[2] = '加工费:'
      sums[4] = '材料费:'
      sums[6] = '其他费用:'
      sums[8] = '运费:'
      sums[9] = parseInt(this.freight)
      sums[10] = '合计:'
      for (let i = 0; i < data.length; i++) {
        sums[24] += Math.round(parseFloat(data[i].外协预算总价格) * 100) / 100
      }
      sums[24] = Math.round(sums[24] * 100) / 100
      for (let i = 0; i < data.length; i++) {
        sums[25] += Math.round(parseFloat(data[i].加工价格_成交) * 100) / 100
      }
      sums[25] = Math.round(sums[25] * 100) / 100
      for (let i = 0; i < data.length; i++) {
        sums[27] += Math.round(parseFloat(data[i].材料费) * 100) / 100
      }
      sums[27] = Math.round(sums[27] * 100) / 100
      for (let i = 0; i < data.length; i++) {
        sums[28] += Math.round(parseFloat(data[i].材料价格_价格) * 100) / 100
      }
      sums[28] = Math.round(sums[28] * 100) / 100
      for (let i = 0; i < data.length; i++) {
        sums[29] += Math.round(parseFloat(data[i].其他价格) * 100) / 100
      }
      sums[29] = Math.round(sums[29] * 100) / 100
      for (let i = 0; i < data.length; i++) {
        if (data[i].机加工开始时间 !== null) {
          if (Date.parse(data[i].机加工开始时间) <= this.contrast) {
            this.contrast = Date.parse(data[i].机加工开始时间)
            sums[30] = data[i].机加工开始时间.substr(0, 10)
            this.最早时间 = data[i].机加工开始时间.substr(0, 10)
          }
        }
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].机加工结束时间 !== null) {
          if (Date.parse(data[i].机加工结束时间) >= this.contrast1) {
            this.contrast1 = Date.parse(data[i].机加工结束时间)
            sums[31] = data[i].机加工结束时间.substr(0, 10)
            this.最晚时间 = data[i].机加工结束时间.substr(0, 10)
          }
        }
      }
      sums[3] = sums[25]
      sums[5] = sums[28]
      sums[7] = sums[29]
      sums[11] = Math.round((sums[3] + sums[5] + sums[7] + sums[9]) * 100) / 100
      sums[26] = '---'
      return sums
    },
    indexMethod(index) {
      return index + 1
    },
    handleSelectionChange(val) {
      this.OutsouringNumber = []
      for (let i = 0; i < val.length; i++) {
        this.OutsouringNumber.push(val[i].外协加工任务单明细流水号)
      }
    },
    getSpareParts() { // 选入零件
      if (this.OutsouringNumber.length !== 0) {
        Arrival(this.OutsouringNumber).then(response => {
          console.log(response.data)
          if (response.data[0].result === '1') {
            this.$message.success('到货成功')
            this.contrast = 3000000000000
            this.contrast1 = 0
            this.loading = true
            this.List3 = []
            this.零件图号 = []
            this.零件名称 = []
            this.批次数量 = []
            this.外协预算总价格 = []
            this.加工价格_成交 = []
            this.外协分类 = []
            this.材料费 = []
            this.材料价格_价格 = []
            this.其他价格 = []
            this.机加工开始时间 = []
            this.机加工结束时间 = []
            this.外协加工任务单明细流水号 = []
            this.process = []
            getParts(this.Number).then(response => {
              this.returns = response.data
              for (let j = 0; j < response.data.length; j++) {
                this.List3.push({
                  零件图号: response.data[j].零件图号,
                  零件名称: response.data[j].零件名称,
                  批次数量: response.data[j].批次数量,
                  到货状态: response.data[j].到货状态,
                  工艺计划流水号: response.data[j].工艺计划流水号,
                  外协加工任务单明细流水号: response.data[j].外协加工任务单明细流水号,
                  单件是否外协: response.data[j].单件是否外协,
                  外协工序: ''
                })
              }
              this.getProcedure(this.List3)
              this.加工价格合计 = 0
              this.材料价格合计 = 0
              this.其他价格合计 = 0
              if (response.data.length !== 0) {
                this.外协员电话 = response.data[0].联系电话
                this.联系人 = response.data[0].联系人
                this.联系人电话 = response.data[0].电话
                this.运费 = response.data[0].运费
                this.card = true
              } else {
                this.card = false
              }
              const children = document.getElementsByClassName('tableData')
              const parent = document.getElementById('1')
              if (children.length !== 0) {
                for (let i = children.length - 1; i >= 0; i--) {
                  parent.removeChild(children[i])
                }
              }
              const tr = []
              for (let i = 0; i < this.returns.length; i++) {
                tr[i] = document.createElement('tr')
                tr[i].setAttribute('class', 'tableData')
                tr[i].innerHTML = '<td></td>' + '<td colspan="5"></td>' + '<td colspan="2"></td>' + '<td colspan="2"></td>' +
                  '<td colspan="9" style="text-align: left;"></td>' + '<td colspan="1"></td>' + '<td></td><td></td><td></td><td></td><td colspan="2"></td><td colspan="2"></td>'
                $('#tableHead').after(tr[i])
              }
              for (let j = 0; j < this.returns.length; j++) {
                document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
                document.getElementsByClassName('tableData')[j].children[1].innerHTML = response.data[j].零件图号
                document.getElementsByClassName('tableData')[j].children[2].innerHTML = response.data[j].零件名称
                document.getElementsByClassName('tableData')[j].children[3].innerHTML = response.data[j].批次数量
                document.getElementsByClassName('tableData')[j].children[4].innerHTML = ''
                document.getElementsByClassName('tableData')[j].children[5].innerHTML = response.data[j].是否临时件1
                document.getElementsByClassName('tableData')[j].children[6].innerHTML = response.data[j].外协分类
                document.getElementsByClassName('tableData')[j].children[7].innerHTML = parseInt(response.data[j].加工价格_成交.toFixed(2))
                document.getElementsByClassName('tableData')[j].children[8].innerHTML = parseInt(response.data[j].材料价格_价格.toFixed(2))
                document.getElementsByClassName('tableData')[j].children[9].innerHTML = parseInt(response.data[j].其他价格.toFixed(2))
                if (response.data[j].机加工开始时间 !== null) {
                  document.getElementsByClassName('tableData')[j].children[10].innerHTML = response.data[j].机加工开始时间.substr(0, 10)
                }
                if (response.data[j].机加工结束时间 !== null) {
                  document.getElementsByClassName('tableData')[j].children[11].innerHTML = response.data[j].机加工结束时间.substr(0, 10)
                }
                this.加工价格合计 += parseInt(document.getElementsByClassName('tableData')[j].children[7].innerHTML)
                this.材料价格合计 += parseInt(document.getElementsByClassName('tableData')[j].children[8].innerHTML)
                this.其他价格合计 += parseInt(document.getElementsByClassName('tableData')[j].children[9].innerHTML)
              }
              this.总计 = this.加工价格合计 + this.材料价格合计 + this.其他价格合计 + this.运费
              this.大写金额 = convertCurrency(this.总计)
              if (response.data.length === 0) {
                this.loading = false
              }
              for (let i = 0; i < response.data.length; i++) { // 声明二维数组
                this.零件图号.push(response.data[i].零件图号)
                this.零件名称.push(response.data[i].零件名称)
                this.批次数量.push(response.data[i].批次数量)
                this.外协预算总价格.push(response.data[i].外协预算总价格.toFixed(2))
                this.加工价格_成交.push(response.data[i].加工价格_成交.toFixed(2))
                this.外协分类.push(response.data[i].外协分类)
                this.材料费.push(response.data[i].材料费.toFixed(2))
                this.材料价格_价格.push(response.data[i].材料价格_价格.toFixed(2))
                this.其他价格.push(response.data[i].其他价格.toFixed(2))
                if (response.data[i].机加工开始时间 !== null) {
                  this.机加工开始时间.push(response.data[i].机加工开始时间.substr(0, 10))
                } else {
                  this.机加工开始时间.push(' ')
                }
                if (response.data[i].机加工结束时间 !== null) {
                  this.机加工结束时间.push(response.data[i].机加工结束时间.substr(0, 10))
                } else {
                  this.机加工结束时间.push(' ')
                }
                this.外协加工任务单明细流水号.push(response.data[i].外协加工任务单明细流水号)
                this.process[i] = []
                spareParts(this.returns[i].工艺计划流水号, this.returns[i].单件是否外协).then(response => {
                  for (let k = 0; k < response.data.length; k++) { // 执行n次2
                    this.process[i].push(response.data[k].工艺名称简称)
                    document.getElementsByClassName('tableData')[i].children[4].innerHTML += response.data[k].工艺名称简称 + '/'
                  }
                }).then(() => {
                  this.loading = false
                })
              }
            })
          } else {
            this.$message.error('到货失败')
          }
        })
      } else {
        this.$message.warning('请选择零件')
      }
    },
    downLoadRWD(tableid) {
      if (this.List3.length === 0) {
        this.$message.warning('暂无数据')
      } else {
        getExplorer()
        method5(tableid)
        Cleanup()
      }
    },
    // 表格颜色
    tableRowClassName({ row }) {
      if (row.差价 < 0) {
        return 'chajia'
      } else {
        return ''
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 0px;
  }
</style>
<style>
  td{
    width: 100px;
    height: 30px;
    text-align:center;
  }
  #tableHead td{
    border:1px solid black;
  }
  .tableData td{
    border:1px solid black;
  }
  #tableFoot td{
    border:1px solid black;
  }
  .tbodyHead td{
    text-align: left;
  }
  .foot td{
    width: 7%;
    text-align: left;
  }
</style>
<style>
  .el-table .chajia {
    background: #EBF953;
  }
  .el-table .chengjiao {
    background: #AEF199;
  }
  .el-input__inner {
    height: 30px;
  }
</style>

