pms-iot-vue/src/views/pms/device/completeSet/AssociationDevices.vue

<template>
  <div v-loading="loading" style="height: 100%">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="设备编码" prop="deviceCode">
          <el-input
            v-model="queryParams.deviceCode"
            placeholder="请输入设备编码"
            clearable
            @keyup.enter="handleQuery"
            class="!w-200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"
            ><Icon icon="ep:search" class="mr-5px" /> {{ t('devicePerson.search') }}</el-button
          >
          <el-button @click="resetQuery"
            ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('devicePerson.reset') }}</el-button
          >
        </el-form-item>
      </el-form>
    </ContentWrap>
    <el-table :data="deviceList" style="width: 100%">
      <!-- 序号 -->
      <el-table-column :label="t('monitor.serial')" width="70" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="成套名称" align="center" />
      <el-table-column prop="deviceName" :label="t('iotDevice.name')" align="center" />
      <el-table-column prop="deviceCode" label="设备编码" align="center" />
      <el-table-column prop="ifMaster" label="是否主设备" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.ifMaster" class="text-[#62a66a]">是</el-tag>

          <el-tag v-else class="text-[#9093a6]" type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ifMaster" label="创建时间" align="center">
        <template #default="scope">
          {{ formatToDate(scope.row.createTime) }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getDeviceList(props.deviceId)"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatToDate } from '@/utils/dateUtil'
import { IotDeviceApi } from '@/api/pms/device'
const { t } = useI18n() // 国际化
defineOptions({
  name: 'AssociationDevices'
})

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deviceId: '',
  deviceCode: ''
})
const loading = ref(false)
const total = ref(0) // 列表的总页数
const deviceList = ref([])

const props = defineProps({
  deviceId: Number
})

const handleQuery = () => {
  queryParams.pageNo = 1
  getDeviceList(props.deviceId)
}

const resetQuery = () => {
  queryParams.deviceCode = ''
  handleQuery()
}

const getDeviceList = async (id) => {
  loading.value = true
  try {
    queryParams.deviceId = id
    const res = await IotDeviceApi.getIotDeviceSetRelation(queryParams)
    deviceList.value = res.list
    total.value = res.total
  } catch (error) {
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getDeviceList(props.deviceId)
})
</script>

<style lang="scss" scoped></style>