bindDevice.vue

<template>
  <el-dialog :title="$t('dialog.deviceBind')" class="manage-dialog bind-middle-dialog bind-device-mall-dialog" :visible.sync="bindVisible" :close-on-click-modal="false" @close="bindDialogClose">
    <div class="mall-sel-box">
      <el-select class="belong-mall-sel" v-model="belongMallVal" filterable :placeholder="$t('pholder.select')+$t('table.square')">
        <el-option v-for="(mallItem, mallIndex) in belongMallList" :label="mallItem.name" :value="mallItem.id" :key="mallIndex"></el-option>
      </el-select>
    </div>
    <el-row class="search-box">
      <el-col :span="7">
        <el-input type="textarea" :rows="18" v-model="devSerialnum" size="mini" :placeholder="$t('pholder.deviceNumber')" clearable @keyup.enter.native="searchFn"></el-input>
      </el-col>
      <el-col :span="2" :offset="1" style="margin-top: 150px">
        <el-button type="primary" class="search-btn" plain size="mini" @click="searchFn">{{$t('button.search')}}</el-button>
      </el-col>
      <el-col :span="14">
        <el-table class="dev-table" :data="devList" style="width: 100%" height="400" :empty-text="noDataText" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="IP" prop="localIp" align="center"></el-table-column>
          <el-table-column :label="$t('table.deviceNum')" prop="serialnum" align="center"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="dialog-btn dialog-confirm-btn" :disabled="bindDisable" @click="bindDev">{{$t('button.binding')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      bindVisible: false,
      belongMallVal: '',
      belongMallList: [],
      devSerialnum: '',
      devList: [],
      bindDisable: false,
      noDataText: this.$t('echartsTitle.noData'),
      checkedDev: [],
    }
  },
  watch: {
  },
  methods: {
    dialogInit(curMallVal = null) {
      this.belongMallVal = curMallVal
      this.getDevMallList();
      this.bindVisible = true;
    },
    getDevMallList() {
      this.belongMallList = []
      this.belongMallVal = null
      // this.mallNoData = 'load';
      this.$api.base.mall({
        accountId: this.$cookie.get('accountId'),
        // status: 1,
        status_arr: '1,3'
        // _t: Date.parse(new Date()) / 1000
      },null,true)
        .then((data) => {
          let result = data.data;
          if (result.data.length <= 0) {
            // this.mallNoData = '数据为空';
            // this.bindForm.mallId = result[0].id;
          }
          result.data.forEach((item, index) => {
            if (index == 0) {
              // this.belongMallVal = item.id;
            }
            // 	item.isCheck = false;
            // item.className = 'gate-item';
          })
          this.belongMallList = result.data;
        })
        .catch((error) => { })
    },
    searchFn() {
      this.getAllUnbindDev();
    },
    getAllUnbindDev() {
      // if (!this.devSerialnum) return this.$message({ type: 'warning', message: this.$t('pholder.deviceNumber') })
      this.devList = [];
      this.noDataText = 'load';
      // 验证不能输入特殊字符
      // let reg = /^%.*%$/;	// 不能输入指定
      // 获取所有未绑定的设备
      // console.log('this.devSerialnum', this.devSerialnum, typeof this.devSerialnum, this.devSerialnum.replace(/\s/g, ''))
      // devSerialnum 可以设定为空, 后端做限制, 区分云平台部署和本地部署
      var uidArr = typeof this.devSerialnum === 'string' && !this.devSerialnum.replace(/\s/g, '') ? '' : this.devSerialnum.split(/[(\r\n)\r\n]+/);
      // console.log(this.devSerialnum,uidArr,uidArr.toString());
      var param = {};
      param = {
        // accountId: this.$cookie.get('accountId'),
        // mallId: this.belongMallVal,
        // status: '',
        // serialnum: this.devSerialnum ? this.devSerialnum : null,
        // localIp: this.devSerialnum ? this.devSerialnum : null,
        sortName: 'local_ip',
        sortOrder: 'DESC',
        serialnum_arr: uidArr.toString(),
        mallId_null: true,
        // _t: Date.parse(new Date()) / 1000
      }
      this.$api.management.getDevices(param)
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            if (result.data.list.length <= 0) {
              this.noDataText = this.$t('echartsTitle.noData')
            }
            this.devList = result.data.list;
          } else {
            this.$message({
              type: 'warning',
              message: result.msg
            })
            this.noDataText = this.$t('echartsTitle.noData')
          }

        })
        .catch(err => {

        })
    },
    handleSelectionChange(val) {
      this.checkedDev = val.map(item => {
        return item.id;
      })
    },
    bindDev() {
      if (this.checkedDev.length == 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: this.$t('message.deviceSelect')
        })
        return;
      }
      if (!this.belongMallVal) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: this.$t('message.selectMall')
        })
        return;
      }
      this.bindDisable = true;
      this.$api.management.batchBindDevice({
        mallId: this.belongMallVal,
        deviceIds: this.checkedDev
      })
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            this.bindDisable = false;
            this.$message({
              showClose: true,
              type: 'success',
              message: this.$t('message.bindDevice')
            })
            this.$parent.getTableData();
          } else {
            this.$message({
              showClose: true,
              type: 'error',
              message: this.$t('message.deviceFailed') + result.msg
            })
            this.bindDisable = false;
          }
        })
        .catch(err => {
          this.$message({
            showClose: true,
            type: 'error',
            message: this.$t('message.deviceFailed') + err.message
          })
          this.bindDisable = false;
        })
    },
    bindDialogClose() {
      this.devSerialnum = '';
      this.devList = [];
    },
  }
}
</script>

<style scoped>
.mall-sel-box {
  padding: 0 0 10px;
}

.belong-mall-sel {
  display: inline-block;
  width: 100%;
}

.search-box {
  margin-bottom: 10px;
}

.bind-dvice-inp {
  height: 90px !important;
}
</style>