bindDevice.vue

<template>
    <el-dialog
      :title="$t('dialog.deviceBind')"
      class="manage-dialog bind-middle-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" :placeholder="$t('pholder.mall')">
                <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="20">
                <el-input v-model="devSerialnum" class="search-inp" size="mini" placeholder="请输入设备序列号" clearable @keyup.enter.native="searchFn"></el-input>
            </el-col>
            <el-col :span="3" :offset="1">
                <el-button type="primary" class="search-btn" plain size="mini" @click="searchFn">{{$t('button.search')}}</el-button>
            </el-col>
        </el-row>
        <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>
        <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: '',
            checkedDev: [],
        }
    },
    methods: {
        dialogInit() {
			this.getDevMallList();
			if(this.$Project == 'mall') {
				this.getAllUnbindDev();
			}
            this.bindVisible = true;
        },
        getDevMallList() {
			this.belongMallList = [];
			this.belongMallVal = '';
			// 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() {
			this.devList = [];
			this.noDataText = 'load';
			// 获取所有未绑定的设备
			this.$api.management.getDevices({
				accountId: this.$cookie.get('accountId'),
				// mallId: this.mallValue,
				// status: '',
				serialnum: this.devSerialnum ? this.devSerialnum : null,
				localIp: this.devSerialnum ? this.devSerialnum : null,
				// mallId_null: true,
				// _t: Date.parse(new Date()) / 1000
			})
				.then((data) => {
					let result = data.data;
					// console.log('unbind dev:', result)
					if (result.data.list.length <= 0) {
						this.noDataText = this.$t('echartsTitle.noData')
					}
					this.devList = result.data.list;
				})
		},
        handleSelectionChange(val) {
			this.checkedDev = val.map(item => {
				return item.id;
			})
		},
        bindDev() {
			// console.log(this.checkedDev, this.curCheckMall)
			if (this.checkedDev.length == 0) 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;
					// console.log('batch bind:', result)
					if (result.code == 200) {
						this.bindVisible = 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 = '';
		},
    }
}
</script>

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

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

    .search-box {
        margin-bottom: 10px;
    }
</style>