【代码优化】商城: 完善积分商城

Author: puhui999

src/views/mall/promotion/point/activity/PointActivityForm.vue

@@ -9,7 +9,7 @@
     >
       <!-- 先选择 -->
       <template #spuId>
-        <el-button @click="spuSelectRef.open()">选择商品</el-button>
+        <el-button v-if="!isFormUpdate" @click="spuSelectRef.open()">选择商品</el-button>
         <SpuAndSkuList
           ref="spuAndSkuListRef"
           :rule-config="ruleConfig"
@@ -18,7 +18,12 @@
         >
           <el-table-column align="center" label="可兑换库存" min-width="168">
             <template #default="{ row: sku }">
-              <el-input-number v-model="sku.productConfig.stock" :min="0" class="w-100%" />
+              <el-input-number
+                v-model="sku.productConfig.stock"
+                :max="sku.stock"
+                :min="0"
+                class="w-100%"
+              />
             </template>
           </el-table-column>
           <el-table-column align="center" label="可兑换次数" min-width="168">
@@ -77,6 +82,7 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formRef = ref() // 表单 Ref
+const isFormUpdate = ref(false) // 是否更新表单
 
 // ================= 商品选择相关 =================
 
@@ -163,6 +169,7 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       const data = (await PointActivityApi.getPointActivity(id)) as PointActivityVO
+      isFormUpdate.value = true
       await getSpuDetails(
         data.spuId!,
         data.products?.map((sku) => sku.skuId),
@@ -213,6 +220,7 @@ const submitForm = async () => {
 const resetForm = async () => {
   spuList.value = []
   spuPropertyList.value = []
+  isFormUpdate.value = false
   await nextTick()
   formRef.value.getElFormRef().resetFields()
 }

src/views/mall/promotion/point/activity/index.vue

@@ -83,10 +83,13 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <!-- TODO @puhui999：这里没读取到 -->
       <el-table-column align="center" label="库存" min-width="80" prop="stock" />
       <el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
-      <el-table-column label="已兑换数量" min-width="100" prop="redeemedQuantity" />
+      <el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
+        <template #default="{ row }">
+          {{ getRedeemedQuantity(row) }}
+        </template>
+      </el-table-column>
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -160,6 +163,7 @@ const queryParams = reactive({
   status: null
 })
 const queryFormRef = ref() // 搜索的表单
+const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
 
 /** 查询列表 */
 const getList = async () => {