perf: post

yudao-ui-admin-vue3/src/views/system/dict/index.vue

@@ -113,19 +113,21 @@
         </Table>
       </div>
     </el-card>
-    <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
-      <Form
+      <template #default>
-        v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
+        <Form
-        :schema="DictTypeSchemas.allSchemas.formSchema"
+          v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
-        :rules="DictTypeSchemas.dictTypeRules"
+          :schema="DictTypeSchemas.allSchemas.formSchema"
-        ref="typeFormRef"
+          :rules="DictTypeSchemas.dictTypeRules"
-      />
+          ref="typeFormRef"
-      <Form
+        />
-        v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
+        <Form
-        :schema="DictDataSchemas.allSchemas.formSchema"
+          v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
-        :rules="DictDataSchemas.dictDataRules"
+          :schema="DictDataSchemas.allSchemas.formSchema"
-        ref="dataFormRef"
+          :rules="DictDataSchemas.dictDataRules"
-      />
+          ref="dataFormRef"
+        />
+      </template>
       <!-- 操作按钮 -->
       <template #footer>
         <XButton
@@ -144,7 +146,7 @@
         />
         <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
       </template>
-    </Dialog>
+    </XModal>
   </div>
 </template>
 <script setup lang="ts">

yudao-ui-admin-vue3/src/views/system/post/index.vue

@@ -79,35 +79,31 @@ import { rules, allSchemas } from './post.data'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useVxeGrid } from '@/hooks/web/useVxeGrid'
-import { VxeFormEvents, VxeGridInstance } from 'vxe-table'
+import { VxeGridInstance } from 'vxe-table'
 import { FormExpose } from '@/components/Form'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const xGrid = ref<VxeGridInstance>()
-const formRef = ref<FormExpose>() // 表单 Ref
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
 const actionType = ref('') // 操作按钮的类型
 const actionLoading = ref(false) // 按钮Loading
+const xGrid = ref<VxeGridInstance>() // grid Ref
+const formRef = ref<FormExpose>() // 表单 Ref
+const detailRef = ref() // 详情 Ref
 
 const { gridOptions } = useVxeGrid<PostVO>({
   allSchemas: allSchemas,
   getListApi: PostApi.getPostPageApi
 })
+
 // 设置标题
 const setDialogTile = (type: string) => {
   dialogTitle.value = t('action.' + type)
   actionType.value = type
   dialogVisible.value = true
 }
-// ========== 详情相关 ==========
+
-const detailRef = ref() // 详情 Ref
-// 详情操作
-const handleDetail = (row: PostVO) => {
-  setDialogTile('detail')
-  detailRef.value = row
-}
 // 新增操作
 const handleCreate = () => {
   setDialogTile('create')
@@ -115,6 +111,12 @@ const handleCreate = () => {
   unref(formRef)?.getElFormRef()?.resetFields()
 }
 
+// 详情操作
+const handleDetail = (row: PostVO) => {
+  setDialogTile('detail')
+  detailRef.value = row
+}
+
 // 修改操作
 const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
@@ -122,6 +124,7 @@ const handleUpdate = async (rowId: number) => {
   const res = await PostApi.getPostApi(rowId)
   unref(formRef)?.setValues(res)
 }
+
 // 删除操作
 const handleDelete = async (rowId: number) => {
   message
@@ -134,8 +137,9 @@ const handleDelete = async (rowId: number) => {
       xGrid.value?.commitProxy('query')
     })
 }
+
 // 提交按钮
-const submitForm: VxeFormEvents.Submit = async () => {
+const submitForm = async () => {
   const elForm = unref(formRef)?.getElFormRef()
   if (!elForm) return
   elForm.validate(async (valid) => {
@@ -151,7 +155,6 @@ const submitForm: VxeFormEvents.Submit = async () => {
           await PostApi.updatePostApi(data)
           message.success(t('common.updateSuccess'))
         }
-        // 操作成功，重新加载列表
         dialogVisible.value = false
       } finally {
         actionLoading.value = false

yudao-ui-admin-vue3/src/views/system/post/post.data.ts

@@ -1,8 +1,8 @@
 import { reactive } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { required } from '@/utils/formRules'
-import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
 import { DICT_TYPE } from '@/utils/dict'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
 const { t } = useI18n() // 国际化
 
 // 表单校验