ibms/src/components/ledger/tableTransfers.vue

<template>
  <el-dialog title="关联设备" :before-close="close" :visible.sync="dialog.relevance" width="900px">
    <div id="tableTransfers">
      <div class="main-left">
        <h4>未关联该系统的设备</h4>
        <div class="border-view">
          <div class="search">
            <div class="search-small" style="padding: 10px 10px 0 10px">
              <el-input placeholder="输入设备名称进行查询" v-model="search1" style="width:300px;margin-right: 10px;" size="small" clearable></el-input>
              <el-button @click="getLeftData" size="small">查找</el-button>
            </div>
            <div class="search-small" style="padding: 10px">
              <floor-cascader :isWidth="false" @change="changeBuild"></floor-cascader>
              <cascader :isWidth="false" @change="changeCascader" :all="true"></cascader>
            </div>
          </div>
          <el-table ref="multipleTable" :data="tableData" height="300px" tooltip-effect="dark" style="width: 100%" class="data-table"
            @selection-change="handleSelectionChange" v-loading="isLoading1" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="设备名称" width="120">
              <template slot-scope="scope">{{ scope.row.EquipLocalName || scope.row.EquipName }}</template>
            </el-table-column>
            <el-table-column label="设备编号" width="120">
              <template slot-scope="scope">{{ scope.row.EquipLocalID || "--" }}</template>
            </el-table-column>
            <el-table-column label="设备类" show-overflow-tooltip>
              <template slot-scope="scope">{{ getName(scope.row.Category) }}</template>
            </el-table-column>
            <el-table-column prop="address" label="安装位置" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.InstallLocation || "--" }}</template>
            </el-table-column>
          </el-table>
          <div class="right">
            <my-pagination @change="changePages1" :page="pages1"></my-pagination>
          </div>
        </div>
      </div>
      <div class="main-button">
        <el-button class="top" @click="rightToLeft" :disabled="SelectionList && SelectionList.length ? false : true"
          :type="SelectionList && SelectionList.length ? 'primary' : ''" icon="el-icon-arrow-left" circle></el-button>
        <el-button class="bottom" @click="leftToRight" :disabled="multipleSelection && multipleSelection.length ? false : true"
          :type="multipleSelection && multipleSelection.length ? 'primary' : ''" icon="el-icon-arrow-right" circle></el-button>
      </div>
      <div class="main-right">
        <h4>已关联该系统的设备</h4>
        <div class="border-view">
          <div class="search">
            <div class="search-big">
              <el-input placeholder="输入设备名称进行查询" v-model="search2" style="width:200px; margin-bottom: 10px;" size="small" clearable>
              </el-input>
              <el-button @click="getRightData" size="small">查找</el-button>
            </div>
          </div>
          <el-table ref="multipleTable" :data="table2Data" height="300px" tooltip-effect="dark" style="width: 100%" class="data-table"
            @selection-change="tableChange" v-loading="isLoading2" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="设备名称">
              <template slot-scope="scope">{{ scope.row.EquipLocalName || scope.row.EquipName }}</template>
            </el-table-column>
          </el-table>
          <div class="right">
            <my-pagination :page="pages2" @change="changePages2" :isSmall="false"></my-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/common/myPagination";
import floorCascader from "@/components/ledger/lib/floorCascader";
import cascader from "@/components/ledger/lib/cascader";

