<script setup lang="tsx"> import { NButton, NPopconfirm } from 'naive-ui'; import { ref } from 'vue'; import { fetchDeleteNamespace, fetchGetNamespaceList } from '@/service/api'; import { $t } from '@/locales'; import { useAppStore } from '@/store/modules/app'; import { useTable, useTableOperate } from '@/hooks/common/table'; import { localStg } from '@/utils/storage'; import { useAuthStore } from '@/store/modules/auth'; import SvgIcon from '@/components/custom/svg-icon.vue'; import NamespaceOperateDrawer from './modules/namespace-operate-drawer.vue'; import NamespaceSearch from './modules/namespace-search.vue'; const appStore = useAppStore(); const authStore = useAuthStore(); const namespaceId = ref<string>(localStg.get('namespaceId')!); const handleChange = (uniqueId: string) => { namespaceId.value = uniqueId; authStore.setNamespaceId(uniqueId); }; const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({ apiFn: fetchGetNamespaceList, apiParams: { page: 1, size: 10, keyword: null }, columns: () => [ // { // key: 'id', // title: $t('common.index'), // align: 'center', // width: 64 // }, { key: 'name', title: $t('page.namespace.name'), align: 'left', width: 120 }, { key: 'status', title: $t('common.active'), align: 'center', width: 40, render: row => ( <div class="flex justify-center"> {namespaceId.value === row.uniqueId! ? ( <SvgIcon icon="material-symbols:check-circle" class="text-20px color-success" /> ) : ( <SvgIcon icon="material-symbols:cancel" class="text-20px color-gray400" /> )} </div> ) }, { key: 'uniqueId', title: $t('page.namespace.uniqueId'), align: 'left', width: 180 }, { key: 'createDt', title: $t('page.common.createTime'), align: 'left', width: 130 }, { key: 'updateDt', title: $t('page.common.upadteTime'), align: 'left', width: 130 }, { key: 'operate', title: $t('common.operate'), align: 'center', width: 80, render: row => ( <div class="flex-center gap-8px"> <NButton type="primary" text ghost size="small" onClick={() => edit(row.id!)}> {$t('common.edit')} </NButton> {namespaceId.value !== row.uniqueId! ? ( <> <n-divider vertical /> <NButton type="warning" text ghost size="small" onClick={() => handleChange(row.uniqueId!)}> {$t('common.switch')} </NButton> <n-divider vertical /> <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}> {{ default: () => $t('common.confirmDelete'), trigger: () => ( <NButton type="error" text ghost size="small"> {$t('common.delete')} </NButton> ) }} </NPopconfirm> </> ) : ( '' )} </div> ) } ] }); const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onDeleted // closeDrawer } = useTableOperate(data, getData); function edit(id: string) { handleEdit(id); } async function handleDelete(id: string) { const { error } = await fetchDeleteNamespace(id); if (error) return; onDeleted(); } </script> <template> <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"> <NamespaceSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" /> <NCard :title="$t('page.namespace.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper" header-class="view-card-header" > <template #header-extra> <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0" :loading="loading" :show-delete="false" @add="handleAdd" @refresh="getData" /> </template> <NDataTable v-model:checked-row-keys="checkedRowKeys" :columns="columns" :data="data" :flex-height="!appStore.isMobile" :scroll-x="962" :loading="loading" remote :row-key="row => row.id" :pagination="mobilePagination" class="sm:h-full" /> <NamespaceOperateDrawer v-model:visible="drawerVisible" :operate-type="operateType" :row-data="editingData" @submitted="getData" /> </NCard> </div> </template> <style scoped></style>