refactor: vue3.3 defineOptions

src/views/pay/app/AppForm.vue

@@ -47,12 +47,14 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="PayAppForm" setup>
+<script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as AppApi from '@/api/pay/app'
 import * as MerchantApi from '@/api/pay/merchant'
 import { CommonStatusEnum } from '@/utils/constants'
 
+defineOptions({ name: 'PayAppForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/pay/app/index.vue

@@ -303,13 +303,16 @@
   <!-- 表单弹窗：添加/修改 -->
   <AppForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayApp">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as AppApi from '@/api/pay/app'
 import AppForm from '@/views/pay/app/AppForm.vue'
 import { PayChannelEnum, PayType } from '@/utils/constants'
+
+defineOptions({ name: 'PayApp' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/pay/merchant/MerchantForm.vue

@@ -27,11 +27,13 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="PayMerchantForm" setup>
+<script lang="ts" setup>
 import * as MerchantApi from '@/api/pay/merchant'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 
+defineOptions({ name: 'PayMerchantForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/pay/merchant/index.vue

@@ -137,13 +137,16 @@
   <!-- 表单弹窗：添加/修改 -->
   <MerchantForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayMerchant">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as MerchantApi from '@/api/pay/merchant'
 import MerchantForm from './MerchantForm.vue'
+
+defineOptions({ name: 'PayMerchant' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/pay/order/OrderDetail.vue

@@ -78,11 +78,13 @@
     </el-descriptions>
   </Dialog>
 </template>
-<script lang="ts" name="PayOrderDetail" setup>
+<script lang="ts" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import * as OrderApi from '@/api/pay/order'
 import { formatDate } from '@/utils/formatTime'
 
+defineOptions({ name: 'PayOrderDetail' })
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref({})

src/views/pay/order/index.vue

@@ -228,15 +228,18 @@
   <!-- 表单弹窗：预览 -->
   <OrderDetail ref="detailRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayOrder">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as MerchantApi from '@/api/pay/merchant'
 import * as OrderApi from '@/api/pay/order'
 import OrderDetail from './OrderDetail.vue'
-const message = useMessage() // 消息弹窗
 import download from '@/utils/download'
 
+defineOptions({ name: 'PayOrder' })
+
+const message = useMessage() // 消息弹窗
+
 const loading = ref(false) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据

src/views/pay/refund/RefundDetail.vue

@@ -84,11 +84,13 @@
     </el-descriptions>
   </Dialog>
 </template>
-<script lang="ts" name="PayRefundDetail" setup>
+<script lang="ts" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as RefundApi from '@/api/pay/refund'
 
+defineOptions({ name: 'PayRefundDetail' })
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref({})

src/views/pay/refund/index.vue

@@ -232,15 +232,18 @@
   <!-- 表单弹窗：预览 -->
   <RefundDetail ref="detailRef" @success="getList" />
 </template>
-<script setup lang="ts" name="PayRefund">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as MerchantApi from '@/api/pay/merchant'
 import * as RefundApi from '@/api/pay/refund'
 import RefundDetail from './RefundDetail.vue'
-const message = useMessage() // 消息弹窗
 import download from '@/utils/download'
 
+defineOptions({ name: 'PayRefund' })
+
+const message = useMessage() // 消息弹窗
+
 const loading = ref(false) // 列表遮罩层
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据