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