BJ_ZTEITS-Developers / parking-cloud-yudao

Commit d2805b1dcab9ac93965410f6a2efe8c5899c3fe0

Authored by xingyu
1 parent 654fce75

perf: 重构post

Inline Side-by-side
Showing 2 changed files with 104 additions and 82 deletions
yudao-ui-admin-vue3/src/views/system/post/PostModal.vue 0 → 100644
  View file @d2805b1
  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
  View file @d2805b1
... ... @@ -9,7 +9,7 @@
9 9 preIcon="ep:zoom-in"
10 10 :title="t('action.add')"
11 11 v-hasPermi="['system:post:create']"
12   - @click="openModel('create')"
  12 + @click="openModal('create')"
13 13 />
14 14 <!-- 操作：导出 -->
15 15 <XButton
... ... @@ -25,13 +25,13 @@
25 25 <XTextButton
26 26 preIcon="ep:edit"
27 27 v-hasPermi="['system:post:update']"
28   - @click="openModel('update', row.id)"
  28 + @click="openModal('update', row.id)"
29 29 />
30 30 <!-- 操作：详情 -->
31 31 <XTextButton
32 32 preIcon="ep:view"
33 33 v-hasPermi="['system:post:query']"
34   - @click="openModel('detail', row.id)"
  34 + @click="openModal('detail', row.id)"
35 35 />
36 36 <!-- 操作：删除 -->
37 37 <XTextButton
... ... @@ -42,43 +42,16 @@
42 42 </template>
43 43 </XTable>
44 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 46 </template>
74 47 <script setup lang="ts" name="Post">
75   -import type { FormExpose } from '@/components/Form'
76 48 // 业务相关的 import
77 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 53 const { t } = useI18n() // 国际化
81   -const message = useMessage() // 消息弹窗
  54 +const modalRef = ref()
82 55 // 列表相关的变量
83 56 const [registerTable, { reload, deleteData, exportList }] = useXTable({
84 57 allSchemas: allSchemas,
... ... @@ -86,56 +59,12 @@ const [registerTable, { reload, deleteData, exportList }] = useXTable({
86 59 deleteApi: PostApi.deletePostApi,
87 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 70 </script>
... ...