kd-aiot-frontend-aps/src/views/saleOrder/components/EquipmentDialog.vue

<template>
  <ele-modal
    title="选择产品"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
    :maxable="true"
  >
    <div>
      <el-row>
        <el-col :span="24" class="topsearch">
          <el-form>
            <el-row>
              <el-col :span="6">
                <el-input
                  v-model="code"
                  placeholder="请输入物料编码"
                  size="small"
                ></el-input>
              </el-col>

              <el-col :span="6" style="margin-left: 10px">
                <el-input
                  v-model="name"
                  placeholder="请输入物料名称"
                  size="small"
                ></el-input>
              </el-col>
              <el-col :span="6" style="margin-left: 10px">
                <el-input
                  v-model="searchKey"
                  placeholder="请输入关键字"
                  size="small"
                ></el-input>
              </el-col>
              
              <el-col :span="4" style="margin-left: 10px">
                <el-button type="primary" size="small" @click="reload"
                  >搜索</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"
            :treeIds="['9', '1']"
            ref="treeList"
          />
        </el-col>
        <el-col :span="18" class="table_col" v-if="equipmentdialog">
          <ele-pro-table
            ref="equiTable"
            :columns="columns"
            :datasource="datasource"
            :selection.sync="selection"
            @select="handleSelect"
            cache-key="systemRoleTable3"
            row-key="id"
            height="50vh"
            @done="setSelect"
          >
          </ele-pro-table>
        </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>
  </ele-modal>
</template>

<script>
  import AssetTree from '@/components/AssetTree/treeIndex.vue';
  import { getList } from '@/api/classifyManage/itemInformation';
  export default {
    components: {
      AssetTree
    },
    props: {
      selectList: Array
    },
    data () {
      return {
        equipmentdialog: false,
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'code'
          },
          {
            prop: 'name',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ],
        tableList: [],
        categoryLevelId: null,
        searchKey: null,
        code: null,
        name: null,
        selection: []
      };
    },

    watch: {},
    methods: {
      async datasource ({ page, limit }) {
        const params = {
          code: this.code,
          name: this.name,
          searchKey: this.searchKey,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId,
          isProduct: true
        };
        const data = await getList(params);
        this.tableList = data.list;
        return data;
      },
      open () {
        this.equipmentdialog = true;
        this.setSelect();
      },
      handleNodeClick (data) {
        this.categoryLevelId = data.id;
        this.reload();
      },
      reload () {
        this.$refs.equiTable.reload();
      },
      handleClose () {
        this.equipmentdialog = false;
        this.code = '';
        this.$refs.equiTable.clearSelection();
      },
      reset () {
        this.code = null;
        this.reload();
      },
      // 设置选中
      setSelect () {
        this.$nextTick(() => {
          this.tableList.forEach((row) => {
            this.selectList.forEach((selected, index) => {
              if (selected.productCode === row.code) {
                this.$refs.equiTable.toggleRowSelection(row, true);
              }
            });
          });
        });
      },
      // 取消选中
      handleSelect (selection, row) {
        if (!selection.find((i) => i.id === row.id)) {
          const index = this.selectList.findIndex(
            (itm) => row.code == itm.productCode
          );
          console.log(index);
          if (index > -1) {
            this.selectList.splice(index, 1);
          }
        }
      },
      // 选择
      selected () {
        this.$emit('choose', [
          ...this.selection,
          ...this.selectList.filter(
            (i) => !this.selection.find((p) => p.code === i.productCode)
          )
        ]);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    max-height: 530px;
    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>