feat: 新增公告管理列表/新增/修改/详情 (#7)

src/views/system/notice/index.vue

@@ -1,60 +1,63 @@
 <template>
-  <div class="gi_page">
-    <a-card title="公告" class="general-card">
-      <GiTable
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-        :pagination="pagination"
-        :disabledColumnKeys="['name']"
-        @refresh="search"
-      >
-        <template #custom-left>
-          <a-input v-model="queryForm.title" placeholder="请输入公告标题" allow-clear @change="search">
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-          <a-select
-            v-model="queryForm.status"
-            :options="announcement_type"
-            placeholder="请选择类型"
-            allow-clear
-            style="width: 150px"
-            @change="search"
-          />
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #custom-right>
-          <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd">
-            <template #icon>
-              <icon-plus />
-            </template>
-            <span>新增</span>
-          </a-button>
-        </template>
-        <template #title="{ record }">
-          <a-link @click="openDetail(record)">{{ record.title }}</a-link>
-        </template>
-        <template #type="{ record }">
-          <GiCellTag :value="record.type" :dict="announcement_type" />
-        </template>
-        <template #status="{ record }">
-          <GiCellTag :value="record.status" :dict="announcement_status_enum" />
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link v-permission="['system:notice:update']" @click="onUpdate(record)">修改</a-link>
-            <a-link v-permission="['system:notice:delete']" status="danger" @click="onDelete(record)"> 删除 </a-link>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
-  </div>
+  <div>
+    <div class="gi_page">
+      <a-card title="公告" class="general-card">
+        <GiTable
+          row-key="id"
+          :data="dataList"
+          :columns="columns"
+          :loading="loading"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+          :pagination="pagination"
+          :disabledColumnKeys="['name']"
+          @refresh="search"
+        >
+          <template #custom-left>
+            <a-input v-model="queryForm.title" placeholder="请输入公告标题" allow-clear @change="search">
+              <template #prefix>
+                <icon-search />
+              </template>
+            </a-input>
+            <a-select
+              v-model="queryForm.type"
+              :options="announcement_type"
+              placeholder="请选择类型"
+              allow-clear
+              style="width: 150px"
+              @change="search"
+            />
+            <a-button @click="reset">重置</a-button>
+          </template>
+          <template #custom-right>
+            <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd">
+              <template #icon>
+                <icon-plus />
+              </template>
+              <span>新增</span>
+            </a-button>
+          </template>
+          <template #title="{ record }">
+            <a-link @click="openDetail(record)">{{ record.title }}</a-link>
+          </template>
+          <template #type="{ record }">
+            <GiCellTag :value="record.type" :dict="announcement_type" />
+          </template>
+          <template #status="{ record }">
+            <GiCellTag :value="record.status" :dict="announcement_status_enum" />
+          </template>
+          <template #action="{ record }">
+            <a-space>
+              <a-link v-permission="['system:notice:update']" @click="onUpdate(record)">修改</a-link>
+              <a-link v-permission="['system:notice:delete']" status="danger" @click="onDelete(record)"> 删除 </a-link>
+            </a-space>
+          </template>
+        </GiTable>
+      </a-card>
+    </div>
 
-  <AnnouncementAddModal ref="AnnouncementAddModalRef" @save-success="search" />
+    <AnnouncementAddModal ref="AnnouncementAddModalRef" @save-success="search" />
+    <AnnouncementDetailDrawer ref="AnnouncementDetailDrawerRef" />
+  </div>
 </template>
 <script lang="ts" setup>
 import { listAnnouncement, delAnnouncement, type AnnouncementResp } from '@/apis'
@@ -63,6 +66,7 @@ import { useDict } from '@/hooks/app'
 import { isMobile } from '@/utils'
 import AnnouncementAddModal from './AnnouncementAddModal.vue'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
+import AnnouncementDetailDrawer from '@/views/system/notice/AnnouncementDetailDrawer.vue'
 
 defineOptions({ name: 'Announcement' })
 
@@ -75,8 +79,8 @@ const columns: TableInstanceColumns[] = [
     render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize)
   },
   { title: '标题', dataIndex: 'title', slotName: 'title', ellipsis: true, tooltip: true },
-  { title: '类型', slotName: 'type', align: 'center' },
-  { title: '状态', slotName: 'status', align: 'center' },
+  { title: '类型', slotName: 'type', align: 'center', width: 130 },
+  { title: '状态', slotName: 'status', align: 'center', width: 130 },
   { title: '生效时间', dataIndex: 'effectiveTime', width: 180 },
   { title: '终止时间', dataIndex: 'terminateTime', width: 180 },
   { title: '创建人', dataIndex: 'createUserString', show: false, ellipsis: true, tooltip: true },
@@ -86,7 +90,7 @@ const columns: TableInstanceColumns[] = [
 
 const queryForm = reactive({
   title: undefined,
-  status: undefined,
+  type: undefined,
   sort: ['createTime,desc']
 })
 
@@ -101,7 +105,7 @@ const {
 // 重置
 const reset = () => {
   queryForm.title = undefined
-  queryForm.status = undefined
+  queryForm.type = undefined
   search()
 }
 
@@ -124,10 +128,11 @@ const onAdd = () => {
 const onUpdate = (item: AnnouncementResp) => {
   AnnouncementAddModalRef.value?.onUpdate(item.id)
 }
-
+const AnnouncementDetailDrawerRef = ref<InstanceType<typeof AnnouncementDetailDrawer>>()
 // 打开详情
 const openDetail = (item: AnnouncementResp) => {
-  // RoleDetailDrawerRef.value?.open(item.id)
+  console.log(item)
+  AnnouncementDetailDrawerRef.value?.onDetail(item.id)
 }
 </script>