bindDev.vue

<template>
  <el-dialog :title="$t('table.deviceBind')" class="manage-dialog bind-dialog bind-middle-dialog"
    :visible.sync="bindVisible" :close-on-click-modal="false" @close="closeBindDialog">
    <el-row :gutter="20" class="bindSer">
      <el-col :span="8">
        <div class="gate-list-wrapper">
          <div class="origin-input-box">
            <input type="value" :placeholder="$t('pholder.deviceNumber')" @keyup="filterGateList" v-model="bindVal"
              class="origin-input__inner" />
            <i class="el-icon-search bind-search"></i>
            <el-button type="primary" @click="bindDevFun" class="dialog-btn dialog-confirm-btn" >
              {{$t('button.bind')}}
            </el-button>
          </div>
          <el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:500px;margin-top: 10px;">
            <ul class="gate-list-left">
                <el-checkbox-group v-model="chooseDevice">
                    <el-checkbox class="checkBox" v-for="(item, index) in deviceAllList" :key="index" :label="item.serialnum"></el-checkbox>
                </el-checkbox-group>
            </ul>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="gate-list-wrapper">
          <el-table :data="bindDevList" :height="538" style="width: 100%;">
              <el-table-column :label="$t('table.order')" align="center" type="index" width="80"></el-table-column>
              <el-table-column label="IP" align="center" prop="ip"></el-table-column>
              <el-table-column :label="$t('table.deviceNum')" align="center" prop="serialnum"></el-table-column>
              <el-table-column :label="$t('table.operate')" align="center" width="80">
                <template slot-scope="scope">
                  <el-button type="text" size="small" class="tab-btn" @click="delHandle(scope.row)">{{$t('button.delete')}}</el-button>
                </template>
              </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="bindVisible = false">
        {{$t('button.closed')}}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        bindVisible: false,
        noDataText: '',
        mallId: '',
        areaId:'',
        bindVal:'',
        deviceAllList:[],//所有设备
        chooseDevice:[],//选中的设备
        bindDevList:[],//已绑定的设备
        otherDevList:[]//绑定之外剩余的设备
      }
    },
    methods: {
      dialogInit(row) {
        this.areaId = row.id;
        this.mallId = row.mallId;
        this.chooseDevice = []
        this.getAllDev(row.mallId);
        this.bindVisible = true;
      },
      bindDevFun(){
          if(this.chooseDevice.length<1){
              this.$message({
                type: 'warning',
                message: this.$t('pholder.deviceNumber')
              });
              return
          }
          if(this.bindDevList && this.bindDevList.length>0){
              this.bindDevList.forEach(item=>{
                  this.chooseDevice.push(item.serialnum)
              })
          }
          let parmas={
            areaId:this.areaId,
            serialnumArr:this.chooseDevice
          }
          this.$api.queueManagementApi.bindDevices(parmas).then(data => {
              let result = data.data;
              if(result.code==200){
                this.$message({
                  message: result.msg,
                  type: 'success'
                });
                this.chooseDevice = []
                this.getAllDev(this.mallId)
              }else{
                this.$message({
                  message: result.msg,
                  type: 'error'
                });
              }
          })
      },
      delHandle(row){
          let bindList = []
          this.bindDevList.forEach(item=>{
              if(item.serialnum != row.serialnum){
                  bindList.push(item.serialnum)
              }
          })
          let parmas={
            areaId:this.areaId,
            serialnumArr:bindList
          }
          this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
            confirmButtonText: this.$t("message.confirm"),
            cancelButtonText: this.$t("message.cancel"),
            type: "warning"
          }).then(() => {
              this.$api.queueManagementApi.bindDevices(parmas).then(res => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.chooseDevice = []
                    this.getAllDev(this.mallId)
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            })
      },
      // 所有设备
      getAllDev(mall_id) {
          let tabelParams = {
            accountId: this.$cookie.get("accountId"),
            mallId: mall_id,
            page: this.currentPage,
            pageSize: 99999999,
            sortName: "sort_ip",
            sortOrder: "ASC"
          };
        this.$api.management.deviceFilterList('/devices/filter', tabelParams).then(data => {
            let result = data.data;
            this.deviceAllList = result.data;
            this.getDevs()
        })
      },
      // 已绑定的设备
      getDevs() {
        this.bindDevList = [];
        this.$api.queueManagementApi.getDevices({
            areaId: this.areaId,
        }).then(res => {
            let result = res.data;
            // 过滤设备
            result.data.forEach((item, index) => {
              this.deviceAllList.forEach((gateItem,gateIndex) => {
                if (gateItem.serialnum == item.serialnum) {
                    item.ip = gateItem.localIp
                    this.deviceAllList.splice(gateIndex, 1)
                }
              })
            })
            this.bindDevList = result.data
            window.sessionStorage.setItem('bindDevlist', JSON.stringify(this.deviceAllList));
          })
      },
      filterGateList() {
        let sVal = this.bindVal;
        let localList = JSON.parse(window.sessionStorage.getItem('bindDevlist'));
        if (sVal == '') {
          this.deviceAllList = localList;
          return;
        }
        let filterArr = [];
        this.deviceAllList.filter(item => {
          if ((item.serialnum).indexOf(sVal) !== -1) {
            filterArr.push(item);
          }
        })
        if (filterArr.length == 0) {
          localList.forEach(item => {
            if ((item.serialnum).indexOf(sVal) !== -1) {
              filterArr.push(item);
            }
          })
        }
        if (filterArr.length == 0) {
          this.noDataText = this.$t('navData.nodata');
        }
        this.deviceAllList = filterArr;
      },
      closeBindDialog() {
        this.bindVisible = false
      },
    }
  }
</script>
<style lang="less" scoped="scoped">
  .bindSer{
    .gate-list-wrapper{
        height: auto;
        border: 1px solid #ccc;
    }
    .origin-input-box {
        width: 100%;
        position: relative;
        margin: 3px 5px;
        height: 32px;
        line-height: 32px;
    }
    .origin-input__inner {
        width: 70%;
        height: 32px;
        line-height: 32px;
        padding: 7px 20px 5px;
        outline: none;
        border-radius: 2px;
        border: none;
        font-size: 13px;
        background-color: #eee;
        box-sizing: border-box;
    }

    .origin-input__inner::-webkit-input-placeholder,
    .origin-input__inner::-moz-placeholder,
    .origin-input__inner::-ms-placeholder {
        color: #bbb;
    }
    .bind-search {
        color: #888;
        position: absolute;
        left: 3px;
        top: 9px;
        right: 0 !important;
        width: 13px;
    }
  }

    .checkBox{
        margin: 5px 15px;
    }
</style>