Commit d2805b1dcab9ac93965410f6a2efe8c5899c3fe0
1 parent
654fce75
perf: 重构post
Showing
2 changed files
with
104 additions
and
82 deletions
yudao-ui-admin-vue3/src/views/system/post/PostModal.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <!-- 弹窗 --> | ||
| 3 | + <XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"> | ||
| 4 | + <!-- 表单：添加/修改 --> | ||
| 5 | + <Form | ||
| 6 | + ref="formRef" | ||
| 7 | + v-if="['create', 'update'].includes(actionType)" | ||
| 8 | + :schema="allSchemas.formSchema" | ||
| 9 | + :rules="rules" | ||
| 10 | + /> | ||
| 11 | + <!-- 表单：详情 --> | ||
| 12 | + <Descriptions | ||
| 13 | + v-if="actionType === 'detail'" | ||
| 14 | + :schema="allSchemas.detailSchema" | ||
| 15 | + :data="detailData" | ||
| 16 | + /> | ||
| 17 | + <template #footer> | ||
| 18 | + <!-- 按钮：保存 --> | ||
| 19 | + <XButton | ||
| 20 | + v-if="['create', 'update'].includes(actionType)" | ||
| 21 | + type="primary" | ||
| 22 | + :title="t('action.save')" | ||
| 23 | + :loading="actionLoading" | ||
| 24 | + @click="submitForm()" | ||
| 25 | + /> | ||
| 26 | + <!-- 按钮：关闭 --> | ||
| 27 | + <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" /> | ||
| 28 | + </template> | ||
| 29 | + </XModal> | ||
| 30 | +</template> | ||
| 31 | +<script setup lang="ts"> | ||
| 32 | +import type { FormExpose } from '@/components/Form' | ||
| 33 | +import * as PostApi from '@/api/system/post' | ||
| 34 | +import { rules, allSchemas } from './post.data' | ||
| 35 | +const { t } = useI18n() // 国际化 | ||
| 36 | +const message = useMessage() // 消息弹窗 | ||
| 37 | + | ||
| 38 | +const emit = defineEmits(['success', 'openModal']) | ||
| 39 | + | ||
| 40 | +// 弹窗相关的变量 | ||
| 41 | +const modelVisible = ref(false) // 是否显示弹出层 | ||
| 42 | +const modelTitle = ref('edit') // 弹出层标题 | ||
| 43 | +const modelLoading = ref(false) // 弹出层loading | ||
| 44 | +const actionType = ref('') // 操作按钮的类型 | ||
| 45 | +const actionLoading = ref(false) // 按钮 Loading | ||
| 46 | +const formRef = ref<FormExpose>() // 表单 Ref | ||
| 47 | +const detailData = ref() // 详情 Ref | ||
| 48 | + | ||
| 49 | +const openModal = async (type: string, rowId?: number) => { | ||
| 50 | + modelLoading.value = true | ||
| 51 | + modelTitle.value = t('action.' + type) | ||
| 52 | + actionType.value = type | ||
| 53 | + modelVisible.value = true | ||
| 54 | + // 设置数据 | ||
| 55 | + if (rowId) { | ||
| 56 | + const res = await PostApi.getPostApi(rowId) | ||
| 57 | + if (type === 'update') { | ||
| 58 | + unref(formRef)?.setValues(res) | ||
| 59 | + } else if (type === 'detail') { | ||
| 60 | + detailData.value = res | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + modelLoading.value = false | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +// 提交新增/修改的表单 | ||
| 67 | +const submitForm = async () => { | ||
| 68 | + const elForm = unref(formRef)?.getElFormRef() | ||
| 69 | + if (!elForm) return | ||
| 70 | + elForm.validate(async (valid) => { | ||
| 71 | + if (valid) { | ||
| 72 | + actionLoading.value = true | ||
| 73 | + // 提交请求 | ||
| 74 | + try { | ||
| 75 | + const data = unref(formRef)?.formModel as PostApi.PostVO | ||
| 76 | + if (actionType.value === 'create') { | ||
| 77 | + await PostApi.createPostApi(data) | ||
| 78 | + message.success(t('common.createSuccess')) | ||
| 79 | + } else { | ||
| 80 | + await PostApi.updatePostApi(data) | ||
| 81 | + message.success(t('common.updateSuccess')) | ||
| 82 | + } | ||
| 83 | + modelVisible.value = false | ||
| 84 | + } finally { | ||
| 85 | + actionLoading.value = false | ||
| 86 | + emit('success') | ||
| 87 | + } | ||
| 88 | + } | ||
| 89 | + }) | ||
| 90 | +} | ||
| 91 | + | ||
| 92 | +defineExpose({ openModal: openModal }) | ||
| 93 | +</script> |
yudao-ui-admin-vue3/src/views/system/post/index.vue
| @@ -9,7 +9,7 @@ | @@ -9,7 +9,7 @@ | ||
| 9 | preIcon="ep:zoom-in" | 9 | preIcon="ep:zoom-in" |
| 10 | :title="t('action.add')" | 10 | :title="t('action.add')" |
| 11 | v-hasPermi="['system:post:create']" | 11 | v-hasPermi="['system:post:create']" |
| 12 | - @click="openModel('create')" | 12 | + @click="openModal('create')" |
| 13 | /> | 13 | /> |
| 14 | <!-- 操作：导出 --> | 14 | <!-- 操作：导出 --> |
| 15 | <XButton | 15 | <XButton |
| @@ -25,13 +25,13 @@ | @@ -25,13 +25,13 @@ | ||
| 25 | <XTextButton | 25 | <XTextButton |
| 26 | preIcon="ep:edit" | 26 | preIcon="ep:edit" |
| 27 | v-hasPermi="['system:post:update']" | 27 | v-hasPermi="['system:post:update']" |
| 28 | - @click="openModel('update', row.id)" | 28 | + @click="openModal('update', row.id)" |
| 29 | /> | 29 | /> |
| 30 | <!-- 操作：详情 --> | 30 | <!-- 操作：详情 --> |
| 31 | <XTextButton | 31 | <XTextButton |
| 32 | preIcon="ep:view" | 32 | preIcon="ep:view" |
| 33 | v-hasPermi="['system:post:query']" | 33 | v-hasPermi="['system:post:query']" |
| 34 | - @click="openModel('detail', row.id)" | 34 | + @click="openModal('detail', row.id)" |
| 35 | /> | 35 | /> |
| 36 | <!-- 操作：删除 --> | 36 | <!-- 操作：删除 --> |
| 37 | <XTextButton | 37 | <XTextButton |
| @@ -42,43 +42,16 @@ | @@ -42,43 +42,16 @@ | ||
| 42 | </template> | 42 | </template> |
| 43 | </XTable> | 43 | </XTable> |
| 44 | </ContentWrap> | 44 | </ContentWrap> |
| 45 | - <!-- 弹窗 --> | ||
| 46 | - <XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"> | ||
| 47 | - <!-- 表单：添加/修改 --> | ||
| 48 | - <Form | ||
| 49 | - ref="formRef" | ||
| 50 | - v-if="['create', 'update'].includes(actionType)" | ||
| 51 | - :schema="allSchemas.formSchema" | ||
| 52 | - :rules="rules" | ||
| 53 | - /> | ||
| 54 | - <!-- 表单：详情 --> | ||
| 55 | - <Descriptions | ||
| 56 | - v-if="actionType === 'detail'" | ||
| 57 | - :schema="allSchemas.detailSchema" | ||
| 58 | - :data="detailData" | ||
| 59 | - /> | ||
| 60 | - <template #footer> | ||
| 61 | - <!-- 按钮：保存 --> | ||
| 62 | - <XButton | ||
| 63 | - v-if="['create', 'update'].includes(actionType)" | ||
| 64 | - type="primary" | ||
| 65 | - :title="t('action.save')" | ||
| 66 | - :loading="actionLoading" | ||
| 67 | - @click="submitForm()" | ||
| 68 | - /> | ||
| 69 | - <!-- 按钮：关闭 --> | ||
| 70 | - <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" /> | ||
| 71 | - </template> | ||
| 72 | - </XModal> | 45 | + <PostModal ref="modalRef" @success="success" /> |
| 73 | </template> | 46 | </template> |
| 74 | <script setup lang="ts" name="Post"> | 47 | <script setup lang="ts" name="Post"> |
| 75 | -import type { FormExpose } from '@/components/Form' | ||
| 76 | // 业务相关的 import | 48 | // 业务相关的 import |
| 77 | import * as PostApi from '@/api/system/post' | 49 | import * as PostApi from '@/api/system/post' |
| 78 | -import { rules, allSchemas } from './post.data' | 50 | +import { allSchemas } from './post.data' |
| 51 | +import PostModal from './PostModal.vue' | ||
| 79 | 52 | ||
| 80 | const { t } = useI18n() // 国际化 | 53 | const { t } = useI18n() // 国际化 |
| 81 | -const message = useMessage() // 消息弹窗 | 54 | +const modalRef = ref() |
| 82 | // 列表相关的变量 | 55 | // 列表相关的变量 |
| 83 | const [registerTable, { reload, deleteData, exportList }] = useXTable({ | 56 | const [registerTable, { reload, deleteData, exportList }] = useXTable({ |
| 84 | allSchemas: allSchemas, | 57 | allSchemas: allSchemas, |
| @@ -86,56 +59,12 @@ const [registerTable, { reload, deleteData, exportList }] = useXTable({ | @@ -86,56 +59,12 @@ const [registerTable, { reload, deleteData, exportList }] = useXTable({ | ||
| 86 | deleteApi: PostApi.deletePostApi, | 59 | deleteApi: PostApi.deletePostApi, |
| 87 | exportListApi: PostApi.exportPostApi | 60 | exportListApi: PostApi.exportPostApi |
| 88 | }) | 61 | }) |
| 89 | -// 弹窗相关的变量 | ||
| 90 | -const modelVisible = ref(false) // 是否显示弹出层 | ||
| 91 | -const modelTitle = ref('edit') // 弹出层标题 | ||
| 92 | -const modelLoading = ref(false) // 弹出层loading | ||
| 93 | -const actionType = ref('') // 操作按钮的类型 | ||
| 94 | -const actionLoading = ref(false) // 按钮 Loading | ||
| 95 | -const formRef = ref<FormExpose>() // 表单 Ref | ||
| 96 | -const detailData = ref() // 详情 Ref | ||
| 97 | 62 | ||
| 98 | -const openModel = async (type: string, rowId?: number) => { | ||
| 99 | - modelLoading.value = true | ||
| 100 | - modelTitle.value = t('action.' + type) | ||
| 101 | - actionType.value = type | ||
| 102 | - modelVisible.value = true | ||
| 103 | - // 设置数据 | ||
| 104 | - if (rowId) { | ||
| 105 | - const res = await PostApi.getPostApi(rowId) | ||
| 106 | - if (type === 'update') { | ||
| 107 | - unref(formRef)?.setValues(res) | ||
| 108 | - } else if (type === 'detail') { | ||
| 109 | - detailData.value = res | ||
| 110 | - } | ||
| 111 | - } | ||
| 112 | - modelLoading.value = false | 63 | +const openModal = (type: string, rowId?: number) => { |
| 64 | + modalRef.value.openModal(type, rowId) | ||
| 113 | } | 65 | } |
| 114 | 66 | ||
| 115 | -// 提交新增/修改的表单 | ||
| 116 | -const submitForm = async () => { | ||
| 117 | - const elForm = unref(formRef)?.getElFormRef() | ||
| 118 | - if (!elForm) return | ||
| 119 | - elForm.validate(async (valid) => { | ||
| 120 | - if (valid) { | ||
| 121 | - actionLoading.value = true | ||
| 122 | - // 提交请求 | ||
| 123 | - try { | ||
| 124 | - const data = unref(formRef)?.formModel as PostApi.PostVO | ||
| 125 | - if (actionType.value === 'create') { | ||
| 126 | - await PostApi.createPostApi(data) | ||
| 127 | - message.success(t('common.createSuccess')) | ||
| 128 | - } else { | ||
| 129 | - await PostApi.updatePostApi(data) | ||
| 130 | - message.success(t('common.updateSuccess')) | ||
| 131 | - } | ||
| 132 | - modelVisible.value = false | ||
| 133 | - } finally { | ||
| 134 | - actionLoading.value = false | ||
| 135 | - // 刷新列表 | ||
| 136 | - reload() | ||
| 137 | - } | ||
| 138 | - } | ||
| 139 | - }) | 67 | +const success = () => { |
| 68 | + reload() | ||
| 140 | } | 69 | } |
| 141 | </script> | 70 | </script> |