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

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {onMounted, onUnmounted, reactive, ref, watch} from 'vue'
     5  import {Pagination, TableColumn} from '@/types/table'
     6  import api from "@/api/api";
     7  import {ElButton, ElMessage} from 'element-plus'
     8  import {ApiPlugin} from "@/api/stub";
     9  import {useRouter} from "vue-router";
    10  import {ContentWrap} from "@/components/ContentWrap";
    11  import {EventStateChange} from "@/api/types";
    12  import {UUID} from "uuid-generator-ts";
    13  import stream from "@/api/stream";
    14  
    15  const {push} = useRouter()
    16  const {t} = useI18n()
    17  
    18  interface TableObject {
    19    tableList: ApiPlugin[]
    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 tableObject = reactive<TableObject>(
    32    {
    33      tableList: [],
    34      loading: false,
    35      sort: '+name'
    36    },
    37  );
    38  
    39  const columns: TableColumn[] = [
    40    {
    41      field: 'name',
    42      label: t('plugins.name'),
    43      sortable: true
    44    },
    45    {
    46      field: 'version',
    47      label: t('plugins.version'),
    48      width: "100px"
    49    },
    50    {
    51      field: 'status',
    52      label: t('entities.status'),
    53      width: "70px",
    54    },
    55  ]
    56  const paginationObj = ref<Pagination>({
    57    currentPage: 1,
    58    pageSize: 50,
    59    total: 0,
    60  })
    61  const currentID = ref('')
    62  
    63  const onStateChanged = (event: EventStateChange) => {
    64    getList()
    65  }
    66  
    67  onMounted(() => {
    68    const uuid = new UUID()
    69    currentID.value = uuid.getDashFreeUUID()
    70  
    71    setTimeout(() => {
    72      stream.subscribe('event_plugin_loaded', currentID.value, onStateChanged);
    73      stream.subscribe('event_plugin_unloaded', currentID.value, onStateChanged);
    74    }, 200)
    75  })
    76  
    77  onUnmounted(() => {
    78    stream.unsubscribe('event_plugin_loaded', currentID.value);
    79    stream.unsubscribe('event_plugin_unloaded', currentID.value);
    80  })
    81  
    82  const getList = async () => {
    83    tableObject.loading = true
    84  
    85    let params: Params = {
    86      page: paginationObj.value.currentPage,
    87      limit: paginationObj.value.pageSize,
    88      sort: tableObject.sort,
    89    }
    90  
    91    const res = await api.v1.pluginServiceGetPluginList(params)
    92      .catch(() => {
    93      })
    94      .finally(() => {
    95        tableObject.loading = false
    96      })
    97    if (res) {
    98      const {items, meta} = res.data;
    99      tableObject.tableList = items;
   100      paginationObj.value.currentPage = meta.pagination.page;
   101      paginationObj.value.total = meta.pagination.total;
   102    } else {
   103      tableObject.tableList = [];
   104    }
   105  }
   106  
   107  watch(
   108    () => [paginationObj.value.currentPage, paginationObj.value.pageSize],
   109    () => {
   110      getList()
   111    }
   112  )
   113  
   114  const sortChange = (data) => {
   115    const {column, prop, order} = data;
   116    const pref: string = order === 'ascending' ? '+' : '-'
   117    tableObject.sort = pref + prop
   118    getList()
   119  }
   120  
   121  getList()
   122  
   123  const selectRow = (row) => {
   124    if (!row) {
   125      return
   126    }
   127    const {name} = row
   128    push(`/etc/settings/plugins/edit/${name}`)
   129  }
   130  
   131  const enable = async (plugin: ApiPlugin) => {
   132    if (!plugin?.name) return;
   133    await api.v1.pluginServiceEnablePlugin(plugin.name);
   134    ElMessage({
   135      title: t('Success'),
   136      message: t('message.requestSentSuccessfully'),
   137      type: 'success',
   138      duration: 2000
   139    });
   140  }
   141  
   142  const disable = async (plugin: ApiPlugin) => {
   143    if (!plugin?.name) return;
   144    await api.v1.pluginServiceDisablePlugin(plugin.name);
   145    ElMessage({
   146      title: t('Success'),
   147      message: t('message.requestSentSuccessfully'),
   148      type: 'success',
   149      duration: 2000
   150    });
   151  }
   152  
   153  </script>
   154  
   155  <template>
   156    <ContentWrap>
   157      <Table
   158        :selection="false"
   159        v-model:pageSize="paginationObj.pageSize"
   160        v-model:currentPage="paginationObj.currentPage"
   161        :showUpPagination="20"
   162        :columns="columns"
   163        :data="tableObject.tableList"
   164        :loading="tableObject.loading"
   165        :pagination="paginationObj"
   166        @sort-change="sortChange"
   167        style="width: 100%"
   168        @current-change="selectRow"
   169      >
   170        <template #status="{ row }">
   171          <div class="w-[100%] text-center">
   172            <ElButton :link="true" @click.prevent.stop="enable(row)" v-if="!row?.isLoaded">
   173              <Icon icon="noto:red-circle" class="mr-5px"/>
   174            </ElButton>
   175            <ElButton :link="true" @click.prevent.stop="disable(row)" v-if="row?.isLoaded">
   176              <Icon icon="noto:green-circle" class="mr-5px"/>
   177            </ElButton>
   178          </div>
   179        </template>
   180      </Table>
   181    </ContentWrap>
   182  </template>
   183  
   184  <style lang="less">
   185  
   186  .el-table__row {
   187    cursor: pointer;
   188  }
   189  </style>