<template>
  <div class="app-container">
    <el-card>
      <span style="margin: 5px">替换单编号</span>
      <el-input v-model="substituteNumber" clearable size="small" style="width:200px" />
      <span style="margin: 5px">零件图号</span>
      <el-input v-model="partNumber" clearable size="small" style="width:200px" />
      <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="getSubstitutedCard()">查询</el-button>
    </el-card>
    <el-card>
      <el-table
        v-loading="listLoading"
        :data="tableDataExchange"
        border
        style="width: 100%;"
        height="450">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <el-table-column label="替换单编号" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.替换单编号 }}
          </template>
        </el-table-column>
        <el-table-column label="替换件名称" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.替换件名称 }}
          </template>
        </el-table-column>
        <el-table-column label="被替换件名称" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.被替换件名称 }}
          </template>
        </el-table-column>
        <el-table-column label="替换数量" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.替换数量 }}
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.申请时间 }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="120">
          <template slot-scope="scope" align="center">
            <el-button size="small" type="primary" icon="el-icon-back" style="margin: 0 0 0 0px" @click="substitutePart(scope.row)">替换件到货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { searchSubstitutedCard, SubstitutedCome } from '@/api/Inventory/SubPartCome'
export default {
  data() {
    return {
      tableDataExchange: [],
      substituteNumber: '',
      partNumber: '',
      listLoading: '',
      subList: '',
      locateNumber: '',
      subNumber: ''
    }
  },
  methods: {
    // 替换单查询
    getSubstitutedCard() {
      this.listloading = true
      searchSubstitutedCard().then(response => {
        this.tableDataExchange = response.data
        this.listloading = false
      })
    },
    // 替换件到货
    substitutePart(row) {
      this.subList = row.替换单流水号
      this.locateNumber = row.物料与货位对照流水号
      this.subNumber = row.替换数量
      SubstitutedCome(this.subList, this.locateNumber, this.subNumber).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('到货替换成功')
        } else { this.$message.error('到货替换失败') }
      })
      this.getSubstitutedCard()
    }
  }
}
</script>

<style scoped>

</style>
