entityControl_mobile/pagesInventory/boundDevice.vue

<template>
  <view class="container">
    <view v-if="Object.keys(deviceInfo).length" style="margin-bottom: 20rpx;">当前设备地址：{{ deviceInfo.ipAddress + ":" +
      deviceInfo.port }}({{ deviceInfo.warehouseName }}) </view>
    <view class="tableBox">
      <uni-table ref="tableRef" :loading="deviceLoading" border stripe type="selection" emptyText="暂无更多数据"
        @selection-change="selectionChange">
        <uni-tr>
          <uni-th align="center" width="100">设备IP地址</uni-th>
          <uni-th align="center" width="100">设备端口</uni-th>
          <uni-th align="center" width="100">所属仓库</uni-th>
          <uni-th align="center" width="100">所属场景</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">{{ item.ipAddress }}</uni-td>
          <uni-td align="center">{{ item.port }}</uni-td>
          <uni-td align="center">{{ item.warehouseName }}</uni-td>
          <uni-td align="center">{{ item.sceneName }}</uni-td>
        </uni-tr>
      </uni-table>
      <!-- <view class="paginationBox">
        <uni-pagination show-icon :page-size="deviceParams.pageSize" :current="deviceParams.pageNum" :total="deviceTotal" @change="deviceChange" />
      </view> -->
    </view>
    <uv-button type="primary" text="确定" size="large" class="btn mainBtn" @tap="bindDevice">绑 定 设 备</uv-button>
  </view>
</template>

<script setup>
import { deviceList } from "@/api/device"
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";


const tableRef = ref("")
// 当前页
const deviceParams = ref({
  pageNum: 1,
  pageSize: 100
})
// 数据总量
const deviceTotal = ref(0)
const deviceLoading = ref(false)
const tableData = ref([])
const selectedIndexs = ref([])
// 选择设备
const selectionChange = (e) => {
  selectedIndexs.value = e.detail.index
}

// 获取列表
const getList = () => {
  deviceList(deviceParams.value).then(res => {
    if (deviceParams.value.pageNum == 1) {
      tableData.value = res.rows
    } else {
      tableData.value = tableData.value.concat(res.rows)
    }
    deviceTotal.value = res.total
  })
}

// 分页触发
const deviceChange = (e) => {
  tableRef.value.clearSelection()
  deviceParams.value.pageNum = e.current
  getList()
}

const deviceInfo = ref({})
// 绑定设备
const bindDevice = () => {
  console.log(selectedIndexs.value)
  if (selectedIndexs.value.length == 0) {
    uni.showToast({
      title: '请至少选择一个设备绑定！',
      icon: 'none'
    });
  } else if (selectedIndexs.value.length > 1) {
    uni.showToast({
      title: '只能选择一个设备绑定！',
      icon: 'none'
    });
  } else {
    uni.setStorageSync("deviceInfo", tableData.value[selectedIndexs.value[0]])
    deviceInfo.value = tableData.value[selectedIndexs.value[0]]
  }
}

// 判断是否绑定了设备
const judgeBinded = () => {
  if (uni.getStorageSync("deviceInfo") && Object.keys(uni.getStorageSync("deviceInfo")).length > 0) {
    deviceInfo.value = uni.getStorageSync("deviceInfo")
    // uni.removeStorageSync('deviceInfo');
    console.log("有数据")
  } else {
    console.log("无数据")
  }
}

onLoad(() => {
  judgeBinded()
  getList()
})


</script>

<style scoped lang="scss">
.container {
  padding: 32rpx;
  position: relative;

  .tableBox {
    padding-bottom: 120rpx;
  }

  .paginationBox {
    margin-top: 20rpx;
  }

  .btn {
    position: fixed;
    width: calc(100vw - 64rpx);
    bottom: 0;
    left: 32rpx;
    z-index: 9999;
  }
}
</style>