!528 【代码优化】商城: 完善代码评审提到的问题

Merge pull request !528 from puhui999/dev-crm

src/components/UploadFile/src/UploadFile.vue

@@ -32,7 +32,6 @@
           格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
         </div>
       </template>
-      <!-- TODO @puhui999：1）表单展示的时候，位置会偏掉，已发微信-->
       <template #file="row">
         <div class="flex items-center">
           <span>{{ row.file.name }}</span>

src/views/mall/promotion/rewardActivity/RewardForm.vue

@@ -74,6 +74,8 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum, PromotionProductScopeEnum } from '@/utils/constants'
 import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
+import { cloneDeep } from 'lodash-es'
+import { fenToYuan, yuanToFen } from '@/utils'
 
 defineOptions({ name: 'ProductBrandForm' })
 
@@ -111,7 +113,12 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       const data = await RewardActivityApi.getReward(id)
+      // 转区段时间
       data.startAndEndTime = [data.startTime, data.endTime]
+      // 规则分转元
+      data.rules.forEach((item: any) => {
+        item.discountPrice = fenToYuan(item.discountPrice || 0)
+      })
       formData.value = data
       // 获得商品范围
       await getProductScope()
@@ -126,7 +133,7 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   // 校验表单
-  if (!formRef) return
+  if (!formRef.value) return
   const valid = await formRef.value.validate()
   if (!valid) return
 
