github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Zigbee2mqtt/components/Devices.vue (about)

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {computed, h, PropType, reactive, ref, unref, watch} from 'vue'
     5  import {useAppStore} from "@/store/modules/app";
     6  import {Pagination, TableColumn} from '@/types/table'
     7  import api from "@/api/api";
     8  import {ElButton, ElSwitch} from 'element-plus'
     9  import {ApiArea, ApiZigbee2Mqtt, ApiZigbee2MqttDevice} from "@/api/stub";
    10  import {useForm} from "@/hooks/web/useForm";
    11  import {useRouter} from "vue-router";
    12  
    13  const {push, currentRoute} = useRouter()
    14  const remember = ref(false)
    15  const {register, elFormRef, methods} = useForm()
    16  const appStore = useAppStore()
    17  const {t} = useI18n()
    18  
    19  const currentBridge = ref<Nullable<ApiZigbee2Mqtt>>({})
    20  
    21  const props = defineProps({
    22    modelValue: {
    23      type: Object as PropType<Nullable<ApiZigbee2Mqtt>>,
    24      default: () => undefined
    25    }
    26  })
    27  
    28  interface TableObject {
    29    tableList: ApiZigbee2MqttDevice[]
    30    params?: any
    31    loading: boolean
    32    sort?: string
    33  }
    34  
    35  interface Params {
    36    page?: number;
    37    limit?: number;
    38    sort?: string;
    39  }
    40  
    41  const tableObject = reactive<TableObject>(
    42      {
    43        tableList: [],
    44        loading: false,
    45        sort: '-id'
    46      },
    47  );
    48  
    49  const columns: TableColumn[] = [
    50    {
    51      field: 'id',
    52      label: t('zigbee2mqtt.id'),
    53      width: "160px",
    54      sortable: true
    55    },
    56    {
    57      field: 'model',
    58      label: t('zigbee2mqtt.model'),
    59      sortable: true
    60    },
    61    {
    62      field: 'status',
    63      label: t('zigbee2mqtt.status'),
    64      width: "100px",
    65      sortable: true
    66    },
    67    {
    68      field: 'description',
    69      label: t('zigbee2mqtt.description'),
    70      sortable: true
    71    },
    72  ]
    73  const paginationObj = ref<Pagination>({
    74    currentPage: 1,
    75    pageSize: 50,
    76    total: 0,
    77  })
    78  const currentID = ref('')
    79  
    80  const getList = async () => {
    81    tableObject.loading = true
    82  
    83    let params: Params = {
    84      page: paginationObj.value.currentPage,
    85      limit: paginationObj.value.pageSize,
    86      sort: tableObject.sort,
    87    }
    88  
    89    if (!currentBridge.value?.id) {
    90      return
    91    }
    92  
    93    const res = await api.v1.zigbee2MqttServiceDeviceList(currentBridge.value?.id, params)
    94        .catch(() => {
    95        })
    96        .finally(() => {
    97          tableObject.loading = false
    98        })
    99    if (res) {
   100      const {items, meta} = res.data;
   101      tableObject.tableList = items;
   102      paginationObj.value.currentPage = meta.pagination.page;
   103      paginationObj.value.total = meta.pagination.total;
   104    } else {
   105      tableObject.tableList = [];
   106    }
   107  }
   108  
   109  watch(
   110      () => props.modelValue,
   111      (val?: ApiZigbee2Mqtt) => {
   112        if (val === unref(currentBridge)) return
   113        currentBridge.value = val
   114        getList()
   115      },
   116      {
   117        immediate: true
   118      }
   119  )
   120  
   121  watch(
   122      () => paginationObj.value.currentPage,
   123      () => {
   124        getList()
   125      }
   126  )
   127  
   128  watch(
   129      () => paginationObj.value.pageSize,
   130      () => {
   131        getList()
   132      }
   133  )
   134  
   135  const sortChange = (data) => {
   136    const {column, prop, order} = data;
   137    const pref: string = order === 'ascending' ? '+' : '-'
   138    tableObject.sort = pref + prop
   139    getList()
   140  }
   141  
   142  const selectRow = (row) => {
   143  
   144  }
   145  
   146  </script>
   147  
   148  <template>
   149  
   150    <Table
   151        :selection="false"
   152        v-model:pageSize="paginationObj.pageSize"
   153        v-model:currentPage="paginationObj.currentPage"
   154        :showUpPagination="20"
   155        :columns="columns"
   156        :data="tableObject.tableList"
   157        :loading="tableObject.loading"
   158        :pagination="paginationObj"
   159        @sort-change="sortChange"
   160        style="width: 100%"
   161        @current-change="selectRow"
   162    />
   163  
   164  </template>
   165  
   166  <style lang="less">
   167  
   168  .el-table__row {
   169    cursor: pointer;
   170  }
   171  </style>