kd-aiot-frontend/src/views/classifyManage/itemInformation/components/AddDialog.vue

<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="65%"
  >
    <div>
      <el-row>
        <el-col :span="24" class="topsearch">
          <el-form>
            <el-row>
              <el-col :span="6">
                <el-input
                  v-model="searchForm.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">
          <!-- <vTreeList
            @handleNodeClick="handleNodeClick"
            ref="commonTree"
            :defaultExpandAll="false"
            :defaultExpandedKeys="defaultExpandedKeys"
            :type="typeValue"
          /> -->
          <AssetTree
            :props="defaultProps"
            :default-expanded-keys="defaultExpandedKeys"
            :expand-on-click-node="false"
            node-key="id"
            paramsType="type"
            :type="typeValue"
            :init="false"
            ref="tree"
            :highlight-current="true"
            @handleNodeClick="handleNodeClick"
          />
        </el-col>
        <el-col :span="18" class="table_col">
          <el-table
            :data="tableData"
            height="450"
            highlight-current-row
            @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
            ref="tableRef"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
              :reserve-selection="true"
            ></el-table-column>
            <el-table-column
              label="物品编码"
              prop="informationCode"
              width="130"
            ></el-table-column>
            <el-table-column
              label="物品名称"
              prop="informationName"
            ></el-table-column>
            <el-table-column
              label="牌号"
              prop="brandNum"
              v-if="dialogTitle != '选择设备' && dialogTitle != '选择备品备件'"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="modelType"
              v-if="dialogTitle != '选择物料'"
            ></el-table-column>
            <el-table-column
              label="收缩系数"
              prop="shrinkageCoefficient"
              v-if="dialogTitle == '选择模具'"
            >
              <template slot-scope="scope">
                <span>
                  {{ JSON.parse(scope.row.extendField).shrinkageCoefficient }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="大模体型号"
              prop="dieBodyModel"
              v-if="dialogTitle == '选择模具'"
              width="120"
            >
              <template slot-scope="scope">
                <span>
                  {{ JSON.parse(scope.row.extendField).dieBodyModel }}
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
              :page-sizes="[15, 30, 50, 100, 500]"
              :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';
  import { getList } from '@/api/classifyManage/itemInformation';
  export default {
    components: { AssetTree },
    props: {
      typeValue: {
        type: String,
        default: ''
      },
      mapList: {
        type: Array,
        default: []
      },
      dialogTitle: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        treeLoading: false,
        equipmentdialog: false,
        defaultExpandedKeys: [],
        tableData: [],
        currentTreeData: {},
        pagination: {
          page: 1,
          size: 10,
          total: 0
        },
        searchForm: {},
        defaultProps: {
          children: 'children',
          value: 'code',
          label: 'name'
        },
        currentKey: null,
        tableSelectionList: []
      };
    },
    watch: {
      equipmentdialog (val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.tree.getTreeData().then(() => {
              if (this.tableData.length) this.$refs.tableRef.clearSelection();
              this.$nextTick(() => {
                this.mapList.forEach((item) => {
                  const row = this.tableData.find((i) => i.id === item.id);
                  if (row) {
                    this.$refs.tableRef.toggleRowSelection(row, true);
                  }
                });
              });
            });
          });
          // if(this.tableData.length)  this.$refs.tableRef.clearSelection()
        }
      },
      typeValue (val) {
        if (val) {
          this.currentKey = null;
        }
      }
    },
    methods: {
      handleClose () {
        this.equipmentdialog = false;
        this.tableSelectionList = [];
      },

      handleCurrent (page) {
        this.pagination.page = page;
        this.handleList();
      },
      handleSize (size) {
        this.pagination.page = 1;
        this.pagination.size = size;
        this.handleList();
      },

      handleSelectionChange (val) {
        this.tableSelectionList = val;
      },
      // handleCurSelectionChange (selection, row) {

      // },

      toDelete (val) {
        console.log('触发删除', val);
      },

      getRowKeys (row) {
        return row.id;
      },

      // 确定
      selected () {
        this.$emit('submit', this.tableSelectionList);
        this.handleClose();
      },

      // 树点击事件
      handleNodeClick (data, node) {
        if (data.id === this.currentTreeData.id) return;
        this.currentTreeData = data;
        this.searchForm.classificationId = data.id;
        this.handleList();
      },

      async handleList () {
        const params = {
          ...this.searchForm,
          ...this.pagination
        };
        const res = await getList(params);
        if (res?.success) {
          this.tableData = res.data.records;
          this.pagination.total = res.data.total;
          if (this.tableData.length) this.$refs.tableRef.clearSelection();
          this.$nextTick(() => {
            this.mapList.forEach((item) => {
              const row = this.tableData.find((i) => i.id === item.id);
              if (row) {
                this.$refs.tableRef.toggleRowSelection(row, true);
              }
            });
          });
        }
      },

      // 弹窗 - 按关键字搜索
      searchByKeyWords () {
        if (!this.currentTreeData) {
          this.$message.warning('请先选择设备！');
          return;
        }
        this.pagination.page = 1;
        this.handleList();
      },
      // 重置
      reset () {
        this.pagination.page = 1;
        this.searchForm.searchKey = '';
        this.handleList();
      },

      // 设置默认高亮行
      setCurrentKey (id) {
        this.currentKey = id;
        this.$refs.tree.setCurrentKey(this.currentKey);
      }
    }
  };
</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;
    :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>