kd-aiot-frontend/src/views/rulesManagement/releaseRules/components/bindSubstanceList.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
    :maxable="true"
  >
    <el-card shadow="never">
      <ele-split-layout
        width="266px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              :data="treeList"
              :props="{
                children: 'children',
                value: 'id',
                label: 'name'
              }"
              node-key="id"
              ref="tree"
              :highlight-current="true"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              v-bind="$attrs"
              :default-expand-all="true"
            >
            </el-tree>
          </div>
        </div>
        <template v-slot:content>
          <ele-pro-table
            max-height="500px"
            ref="table"
            :columns="columns"
            :datasource="physicalList"
            @selection-change="handleSelectionChange"
            row-key="id"
            :initLoad="false"
            :needPage="false"
          >
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>

    <div class="rx-sc">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    queryBindSubstanceList,
    getPhysicalModel,
    getDetailInfo
  } from '@/api/material/list';
  import { getAssetInfo } from '@/api/ledgerAssets/index.js';
  export default {
    components: {},
    props: {
      // 是否多选
      multiple: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      seekList() {
        return [
          {
            label: '名称',
            value: 'name',
            type: 'input',
            placeholder: '请输入'
          }
        ];
      },
      // 表格列配置
      columns() {
        const list = [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',

            reserveSelection: true,
            fixed: 'left'
          },
          {
            columnKey: 'index',
            type: 'index',
            label: '序号',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'identifier',
            label: '点位',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'dataType.specs.max',
            label: '最大值',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'dataType.specs.min',
            label: '最小值',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'dataType.specs.unitName',
            label: '单位',
            showOverflowTooltip: true,
            minWidth: 180
          }
        ];

        return list;
      }
    },
    data() {
      return {
        visible: false,
        title: '选择',

        type: null,
        // 表格选中数据
        selection: [],
        physicalList: [],
        cachingData: {},
        treeList: [],
        current: null
      };
    },

    watch: {},
    methods: {
      /* 表格数据源 */
      async queryBindSubstanceList(id) {
        let data = await queryBindSubstanceList({
          id,
          pageNum: 1,
          size: 1000
        });
        this.treeList[0].children = data.list;
      },
      getPhysicalModel(id) {
        getPhysicalModel(id).then((res) => {
          this.physicalList = [];
          if (res.code == 0) {
            this.physicalList = res.data.properties;
            if (this.cachingData[id]) {
              this.$refs.table.setSelectedRows(this.cachingData[id].list);
            }
          }
        });
      },

      handleNodeClick(data) {
        // if (data.id == this.treeList[0].id) {
        //   this.physicalList = [];
        //   return;
        // }
        this.current = data;
        this.$refs.table.clearSelection();
        this.getPhysicalModel(data.id);
      },
      async open(id) {
        const data = await getAssetInfo(id);
        console.log(data);

        this.visible = true;
        if (id) {
          this.treeList.push({
            ...data,
            children: []
          });
          this.$nextTick(() => {
            this.queryBindSubstanceList(id);
          });
        }
      },

      handleSelectionChange(data) {
        this.cachingData[this.current.id] = {
          substanceCode: this.current.code,
          substanceId: this.current.id,
          substanceName: this.current.name,
          iotId: this.current.iotId,
          list: data
        };
      },
      handleClose() {
        this.physicalList = [];
        this.cachingData = [];
        this.treeList = [];
        this.visible = false;
      },
      selected() {
        let cachingData = [];
        let list = [];
        for (let key in this.cachingData) {
          cachingData.push(this.cachingData[key]);
        }

        if (!cachingData.length) {
          this.$message.warning('请选择设备点位！');
          return;
        }
        cachingData.forEach((item) => {
          item.list.forEach((listItem) => {
            list.push({
              substanceCode: item.substanceCode,
              substanceId: item.substanceId,
              substanceName: item.substanceName,
              iotId: item.iotId,
              paramCode: listItem.identifier,
              paramValue: listItem.name,
              maxValue: listItem.dataType?.specs.max,
              minValue: listItem.dataType?.specs.min,
              unitName: listItem.dataType?.specs.unitName
            });
          });
        });
        this.$emit('bindSubstanceSuccess', list);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .rx-sc {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ml60 {
    margin-left: 60px;
  }

  :deep(.radio) {
    .el-radio__label {
      padding: 0;
    }
  }
</style>