@@ -135,7 +142,14 @@ const submitForm = async () => {
   try {
     // 设置活动规则优惠券
     rewardRuleRef.value?.setRuleCoupon()
-    const data = formData.value
+    const data = cloneDeep(formData.value)
+    // 时间段转换
+    data.startTime = data.startAndEndTime![0]
+    data.endTime = data.startAndEndTime![1]
+    // 规则元转分
+    data.rules.forEach((item) => {
+      item.discountPrice = yuanToFen(item.discountPrice || 0)
+    })
     // 设置商品范围
     setProductScopeValues(data)
     if (formType.value === 'create') {
@@ -170,16 +184,14 @@ const getProductScope = async () => {
       formData.value.productSpuIds = formData.value.productScopeValues
       break
     case PromotionProductScopeEnum.CATEGORY.scope:
-      // TODO @puhui999：可以直接 await nextTick() 呀。
+      await nextTick()
-      await nextTick(() => {
+      let productCategoryIds = formData.value.productScopeValues as any
-        let productCategoryIds = formData.value.productScopeValues as any
+      if (Array.isArray(productCategoryIds) && productCategoryIds.length > 0) {
-        if (Array.isArray(productCategoryIds) && productCategoryIds.length > 0) {
+        // 单选时使用数组不能反显
-          // 单选时使用数组不能反显
+        productCategoryIds = productCategoryIds[0]
-          productCategoryIds = productCategoryIds[0]
+      }
-        }
+      // 设置品类编号
-        // 设置品类编号
+      formData.value.productCategoryIds = productCategoryIds
-        formData.value.productCategoryIds = productCategoryIds
-      })
       break
     default:
       break

src/views/mall/promotion/rewardActivity/components/RewardRule.vue

@@ -25,12 +25,13 @@
               订单金额优惠
               <el-form-item>
                 减
-                <!-- TODO @puhui999：需要考虑 100 换算哈 -->
+                <el-input-number
-                <el-input
                   v-model="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
                   class="w-150px! p-x-20px!"
-                  placeholder=""
+                  controls-position="right"
-                  type="number"
                 />
                 元
               </el-form-item>
@@ -71,9 +72,9 @@
                 inactive-text="否"
                 inline-prompt
               />
-              <RewardRuleCouponShowcase
+              <RewardRuleCouponSelect
                 v-if="rule.giveCoupon"
-                ref="rewardRuleCouponShowcaseRef"
+                ref="rewardRuleCouponSelectRef"
                 v-model="rule!"
               />
             </el-col>
@@ -88,12 +89,14 @@
 </template>
 
 <script lang="ts" setup>
-import RewardRuleCouponShowcase from './RewardRuleCouponShowcase.vue'
+import RewardRuleCouponSelect from './RewardRuleCouponSelect.vue'
 import { RewardActivityVO } from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum } from '@/utils/constants'
 import { useVModel } from '@vueuse/core'
 import { isEmpty } from '@/utils/is'
 
+defineOptions({ name: 'RewardRule' })
+
 const props = defineProps<{
   modelValue: RewardActivityVO
 }>()
@@ -104,7 +107,7 @@ const emits = defineEmits<{
 }>()
 
 const formData = useVModel(props, 'modelValue', emits) // 活动数据
-const rewardRuleCouponShowcaseRef = ref<InstanceType<typeof RewardRuleCouponShowcase>[]>() // 活动规则优惠券 Ref
+const rewardRuleCouponSelectRef = ref<InstanceType<typeof RewardRuleCouponSelect>[]>() // 活动规则优惠券 Ref
 
 /** 删除优惠规则 */
 const deleteRule = (ruleIndex: number) => {
@@ -127,14 +130,20 @@ const addRule = () => {
 
 /** 设置规则优惠券-提交时 */
 const setRuleCoupon = () => {
-  if (isEmpty(rewardRuleCouponShowcaseRef.value)) {
+  if (isEmpty(rewardRuleCouponSelectRef.value)) {
     return
   }
 
-  rewardRuleCouponShowcaseRef.value?.forEach((item) => item.setGiveCouponList())
+  // 情况一：不赠送优惠券
+  formData.value.rules.forEach((rule) => {
+    if (!rule.giveCoupon) {
+      rule.couponIds = []
+      rule.couponCounts = []
+    }
+  })
+  // 情况二：赠送优惠券
+  rewardRuleCouponSelectRef.value?.forEach((item) => item.setGiveCouponList())
 }
 
 defineExpose({ setRuleCoupon })
 </script>
-
-<style lang="scss" scoped></style>

src/views/mall/promotion/rewardActivity/components/RewardRuleCouponSelect.vue

@@ -40,7 +40,7 @@ import { isEmpty } from '@/utils/is'
 import { useVModel } from '@vueuse/core'
 import { findIndex } from '@/utils'
 
-// TODO @puhui999：要不就叫 RewardRuleCouponSelect
+defineOptions({ name: 'RewardRuleCouponSelect' })
 
 const props = defineProps<{
   modelValue: RewardRule
@@ -89,15 +89,13 @@ const initGiveCouponList = async () => {
   if (!data) {
     return
   }
-
+  data.forEach((coupon) => {
-  for (let i = 0; i < data.length; i++) {
+    const index = findIndex(rewardRule.value.couponIds!, (couponId) => couponId === coupon.id)
-    const coupon = data[i]
-    const index = findIndex(rewardRule.value.couponIds!, (item) => item.id === coupon.id)
     list.value.push({
       ...coupon,
       giveCount: rewardRule.value.couponCounts![index]
     })
-  }
+  })
 }
 
 /** 设置赠送的优惠券 */
@@ -106,15 +104,8 @@ const setGiveCouponList = () => {
     return
   }
 
-  const couponIds: number[] = []
+  rewardRule.value.couponIds = list.value.map((rule) => rule.id)
-  const couponCounts: number[] = []
+  rewardRule.value.couponCounts = list.value.map((rule) => rule.giveCount || 0)
-  for (let i = 0, len = list.value.length; i < len; i++) {
-    couponIds.push(list.value[i].id)
-    couponCounts.push(list.value[i].giveCount!)
-  }
-  // TODO @puhui999：可以考虑，直接使用 list 的 map 操作，简单一些。性能没啥差别的
-  rewardRule.value.couponIds = couponIds
-  rewardRule.value.couponCounts = couponCounts
 }
 defineExpose({ setGiveCouponList })