<template>

    <div id="app">

        <el-table :data="List">

          <el-table-column align="center" prop="modelAlias" label="物料编号" ></el-table-column>

          <el-table-column align="center" prop="materialName" label="物料名称"></el-table-column>

          <el-table-column align="center"  label="选择/清空产品">

            <template slot-scope="scope">

              <el-button size="mini" type="text" @click="selectTarget(scope.row,scope.$index)" v-if="!scope.row.targetProduct">请选择</el-button>

              <el-button size="mini" type="text" @click="clear(scope.row,scope.$index)" v-else>清空</el-button>

            </template>

          </el-table-column>

          <el-table-column align="center" prop="targetProduct" label="产品"></el-table-column>

          <el-table-column align="center"  label="操作">

            <template slot-scope="scope">

              <el-button size="mini" type="text" @click="deleteRow(scope.row,scope.$index)">删除</el-button>

            </template>

          </el-table-column>

        </el-table>

        <select-product  @func="select" ref="selectProduct"></select-product>

    </div>

</template>

<script>

import selectProduct from "./select-product";

export default {

    components: {

        selectProduct //声明组件

      },

    data() {

        return {

          List:[

            {modelAlias: "N0001", materialName: '轴承',targetProduct: null },

            {modelAlias: "N0202", materialName: '物料2', targetProduct: null},

            {modelAlias: "N3333", materialName: '传送带', targetProduct: null}

          ],

          temp: null //暂存操作行号(index)

        };

    },

    methods:{

      selectTarget(row,index) {

              this.temp = index //将行号暂存给temp

              this.$refs.selectProduct.openDialog() //调用子组件方法打开子组件el-dialog对话框

          },

      select(res) {

         //  监听子组件事件, res--子组件传回参数

          let temp = this.temp

          this.List[temp].targetProduct = res.name

         },

      clear(row,index){

        //清空选择

        row.targetProduct = null

      },

      deleteRow(row,index){

         // 删除table中某行数据

         this.List.splice(index, 1)

      }

    }

};

</script>

<style scoped>

</style>

<template>

    <el-dialog title="选择目的产品" :visible.sync="open" width="1100px">

      <el-table :data="selectList">

        <el-table-column align="center" prop="number" label="目的产品编码" ></el-table-column>

        <el-table-column align="center" prop="name" label="产品名称"></el-table-column>

        <el-table-column label="操作" align="center">

          <template slot-scope="scope">

            <el-button size="mini" type="text" @click="submitSelect(scope.row)">确定</el-button>

          </template>

        </el-table-column>

      </el-table>

    </el-dialog>

</template>

<script>

  export default{

    data(){

      return{

        selectList:[

                    { number: 'ML001', name: '成品1' },

                    { number: 'ML022', name: '成品222' },

                    { number: 'ML033', name: '成品3333' },

                   ],

        open: false

      }

    },

    methods:{

      openDialog() {

        this.open = true;

      },

      closeDialog() {

         this.open = false;

       },

      submitSelect(row){

        this.$emit('func',row);

        this.open = false;

      }

    }

  }

</script>

<style>

</style>