Commit 301b66d30ea3811a0abe07c5bcd5c5f102fd1223
1 parent
f1445844
refactor: notice
Showing
4 changed files
with
174 additions
and
215 deletions
yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts
| ... | ... | @@ -27,18 +27,38 @@ type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & { |
| 27 | 27 | title?: string |
| 28 | 28 | formatter?: VxeColumnPropTypes.Formatter |
| 29 | 29 | isSearch?: boolean |
| 30 | - search?: VxeFormItemProps | |
| 30 | + search?: CrudSearchParams | |
| 31 | 31 | isTable?: boolean |
| 32 | - table?: VxeTableDefines.ColumnOptions | |
| 32 | + table?: CrudTableParams | |
| 33 | 33 | isForm?: boolean |
| 34 | - form?: FormSchema | |
| 34 | + form?: CrudFormParams | |
| 35 | 35 | isDetail?: boolean |
| 36 | - detail?: DescriptionsSchema | |
| 36 | + detail?: CrudDescriptionsParams | |
| 37 | 37 | print?: CrudPrintParams |
| 38 | 38 | children?: VxeCrudColumns[] |
| 39 | 39 | dictType?: string |
| 40 | 40 | } |
| 41 | 41 | |
| 42 | +type CrudSearchParams = { | |
| 43 | + // 是否显示在查询项 | |
| 44 | + show?: boolean | |
| 45 | +} & Omit<VxeFormItemProps, 'field'> | |
| 46 | + | |
| 47 | +type CrudTableParams = { | |
| 48 | + // 是否显示表头 | |
| 49 | + show?: boolean | |
| 50 | +} & Omit<VxeTableDefines.ColumnOptions, 'field'> | |
| 51 | + | |
| 52 | +type CrudFormParams = { | |
| 53 | + // 是否显示表单项 | |
| 54 | + show?: boolean | |
| 55 | +} & Omit<FormSchema, 'field'> | |
| 56 | + | |
| 57 | +type CrudDescriptionsParams = { | |
| 58 | + // 是否显示表单项 | |
| 59 | + show?: boolean | |
| 60 | +} & Omit<DescriptionsSchema, 'field'> | |
| 61 | + | |
| 42 | 62 | type CrudPrintParams = { |
| 43 | 63 | // 是否显示表单项 |
| 44 | 64 | show?: boolean | ... | ... |
yudao-ui-admin-vue3/src/views/system/notice/index.vue
| 1 | +<template> | |
| 2 | + <ContentWrap> | |
| 3 | + <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> | |
| 4 | + <template #toolbar_buttons> | |
| 5 | + <XButton | |
| 6 | + type="primary" | |
| 7 | + preIcon="ep:zoom-in" | |
| 8 | + :title="t('action.add')" | |
| 9 | + v-hasPermi="['system:notice:create']" | |
| 10 | + @click="handleCreate()" | |
| 11 | + /> | |
| 12 | + </template> | |
| 13 | + <template #actionbtns_default="{ row }"> | |
| 14 | + <XTextButton | |
| 15 | + preIcon="ep:edit" | |
| 16 | + :title="t('action.edit')" | |
| 17 | + v-hasPermi="['system:notice:update']" | |
| 18 | + @click="handleUpdate(row.id)" | |
| 19 | + /> | |
| 20 | + <XTextButton | |
| 21 | + preIcon="ep:view" | |
| 22 | + :title="t('action.detail')" | |
| 23 | + v-hasPermi="['system:notice:update']" | |
| 24 | + @click="handleDetail(row)" | |
| 25 | + /> | |
| 26 | + <XTextButton | |
| 27 | + preIcon="ep:delete" | |
| 28 | + :title="t('action.del')" | |
| 29 | + v-hasPermi="['system:notice:delete']" | |
| 30 | + @click="handleDelete(row.id)" | |
| 31 | + /> | |
| 32 | + </template> | |
| 33 | + </vxe-grid> | |
| 34 | + </ContentWrap> | |
| 35 | + <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle"> | |
| 36 | + <template #default> | |
| 37 | + <!-- 对话框(添加 / 修改) --> | |
| 38 | + <Form | |
| 39 | + v-if="['create', 'update'].includes(actionType)" | |
| 40 | + :schema="allSchemas.formSchema" | |
| 41 | + :rules="rules" | |
| 42 | + ref="formRef" | |
| 43 | + /> | |
| 44 | + <!-- 对话框(详情) --> | |
| 45 | + <Descriptions | |
| 46 | + v-if="actionType === 'detail'" | |
| 47 | + :schema="allSchemas.detailSchema" | |
| 48 | + :data="detailRef" | |
| 49 | + /> | |
| 50 | + </template> | |
| 51 | + <!-- 操作按钮 --> | |
| 52 | + <template #footer> | |
| 53 | + <XButton | |
| 54 | + v-if="['create', 'update'].includes(actionType)" | |
| 55 | + type="primary" | |
| 56 | + :title="t('action.save')" | |
| 57 | + :loading="actionLoading" | |
| 58 | + @click="submitForm" | |
| 59 | + /> | |
| 60 | + <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" /> | |
| 61 | + </template> | |
| 62 | + </XModal> | |
| 63 | +</template> | |
| 1 | 64 | <script setup lang="ts"> |
| 2 | 65 | import { ref, unref } from 'vue' |
| 3 | -import dayjs from 'dayjs' | |
| 4 | -import { ElMessage } from 'element-plus' | |
| 5 | -import { DICT_TYPE } from '@/utils/dict' | |
| 6 | -import { useTable } from '@/hooks/web/useTable' | |
| 66 | +import * as NoticeApi from '@/api/system/notice' | |
| 67 | +import { NoticeVO } from '@/api/system/notice/types' | |
| 68 | +import { rules, allSchemas } from './notice.data' | |
| 7 | 69 | import { useI18n } from '@/hooks/web/useI18n' |
| 70 | +import { useMessage } from '@/hooks/web/useMessage' | |
| 71 | +import { useVxeGrid } from '@/hooks/web/useVxeGrid' | |
| 72 | +import { VxeGridInstance } from 'vxe-table' | |
| 8 | 73 | import { FormExpose } from '@/components/Form' |
| 9 | -import type { NoticeVO } from '@/api/system/notice/types' | |
| 10 | -import { rules, allSchemas } from './notice.data' | |
| 11 | -import * as NoticeApi from '@/api/system/notice' | |
| 12 | -const { t } = useI18n() // 国际化 | |
| 13 | -// ========== 列表相关 ========== | |
| 14 | -const { register, tableObject, methods } = useTable<NoticeVO>({ | |
| 15 | - getListApi: NoticeApi.getNoticePageApi, | |
| 16 | - delListApi: NoticeApi.deleteNoticeApi | |
| 17 | -}) | |
| 18 | -const { getList, setSearchParams, delList } = methods | |
| 19 | 74 | |
| 20 | -// ========== CRUD 相关 ========== | |
| 21 | -const actionLoading = ref(false) // 遮罩层 | |
| 22 | -const actionType = ref('') // 操作按钮的类型 | |
| 75 | +const { t } = useI18n() // 国际化 | |
| 76 | +const message = useMessage() // 消息弹窗 | |
| 23 | 77 | const dialogVisible = ref(false) // 是否显示弹出层 |
| 24 | 78 | const dialogTitle = ref('edit') // 弹出层标题 |
| 79 | +const actionType = ref('') // 操作按钮的类型 | |
| 80 | +const actionLoading = ref(false) // 按钮Loading | |
| 81 | +const xGrid = ref<VxeGridInstance>() // grid Ref | |
| 25 | 82 | const formRef = ref<FormExpose>() // 表单 Ref |
| 83 | +const detailRef = ref() // 详情 Ref | |
| 84 | + | |
| 85 | +const { gridOptions } = useVxeGrid<NoticeVO>({ | |
| 86 | + allSchemas: allSchemas, | |
| 87 | + getListApi: NoticeApi.getNoticePageApi | |
| 88 | +}) | |
| 26 | 89 | |
| 27 | 90 | // 设置标题 |
| 28 | 91 | const setDialogTile = (type: string) => { |
| ... | ... | @@ -39,13 +102,32 @@ const handleCreate = () => { |
| 39 | 102 | } |
| 40 | 103 | |
| 41 | 104 | // 修改操作 |
| 42 | -const handleUpdate = async (row: NoticeVO) => { | |
| 105 | +const handleUpdate = async (rowId: number) => { | |
| 43 | 106 | setDialogTile('update') |
| 44 | 107 | // 设置数据 |
| 45 | - const res = await NoticeApi.getNoticeApi(row.id) | |
| 108 | + const res = await NoticeApi.getNoticeApi(rowId) | |
| 46 | 109 | unref(formRef)?.setValues(res) |
| 47 | 110 | } |
| 48 | 111 | |
| 112 | +// 详情操作 | |
| 113 | +const handleDetail = (row: NoticeVO) => { | |
| 114 | + setDialogTile('detail') | |
| 115 | + detailRef.value = row | |
| 116 | +} | |
| 117 | + | |
| 118 | +// 删除操作 | |
| 119 | +const handleDelete = async (rowId: number) => { | |
| 120 | + message | |
| 121 | + .delConfirm() | |
| 122 | + .then(async () => { | |
| 123 | + await NoticeApi.deleteNoticeApi(rowId) | |
| 124 | + message.success(t('common.delSuccess')) | |
| 125 | + }) | |
| 126 | + .finally(() => { | |
| 127 | + xGrid.value?.commitProxy('query') | |
| 128 | + }) | |
| 129 | +} | |
| 130 | + | |
| 49 | 131 | // 提交按钮 |
| 50 | 132 | const submitForm = async () => { |
| 51 | 133 | const elForm = unref(formRef)?.getElFormRef() |
| ... | ... | @@ -58,133 +140,17 @@ const submitForm = async () => { |
| 58 | 140 | const data = unref(formRef)?.formModel as NoticeVO |
| 59 | 141 | if (actionType.value === 'create') { |
| 60 | 142 | await NoticeApi.createNoticeApi(data) |
| 61 | - ElMessage.success(t('common.createSuccess')) | |
| 143 | + message.success(t('common.createSuccess')) | |
| 62 | 144 | } else { |
| 63 | 145 | await NoticeApi.updateNoticeApi(data) |
| 64 | - ElMessage.success(t('common.updateSuccess')) | |
| 146 | + message.success(t('common.updateSuccess')) | |
| 65 | 147 | } |
| 66 | - // 操作成功，重新加载列表 | |
| 67 | 148 | dialogVisible.value = false |
| 68 | - await getList() | |
| 69 | 149 | } finally { |
| 70 | 150 | actionLoading.value = false |
| 151 | + xGrid.value?.commitProxy('query') | |
| 71 | 152 | } |
| 72 | 153 | } |
| 73 | 154 | }) |
| 74 | 155 | } |
| 75 | - | |
| 76 | -// ========== 详情相关 ========== | |
| 77 | -const detailRef = ref() // 详情 Ref | |
| 78 | - | |
| 79 | -// 详情操作 | |
| 80 | -const handleDetail = async (row: NoticeVO) => { | |
| 81 | - // 设置数据 | |
| 82 | - detailRef.value = row | |
| 83 | - setDialogTile('detail') | |
| 84 | -} | |
| 85 | - | |
| 86 | -// ========== 初始化 ========== | |
| 87 | -getList() | |
| 88 | 156 | </script> |
| 89 | - | |
| 90 | -<template> | |
| 91 | - <!-- 搜索工作区 --> | |
| 92 | - <ContentWrap> | |
| 93 | - <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> | |
| 94 | - </ContentWrap> | |
| 95 | - <ContentWrap> | |
| 96 | - <!-- 操作工具栏 --> | |
| 97 | - <div class="mb-10px"> | |
| 98 | - <el-button type="primary" v-hasPermi="['system:notice:create']" @click="handleCreate"> | |
| 99 | - <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }} | |
| 100 | - </el-button> | |
| 101 | - </div> | |
| 102 | - <!-- 列表 --> | |
| 103 | - <Table | |
| 104 | - :columns="allSchemas.tableColumns" | |
| 105 | - :selection="false" | |
| 106 | - :data="tableObject.tableList" | |
| 107 | - :loading="tableObject.loading" | |
| 108 | - :pagination="{ | |
| 109 | - total: tableObject.total | |
| 110 | - }" | |
| 111 | - v-model:pageSize="tableObject.pageSize" | |
| 112 | - v-model:currentPage="tableObject.currentPage" | |
| 113 | - @register="register" | |
| 114 | - > | |
| 115 | - <template #type="{ row }"> | |
| 116 | - <DictTag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="row.type" /> | |
| 117 | - </template> | |
| 118 | - <template #status="{ row }"> | |
| 119 | - <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | |
| 120 | - </template> | |
| 121 | - <template #createTime="{ row }"> | |
| 122 | - <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | |
| 123 | - </template> | |
| 124 | - <template #action="{ row }"> | |
| 125 | - <el-button | |
| 126 | - link | |
| 127 | - type="primary" | |
| 128 | - v-hasPermi="['system:notice:update']" | |
| 129 | - @click="handleUpdate(row)" | |
| 130 | - > | |
| 131 | - <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }} | |
| 132 | - </el-button> | |
| 133 | - <el-button | |
| 134 | - link | |
| 135 | - type="primary" | |
| 136 | - v-hasPermi="['system:notice:update']" | |
| 137 | - @click="handleDetail(row)" | |
| 138 | - > | |
| 139 | - <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }} | |
| 140 | - </el-button> | |
| 141 | - <el-button | |
| 142 | - link | |
| 143 | - type="primary" | |
| 144 | - v-hasPermi="['system:notice:delete']" | |
| 145 | - @click="delList(row.id, false)" | |
| 146 | - > | |
| 147 | - <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }} | |
| 148 | - </el-button> | |
| 149 | - </template> | |
| 150 | - </Table> | |
| 151 | - </ContentWrap> | |
| 152 | - | |
| 153 | - <Dialog v-model="dialogVisible" :title="dialogTitle" maxHeight="500px" width="50%"> | |
| 154 | - <!-- 对话框(添加 / 修改) --> | |
| 155 | - <Form | |
| 156 | - v-if="['create', 'update'].includes(actionType)" | |
| 157 | - :schema="allSchemas.formSchema" | |
| 158 | - :rules="rules" | |
| 159 | - ref="formRef" | |
| 160 | - /> | |
| 161 | - <!-- 对话框(详情) --> | |
| 162 | - <Descriptions | |
| 163 | - v-if="actionType === 'detail'" | |
| 164 | - :schema="allSchemas.detailSchema" | |
| 165 | - :data="detailRef" | |
| 166 | - > | |
| 167 | - <template #type="{ row }"> | |
| 168 | - <DictTag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="row.type" /> | |
| 169 | - </template> | |
| 170 | - <template #status="{ row }"> | |
| 171 | - <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | |
| 172 | - </template> | |
| 173 | - <template #createTime="{ row }"> | |
| 174 | - <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | |
| 175 | - </template> | |
| 176 | - </Descriptions> | |
| 177 | - <!-- 操作按钮 --> | |
| 178 | - <template #footer> | |
| 179 | - <el-button | |
| 180 | - v-if="['create', 'update'].includes(actionType)" | |
| 181 | - type="primary" | |
| 182 | - :loading="actionLoading" | |
| 183 | - @click="submitForm" | |
| 184 | - > | |
| 185 | - {{ t('action.save') }} | |
| 186 | - </el-button> | |
| 187 | - <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button> | |
| 188 | - </template> | |
| 189 | - </Dialog> | |
| 190 | -</template> | ... | ... |
yudao-ui-admin-vue3/src/views/system/notice/notice.data.ts
| ... | ... | @@ -2,7 +2,7 @@ import { reactive } from 'vue' |
| 2 | 2 | import { useI18n } from '@/hooks/web/useI18n' |
| 3 | 3 | import { required } from '@/utils/formRules' |
| 4 | 4 | import { DICT_TYPE } from '@/utils/dict' |
| 5 | -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' | |
| 5 | +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' | |
| 6 | 6 | const { t } = useI18n() // 国际化 |
| 7 | 7 | |
| 8 | 8 | // 表单校验 |
| ... | ... | @@ -12,74 +12,47 @@ export const rules = reactive({ |
| 12 | 12 | }) |
| 13 | 13 | |
| 14 | 14 | // CrudSchema |
| 15 | -const crudSchemas = reactive<CrudSchema[]>([ | |
| 16 | - { | |
| 17 | - label: t('common.index'), | |
| 18 | - field: 'id', | |
| 19 | - type: 'index', | |
| 20 | - form: { | |
| 21 | - show: false | |
| 15 | +const crudSchemas = reactive<VxeCrudSchema>({ | |
| 16 | + primaryKey: 'id', | |
| 17 | + primaryType: 'seq', | |
| 18 | + action: true, | |
| 19 | + columns: [ | |
| 20 | + { | |
| 21 | + title: '公告标题', | |
| 22 | + field: 'title', | |
| 23 | + isSearch: true | |
| 22 | 24 | }, |
| 23 | - detail: { | |
| 24 | - show: false | |
| 25 | - } | |
| 26 | - }, | |
| 27 | - { | |
| 28 | - label: '公告标题', | |
| 29 | - field: 'title', | |
| 30 | - search: { | |
| 31 | - show: true | |
| 32 | - } | |
| 33 | - }, | |
| 34 | - { | |
| 35 | - label: '公告类型', | |
| 36 | - field: 'type', | |
| 37 | - dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE, | |
| 38 | - search: { | |
| 39 | - show: true | |
| 40 | - } | |
| 41 | - }, | |
| 42 | - { | |
| 43 | - label: t('common.status'), | |
| 44 | - field: 'status', | |
| 45 | - dictType: DICT_TYPE.COMMON_STATUS, | |
| 46 | - search: { | |
| 47 | - show: true | |
| 25 | + { | |
| 26 | + title: '公告类型', | |
| 27 | + field: 'type', | |
| 28 | + dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE, | |
| 29 | + isSearch: true | |
| 48 | 30 | }, |
| 49 | - form: { | |
| 50 | - component: 'RadioButton' | |
| 51 | - } | |
| 52 | - }, | |
| 53 | - { | |
| 54 | - label: '公告内容', | |
| 55 | - field: 'content', | |
| 56 | - form: { | |
| 57 | - component: 'Editor', | |
| 58 | - colProps: { | |
| 59 | - span: 24 | |
| 60 | - }, | |
| 61 | - componentProps: { | |
| 62 | - valueHtml: '' | |
| 31 | + { | |
| 32 | + title: t('common.status'), | |
| 33 | + field: 'status', | |
| 34 | + dictType: DICT_TYPE.COMMON_STATUS, | |
| 35 | + isSearch: true | |
| 36 | + }, | |
| 37 | + { | |
| 38 | + title: '公告内容', | |
| 39 | + field: 'content', | |
| 40 | + form: { | |
| 41 | + component: 'Editor', | |
| 42 | + colProps: { | |
| 43 | + span: 24 | |
| 44 | + }, | |
| 45 | + componentProps: { | |
| 46 | + valueHtml: '' | |
| 47 | + } | |
| 63 | 48 | } |
| 64 | - } | |
| 65 | - }, | |
| 66 | - { | |
| 67 | - label: t('common.createTime'), | |
| 68 | - field: 'createTime', | |
| 69 | - form: { | |
| 70 | - show: false | |
| 71 | - } | |
| 72 | - }, | |
| 73 | - { | |
| 74 | - label: t('table.action'), | |
| 75 | - field: 'action', | |
| 76 | - width: '240px', | |
| 77 | - form: { | |
| 78 | - show: false | |
| 79 | 49 | }, |
| 80 | - detail: { | |
| 81 | - show: false | |
| 50 | + { | |
| 51 | + title: t('common.createTime'), | |
| 52 | + field: 'createTime', | |
| 53 | + formatter: 'formatDate', | |
| 54 | + isForm: false | |
| 82 | 55 | } |
| 83 | - } | |
| 84 | -]) | |
| 85 | -export const { allSchemas } = useCrudSchemas(crudSchemas) | |
| 56 | + ] | |
| 57 | +}) | |
| 58 | +export const { allSchemas } = useVxeCrudSchemas(crudSchemas) | ... | ... |
yudao-ui-admin-vue3/src/views/system/post/index.vue
| ... | ... | @@ -99,12 +99,6 @@ const handleCreate = () => { |
| 99 | 99 | unref(formRef)?.getElFormRef()?.resetFields() |
| 100 | 100 | } |
| 101 | 101 | |
| 102 | -// 详情操作 | |
| 103 | -const handleDetail = (row: PostVO) => { | |
| 104 | - setDialogTile('detail') | |
| 105 | - detailRef.value = row | |
| 106 | -} | |
| 107 | - | |
| 108 | 102 | // 修改操作 |
| 109 | 103 | const handleUpdate = async (rowId: number) => { |
| 110 | 104 | setDialogTile('update') |
| ... | ... | @@ -113,6 +107,12 @@ const handleUpdate = async (rowId: number) => { |
| 113 | 107 | unref(formRef)?.setValues(res) |
| 114 | 108 | } |
| 115 | 109 | |
| 110 | +// 详情操作 | |
| 111 | +const handleDetail = (row: PostVO) => { | |
| 112 | + setDialogTile('detail') | |
| 113 | + detailRef.value = row | |
| 114 | +} | |
| 115 | + | |
| 116 | 116 | // 删除操作 |
| 117 | 117 | const handleDelete = async (rowId: number) => { |
| 118 | 118 | message | ... | ... |