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

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {PropType, reactive, ref, watch} from 'vue'
     5  import {useAppStore} from "@/store/modules/app";
     6  import {TableColumn} from '@/types/table'
     7  import {ElImageViewer} from 'element-plus'
     8  import {ApiMessage} from "@/api/stub";
     9  import {useForm} from "@/hooks/web/useForm";
    10  import {useRouter} from "vue-router";
    11  
    12  const {push, currentRoute} = useRouter()
    13  const remember = ref(false)
    14  const {register, elFormRef, methods} = useForm()
    15  const appStore = useAppStore()
    16  const {t} = useI18n()
    17  
    18  
    19  export interface MessageItem {
    20    name: string;
    21    value: string;
    22  }
    23  
    24  interface TableObject {
    25    tableList: MessageItem[]
    26    loading: boolean
    27  }
    28  
    29  const props = defineProps({
    30    message: {
    31      type: Object as PropType<Nullable<ApiMessage>>,
    32      default: () => null
    33    }
    34  })
    35  
    36  const tableObject = reactive<TableObject>(
    37      {
    38        tableList: [],
    39        loading: false,
    40      },
    41  );
    42  
    43  const columns: TableColumn[] = [
    44    {
    45      field: 'name',
    46      label: t('plugins.name'),
    47      width: "170px",
    48      sortable: true
    49    },
    50    {
    51      field: 'value',
    52      label: t('plugins.attrValue')
    53    },
    54  ]
    55  
    56  watch(
    57      () => props.message,
    58      (message) => {
    59        const items: MessageItem[] = [];
    60        for (const key in message?.attributes) {
    61          items.push({name: key, value: message?.attributes[key]});
    62        }
    63        tableObject.tableList = items
    64      },
    65      {
    66        deep: true,
    67        immediate: true
    68      }
    69  )
    70  
    71  </script>
    72  
    73  <template>
    74    <Table
    75        :selection="false"
    76        :columns="columns"
    77        :data="tableObject.tableList"
    78        :loading="tableObject.loading"
    79        style="width: 100%"
    80    />
    81  
    82  </template>
    83  
    84  <style lang="less">
    85  
    86  </style>