refactor: vue3.3 defineOptions

src/views/mall/product/brand/BrandForm.vue

@@ -37,10 +37,13 @@
     </template>
   </Dialog>
 </template>
-<script setup lang="ts" name="ProductBrandForm">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as ProductBrandApi from '@/api/mall/product/brand'
+
+defineOptions({ name: 'ProductBrandForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mall/product/brand/index.vue

@@ -108,11 +108,14 @@
   <!-- 表单弹窗：添加/修改 -->
   <BrandForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="ProductBrand">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as ProductBrandApi from '@/api/mall/product/brand'
 import BrandForm from './BrandForm.vue'
+
+defineOptions({ name: 'ProductBrand' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/mall/product/category/CategoryForm.vue

@@ -50,10 +50,13 @@
     </template>
   </Dialog>
 </template>
-<script setup lang="ts" name="ProductCategory">
+<script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as ProductCategoryApi from '@/api/mall/product/category'
+
+defineOptions({ name: 'ProductCategory' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mall/product/category/index.vue

@@ -80,12 +80,15 @@
   <!-- 表单弹窗：添加/修改 -->
   <CategoryForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="ProductCategory">
+<script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import { handleTree } from '@/utils/tree'
 import { dateFormatter } from '@/utils/formatTime'
 import * as ProductCategoryApi from '@/api/mall/product/category'
 import CategoryForm from './CategoryForm.vue'
+
+defineOptions({ name: 'ProductCategory' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/mall/product/property/PropertyForm.vue

@@ -20,9 +20,11 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="ProductPropertyForm" setup>
+<script lang="ts" setup>
 import * as PropertyApi from '@/api/mall/product/property'
 
+defineOptions({ name: 'ProductPropertyForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mall/product/property/index.vue

@@ -99,11 +99,13 @@
   <!-- 表单弹窗：添加/修改 -->
   <PropertyForm ref="formRef" @success="getList" />
 </template>
-<script lang="ts" name="ProductProperty" setup>
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as PropertyApi from '@/api/mall/product/property'
 import PropertyForm from './PropertyForm.vue'
 
+defineOptions({ name: 'ProductProperty' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/mall/product/property/value/ValueForm.vue

@@ -23,9 +23,11 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="ProductPropertyValueForm" setup>
+<script lang="ts" setup>
 import * as PropertyApi from '@/api/mall/product/property'
 
+defineOptions({ name: 'ProductPropertyValueForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mall/product/property/value/index.vue

@@ -88,10 +88,13 @@
   <!-- 表单弹窗：添加/修改 -->
   <ValueForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="ProductPropertyValue">
+<script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import * as PropertyApi from '@/api/mall/product/property'
 import ValueForm from './ValueForm.vue'
+
+defineOptions({ name: 'ProductPropertyValue' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { params } = useRoute() // 查询参数

src/views/mall/product/spu/addForm.vue

@@ -31,7 +31,7 @@
     </el-form>
   </ContentWrap>
 </template>
-<script lang="ts" name="ProductSpuForm" setup>
+<script lang="ts" setup>
 import { cloneDeep } from 'lodash-es'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
@@ -39,6 +39,8 @@ import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import { convertToInteger, formatToFraction } from '@/utils'
 
+defineOptions({ name: 'ProductSpuForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push, currentRoute } = useRouter() // 路由

src/views/mall/product/spu/components/BasicInfoForm.vue

@@ -115,7 +115,7 @@
   </el-form>
   <ProductAttributesAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
 </template>
-<script lang="ts" name="ProductSpuBasicInfoForm" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { copyValueToTarget } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
@@ -127,6 +127,8 @@ import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
 import * as ProductCategoryApi from '@/api/mall/product/category'
 import { getSimpleBrandList } from '@/api/mall/product/brand'
 
+defineOptions({ name: 'ProductSpuBasicInfoForm' })
+
 const message = useMessage() // 消息弹窗
 
 const props = defineProps({

src/views/mall/product/spu/components/DescriptionForm.vue

@@ -6,13 +6,15 @@
     </el-form-item>
   </el-form>
 </template>
-<script lang="ts" name="DescriptionForm" setup>
+<script lang="ts" setup>
 import type { SpuType } from '@/api/mall/product/spu'
 import { Editor } from '@/components/Editor'
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 
+defineOptions({ name: 'DescriptionForm' })
+
 const message = useMessage() // 消息弹窗
 const props = defineProps({
   propFormData: {

src/views/mall/product/spu/components/OtherSettingsForm.vue

@@ -51,12 +51,14 @@
     </el-row>
   </el-form>
 </template>
-<script lang="ts" name="OtherSettingsForm" setup>
+<script lang="ts" setup>
 import type { SpuType } from '@/api/mall/product/spu'
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 
+defineOptions({ name: 'OtherSettingsForm' })
+
 const message = useMessage() // 消息弹窗
 
 const props = defineProps({

src/views/mall/product/spu/components/ProductAttributes.vue

@@ -40,10 +40,12 @@
   </el-col>
 </template>
 
-<script lang="ts" name="ProductAttributes" setup>
+<script lang="ts" setup>
 import { ElInput } from 'element-plus'
 import * as PropertyApi from '@/api/mall/product/property'
 
+defineOptions({ name: 'ProductAttributes' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const inputValue = ref('') // 输入框值

src/views/mall/product/spu/components/ProductAttributesAddForm.vue

@@ -17,9 +17,11 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="ProductPropertyForm" setup>
+<script lang="ts" setup>
 import * as PropertyApi from '@/api/mall/product/property'
 
+defineOptions({ name: 'ProductPropertyForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mall/product/spu/components/SkuList.vue

@@ -107,13 +107,15 @@
     </el-table-column>
   </el-table>
 </template>
-<script lang="ts" name="SkuList" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { copyValueToTarget } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
 import { UploadImg } from '@/components/UploadFile'
 import type { Property, SkuType, SpuType } from '@/api/mall/product/spu'
 
+defineOptions({ name: 'SkuList' })
+
 const props = defineProps({
   propFormData: {
     type: Object as PropType<SpuType>,

src/views/mall/product/spu/index.vue

@@ -197,7 +197,7 @@
     />
   </ContentWrap>
 </template>
-<script lang="ts" name="ProductSpu" setup>
+<script lang="ts" setup>
 import { TabsPaneContext } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
 import { createImageViewer } from '@/components/ImageViewer'
@@ -209,6 +209,8 @@ import download from '@/utils/download'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as ProductCategoryApi from '@/api/mall/product/category'
 
+defineOptions({ name: 'ProductSpu' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { currentRoute, push } = useRouter() // 路由跳转