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

package.json

@@ -31,7 +31,7 @@
     "echarts": "^5.4.2",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
-    "md-editor-v3": "^4.6.2",
+    "md-editor-v3": "^4.13.4",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",

src/views/system/notice/AnnouncementAddModal.vue

@@ -1,12 +1,10 @@
 <template>
   <a-modal
+    v-model:visible="visible"
     :title="title"
-    :visible="visible"
     width="80%"
     :mask-closable="false"
     :esc-to-close="false"
-    unmount-on-close
-    render-to-body
     @before-ok="save"
     @close="reset"
     @cancel="reset"
@@ -22,7 +20,7 @@
       <a-row :gutter="16">
         <a-col :span="24">
           <a-form-item label="标题" field="title">
-            <a-input v-model="form.title" placeholder="请输入标题" :max-length="150" style="width: 100%" />
+            <a-input v-model="form.title" placeholder="请输入标题" allow-clear :max-length="150" style="width: 100%" />
           </a-form-item>
         </a-col>
       </a-row>
@@ -58,12 +56,7 @@
       <a-row :gutter="16">
         <a-col :span="24">
           <a-form-item label="内容" field="content">
-            <v-md-editor
-              v-model="form.content"
-              height="400px"
-              left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code"
-              placeholder="请输入内容"
-            />
+            <MdEditor v-model="form.content" :toolbars="toolbars" />
           </a-form-item>
         </a-col>
       </a-row>
@@ -76,15 +69,50 @@ import { addAnnouncement, updateAnnouncement, getAnnouncement } from '@/apis'
 import { Message, type FormInstance } from '@arco-design/web-vue'
 import { useForm } from '@/hooks'
 import { useDict } from '@/hooks/app'
+import { MdEditor } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
 
 const { announcement_type } = useDict('announcement_type')
-
 const visible = ref(false)
 const announcementId = ref('')
 const isUpdate = computed(() => !!announcementId.value)
 const title = computed(() => (isUpdate.value ? '修改公告' : '新增公告'))
 const formRef = ref<FormInstance>()
 
+const toolbars = [
+  'bold',
+  'underline',
+  'italic',
+  'strikeThrough',
+  '-',
+  'title',
+  'sub',
+  'sup',
+  'quote',
+  'unorderedList',
+  'orderedList',
+  'task',
+  '-',
+  'codeRow',
+  'code',
+  'link',
+  'image',
+  'table',
+  0,
+  1,
+  2,
+  3,
+  '-',
+  'revoke',
+  'next',
+  '=',
+  'prettier',
+  'pageFullscreen',
+  'fullscreen',
+  'preview',
+  'previewOnly'
+]
+
 const rules: FormInstance['rules'] = {
   title: [{ required: true, message: '请输入名称' }],
   type: [{ required: true, message: '选择类型' }],

src/views/system/notice/AnnouncementDetailDrawer.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-drawer v-model:visible="visible" title="公告详情" :width="width >= 900 ? 900 : '100%'" :footer="false">
+    <div>
+      <h1>{{ dataDetail.title }}</h1>
+      <GiCellTag :value="dataDetail.type" :dict="announcement_type" />
+      <span class="time-span">{{ dataDetail.effectiveTime }} - {{ dataDetail.terminateTime }}</span>
+      <a-divider />
+      <a-card hoverable bordered>
+        <MdPreview :editorId="dataDetail.id" :modelValue="dataDetail.content" />
+        <MdCatalog :editorId="dataDetail.id" :scrollElement="scrollElement" />
+      </a-card>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { getAnnouncement, type AnnouncementResp } from '@/apis'
+import { useWindowSize } from '@vueuse/core'
+import { MdPreview, MdCatalog } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+import { useDict } from '@/hooks/app'
+const { width } = useWindowSize()
+const scrollElement = document.documentElement
+const dataId = ref('')
+const dataDetail = ref<AnnouncementResp>({})
+const { announcement_type } = useDict('announcement_type')
+// 查询详情
+const getDataDetail = async () => {
+  const res = await getAnnouncement(dataId.value)
+  dataDetail.value = res.data
+}
+
+const visible = ref(false)
+// 详情
+const onDetail = async (id: string) => {
+  dataId.value = id
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ onDetail })
+</script>
+
+<style lang="scss" scoped>
+.time-span {
+  margin-left: 10px;
+  font-size: 12px;
+  color: #737a87;
+}
+</style>

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>