From 33e8ec8ae6c6b7652152fd51d6fef2faf751c316 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Sun, 28 Apr 2024 17:11:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=AF=A6=E6=83=85=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/operate-drawer.vue      |  3 +-
 src/views/group/index.vue                     | 20 ++++++++++-
 .../group/modules/group-detail-drawer.vue     | 36 +++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 src/views/group/modules/group-detail-drawer.vue

diff --git a/src/components/common/operate-drawer.vue b/src/components/common/operate-drawer.vue
index 6b3552b..043d634 100644
--- a/src/components/common/operate-drawer.vue
+++ b/src/components/common/operate-drawer.vue
@@ -18,6 +18,7 @@ interface Emits {
 }
 
 const emit = defineEmits<Emits>();
+const solts = defineSlots();
 const appStore = useAppStore();
 const state = reactive({ width: 0 });
 const visible = ref(props.modelValue);
@@ -78,7 +79,7 @@ const onUpdateShow = (value: boolean) => {
         </div>
       </template>
       <slot></slot>
-      <template #footer>
+      <template v-if="solts.footer" #footer>
         <slot name="footer"></slot>
       </template>
     </NDrawerContent>
diff --git a/src/views/group/index.vue b/src/views/group/index.vue
index 91184da..6cc0f16 100644
--- a/src/views/group/index.vue
+++ b/src/views/group/index.vue
@@ -7,12 +7,17 @@ import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { groupConfigIdModeRecord, yesOrNoRecord } from '@/constants/business';
 import GroupOperateDrawer from './modules/group-operate-drawer.vue';
+import GroupDetailDrawer from './modules/group-detail-drawer.vue';
 import GroupSearch from './modules/group-search.vue';
 
 const appStore = useAppStore();
 
 /** 组状态 Switch 的 loading 状态 */
 const statusSwithLoading = ref(false);
+const detailData = ref();
+const detailVisible = defineModel<boolean>('detailVisible', {
+  default: false
+});
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetGroupConfigList,
@@ -32,7 +37,19 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'groupName',
       title: $t('page.groupConfig.groupName'),
       align: 'left',
-      minWidth: 260
+      minWidth: 260,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          detailVisible.value = true;
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.groupName}
+          </n-button>
+        );
+      }
     },
     {
       key: 'namespaceId',
@@ -195,6 +212,7 @@ async function handleUpdateValue(group: Api.GroupConfig.GroupConfig) {
         :row-data="editingData"
         @submitted="getData"
       />
+      <GroupDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
     </NCard>
   </div>
 </template>
diff --git a/src/views/group/modules/group-detail-drawer.vue b/src/views/group/modules/group-detail-drawer.vue
new file mode 100644
index 0000000..ac0f129
--- /dev/null
+++ b/src/views/group/modules/group-detail-drawer.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+defineOptions({
+  name: 'GroupDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.GroupConfig.GroupConfig | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+watch(
+  () => props.rowData,
+  () => {
+    console.log(props.rowData);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" title="组详情">
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem label="组名称">{{ rowData?.groupName }}</NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>