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.trim="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"
            id="1"
            ref="treeList"
          />
        </el-col>
        <el-col :span="18" class="table_col">
          <el-table
            :data="tableData"
            ref="tableRef"
            height="450"
            @row-click="single"
          >
            <el-table-column
              label="序号"
              type="index"
              width="55"
              align="center"
            ></el-table-column>
            <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="brandNum"></el-table-column>
            <el-table-column label="选择" align="center">
              <template slot-scope="scope">
                <el-radio
                  class="radio"
                  v-model="selectedRow.id"
                  :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.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 AssetTree from '@/components/AssetTree';
  import { getList } from '@/api/classifyManage/itemInformation';
  export default {
    components: {
      AssetTree
    },
    data () {
      return {
        materialdialog: false,
        tableData: [],
        pagination: {
          pageNum: 1,
          size: 10
        },
        total: 0,
        searchKey: null,
        current: null,
        rootId: null,
        selectedRow: {},
        radio: '',
        memoId: ''
      };
    },
    methods: {
      open (categoryId) {
        this.memoId = categoryId;
        this.materialdialog = true;
        if (this.current?.id) {
          this._getList();
        }
      },
      handleNodeClick (info) {
        this.current = info;
        this._getList();
      },
      // 获取根节点id
      setRootId (id) {
        this.rootId = id;
      },
      handleClose () {
        this.materialdialog = false;
        this.selectedRow = {};
        this.searchKey = '';
      },

      handleCurrent (page) {
        this.pagination.pageNum = page;
        this._getList();
      },
      handleSize (size) {
        this.pagination.pageNum = 1;
        this.pagination.size = size;
        this._getList();
      },
      async _getList () {
        const res = await getList({
          ...this.pagination,
          searchKey: this.searchKey,
          categoryLevelId: this.current.id
        });
        this.total = res.count;
        this.tableData = res.list;

        if (!this.current.id) {
          this.$nextTick(() => {
            this.$refs.tableRef.setCurrentRow(
              this.tableData.find((i) => i.id == this.memoId)
            );
          });
        }
      },
      // 弹窗 - 按关键字搜索
      searchByKeyWords () {
        this.pagination.pageNum = 1;
        this._getList();
      },
      // 重置
      reset () {
        this.searchKey = '';
        this.pagination.pageNum = 1;
        this._getList();
      },
      // 单击获取id
      single (row) {
        this.selectedRow = row;
      },
      selected () {
        if (!this.selectedRow.id) {
          return this.$message.error('请选择物料！');
        }

        this.$emit('success', this.selectedRow);
        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>