kd-aiot-frontend-mes/src/views/unacceptedProduct/components/EquipmentDialog.vue

<template>
  <el-dialog
    title="选择产品"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <div>
      <el-row>
        <el-col :span="24" class="topsearch">
          <el-form @submit.native.prevent="() => reload()">
            <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.enter.native="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="treeIds"
            :typeS="typeS"
            :paramsType="'type'"
            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"
            :current.sync="current"
            highlight-current-row
            @select="handleSelect"
            cache-key="systemRoleTable3"
            aaaaaa
            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>
  </el-dialog>
</template>

<script>
  import AssetTree from '@/components/AssetTree/newIndex.vue';
  import { getList } from '@/api/classifyManage/index';
  export default {
    components: {
      AssetTree
    },
    props: {
      selectList: Array,
      type: {
        default: 2 //1多选 2单选
      },
      treeIds: {
        default: () => {
          return ['9'];
        }
      },
      typeS: {
        default: () => {
          return [];
        }
      },
      disabledCode: {
        default: () => {
          return [];
        }
      }
    },
    data() {
      return {
        equipmentdialog: false,
        current: null,

        tableList: [],
        categoryLevelId: null,
        code: null,
        searchKey: '',
        selection: []
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true,
            show: this.type == 1,
            selectable: (row, index) => {
              return !this.disabledCode.includes(row.code);
            }
          },
          {
            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
          }
        ];
      }
    },

    watch: {},
    methods: {
      async datasource({ page, limit }) {
        const params = {
          code: this.code,
          searchKey: this.searchKey,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId,
          isProduct: true,
          isEnable: 1
        };
        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.searchKey = '';
        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() {
        let list = this.type == 1 ? this.selection : [this.current];
        this.$emit('choose', JSON.parse(JSON.stringify(list)));
        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>