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

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {h, reactive, ref, 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 {ApiTask, ApiZigbee2Mqtt} from "@/api/stub";
    10  import {useForm} from "@/hooks/web/useForm";
    11  import {useRouter} from "vue-router";
    12  import {parseTime} from "@/utils";
    13  import {ContentWrap} from "@/components/ContentWrap";
    14  
    15  const {push, currentRoute} = useRouter()
    16  const remember = ref(false)
    17  const {register, elFormRef, methods} = useForm()
    18  const appStore = useAppStore()
    19  const {t} = useI18n()
    20  
    21  interface TableObject {
    22    tableList: ApiZigbee2Mqtt[]
    23    params?: any
    24    loading: boolean
    25    sort?: string
    26  }
    27  
    28  interface Params {
    29    page?: number;
    30    limit?: number;
    31    sort?: string;
    32  }
    33  
    34  const tableObject = reactive<TableObject>(
    35      {
    36        tableList: [],
    37        loading: false,
    38        sort: '-id'
    39      },
    40  );
    41  
    42  const columns: TableColumn[] = [
    43    {
    44      field: 'id',
    45      label: t('zigbee2mqtt.id'),
    46      width: "60px",
    47      sortable: true
    48    },
    49    {
    50      field: 'name',
    51      label: t('zigbee2mqtt.name'),
    52      width: "170px",
    53      sortable: true
    54    },
    55    {
    56      field: 'login',
    57      label: t('zigbee2mqtt.login'),
    58      sortable: true
    59    },
    60    {
    61      field: 'permitJoin',
    62      label: t('zigbee2mqtt.permitJoin'),
    63      sortable: true,
    64      width: "170px"
    65    },
    66    {
    67      field: 'createdAt',
    68      label: t('main.createdAt'),
    69      type: 'time',
    70      sortable: true,
    71      width: "170px",
    72      formatter: (row: ApiTask) => {
    73        return h(
    74            'span',
    75            parseTime(row.createdAt)
    76        )
    77      }
    78    },
    79    {
    80      field: 'updatedAt',
    81      label: t('main.updatedAt'),
    82      type: 'time',
    83      sortable: true,
    84      width: "170px",
    85      formatter: (row: ApiTask) => {
    86        return h(
    87            'span',
    88            parseTime(row.updatedAt)
    89        )
    90      }
    91    },
    92  ]
    93  const paginationObj = ref<Pagination>({
    94    currentPage: 1,
    95    pageSize: 50,
    96    total: 0,
    97  })
    98  const currentID = ref('')
    99  
   100  const getList = async () => {
   101    tableObject.loading = true
   102  
   103    let params: Params = {
   104      page: paginationObj.value.currentPage,
   105      limit: paginationObj.value.pageSize,
   106      sort: tableObject.sort,
   107    }
   108  
   109    const res = await api.v1.zigbee2MqttServiceGetBridgeList(params)
   110        .catch(() => {
   111        })
   112        .finally(() => {
   113          tableObject.loading = false
   114        })
   115    if (res) {
   116      const {items, meta} = res.data;
   117      tableObject.tableList = items;
   118      paginationObj.value.currentPage = meta.pagination.page;
   119      paginationObj.value.total = meta.pagination.total;
   120    } else {
   121      tableObject.tableList = [];
   122    }
   123  }
   124  
   125  watch(
   126      () => paginationObj.value.currentPage,
   127      () => {
   128        getList()
   129      }
   130  )
   131  
   132  watch(
   133      () => paginationObj.value.pageSize,
   134      () => {
   135        getList()
   136      }
   137  )
   138  
   139  const sortChange = (data) => {
   140    const {column, prop, order} = data;
   141    const pref: string = order === 'ascending' ? '+' : '-'
   142    tableObject.sort = pref + prop
   143    getList()
   144  }
   145  
   146  getList()
   147  
   148  const addNew = () => {
   149    push('/etc/zigbee2mqtt/new')
   150  }
   151  
   152  const selectRow = (row) => {
   153    if (!row) {
   154      return
   155    }
   156    const {id} = row
   157    push(`/etc/zigbee2mqtt/edit/${id}`)
   158  }
   159  
   160  </script>
   161  
   162  <template>
   163    <ContentWrap>
   164      <ElButton class="flex mb-20px items-left" type="primary" @click="addNew()" plain>
   165        <Icon icon="ep:plus" class="mr-5px"/>
   166        {{ t('zigbee2mqtt.addNew') }}
   167      </ElButton>
   168      <Table
   169          :selection="false"
   170          v-model:pageSize="paginationObj.pageSize"
   171          v-model:currentPage="paginationObj.currentPage"
   172          :showUpPagination="20"
   173          :columns="columns"
   174          :data="tableObject.tableList"
   175          :loading="tableObject.loading"
   176          :pagination="paginationObj"
   177          @sort-change="sortChange"
   178          style="width: 100%"
   179          @current-change="selectRow"
   180      >
   181        <template #permitJoin="{ row }">
   182          <ElSwitch v-model="row.permitJoin" disabled/>
   183        </template>
   184      </Table>
   185    </ContentWrap>
   186  </template>
   187  
   188  <style lang="less">
   189  
   190  .el-table__row {
   191    cursor: pointer;
   192  }
   193  </style>