github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Plugins/components/ActionsViewer.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 {ElImageViewer} from 'element-plus'
     7  import {ApiPluginOptionsResultEntityAction} from "@/api/stub";
     8  import {GetFullUrl} from "@/utils/serverId";
     9  
    10  const {t} = useI18n()
    11  
    12  
    13  interface TableObject {
    14    tableList: ApiPluginOptionsResultEntityAction[]
    15    loading: boolean
    16  }
    17  
    18  const props = defineProps({
    19    actions: {
    20      type: Array as PropType<ApiPluginOptionsResultEntityAction[]>,
    21      default: () => []
    22    }
    23  })
    24  
    25  
    26  const tableObject = reactive<TableObject>(
    27      {
    28        tableList: [],
    29        loading: false,
    30      },
    31  );
    32  
    33  const columns: TableColumn[] = [
    34    {
    35      field: 'name',
    36      label: t('plugins.name'),
    37      sortable: true,
    38    },
    39    {
    40      field: 'imageUrl',
    41      label: t('plugins.actionImage'),
    42      sortable: true,
    43      formatter: (row: ApiPluginOptionsResultEntityAction) => {
    44        return h(
    45            'span',
    46            row.imageUrl ? '+' : '-'
    47        )
    48      }
    49    },
    50    {
    51      field: 'icon',
    52      label: t('plugins.actionIcon'),
    53      formatter: (row: ApiPluginOptionsResultEntityAction) => {
    54        return h(
    55            'span',
    56            row.icon ? '+' : '-'
    57        )
    58      }
    59    },
    60    {
    61      field: 'description',
    62      label: t('plugins.actionDescription')
    63    },
    64  ]
    65  
    66  
    67  watch(
    68      () => props.actions,
    69      (currentRow) => {
    70        if (!currentRow) return
    71        tableObject.tableList = currentRow
    72      },
    73      {
    74        deep: true,
    75        immediate: true
    76      }
    77  )
    78  
    79  
    80  </script>
    81  
    82  <template>
    83    <Table
    84        :selection="false"
    85        :columns="columns"
    86        :data="tableObject.tableList"
    87        :loading="tableObject.loading"
    88        style="width: 100%"
    89    >
    90      <template #value="{ row }">
    91        <div v-if="row.type === 'IMAGE'">
    92          <ElImageViewer style="width: 100px; height: 100px" v-bind="GetFullUrl(row.imageUrl)"/>
    93        </div>
    94      </template>
    95    </Table>
    96  
    97  </template>
    98  
    99  <style lang="less">
   100  
   101  </style>