kd-aiot-frontend/src/views/material/manage/components/GroupDialog.vue

<template>
  <el-dialog
    title="选择物料组"
    :visible.sync="groupVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <div>
      <el-row>
        <el-col :span="24" class="table_col">
          <el-table
            :data="tableData"
            height="450"
            highlight-current-row
            @row-click="single"
          >
            <el-table-column label="物料组名称" prop="name" width="200"></el-table-column>
            <el-table-column label="物料组编码" prop="code"></el-table-column>
            <el-table-column label="分类树" prop="categoryLevelRootName">
               <template slot-scope="scope">
                   {{scope.row.categoryLevelRootName+'分类'}}
               </template>
            </el-table-column>
            <el-table-column label="选择" align="center">
               <template slot-scope="scope">
            	 <el-radio class="radio" v-model="radio" :label="scope.row.id"><i></i></el-radio>
               </template>
            </el-table-column>
          </el-table>
         <div class="pagination">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pagination.size"
              :current-page.sync="pagination.pageNum"
              @current-change="handleCurrent"
              @size-change="handleSize"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
 import { getGroupPage } from '@/api/material/list';
export default {
  data () {
    return {
      groupVisible: false,
      tableData: [],
      search:{},
      pagination: {
        pageNum: 1,
        size: 10,
      },
      total: 0,
      radio: '',
      current:null
    }
  },

  watch: {

  },
  methods: {
    open(item){
      if(item){
        this.current = item
        this.radio = item.id
      }
      this.groupVisible = true
      this.getList()
    },

    // 单击获取id
    single (row) {
        this.current = row
        this.radio = row.id
    },

    handleClose () {
      this.groupVisible = false
      this.current = null
      this.radio = ''
    },
    handleCurrent (page) {
      this.pagination.pageNum = page
      this.getList()
    },
    handleSize (size) {
      this.pagination.pageNum = 1
      this.pagination.size = size
      this.getList()
    },
    getList(){
      let params = {...this.pagination}
      getGroupPage(params).then(res=>{
         this.tableData = res.list
         this.total = res.count
      })
    },
    selected(){
       if(!this.current){
         return this.$message.warning('请选择物料组')
       }
       this.$emit('changeMaterial',this.current)
       this.handleClose()
    },

  }
}
</script>

<style lang="scss" scoped>
.tree_col {
  border: 1px solid #eee;
  padding: 10px 0;
  box-sizing: border-box;
  height: 500px;
  overflow: auto;
}
.table_col {
  padding-left: 10px;
  ::v-deep .el-table th.el-table__cell {
    background: #f2f2f2;
  }
}
.pagination {
  text-align: right;
  padding: 10px 0;
}
.btns {
  text-align: center;
  padding: 10px 0;
}
.topsearch{
	margin-bottom:15px;
}
</style>