新增文章图集功能

src/views/content/article/edit.vue

@@ -50,6 +50,14 @@
               <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
             </UploadImg>
         </el-form-item>
+        <el-form-item
+            label="文章图集"
+            prop="imagesList"
+            :rules="{ required: true,message: '请上传文章图集', trigger: 'change' }"
+          >
+          <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="article" 
+          :fileSize="200" :multiple="true" :fileList="formData.fileList"/>
+        </el-form-item>
         <el-form-item label="导读" prop="intro" :rules="{ required: true, message: '请输入导读', trigger: 'blur' }">
           <el-input  placeholder="请输入" v-model="formData.intro" type="textarea"></el-input>
         </el-form-item>
@@ -81,6 +89,7 @@ import {computed, onMounted,ref,shallowRef,reactive  } from "vue";
 import {FormInstance} from "element-plus";
 const formRef = shallowRef<FormInstance>();
 import UploadImg from "@/components/Upload/Image.vue";
+import UploadImgs from '@/components/Upload/Images.vue';
 import {useLockFn} from "@/utils/useLockFn";
 import Editor from '@/components/Editor/tinymce.vue'
 import {message,buildTree} from "@/utils/auth";
@@ -116,11 +125,15 @@ const formData = reactive({
   title: "",
   author: "",
   cover:'',
+  images: '',
   intro:'',
   content:'',
   status:0,
   click:'',
-  sort:0
+  sort:0,
+  imagesList:[],
+  filePath:'',
+  fileList:[],
 });
 
 const dialogClose = () => {
@@ -135,12 +148,29 @@ const setFormData = async (row: any) => {
     }
   }
   editorRef.value.myValue=formData.content
+  // 文章图集
+  if (formData.imagesList) {
+    formData.imagesList.map(item=>{
+      formData.fileList.push({
+        filePath:item
+      })
+    })
+  }
 };
 
 const editorRef=ref()
 
+const fileUploads = (list: any) => {
+  formData.fileList = list
+};
+
 const handleSubmit = async () => {
   await formRef.value?.validate();
+  // 文章图集处理，多个图片逗号分割
+  formData.images =''
+  formData.fileList.map((item,index)=>{
+    formData.images+=`${item.filePath}${index<formData.fileList.length-1?',':''}`
+  })
   let ruleForm = JSON.parse(JSON.stringify(formData));
   ruleForm.content=editorRef.value.myValue
   if (!ruleForm.content) {

src/views/data/config/editItem.vue

@@ -68,30 +68,30 @@
           :format="formData.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'" />
         </template>
         <template v-else-if="formData.type  == 'image'">
-              <UploadImg
+          <UploadImg
-                      @changeFileName="(name)=>formData.fileName=name"
+                  @changeFileName="(name)=>formData.fileName=name"
-                        :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
+                    :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
-                        name="config"
+                    name="config"
-                        :fileSize="200"
+                    :fileSize="200"
-                        v-model:image-url="formData.filePath">
+                    v-model:image-url="formData.filePath">
-                <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
+            <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
-              </UploadImg>
+          </UploadImg>
-            </template>
+        </template>
-            <template v-else-if="formData.type  == 'images'">
+        <template v-else-if="formData.type  == 'images'">
-              <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="config" 
+          <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="config" 
-              :fileSize="200" :multiple="true" :fileList="formData.fileList"/>
+          :fileSize="200" :multiple="true" :fileList="formData.fileList"/>
-            </template>
+        </template>
-            <template v-else-if="formData.type  == 'file'">
+        <template v-else-if="formData.type  == 'file'">
-              <UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"
+          <UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"
-              :file-list="formData.filePath?[{name:formData.fileName,url:formData.filePath}]:[]"/>
+          :file-list="formData.filePath?[{name:formData.fileName,url:formData.filePath}]:[]"/>
-            </template>
+        </template>
-            <template v-else-if="formData.type  == 'files'">
+        <template v-else-if="formData.type  == 'files'">
-              <UploadFile @upload="fileUploads" file-type=".xlsx.xls.doc.docx" name="config" :multiple="true"
+          <UploadFile @upload="fileUploads" file-type=".xlsx.xls.doc.docx" name="config" :multiple="true"
-              :file-list="formData.fileList"/>
+          :file-list="formData.fileList"/>
-            </template>
+        </template>
-            <template v-else-if="formData.type  == 'ueditor'">
+        <template v-else-if="formData.type  == 'ueditor'">
-              <Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config"/>
+          <Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config"/>
-            </template>
+        </template>
       </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input-number v-model="formData.sort" />