kd-aiot-frontend-aps/src/components/CreatePlan/ChooseMaterial.vue

<template>
  <el-dialog
    title="选择物料"
    :visible.sync="materialdialog"
    :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="topsearch">
			<el-form >
			  <el-row>
          <el-col :span="6">
            <el-input
              v-model="searchKey"
              placeholder="输入设备编码或名称"
              size="small"
            ></el-input>
          </el-col>
          <el-col :span="6" style="margin-left:10px">
             <el-button type="primary" size="small" @click="searchByKeyWords">搜索</el-button>
             <el-button size="small" @click="reset">重置</el-button>
          </el-col>
			  </el-row>
			</el-form>
		</el-col>
        <el-col :span="6" class="tree_col">
          <AssetTree
            @handleNodeClick="handleNodeClick"
            @setRootId="setRootId"
            :type="'5'"
            :paramsType="'type'"
            ref="treeList"
          />
        </el-col>
        <el-col :span="18" class="table_col">
          <el-table
            :data="tableData"
            height="450"
            @row-click="single"
          >
            <el-table-column label="物品编码" prop="code" width="200"></el-table-column>
            <el-table-column label="物品名称" prop="name"></el-table-column>
            <el-table-column label="牌号" prop="classificationUrl"></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="[5, 10, 20, 50, 100]"
              :page-size="pagination.size"
              :current-page.sync="pagination.page"
              @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 AssetTree from '@/components/AssetTree';
export default {
  components: {
    AssetTree
  },
  data () {
    return {
      materialdialog: false,
      tableData: [
		  {id:1,name:'122',model:'型号1'},
		  {id:2,name:'222',model:'型号2'}
	  ],
      pagination: {
        page: 1,
        size: 10
      },
	  total: 0,
	    searchKey:null,
	    current:null,
	    rootId:null,
		radio: '',
    }
  },
  watch: {

  },
  methods: {
	open(){
		this.materialdialog = true
	},
	handleNodeClick (info) {
	  this.current = info
	},
	// 获取根节点id
	setRootId(id){
	  this.rootId = id
	},
    handleClose () {
      this.materialdialog = false
	  this.radio = ''
    },

    handleCurrent (page) {
      this.pagination.page = page
    },
    handleSize (size) {
      this.pagination.page = 1
      this.pagination.size = size
    },
    // 弹窗 - 按关键字搜索
    searchByKeyWords () {

    },
    // 重置
    reset(){
    },
	// 单击获取id
	single (row) {
	     this.radio = row.id;
	},
	selected(){
		
	}
  }
}
</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>