root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

notice 重构补充：

Browse Source 
1. 移除 API 方法的后缀
2. 公告内容使用 Editor 富文本编辑器
3. 列表的状态检索的修改
This commit is contained in:
YunaiV 2023-03-12 18:22:21 +08:00
parent 42421f509f
commit 2323946ce2
6 changed files with 22 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/system/notice/index.ts
View File

@ -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 })
}

10
src/views/system/notice/form.vue
View File

@ -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

35
src/views/system/notice/index.vue
View File

@ -10,18 +10,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="公告类型" prop="type">
<el-select v-model="queryParams.type" 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-form-item label="公告状态" prop="status">
<el-select v-model="queryParams.status" 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()

148
src/views/system/notice/indexd.vue
View File

@ -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>

103
src/views/system/notice/indexh.vue
View File

@ -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>

59
src/views/system/notice/notice.data.ts
View File

@ -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)