From 8917dcf6bf3ca3bd3c74b64b7b16f894c8a49bb6 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 1 Nov 2022 17:12:26 +0800
Subject: [PATCH] perf: vxe demo
---
.../src/plugins/vxeTable/index.ts | 11 +++++++++++
.../src/views/system/post/index.vue | 19 +++++++++++++------
2 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
index a7c840cbb..bfe355d05 100644
--- a/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
+++ b/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)
diff --git a/yudao-ui-admin-vue3/src/views/system/post/index.vue b/yudao-ui-admin-vue3/src/views/system/post/index.vue
index 3607a2a12..f9c36f366 100644
--- a/yudao-ui-admin-vue3/src/views/system/post/index.vue
+++ b/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 }) {
- return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
- }
+ formatter: 'formatDate'
},
{
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