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

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {h, PropType, reactive, watch} from 'vue'
     5  import {TableColumn} from '@/types/table'
     6  import {ElImage} from 'element-plus'
     7  import {ApiPluginOptionsResultEntityState} from "@/api/stub";
     8  import {GetFullUrl} from "@/utils/serverId";
     9  
    10  const {t} = useI18n()
    11  
    12  interface TableObject {
    13    tableList: ApiPluginOptionsResultEntityState[]
    14    loading: boolean
    15  }
    16  
    17  const props = defineProps({
    18    states: {
    19      type: Array as PropType<ApiPluginOptionsResultEntityState[]>,
    20      default: () => []
    21    }
    22  })
    23  
    24  
    25  const tableObject = reactive<TableObject>(
    26      {
    27        tableList: [],
    28        loading: false,
    29      },
    30  );
    31  
    32  const columns: TableColumn[] = [
    33    {
    34      field: 'name',
    35      label: t('plugins.name'),
    36      sortable: true,
    37    },
    38    {
    39      field: 'imageUrl',
    40      label: t('plugins.actionImage'),
    41      sortable: true,
    42    },
    43    {
    44      field: 'icon',
    45      label: t('plugins.actionIcon'),
    46      formatter: (row: ApiPluginOptionsResultEntityState) => {
    47        return h(
    48            'span',
    49            row.icon ? '+' : '-'
    50        )
    51      }
    52    },
    53    {
    54      field: 'description',
    55      label: t('plugins.actionDescription')
    56    },
    57  ]
    58  
    59  
    60  watch(
    61      () => props.states,
    62      (currentRow) => {
    63        if (!currentRow) return
    64        tableObject.tableList = currentRow
    65      },
    66      {
    67        deep: true,
    68        immediate: true
    69      }
    70  )
    71  
    72  </script>
    73  
    74  <template>
    75    <Table
    76        :selection="false"
    77        :columns="columns"
    78        :data="tableObject.tableList"
    79        :loading="tableObject.loading"
    80        style="width: 100%"
    81    >
    82  
    83      <template #imageUrl="{ row }">
    84        <ElImage v-if="row.imageUrl" style="width: 100px; height: 100px" :src="GetFullUrl(row.imageUrl)"/>
    85        <span v-else>-</span>
    86      </template>
    87    </Table>
    88  
    89  </template>
    90  
    91  <style lang="less">
    92  
    93  </style>