批量上传字体

src/views/TemplateCenter/font.vue

@@ -53,12 +53,14 @@
       </template>
       <div class="addTemplateBox q-mb-lg fz14">
         <div class="row flex-end q-mb-lg">
+          <!-- :limit="1" -->
           <el-button type="primary" size="small" style="color: #ffff;">
             <el-upload
               ref="upload"  
               :on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,datas.params.fontFamily)"
               action=""
-                :limit="1"
+              
+              multiple
               :auto-upload="false"
               accept=".ttf, .woff, otf"
               :show-file-list="false"
@@ -88,15 +90,52 @@
           <el-input min="750" type="textarea" v-model="datas.params.reduceUrl"
           placeholder="请输入裁剪字体URL" class=""></el-input>
         </div>
+        <el-form ref="FormRef" :model="datas.paramsList" :rules="rules" label-width="120px">
+          <template v-for="(item,index) in datas.paramsList">
+            <el-form-item
+            :label="datas.paramsList.length>0?`名称 ${index+1} `:` ` "
+            :prop="`paramsList.${index}.label`"
+            :rules="rules.label"
+            label-width="100px"
+            label-position="left">
+              <el-input v-model="item.label" clearable></el-input>
+            </el-form-item>
+            <el-form-item
+            :label="datas.paramsList.length>0?`fontFamily ${index+1} `:` ` "
+            :prop="`paramsList.${index}.fontFamily`"
+            :rules="rules.fontFamily"
+            label-width="100px"
+            label-position="left">
+              <el-input v-model="item.fontFamily" clearable></el-input>
+            </el-form-item>
+            <el-form-item
+            :label="datas.paramsList.length>0?`URL ${index+1} `:` ` "
+            :prop="`paramsList.${index}.fontUrl`"
+            :rules="rules.fontUrl"
+            label-width="100px"
+            label-position="left">
+              <el-input v-model="item.fontUrl" clearable></el-input>
+            </el-form-item>
+            <el-form-item
+            :label="datas.paramsList.length>0?`裁剪URL ${index+1} `:` ` "
+            :prop="`paramsList.${index}.reduceUrl`"
+            :rules="rules.reduceUrl"
+            label-width="100px"
+            label-position="left">
+              <el-input v-model="item.reduceUrl" clearable></el-input>
+            </el-form-item>
+          </template>
+          
+        </el-form>
      </div>
       <div class="text-center">
-          <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
+        <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation(FormRef)"
         :loading="requestLoading">
             确认{{datas.params.id?'编辑':'新增'}}
         </el-button>
     </div>
   </el-dialog>
-  </template>
+</template>
   
   <script lang="ts" setup>
   import { reactive, ref, inject, onMounted, watch} from "vue";
@@ -105,7 +144,7 @@
   import { storeToRefs } from "pinia";
   import { USER_DEFAULT_HEADER } from '@/configs/customer'
   import { Edit,Delete } from '@element-plus/icons-vue';
-    import { ElLoading, ElMessage, ElMessageBox, UploadInstance } from 'element-plus'
+  import { ElLoading, ElMessage, ElMessageBox, UploadInstance, FormInstance, FormRules } from 'element-plus'
   import { CustomerFonts } from '@/store/font'
   import {getFonts} from '@/utils/psdParser/index'
   import FontService from '@/services/FontService'
@@ -143,12 +182,28 @@
       fontUrl: '',
       reduceName: '',
       reduceUrl: '',
+    },
+    paramsList:[]
+  })
+  const paramsList = {
+    id: 0,
+    fontFamily: '',
+    label: '',
+    fontUrl: '',
+    reduceName: '',
+    reduceUrl: '',
   }
+  const rules = reactive<FormRules<RuleForm>>({
+    Name: [{required: true,message: '请输入名称',trigger: "blur"}],
+    fontFamily: [{required: true,message: '请输入fontFamily',trigger: "blur"}],
+    fontUrl: [{required: true,message: '请输入UR',trigger: "blur"}],
+    reduceUrl: [{required: true,message: '请输入裁剪URL',trigger: "blur"}],
   })
 
   const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
   const uploadingIndex = ref(-1)
   const upload = ref<UploadInstance>()
+  const FormRef = ref<FormInstance>()
 
   const close = () => {
     datas.params = {
@@ -168,8 +223,23 @@
     upload.value.submit()
   }
 
-    const ConfirmCreation = async () => {
   //添加、编辑字体
+  const ConfirmCreation = async (formEl: FormInstance | undefined) => {
+    if (!formEl || loading.value ) return
+    datas.requestLoading = true
+    await formEl.validate(async (valid) => {
+      if (valid) {
+        console.log(datas.paramsList,'=================')
+      }
+      datas.requestLoading = false
+    })
+    
+    
+  }
+  const upMultiple = () => {
+
+  }
+  const upSingle = async () => {
     if(!datas.params.label)return ElMessage({
       message:'请输入名称',
       type:'error'
@@ -297,12 +367,22 @@
                 }
             } catch (error) { 
             }
+
             datas.params.label = label
             datas.params.fontFamily = fontName
             datas.params.fontUrl = url
             datas.params.reduceName = reduceName
             datas.params.reduceUrl = reduceUrl
-              await ConfirmCreation()
+            let params = {
+              id: 0,
+              fontFamily: fontName,
+              label: label,
+              fontUrl: url,
+              reduceName: reduceName,
+              reduceUrl: reduceUrl,
+            }
+            datas.paramsList.push(params)
+            // await ConfirmCreation()
         }else{
             ElMessage({
                 message:'上传失败，请重试',
@@ -311,7 +391,7 @@
         }
     } catch (error) {
     }
-  }
+}
   const tableScrollHandler = ()=>{
     if(queryObj.pageCount>queryObj.pageIndex){
         queryObj.value.pageIndex++
@@ -335,8 +415,8 @@
     } catch (error) {
         loading.value = false
     }
-  }
-  querySearchHandler()
+}
+querySearchHandler()
   </script>
   
   <style scoped>