【代码优化】分支合并

src/views/mall/home/components/OperationDataCard.vue

@@ -11,9 +11,9 @@
         @click="handleClick(item.routerName)"
       >
         <CountTo
-          :prefix="item.prefix"
-          :end-val="item.value"
           :decimals="item.decimals"
+          :end-val="item.value"
+          :prefix="item.prefix"
           class="text-3xl"
         />
         <span class="text-center">{{ item.name }}</span>
@@ -53,10 +53,18 @@ const data = reactive({
 /** 查询订单数据 */
 const getOrderData = async () => {
   const orderCount = await TradeStatisticsApi.getOrderCount()
-  data.orderUndelivered.value = orderCount.undelivered
-  data.orderAfterSaleApply.value = orderCount.afterSaleApply
-  data.orderWaitePickUp.value = orderCount.pickUp
-  data.withdrawAuditing.value = orderCount.auditingWithdraw
+  if (orderCount.undelivered != null) {
+    data.orderUndelivered.value = orderCount.undelivered
+  }
+  if (orderCount.afterSaleApply != null) {
+    data.orderAfterSaleApply.value = orderCount.afterSaleApply
+  }
+  if (orderCount.pickUp != null) {
+    data.orderWaitePickUp.value = orderCount.pickUp
+  }
+  if (orderCount.auditingWithdraw != null) {
+    data.withdrawAuditing.value = orderCount.auditingWithdraw
+  }
 }
 
 /** 查询商品数据 */
@@ -83,6 +91,13 @@ const handleClick = (routerName: string) => {
   router.push({ name: routerName })
 }
 
+/** 激活时 */
+onActivated(() => {
+  getOrderData()
+  getProductData()
+  getWalletRechargeData()
+})
+
 /** 初始化 **/
 onMounted(() => {
   getOrderData()

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

@@ -24,7 +24,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -168,7 +168,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -248,7 +248,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>

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

@@ -18,16 +18,28 @@
       >
         {{ value.name }}
       </el-tag>
-      <el-input
+      <el-select
         v-show="inputVisible(index)"
         :id="`input${index}`"
         :ref="setInputRef"
         v-model="inputValue"
-        class="!w-20"
+        :reserve-keyword="false"
+        allow-create
+        class="!w-30"
+        default-first-option
+        filterable
         size="small"
         @blur="handleInputConfirm(index, item.id)"
+        @change="handleInputConfirm(index, item.id)"
         @keyup.enter="handleInputConfirm(index, item.id)"
-      />
+      >
+        <el-option
+          v-for="item2 in attributeOptions"
+          :key="item2.id"
+          :label="item2.name"
+          :value="item2.name"
+        />
+      </el-select>
       <el-button
         v-show="!inputVisible(index)"
         class="button-new-tag ml-1"
@@ -42,7 +54,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ElInput } from 'element-plus'
 import * as PropertyApi from '@/api/mall/product/property'
 import { PropertyAndValues } from '@/views/mall/product/spu/components'
 import { propTypes } from '@/utils/propTypes'
@@ -63,11 +74,12 @@ const inputRef = ref<any[]>([]) //标签输入框Ref
 const setInputRef = (el: any) => {
   if (el === null || typeof el === 'undefined') return
   // 如果不存在 id 相同的元素才添加
-  if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
+  if (!inputRef.value.some((item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id)) {
     inputRef.value.push(el)
   }
 }
 const attributeList = ref<PropertyAndValues[]>([]) // 商品属性列表
+const attributeOptions = ref([] as PropertyApi.PropertyValueVO[]) // 商品属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -100,16 +112,36 @@ const handleCloseProperty = (index: number) => {
 }
 
 /** 显示输入框并获取焦点 */
-const showInput = async (index) => {
+const showInput = async (index: number) => {
   attributeIndex.value = index
   inputRef.value[index].focus()
+  // 获取属性下拉选项
+  await getAttributeOptions(attributeList.value[index].id)
 }
 
 /** 输入框失去焦点或点击回车时触发 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const handleInputConfirm = async (index: number, propertyId: number) => {
   if (inputValue.value) {
-    // 保存属性值
+    // 1. 重复添加校验
+    if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
+      message.warning('已存在相同属性值，请重试')
+      attributeIndex.value = null
+      inputValue.value = ''
+      return
+    }
+
+    // 2.1 情况一：属性值已存在，则直接使用并结束
+    const existValue = attributeOptions.value.find((item) => item.name === inputValue.value)
+    if (existValue) {
+      attributeIndex.value = null
+      inputValue.value = ''
+      attributeList.value[index].values.push({ id: existValue.id, name: existValue.name })
+      emit('success', attributeList.value)
+      return
+    }
+
+    // 2.2 情况二：新属性值，则进行保存
     try {
       const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
       attributeList.value[index].values.push({ id, name: inputValue.value })
@@ -122,4 +154,9 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
   attributeIndex.value = null
   inputValue.value = ''
 }
+
+/** 获取商品属性下拉选项 */
+const getAttributeOptions = async (propertyId: number) => {
+  attributeOptions.value = await PropertyApi.getPropertyValueSimpleList(propertyId)
+}
 </script>

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

@@ -10,7 +10,22 @@
       @keydown.enter.prevent="submitForm"
     >
       <el-form-item label="属性名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名称" />
+        <el-select
+          v-model="formData.name"
+          :reserve-keyword="false"
+          allow-create
+          class="!w-360px"
+          default-first-option
+          filterable
+          placeholder="请选择属性名称。如果不存在，可手动输入选择"
+        >
+          <el-option
+            v-for="item in attributeOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -37,6 +52,7 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const attributeList = ref([]) // 商品属性列表
+const attributeOptions = ref([] as PropertyApi.PropertyVO[]) // 商品属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -60,15 +76,39 @@ watch(
 const open = async () => {
   dialogVisible.value = true
   resetForm()
+  // 加载列表
+  await getAttributeOptions()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const submitForm = async () => {
-  // 校验表单
+  // 1.1 重复添加校验
+  for (const attrItem of attributeList.value) {
+    if (attrItem.name === formData.value.name) {
+      return message.error('该属性已存在，请勿重复添加')
+    }
+  }
+  // 1.2 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+
+  // 2.1 情况一：属性名已存在，则直接使用并结束
+  const existProperty = attributeOptions.value.find((item) => item.name === formData.value.name)
+  if (existProperty) {
+    // 添加到属性列表
+    attributeList.value.push({
+      id: existProperty.id,
+      ...formData.value,
+      values: []
+    })
+    // 关闭弹窗
+    dialogVisible.value = false
+    return
+  }
+
+  // 2.2 情况二：如果是不存在的属性，则需要执行新增
   // 提交请求
   formLoading.value = true
   try {
@@ -80,6 +120,7 @@ const submitForm = async () => {
       ...formData.value,
       values: []
     })
+    // 关闭弹窗
     message.success(t('common.createSuccess'))
     dialogVisible.value = false
   } finally {
@@ -94,4 +135,14 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+/** 获取商品属性下拉选项 */
+const getAttributeOptions = async () => {
+  formLoading.value = true
+  try {
+    attributeOptions.value = await PropertyApi.getPropertySimpleList()
+  } finally {
+    formLoading.value = false
+  }
+}
 </script>

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

@@ -1,6 +1,13 @@
 <!-- 商品发布 - 库存价格 -->
 <template>
-  <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
+  <el-form
+    ref="formRef"
+    v-loading="formLoading"
+    :disabled="isDetail"
+    :model="formData"
+    :rules="rules"
+    label-width="120px"
+  >
     <el-form-item label="分销类型" props="subCommissionType">
       <el-radio-group
         v-model="formData.subCommissionType"
@@ -94,7 +101,7 @@ const ruleConfig: RuleConfig[] = [
 ]
 
 const message = useMessage() // 消息弹窗
-
+const formLoading = ref(false)
 const props = defineProps({
   propFormData: {
     type: Object as PropType<Spu>,

src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue

@@ -25,7 +25,7 @@ import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { isEmpty } from '@/utils/is'
 import { debounce } from 'lodash-es'
-import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar'
+import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
 
 defineOptions({ name: 'MemberBrowsingHistory' })
 

src/views/mall/trade/afterSale/index.vue

@@ -135,7 +135,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="订单金额" prop="refundPrice">
+      <el-table-column align="center" label="订单金额" min-width="120" prop="refundPrice">
         <template #default="scope">
           <span>{{ fenToYuan(scope.row.refundPrice) }} 元</span>
         </template>
@@ -156,7 +156,7 @@
           <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
         </template>
       </el-table-column>
-      <el-table-column align="center" fixed="right" label="操作" width="120">
+      <el-table-column align="center" fixed="right" label="操作" width="160">
         <template #default="{ row }">
           <el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
         </template>
@@ -181,9 +181,6 @@ import { cloneDeep } from 'lodash-es'
 import { fenToYuan } from '@/utils'
 
 defineOptions({ name: 'TradeAfterSale' })
-const props = defineProps<{
-  userId?: number
-}>()
 
 const { push } = useRouter() // 路由跳转
 
@@ -207,9 +204,9 @@ const queryParams = reactive({
   spuName: null,
   createTime: [],
   way: null,
-  type: null,
-  userId: null
+  type: null
 })
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -219,27 +216,27 @@ const getList = async () => {
     if (data.status === '0') {
       delete data.status
     }
-    if (props.userId) {
-      data.userId = props.userId
-    }
     // 执行查询
     const res = await AfterSaleApi.getAfterSalePage(data)
-    list.value = res.list
+    list.value = res.list as AfterSaleApi.TradeAfterSaleVO[]
     total.value = res.total
   } finally {
     loading.value = false
   }
 }
+
 /** 搜索按钮操作 */
 const handleQuery = async () => {
   queryParams.pageNo = 1
   await getList()
 }
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   handleQuery()
 }
+
 /** tab 切换 */
 const tabClick = async (tab: TabsPaneContext) => {
   queryParams.status = tab.paneName