import {
  getEquipNotInSys,
  getEquipInSys,
  getEquipBelongs,
  sysLinkEquip
} from "@/api/scan/request"
import {
  mapGetters,
  mapActions
} from "vuex";
export default {
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          relevance: false
        }
      }
    },
    id: {
      type: String
    }
  },
  components: {
    myPagination,
    floorCascader,
    cascader
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"])
  },
  data() {
    return {
      dialogVisible: true,
      pages1: {
        size: 50,
        sizes: [10, 20, 30, 50, 100, 200],
        total: 0,
        currentPage: 1
      },
      pages2: {
        size: 50,
        sizes: [10, 20, 30, 50, 100, 200],
        total: 0,
        currentPage: 1
      },
      search1: '', //左侧输条件
      search2: '',//右侧输入条件
      buildingId: '',//建筑id
      floorId: '',//楼层id
      category: '',//设备类型 
      tableData: [], //第一个表格的数据
      table2Data: [], //第二个表格的数据
      multipleSelection: [], //第一个表格的被选择数组
      SelectionList: [], //第二个表格的被选择数组
      List: [],
      isLoading1: false,
      isLoading2: false,
    };
  },
  created() {
    this.getAllData();
  },
  methods: {
    //关闭
    close(done) {
      this.$emit("close")
      done()
    },
    //根据设备类型编码获取名称
    getName(code) {
      let str = ""
      this.List.map(item => {
        if (item.code == code) {
          str = item.facility
        }
      })
      return str
    },
    //获取物理世界所有设备类型
    getAllData() {
      let param = {
        data: {
          Distinct: true,
          Orders: "EquipName asc",
          PageNumber: 1,
          PageSize: 500,
          Projection: [
            "EquipCode", "EquipName"
          ]
        }
      }
      getEquipBelongs(param, res => {
        this.List = this.formatOptions(res.Content)
      })
    },
    //格式化List数据
    formatOptions(arr) {
      let data = [];
      arr.map(t => {
        let temp = {};
        temp.code = t.EquipCode;
        temp.facility = t.EquipName;
        data.push(temp)
      })
      return data;
    },
    //获取两侧数据
    getAllTable() {
      this.pages1.currentPage = 1
      this.pages2.currentPage = 1
      this.getLeftData()
      this.getRightData()
    },
    //pages1改变
    changePages1() {
      this.getLeftData()
    },
    changePages2() {
      this.getRightData()
    },
    //修改设备类型
    changeCascader(val) {
      this.category = val.code
      this.getLeftData()
    },
    //获取未关联该系统的设备
    getLeftData() {
      this.isLoading1 = true
      let param = {
        data: {
          Filters: '',
          Orders: "EquipID desc",
          PageNumber: this.pages1.currentPage,
          PageSize: this.pages1.size
        },
        sysId: this.id
      }
      if (this.search1 != '') {
        param.data.Filters = `EquipLocalName contain "${this.search1}";`
      }
      //建筑id
      if (this.buildingId == "noKnow") {
        param.data.Filters += `buildingId isNull;`
      } else if (this.buildingId && this.buildingId != "all") {
        param.data.Filters += `buildingId='${this.buildingId}';`
      }
      //楼层id
      if (this.floorId == "noKnow") {
        param.data.Filters += `floorId isNull;`
      } else if (this.floorId && this.floorId != "all") {
        param.data.Filters += `floorId='${this.floorId}';`
      }
      //设备类型
      if (this.category) {
        param.data.Filters += `category='${this.category}';`
      }
      if (param.data.Filters) {
        param.data.Filters = param.data.Filters.substring(0, param.data.Filters.length - 1)
      } else {
        delete param.data.Filters;
      }
      getEquipNotInSys(param, res => {
        this.tableData = res.Content
        this.pages1.total = res.Total
        this.isLoading1 = false
      })
    },
    //获取已关联该系统的设备
    getRightData() {
      this.isLoading2 = true
      let param = {
        Filters: `sysId='${this.id}'`,
        Orders: "EquipID desc",
        PageNumber: this.pages1.currentPage,
        PageSize: this.pages1.size
      }
      if (this.search2 != '') {
        param.Filters += `;EquipLocalName contain "${this.search2}"`
      }
      getEquipInSys(param, res => {
        this.table2Data = res.Content
        this.pages2.total = res.Total
        this.isLoading2 = false
      })
    },
    //左侧多选框改变
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //右侧多选框发生改变
    tableChange(val) {
      this.SelectionList = val;
    },
    //关联
    leftToRight() {
      let relationList = this.multipleSelection.concat(this.table2Data)
      relationList = relationList.map(t => {
        return t.EquipID || t.EquipId
      })
      this.relationChange(relationList)
    },
    //取消关联
    rightToLeft() {
      let relationList = [];
      let tempIDs = this.SelectionList.map(t => {
        return t.EquipId
      })
      this.table2Data.map(t => {
        if (tempIDs.indexOf(t.EquipId) < 0) {
          relationList.push(t.EquipId)
        }
      })
      this.relationChange(relationList)
    },
    //更新设备 系统关系
    relationChange(arr) {
      let param = {
        SysID: this.id,
        EquipIdList: arr
      }
      sysLinkEquip(param, res => {
        this.$message.success('修改关联关系成功')
        this.getAllTable()
      })
    },
    //修改楼层
    changeBuild(val) {
      this.buildingId = val[0]
      if (val[1]) {
        this.floorId = val[1]
      }
      this.getLeftData()
    },
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.relevance) {
          this.search1 = ''
          this.search2 = ''
          this.getAllTable()
        }
      }
    }
  }
};
</script>
<style lang="less">
#tableTransfers {
  height: 500px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  h4 {
    font-size: 20px;
    font-weight: 500;
  }
  .search {
    .search-small {
      overflow: hidden;
    }
    border-bottom: #dcdfe6 1px solid;
    .search-big {
      padding: 10px;
    }
  }
  .main-left {
    float: left;
    width: 550px;
    height: 500px;
  }
  .border-view {
    border: 1px solid #ccc;
  }
  .main-button {
    float: left;
    width: 60px;
    height: 500px;
    position: relative;
    .top {
      position: absolute;
      bottom: 300px;
      left: 10px;
    }
    .bottom {
      position: absolute;
      bottom: 200px;
      left: 10px;
    }
  }
  .el-button + .el-button {
    margin: 0;
  }
  .main-right {
    height: 300px;
    float: left;
    width: 230px;
  }
}
</style>