bindGate.vue

<template>
  <el-dialog :title="$t('table.entranceAndExitBinding')" class="manage-dialog bind-dialog bind-middle-dialog"
    :visible.sync="bindVisible" :close-on-click-modal="false" @close="closeBindDialog">
    <el-row>
      <el-col :span="8">
        <div class="gate-list-wrapper">
          <div class="origin-input-box">
            <input type="value" :placeholder="$t('pholder.Site')" @keyup="filterGateList" v-model="bindVal"
              class="origin-input__inner" />
            <i class="el-icon-search bind-search"></i>
          </div>
          <el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:100%;max-height: 306px;">
            <ul class="gate-list-left">
              <li class="gate-item" @mouseover="selectStyle (item) " @mouseout="outStyle(item)"
                v-for="(item, index) in gateList" :key="index">
                <span class="gate-item-text" :title="item.name">{{ item.name }}</span>
                <span class="configBtn" v-show="item.isHover" @click="checkGate(index)">{{$t('button.choose')}}</span>
              </li>
              <li v-if="gateList.length == 0">{{ noDataText }}</li>
            </ul>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="gate-list-wrapper">
          <p class="band-box">{{$t('dialog.arbindS')}}</p>
          <el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:100%;max-height: 306px;">
            <ul class="gate-list-left">
              <li class="bind-gate-item" v-for="(gateItem, index) in bindGateList" :key="index">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <span class="name" :title="gateItem.gate.name">{{ gateItem.gate.name }}</span>
                  </el-col>
                  <el-col :span='12'>
                    <div>
                      <el-radio-group v-model="gateItem.type" @change="radioChange(gateItem)">
                        <el-radio :label="1">{{$t('format.gateDirection')}}</el-radio>
                        <el-radio :label="2">{{$t('format.gateReverse')}}</el-radio>
                      </el-radio-group>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <el-button type="text" class="delBtn" @click="cancelBind(gateItem)">{{$t('button.delete')}}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </li>
              <!-- <li :class="cancelBtnDisabled ? 'bind-gate-item bind-disabled' : 'bind-gate-item'"
                v-for="(gateItem, gateIndex) in bindGateList" :key="gateIndex" @click="cancelBind(gateIndex)">
                <el-button class="gate-btn" :style="{ 'border-color': gateItem.btnColor }"
                  :title="gateItem.label + gateItem.direction">{{ gateItem.label + ' ' + gateItem.direction }}
                </el-button>
                <i class="el-icon-circle-close gate-close-btn" :title="$t('dialog.unbind')"></i>
              </li> -->
            </ul>
          </el-scrollbar>
        </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,
        bindFloorId: '',
        bindVal: '',
        floorAllGate: [],
        gateList: [],
        bindGateList: [],
        noDataText: '',
        bindBtnDisabled: false,
        cancelBtnDisabled: false,
        mallId: ''
      }
    },
    methods: {
      dialogInit(row) {
        this.bindFloorId = row.id;
        this.mallId = row.mallId;
        this.getFloorAllGate(row.mallId);
        this.bindVisible = true;
      },
      getFloorAllGate(mall_id) {
        this.floorAllGate = [];
        this.$api.base.gate({
            mallId: mall_id,
            status: 1,
          })
          .then(res => {
            let result = res.data;
            this.floorAllGate = result.data;
            this.getFloorGates(this.bindFloorId);
          })
      },
      getFloorGates(floor_id) {
        this.gateList = [];
        this.bindGateList = [];
        this.$api.base.floorGate({
            floorId: floor_id,
          })
          .then(res => {
            let result = res.data;
            let obj = {},
              temp = {},
              allGateTemp = {};
            //if (result.data.length > 0) {
              // 筛选未绑定监控点
              result.data.forEach((item, index) => {
                this.floorAllGate.forEach((gateItem,gateIndex) => {
                  if (gateItem.id == item.gateId) {
                    this.floorAllGate.splice(gateIndex, 1)
                  }
                })
              })
              this.gateList = this.floorAllGate
              this.bindGateList = result.data
              window.sessionStorage.setItem('bindlist', JSON.stringify(this.gateList));
            //}
          })
      },
      selectStyle(item) {
        this.$set(item, 'isHover', true);
      },
      outStyle(item) {
        this.$set(item, 'isHover', false);
      },
      filterGateList() {
        let sVal = this.bindVal.replace(/\s+/g, '').toLocaleLowerCase();
        let localList = JSON.parse(window.sessionStorage.getItem('bindlist'));
        if (sVal == '') {
          this.gateList = localList;
          return;
        }
        let filterArr = [];
        this.gateList.filter(item => {
          if (((item.label).toLocaleLowerCase()).indexOf(sVal) !== -1) {
            filterArr.push(item);
          }
        })
        if (filterArr.length == 0) {
          localList.forEach(item => {
            if (((item.label).toLocaleLowerCase()).indexOf(sVal) !== -1) {
              filterArr.push(item);
            }
          })
        }
        if (filterArr.length == 0) {
          this.noDataText = this.$t('navData.nodata');
        }
        this.gateList = filterArr;
      },
      checkGate(index) {
        let itemObj = this.gateList[index]
        this.$api.management.addFloorGate({
            floorId: itemObj.floorId,
            gateId: itemObj.id,
            type: 1,
            createUser: this.$cookie.get('userId'),
            modifyUser: this.$cookie.get('userId')
          }).then((res) => {
            if (res.data.code == 200) {
              this.getFloorAllGate(this.mallId)
              this.$parent.getTableData();
            } else {
              this.$message({
                showClose: true,
                type: 'info',
                message: this.$t('message.bind') + res.data.msg
              });
            }
            this.bindBtnDisabled = false;
          })
      },
      radioChange(itemObj){
        this.$api.management.addFloorGate({
            floorId: itemObj.floorId,
            gateId: itemObj.id,
            type: itemObj.type,
            createUser: this.$cookie.get('userId'),
            modifyUser: this.$cookie.get('userId')
          }).then((res) => {
            if (res.data.code == 200) {
              this.getFloorAllGate(this.mallId)
            } else {
              this.$message({
                showClose: true,
                type: 'info',
                message: this.$t('message.bind') + res.data.msg
              });
            }
          })
      },
      cancelBind(item) {
        let isDup = false,
          obj = {},
          labelText = '';
        this.$confirm(this.$t('message.confirDelete'), this.$t('message.prompt'), {
            confirmButtonText: this.$t('message.confirm'),
            cancelButtonText: this.$t('message.cancel'),
            type: 'warning'
          })
          .then(() => {
            this.cancelBtnDisabled = true;
            this.$api.management.delFloorGate(item.id, {})
              .then((res) => {
                if (res.data.code == 200) {
                  this.getFloorAllGate(this.mallId)
                } else {
                  this.$message({
                    showClose: true,
                    type: 'info',
                    message: this.$t('message.uploadFailed') + res.data.msg
                  })
                }
                this.cancelBtnDisabled = false;
              })
              .catch(err => {
                this.$throw(err)
                this.cancelBtnDisabled = false;
              });
          })
      },
      closeBindDialog() {
        this.gateList.forEach(item => {
          item.isCheck = false;
        })
        this.bindVal = '';
        this.bindGateList.length = 0;
        this.noDataText = 'load';
      },
    },
    beforeDestroy() {
      window.sessionStorage.removeItem('bindlist');
    },
  }
</script>
<style lang="less" scoped="scoped">
  .gate-list-wrapper,
  .gate-list-right {
    .title1 {
      color: #000;
      font-weight: 900;
      border-bottom: 1px solid #dedede;
      padding-bottom: 10px;
    }
  }

  .type {
    color: #000 !important;
    margin-right: 8px;
  }

  .configBtn {
    color: #409EFF;
    display: inline-block;
    width: 18%;
    text-align: right;
  }

  .bind-gate-item {
    min-width: 360px;

    .name {
      display: inline-block;
      color: #666;
      font-size: 14px;
      max-width: 90%;
      min-width: 120px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .delBtn {
      padding: 0;
      vertical-align: top;
    }
  }

  .gate-item {
    .gate-item-text {
      width: 80% !important;
      font-size: 14px;
    }
  }
</style>