perf: vxe demo

yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts

@@ -103,6 +103,9 @@ VXETable.setup({
   input: {
     clearable: true
   },
+  form: {
+    titleColon: true // 是否显示标题冒号
+  },
   modal: {
     width: 600, // 窗口的宽度
     height: 400, // 窗口的高度
@@ -124,6 +127,14 @@ VXETable.setup({
       : XEUtils.toFormatString(XEUtils.get(enUS, key), args)
   }
 })
+// 格式金额，默认2位数
+VXETable.formats.add('formatAmount', ({ cellValue }, digits = 2) => {
+  return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits })
+})
+// 格式日期，默认 yyyy-MM-dd HH:mm:ss
+VXETable.formats.add('formatDate', ({ cellValue }, format = 'yyyy-MM-dd HH:mm:ss') => {
+  return XEUtils.toDateString(cellValue, format)
+})
 export const setupVxeTable = (app: App<Element>) => {
   // 表格功能
   app.use(Filter).use(Edit).use(Menu).use(Export).use(Keyboard).use(Validator)

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

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import dayjs from 'dayjs'
-import XEUtils from 'xe-utils'
 import { useI18n } from '@/hooks/web/useI18n'
-import { VxeFormEvents, VxeFormItemProps, VxeGrid, VxeGridInstance, VxeGridProps } from 'vxe-table'
+import {
+  VxeFormEvents,
+  VxeFormInstance,
+  VxeFormItemProps,
+  VxeGrid,
+  VxeGridInstance,
+  VxeGridProps
+} from 'vxe-table'
 import * as PostApi from '@/api/system/post'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { ContentWrap } from '@/components/ContentWrap'
@@ -14,6 +20,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 const { t } = useI18n() // 国际化
 
 const xGrid = ref<VxeGridInstance>()
+const xForm = ref<VxeFormInstance>()
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
 const actionType = ref('') // 操作按钮的类型
@@ -93,9 +100,7 @@ const gridOptions = reactive<VxeGridProps>({
       title: t('common.createTime'),
       width: 160,
       sortable: true,
-      formatter({ cellValue }) {
+      formatter: 'formatDate'
-        return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
-      }
     },
     {
       field: 'action',
@@ -203,6 +208,8 @@ const handleDetail = (row: PostVO) => {
 }
 // 新增操作
 const handleCreate = () => {
+  const $form = xForm.value
+  $form?.reset()
   setDialogTile('create')
 }
 
@@ -308,11 +315,11 @@ const submitForm: VxeFormEvents.Submit = async () => {
     <template #default>
       <!-- 对话框(添加 / 修改) -->
       <vxe-form
+        ref="xForm"
         v-if="['create', 'update'].includes(actionType)"
         :data="formData"
         :items="formItems"
         :rules="rules"
-        titleColon
         @submit="submitForm"
       />
       <Descriptions