notice 重构补充：

1. 移除 API 方法的后缀
2. 公告内容使用 Editor 富文本编辑器
3. 列表的状态检索的修改

src/api/system/notice/index.ts

@@ -11,32 +11,27 @@ export interface NoticeVO {
   createTime: Date
 }
 
-export interface NoticePageReqVO extends PageParam {
-  title?: string
-  status?: number
-}
-
 // 查询公告列表
-export const getNoticePageApi = (params: NoticePageReqVO) => {
+export const getNoticePage = (params: PageParam) => {
   return request.get({ url: '/system/notice/page', params })
 }
 
 // 查询公告详情
-export const getNoticeApi = (id: number) => {
+export const getNotice = (id: number) => {
   return request.get({ url: '/system/notice/get?id=' + id })
 }
 
 // 新增公告
-export const createNoticeApi = (data: NoticeVO) => {
+export const createNotice = (data: NoticeVO) => {
   return request.post({ url: '/system/notice/create', data })
 }
 
 // 修改公告
-export const updateNoticeApi = (data: NoticeVO) => {
+export const updateNotice = (data: NoticeVO) => {
   return request.put({ url: '/system/notice/update', data })
 }
 
 // 删除公告
-export const deleteNoticeApi = (id: number) => {
+export const deleteNotice = (id: number) => {
   return request.delete({ url: '/system/notice/delete?id=' + id })
 }

src/views/system/notice/form.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="modelTitle" v-model="modelVisible">
+  <Dialog :title="modelTitle" v-model="modelVisible" width="800">
     <el-form
       ref="formRef"
       :model="formData"
@@ -11,7 +11,7 @@
         <el-input v-model="formData.title" placeholder="请输入公告标题" />
       </el-form-item>
       <el-form-item label="公告内容" prop="content">
-        <el-input v-model="formData.content" type="textarea" placeholder="请输公告内容" />
+        <Editor :model-value="formData.content" height="150px" />
       </el-form-item>
       <el-form-item label="公告类型" prop="type">
         <el-select v-model="formData.type" placeholder="请选择公告类型" clearable>
@@ -82,7 +82,7 @@ const openModal = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await NoticeApi.getNoticeApi(id)
+      formData.value = await NoticeApi.getNotice(id)
     } finally {
       formLoading.value = false
     }
@@ -102,10 +102,10 @@ const submitForm = async () => {
   try {
     const data = formData.value as unknown as NoticeApi.NoticeVO
     if (formType.value === 'create') {
-      await NoticeApi.createNoticeApi(data)
+      await NoticeApi.createNotice(data)
       message.success(t('common.createSuccess'))
     } else {
-      await NoticeApi.updateNoticeApi(data)
+      await NoticeApi.updateNotice(data)
       message.success(t('common.updateSuccess'))
     }
     modelVisible.value = false

src/views/system/notice/index.vue

@@ -10,18 +10,8 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="公告类型" prop="type">
+      <el-form-item label="公告状态" prop="status">
-        <el-select v-model="queryParams.type" placeholder="请选择公告类型" clearable>
+        <el-select v-model="queryParams.status" placeholder="请选择公告状态" clearable>
-          <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE)"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.type" placeholder="请选择状态" clearable>
           <el-option
             v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="parseInt(dict.value)"
@@ -30,7 +20,6 @@
           />
         </el-select>
       </el-form-item>
-
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -43,9 +32,10 @@
         </el-button>
       </el-form-item>
     </el-form>
+
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list" align="center">
-      <el-table-column label="公告主键" align="center" prop="id" />
+      <el-table-column label="公告编号" align="center" prop="id" />
       <el-table-column label="公告标题" align="center" prop="title" />
       <el-table-column label="公告类型" align="center" prop="type">
         <template #default="scope">
@@ -57,12 +47,6 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column
-        label="公告内容"
-        align="center"
-        prop="content"
-        :show-overflow-tooltip="true"
-      />
       <el-table-column
         label="创建时间"
         align="center"
@@ -100,7 +84,8 @@
     />
   </content-wrap>
 
-  <NoticeForm ref="modalRef" @success="getList" />
+  <!-- 表单弹窗：添加/修改 -->
+  <notice-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="tsx">
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
@@ -127,7 +112,7 @@ const queryFormRef = ref() // 搜索的表单
 const getList = async () => {
   loading.value = true
   try {
-    const data = await NoticeApi.getNoticePageApi(queryParams)
+    const data = await NoticeApi.getNoticePage(queryParams)
 
     list.value = data.list
     total.value = data.total
@@ -135,28 +120,32 @@ const getList = async () => {
     loading.value = false
   }
 }
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
   handleQuery()
 }
+
 /** 添加/修改操作 */
 const modalRef = ref()
 const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await NoticeApi.deleteNoticeApi(id)
+    await NoticeApi.deleteNotice(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()

src/views/system/notice/indexd.vue

@@ -1,148 +0,0 @@
-<template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <!-- 操作：新增 -->
-      <template #toolbar_buttons>
-        <XButton
-          type="primary"
-          preIcon="ep:zoom-in"
-          :title="t('action.add')"
-          v-hasPermi="['system:notice:create']"
-          @click="handleCreate()"
-        />
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-          preIcon="ep:edit"
-          :title="t('action.edit')"
-          v-hasPermi="['system:notice:update']"
-          @click="handleUpdate(row.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
-          v-hasPermi="['system:notice:query']"
-          @click="handleDetail(row.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-          preIcon="ep:delete"
-          :title="t('action.del')"
-          v-hasPermi="['system:notice:delete']"
-          @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-  <!-- 弹窗 -->
-  <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      ref="formRef"
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-    />
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    >
-      <template #content="{ row }">
-        <Editor :model-value="row.content" :readonly="true" />
-      </template>
-    </Descriptions>
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
-</template>
-<script setup lang="ts" name="Notice">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import * as NoticeApi from '@/api/system/notice'
-import { rules, allSchemas } from './notice.data'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: NoticeApi.getNoticePageApi,
-  deleteApi: NoticeApi.deleteNoticeApi
-})
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await NoticeApi.getNoticeApi(rowId)
-  unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  // 设置数据
-  const res = await NoticeApi.getNoticeApi(rowId)
-  detailData.value = res
-}
-
-// 提交新增/修改的表单
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
-        if (actionType.value === 'create') {
-          await NoticeApi.createNoticeApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await NoticeApi.updateNoticeApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        await reload()
-      }
-    }
-  })
-}
-</script>

