📖 MALL：商品编辑 => 优化 DescriptionForm 表单

src/views/mall/product/spu/form/DeliveryForm.vue

@@ -75,7 +75,6 @@ watch(
 /** 表单校验 */
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
-  // 校验表单
   if (!formRef) return
   try {
     await unref(formRef)?.validate()

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

@@ -1,11 +1,6 @@
+<!-- 商品发布 - 商品详情 -->
 <template>
-  <el-form
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
-    ref="descriptionFormRef"
-    :model="formData"
-    :rules="rules"
-    label-width="120px"
-    :disabled="isDetail"
-  >
     <!--富文本编辑器组件-->
     <el-form-item label="商品详情" prop="description">
       <Editor v-model:modelValue="formData.description" />
@@ -19,7 +14,7 @@ import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 
-defineOptions({ name: 'DescriptionForm' })
+defineOptions({ name: 'ProductDescriptionForm' })
 
 const message = useMessage() // 消息弹窗
 
@@ -31,7 +26,7 @@ const props = defineProps({
   activeName: propTypes.string.def(''),
   isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
-const descriptionFormRef = ref() // 表单Ref
+const formRef = ref() // 表单Ref
 const formData = ref<Spu>({
   description: '' // 商品详情
 })
@@ -39,9 +34,8 @@ const formData = ref<Spu>({
 const rules = reactive({
   description: [required]
 })
-/**
+
- * 富文本编辑器如果输入过再清空会有残留，需再重置一次
+/** 富文本编辑器如果输入过再清空会有残留，需再重置一次 */
- */
 watch(
   () => formData.value.description,
   (newValue) => {
@@ -54,9 +48,8 @@ watch(
     immediate: true
   }
 )
-/**
+
- * 将传进来的值赋值给formData
+/** 将传进来的值赋值给 formData */
- */
 watch(
   () => props.propFormData,
   (data) => {
@@ -70,24 +63,19 @@ watch(
   }
 )
 
-/**
+/** 表单校验 */
- * 表单校验
- */
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
-  // 校验表单
+  if (!formRef) return
-  if (!descriptionFormRef) return
+  try {
-  return await unref(descriptionFormRef).validate((valid) => {
+    await unref(formRef)?.validate()
-    if (!valid) {
+    // 校验通过更新数据
-      message.warning('商品详情为完善!!')
+    Object.assign(props.propFormData, formData)
-      emit('update:activeName', 'description')
+  } catch (e) {
-      // 目的截断之后的校验
+    message.error('【商品详情】不完善，请填写相关信息')
-      throw new Error('商品详情为完善!!')
+    emit('update:activeName', 'description')
-    } else {
+    throw e // 目的截断之后的校验
-      // 校验通过更新数据
+  }
-      Object.assign(props.propFormData, formData.value)
-    }
-  })
 }
 defineExpose({ validate })
 </script>

src/views/mall/product/spu/form/InfoForm.vue

@@ -120,7 +120,6 @@ watch(
 /** 表单校验 */
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
-  // 校验表单
   if (!formRef) return
   try {
     await unref(formRef)?.validate()

src/views/mall/product/spu/form/OtherForm.vue

@@ -0,0 +1,91 @@
+<!-- 商品发布 - 其它设置 -->
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
+    <el-form-item label="商品排序" prop="sort">
+      <el-input-number
+        v-model="formData.sort"
+        :min="0"
+        placeholder="请输入商品排序"
+        class="w-80!"
+      />
+    </el-form-item>
+    <el-form-item label="赠送积分" prop="giveIntegral">
+      <el-input-number
+        v-model="formData.giveIntegral"
+        :min="0"
+        placeholder="请输入赠送积分"
+        class="w-80!"
+      />
+    </el-form-item>
+    <el-form-item label="虚拟销量" prop="virtualSalesCount">
+      <el-input-number
+        v-model="formData.virtualSalesCount"
+        :min="0"
+        placeholder="请输入虚拟销量"
+        class="w-80!"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { Spu } from '@/api/mall/product/spu'
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { copyValueToTarget } from '@/utils'
+
+defineOptions({ name: 'ProductOtherForm' })
+
+const message = useMessage() // 消息弹窗
+
+const props = defineProps({
+  propFormData: {
+    type: Object as PropType<Spu>,
+    default: () => {}
+  },
+  isDetail: propTypes.bool.def(false) // 是否作为详情组件
+})
+
+const formRef = ref() // 表单Ref
+// 表单数据
+const formData = ref<Spu>({
+  sort: 0, // 商品排序
+  giveIntegral: 0, // 赠送积分
+  virtualSalesCount: 0 // 虚拟销量
+})
+// 表单规则
+const rules = reactive({
+  sort: [required],
+  giveIntegral: [required],
+  virtualSalesCount: [required]
+})
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return
+    }
+    copyValueToTarget(formData.value, data)
+  },
+  {
+    immediate: true
+  }
+)
+
+/** 表单校验 */
+const emit = defineEmits(['update:activeName'])
+const validate = async () => {
+  if (!formRef) return
+  try {
+    await unref(formRef)?.validate()
+    // 校验通过更新数据
+    Object.assign(props.propFormData, formData)
+  } catch (e) {
+    message.error('【其它设置】不完善，请填写相关信息')
+    emit('update:activeName', 'other')
+    throw e // 目的截断之后的校验
+  }
+}
+defineExpose({ validate })
+</script>

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

@@ -1,89 +0,0 @@
-<template>
-  <el-form
-    ref="otherSettingsFormRef"
-    :model="formData"
-    :rules="rules"
-    label-width="120px"
-    :disabled="isDetail"
-  >
-    <el-form-item label="商品排序" prop="sort">
-      <el-input-number v-model="formData.sort" :min="0" />
-    </el-form-item>
-    <el-form-item label="赠送积分" prop="giveIntegral">
-      <el-input-number v-model="formData.giveIntegral" :min="0" />
-    </el-form-item>
-    <el-form-item label="虚拟销量" prop="virtualSalesCount">
-      <el-input-number v-model="formData.virtualSalesCount" :min="0" placeholder="请输入虚拟销量" />
-    </el-form-item>
-  </el-form>
-</template>
-<script lang="ts" setup>
-import type { Spu } 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({
-  propFormData: {
-    type: Object as PropType<Spu>,
-    default: () => {}
-  },
-  activeName: propTypes.string.def(''),
-  isDetail: propTypes.bool.def(false) // 是否作为详情组件
-})
-
-const otherSettingsFormRef = ref() // 表单Ref
-// 表单数据
-const formData = ref<Spu>({
-  sort: 1, // 商品排序
-  giveIntegral: 1, // 赠送积分
-  virtualSalesCount: 1 // 虚拟销量
-})
-// 表单规则
-const rules = reactive({
-  sort: [required],
-  giveIntegral: [required],
-  virtualSalesCount: [required]
-})
-
-/**
- * 将传进来的值赋值给formData
- */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return
-    }
-    copyValueToTarget(formData.value, data)
-  },
-  {
-    immediate: true
-  }
-)
-
-/**
- * 表单校验
- */
-const emit = defineEmits(['update:activeName'])
-const validate = async () => {
-  // 校验表单
-  if (!otherSettingsFormRef) return
-  return await unref(otherSettingsFormRef).validate((valid) => {
-    if (!valid) {
-      message.warning('商品其他设置未完善！！')
-      emit('update:activeName', 'otherSettings')
-      // 目的截断之后的校验
-      throw new Error('商品其他设置未完善！！')
-    } else {
-      // 校验通过更新数据
-      Object.assign(props.propFormData, formData.value)
-    }
-  })
-}
-defineExpose({ validate })
-</script>

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

@@ -33,9 +33,9 @@
           :propFormData="formData"
         />
       </el-tab-pane>
-      <el-tab-pane label="其它设置" name="otherSettings">
+      <el-tab-pane label="其它设置" name="other">
-        <OtherSettingsForm
+        <OtherForm
-          ref="otherSettingsRef"
+          ref="otherRef"
           v-model:activeName="activeName"
           :is-detail="isDetail"
           :propFormData="formData"
@@ -58,7 +58,7 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import InfoForm from './InfoForm.vue'
 import DescriptionForm from './DescriptionForm.vue'
-import OtherSettingsForm from './OtherSettingsForm.vue'
+import OtherForm from './OtherForm.vue'
 import SkuForm from './SkuForm.vue'
 import DeliveryForm from './DeliveryForm.vue'
 import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
@@ -78,7 +78,7 @@ const infoRef = ref() // 商品信息 Ref
 const skuRef = ref() // 商品规格 Ref
 const deliveryRef = ref() // 物流设置 Ref
 const descriptionRef = ref() // 商品详情 Ref
-const otherSettingsRef = ref() // 其他设置 Ref
+const otherRef = ref() // 其他设置 Ref
 // SPU 表单数据
 const formData = ref<ProductSpuApi.Spu>({
   name: '', // 商品名称
@@ -155,7 +155,7 @@ const submitForm = async () => {
     await unref(skuRef)?.validate()
     await unref(deliveryRef)?.validate()
     await unref(descriptionRef)?.validate()
-    await unref(otherSettingsRef)?.validate()
+    await unref(otherRef)?.validate()
     // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
     const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
     deepCopyFormData.skus!.forEach((item) => {