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

10afbe8e · YunaiV · a38ddb69 · 10afbe8e · 10afbe8e · 10afbe8e
Commit 10afbe8e authored Jan 12, 2024 by YunaiV
5 changed files
--- a/src/views/mall/product/spu/form/DeliveryForm.vue
+++ b/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()

--- a/src/views/mall/product/spu/form/DescriptionForm.vue
+++ b/src/views/mall/product/spu/form/DescriptionForm.vue
+<!-- 商品发布 - 商品详情 -->
 <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('商品详情为完善!!')
-      emit('update:activeName', 'description')
-      // 目的截断之后的校验
-      throw new Error('商品详情为完善!!')
-    } else {
    // 校验通过更新数据
-      Object.assign(props.propFormData, formData.value)
+    Object.assign(props.propFormData, formData)
+  } catch (e) {
+    message.error('【商品详情】不完善，请填写相关信息')
+    emit('update:activeName', 'description')
+    throw e // 目的截断之后的校验
  }
-  })
 }
 defineExpose({ validate })
 </script>
--- a/src/views/mall/product/spu/form/InfoForm.vue
+++ b/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()

--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/form/OtherSettingsForm.vue
+<!-- 商品发布 - 其它设置 -->
 <template>
-  <el-form
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
-    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-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" />
+      <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="请输入虚拟销量" />
+      <el-input-number
+        v-model="formData.virtualSalesCount"
+        :min="0"
+        placeholder="请输入虚拟销量"
+        class="w-80!"
+      />
    </el-form-item>
  </el-form>
 </template>
@@ -23,7 +33,7 @@ import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
-defineOptions({ name: 'OtherSettingsForm' })
+defineOptions({ name: 'ProductOtherForm' })
 const message = useMessage() // 消息弹窗
@@ -32,16 +42,15 @@ const props = defineProps({
    type: Object as PropType<Spu>,
    default: () => {}
  },
-  activeName: propTypes.string.def(''),
  isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
-const otherSettingsFormRef = ref() // 表单Ref
+const formRef = ref() // 表单Ref
 // 表单数据
 const formData = ref<Spu>({
-  sort: 1, // 商品排序
+  sort: 0, // 商品排序
-  giveIntegral: 1, // 赠送积分
+  giveIntegral: 0, // 赠送积分
-  virtualSalesCount: 1 // 虚拟销量
+  virtualSalesCount: 0 // 虚拟销量
 })
 // 表单规则
 const rules = reactive({
@@ -50,9 +59,7 @@ const rules = reactive({
  virtualSalesCount: [required]
 })
-/**
+/** 将传进来的值赋值给 formData */
- * 将传进来的值赋值给formData
- */
 watch(
  () => props.propFormData,
  (data) => {
@@ -66,24 +73,19 @@ watch(
  }
 )
-/**
+/** 表单校验 */
- * 表单校验
- */
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
-  // 校验表单
+  if (!formRef) return
-  if (!otherSettingsFormRef) return
+  try {
-  return await unref(otherSettingsFormRef).validate((valid) => {
+    await unref(formRef)?.validate()
-    if (!valid) {
-      message.warning('商品其他设置未完善！！')
-      emit('update:activeName', 'otherSettings')
-      // 目的截断之后的校验
-      throw new Error('商品其他设置未完善！！')
-    } else {
    // 校验通过更新数据
-      Object.assign(props.propFormData, formData.value)
+    Object.assign(props.propFormData, formData)
+  } catch (e) {
+    message.error('【其它设置】不完善，请填写相关信息')
+    emit('update:activeName', 'other')
+    throw e // 目的截断之后的校验
  }
-  })
 }
 defineExpose({ validate })
 </script>
--- a/src/views/mall/product/spu/form/index.vue
+++ b/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) => {