src/views/system/notice/indexh.vue

@@ -1,103 +0,0 @@
-<template>
-  <ContentWrap>
-    <div style="width: 100%; height: 500px">
-      <el-auto-resizer>
-        <template #default="{ height, width }">
-          <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
-        </template>
-      </el-auto-resizer>
-      <el-pagination
-        :current-page="queryParms.pageNo"
-        :page-size="queryParms.pageSize"
-        layout="total, prev, pager, next"
-        :total="tableTotal"
-        @size-change="getList"
-        @current-change="getList"
-      />
-    </div>
-  </ContentWrap>
-</template>
-<script setup lang="ts">
-import { Column, TableV2FixedDir } from 'element-plus'
-import * as NoticeApi from '@/api/system/notice'
-import { XTextButton } from '@/components/XButton'
-const { t } = useI18n() // 国际化
-
-const columns: Column<any>[] = [
-  {
-    key: 'id',
-    dataKey: 'id', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
-    title: 'id', //显示在单元格表头的文本
-    width: 80, //当前列的宽度，必须设置
-    fixed: true //是否固定列
-  },
-  {
-    key: 'title',
-    dataKey: 'title',
-    title: '公告标题',
-    width: 180
-  },
-  {
-    key: 'type',
-    dataKey: 'type',
-    title: '公告类型',
-    width: 180
-  },
-  {
-    key: 'status',
-    dataKey: 'status',
-    title: t('common.status'),
-    width: 180
-  },
-  {
-    key: 'content',
-    dataKey: 'content',
-    title: '公告内容',
-    width: 180
-  },
-  {
-    key: 'createTime',
-    dataKey: 'createTime',
-    title: t('common.createTime'),
-    width: 180
-  },
-  {
-    key: 'actionbtns',
-    dataKey: 'actionbtns', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
-    title: '操作', //显示在单元格表头的文本
-    width: 80, //当前列的宽度，必须设置
-    fixed: TableV2FixedDir.RIGHT, //是否固定列
-    align: 'center',
-    cellRenderer: (date) =>
-      h(XTextButton, {
-        onClick: () => handleDelete(date.rowData),
-        type: 'danger',
-        preIcon: 'ep:delete',
-        title: t('action.del')
-      })
-  }
-]
-
-const tableData = ref([])
-
-const tableTotal = ref(0)
-
-const queryParms = reactive({
-  title: '',
-  status: undefined,
-  pageNo: 1,
-  pageSize: 10
-})
-
-const getList = async () => {
-  const res = await NoticeApi.getNoticePageApi(queryParms)
-  tableData.value = res.list
-  tableTotal.value = res.total
-}
-
-const handleDelete = (row) => {
-  console.info(row.id)
-}
-
-getList()
-</script>

src/views/system/notice/notice.data.ts

@@ -1,59 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
-  title: [required],
-  type: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'seq',
-  action: true,
-  columns: [
-    {
-      title: '公告标题',
-      field: 'title',
-      isSearch: true
-    },
-    {
-      title: '公告类型',
-      field: 'type',
-      dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE,
-      dictClass: 'number'
-    },
-    {
-      title: t('common.status'),
-      field: 'status',
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number',
-      isSearch: true
-    },
-    {
-      title: '公告内容',
-      field: 'content',
-      table: {
-        type: 'html'
-      },
-      form: {
-        component: 'Editor',
-        colProps: {
-          span: 24
-        },
-        componentProps: {
-          valueHtml: ''
-        }
-      },
-      isTable: false
-    },
-    {
-      title: t('common.createTime'),
-      field: 'createTime',
-      formatter: 'formatDate',
-      isForm: false
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)