ccl_plm-vue/src/views/modules/common/transferTable.vue

<script>
export default {
  name: "transferTable",
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    modelList: {
      type: Array,
      default: () => []
    }
  },
  model:{
    prop: "modelList",
    event: "change"
  },
  data(){
    return{
      searchModel: {
        itemNo: "",
        itemDesc: ""
      },
      searchTableList: [],
      dataTableList: []
    }
  },
  methods:{
    handleSearch(){
      this.$emit("search", this.searchModel)
    },
    handleAdd(){
      if (this.searchTableList.length === 0){
        this.$message.warning("请选择需要新增的属性")
        return
      }
      let params = JSON.parse(JSON.stringify(this.searchModel))
      params.searchTableList = JSON.parse(JSON.stringify(this.searchTableList))
      this.$emit("add",params)
    },
    handleDelete() {
      if (this.dataTableList.length === 0){
        this.$message.warning("请选择需要删除的属性")
        return
      }
      let params = JSON.parse(JSON.stringify(this.searchModel))
      params.dataTableList = JSON.parse(JSON.stringify(this.dataTableList))
      this.$emit("delete",params)
    },
    handleRowClick(row, column, event, table) {
      this.$refs[table].toggleRowSelection(row)
    },
    handleSelectionChange(selection, table) {
      this[`${table}List`] = selection
    }
  }
}
</script>

<template>
<div>
  <el-form :model="searchModel" label-position="top" :inline="true">
    <el-form-item label="属性编码">
      <el-input v-model="searchModel.itemNo"></el-input>
    </el-form-item>
    <el-form-item label="属性名称">
      <el-input v-model="searchModel.itemDesc"></el-input>
    </el-form-item>
    <el-form-item label=" ">
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </el-form-item>
  </el-form>
  <el-row :gutter="20">
    <!--表格1-->
    <el-col :span="11">
      <span style="font-size: 12px">可选属性：</span>
      <el-table
        height="400px"
        :data="dataList"
        ref="searchTable"
        @selection-change="(selection)=>handleSelectionChange(selection,'searchTable')"
        @row-click="(row,column,event)=>handleRowClick(row,column,event,'searchTable')"
        border>
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="itemNo"
          header-align="center"
          align="left"
          label="属性编码">
        </el-table-column>
        <el-table-column
          prop="itemDesc"
          header-align="center"
          align="left"
          label="属性名称">
        </el-table-column>
      </el-table>
    </el-col>
    <!--按钮-->
    <el-col :span="2">
      <div style="text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 400px">
        <div><el-button type="primary" @click="handleAdd">新增<i class="el-icon-d-arrow-right el-icon--right"></i></el-button></div>
        <div><el-button type="primary" @click="handleDelete" icon="el-icon-d-arrow-left" style="margin-top: 10px">删除</el-button></div>
      </div>
    </el-col>
    <!--表格2-->
    <el-col :span="11">
      <span style="font-size: 12px">已有属性：</span>
      <el-table
        height="400px"
        :data="modelList"
        ref="dataTable"
        @selection-change="(selection)=>handleSelectionChange(selection,'dataTable')"
        @row-click="(row,column,event)=>handleRowClick(row,column,event,'dataTable')"
        border>
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="itemNo"
          header-align="center"
          align="left"
          label="属性编码">
        </el-table-column>
        <el-table-column
          prop="itemDesc"
          header-align="center"
          align="left"
          label="属性名称">
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</div>
</template>

<style scoped>

</style>