多图上传组件优化

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

@@ -2,12 +2,12 @@
   <ContentWrap>
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="120px"
-      v-loading="formLoading"
     >
-      <el-form-item label="hideId" v-show="false">
+      <el-form-item v-show="false" label="hideId">
         <el-input v-model="formData.id" />
       </el-form-item>
       <el-tabs>
@@ -16,9 +16,9 @@
           <el-form-item label="退款理由" prop="afterSaleRefundReasons">
             <el-select
               v-model="formData.afterSaleRefundReasons"
+              allow-create
               filterable
               multiple
-              allow-create
               placeholder="请直接输入退款理由"
             >
               <el-option
@@ -50,15 +50,15 @@
         <el-tab-pane label="配送">
           <el-form-item label="启用包邮" prop="deliveryExpressFreeEnabled">
             <el-switch v-model="formData.deliveryExpressFreeEnabled" style="user-select: none" />
-            <el-text class="w-full" size="small" type="info"> 商城是否启用全场包邮 </el-text>
+            <el-text class="w-full" size="small" type="info"> 商城是否启用全场包邮</el-text>
           </el-form-item>
           <el-form-item label="满额包邮" prop="deliveryExpressFreePrice">
             <el-input-number
               v-model="formData.deliveryExpressFreePrice"
-              placeholder="请输入满额包邮"
-              class="!w-xs"
-              :precision="2"
               :min="0"
+              :precision="2"
+              class="!w-xs"
+              placeholder="请输入满额包邮"
             />
             <el-text class="w-full" size="small" type="info">
               商城商品满多少金额即可包邮，单位：元
@@ -72,7 +72,7 @@
         <el-tab-pane label="分销">
           <el-form-item label="分佣启用" prop="brokerageEnabled">
             <el-switch v-model="formData.brokerageEnabled" style="user-select: none" />
-            <el-text class="w-full" size="small" type="info"> 商城是否开启分销模式 </el-text>
+            <el-text class="w-full" size="small" type="info"> 商城是否开启分销模式</el-text>
           </el-form-item>
           <el-form-item label="分佣模式" prop="brokerageEnabledCondition">
             <el-radio-group v-model="formData.brokerageEnabledCondition">
@@ -109,7 +109,7 @@
             </el-text>
           </el-form-item>
           <el-form-item label="分销海报图">
-            <UploadImgs v-model="formData.brokeragePosterUrls" width="75px" height="125px" />
+            <UploadImgs v-model="formData.brokeragePosterUrls" height="125px" width="75px" />
             <el-text class="w-full" size="small" type="info">
               个人中心分销海报图片，建议尺寸 600x1000
             </el-text>
@@ -117,10 +117,10 @@
           <el-form-item label="一级返佣比例" prop="brokerageFirstPercent">
             <el-input-number
               v-model="formData.brokerageFirstPercent"
-              placeholder="请输入一级返佣比例"
-              class="!w-xs"
-              :min="0"
               :max="100"
+              :min="0"
+              class="!w-xs"
+              placeholder="请输入一级返佣比例"
             />
             <el-text class="w-full" size="small" type="info">
               订单交易成功后给推广人返佣的百分比
@@ -129,10 +129,10 @@
           <el-form-item label="二级返佣比例" prop="brokerageSecondPercent">
             <el-input-number
               v-model="formData.brokerageSecondPercent"
-              placeholder="请输入二级返佣比例"
-              class="!w-xs"
-              :min="0"
               :max="100"
+              :min="0"
+              class="!w-xs"
+              placeholder="请输入二级返佣比例"
             />
             <el-text class="w-full" size="small" type="info">
               订单交易成功后给推广人的推荐人返佣的百分比
@@ -141,9 +141,9 @@
           <el-form-item label="佣金冻结天数" prop="brokerageFrozenDays">
             <el-input-number
               v-model="formData.brokerageFrozenDays"
-              placeholder="请输入佣金冻结天数"
-              class="!w-xs"
               :min="0"
+              class="!w-xs"
+              placeholder="请输入佣金冻结天数"
             />
             <el-text class="w-full" size="small" type="info">
               防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天
@@ -152,10 +152,10 @@
           <el-form-item label="提现最低金额" prop="brokerageWithdrawMinPrice">
             <el-input-number
               v-model="formData.brokerageWithdrawMinPrice"
-              placeholder="请输入提现最低金额"
-              class="!w-xs"
-              :precision="2"
               :min="0"
+              :precision="2"
+              class="!w-xs"
+              placeholder="请输入提现最低金额"
             />
             <el-text class="w-full" size="small" type="info">
               用户提现最低金额限制，单位：元
@@ -164,10 +164,10 @@
           <el-form-item label="提现手续费" prop="brokerageWithdrawFeePercent">
             <el-input-number
               v-model="formData.brokerageWithdrawFeePercent"
-              placeholder="请输入提现手续费"
-              class="!w-xs"
-              :min="0"
               :max="100"
+              :min="0"
+              class="!w-xs"
+              placeholder="请输入提现手续费"
             />
             <el-text class="w-full" size="small" type="info">
               提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现
@@ -184,21 +184,22 @@
                 {{ dict.label }}
               </el-checkbox>
             </el-checkbox-group>
-            <el-text class="w-full" size="small" type="info"> 商城开通提现的付款方式 </el-text>
+            <el-text class="w-full" size="small" type="info"> 商城开通提现的付款方式</el-text>
           </el-form-item>
         </el-tab-pane>
       </el-tabs>
       <!-- 保存 -->
       <el-form-item>
-        <el-button type="primary" @click="submitForm" :loading="formLoading"> 保存 </el-button>
+        <el-button :loading="formLoading" type="primary" @click="submitForm"> 保存</el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import * as ConfigApi from '@/api/mall/trade/config'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'TradeConfig' })
 
@@ -253,12 +254,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = {
-      ...formData.value
-    } as unknown as ConfigApi.ConfigVO
-    data.brokeragePosterUrls = formData.value.brokeragePosterUrls.map((item: any) => {
-      return item?.url ? item.url : item
-    })
+    const data = cloneDeep(unref(formData.value)) as unknown as ConfigApi.ConfigVO
     // 金额放大
     data.deliveryExpressFreePrice = data.deliveryExpressFreePrice * 100
     data.brokerageWithdrawMinPrice = data.brokerageWithdrawMinPrice * 100
@@ -275,7 +271,6 @@ const getConfig = async () => {
   try {
     const data = await ConfigApi.getTradeConfig()
     if (data != null) {
-      data.brokeragePosterUrls = data.brokeragePosterUrls.map((url) => ({ url }))
       formData.value = data
       // 金额缩小
       formData.value.deliveryExpressFreePrice = data.deliveryExpressFreePrice / 100